/** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{html,ts}'], theme: { // 🔴 以下三项位于 `theme`(非 extend) → **覆盖** Tailwind 默认刻度。 // // 为什么必须覆盖而非 extend: // 底座 147 个组件的类名是**编译期字面量**(rounded-lg / text-sm / px-4), // 不是 var(--r-md)。仅覆盖 CSS 变量令牌对它们**无效**。 // 要让"保持原型视觉"真正生效,必须重映射刻度本身 —— // 这样 `rounded-lg` 在编译后就等于 --r-md,底座零改动即采用原型圆角。 // // 依据:《设计令牌.md》v3.0 §六/§七 · 原型 styles.css 的 8 档字号 / 4 档圆角 borderRadius: { none: '0', // --r-sm(6) —— 小件:徽标、标签、图标块 sm: 'var(--r-sm)', // --r-md(10) —— 卡片/输入/按钮基准(底座最常用 rounded-lg,故映射到此处) DEFAULT: 'var(--r-md)', md: 'var(--r-md)', lg: 'var(--r-md)', // --r-lg(16) —— 弹窗、抽屉、大卡 xl: 'var(--r-lg)', '2xl': 'var(--r-lg)', '3xl': 'var(--r-lg)', // --r-tag(999) —— 胶囊、头像 full: 'var(--r-tag)', }, spacing: { // 8pt 网格(原型刻度),覆盖默认 4px 基数 —— 底座 px-4/gap-2 等自动对齐 px: '1px', 0: '0', 0.5: 'var(--sp-1)', // 4 1: 'var(--sp-1)', // 4 1.5: 'var(--sp-2)', // 8 2: 'var(--sp-2)', // 8 2.5: 'var(--sp-3)', // 12 3: 'var(--sp-3)', // 12 3.5: 'var(--sp-4)', // 16 4: 'var(--sp-4)', // 16 5: 'var(--sp-5)', // 20 6: 'var(--sp-6)', // 24 7: 'var(--sp-6)', // 24 8: 'var(--sp-8)', // 32 9: 'var(--sp-8)', 10: 'var(--sp-8)', 11: 'var(--sp-8)', 12: 'var(--sp-8)', }, fontSize: { // 锁定 8 档(原型刻度)—— 底座 text-sm/text-xs 等自动对齐 xs: 'var(--fs-12)', // 12(原型 --fs-sm) sm: 'var(--fs-15)', // 14(原型 --fs-body,正文基准) base: 'var(--fs-17)', // 16 lg: 'var(--fs-20)', // 20 xl: 'var(--fs-26)', // 28 '2xl': 'var(--fs-42)', // 36 '3xl': 'var(--fs-42)', '4xl': 'var(--fs-42)', }, extend: { // 语义 token → Tailwind 工具类(bg-surface / text-ink / border-edge / bg-primary ...) // 值全部引用 CSS 变量,明暗与配色切换由 _base.scss / _palette.scss 控制。 // 🔴 colors 与 ui-kit/tailwind.config.js 同名同源(不新增前缀)。 colors: { canvas: 'var(--canvas)', surface: { DEFAULT: 'var(--surface)', 2: 'var(--surface-2)', hover: 'var(--surface-hover)', active: 'var(--surface-active)', }, rail: 'var(--rail-surface)', edge: { DEFAULT: 'var(--edge)', strong: 'var(--edge-strong)', }, ink: { DEFAULT: 'var(--ink)', 2: 'var(--ink-2)', }, muted: 'var(--muted)', faint: 'var(--faint)', inverse: 'var(--inverse)', primary: { DEFAULT: 'var(--primary)', hover: 'var(--primary-hover)', active: 'var(--primary-active)', subtle: 'var(--primary-subtle)', content: 'var(--primary-content)', ring: 'var(--primary-ring)', }, success: { DEFAULT: 'var(--success)', subtle: 'var(--success-subtle)', }, danger: { DEFAULT: 'var(--danger)', subtle: 'var(--danger-subtle)', }, warning: { DEFAULT: 'var(--warning)', subtle: 'var(--warning-subtle)', }, info: { DEFAULT: 'var(--info)', subtle: 'var(--info-subtle)', }, // 导航族(深墨 / 浅色随配色变)—— 不只用于导航,但仅限导航语义 nav: { DEFAULT: 'var(--nav-surface)', ink: 'var(--nav-ink)', text: 'var(--nav-text)', muted: 'var(--nav-muted)', line: 'var(--nav-line)', hover: 'var(--nav-hover)', active: 'var(--nav-active)', accent: 'var(--nav-accent)', brand: 'var(--nav-brand)', 'on-brand': 'var(--nav-on-brand)', }, metric: 'var(--metric-fill)', }, // 阴影改引变量(修复底座硬编码 rgb(15 23 42/…) 不受 .dark 影响的缺陷) boxShadow: { soft: 'var(--shadow-soft)', card: 'var(--shadow-card)', pop: 'var(--shadow-pop)', overlay: 'var(--shadow-overlay)', }, // 字号映射:锁定 8 档(补齐底座未映射的缺口 —— 盘点缺口 3) // 间距映射:7 级(盘点缺口 2);注意 Tailwind 默认间距仍可用,此处只加语义别名 // 圆角映射:锁定 4 档 // z-index 映射:禁止魔数(引用底座 --z-* 九级令牌) zIndex: { affix: 'var(--z-affix)', float: 'var(--z-float)', mask: 'var(--z-mask)', popover: 'var(--z-popover)', modal: 'var(--z-modal)', 'context-menu': 'var(--z-context-menu)', palette: 'var(--z-palette)', preview: 'var(--z-preview)', toast: 'var(--z-toast)', }, transitionDuration: { fast: 'var(--motion-fast)', page: 'var(--motion-page)', detail: 'var(--motion-detail)', panel: 'var(--motion-panel)', exit: 'var(--motion-exit)', }, transitionTimingFunction: { standard: 'var(--ease-standard)', }, }, }, plugins: [], };