tagdragon/tailwind.config.js at master · onbezucha/tagdragon · 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
92
93
94
95
96
97
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./public/**/*.html",
    "./src/**/*.ts",
  ],
  theme: {
    extend: {
      colors: {
        // Background colors (dark mode defaults, light mode via CSS variables)
        bg: {
          0: 'var(--bg-0)',
          1: 'var(--bg-1)',
          2: 'var(--bg-2)',
          3: 'var(--bg-3)',
          hover: 'var(--bg-hover)',
          active: 'var(--bg-active)',
        },
        // Border colors
        border: {
          DEFAULT: 'var(--border)',
          subtle: 'var(--border-subtle)',
          strong: 'var(--border-strong)',
        },
        // Text colors
        text: {
          0: 'var(--text-0)',
          1: 'var(--text-1)',
          2: 'var(--text-2)',
          3: 'var(--text-3)',
        },
        // Accent colors (Dragon Amber)
        accent: {
          DEFAULT: 'var(--accent)',
          hover: 'var(--accent-hover)',
          active: 'var(--accent-active)',
          muted: 'var(--accent-muted)',
          glow: 'var(--accent-glow)',
        },
        // Dragon brand colors (from logo)
        dragon: {
          gold: '#FBBF24',
          amber: '#F59E0B',
          orange: '#E8710A',
          ember: '#C2410C',
          red: '#DC2626',
        },
        // Semantic colors (preserved)
        green: 'var(--green)',
        red: 'var(--red)',
        yellow: 'var(--yellow)',
        purple: 'var(--purple)',
      },
      fontFamily: {
        mono: ['IBM Plex Mono', 'ui-monospace', 'SF Mono', 'monospace'],
        sans: ['IBM Plex Sans', '-apple-system', 'system-ui', 'sans-serif'],
      },
      fontSize: {
        '2xs': '10px',
        xs: '11px',
        sm: '12px',
        base: '13px',
        lg: '14px',
      },
      lineHeight: {
        tight: '1.5',
        base: '1.6',
        relaxed: '1.7',
      },
      spacing: {
        'sp-1': '4px',
        'sp-2': '8px',
        'sp-3': '12px',
        'sp-4': '16px',
        'sp-5': '20px',
        'sp-6': '24px',
      },
      borderRadius: {
        sm: '3px',
        DEFAULT: '6px',
        lg: '8px',
        full: '999px',
      },
      backdropBlur: {
        xs: '2px',
        sm: '4px',
        DEFAULT: '8px',
        md: '12px',
        lg: '16px',
        xl: '24px',
        '2xl': '40px',
        '3xl': '64px',
      },
    },
  },
  plugins: [],
}