Colors
var-ui separates primitive palette steps from semantic color tokens. Components and
recipes reference semantic tokens (e.g. color.tone.accent.foreground) so themes can remap roles without
touching component code.
Palette
Primitive color ramps generated from OKLCH. Each family has ten steps from lightest (1) to
darkest (10). Reference with designTokens.color.palette['family-step'].
rose
crimson
ruby
red
tomato
orange
amber
gold
yellow
lime
grass
green
emerald
jade
teal
mint
cyan
sky
blue
indigo
iris
violet
purple
plum
fuchsia
pink
bronze
brown
taupe
stone
sand
olive
sage
mist
slate
gray
zinc
mauve
neutral
Semantic colors
UI role tokens that map to palette steps or computed mixes. Swatches follow the site color mode — toggle light/dark in the header to compare faces.
background
app --var-ui-color-background-app
surface --var-ui-color-background-surface
subtle --var-ui-color-background-subtle
elevated --var-ui-color-background-elevated
popover --var-ui-color-background-popover
muted --var-ui-color-background-muted
secondary --var-ui-color-background-secondary
tertiary --var-ui-color-background-tertiary
text
primary --var-ui-color-text-primary
secondary --var-ui-color-text-secondary
disabled --var-ui-color-text-disabled
placeholder --var-ui-color-text-placeholder
tone
accent.background --var-ui-color-tone-accent-background
accent.foreground --var-ui-color-tone-accent-foreground
accent.subtleBackground --var-ui-color-tone-accent-subtleBackground
accent.border --var-ui-color-tone-accent-border
accent.foregroundOnBackground --var-ui-color-tone-accent-foregroundOnBackground
success.background --var-ui-color-tone-success-background
success.foreground --var-ui-color-tone-success-foreground
success.subtleBackground --var-ui-color-tone-success-subtleBackground
success.border --var-ui-color-tone-success-border
success.foregroundOnBackground --var-ui-color-tone-success-foregroundOnBackground
warning.background --var-ui-color-tone-warning-background
warning.foreground --var-ui-color-tone-warning-foreground
warning.subtleBackground --var-ui-color-tone-warning-subtleBackground
warning.border --var-ui-color-tone-warning-border
warning.foregroundOnBackground --var-ui-color-tone-warning-foregroundOnBackground
danger.background --var-ui-color-tone-danger-background
danger.foreground --var-ui-color-tone-danger-foreground
danger.subtleBackground --var-ui-color-tone-danger-subtleBackground
danger.border --var-ui-color-tone-danger-border
danger.foregroundOnBackground --var-ui-color-tone-danger-foregroundOnBackground
info.background --var-ui-color-tone-info-background
info.foreground --var-ui-color-tone-info-foreground
info.subtleBackground --var-ui-color-tone-info-subtleBackground
info.border --var-ui-color-tone-info-border
info.foregroundOnBackground --var-ui-color-tone-info-foregroundOnBackground
border
default --var-ui-color-border-default
strong --var-ui-color-border-strong
focus --var-ui-color-border-focus
subtle --var-ui-color-border-subtle
link
default --var-ui-color-link-default
hover --var-ui-color-link-hover
navItem
foreground --var-ui-color-navItem-foreground
background --var-ui-color-navItem-background
hoverBackground --var-ui-color-navItem-hoverBackground
activeBackground --var-ui-color-navItem-activeBackground
selectedBackground --var-ui-color-navItem-selectedBackground
selectedForeground --var-ui-color-navItem-selectedForeground
ring
default --var-ui-color-ring-default
overlay
default --var-ui-color-overlay-default
panel --var-ui-color-overlay-panel
backdrop --var-ui-color-overlay-backdrop
hover --var-ui-color-overlay-hover
pressed --var-ui-color-overlay-pressed
skeleton
default --var-ui-color-skeleton-default
track
default --var-ui-color-track-default
code
base --var-ui-color-code-base
keyword --var-ui-color-code-keyword
title --var-ui-color-code-title
attr --var-ui-color-code-attr
string --var-ui-color-code-string
builtIn --var-ui-color-code-builtIn
comment --var-ui-color-code-comment
name --var-ui-color-code-name
section --var-ui-color-code-section
bullet --var-ui-color-code-bullet
addition --var-ui-color-code-addition
additionBackground --var-ui-color-code-additionBackground
deletion --var-ui-color-code-deletion
deletionBackground --var-ui-color-code-deletionBackground
Using colors
Import token refs from core:
import { designTokens } from '@var-ui/core';
designTokens.color.palette['sky-7'].var; // var(--var-ui-color-palette-sky-7)
designTokens.color.tone.accent.foreground.var; // var(--var-ui-color-tone-accent-foreground)Override semantic colors in a theme via createDesignTheme({ tokens, colorMode }). See
Customize for details.