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.

5.9 KiB

Raw Permalink Blame History

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

/* In CSS files */
.my-element {
  background: var(--gradient-primary);
  color: var(--color-primary-600);
  border-color: var(--border-purple);
}

Tailwind Classes

// 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

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

// 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:

: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:

/* 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:

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:

Update React Components: Replace inline Tailwind classes with theme-aware classes

// 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}>

Create Theme Provider: Add a React context for theme management

const ThemeProvider = ({ children, theme = 'default' }) => {
  useEffect(() => {
    document.documentElement.className = `theme-${theme}`;
  }, [theme]);

  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
};

Add Theme Switcher: Allow users to choose themes

const ThemeSwitcher = () => {
  const themes = ['purple', 'blue', 'green', 'dark'];
  // Implementation
};

Update Calendario Config: Use the new theme values

import { calendarioTheme } from '@/config/theme';
// Update src/utils/calendarioConfig.ts

Benefits

Centralized Control: All theme colors in one place
Easy Customization: Change entire color scheme by updating variables
Type Safety: TypeScript theme provides autocomplete and type checking
Performance: CSS variables are efficient and don't require JavaScript
Dark Mode Ready: Structure supports multiple theme variants
Consistent Design: Enforces use of design system colors

Testing Theme Changes

# After making theme changes
npm run dev

# Check TypeScript
npx tsc --noEmit

# Build for production
npm run build

5.9 KiB Raw Permalink Blame History