Format a CSS Custom Properties File

CSS custom properties, commonly called CSS variables, are the foundation of modern design token systems. Unlike preprocessor variables (Sass $variables, Less @variables) that are compiled away at build time, CSS custom properties are live values that exist in the browser's computed style. They cascade through the DOM, can be overridden by more specific selectors, can be read and written by JavaScript at runtime, and respond to media queries — making them far more powerful for dynamic theming than their compile-time counterparts. This example defines a complete set of design tokens covering four categories: colors (primary, hover state, semantic danger and success, background, text, and muted), spacing (a scale from 0.25rem to 2rem using powers of two), border radius (three sizes from subtle to rounded), and typography (font stack definitions and a type scale). Defining all of these on :root makes them available throughout the entire document as global variables. The naming conventions matter: using semantic names like --color-primary instead of --color-blue-500 lets you change the actual color value without renaming all usages. Using --space-4 for 1rem follows the convention where the number represents multiples of the base unit (0.25rem × 4 = 1rem), matching the Tailwind CSS spacing scale that many designers are familiar with. Runtime theming is where CSS custom properties truly shine: to implement dark mode, define a :root[data-theme="dark"] { } block that overrides the same variable names with dark-mode values. Every element using var(--color-bg) and var(--color-text) automatically updates when the theme attribute changes, with no JavaScript touching individual elements. JavaScript only needs to toggle the data-theme attribute on the root element. Integrating with JavaScript: document.documentElement.style.setProperty('--color-primary', userPickedColor) lets users choose their own accent color. document.documentElement.style.getPropertyValue('--space-4') reads a token value from JavaScript for use in calculations. This bidirectional access between CSS and JavaScript is unique to custom properties. Real-world design systems: companies like GitHub, Shopify, and Atlassian publish their design tokens as CSS custom properties that design and engineering teams share as a single source of truth. Changes to a color token in one place propagate through all components that consume it. Tips: organize tokens into a separate tokens.css file that imports before component stylesheets. Consider generating CSS custom properties from a JSON token file using tools like Style Dictionary, which lets designers edit tokens in Figma and engineers consume them in CSS, iOS, and Android simultaneously.

:root {
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-danger: #ef4444;
  --color-success: #22c55e;
  --color-bg: #ffffff;
  --color-text: #0f172a;
  --color-muted: #64748b;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-8: 2rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --font-sans: system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
}