// New theme-aware classes

``` ### TypeScript/JavaScript ```typescript import { theme, COACH_CLUB_COLOR } from '@/config/theme'; // Use theme colors const buttonColor = theme.colors.primary[600]; const gradient = theme.gradients.button.primary; // Use in calendario config import { calendarioTheme } from '@/config/theme'; ``` ### Using CSS Variables in Components ```tsx // React component with CSS modules import styles from './Component.module.css'; // The CSS module now uses variables .myClass { background: var(--gradient-primary); } ``` ## Changing the Theme To change the theme colors globally: ### Option 1: Update CSS Variables Edit `src/styles/theme.css` and modify the color values: ```css :root { /* Change primary brand color from purple to blue */ --color-primary-600: #2563eb; /* was #9333ea */ } ``` ### Option 2: Create Theme Variants Add theme classes to switch between color schemes: ```css /* Default purple theme */ :root { --color-primary-600: #9333ea; } /* Blue theme variant */ .theme-blue { --color-primary-600: #2563eb; } /* Apply to body or root element */ ``` ### Option 3: Dynamic Theming Use the helper functions in `theme.ts`: ```typescript import { setCSSVariable } from '@/config/theme'; // Change theme dynamically setCSSVariable('--color-primary-600', '#2563eb'); ``` ## Files Updated ### Core Theme Files (New) - `src/styles/theme.css` - CSS variables and utility classes - `src/config/theme.ts` - TypeScript theme configuration - `tailwind.config.cjs` - Extended Tailwind configuration ### Updated Files (Using Theme) - `src/app/[locale]/globals.css` - Now imports and uses theme variables - `src/components/TeamPlayerDisplay.module.css` - Uses purple gradient variables - `src/components/MatchResultDisplay.module.css` - Uses dispute color variables ## Components Still Using Inline Colors The following components still use inline Tailwind classes that could be updated to use the theme system: ### High Priority (Heavy purple/pink usage) - `src/components/Navigation.tsx` - Logo gradients, buttons - `src/app/[locale]/page.tsx` - Landing page with many gradients - `src/components/ScoreSubmissionModal.tsx` - Purple hover states - `src/components/AuthPromptModal.tsx` - Purple gradients ### Medium Priority - `src/components/BookingActionBox.tsx` - `src/components/PendingScoresList.tsx` - `src/components/cards/SelectionCard.tsx` - `src/components/InfoDisplay.tsx` ## Next Steps To complete the theming system: 1. **Update React Components**: Replace inline Tailwind classes with theme-aware classes ```jsx // Before

// After (using new Tailwind config)

// Or using CSS modules

``` 2. **Create Theme Provider**: Add a React context for theme management ```tsx const ThemeProvider = ({ children, theme = 'default' }) => { useEffect(() => { document.documentElement.className = `theme-${theme}`; }, [theme]); return {children}; }; ``` 3. **Add Theme Switcher**: Allow users to choose themes ```tsx const ThemeSwitcher = () => { const themes = ['purple', 'blue', 'green', 'dark']; // Implementation }; ``` 4. **Update Calendario Config**: Use the new theme values ```typescript import { calendarioTheme } from '@/config/theme'; // Update src/utils/calendarioConfig.ts ``` ## Benefits 1. **Centralized Control**: All theme colors in one place 2. **Easy Customization**: Change entire color scheme by updating variables 3. **Type Safety**: TypeScript theme provides autocomplete and type checking 4. **Performance**: CSS variables are efficient and don't require JavaScript 5. **Dark Mode Ready**: Structure supports multiple theme variants 6. **Consistent Design**: Enforces use of design system colors ## Testing Theme Changes ```bash # After making theme changes npm run dev # Check TypeScript npx tsc --noEmit # Build for production npm run build ```