/ frontend / tailwind.config.ts
tailwind.config.ts
  1  import type { Config } from 'tailwindcss'
  2  
  3  export default {
  4    content: [
  5      './index.html',
  6      './src/**/*.{js,ts,jsx,tsx}',
  7      // Include acdc-design source for class detection
  8      '../../acdc-design/src/**/*.{ts,tsx}',
  9    ],
 10    darkMode: 'class',
 11    theme: {
 12      extend: {
 13        colors: {
 14          // Semantic theme colors needed by acdc-design components (shadcn/ui pattern)
 15          background: 'hsl(var(--background, 0 0% 100%))',
 16          foreground: 'hsl(var(--foreground, 240 10% 3.9%))',
 17          card: {
 18            DEFAULT: 'hsl(var(--card, 0 0% 100%))',
 19            foreground: 'hsl(var(--card-foreground, 240 10% 3.9%))',
 20          },
 21          popover: {
 22            DEFAULT: 'hsl(var(--popover, 0 0% 100%))',
 23            foreground: 'hsl(var(--popover-foreground, 240 10% 3.9%))',
 24          },
 25          primary: {
 26            DEFAULT: 'hsl(var(--primary, 239 84% 67%))',
 27            foreground: 'hsl(var(--primary-foreground, 0 0% 98%))',
 28          },
 29          secondary: {
 30            DEFAULT: 'hsl(var(--secondary, 240 4.8% 95.9%))',
 31            foreground: 'hsl(var(--secondary-foreground, 240 5.9% 10%))',
 32          },
 33          muted: {
 34            DEFAULT: 'hsl(var(--muted, 240 4.8% 95.9%))',
 35            foreground: 'hsl(var(--muted-foreground, 240 3.8% 46.1%))',
 36          },
 37          accent: {
 38            DEFAULT: 'hsl(var(--accent, 240 4.8% 95.9%))',
 39            foreground: 'hsl(var(--accent-foreground, 240 5.9% 10%))',
 40          },
 41          destructive: {
 42            DEFAULT: 'hsl(var(--destructive, 0 84.2% 60.2%))',
 43            foreground: 'hsl(var(--destructive-foreground, 0 0% 98%))',
 44          },
 45          border: 'hsl(var(--border, 240 5.9% 90%))',
 46          input: 'hsl(var(--input, 240 5.9% 90%))',
 47          ring: 'hsl(var(--ring, 239 84% 67%))',
 48  
 49          // Background - Light/Dark aware (local theme)
 50          bg: {
 51            primary: 'var(--bg-primary)',
 52            secondary: 'var(--bg-secondary)',
 53            tertiary: 'var(--bg-tertiary)',
 54          },
 55  
 56          // Text - Light/Dark aware
 57          txt: {
 58            primary: 'var(--text-primary)',
 59            secondary: 'var(--text-secondary)',
 60            tertiary: 'var(--text-tertiary)',
 61            muted: 'var(--text-muted)',
 62          },
 63  
 64          // Border - Light/Dark aware
 65          bdr: {
 66            primary: 'var(--border-primary)',
 67            secondary: 'var(--border-secondary)',
 68            subtle: 'var(--border-subtle)',
 69          },
 70  
 71          // ACDC Brand - Alpha (Indigo)
 72          alpha: {
 73            DEFAULT: '#6366F1',
 74            light: '#A5B4FC',
 75            dark: '#4338CA',
 76            50: '#EEF2FF',
 77            100: '#E0E7FF',
 78            200: '#C7D2FE',
 79            300: '#A5B4FC',
 80            400: '#818CF8',
 81            500: '#6366F1',
 82            600: '#4F46E5',
 83            700: '#4338CA',
 84            800: '#3730A3',
 85            900: '#312E81',
 86          },
 87  
 88          // ACDC Brand - Delta (Emerald)
 89          delta: {
 90            DEFAULT: '#10B981',
 91            light: '#6EE7B7',
 92            dark: '#059669',
 93            50: '#ECFDF5',
 94            100: '#D1FAE5',
 95            200: '#A7F3D0',
 96            300: '#6EE7B7',
 97            400: '#34D399',
 98            500: '#10B981',
 99            600: '#059669',
100            700: '#047857',
101            800: '#065F46',
102            900: '#064E3B',
103          },
104  
105          // Semantic
106          success: '#22C55E',
107          warning: '#F59E0B',
108          error: '#EF4444',
109          info: '#3B82F6',
110        },
111        borderRadius: {
112          lg: 'var(--radius, 0.5rem)',
113          md: 'calc(var(--radius, 0.5rem) - 2px)',
114          sm: 'calc(var(--radius, 0.5rem) - 4px)',
115        },
116      },
117    },
118    plugins: [],
119  } satisfies Config