---
url: "https://vueda.dev/v3/reference/theming/tokens/color-palette-light.md"
title: "Color palette: light tokens"
---

# Color palette: light tokens

Fixed identity colours with supporting mixes. Primary fills and
readable primary text have separate roles in both modes.

| Name | Light | Dark | Description | Tailwind utility |
| --- | --- | --- | --- | --- |
| `--vueda-brand-blue` | `oklch(         0.59053715 0.21130455 257.19718572     )` |  | identity blue inherited from Arrai; unchanged in dark mode. |  |
| `--vueda-brand-navy` | `oklch(         0.21742541 0.05238341 242.80769382     )` |  | identity dark blue; the dark page surface and light text colour. |  |
| `--vueda-brand-grey` | `oklch(0.92190602 0 0)` |  | identity grey; dark body text and light supporting surfaces. |  |
| `--background` | `oklch(1 0 0)` | `var(--vueda-brand-navy)` | page surface. | `color: background` |
| `--foreground` | `var(--vueda-brand-navy)` | `var(--vueda-brand-grey)` | default text on the page. | `color: foreground` |
| `--card` | `oklch(1 0 0)` | `color-mix(in srgb, var(--vueda-brand-navy) 96%, var(--vueda-brand-grey))` | card surface, separated by an edge rather than elevation. | `color: card` |
| `--card-foreground` | `var(--foreground)` | `var(--foreground)` | text on a card. | `color: card-foreground` |
| `--popover` | `oklch(1 0 0)` | `color-mix(in srgb, var(--vueda-brand-navy) 92%, var(--vueda-brand-grey))` | floating menus, popovers, and command lists. | `color: popover` |
| `--popover-foreground` | `var(--foreground)` | `var(--foreground)` | text on a floating surface. | `color: popover-foreground` |
| `--primary` | `var(--vueda-brand-blue)` |  | primary action fill and selected-state markers. | `color: primary` |
| `--primary-foreground` | `color-mix(         in srgb,         var(--vueda-brand-navy) 50%,         oklch(0 0 0)     )` |  | dark labels on primary fills in both modes. | `color: primary-foreground` |
| `--primary-hover` | `color-mix(in srgb, var(--primary) 90%, oklch(1 0 0))` |  | primary fill on hover. | `color: primary-hover` |
| `--primary-active` | `color-mix(in srgb, var(--primary) 82%, oklch(1 0 0))` |  | primary fill when pressed. | `color: primary-active` |
| `--primary-text` | `color-mix(         in srgb,         var(--primary) 72%,         var(--vueda-brand-navy)     )` | `color-mix(in srgb, var(--primary) 68%, oklch(1 0 0))` | blue text on page, card, and lightly tinted surfaces. | `color: primary-text` |
| `--primary-text-active` | `color-mix(         in srgb,         var(--primary) 64%,         var(--vueda-brand-navy)     )` | `color-mix(in srgb, var(--primary) 56%, oklch(1 0 0))` | pressed primary link text. | `color: primary-text-active` |
| `--secondary` | `color-mix(in srgb, var(--vueda-brand-grey) 36%, oklch(1 0 0))` | `color-mix(in srgb, var(--vueda-brand-navy) 88%, var(--vueda-brand-grey))` | neutral filled controls. | `color: secondary` |
| `--secondary-foreground` | `var(--foreground)` | `var(--foreground)` | text on secondary fills. | `color: secondary-foreground` |
| `--secondary-hover` | `var(--vueda-brand-grey)` | `color-mix(in srgb, var(--vueda-brand-navy) 76%, var(--vueda-brand-grey))` | secondary fill on hover. | `color: secondary-hover` |
| `--secondary-active` | `color-mix(         in srgb,         var(--vueda-brand-grey) 88%,         var(--vueda-brand-navy)     )` | `color-mix(in srgb, var(--vueda-brand-navy) 64%, var(--vueda-brand-grey))` | pressed secondary fill. | `color: secondary-active` |
| `--muted` | `color-mix(in srgb, var(--vueda-brand-grey) 36%, oklch(1 0 0))` | `color-mix(in srgb, var(--vueda-brand-navy) 88%, var(--vueda-brand-grey))` | subdued supporting surfaces. | `color: muted` |
| `--muted-foreground` | `color-mix(         in srgb,         var(--vueda-brand-navy) 68%,         oklch(1 0 0)     )` | `color-mix(in srgb, var(--vueda-brand-grey) 72%, var(--vueda-brand-navy))` | captions and supporting labels. | `color: muted-foreground` |
| `--accent` | `var(--vueda-brand-grey)` | `color-mix(in srgb, var(--vueda-brand-navy) 78%, var(--vueda-brand-grey))` | menu hover and toggle selection; rows use half strength. | `color: accent` |
| `--accent-foreground` | `var(--foreground)` | `var(--foreground)` | text on neutral hover and selection surfaces. | `color: accent-foreground` |
| `--accent-active` | `color-mix(         in srgb,         var(--vueda-brand-grey) 88%,         var(--vueda-brand-navy)     )` | `color-mix(in srgb, var(--vueda-brand-navy) 66%, var(--vueda-brand-grey))` | pressed neutral surface. | `color: accent-active` |
| `--destructive` | `oklch(0.5 0.18 27)` | `oklch(0.7 0.19 27)` | destructive actions and error text; tinted surfaces use /10. | `color: destructive` |
| `--destructive-foreground` | `oklch(1 0 0)` |  | text on a destructive fill. | `color: destructive-foreground` |
| `--destructive-hover` | `oklch(0.44 0.18 27)` | `oklch(0.56 0.18 27)` | destructive fill on hover. | `color: destructive-hover` |
| `--destructive-active` | `oklch(0.37 0.16 27)` | `oklch(0.58 0.18 27)` | destructive fill when pressed. | `color: destructive-active` |
| `--success` | `oklch(0.45 0.12 155)` | `oklch(0.72 0.16 155)` | success text; pair with /10 surfaces and /50 edges. | `color: success` |
| `--success-foreground` | `oklch(1 0 0)` | `var(--primary-foreground)` | labels on solid success fills. | `color: success-foreground` |
| `--warning` | `oklch(0.49 0.12 70)` | `oklch(0.78 0.15 70)` | warning text; pair with /10 surfaces and /50 edges. | `color: warning` |
| `--warning-foreground` | `oklch(1 0 0)` | `var(--primary-foreground)` | labels on solid warning fills. | `color: warning-foreground` |
| `--info` | `var(--primary-text)` | `var(--primary-text)` | informational text and tints use the readable blue. | `color: info` |
| `--info-foreground` | `oklch(1 0 0)` | `var(--primary-foreground)` | labels on solid informational fills. | `color: info-foreground` |
| `--border` | `color-mix(in srgb, var(--vueda-brand-navy) 14%, oklch(1 0 0))` | `color-mix(in srgb, var(--vueda-brand-navy) 82%, var(--vueda-brand-grey))` | separators and default edges. | `color: border` |
| `--border-strong` | `color-mix(         in srgb,         var(--vueda-brand-navy) 26%,         oklch(1 0 0)     )` | `color-mix(in srgb, var(--vueda-brand-navy) 70%, var(--vueda-brand-grey))` | resting outline controls and stronger edges. | `color: border-strong` |
| `--input` | `var(--border)` | `var(--border)` | default painted input edge. | `color: input` |
| `--field` | `color-mix(in srgb, var(--vueda-brand-grey) 36%, oklch(1 0 0))` | `color-mix(in srgb, var(--vueda-brand-navy) 88%, var(--vueda-brand-grey))` | editable field fill. | `color: field` |
| `--field-hover` | `color-mix(in srgb, var(--vueda-brand-grey) 72%, oklch(1 0 0))` | `color-mix(in srgb, var(--vueda-brand-navy) 83%, var(--vueda-brand-grey))` | editable field fill on hover. | `color: field-hover` |
| `--disabled` | `var(--vueda-brand-grey)` | `color-mix(in srgb, var(--vueda-brand-navy) 82%, var(--vueda-brand-grey))` | inert fill replacing a disabled control's tone. | `color: disabled` |
| `--disabled-foreground` | `color-mix(         in srgb,         var(--vueda-brand-navy) 44%,         oklch(1 0 0)     )` | `color-mix(in srgb, var(--vueda-brand-grey) 44%, var(--vueda-brand-navy))` | disabled labels on filled and transparent controls. | `color: disabled-foreground` |
| `--field-line` | `var(--muted-foreground)` | `var(--muted-foreground)` | editable field's bottom edge; read-only fields use --border. | `color: field-line` |
| `--ring` | `var(--primary-text)` | `var(--primary-text)` | focus colour with contrast independent of the primary fill. | `color: ring` |
| `--overlay` | `color-mix(in srgb, var(--vueda-brand-navy) 60%, transparent)` |  | modal scrim in either mode. | `color: overlay` |
| `--sunken` | `color-mix(         in srgb,         var(--vueda-brand-grey) 72%,         oklch(1 0 0)     )` | `color-mix(in srgb, var(--vueda-brand-navy) 85%, oklch(0 0 0))` | recessed code and empty-state surfaces. | `color: sunken` |
| `--sidebar` | `color-mix(in srgb, var(--vueda-brand-grey) 36%, oklch(1 0 0))` | `color-mix(in srgb, var(--vueda-brand-navy) 65%, oklch(0 0 0))` | sidebar and app chrome. | `color: sidebar` |
| `--sidebar-foreground` | `var(--foreground)` | `var(--foreground)` | sidebar text. | `color: sidebar-foreground` |
| `--sidebar-primary` | `var(--primary)` |  | brand rail and selected icon colour. | `color: sidebar-primary` |
| `--sidebar-primary-foreground` | `var(--primary-foreground)` |  | labels on sidebar primary fills. | `color: sidebar-primary-foreground` |
| `--sidebar-primary-text` | `color-mix(         in srgb,         var(--sidebar-primary) 72%,         var(--vueda-brand-navy)     )` | `color-mix(in srgb, var(--sidebar-primary) 68%, oklch(1 0 0))` | readable blue for tinted sidebar badges. | `color: sidebar-primary-text` |
| `--sidebar-accent` | `var(--vueda-brand-grey)` | `color-mix(in srgb, var(--vueda-brand-navy) 92%, var(--vueda-brand-grey))` | sidebar hover and selection fill. | `color: sidebar-accent` |
| `--sidebar-accent-foreground` | `var(--foreground)` | `var(--foreground)` | text on sidebar hover and selection. | `color: sidebar-accent-foreground` |
| `--sidebar-accent-active` | `color-mix(         in srgb,         var(--vueda-brand-grey) 88%,         var(--vueda-brand-navy)     )` | `color-mix(in srgb, var(--vueda-brand-navy) 84%, var(--vueda-brand-grey))` | pressed sidebar fill. | `color: sidebar-accent-active` |
| `--sidebar-border` | `var(--border)` | `var(--border)` | sidebar edges and separators. | `color: sidebar-border` |
| `--sidebar-ring` | `var(--ring)` | `var(--ring)` | sidebar focus colour. | `color: sidebar-ring` |

