fmode-app/ui-kit/tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,ts}'],
  theme: {
    extend: {
      // 语义 token → Tailwind 工具类(bg-surface / text-ink / border-edge / bg-primary ...)
      // 值全部引用 CSS 变量,明暗与主题色切换由 styles.css 中的 :root / .dark / [data-accent] 控制
      colors: {
        canvas: 'var(--canvas)',
        surface: {
          DEFAULT: 'var(--surface)',
          2: 'var(--surface-2)',
          hover: 'var(--surface-hover)',
          active: 'var(--surface-active)',
        },
        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)',
        },
      },
      boxShadow: {
        soft: '0 1px 2px rgb(15 23 42 / 0.04), 0 4px 12px rgb(15 23 42 / 0.06)',
        card: '0 1px 2px rgb(15 23 42 / 0.05), 0 8px 24px rgb(15 23 42 / 0.07)',
        pop: '0 4px 8px rgb(15 23 42 / 0.08), 0 16px 32px rgb(15 23 42 / 0.12)',
        overlay: '0 8px 16px rgb(15 23 42 / 0.1), 0 24px 48px rgb(15 23 42 / 0.18)',
      },
    },
  },
  plugins: [],
};