Tokens
Color
55 color tokens, each shown with its value in all three themes. Reference them in
CSS as var(--color-…). These are generated directly from the Zetta spec.
| Token | Light | Dark | Accessibility |
|---|---|---|---|
--color-brand | #b6d600 | #b6d600 | #ffffff |
--color-brand-hover | rgba(182, 214, 0, 0.85) | rgba(182, 214, 0, 0.85) | #f5f5f5 |
--color-brand-active | rgba(182, 214, 0, 0.70) | rgba(182, 214, 0, 0.70) | #e5e5e5 |
--color-brand-text | #0a0a31 | #0a0a31 | #000000 |
--color-brand-bg | #f0fcd4 | #243005 | #000000 |
--color-on-danger | #ffffff | #ffffff | #000000 |
--color-chart-1 | #fdba74 | #fdba74 | #ffffff |
--color-chart-2 | #f97316 | #f97316 | #d9d9d9 |
--color-chart-3 | #ea580c | #ea580c | #a6a6a6 |
--color-chart-4 | #c2410c | #c2410c | #737373 |
--color-chart-5 | #9a3412 | #9a3412 | #404040 |
--color-overlay | rgba(22, 26, 29, 0.6) | rgba(22, 26, 29, 0.6) | rgba(22, 26, 29, 0.6) |
--color-canvas | #ffffff | #1d2125 | #000000 |
--color-surface-card | #ffffff | #22272b | #000000 |
--color-surface-header | #ffffff | #22272b | #000000 |
--color-surface-sidebar | #fafafa | #161a1d | #000000 |
--color-surface-table-header | #f4f4f5 | #282e33 | #000000 |
--color-surface-muted | #bcbcbc | #4c555d | #111111 |
--color-surface-secondary | #f4f4f5 | #282e33 | #1a1a1a |
--color-surface-pressed | #ebebeb | #353e47 | #262626 |
--color-accent | #f5f5f5 | #2c333a | #0a0a0a |
--color-accent-foreground | #0a0a0a | #ffffff | #ffffff |
--color-popover | #ffffff | #22272b | #000000 |
--color-popover-foreground | #0a0a0a | #ffffff | #ffffff |
--color-ink | #0a0a0a | #ffffff | #ffffff |
--color-body | #18181b | #f4f4f5 | #ffffff |
--color-muted | #4b4b4b | #e2e8f0 | #bdbdbd |
--color-placeholder | #767676 | #cbd5e1 | #8c8c8c |
--color-hairline | #e5e5e5 | #454f59 | #404040 |
--color-border-strong | #d0d5dd | #5c6773 | #ffffff |
--color-border-focus | #b6d600 | #b6d600 | #ffffff |
--color-border-announcement | #18181b | #ffffff | #ffffff |
--color-success | #10b981 | #34d399 | #ffffff |
--color-success-text | #065f46 | #a7f3d0 | #ffffff |
--color-success-bg | #d1fae5 | #064e3b | #000000 |
--color-warning | #f59e0b | #fbbf24 | #ffffff |
--color-warning-text | #78350f | #fde047 | #ffffff |
--color-warning-bg | #fef3c7 | #78350f | #000000 |
--color-danger | #ef4444 | #f87171 | #ffffff |
--color-danger-text | #991b1b | #ffb3b3 | #ffffff |
--color-danger-bg | #fee2e2 | #7f1d1d | #000000 |
--color-danger-solid | #ef4444 | #f87171 | #ffffff |
--color-danger-solid-hover | #dc2626 | #f98181 | #f5f5f5 |
--color-danger-solid-active | #b91c1c | #f45b5b | #e5e5e5 |
--color-info | #3b82f6 | #60a5fa | #ffffff |
--color-info-text | #1e3a8a | #bfdbfe | #ffffff |
--color-info-bg | #dbeafe | #1e3a8a | #000000 |
--color-disabled-bg | #f5f5f5 | #22272b | #1a1a1a |
--color-disabled-text | #9ca3af | #6b7280 | #666666 |
--color-disabled-border | #e5e5e5 | #374151 | #404040 |
--color-badge-neutral-text | #0a0a0a | #ffffff | #000000 |
--color-skeleton-bg | #e5e7eb | #2c333a | #111111 |
--color-skeleton-shimmer | #f3f4f6 | #454f59 | #262626 |
--color-spinner-track | #e5e5e5 | #282e33 | #1a1a1a |
--color-spinner-line | #b6d600 | #b6d600 | #ffffff |