## Tokens

<a id="css-token-vueda-brand-blue"></a>

### --vueda-brand-blue

| Field | Value |
| --- | --- |
| Light | `oklch(         0.59053715 0.21130455 257.19718572     )` |
| Source | `client/lib/theme/vueda-tailwind/base.css:454` |

identity blue inherited from Arrai; unchanged in dark mode.

<a id="css-token-vueda-brand-navy"></a>

### --vueda-brand-navy

| Field | Value |
| --- | --- |
| Light | `oklch(         0.21742541 0.05238341 242.80769382     )` |
| Source | `client/lib/theme/vueda-tailwind/base.css:457` |

identity dark blue; the dark page surface and light text colour.

<a id="css-token-vueda-brand-grey"></a>

### --vueda-brand-grey

| Field | Value |
| --- | --- |
| Light | `oklch(0.92190602 0 0)` |
| Source | `client/lib/theme/vueda-tailwind/base.css:460` |

identity grey; dark body text and light supporting surfaces.

<a id="css-token-background"></a>

### --background

| Field | Value |
| --- | --- |
| Light | `oklch(1 0 0)` |
| Dark | `var(--vueda-brand-navy)` |
| Tailwind utility | `color: background` |
| Source | `client/lib/theme/vueda-tailwind/base.css:463` |

