game-insights/tailwind.config.js at main · efeecllk/game-insights · 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {
            fontFamily: {
                // Distinctive typography system
                sans: ['DM Sans', 'system-ui', 'sans-serif'],
                display: ['Sora', 'system-ui', 'sans-serif'],
                mono: ['JetBrains Mono', 'ui-monospace', 'monospace'],
            },
            colors: {
                // Semantic background colors
                'th-bg': {
                    base: 'var(--color-bg-base)',
                    subtle: 'var(--color-bg-subtle)',
                    surface: 'var(--color-bg-surface)',
                    'surface-hover': 'var(--color-bg-surface-hover)',
                    elevated: 'var(--color-bg-elevated)',
                    overlay: 'var(--color-bg-overlay)',
                },

                // Semantic text colors
                'th-text': {
                    primary: 'var(--color-text-primary)',
                    secondary: 'var(--color-text-secondary)',
                    muted: 'var(--color-text-muted)',
                    disabled: 'var(--color-text-disabled)',
                    inverse: 'var(--color-text-inverse)',
                },

                // Border colors
                'th-border': {
                    subtle: 'var(--color-border-subtle)',
                    DEFAULT: 'var(--color-border-default)',
                    strong: 'var(--color-border-strong)',
                    focus: 'var(--color-border-focus)',
                },

                // Accent colors
                'th-accent': {
                    primary: 'var(--color-accent-primary)',
                    'primary-hover': 'var(--color-accent-primary-hover)',
                    'primary-muted': 'var(--color-accent-primary-muted)',
                    secondary: 'var(--color-accent-secondary)',
                    'secondary-hover': 'var(--color-accent-secondary-hover)',
                },

                // Semantic status colors
                'th-success': {
                    DEFAULT: 'var(--color-success)',
                    muted: 'var(--color-success-muted)',
                },
                'th-warning': {
                    DEFAULT: 'var(--color-warning)',
                    muted: 'var(--color-warning-muted)',
                },
                'th-error': {
                    DEFAULT: 'var(--color-error)',
                    muted: 'var(--color-error-muted)',
                },
                'th-info': {
                    DEFAULT: 'var(--color-info)',
                    muted: 'var(--color-info-muted)',
                },

                // Chart colors
                'th-chart': {
                    1: 'var(--color-chart-1)',
                    2: 'var(--color-chart-2)',
                    3: 'var(--color-chart-3)',
                    4: 'var(--color-chart-4)',
                    5: 'var(--color-chart-5)',
                    6: 'var(--color-chart-6)',
                    7: 'var(--color-chart-7)',
                    8: 'var(--color-chart-8)',
                },

                // Interactive states
                'th-interactive': {
                    hover: 'var(--color-interactive-hover)',
                    active: 'var(--color-interactive-active)',
                    selected: 'var(--color-interactive-selected)',
                },

                // Legacy colors (for backward compatibility during migration)
                'bg-darkest': 'var(--color-bg-base)',
                'bg-dark': 'var(--color-bg-subtle)',
                'bg-card': 'var(--color-bg-surface)',
                'bg-card-hover': 'var(--color-bg-surface-hover)',
                'bg-elevated': 'var(--color-bg-elevated)',
                'accent': {
                    primary: 'var(--color-accent-primary)',
                    secondary: 'var(--color-accent-secondary)',
                },
                'chart': {
                    terracotta: 'var(--color-chart-1)',
                    deepTerracotta: 'var(--color-chart-2)',
                    gold: 'var(--color-chart-3)',
                    brown: 'var(--color-chart-4)',
                    earthBrown: 'var(--color-chart-5)',
                    tan: 'var(--color-chart-6)',
                },
            },
            boxShadow: {
                'theme-sm': 'var(--shadow-sm)',
                'theme-md': 'var(--shadow-md)',
                'theme-lg': 'var(--shadow-lg)',
                'theme-xl': 'var(--shadow-xl)',
            },
            borderRadius: {
                'card': '16px',
            },
        },
    },
    plugins: [],
}