@wisdomgarden/torque-styles

Torque Design 的设计 token —— Wisdom Garden 设计系统的底座（另两个是 @wisdomgarden/torque 组件库与 @wisdomgarden/torque-icons 图标集）。

设计 token,以纯 CSS 自定义属性(--t-*)发布。零依赖、零构建要求,任何项目都能用 —— React、Vue、甚至一个静态页面。

@wisdomgarden/torque 的全部组件样式都建立在这套变量之上,所以用组件库的项目必须引入本包。

安装

pnpm add @wisdomgarden/torque-styles

用法

一次性引入全部(token + 滚动条样式):

@import '@wisdomgarden/torque-styles';

只要变量、不要滚动条样式:

@import '@wisdomgarden/torque-styles/tokens.css';

按需引入单个文件:

@import '@wisdomgarden/torque-styles/color/color.light.css';
@import '@wisdomgarden/torque-styles/color/color.dark.css';
@import '@wisdomgarden/torque-styles/space/space.css';

包含什么

| 文件 | 内容 | | ------------------------------------ | --------------------------------- | | color/color.light.css | 浅色主题(基准) | | color/color.dark.css | 深色主题 | | color/color.a11y.css | 无障碍主题 | | color/color.light.highcontrast.css | 高对比主题 | | text/text.css | 字号 / 行高 / 字重 / 字体族 | | radius/radius.css | 圆角 | | space/space.css | 间距 | | shadow/shadow.css | 阴影 | | scrollbar/scrollbar.css | 滚动条(输出真实选择器,不只是变量) |

主题切换由 data-mantine-color-scheme / data-a11y 等根元素属性驱动,详见各文件顶部注释。

与 Tailwind 配合

变量可以直接喂给 Tailwind 的 theme 配置:

colors: {
  'text-1': 'var(--t-text-1)',
  'fill-8': 'var(--t-fill-8)',
}