page surface.

<a id="css-token-foreground"></a>

### --foreground

| Field | Value |
| --- | --- |
| Light | `var(--vueda-brand-navy)` |
| Dark | `var(--vueda-brand-grey)` |
| Tailwind utility | `color: foreground` |
| Source | `client/lib/theme/vueda-tailwind/base.css:464` |

default text on the page.

<a id="css-token-card"></a>

### --card

| Field | Value |
| --- | --- |
| Light | `oklch(1 0 0)` |
| Dark | `color-mix(in srgb, var(--vueda-brand-navy) 96%, var(--vueda-brand-grey))` |
| Tailwind utility | `color: card` |
| Source | `client/lib/theme/vueda-tailwind/base.css:465` |

card surface, separated by an edge rather than elevation.

<a id="css-token-card-foreground"></a>

### --card-foreground

| Field | Value |
| --- | --- |
| Light | `var(--foreground)` |
| Dark | `var(--foreground)` |
| Tailwind utility | `color: card-foreground` |
| Source | `client/lib/theme/vueda-tailwind/base.css:466` |

text on a card.

<a id="css-token-popover"></a>

### --popover

| Field | Value |
| --- | --- |
| Light | `oklch(1 0 0)` |
| Dark | `color-mix(in srgb, var(--vueda-brand-navy) 92%, var(--vueda-brand-grey))` |
| Tailwind utility | `color: popover` |
| Source | `client/lib/theme/vueda-tailwind/base.css:467` |

