CSS Variables Theme Export for Design Systems

Export ChromUI themes as CSS custom properties. Production-ready CSS variables for colors, typography, spacing, shadows, and border radius. Includes WCAG AA contrast guarantee.

Output Format

The CSS variables export generates a complete `:root` block with all design tokens as custom properties. Variables follow a hierarchical naming convention: `--primary`, `--primary-foreground`, `--background`, `--foreground`, etc. Typography tokens include font families, sizes, line heights, and font weights.

Spacing tokens use a 4px base scale (4px, 8px, 12px, 16px, etc.). Shadow tokens include elevation levels from xs to 2xl. Border radius tokens match common design system scales (none, sm, md, lg, xl, full).

How to Apply

Copy the generated CSS and include it in your stylesheet. Variables are scoped to `:root`, so they're available globally. Use `var(--primary)` in your CSS rules. Works with any framework: React, Vue, Angular, or vanilla JavaScript.

:root {
  /* Colors */
  --primary: #10b981;
  --primary-foreground: #ffffff;
  --secondary: #06b6d4;
  --secondary-foreground: #ffffff;
  --background: #0f172a;
  --foreground: #f1f5f9;
  --muted: #1e293b;
  --muted-foreground: #94a3b8;
  --border: #334155;
  
  /* Typography */
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-lg: 1.125rem;
  --line-height-base: 1.5;
  
  /* Spacing */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-4: 1rem;
  --spacing-8: 2rem;
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(15,23,42,0.08);
  --shadow-md: 0 4px 16px rgba(15,23,42,0.12);
  --shadow-lg: 0 8px 24px rgba(15,23,42,0.16);
  
  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
}