indexer-frontend/tailwind.config.ts at main · 0xmhha/indexer-frontend · 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
import type { Config } from 'tailwindcss'

const config: Config = {
  darkMode: ['class'],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './lib/**/*.{ts,tsx}',
  ],
  theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px',
      },
    },
    extend: {
      colors: {
        // Background layers (Crystalline Infrastructure) - use CSS variables for theme support
        bg: {
          primary: 'var(--bg-primary)',
          secondary: 'var(--bg-secondary)',
          tertiary: 'var(--bg-tertiary)',
        },
        // Accent colors
        accent: {
          blue: '#00D4FF',
          cyan: '#4DD0E1',
          orange: '#FFA726',
          purple: '#AB47BC',
          green: '#66BB6A',
        },
        // Text colors - use CSS variables for theme support
        text: {
          primary: 'var(--text-primary)',
          secondary: 'var(--text-secondary)',
          muted: 'var(--text-muted)',
        },
        // Semantic colors
        success: '#2EA043',
        error: '#F85149',
        warning: '#FFA726',
        info: '#00D4FF',
        // shadcn/ui compatibility
        border: '#21262D',
        input: '#21262D',
        ring: '#00D4FF',
        background: '#0A0E14',
        foreground: '#E6EDF3',
        primary: {
          DEFAULT: '#00D4FF',
          foreground: '#0A0E14',
        },
        secondary: {
          DEFAULT: '#1C2128',
          foreground: '#E6EDF3',
        },
        destructive: {
          DEFAULT: '#F85149',
          foreground: '#E6EDF3',
        },
        muted: {
          DEFAULT: '#21262D',
          foreground: '#8B949E',
        },
        popover: {
          DEFAULT: '#1C2128',
          foreground: '#E6EDF3',
        },
        card: {
          DEFAULT: '#1C2128',
          foreground: '#E6EDF3',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['JetBrains Mono', 'Courier New', 'monospace'],
      },
      spacing: {
        xs: '0.5rem', // 8px
        sm: '1rem', // 16px
        md: '1.5rem', // 24px
        lg: '2rem', // 32px
        xl: '3rem', // 48px
        '2xl': '4rem', // 64px
      },
      borderRadius: {
        lg: '0.5rem',
        md: '0.375rem',
        sm: '0.25rem',
      },
      keyframes: {
        'accordion-down': {
          from: { height: '0' },
          to: { height: 'var(--radix-accordion-content-height)' },
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: '0' },
        },
        pulse: {
          '0%, 100%': { opacity: '1' },
          '50%': { opacity: '0.5' },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
        pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
      },
    },
  },
  plugins: [require('tailwindcss-animate')],
}

export default config