floating menus, popovers, and command lists.

<a id="css-token-popover-foreground"></a>

### --popover-foreground

| Field | Value |
| --- | --- |
| Light | `var(--foreground)` |
| Dark | `var(--foreground)` |
| Tailwind utility | `color: popover-foreground` |
| Source | `client/lib/theme/vueda-tailwind/base.css:468` |

text on a floating surface.

<a id="css-token-primary"></a>

### --primary

| Field | Value |
| --- | --- |
| Light | `var(--vueda-brand-blue)` |
| Tailwind utility | `color: primary` |
| Source | `client/lib/theme/vueda-tailwind/base.css:471` |

primary action fill and selected-state markers.

<a id="css-token-primary-foreground"></a>

### --primary-foreground

| Field | Value |
| --- | --- |
| Light | `color-mix(         in srgb,         var(--vueda-brand-navy) 50%,         oklch(0 0 0)     )` |
| Tailwind utility | `color: primary-foreground` |
| Source | `client/lib/theme/vueda-tailwind/base.css:472` |

dark labels on primary fills in both modes.

<a id="css-token-primary-hover"></a>

### --primary-hover

| Field | Value |
| --- | --- |
| Light | `color-mix(in srgb, var(--primary) 90%, oklch(1 0 0))` |
| Tailwind utility | `color: primary-hover` |
| Source | `client/lib/theme/vueda-tailwind/base.css:477` |

primary fill on hover.

<a id="css-token-primary-active"></a>

### --primary-active

| Field | Value |
| --- | --- |
| Light | `color-mix(in srgb, var(--primary) 82%, oklch(1 0 0))` |
| Tailwind utility | `color: primary-active` |
| Source | `client/lib/theme/vueda-tailwind/base.css:478` |

primary fill when pressed.

<a id="css-token-primary-text"></a>

### --primary-text

| Field | Value |
| --- | --- |
| Light | `color-mix(         in srgb,         var(--primary) 72%,         var(--vueda-brand-navy)     )` |
| Dark | `color-mix(in srgb, var(--primary) 68%, oklch(1 0 0))` |
| Tailwind utility | `color: primary-text` |
| Source | `client/lib/theme/vueda-tailwind/base.css:479` |

blue text on page, card, and lightly tinted surfaces.

<a id="css-token-primary-text-active"></a>

### --primary-text-active

| Field | Value |
| --- | --- |
| Light | `color-mix(         in srgb,         var(--primary) 64%,         var(--vueda-brand-navy)     )` |
| Dark | `color-mix(in srgb, var(--primary) 56%, oklch(1 0 0))` |
| Tailwind utility | `color: primary-text-active` |
| Source | `client/lib/theme/vueda-tailwind/base.css:484` |

