Tokens
Toggle the theme to see both values.
| Token | Preview | Value |
|---|
--ui-color-bg | | light-dark(#ffffff, #12141a) |
--ui-color-surface | | light-dark(#f6f7f9, #1b1e27) |
--ui-color-border | | light-dark(#d9dce3, #343846) |
--ui-color-text | | light-dark(#1b1e27, #eceef3) |
--ui-color-text-muted | | light-dark(#5d6376, #a0a6b8) |
--ui-color-primary | | light-dark(#2f5bea, #6f8dff) |
--ui-color-primary-active | | light-dark(#2447c0, #8aa2ff) |
--ui-color-on-primary | | #ffffff |
--ui-color-success | | light-dark(#1c8a4c, #4cc98a) |
--ui-color-warning | | light-dark(#b9770e, #f0b44c) |
--ui-color-danger | | light-dark(#c4302b, #ff7b73) |
--ui-color-info | | light-dark(#1f7ea8, #5cc0ea) |
All tokens
| Token | Value |
|---|
--ui-color-bg | light-dark(#ffffff, #12141a) |
--ui-color-surface | light-dark(#f6f7f9, #1b1e27) |
--ui-color-border | light-dark(#d9dce3, #343846) |
--ui-color-text | light-dark(#1b1e27, #eceef3) |
--ui-color-text-muted | light-dark(#5d6376, #a0a6b8) |
--ui-color-primary | light-dark(#2f5bea, #6f8dff) |
--ui-color-primary-active | light-dark(#2447c0, #8aa2ff) |
--ui-color-on-primary | #ffffff |
--ui-color-success | light-dark(#1c8a4c, #4cc98a) |
--ui-color-warning | light-dark(#b9770e, #f0b44c) |
--ui-color-danger | light-dark(#c4302b, #ff7b73) |
--ui-color-info | light-dark(#1f7ea8, #5cc0ea) |
--ui-space-1 | 0.25rem |
--ui-space-2 | 0.5rem |
--ui-space-3 | 0.75rem |
--ui-space-4 | 1rem |
--ui-space-6 | 1.5rem |
--ui-space-8 | 2rem |
--ui-radius | 0.5rem |
--ui-radius-full | 999px |
--ui-shadow | 0 1px 3px rgb(0 0 0 / 0.12), 0 4px 12px rgb(0 0 0 / 0.08) |
--ui-font-sans | "Euclid Circular A", system-ui, -apple-system, "Segoe UI", sans-serif |
--ui-text-base | 1rem |
--ui-line-height-normal | 1.5 |
--ui-animation-duration | 0.3s |
--ui-animation-easing | ease-in-out |