Theme Tokens
elements man style/reference/theme Read as markdownThe semantic layer: color ramps, surfaces, borders, text, and the per-component slots. These are what flip in dark mode and what a brand theme repoints.
Values shown are the light-mode defaults.
<!-- GENERATED by tools/styledocs. Do not hand-edit. -->
white
--white: #ffffff
black
--black: #000000
neutral
--neutral-50: oklch(0.985 0.005 240)
--neutral-100: oklch(0.96 0.008 240)
--neutral-200: oklch(0.92 0.012 240)
--neutral-300: oklch(0.86 0.016 240)
--neutral-400: oklch(0.74 0.020 240)
--neutral-500: oklch(0.62 0.024 240)
--neutral-600: oklch(0.50 0.028 240)
--neutral-700: oklch(0.38 0.032 240)
--neutral-800: oklch(0.28 0.036 240)
--neutral-900: #102C42
--neutral-950: oklch(0.12 0.030 240)
success
--success-50: oklch(0.985 0.010 145)
--success-100: oklch(0.96 0.025 145)
--success-200: oklch(0.92 0.055 145)
--success-300: oklch(0.86 0.100 145)
--success-400: oklch(0.74 0.180 145)
--success-500: oklch(0.62 0.190 145)
--success-600: oklch(0.52 0.155 145)
--success-700: oklch(0.42 0.120 145)
--success-800: oklch(0.32 0.090 145)
--success-900: oklch(0.22 0.065 145)
--success-950: oklch(0.14 0.045 145)
warning
--warning-50: oklch(0.985 0.008 45)
--warning-100: oklch(0.96 0.022 45)
--warning-200: oklch(0.92 0.046 45)
--warning-300: oklch(0.86 0.084 45)
--warning-400: oklch(0.76 0.158 45)
--warning-500: oklch(0.70 0.175 45)
--warning-600: oklch(0.65 0.170 45)
--warning-700: oklch(0.55 0.145 45)
--warning-800: oklch(0.36 0.095 45)
--warning-900: oklch(0.26 0.070 45)
--warning-950: oklch(0.16 0.045 45)
danger
--danger-50: oklch(0.985 0.012 25)
--danger-100: oklch(0.95 0.035 25)
--danger-200: oklch(0.90 0.075 25)
--danger-300: oklch(0.82 0.130 25)
--danger-400: oklch(0.70 0.185 25)
--danger-500: oklch(0.58 0.229 25)
--danger-600: oklch(0.50 0.197 25)
--danger-700: oklch(0.42 0.150 25)
--danger-800: oklch(0.32 0.115 25)
--danger-900: oklch(0.22 0.080 25)
--danger-950: oklch(0.14 0.050 25)
info
--info-50: oklch(0.985 0.007 255)
--info-100: oklch(0.96 0.019 255)
--info-200: oklch(0.92 0.039 255)
--info-300: oklch(0.86 0.070 255)
--info-400: oklch(0.74 0.136 255)
--info-500: oklch(0.62 0.200 255)
--info-600: oklch(0.52 0.172 255)
--info-700: oklch(0.42 0.140 255)
--info-800: oklch(0.32 0.108 255)
--info-900: oklch(0.22 0.077 255)
--info-950: oklch(0.14 0.055 255)
bg
--bg: #ffffff
--bg-soft: var(--neutral-50)
--bg-muted: var(--neutral-100)
--bg-panel: var(--neutral-50)
--bg-elevated: #ffffff
--bg-canvas: var(--neutral-100)
--bg-inverse: var(--neutral-900)
ink
--ink: var(--neutral-900)
--ink-soft: var(--neutral-700)
--ink-dim: var(--neutral-500)
--ink-faint: var(--neutral-400)
--ink-inverse: var(--neutral-50)
--ink-soft-flow: color-mix(in oklab, currentColor 85%, transparent)
rule
--rule: var(--neutral-200)
--rule-soft: var(--neutral-100)
--rule-strong: var(--neutral-300)
accent
--accent: var(--neutral-900)
--accent-deep: var(--neutral-950)
--accent-soft: var(--neutral-100)
--accent-ink: var(--neutral-50)
--accent-edge: var(--neutral-300)
success
--success: var(--success-500)
--success-fill: var(--success-500)
--success-soft: var(--success-50)
--success-ink: var(--success-600)
--success-edge: var(--success-200)
warning
--warning: var(--warning-500)
--warning-soft: var(--warning-50)
--warning-ink: var(--warning-700)
--warning-edge: var(--warning-200)
danger
--danger: var(--danger-500)
--danger-fill: var(--danger-500)
--danger-soft: var(--danger-50)
--danger-ink: var(--danger-600)
--danger-edge: var(--danger-200)
info
--info: var(--info-500)
--info-fill: var(--info-500)
--info-soft: var(--info-50)
--info-ink: var(--info-600)
--info-edge: var(--info-200)
focus
--focus: var(--accent)
--focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--focus)
--focus-ring-danger: 0 0 0 2px var(--bg), 0 0 0 4px var(--danger)
opacity
--opacity-disabled: 0.55
--opacity-muted: 0.7
--opacity-overlay: 0.5
transition
--transition-colors: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), fill var(--duration-fast) var(--ease-out), stroke var(--duration-fast) var(--ease-out)
--transition-shadow: box-shadow var(--duration-fast) var(--ease-out)
--transition-transform: transform var(--duration-fast) var(--ease-out)
--transition-opacity: opacity var(--duration-fast) var(--ease-out)
radius
--radius: 4px
--radius-control: var(--radius)
--radius-surface: var(--radius)
--radius-overlay: var(--radius-md)
--radius-dialog: var(--radius-lg)
--radius-tag: var(--radius-xs)
--radius-pill: var(--radius-full)
checkbox
--checkbox-check: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f8fafc' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E")
select
--select-caret: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23808d9a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E")
input
--input-height: 2.5rem
--input-height-sm: 2rem
--input-height-lg: 3rem
--input-padding-x: 0.875rem
--input-padding-y: 0.5rem
--input-radius: var(--radius-control)
--input-font-size: var(--text-sm)
--input-bg: var(--bg)
--input-border: var(--rule)
--input-border-hover: var(--rule-strong)
--input-border-focus: var(--accent)
--input-placeholder: var(--ink-faint)
button
--button-height: 2.5rem
--button-height-sm: 2rem
--button-height-lg: 3rem
--button-height-hero: 3.5rem
--button-padding-x: 1rem
--button-padding-x-sm: 0.75rem
--button-padding-x-lg: 1.25rem
--button-radius: var(--radius-control)
--button-font-size: var(--text-sm)
--button-font-size-lg: var(--text-base)
--button-font-weight: var(--weight-medium)
avatar
--avatar-size: 2rem
--avatar-size-xs: 1.25rem
--avatar-size-sm: 1.5rem
--avatar-size-lg: 2.5rem
--avatar-size-xl: 3.5rem
--avatar-radius: var(--radius-pill)
terminal
--terminal-bg: var(--neutral-900)
--terminal-ink: var(--neutral-100)
--terminal-dim: var(--neutral-500)