CSS Custom Properties Variables
CSS Custom Properties System
Dynamic theming, design tokens, CSS-in-JS integration.
Design Tokens
:root {
--color-primary: #007bff;
--color-secondary: #6c757d;
--spacing-xs: 0.25rem;
--spacing-s: 0.5rem;
--spacing-m: 1rem;
--spacing-l: 2rem;
--radius: 8px;
}
.card {
background: var(--color-background, white);
padding: var(--spacing-m);
border-radius: var(--radius);
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}Dynamic Values
- calc(var(--spacing-l) * 2)
- color-mix(in srgb, var(--primary) 20%, black)
- var(--prop, fallback)