@ chai- ui/ 纸箱

颜色、空间、半径、类型和运动值的单一真理源 过柴UI. 一个JSON档案,三个消费者出局:

src/tokens.json  →  dist/css/tokens.css        (CSS custom properties)
                 →  dist/js/index.js/.d.ts      (typed JS/TS exports)
                 →  dist/figma/tokens.figma.json (Figma token set)

编辑符号

编辑 src/tokens.json 只有这个 DTCG口味格式:每片叶子都是 { "$value": ... },一个值可以引用另一个符号 {color.root.green-50} 看到了吗 color.semantic.* 参考实例 color.root.*。总是针对 color.semantic.* (或添加) 新的语义化名)而不是 color.root.* 直接,所以未来 重取主题只触及根调色板。 新的语义作用也需要其 阴暗主题值 color.dark.* (见下文); 建造失败无一.

运行 pnpm build (从这里,或 pnpm --filter @chai-ui/tokens build 从 重新生成根) dist/。 。 。 .

使用符号

支助科

@import "@chai-ui/tokens/css";

.my-thing {
  background: var(--chai-color-semantic-control-surface);
  padding: var(--chai-space-4);
}

联合材料/临时秘书处

import { tokens, flatTokens } from "@chai-ui/tokens";

tokens.color.semantic.accent; // "#009747"
flatTokens["color.semantic.accent"]; // same value, flat lookup

图片

dist/figma/tokens.figma.json 形状为 图格玛的托肯斯工作室 插件 (导入 ~ JSON). 这也是手册的合理起点 如果您不愿添加插件, 则导入图片变量 已解决, 因此在 Figma 端不需要查询 .

这仅仅是一个设计纸箱管道: 它没有保留Figma 组件 与代码组件同步.

黑暗主题

黑暗主题为选入:设置 data-chai-theme="dark" 打开 <html>,或打开 任何元素,切换里面的每个柴分元件. 没有 属性不变.

<html data-chai-theme="dark">

柴不照系统设置,因为你的应用决定了 其主题。 顺其道:

const dark = matchMedia("(prefers-color-scheme: dark)");
const sync = () =>
  dark.matches
    ? document.documentElement.setAttribute("data-chai-theme", "dark")
    : document.documentElement.removeAttribute("data-chai-theme");
sync();
dark.addEventListener("change", sync);

单位 src/tokens.json, (中文(简体) ), color.dark 持有每个语义角色在 暗主题,使用相同的根调色板。 画面上的角色 和录像, media-backdrop 和编辑区域颜色) 两个主题都是一样的。 黑暗主题中的每个文本对会遇到 WCAG 2.2 AA 对比 绿色品牌走向 green-60,因为 green-50 也一样 黑暗的文字在黑暗的表面.

构造会释放暗值 [data-chai-theme="dark"] 内 @chai-ui/tokens/css,与材料颜色角色 再次,所以开关, 提交按钮和文本字段也跟随主题。 调整其中一项作用 仅在暗色主题下覆盖它 :

[data-chai-theme="dark"] {
  --chai-color-semantic-control-surface: #202124;
}