# Theme Tokens The 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. ## white ```css --white: #ffffff ``` ## black ```css --black: #000000 ``` ## neutral ```css --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 ```css --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 ```css --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 ```css --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 ```css --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 ```css --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 ```css --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 ```css --rule: var(--neutral-200) --rule-soft: var(--neutral-100) --rule-strong: var(--neutral-300) ``` ## accent ```css --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 ```css --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 ```css --warning: var(--warning-500) --warning-soft: var(--warning-50) --warning-ink: var(--warning-700) --warning-edge: var(--warning-200) ``` ## danger ```css --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 ```css --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 ```css --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 ```css --opacity-disabled: 0.55 --opacity-muted: 0.7 --opacity-overlay: 0.5 ``` ## transition ```css --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 ```css --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 ```css --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 ```css --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 ```css --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 ```css --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 ```css --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 ```css --terminal-bg: var(--neutral-900) --terminal-ink: var(--neutral-100) --terminal-dim: var(--neutral-500) ```