fmode-app/tailwind.config.js

/** @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: [],
};