agentic-ui logoagentic-ui

Colors

Semantic color tokens that adapt automatically to light and dark mode. Override any token by re-declaring the CSS variable after importing the stylesheet.

Accent scale — 11 steps

Numeric accent ramp (accent-1 … accent-11) alongside the semantic aliases. Useful when you need more gradation than tint / hover / pressed provide.

accent-1

var(--accent-1)

accent-2

var(--accent-2)

accent-3

var(--accent-3)

accent-4

var(--accent-4)

accent-5

var(--accent-5)

accent-6

var(--accent-6)

accent-7

var(--accent-7)

accent-8

var(--accent-8)

accent-9

var(--accent-9)

accent-10

var(--accent-10)

accent-11

var(--accent-11)

Color Palette

canvas

var(--color-canvas)

elevated

var(--color-elevated)

sunken

var(--color-sunken)

overlay

var(--color-overlay)

sidebar

var(--color-sidebar)

surface-1

var(--color-surface-1)

surface-2

var(--color-surface-2)

surface-3

var(--color-surface-3)

hover

var(--color-hover)

active

var(--color-active)

selected

var(--color-selected)

primary

var(--color-primary)

secondary

var(--color-secondary)

tertiary

var(--color-tertiary)

disabled

var(--color-disabled)

inverse

var(--color-inverse)

on-accent

var(--color-on-accent)

code

var(--color-code)

line

var(--color-line)

line-strong

var(--color-line-strong)

line-subtle

var(--color-line-subtle)

accent

var(--color-accent)

accent-hover

var(--color-accent-hover)

accent-pressed

var(--color-accent-pressed)

accent-solid

var(--color-accent-solid)

accent-text

var(--color-accent-text)

accent-tint

var(--color-accent-tint)

accent-tint-hover

var(--color-accent-tint-hover)

focus-ring

var(--color-focus-ring)

success-bg

var(--color-success-bg)

success-border

var(--color-success-border)

success-text

var(--color-success-text)

success-solid

var(--color-success-solid)

success-solid-hover

var(--color-success-solid-hover)

success-on-solid

var(--color-success-on-solid)

warning-bg

var(--color-warning-bg)

warning-border

var(--color-warning-border)

warning-text

var(--color-warning-text)

warning-solid

var(--color-warning-solid)

warning-solid-hover

var(--color-warning-solid-hover)

warning-on-solid

var(--color-warning-on-solid)

error-bg

var(--color-error-bg)

error-border

var(--color-error-border)

error-text

var(--color-error-text)

error-solid

var(--color-error-solid)

error-solid-hover

var(--color-error-solid-hover)

error-on-solid

var(--color-error-on-solid)

info-bg

var(--color-info-bg)

info-border

var(--color-info-border)

info-text

var(--color-info-text)

info-solid

var(--color-info-solid)

info-solid-hover

var(--color-info-solid-hover)

code-canvas

var(--color-code-canvas)

code-border

var(--color-code-border)

code-comment

var(--color-code-comment)

code-keyword

var(--color-code-keyword)

code-string

var(--color-code-string)

code-number

var(--color-code-number)

code-function

var(--color-code-function)

thumb

var(--color-thumb)

track

var(--color-track)