pressed primary link text.

<a id="css-token-secondary"></a>

### --secondary

| Field | Value |
| --- | --- |
| Light | `color-mix(in srgb, var(--vueda-brand-grey) 36%, oklch(1 0 0))` |
| Dark | `color-mix(in srgb, var(--vueda-brand-navy) 88%, var(--vueda-brand-grey))` |
| Tailwind utility | `color: secondary` |
| Source | `client/lib/theme/vueda-tailwind/base.css:491` |

neutral filled controls.

<a id="css-token-secondary-foreground"></a>

### --secondary-foreground

| Field | Value |
| --- | --- |
| Light | `var(--foreground)` |
| Dark | `var(--foreground)` |
| Tailwind utility | `color: secondary-foreground` |
| Source | `client/lib/theme/vueda-tailwind/base.css:492` |

text on secondary fills.

<a id="css-token-secondary-hover"></a>

### --secondary-hover

| Field | Value |
| --- | --- |
| Light | `var(--vueda-brand-grey)` |
| Dark | `color-mix(in srgb, var(--vueda-brand-navy) 76%, var(--vueda-brand-grey))` |
| Tailwind utility | `color: secondary-hover` |
| Source | `client/lib/theme/vueda-tailwind/base.css:493` |

secondary fill on hover.

<a id="css-token-secondary-active"></a>

### --secondary-active

| Field | Value |
| --- | --- |
| Light | `color-mix(         in srgb,         var(--vueda-brand-grey) 88%,         var(--vueda-brand-navy)     )` |
| Dark | `color-mix(in srgb, var(--vueda-brand-navy) 64%, var(--vueda-brand-grey))` |
| Tailwind utility | `color: secondary-active` |
| Source | `client/lib/theme/vueda-tailwind/base.css:494` |

pressed secondary fill.

<a id="css-token-muted"></a>

### --muted

| Field | Value |
| --- | --- |
| Light | `color-mix(in srgb, var(--vueda-brand-grey) 36%, oklch(1 0 0))` |
| Dark | `color-mix(in srgb, var(--vueda-brand-navy) 88%, var(--vueda-brand-grey))` |
| Tailwind utility | `color: muted` |
| Source | `client/lib/theme/vueda-tailwind/base.css:499` |

subdued supporting surfaces.

<a id="css-token-muted-foreground"></a>

### --muted-foreground

| Field | Value |
| --- | --- |
| Light | `color-mix(         in srgb,         var(--vueda-brand-navy) 68%,         oklch(1 0 0)     )` |
| Dark | `color-mix(in srgb, var(--vueda-brand-grey) 72%, var(--vueda-brand-navy))` |
| Tailwind utility | `color: muted-foreground` |
| Source | `client/lib/theme/vueda-tailwind/base.css:500` |

captions and supporting labels.

<a id="css-token-accent"></a>

### --accent

| Field | Value |
| --- | --- |
| Light | `var(--vueda-brand-grey)` |
| Dark | `color-mix(in srgb, var(--vueda-brand-navy) 78%, var(--vueda-brand-grey))` |
| Tailwind utility | `color: accent` |
| Source | `client/lib/theme/vueda-tailwind/base.css:505` |

menu hover and toggle selection; rows use half strength.

<a id="css-token-accent-foreground"></a>

### --accent-foreground

| Field | Value |
| --- | --- |
| Light | `var(--foreground)` |
| Dark | `var(--foreground)` |
| Tailwind utility | `color: accent-foreground` |
| Source | `client/lib/theme/vueda-tailwind/base.css:506` |

text on neutral hover and selection surfaces.

<a id="css-token-accent-active"></a>

### --accent-active

| Field | Value |
| --- | --- |
| Light | `color-mix(         in srgb,         var(--vueda-brand-grey) 88%,         var(--vueda-brand-navy)     )` |
| Dark | `color-mix(in srgb, var(--vueda-brand-navy) 66%, var(--vueda-brand-grey))` |
| Tailwind utility | `color: accent-active` |
| Source | `client/lib/theme/vueda-tailwind/base.css:507` |

