random

Mode

Color adjustments

Lightness

Saturation

100%

Contrast

100%

Base colors

Neutral

Accent

Semantic colors

Success

Danger

Warning

Info

Accent emphasis

Accent emphasis1

Tokens

Backgrounds

Variable name	Value
color-bg
color-bg-muted
color-bg-inverse
color-bg-disabled
color-bg-neutral
color-bg-neutral-hover
color-bg-neutral-active
color-bg-primary
color-bg-primary-hover
color-bg-primary-active
color-bg-primary-muted
color-bg-success
color-bg-success-hover
color-bg-success-active
color-bg-success-muted
color-bg-warning
color-bg-warning-hover
color-bg-warning-active
color-bg-warning-muted
color-bg-danger
color-bg-danger-hover
color-bg-danger-active
color-bg-danger-muted
color-bg-info
color-bg-info-hover
color-bg-info-active
color-bg-info-muted
color-bg-accent
color-bg-accent-hover
color-bg-accent-active
color-bg-accent-muted
color-bg-accent-muted-hover

Foregrounds

Variable name	Value
color-fg
color-fg-muted
color-fg-inverse
color-fg-disabled
color-fg-danger
color-fg-warning
color-fg-success
color-fg-info
color-fg-accent

Borders

Variable name	Value
color-border
color-border-hover
color-border-field
color-border-control
color-border-disabled
color-border-focus
color-border-focus-muted
color-border-success
color-border-accent
color-border-danger
color-border-warning
color-border-info

Colors Layout Typography Components Effects Icons

Mode

Color adjustments

Lightness

Saturation

100%

Contrast

100%

Base colors

Neutral

Accent

Semantic colors

Success

Danger

Warning

Info

Accent emphasis

Accent emphasis1

Tokens

Backgrounds

Variable name	Value
color-bg
color-bg-muted
color-bg-inverse
color-bg-disabled
color-bg-neutral
color-bg-neutral-hover
color-bg-neutral-active
color-bg-primary
color-bg-primary-hover
color-bg-primary-active
color-bg-primary-muted
color-bg-success
color-bg-success-hover
color-bg-success-active
color-bg-success-muted
color-bg-warning
color-bg-warning-hover
color-bg-warning-active
color-bg-warning-muted
color-bg-danger
color-bg-danger-hover
color-bg-danger-active
color-bg-danger-muted
color-bg-info
color-bg-info-hover
color-bg-info-active
color-bg-info-muted
color-bg-accent
color-bg-accent-hover
color-bg-accent-active
color-bg-accent-muted
color-bg-accent-muted-hover

Foregrounds

Variable name	Value
color-fg
color-fg-muted
color-fg-inverse
color-fg-disabled
color-fg-danger
color-fg-warning
color-fg-success
color-fg-info
color-fg-accent

Borders

Variable name	Value
color-border
color-border-hover
color-border-field
color-border-control
color-border-disabled
color-border-focus
color-border-focus-muted
color-border-success
color-border-accent
color-border-danger
color-border-warning
color-border-info

random

Mode

Color adjustments

Base colors

Semantic colors

Accent emphasis

Tokens

Backgrounds

color-bg

color-bg-muted

color-bg-inverse

color-bg-disabled

color-bg-neutral

color-bg-neutral-hover

color-bg-neutral-active

color-bg-primary

color-bg-primary-hover

color-bg-primary-active

color-bg-primary-muted

color-bg-success

color-bg-success-hover

color-bg-success-active

color-bg-success-muted

color-bg-warning

color-bg-warning-hover

color-bg-warning-active

color-bg-warning-muted

color-bg-danger

color-bg-danger-hover

color-bg-danger-active

color-bg-danger-muted

color-bg-info

color-bg-info-hover

color-bg-info-active

color-bg-info-muted

color-bg-accent

color-bg-accent-hover

color-bg-accent-active

color-bg-accent-muted

color-bg-accent-muted-hover

Foregrounds

color-fg

color-fg-muted

color-fg-inverse

color-fg-disabled

color-fg-danger

color-fg-warning

color-fg-success

color-fg-info

color-fg-accent

Borders

color-border

color-border-hover

color-border-field

color-border-control

color-border-disabled

color-border-focus

color-border-focus-muted

color-border-success

color-border-accent

color-border-danger

color-border-warning

color-border-info

Mode

Color adjustments

Base colors

Semantic colors

Accent emphasis

Tokens

Backgrounds

color-bg

color-bg-muted

color-bg-inverse

color-bg-disabled

color-bg-neutral

color-bg-neutral-hover

color-bg-neutral-active

color-bg-primary

color-bg-primary-hover

color-bg-primary-active