dev-document/tailwind.config.js at main · 8135925/dev-document · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
/** @type {import('tailwindcss').Config} */
/* ============================================================
 * Tailwind 扩展配置 —— High-Fidelity Claymorphism Design Tokens
 * 严格依据 .trae/skills/Claymorphism/SKILL.md 定义，禁止偏离
 * 仅扩展 SKILL.md 要求的 colors / shadows / animations / fonts
 * ============================================================ */
module.exports = {
  // 启用 class 前缀的暗色模式（Clay 默认浅色画布，预留扩展）
  darkMode: 'class',
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  theme: {
    extend: {
      // ---------- 字体（SKILL.md: Nunito 标题 + DM Sans 正文）----------
      fontFamily: {
        // 标题：圆润终端，呼应 Clay 的柔软质感
        display: ['Nunito', 'sans-serif'],
        // 正文：几何无衬线，高可读性
        body: ['DM Sans', 'sans-serif'],
      },
      // ---------- 颜色（SKILL.md "Candy Shop" 调色板）----------
      colors: {
        clay: {
          // 画布：冷调薰衣草白，禁止纯白
          canvas: '#F4F1FA',
          // 卡片底色（玻璃质感用 bg-white/60~80）
          cardBg: '#FFFFFF',
          // 前景文字：软炭灰（WCAG AA）
          foreground: '#332F3A',
          // 次要文字：深薰衣草灰，正文最低亮度
          muted: '#635F69',
          // 主强调：鲜艳紫罗兰 —— 主 CTA / 品牌强调
          accent: '#7C3AED',
          // 次强调：热粉 —— 渐变与次级强调
          'accent-alt': '#DB2777',
          // 第三色：天空蓝 —— 信息元素与背景 blob
          info: '#0EA5E9',
          // 成功：翡翠绿 —— DOC 文件类型 / 正向指标
          success: '#10B981',
          // 警告：琥珀 —— XLS 文件类型 / 星级
          warning: '#F59E0B',
          // 输入框凹陷底色
          inputRecessed: '#EFEBF5',
        },
      },
      // ---------- 阴影（SKILL.md 4 层阴影栈，通过工具类实现）----------
      // 此处仅登记命名，实际多层 box-shadow 在 globals.css 的 .shadow-clay* 工具类中定义
      boxShadow: {
        // 占位：真实阴影栈见 globals.css（需 inset + 多层，Tailwind config 表达受限）
        clayCard: '16px 16px 32px rgba(160,150,180,0.2), -10px -10px 24px rgba(255,255,255,0.9), inset 6px 6px 12px rgba(139,92,246,0.03), inset -6px -6px 12px rgba(255,255,255,1)',
        clayButton: '12px 12px 24px rgba(139,92,246,0.3), -8px -8px 16px rgba(255,255,255,0.4), inset 4px 4px 8px rgba(255,255,255,0.4), inset -4px -4px 8px rgba(0,0,0,0.1)',
        clayPressed: 'inset 10px 10px 20px #d9d4e3, inset -10px -10px 20px #ffffff',
        clayDeep: '30px 30px 60px #cdc6d9, -30px -30px 60px #ffffff, inset 10px 10px 20px rgba(139,92,246,0.05), inset -10px -10px 20px rgba(255,255,255,0.8)',
      },
      // ---------- 动画（SKILL.md Animation System）----------
      animation: {
        // 8s 零重力漂移 —— 背景 blob 主用
        'clay-float': 'clay-float 8s ease-in-out infinite',
        // 10s 反向旋转漂移
        'clay-float-delayed': 'clay-float-delayed 10s ease-in-out infinite',
        // 12s 大幅漂移 —— Hero 装饰元素
        'clay-float-slow': 'clay-float-slow 12s ease-in-out infinite',
        // 6s 呼吸缩放 —— 光标 / 数据球
        'clay-breathe': 'clay-breathe 6s ease-in-out infinite',
      },
      // ---------- 关键帧 ----------
      keyframes: {
        'clay-float': {
          '0%, 100%': { transform: 'translateY(0) rotate(0deg)' },
          '50%': { transform: 'translateY(-20px) rotate(2deg)' },
        },
        'clay-float-delayed': {
          '0%, 100%': { transform: 'translateY(0) rotate(0deg)' },
          '50%': { transform: 'translateY(-15px) rotate(-2deg)' },
        },
        'clay-float-slow': {
          '0%, 100%': { transform: 'translateY(0) rotate(0deg)' },
          '50%': { transform: 'translateY(-30px) rotate(5deg)' },
        },
        'clay-breathe': {
          '0%, 100%': { transform: 'scale(1)' },
          '50%': { transform: 'scale(1.02)' },
        },
      },
      // ---------- 过渡时长（Clay 的高级感来源于慢速过渡）----------
      transitionDuration: {
        '500': '500ms',
      },
    },
  },
  plugins: [],
};