pressed neutral surface.

<a id="css-token-destructive"></a>

### --destructive

| Field | Value |
| --- | --- |
| Light | `oklch(0.5 0.18 27)` |
| Dark | `oklch(0.7 0.19 27)` |
| Tailwind utility | `color: destructive` |
| Source | `client/lib/theme/vueda-tailwind/base.css:514` |

destructive actions and error text; tinted surfaces use /10.

<a id="css-token-destructive-foreground"></a>

### --destructive-foreground

| Field | Value |
| --- | --- |
| Light | `oklch(1 0 0)` |
| Tailwind utility | `color: destructive-foreground` |
| Source | `client/lib/theme/vueda-tailwind/base.css:515` |

text on a destructive fill.

<a id="css-token-destructive-hover"></a>

### --destructive-hover

| Field | Value |
| --- | --- |
| Light | `oklch(0.44 0.18 27)` |
| Dark | `oklch(0.56 0.18 27)` |
| Tailwind utility | `color: destructive-hover` |
| Source | `client/lib/theme/vueda-tailwind/base.css:516` |

destructive fill on hover.

<a id="css-token-destructive-active"></a>

### --destructive-active

| Field | Value |
| --- | --- |
| Light | `oklch(0.37 0.16 27)` |
| Dark | `oklch(0.58 0.18 27)` |
| Tailwind utility | `color: destructive-active` |
| Source | `client/lib/theme/vueda-tailwind/base.css:517` |

destructive fill when pressed.

<a id="css-token-success"></a>

### --success

| Field | Value |
| --- | --- |
| Light | `oklch(0.45 0.12 155)` |
| Dark | `oklch(0.72 0.16 155)` |
| Tailwind utility | `color: success` |
| Source | `client/lib/theme/vueda-tailwind/base.css:518` |

success text; pair with /10 surfaces and /50 edges.

<a id="css-token-success-foreground"></a>

### --success-foreground

| Field | Value |
| --- | --- |
| Light | `oklch(1 0 0)` |
| Dark | `var(--primary-foreground)` |
| Tailwind utility | `color: success-foreground` |
| Source | `client/lib/theme/vueda-tailwind/base.css:519` |

labels on solid success fills.

<a id="css-token-warning"></a>

### --warning

| Field | Value |
| --- | --- |
| Light | `oklch(0.49 0.12 70)` |
| Dark | `oklch(0.78 0.15 70)` |
| Tailwind utility | `color: warning` |
| Source | `client/lib/theme/vueda-tailwind/base.css:520` |

warning text; pair with /10 surfaces and /50 edges.

<a id="css-token-warning-foreground"></a>

### --warning-foreground

| Field | Value |
| --- | --- |
| Light | `oklch(1 0 0)` |
| Dark | `var(--primary-foreground)` |
| Tailwind utility | `color: warning-foreground` |
| Source | `client/lib/theme/vueda-tailwind/base.css:521` |

labels on solid warning fills.

<a id="css-token-info"></a>

### --info

| Field | Value |
| --- | --- |
| Light | `var(--primary-text)` |
| Dark | `var(--primary-text)` |
| Tailwind utility | `color: info` |
| Source | `client/lib/theme/vueda-tailwind/base.css:522` |

informational text and tints use the readable blue.

<a id="css-token-info-foreground"></a>

### --info-foreground

| Field | Value |
| --- | --- |
| Light | `oklch(1 0 0)` |
| Dark | `var(--primary-foreground)` |
| Tailwind utility | `color: info-foreground` |
| Source | `client/lib/theme/vueda-tailwind/base.css:523` |

labels on solid informational fills.

<a id="css-token-border"></a>

### --border

| Field | Value |
| --- | --- |
| Light | `color-mix(in srgb, var(--vueda-brand-navy) 14%, oklch(1 0 0))` |
| Dark | `color-mix(in srgb, var(--vueda-brand-navy) 82%, var(--vueda-brand-grey))` |
| Tailwind utility | `color: border` |
| Source | `client/lib/theme/vueda-tailwind/base.css:526` |

separators and default edges.

<a id="css-token-border-strong"></a>

