CSS Theming Assistant - DWP Hours Tracker Design System

Description

A specialized skill for maintaining and extending the DWP Hours Tracker's design system, which uses CSS custom properties for centralized theming. The system provides semantic color naming, light/dark theme support, and automated enforcement through Stylelint to ensure consistency across all components.

Design System Overview

Token Structure

The design system is centralized in client/tokens.css with the following categories:

• Color Palette: Base grays, brand blues, semantic reds/greens/purples/oranges
• Typography: Font families, sizes, weights, and line heights
• Spacing: Consistent spacing scale (xs: 4px, sm: 8px, md: 16px, lg: 24px, xl: 32px, 2xl: 48px)
• Borders: Widths, radii, and styles
• Shadows: Small to extra-large shadow definitions
• Semantic Mappings: Purpose-driven color assignments (primary, error, success, etc.)