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.
Color Palette
TokenLight modeDark mode
canvas
var(--color-canvas)#f0eff0Light
#1c1c1eDark
elevated
var(--color-elevated)#fafafaLight
#2c2c2eDark
sunken
var(--color-sunken)#e8e7e8Light
#141416Dark
overlay
var(--color-overlay)rgba(250, 250, 250, 0.92)Light
rgba(30, 30, 32, 0.92)Dark
sidebar
var(--color-sidebar)rgba(244, 243, 244, 0.96)Light
rgba(28, 28, 30, 0.95)Dark
surface-1
var(--color-surface-1)#fafafaLight
#2c2c2eDark
surface-2
var(--color-surface-2)#f4f3f4Light
#3a3a3cDark
surface-3
var(--color-surface-3)#eeededLight
#48484aDark
hover
var(--color-hover)rgba(0, 0, 0, 0.04)Light
rgba(255, 255, 255, 0.06)Dark
active
var(--color-active)rgba(0, 0, 0, 0.07)Light
rgba(255, 255, 255, 0.1)Dark
selected
var(--color-selected)rgba(0, 120, 212, 0.1)Light
rgba(10, 132, 255, 0.16)Dark
primary
var(--color-primary)rgba(0, 0, 0, 0.88)Light
rgba(255, 255, 255, 0.92)Dark
secondary
var(--color-secondary)rgba(0, 0, 0, 0.6)Light
rgba(255, 255, 255, 0.55)Dark
tertiary
var(--color-tertiary)rgba(0, 0, 0, 0.36)Light
rgba(255, 255, 255, 0.36)Dark
disabled
var(--color-disabled)rgba(0, 0, 0, 0.24)Light
rgba(255, 255, 255, 0.24)Dark
inverse
var(--color-inverse)rgba(255, 255, 255, 0.95)Light
rgba(0, 0, 0, 0.88)Dark
on-accent
var(--color-on-accent)#ffffffLight
#ffffffDark
code
var(--color-code)#0f766eLight
#2dd4bfDark
line
var(--color-line)rgba(0, 0, 0, 0.12)Light
rgba(255, 255, 255, 0.12)Dark
line-strong
var(--color-line-strong)rgba(0, 0, 0, 0.22)Light
rgba(255, 255, 255, 0.22)Dark
line-subtle
var(--color-line-subtle)rgba(0, 0, 0, 0.06)Light
rgba(255, 255, 255, 0.06)Dark
accent
var(--color-accent)#0078d4Light
#0a84ffDark
accent-hover
var(--color-accent-hover)#006bbfLight
#0071e3Dark
accent-pressed
var(--color-accent-pressed)#005ea8Light
#005bb5Dark
accent-solid
var(--color-accent-solid)#0078d4Light
#0071e3Dark
accent-text
var(--color-accent-text)#005ea8Light
#60a5faDark
accent-tint
var(--color-accent-tint)rgba(0, 120, 212, 0.1)Light
rgba(10, 132, 255, 0.12)Dark
accent-tint-hover
var(--color-accent-tint-hover)rgba(0, 120, 212, 0.16)Light
rgba(10, 132, 255, 0.2)Dark
focus-ring
var(--color-focus-ring)rgba(0, 120, 212, 0.8)Light
rgba(10, 132, 255, 0.9)Dark
success-bg
var(--color-success-bg)#f0fdf4Light
rgba(22, 163, 74, 0.12)Dark
success-border
var(--color-success-border)#bbf7d0Light
rgba(22, 163, 74, 0.3)Dark
success-text
var(--color-success-text)#147a39Light
#4ade80Dark
success-solid
var(--color-success-solid)#15803dLight
#22c55eDark
success-on-solid
var(--color-success-on-solid)#ffffffLight
#000000Dark
warning-bg
var(--color-warning-bg)#fffbebLight
rgba(217, 119, 6, 0.12)Dark
warning-border
var(--color-warning-border)#fde68aLight
rgba(217, 119, 6, 0.3)Dark
warning-text
var(--color-warning-text)#92400eLight
#fbbf24Dark
warning-solid
var(--color-warning-solid)#b45309Light
#f59e0bDark
warning-on-solid
var(--color-warning-on-solid)#ffffffLight
#000000Dark
error-bg
var(--color-error-bg)#fef2f2Light
rgba(220, 38, 38, 0.12)Dark
error-border
var(--color-error-border)#fecacaLight
rgba(220, 38, 38, 0.3)Dark
error-text
var(--color-error-text)#991b1bLight
#f87171Dark
error-solid
var(--color-error-solid)#dc2626Light
#dc2626Dark
error-on-solid
var(--color-error-on-solid)#ffffffLight
#ffffffDark
info-bg
var(--color-info-bg)#eff6ffLight
rgba(37, 99, 235, 0.12)Dark
info-border
var(--color-info-border)#bfdbfeLight
rgba(37, 99, 235, 0.3)Dark
info-text
var(--color-info-text)#1d4ed8Light
#60a5faDark
info-solid
var(--color-info-solid)#2563ebLight
#3b82f6Dark
code-canvas
var(--color-code-canvas)#f6f8faLight
#161b22Dark
code-border
var(--color-code-border)#d0d7deLight
rgba(255, 255, 255, 0.1)Dark
code-comment
var(--color-code-comment)#6e7781Light
#8b949eDark
code-keyword
var(--color-code-keyword)#cf222eLight
#ff7b72Dark
code-string
var(--color-code-string)#0a3069Light
#a5d6ffDark
code-number
var(--color-code-number)#0550aeLight
#79c0ffDark
code-function
var(--color-code-function)#8250dfLight
#d2a8ffDark
thumb
var(--color-thumb)rgba(0, 0, 0, 0.2)Light
rgba(255, 255, 255, 0.2)Dark
track
var(--color-track)transparentLight
transparentDark