### --border-strong

| Field | Value |
| --- | --- |
| Light | `color-mix(         in srgb,         var(--vueda-brand-navy) 26%,         oklch(1 0 0)     )` |
| Dark | `color-mix(in srgb, var(--vueda-brand-navy) 70%, var(--vueda-brand-grey))` |
| Tailwind utility | `color: border-strong` |
| Source | `client/lib/theme/vueda-tailwind/base.css:527` |

resting outline controls and stronger edges.

<a id="css-token-input"></a>

### --input

| Field | Value |
| --- | --- |
| Light | `var(--border)` |
| Dark | `var(--border)` |
| Tailwind utility | `color: input` |
| Source | `client/lib/theme/vueda-tailwind/base.css:532` |

default painted input edge.

<a id="css-token-field"></a>

### --field

| Field | Value |
| --- | --- |
| Light | `color-mix(in srgb, var(--vueda-brand-grey) 36%, oklch(1 0 0))` |
| Dark | `color-mix(in srgb, var(--vueda-brand-navy) 88%, var(--vueda-brand-grey))` |
| Tailwind utility | `color: field` |
| Source | `client/lib/theme/vueda-tailwind/base.css:533` |

editable field fill.

<a id="css-token-field-hover"></a>

### --field-hover

| Field | Value |
| --- | --- |
| Light | `color-mix(in srgb, var(--vueda-brand-grey) 72%, oklch(1 0 0))` |
| Dark | `color-mix(in srgb, var(--vueda-brand-navy) 83%, var(--vueda-brand-grey))` |
| Tailwind utility | `color: field-hover` |
| Source | `client/lib/theme/vueda-tailwind/base.css:534` |

editable field fill on hover.

<a id="css-token-disabled"></a>

### --disabled

| Field | Value |
| --- | --- |
| Light | `var(--vueda-brand-grey)` |
| Dark | `color-mix(in srgb, var(--vueda-brand-navy) 82%, var(--vueda-brand-grey))` |
| Tailwind utility | `color: disabled` |
| Source | `client/lib/theme/vueda-tailwind/base.css:535` |

inert fill replacing a disabled control's tone.

<a id="css-token-disabled-foreground"></a>

### --disabled-foreground

| Field | Value |
| --- | --- |
| Light | `color-mix(         in srgb,         var(--vueda-brand-navy) 44%,         oklch(1 0 0)     )` |
| Dark | `color-mix(in srgb, var(--vueda-brand-grey) 44%, var(--vueda-brand-navy))` |
| Tailwind utility | `color: disabled-foreground` |
| Source | `client/lib/theme/vueda-tailwind/base.css:536` |

disabled labels on filled and transparent controls.

<a id="css-token-field-line"></a>

### --field-line

| Field | Value |
| --- | --- |
| Light | `var(--muted-foreground)` |
| Dark | `var(--muted-foreground)` |
| Tailwind utility | `color: field-line` |
| Source | `client/lib/theme/vueda-tailwind/base.css:541` |

editable field's bottom edge; read-only fields use --border.

<a id="css-token-ring"></a>

### --ring

| Field | Value |
| --- | --- |
| Light | `var(--primary-text)` |
| Dark | `var(--primary-text)` |
| Tailwind utility | `color: ring` |
| Source | `client/lib/theme/vueda-tailwind/base.css:542` |

focus colour with contrast independent of the primary fill.

<a id="css-token-overlay"></a>

### --overlay

| Field | Value |
| --- | --- |
| Light | `color-mix(in srgb, var(--vueda-brand-navy) 60%, transparent)` |
| Tailwind utility | `color: overlay` |
| Source | `client/lib/theme/vueda-tailwind/base.css:543` |

modal scrim in either mode.

<a id="css-token-sunken"></a>

### --sunken

| Field | Value |
| --- | --- |
| Light | `color-mix(         in srgb,         var(--vueda-brand-grey) 72%,         oklch(1 0 0)     )` |
| Dark | `color-mix(in srgb, var(--vueda-brand-navy) 85%, oklch(0 0 0))` |
| Tailwind utility | `color: sunken` |
| Source | `client/lib/theme/vueda-tailwind/base.css:544` |

