1---2name: theming3description: |4 Cross-platform theming and design token system for Phlex (Rails), ReactJS Vite SPA,5 Next.js App Router, and React Native. Covers CSS custom properties, Tailwind v4 @theme,6 dark/light mode, WCAG AA contrast, and per-platform token consumption.7 Triggers on "design tokens", "theming", "dark mode", "color system",8 "theme provider", "CSS variables", "design system", "grid system",9 "design system architect", "spacing system", or "token architecture".10model: sonnet11---1213# Theming & Design Tokens1415Cross-platform theming system providing consistent design tokens across all frontend platforms: Phlex (Rails), ReactJS (Vite SPA), Next.js (App Router), and React Native.1617## When to Apply1819Reference these guidelines when:20- Setting up or modifying a design token system (colors, typography, spacing)21- Implementing dark/light mode switching22- Creating new UI components that consume visual tokens23- Reviewing color contrast for WCAG AA compliance24- Integrating Tailwind CSS with custom themes25- Building a React Native ThemeProvider2627## Platform Guides2829| Platform | Token Consumption | Reference |30|----------|------------------|-----------|31| Tailwind CSS (Vite / Next.js) | `@theme` (v4) or `tailwind.config.ts` (v3), CSS custom properties, `dark:` variant | `references/platform-integration.md` |32| React Native | `ThemeProvider` context, `useTheme()` hook, `StyleSheet` with tokens | `references/platform-integration.md` |33| Phlex (Rails) | Global CSS custom properties, Tailwind utility classes, `class_variants` | `references/platform-integration.md` |3435## Quick Reference3637### Token Categories3839| Category | Examples | Reference |40|----------|----------|-----------|41| Colors | primary, secondary, accent, neutral, semantic (success/warning/error/info), foreground convention | `references/design-tokens.md` |42| Typography | Font families, size scale (xs-5xl), weights, line heights | `references/design-tokens.md` |43| Spacing | 4px base unit, scale from 0.5 to 96 | `references/design-tokens.md` |44| Borders | Border radius scale, border widths | `references/design-tokens.md` |45| Shadows | Elevation scale (sm, md, lg, xl, 2xl) | `references/design-tokens.md` |46| Transitions | Duration scale, easing functions | `references/design-tokens.md` |47| Dark Mode | `prefers-color-scheme`, class toggle, system detection | `references/platform-integration.md` |4849### Ready-to-Use Presets5051| Preset | Style | Reference |52|--------|-------|-----------|53| Corporate | Professional blues, conservative typography | `references/theme-presets.md` |54| Modern | Vibrant gradients, rounded corners, Inter font | `references/theme-presets.md` |55| Minimal | Monochrome palette, tight spacing, system fonts | `references/theme-presets.md` |5657## Full References5859- `references/design-tokens.md` -- Complete design token specification60- `references/platform-integration.md` -- Per-platform integration guides61- `references/theme-presets.md` -- Ready-to-use theme presets
Kaakati