Colors - Rails UI Components

Semantic Tokens

Use semantic tokens instead of raw color values. They adapt to theme changes automatically.

/* CSS Variables - use in custom styles */
background-color: var(--color-accent);
color: var(--color-foreground);
border-color: var(--color-border);

Layout

Background

--color-background

Foreground

--color-foreground

Surface

--color-surface

Muted

--color-muted

Border

--color-border

Overlay

--color-overlay

Accent

--color-accent

Accent Hover

--color-accent-hover

Accent FG

--color-accent-foreground

Accent Soft

--color-accent-soft

Accent Soft FG

--color-accent-soft-fg

Ring

--color-ring

Status Colors

Destructive

destructive

soft

soft-fg

Success

success

soft

soft-fg

Warning

warning

soft

soft-fg

Info

info

soft

soft-fg

Builder Configuration

These base variables control the entire theme and will be adjustable in the Builder.

:root {
  --accent-hue: 262;        /* Accent color hue (0-360) */
  --accent-chroma: 0.245;   /* Accent color saturation */
  --gray-chroma: 0.006;     /* Amount of color in grays */
  --radius-base: 0.375rem;  /* Base border radius */
  --radius-form: 0.375rem;  /* Form elements radius */
}

Component Preview

All components use semantic tokens and will adapt to theme changes.