Current Context
volt
dark
Default Volt ThemeSystem
Using the standard base tokens for this theme.
Brand Colors
Click any color to copy its CSS variable value
Text Colors
Click any color to copy its CSS variable value
UI Colors
Click any color to copy its CSS variable value
Links Colors
Click any color to copy its CSS variable value
Status Colors
Click any color to copy its CSS variable value
Background Colors
Click any color to copy its CSS variable value
Semantic Color Pairs
Pre-configured background and foreground color pairs that ensure proper contrast
Status Colors
Success
bg: var(--color-success)
fg: var(--color-success-foreground)
Warning
bg: var(--color-warning)
fg: var(--color-warning-foreground)
Error
bg: var(--color-error)
fg: var(--color-error-foreground)
Info
bg: var(--color-info)
fg: var(--color-info-foreground)
Accessibility & Utilities
Built-in utilities for checking color contrast and ensuring WCAG compliance
Contrast Checker Example
All semantic color pairs are designed to meet WCAG AA standards
Primary
...
Success
...
Error
...
Available Utilities
Import from @opencosmos/tokens or @opencosmos/ui/utils
getCSSVariable(name)Get computed CSS variable value
getContrastRatio(hex1, hex2)Calculate WCAG contrast ratio
meetsContrastRequirements(fg, bg)Check AA/AAA compliance
hexToRgb(hex)Convert hex to RGB values