recessed code and empty-state surfaces.

<a id="css-token-sidebar"></a>

### --sidebar

| Field | Value |
| --- | --- |
| Light | `color-mix(in srgb, var(--vueda-brand-grey) 36%, oklch(1 0 0))` |
| Dark | `color-mix(in srgb, var(--vueda-brand-navy) 65%, oklch(0 0 0))` |
| Tailwind utility | `color: sidebar` |
| Source | `client/lib/theme/vueda-tailwind/base.css:551` |

sidebar and app chrome.

<a id="css-token-sidebar-foreground"></a>

### --sidebar-foreground

| Field | Value |
| --- | --- |
| Light | `var(--foreground)` |
| Dark | `var(--foreground)` |
| Tailwind utility | `color: sidebar-foreground` |
| Source | `client/lib/theme/vueda-tailwind/base.css:552` |

sidebar text.

<a id="css-token-sidebar-primary"></a>

### --sidebar-primary

| Field | Value |
| --- | --- |
| Light | `var(--primary)` |
| Tailwind utility | `color: sidebar-primary` |
| Source | `client/lib/theme/vueda-tailwind/base.css:553` |

brand rail and selected icon colour.

<a id="css-token-sidebar-primary-foreground"></a>

### --sidebar-primary-foreground

| Field | Value |
| --- | --- |
| Light | `var(--primary-foreground)` |
| Tailwind utility | `color: sidebar-primary-foreground` |
| Source | `client/lib/theme/vueda-tailwind/base.css:554` |

labels on sidebar primary fills.

<a id="css-token-sidebar-primary-text"></a>

### --sidebar-primary-text

| Field | Value |
| --- | --- |
| Light | `color-mix(         in srgb,         var(--sidebar-primary) 72%,         var(--vueda-brand-navy)     )` |
| Dark | `color-mix(in srgb, var(--sidebar-primary) 68%, oklch(1 0 0))` |
| Tailwind utility | `color: sidebar-primary-text` |
| Source | `client/lib/theme/vueda-tailwind/base.css:555` |

readable blue for tinted sidebar badges.

<a id="css-token-sidebar-accent"></a>

### --sidebar-accent

| Field | Value |
| --- | --- |
| Light | `var(--vueda-brand-grey)` |
| Dark | `color-mix(in srgb, var(--vueda-brand-navy) 92%, var(--vueda-brand-grey))` |
| Tailwind utility | `color: sidebar-accent` |
| Source | `client/lib/theme/vueda-tailwind/base.css:560` |

sidebar hover and selection fill.

<a id="css-token-sidebar-accent-foreground"></a>

### --sidebar-accent-foreground

| Field | Value |
| --- | --- |
| Light | `var(--foreground)` |
| Dark | `var(--foreground)` |
| Tailwind utility | `color: sidebar-accent-foreground` |
| Source | `client/lib/theme/vueda-tailwind/base.css:561` |

text on sidebar hover and selection.

<a id="css-token-sidebar-accent-active"></a>

### --sidebar-accent-active

| Field | Value |
| --- | --- |
| Light | `color-mix(         in srgb,         var(--vueda-brand-grey) 88%,         var(--vueda-brand-navy)     )` |
| Dark | `color-mix(in srgb, var(--vueda-brand-navy) 84%, var(--vueda-brand-grey))` |
| Tailwind utility | `color: sidebar-accent-active` |
| Source | `client/lib/theme/vueda-tailwind/base.css:562` |

pressed sidebar fill.

<a id="css-token-sidebar-border"></a>

### --sidebar-border

| Field | Value |
| --- | --- |
| Light | `var(--border)` |
| Dark | `var(--border)` |
| Tailwind utility | `color: sidebar-border` |
| Source | `client/lib/theme/vueda-tailwind/base.css:567` |

sidebar edges and separators.

<a id="css-token-sidebar-ring"></a>

### --sidebar-ring

| Field | Value |
| --- | --- |
| Light | `var(--ring)` |
| Dark | `var(--ring)` |
| Tailwind utility | `color: sidebar-ring` |
| Source | `client/lib/theme/vueda-tailwind/base.css:568` |

sidebar focus colour.