1---2name: theming3description: Cross-platform theming and design token system for Phlex (Rails), ReactJS Vite SPA, Next.js App Router, and React Native. Covers CSS custom properties, Tailwind v4 @theme, dark/light mode, WCAG AA contrast, and per-platform token consumption. Triggers on "design tokens", "theming", "dark mode", "color system", "theme provider", "CSS variables", "design system", "grid system", "design system architect", "spacing system", or "token architecture".4---56# Theming & Design Tokens78Cross-platform theming system providing consistent design tokens across all frontend platforms: Phlex (Rails), ReactJS (Vite SPA), Next.js (App Router), and React Native.910## When to Apply1112Reference these guidelines when:13- Setting up or modifying a design token system (colors, typography, spacing)14- Implementing dark/light mode switching15- Creating new UI components that consume visual tokens16- Reviewing color contrast for WCAG AA compliance17- Integrating Tailwind CSS with custom themes18- Building a React Native ThemeProvider1920## Platform Guides2122| Platform | Token Consumption | Reference |23|----------|------------------|-----------|24| Tailwind CSS (Vite / Next.js) | `@theme` (v4) or `tailwind.config.ts` (v3), CSS custom properties, `dark:` variant | `references/platform-integration.md` |25| React Native | `ThemeProvider` context, `useTheme()` hook, `StyleSheet` with tokens | `references/platform-integration.md` |26| Phlex (Rails) | Global CSS custom properties, Tailwind utility classes, `class_variants` | `references/platform-integration.md` |2728## Quick Reference2930### Token Categories3132| Category | Examples | Reference |33|----------|----------|-----------|34| Colors | primary, secondary, accent, neutral, semantic (success/warning/error/info), foreground convention | `references/design-tokens.md` |35| Typography | Font families, size scale (xs-5xl), weights, line heights | `references/design-tokens.md` |36| Spacing | 4px base unit, scale from 0.5 to 96 | `references/design-tokens.md` |37| Borders | Border radius scale, border widths | `references/design-tokens.md` |38| Shadows | Elevation scale (sm, md, lg, xl, 2xl) | `references/design-tokens.md` |39| Transitions | Duration scale, easing functions | `references/design-tokens.md` |40| Dark Mode | `prefers-color-scheme`, class toggle, system detection | `references/platform-integration.md` |4142### Ready-to-Use Presets4344| Preset | Style | Reference |45|--------|-------|-----------|46| Corporate | Professional blues, conservative typography | `references/theme-presets.md` |47| Modern | Vibrant gradients, rounded corners, Inter font | `references/theme-presets.md` |48| Minimal | Monochrome palette, tight spacing, system fonts | `references/theme-presets.md` |4950## Full References5152- `references/design-tokens.md` -- Complete design token specification53- `references/platform-integration.md` -- Per-platform integration guides54- `references/theme-presets.md` -- Ready-to-use theme presets
Kaakati