Theme

Bg

Base: var(--colors-bg-base)
Panel: var(--colors-bg-panel)
PanelLight: var(--colors-bg-panel-light)
PanelDark: var(--colors-bg-panel-dark)
Input: var(--colors-bg-input)
Hover: var(--colors-bg-hover)

Surface

Base: var(--colors-surface-base)
Light: var(--colors-surface-light)
Dark: var(--colors-surface-dark)

Text

Base: var(--colors-text-base)
Dimmed: var(--colors-text-dimmed)
Label: var(--colors-text-label)

Border

Base: var(--colors-border-base)
Hover: var(--colors-border-hover)
Light: var(--colors-border-light)
Dark: var(--colors-border-dark)

Accent

Base: var(--colors-accent-base)
Hover: var(--colors-accent-hover)

Primary

Base: var(--colors-primary-base)
Hover: var(--colors-primary-hover)

Secondary

Base: var(--colors-secondary-base)
Hover: var(--colors-secondary-hover)

Success

Base: var(--colors-success-base)
Hover: var(--colors-success-hover)

Info

Base: var(--colors-info-base)
Hover: var(--colors-info-hover)

Warning

Base: var(--colors-warning-base)
Hover: var(--colors-warning-hover)

Error

Base: var(--colors-error-base)
Hover: var(--colors-error-hover)

Spacing

Xs: var(--spacing-xs)
Sm: var(--spacing-sm)
Md: var(--spacing-md)
Lg: var(--spacing-lg)
Xl: var(--spacing-xl)

Sizes

Xs: var(--sizes-xs)
Sm: var(--sizes-sm)
Md: var(--sizes-md)
Lg: var(--sizes-lg)
Xl: var(--sizes-xl)