Css Variables

CSS Variables System

Complete reference for all CSS custom properties available in the theme system.

🎨 Color Variables

Brand Colors

• --ux-primary - Primary brand color

• --ux-primary-light, --ux-primary-dark - Light/dark variants

• --ux-primary-lighter, --ux-primary-lightest - Extended light variants

• --ux-primary-darker, --ux-primary-darkest - Extended dark variants

• --ux-primary-rgb - RGB values for alpha operations

• --ux-on-primary - Contrast color for text on primary background

• --ux-secondary - Secondary brand color (with same variants as primary)

• --ux-tertiary - Tertiary/accent color (with same variants as primary)

• --ux-accent - Alias for tertiary color

Surface Colors

• --ux-background - Main background color
• --ux-surface - Surface/card background color
• --ux-surface-variant - Alternative surface color
• --ux-on-background - Text color on background (high contrast)
• --ux-on-surface - Text color on surface (high contrast)
• --ux-on-surface-variant - Text color on surface variant

State Colors

• --ux-success - Success state color
• --ux-error - Error/danger state color
• --ux-warning - Warning state color
• --ux-info - Info state color
• --ux-on-success, --ux-on-error, --ux-on-warning, --ux-on-info - Contrast colors

Border & Outline

• --ux-outline - Border/outline color
• --ux-border - Border color (alias)
• --ux-divider - Divider/separator color

📝 Typography Variables

Text Colors (Semantic)

• --ux-text-primary - Primary readable text - Main content, highest contrast
• --ux-text-base - Base body text color
• --ux-text-secondary - Secondary/supporting text (70% opacity)
• --ux-text-muted - Muted/less important text (60% opacity)
• --ux-text-disabled - Disabled/inactive text (40% opacity)

Font Families

• --ux-font-family-base - Default system font stack
• --ux-font-family-mono - Monospace font stack

Font Sizes

• --ux-text-2xs through --ux-text-9xl - Complete typography scale (2xs: 10px → 9xl: 128px)
• --ux-font-size-xs through --ux-font-size-4xl - Alternative size scale

Font Weights

• --ux-font-weight-light (300)
• --ux-font-weight-normal (400)
• --ux-font-weight-medium (500)
• --ux-font-weight-semibold (600)
• --ux-font-weight-bold (700)

Line Heights

• --ux-line-height-tight (1.25)
• --ux-line-height-normal (1.5)
• --ux-line-height-loose (1.75)

Letter Spacing

• --ux-letter-spacing-tight (-0.025em)
• --ux-letter-spacing-normal (0)
• --ux-letter-spacing-wide (0.025em)

📏 Spacing Variables

• --ux-spacing-3xs (2px) through --ux-spacing-5xl (96px) - Enhanced spacing scale
• --ux-space-3xs through --ux-space-3xl - Alternative spacing scale

🎭 Border Radius

• --ux-radius-none (0)
• --ux-radius-2xs through --ux-radius-4xl - Complete radius scale
• --ux-radius-full (50%)

💫 Shadow Variables

• --ux-shadow-none - No shadow
• --ux-shadow-xs through --ux-shadow-2xl - Elevation shadows
• --ux-shadow-inner - Inset shadow
• --ux-shadow-colored - Colored shadow using primary color

🌟 Backdrop Filters

• --ux-backdrop-blur-none through --ux-backdrop-blur-3xl - Blur effects

⚡ Transitions & Animations

• --ux-transition-instant through --ux-transition-slowest - Timing durations
• --ux-ease-in, --ux-ease-out, --ux-ease-in-out - Easing functions
• --ux-ease-spring, --ux-ease-bounce - Advanced easing

🔧 Z-Index Scale

• --z-behind (-1) through --z-max (2147483647) - Complete layering system

📱 Responsive Breakpoints

• --bp-2xs (320px) through --bp-2xl (1536px) - Viewport breakpoints
• --cq-xs through --cq-xl - Container query breakpoints

🌟 Glass & Effects (Theme-Aware)

• --ux-glass-bg - Glass background (adapts to light/dark)
• --ux-glass-bg-hover - Hover state
• --ux-glass-blur - Blur intensity (default 20px)
• --ux-glass-border - Glass border
• --ux-glass-shadow - Glass shadow

📦 Legacy Aliases (Backward Compatible)

These map to theme variables for migrating components:

• --surface-ground → --ux-background
• --surface-card → --ux-surface
• --surface-border → --ux-border
• --text-color → --ux-text-primary
• --text-color-secondary → --ux-text-secondary
• --surface-100, --surface-200 → --ux-surface-variant

See THEME_CHEATSHEET.md for copy-paste patterns.

🎯 Usage

All variables are applied by ThemeVariablesService.applyThemeVariables(theme) when a theme is loaded.

Important Notes:

• Text color variables (--ux-text-*) are semantic and should be used for typography
• Brand colors (--ux-primary, etc.) should be used for UI elements, not text
• Always use --ux-text-primary for main readable content, not --ux-primary
• RGB variants (--ux-*-rgb) are available for alpha channel operations
• On colored backgrounds, use --ux-on-{color} (e.g. --ux-on-primary) for text