# Theming and tokens

Every value on this page is read from tokens/tokens.ts at build time. Colours are OKLCH; light is the default and dark is a `dark` class on the html element.

Source page: https://sproutboat.com/ikada/theming

## Colours
| Token | Light | Dark |
| --- | --- | --- |
| --sb-canvas | oklch(0.965 0 0) | oklch(0.18 0.014 255) |
| --sb-surface | oklch(0.995 0 0) | oklch(0.23 0.016 255) |
| --sb-well | oklch(0.962 0 0) | oklch(0.2 0.015 255) |
| --sb-hover | oklch(0.925 0 0) | oklch(0.295 0.018 255) |
| --sb-raised | oklch(1 0 0) | oklch(0.34 0.02 255) |
| --sb-hairline | oklch(0.9 0 0) | oklch(0.3 0.018 255) |
| --sb-hairline-strong | oklch(0.82 0 0) | oklch(0.4 0.02 255) |
| --sb-control-edge | oklch(0.6 0 0) | oklch(0.62 0.02 255) |
| --sb-focus | oklch(0.22 0 0) | oklch(0.95 0.01 255) |
| --sb-fg | oklch(0.22 0 0) | oklch(0.95 0.01 255) |
| --sb-fg-muted | oklch(0.44 0 0) | oklch(0.76 0.018 255) |
| --sb-brand | oklch(0.47 0.12 152) | oklch(0.72 0.12 152) |
| --sb-brand-hover | oklch(0.42 0.105 152) | oklch(0.77 0.12 152) |
| --sb-on-brand | oklch(0.99 0.005 150) | oklch(0.2 0.03 152) |
| --sb-brand-fg | oklch(0.42 0.11 152) | oklch(0.82 0.13 152) |
| --sb-brand-soft | oklch(0.94 0.05 150) | oklch(0.31 0.045 152) |
| --sb-brand-dot | oklch(0.62 0.16 150) | oklch(0.74 0.15 152) |
| --sb-warn-fg | oklch(0.43 0.09 70) | oklch(0.88 0.1 85) |
| --sb-warn-soft | oklch(0.95 0.06 85) | oklch(0.35 0.06 80) |
| --sb-warn-dot | oklch(0.63 0.14 72) | oklch(0.8 0.14 80) |
| --sb-danger | oklch(0.48 0.18 25) | oklch(0.68 0.14 25) |
| --sb-danger-hover | oklch(0.43 0.18 25) | oklch(0.73 0.13 25) |
| --sb-on-danger | oklch(1 0 0) | oklch(0.18 0.04 25) |
| --sb-danger-fg | oklch(0.46 0.18 25) | oklch(0.85 0.1 25) |
| --sb-danger-soft | oklch(0.95 0.035 25) | oklch(0.34 0.08 25) |
| --sb-danger-dot | oklch(0.58 0.2 25) | oklch(0.74 0.16 25) |
| --sb-info-fg | oklch(0.42 0.14 255) | oklch(0.84 0.1 255) |
| --sb-info-soft | oklch(0.94 0.04 255) | oklch(0.33 0.07 255) |
| --sb-info-dot | oklch(0.58 0.15 255) | oklch(0.76 0.13 255) |
| --sb-neutral-fg | oklch(0.42 0 0) | oklch(0.85 0.012 255) |
| --sb-neutral-soft | oklch(0.93 0 0) | oklch(0.33 0.012 255) |
| --sb-neutral-dot | oklch(0.55 0 0) | oklch(0.72 0.012 255) |
| --sb-code-bg | oklch(0.955 0 0) | oklch(0.155 0.012 255) |
| --sb-diff-add | oklch(0.94 0.05 150) | oklch(0.27 0.05 152) |
| --sb-diff-del | oklch(0.95 0.04 25) | oklch(0.27 0.06 25) |
| --sb-chart-requests | oklch(0.55 0.15 255) | oklch(0.76 0.13 255) |
| --sb-chart-errors | oklch(0.58 0.2 25) | oklch(0.74 0.16 25) |
| --sb-chart-deploy | oklch(0.4 0 0) | oklch(0.83 0.015 255) |
| --sb-chart-grid | oklch(0.88 0 0) | oklch(0.34 0.018 255) |
| --sb-chart-2xx | oklch(0.6 0.16 150) | oklch(0.76 0.16 152) |
| --sb-chart-3xx | oklch(0.6 0.12 235) | oklch(0.78 0.1 235) |
| --sb-chart-4xx | oklch(0.62 0.135 75) | oklch(0.8 0.13 80) |
| --sb-chart-5xx | oklch(0.58 0.2 25) | oklch(0.74 0.16 25) |
| --sb-chart-other | oklch(0.55 0 0) | oklch(0.72 0.012 255) |
| --sb-chart-series | oklch(0.55 0.12 300) | oklch(0.76 0.1 300) |
| --sb-scrim | oklch(0.25 0 260 / 0.34) | oklch(0.06 0.012 255 / 0.62) |
## Type scale
- xs: 12/16px, weight 500
- sm: 13/20px, weight 400
- base: 14/20px, weight 400
- md: 15/22px, weight 600
- lg: 18/26px, weight 700
- xl: 24/32px, weight 700
- 2xl: 28/36px, weight 700
- metric: 28/36px, weight 700
## Radius
- xs: 4px
- sm: 6px
- md: 8px
- lg: 10px
- xl: 12px
- 2xl: 14px
- full: full
## Layers
- --sb-z-base: 0
- --sb-z-sticky: 20
- --sb-z-overlay: 50
- --sb-z-modal: 60
- --sb-z-dropdown: 65
- --sb-z-popover: 70
- --sb-z-toast: 80
- --sb-z-tooltip: 90