You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
222 lines
5.9 KiB
Markdown
222 lines
5.9 KiB
Markdown
# Playchoo Theme System
|
|
|
|
## Overview
|
|
|
|
The Playchoo theme system has been refactored to be fully themable using CSS variables, TypeScript constants, and Tailwind configuration. All violet, purple, and pink colors are now centralized and can be easily modified.
|
|
|
|
## Theme Structure
|
|
|
|
### 1. CSS Variables (`src/styles/theme.css`)
|
|
- Core color definitions using CSS custom properties
|
|
- Gradient definitions
|
|
- Component-specific variables
|
|
- Dark mode support ready
|
|
|
|
### 2. TypeScript Theme (`src/config/theme.ts`)
|
|
- JavaScript/TypeScript access to theme values
|
|
- Helper functions for dynamic theming
|
|
- Calendario theme configuration
|
|
- Export constants for components
|
|
|
|
### 3. Tailwind Config (`tailwind.config.cjs`)
|
|
- Extended color palette
|
|
- Custom gradient backgrounds
|
|
- Integration with design system
|
|
|
|
## Color Palette
|
|
|
|
### Primary Colors (Purple/Violet)
|
|
- `primary-50` to `primary-900`: Full purple spectrum
|
|
- Special shades:
|
|
- `purple-coach`: #8b5cf6 (for coach/club status)
|
|
- `purple-vibrant`: #a855f7
|
|
- `purple-deep`: #7c3aed
|
|
- `purple-brand`: #9333ea (main brand purple)
|
|
|
|
### Secondary Colors (Indigo)
|
|
- `secondary-50` to `secondary-900`: Full indigo spectrum
|
|
- Used in gradients with purple
|
|
|
|
### Accent Colors (Pink)
|
|
- `accent-50` to `accent-900`: Full pink spectrum
|
|
- Special shades:
|
|
- `pink-light`: #f093fb
|
|
- `pink-warm`: #fa709a
|
|
- `pink-pale`: #fed6e3
|
|
- `pink-hot`: #f5576c
|
|
|
|
## Usage Examples
|
|
|
|
### CSS Variables
|
|
```css
|
|
/* In CSS files */
|
|
.my-element {
|
|
background: var(--gradient-primary);
|
|
color: var(--color-primary-600);
|
|
border-color: var(--border-purple);
|
|
}
|
|
```
|
|
|
|
### Tailwind Classes
|
|
```jsx
|
|
// Original Tailwind classes still work
|
|
<div className="bg-purple-600 text-white">
|
|
|
|
// New theme-aware classes
|
|
<div className="bg-primary-600 text-white">
|
|
<div className="bg-gradient-primary">
|
|
<div className="border-dispute-border">
|
|
```
|
|
|
|
### 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 */
|
|
<body className="theme-blue">
|
|
```
|
|
|
|
### 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
|
|
<div className="bg-gradient-to-r from-indigo-600 to-purple-600">
|
|
|
|
// After (using new Tailwind config)
|
|
<div className="bg-gradient-primary">
|
|
|
|
// Or using CSS modules
|
|
<div className={styles.gradientPrimary}>
|
|
```
|
|
|
|
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 <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
|
|
};
|
|
```
|
|
|
|
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
|
|
``` |