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