Colors

Semantic color tokens map design intent to CSS custom properties. They adapt to light and dark themes and should be preferred over primitive palette values in product code.

Use semantic tokens with var() in CSS or through utility classes documented on the Colors utilities page.

Product / accent

Default

accent --ro-colors-accent

accent foreground --ro-colors-accent-foreground

Light

accent light --ro-colors-accent-light

accent foreground light --ro-colors-accent-foreground-light

Hover

accent hover --ro-colors-accent-hover

Hover light

accent hover light --ro-colors-accent-hover-light

Active

accent active --ro-colors-accent-active

Active light

accent active light --ro-colors-accent-active-light

accent active foreground light --ro-colors-accent-active-foreground-light

Disabled

accent disabled --ro-colors-accent-disabled

accent disabled foreground --ro-colors-accent-disabled-foreground

Disabled light

accent disabled light --ro-colors-accent-disabled-light

accent disabled foreground light --ro-colors-accent-disabled-foreground-light

Secondary

accent secondary --ro-colors-accent-secondary

accent secondary foreground --ro-colors-accent-secondary-foreground

Success

success --ro-colors-success

success light --ro-colors-success-light

success hover --ro-colors-success-hover

success hover light --ro-colors-success-hover-light

Warning

warning --ro-colors-warning

warning light --ro-colors-warning-light

warning hover --ro-colors-warning-hover

warning hover light --ro-colors-warning-hover-light

Danger

danger --ro-colors-danger

danger light --ro-colors-danger-light

danger hover --ro-colors-danger-hover

danger hover light --ro-colors-danger-hover-light

danger active --ro-colors-danger-active

danger active light --ro-colors-danger-active-light

Favorite

favorite --ro-colors-favorite

favorite hover --ro-colors-favorite-hover

favorite light --ro-colors-favorite-light

favorite hover light --ro-colors-favorite-hover-light

favorite active light --ro-colors-favorite-active-light

Text

text primary --ro-colors-text-primary

text intermediate --ro-colors-text-intermediate

text secondary --ro-colors-text-secondary

text inverted --ro-colors-text-inverted

text deep --ro-colors-text-deep

link --ro-colors-link

link visited --ro-colors-link-visited

Borders

border light --ro-colors-border-light

border regular --ro-colors-border-regular

border accentuated --ro-colors-border-accentuated

Backgrounds

bg branding --ro-colors-bg-branding

bg underlay --ro-colors-bg-underlay

bg container --ro-colors-bg-container

bg overlay --ro-colors-bg-overlay

bg overlay inverted --ro-colors-bg-overlay-inverted

bg dark --ro-colors-bg-dark

bg backdrop --ro-colors-bg-backdrop

Surfaces

component light --ro-colors-component-light

component regular --ro-colors-component-regular

component accentuated --ro-colors-component-accentuated

component deep --ro-colors-component-deep

component inverted --ro-colors-component-inverted

component opaque --ro-colors-component-opaque

component transluent --ro-colors-component-transluent

AI gradients

gradient ai --ro-gradients-ai

gradient ai 8% --ro-gradients-ai-opacity-8

gradient ai 20% --ro-gradients-ai-opacity-20

gradient ai 32% --ro-gradients-ai-opacity-32

gradient ai 40% --ro-gradients-ai-opacity-40

Dynamic colors

Each palette exposes three semantic tokens: foreground and bg for text and light surfaces; expressive bg for saturated fills. Pair expressive backgrounds with --ro-colors-expressive-fg for text.

Yellow

foreground --ro-colors-yellow-foreground

bg --ro-colors-yellow-bg

expressive bg --ro-colors-yellow-expressive-bg

Orange

foreground --ro-colors-orange-foreground

bg --ro-colors-orange-bg

expressive bg --ro-colors-orange-expressive-bg

Brown

foreground --ro-colors-brown-foreground

bg --ro-colors-brown-bg

expressive bg --ro-colors-brown-expressive-bg

Red

foreground --ro-colors-red-foreground

bg --ro-colors-red-bg

expressive bg --ro-colors-red-expressive-bg

Pink

foreground --ro-colors-pink-foreground

bg --ro-colors-pink-bg

expressive bg --ro-colors-pink-expressive-bg

Purple

foreground --ro-colors-purple-foreground

bg --ro-colors-purple-bg

expressive bg --ro-colors-purple-expressive-bg

Blue

foreground --ro-colors-blue-foreground

bg --ro-colors-blue-bg

expressive bg --ro-colors-blue-expressive-bg

Green

foreground --ro-colors-green-foreground

bg --ro-colors-green-bg

expressive bg --ro-colors-green-expressive-bg

Grey

foreground --ro-colors-grey-foreground

bg --ro-colors-grey-bg

expressive bg --ro-colors-grey-expressive-bg

Usage

Reference tokens directly in component styles:

.my-banner {
  color: var(--ro-colors-text-primary);
  background-color: var(--ro-colors-success-light);
  border: 1px solid var(--ro-colors-border-regular);
}

Switch between light and dark themes with [data-ro-mode="dark"] on a root element — semantic tokens resolve to the correct values automatically.