TypeScript · Design Tokens

规则

颜色 / 圆角 / 字体 / 动画时长只能从单一来源消费——通过 antd ConfigProvider.theme.token 注入 CSS 变量，所有组件读 CSS 变量。

Token 来源（唯一可信源）

// src/main.tsx
const antdTheme = {
  token: {
    colorPrimary:    "#3b82f6",
    colorSuccess:    "#10b981",
    colorWarning:    "#f59e0b",
    colorError:      "#ef4444",
    borderRadius:    8,
    borderRadiusLG:  12,
    fontFamily:      '-apple-system, "PingFang SC", system-ui, sans-serif',
    fontSize:        13,
    motionDurationFast: "0.15s",
    motionDurationMid:  "0.24s",
    motionDurationSlow: "0.4s",
  },
};

<ConfigProvider theme={antdTheme} locale={zhCN}>
  <App />
</ConfigProvider>

CSS 变量层（覆盖 antd 没暴露的）

/* src/styles/tokens.css */
:root {
  /* 文字层级 */
  --text-strong:    #0f172a;
  --text-primary:   #334155;
  --text-secondary: #64748b;
  --text-tertiary:  #94a3b8;
  --text-disabled:  #cbd5e1;

  /* 背景 */
  --bg-page:        #f8fafc;
  --bg-container:   #ffffff;
  --bg-hover:       #f1f5f9;
  --bg-active:      #e2e8f0;

  /* 边框 */
  --border:         #e5e7eb;
  --border-strong:  #cbd5e1;

  /* 间距 */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;

  /* 圆角（与 antd 一致） */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
}

组件内使用

// ✅ CSS 变量
<div style={{ color: "var(--text-primary)", padding: "var(--space-md)" }}>

// ✅ Module CSS
.card {
  background: var(--bg-container);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

// ❌ 硬编码颜色 — 改主题时漏改
<div style={{ color: "#334155" }}>

// ❌ 在多处定义同一个值
const PRIMARY = "#3b82f6";   // 应来自 token

与 GSAP 动画 token 协同

// src/animations/tokens.ts — 动画时长
export const D = {
  micro:  0.15,
  base:   0.24,
  slow:   0.4,
  hero:   0.6,
} as const;

export const E = {
  out:    "power2.out",
  inOut:  "power2.inOut",
  bounce: "back.out(1.7)",
} as const;

与 antd 的 motionDurationFast/Mid/Slow 数值对齐。

自检

[ ] 没在组件里硬编码颜色值？
[ ] 所有颜色来自 antd token 或 tokens.css 变量？
[ ] 动画时长用 D 常量，不写魔法数字？
[ ] 改主题色只需改 main.tsx + tokens.css？

typescript-design-tokens

TypeScript · Design Tokens

规则

Token 来源（唯一可信源）

CSS 变量层（覆盖 antd 没暴露的）

组件内使用

与 GSAP 动画 token 协同

自检

相关