# Theming

> Every theme variable the catalogue reads, and the two schemes that answer them.

```ts
import "@sdxc/ui/theme.css";
```

A component picks a role — brand, neutral, success, warning, danger — and the role resolves to a fill, the text on that fill, a border and a focus ring. Redefine the variables and the whole catalogue moves with them.

## brand

Every variable a component reads when its `data-color` is `brand`.

| Token | What it controls | Components that read it |
| --- | --- | --- |
| `--ui-brand-bg-tint` | Tinted fill, for a quiet emphasis | Badge, Bubble, Button, DropZone, FileTrigger, Highlight, LinkButton, Marker, Menu, Select, Sidebar, Table, TagGroup, Toast, Tree |
| `--ui-brand-bg-solid` | Solid fill, for the loudest emphasis | Badge, Bubble, Button, Calendar, Checkbox, ColorSlider, ColorSwatchPicker, ColorWheel, DropIndicator, FileTrigger, LinkButton, ListBox, Menu, Menubar, Meter, Pagination, ProgressBar, RadioGroup, RangeCalendar, Resizable, Select, Slider, Switch, TagGroup |
| `--ui-brand-fg` | Text and icons in the tone | Badge, Button, FileTrigger, Link, LinkButton, NavLink, Sidebar, Spinner, Tabs, TagGroup, ToggleButton, Typeset |
| `--ui-brand-fg-muted` | Secondary text, one step back from the body | Marker |
| `--ui-brand-fg-emphasis` | The tone's strongest text | Bubble, ListBox, Marker, NavLink, RangeCalendar |
| `--ui-brand-fg-on-solid` | Text drawn on the solid fill | Badge, Bubble, Button, Calendar, Checkbox, FileTrigger, LinkButton, ListBox, Menu, Menubar, Pagination, RadioGroup, RangeCalendar, Select, Switch, TagGroup |
| `--ui-brand-border` | Ordinary border | Badge, Bubble, Button, FileTrigger, LinkButton, Marker, Toast, ToggleButton |
| `--ui-brand-border-strong` | Border where the edge carries the emphasis | Badge |
| `--ui-brand-ring` | Focus ring | Attachment, Button, Calendar, Carousel, Chart, Checkbox, ColorArea, ColorPicker, ColorSlider, ColorSwatchPicker, ColorWheel, ComboBox, Command, Disclosure, DropZone, FileTrigger, GridList, ImagePlaceholder, Input, Link, LinkButton, Menu, Menubar, NavLink, NavigationMenu, NumberField, Pagination, RadioGroup, Resizable, ScrollArea, Select, Sidebar, Slider, Switch, Table, Tabs, TagGroup, TextArea, ToggleButton, Tree, Typeset |
| `--ui-brand-bg-tint-hover` | Tinted fill while the pointer is over it | — |
| `--ui-brand-bg-tint-pressed` | Tinted fill while it is held down | — |
| `--ui-brand-bg-solid-hover` | Solid fill while the pointer is over it | — |
| `--ui-brand-bg-solid-pressed` | Solid fill while it is held down | — |
| `--ui-brand-border-hover` | The page's own surface, outside any tone | — |

## neutral

Every variable a component reads when its `data-color` is `neutral`.

| Token | What it controls | Components that read it |
| --- | --- | --- |
| `--ui-neutral-bg-tint` | Tinted fill, for a quiet emphasis | Attachment, Badge, Bubble, Button, Calendar, Checkbox, ColorArea, ColorSlider, ColorSwatch, ColorWheel, Command, Dialog, Disclosure, DropZone, FileTrigger, Highlight, HoverCard, ImagePlaceholder, Input, Keyboard, LinkButton, Marker, Menubar, NavigationMenu, NumberField, OverlayArrow, Popover, RadioGroup, Resizable, Select, Sidebar, Slider, Table, Toast, Toolbar, Typeset |
| `--ui-neutral-bg-solid` | Solid fill, for the loudest emphasis | Badge, Bubble, Button, Chart, Checkbox, FileTrigger, LinkButton, Meter, Tooltip |
| `--ui-neutral-fg` | Text and icons in the tone | Accordion, Attachment, Badge, Breadcrumbs, Button, Calendar, Chart, ColorSlider, ComboBox, DropZone, FileTrigger, ImagePlaceholder, Item, Keyboard, Link, LinkButton, Menubar, Meter, NavLink, NavigationMenu, NumberField, Pagination, ProgressBar, Sheet, ShortcutList, Sidebar, Slider, Spinner, Table, Tabs, TagGroup, Text, Toast, ToggleButton, Typeset |
| `--ui-neutral-fg-muted` | Secondary text, one step back from the body | AlertDialog, Attachment, Breadcrumbs, Calendar, Command, ContextMenu, Description, Dialog, GridList, Header, Input, Item, Marker, Message, Resizable, SearchField, Select, SentinelRow, Sidebar, Table, Tree, Typeset |
| `--ui-neutral-fg-emphasis` | The tone's strongest text | AlertDialog, Attachment, Breadcrumbs, Bubble, Calendar, Command, Dialog, Disclosure, GridList, Heading, HoverCard, ImagePlaceholder, Input, Item, Label, ListBox, Marker, Menu, Menubar, Message, NavLink, NavigationMenu, NumberField, Pagination, RadioGroup, Select, Sidebar, Table, Tabs, Tree, Typeset |
| `--ui-neutral-fg-on-solid` | Text drawn on the solid fill | Badge, Bubble, Button, Chart, Checkbox, FileTrigger, LinkButton, Tooltip |
| `--ui-neutral-border` | Ordinary border | Attachment, Badge, Bubble, Button, Chart, ColorSlider, ColorSwatch, ColorWheel, FileTrigger, LinkButton, Marker, Meter, NumberField, ProgressBar, Resizable, ScrollArea, Select, Separator, Sidebar, Skeleton, Slider, Switch, Toast, ToggleButton, Toolbar, Typeset |
| `--ui-neutral-border-strong` | Border where the edge carries the emphasis | Bubble, Checkbox, ImagePlaceholder, RadioGroup, Resizable, ScrollArea, Switch, Typeset |
| `--ui-neutral-ring` | Focus ring | Button, Checkbox, FileTrigger, Link, LinkButton, Sidebar, TagGroup, TextArea, ToggleButton |
| `--ui-neutral-bg-tint-hover` | Tinted fill while the pointer is over it | — |
| `--ui-neutral-bg-tint-pressed` | Tinted fill while it is held down | — |
| `--ui-neutral-bg-solid-hover` | Solid fill while the pointer is over it | — |
| `--ui-neutral-bg-solid-pressed` | Solid fill while it is held down | — |
| `--ui-neutral-border-hover` | The page's own surface, outside any tone | ColorPicker |

## success

Every variable a component reads when its `data-color` is `success`.

| Token | What it controls | Components that read it |
| --- | --- | --- |
| `--ui-success-bg-tint` | Tinted fill, for a quiet emphasis | Badge, Button, FileTrigger, Highlight, LinkButton, Marker, Sidebar, TagGroup, Toast |
| `--ui-success-bg-solid` | Solid fill, for the loudest emphasis | Badge, Button, Checkbox, FileTrigger, LinkButton, Meter |
| `--ui-success-fg` | Text and icons in the tone | Badge, Button, FileTrigger, Link, LinkButton, NavLink, Sidebar, Spinner, TagGroup, ToggleButton |
| `--ui-success-fg-muted` | Secondary text, one step back from the body | Marker |
| `--ui-success-fg-emphasis` | The tone's strongest text | Marker, NavLink |
| `--ui-success-fg-on-solid` | Text drawn on the solid fill | Badge, Button, Checkbox, FileTrigger, LinkButton |
| `--ui-success-border` | Ordinary border | Badge, Button, FileTrigger, LinkButton, Marker, Toast, ToggleButton |
| `--ui-success-border-strong` | Border where the edge carries the emphasis | Badge |
| `--ui-success-ring` | Focus ring | Button, Checkbox, FileTrigger, Input, Link, LinkButton, Select, Sidebar, TagGroup, TextArea, ToggleButton |
| `--ui-success-bg-tint-hover` | Tinted fill while the pointer is over it | — |
| `--ui-success-bg-tint-pressed` | Tinted fill while it is held down | — |
| `--ui-success-bg-solid-hover` | Solid fill while the pointer is over it | — |
| `--ui-success-bg-solid-pressed` | Solid fill while it is held down | — |
| `--ui-success-border-hover` | The page's own surface, outside any tone | — |

## warning

Every variable a component reads when its `data-color` is `warning`.

| Token | What it controls | Components that read it |
| --- | --- | --- |
| `--ui-warning-bg-tint` | Tinted fill, for a quiet emphasis | Badge, Button, FileTrigger, Highlight, LinkButton, Marker, Sidebar, TagGroup, Toast |
| `--ui-warning-bg-solid` | Solid fill, for the loudest emphasis | Badge, Button, Checkbox, FileTrigger, LinkButton, Meter |
| `--ui-warning-fg` | Text and icons in the tone | Badge, Button, FileTrigger, Link, LinkButton, NavLink, Sidebar, Spinner, TagGroup, ToggleButton |
| `--ui-warning-fg-muted` | Secondary text, one step back from the body | Marker |
| `--ui-warning-fg-emphasis` | The tone's strongest text | Marker, NavLink |
| `--ui-warning-fg-on-solid` | Text drawn on the solid fill | Badge, Button, Checkbox, FileTrigger, LinkButton |
| `--ui-warning-border` | Ordinary border | Badge, Button, FileTrigger, LinkButton, Marker, Toast, ToggleButton |
| `--ui-warning-border-strong` | Border where the edge carries the emphasis | Badge |
| `--ui-warning-ring` | Focus ring | Button, Checkbox, FileTrigger, Input, Link, LinkButton, Select, Sidebar, TagGroup, TextArea, ToggleButton |
| `--ui-warning-bg-tint-hover` | Tinted fill while the pointer is over it | — |
| `--ui-warning-bg-tint-pressed` | Tinted fill while it is held down | — |
| `--ui-warning-bg-solid-hover` | Solid fill while the pointer is over it | — |
| `--ui-warning-bg-solid-pressed` | Solid fill while it is held down | — |
| `--ui-warning-border-hover` | The page's own surface, outside any tone | — |

## danger

Every variable a component reads when its `data-color` is `danger`.

| Token | What it controls | Components that read it |
| --- | --- | --- |
| `--ui-danger-bg-tint` | Tinted fill, for a quiet emphasis | Attachment, Badge, Button, FileTrigger, Highlight, LinkButton, Marker, Menu, Sidebar, TagGroup, Toast |
| `--ui-danger-bg-solid` | Solid fill, for the loudest emphasis | Badge, Bubble, Button, Calendar, Checkbox, FileTrigger, LinkButton, Meter |
| `--ui-danger-fg` | Text and icons in the tone | Badge, Button, CheckboxGroup, FieldError, FileTrigger, Link, LinkButton, Menu, NavLink, NumberField, Sidebar, Spinner, TagGroup, ToggleButton |
| `--ui-danger-fg-muted` | Secondary text, one step back from the body | Marker |
| `--ui-danger-fg-emphasis` | The tone's strongest text | Attachment, Marker, NavLink |
| `--ui-danger-fg-on-solid` | Text drawn on the solid fill | Badge, Bubble, Button, Calendar, Checkbox, FileTrigger, LinkButton |
| `--ui-danger-border` | Ordinary border | Attachment, Badge, Button, FileTrigger, Input, LinkButton, Marker, Select, Toast, ToggleButton |
| `--ui-danger-border-strong` | Border where the edge carries the emphasis | Badge |
| `--ui-danger-ring` | Focus ring | Button, Checkbox, DatePicker, FileTrigger, Input, Link, LinkButton, Menu, Select, Sidebar, TagGroup, TextArea, ToggleButton |
| `--ui-danger-bg-tint-hover` | Tinted fill while the pointer is over it | — |
| `--ui-danger-bg-tint-pressed` | Tinted fill while it is held down | — |
| `--ui-danger-bg-solid-hover` | Solid fill while the pointer is over it | — |
| `--ui-danger-bg-solid-pressed` | Solid fill while it is held down | — |
| `--ui-danger-border-hover` | The page's own surface, outside any tone | — |

## surface

The page itself, which a tone sits on rather than replaces, and the edges drawn on it.

| Token | What it controls | Components that read it |
| --- | --- | --- |
| `--ui-bg` | Surface behind the tone's content | MessageScroller |
| `--ui-fg` | Text and icons in the tone | — |
| `--ui-border` | Ordinary border | — |
| `--ui-ring` | Focus ring | — |
| `--ui-shadow-ring` | Ring plus lift an elevated surface draws in place of a solid border | Card, Command, Dialog, HoverCard, NavigationMenu, Popover, Select |
| `--ui-shadow-ring-hover` | That ring while the pointer is over the surface | — |
| `--ui-image-outline` | Inset hairline that holds an image's edge against a same-tone background | ImagePlaceholder |
| `--ui-surface-padding` | Padding inside a floating panel, 0.25rem; the panel's radius grows with it so rows stay concentric | Command, ListBox, Menu, Menubar, NavigationMenu, Select |

## spacing

One step, multiplied by every spacing utility.

| Token | What it controls | Components that read it |
| --- | --- | --- |
| `--ui-spacing` | The step every spacing utility multiplies | Tree |

## sizing

The sizes small controls and their pointer targets are drawn at.

| Token | What it controls | Components that read it |
| --- | --- | --- |
| `--ui-target-size` | Smallest pointer target hitArea() grows a small control to; 2.75rem on a coarse pointer | Button, Calendar, ColorSlider, ColorSwatchPicker, ComboBox, GridList, LinkButton, Resizable, Sidebar, Slider, TagGroup, Toast, ToggleButton |
| `--ui-button-icon-size-sm` | Side of a small icon-only Button, 2rem | Button |
| `--ui-button-icon-size-md` | Side of a medium icon-only Button, 2.5rem | Button |
| `--ui-button-icon-size-lg` | Side of a large icon-only Button, 3rem | Button |
| `--ui-tag-remove-size` | Glyph size of TagGroup.Remove, 1rem | TagGroup |
| `--ui-checkbox-size` | Side of the Checkbox box, 1.25rem | Checkbox |

## type scale

The named font sizes.

| Token | What it controls | Components that read it |
| --- | --- | --- |
| `--ui-text-xs` | Font size named xs | — |
| `--ui-text-sm` | Font size named sm | — |
| `--ui-text-base` | Font size named base | — |
| `--ui-text-lg` | Font size named lg | — |
| `--ui-text-xl` | Font size named xl | — |
| `--ui-text-2xl` | Font size named 2xl | — |
| `--ui-text-3xl` | Font size named 3xl | — |
| `--ui-text-4xl` | Font size named 4xl | — |
| `--ui-text-5xl` | Font size named 5xl | — |
| `--ui-text-6xl` | Font size named 6xl | — |
| `--ui-text-7xl` | Font size named 7xl | — |
| `--ui-text-8xl` | Font size named 8xl | — |
| `--ui-text-9xl` | Font size named 9xl | — |

## font stacks

The three families, resolved to system faces.

| Token | What it controls | Components that read it |
| --- | --- | --- |
| `--ui-font-sans` | The sans family stack | — |
| `--ui-font-serif` | The serif family stack | — |
| `--ui-font-mono` | The mono family stack | — |

## container scale

The named widths a container query compares against.

| Token | What it controls | Components that read it |
| --- | --- | --- |
| `--ui-container-xs` | Container width named xs | — |
| `--ui-container-sm` | Container width named sm | — |
| `--ui-container-md` | Container width named md | — |
| `--ui-container-lg` | Container width named lg | — |
| `--ui-container-xl` | Container width named xl | — |
| `--ui-container-2xl` | Container width named 2xl | — |

## chart

The categorical sequence a multi-series chart walks in order.

| Token | What it controls | Components that read it |
| --- | --- | --- |
| `--ui-chart-1` | Series 1 of a chart | Chart |
| `--ui-chart-2` | Series 2 of a chart | — |
| `--ui-chart-3` | Series 3 of a chart | — |
| `--ui-chart-4` | Series 4 of a chart | — |
| `--ui-chart-5` | Series 5 of a chart | — |
| `--ui-chart-6` | Series 6 of a chart | — |
| `--ui-chart-7` | Series 7 of a chart | — |
| `--ui-chart-8` | Series 8 of a chart | Chart |

## Light

```css
:root {
	--ui-brand-bg-tint: var(--ui-color-brand-50);
	--ui-brand-bg-solid: var(--ui-color-brand-600);
	--ui-brand-fg: var(--ui-color-brand-600);
	--ui-brand-fg-muted: var(--ui-color-brand-500);
	--ui-brand-fg-emphasis: var(--ui-color-brand-900);
	--ui-brand-fg-on-solid: white;
	--ui-brand-border: var(--ui-color-brand-200);
	--ui-brand-border-strong: var(--ui-color-brand-600);
	--ui-brand-ring: var(--ui-color-brand-500);
	--ui-neutral-bg-tint: var(--ui-color-neutral-50);
	--ui-neutral-bg-solid: var(--ui-color-neutral-900);
	--ui-neutral-fg: var(--ui-color-neutral-600);
	--ui-neutral-fg-muted: var(--ui-color-neutral-500);
	--ui-neutral-fg-emphasis: var(--ui-color-neutral-900);
	--ui-neutral-fg-on-solid: white;
	--ui-neutral-border: var(--ui-color-neutral-200);
	--ui-neutral-border-strong: var(--ui-color-neutral-600);
	--ui-neutral-ring: var(--ui-color-neutral-500);
	--ui-success-bg-tint: var(--ui-color-success-50);
	--ui-success-bg-solid: var(--ui-color-success-600);
	--ui-success-fg: var(--ui-color-success-600);
	--ui-success-fg-muted: var(--ui-color-success-500);
	--ui-success-fg-emphasis: var(--ui-color-success-900);
	--ui-success-fg-on-solid: white;
	--ui-success-border: var(--ui-color-success-200);
	--ui-success-border-strong: var(--ui-color-success-600);
	--ui-success-ring: var(--ui-color-success-500);
	--ui-warning-bg-tint: var(--ui-color-warning-50);
	--ui-warning-bg-solid: var(--ui-color-warning-600);
	--ui-warning-fg: var(--ui-color-warning-600);
	--ui-warning-fg-muted: var(--ui-color-warning-500);
	--ui-warning-fg-emphasis: var(--ui-color-warning-900);
	--ui-warning-fg-on-solid: white;
	--ui-warning-border: var(--ui-color-warning-200);
	--ui-warning-border-strong: var(--ui-color-warning-600);
	--ui-warning-ring: var(--ui-color-warning-500);
	--ui-danger-bg-tint: var(--ui-color-danger-50);
	--ui-danger-bg-solid: var(--ui-color-danger-600);
	--ui-danger-fg: var(--ui-color-danger-600);
	--ui-danger-fg-muted: var(--ui-color-danger-500);
	--ui-danger-fg-emphasis: var(--ui-color-danger-900);
	--ui-danger-fg-on-solid: white;
	--ui-danger-border: var(--ui-color-danger-200);
	--ui-danger-border-strong: var(--ui-color-danger-600);
	--ui-danger-ring: var(--ui-color-danger-500);
	--ui-bg: var(--ui-neutral-bg-tint, Canvas);
	--ui-fg: var(--ui-neutral-fg-emphasis, CanvasText);
	--ui-border: var(--ui-neutral-border, color-mix(in oklab, CanvasText 16%, transparent));
	--ui-ring: var(--ui-brand-ring, Highlight);
	--ui-spacing: 0.25rem;
	--ui-container-xs: 20rem;
	--ui-container-sm: 24rem;
	--ui-container-md: 36rem;
	--ui-container-lg: 48rem;
	--ui-container-xl: 64rem;
	--ui-container-2xl: 80rem;
	--ui-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ui-font-serif: ui-serif, Georgia, Cambria, "Times New Roman", serif;
	--ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--ui-text-xs: 0.75rem;
	--ui-text-sm: 0.875rem;
	--ui-text-base: 1rem;
	--ui-text-lg: 1.125rem;
	--ui-text-xl: 1.25rem;
	--ui-text-2xl: 1.5rem;
	--ui-text-3xl: 1.875rem;
	--ui-text-4xl: 2.25rem;
	--ui-text-5xl: 3rem;
	--ui-text-6xl: 3.75rem;
	--ui-text-7xl: 4.5rem;
	--ui-text-8xl: 6rem;
	--ui-text-9xl: 8rem;
	--ui-brand-bg-tint-hover: var(--ui-color-brand-100);
	--ui-brand-bg-tint-pressed: var(--ui-color-brand-200);
	--ui-brand-bg-solid-hover: var(--ui-color-brand-700);
	--ui-brand-bg-solid-pressed: var(--ui-color-brand-800);
	--ui-brand-border-hover: var(--ui-color-brand-300);
	--ui-neutral-bg-tint-hover: var(--ui-color-neutral-100);
	--ui-neutral-bg-tint-pressed: var(--ui-color-neutral-200);
	--ui-neutral-bg-solid-hover: var(--ui-color-neutral-800);
	--ui-neutral-bg-solid-pressed: var(--ui-color-neutral-700);
	--ui-neutral-border-hover: var(--ui-color-neutral-300);
	--ui-danger-bg-tint-hover: var(--ui-color-danger-100);
	--ui-danger-bg-tint-pressed: var(--ui-color-danger-200);
	--ui-danger-bg-solid-hover: var(--ui-color-danger-700);
	--ui-danger-bg-solid-pressed: var(--ui-color-danger-800);
	--ui-danger-border-hover: var(--ui-color-danger-300);
	--ui-warning-bg-tint-hover: var(--ui-color-warning-100);
	--ui-warning-bg-tint-pressed: var(--ui-color-warning-200);
	--ui-warning-bg-solid-hover: var(--ui-color-warning-700);
	--ui-warning-bg-solid-pressed: var(--ui-color-warning-800);
	--ui-warning-border-hover: var(--ui-color-warning-300);
	--ui-success-bg-tint-hover: var(--ui-color-success-100);
	--ui-success-bg-tint-pressed: var(--ui-color-success-200);
	--ui-success-bg-solid-hover: var(--ui-color-success-700);
	--ui-success-bg-solid-pressed: var(--ui-color-success-800);
	--ui-success-border-hover: var(--ui-color-success-300);
	--ui-chart-1: var(--ui-color-brand-600);
	--ui-chart-2: var(--ui-color-success-600);
	--ui-chart-3: var(--ui-color-warning-600);
	--ui-chart-4: var(--ui-color-danger-600);
	--ui-chart-5: var(--ui-color-neutral-600);
	--ui-chart-6: var(--ui-color-brand-400);
	--ui-chart-7: var(--ui-color-success-400);
	--ui-chart-8: var(--ui-color-warning-400);
	--ui-target-size: 1.5rem;
	--ui-shadow-ring: 0 0 0 1px rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06), 0 2px 4px 0 rgb(0 0 0 / 0.04);
	--ui-shadow-ring-hover: 0 0 0 1px rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08), 0 2px 4px 0 rgb(0 0 0 / 0.06);
	--ui-image-outline: rgb(0 0 0 / 0.1);
}
```

## Dark

The same names, redefined under a dark ancestor. Add `.dark` to force it, or `.system` to follow the reader's own setting.

```css
:is(.dark, .dark *) {
	--ui-brand-bg-tint: var(--ui-color-brand-950);
	--ui-brand-bg-solid: var(--ui-color-brand-600);
	--ui-brand-fg: var(--ui-color-brand-400);
	--ui-brand-fg-muted: var(--ui-color-brand-400);
	--ui-brand-fg-emphasis: var(--ui-color-brand-100);
	--ui-brand-border: var(--ui-color-brand-800);
	--ui-brand-border-strong: var(--ui-color-brand-600);
	--ui-neutral-bg-tint: var(--ui-color-neutral-950);
	--ui-neutral-bg-solid: var(--ui-color-neutral-100);
	--ui-neutral-fg: var(--ui-color-neutral-400);
	--ui-neutral-fg-muted: var(--ui-color-neutral-400);
	--ui-neutral-fg-emphasis: var(--ui-color-neutral-100);
	--ui-neutral-fg-on-solid: var(--ui-color-neutral-900);
	--ui-neutral-border: var(--ui-color-neutral-700);
	--ui-neutral-border-strong: var(--ui-color-neutral-400);
	--ui-success-bg-tint: var(--ui-color-success-950);
	--ui-success-fg: var(--ui-color-success-400);
	--ui-success-fg-muted: var(--ui-color-success-400);
	--ui-success-fg-emphasis: var(--ui-color-success-100);
	--ui-success-border: var(--ui-color-success-800);
	--ui-success-border-strong: var(--ui-color-success-600);
	--ui-warning-bg-tint: var(--ui-color-warning-950);
	--ui-warning-fg: var(--ui-color-warning-400);
	--ui-warning-fg-muted: var(--ui-color-warning-400);
	--ui-warning-fg-emphasis: var(--ui-color-warning-100);
	--ui-warning-border: var(--ui-color-warning-800);
	--ui-warning-border-strong: var(--ui-color-warning-600);
	--ui-danger-bg-tint: var(--ui-color-danger-950);
	--ui-danger-fg: var(--ui-color-danger-400);
	--ui-danger-fg-muted: var(--ui-color-danger-400);
	--ui-danger-fg-emphasis: var(--ui-color-danger-100);
	--ui-danger-border: var(--ui-color-danger-800);
	--ui-danger-border-strong: var(--ui-color-danger-600);
	--ui-brand-bg-tint-hover: var(--ui-color-brand-900);
	--ui-brand-bg-tint-pressed: var(--ui-color-brand-800);
	--ui-brand-bg-solid-hover: var(--ui-color-brand-700);
	--ui-brand-bg-solid-pressed: var(--ui-color-brand-800);
	--ui-brand-border-hover: var(--ui-color-brand-700);
	--ui-neutral-bg-tint-hover: var(--ui-color-neutral-900);
	--ui-neutral-bg-tint-pressed: var(--ui-color-neutral-800);
	--ui-neutral-bg-solid-hover: var(--ui-color-neutral-200);
	--ui-neutral-bg-solid-pressed: var(--ui-color-neutral-300);
	--ui-neutral-border-hover: var(--ui-color-neutral-600);
	--ui-danger-bg-tint-hover: var(--ui-color-danger-900);
	--ui-danger-bg-tint-pressed: var(--ui-color-danger-800);
	--ui-danger-bg-solid-hover: var(--ui-color-danger-700);
	--ui-danger-bg-solid-pressed: var(--ui-color-danger-800);
	--ui-danger-border-hover: var(--ui-color-danger-700);
	--ui-warning-bg-tint-hover: var(--ui-color-warning-900);
	--ui-warning-bg-tint-pressed: var(--ui-color-warning-800);
	--ui-warning-bg-solid-hover: var(--ui-color-warning-700);
	--ui-warning-bg-solid-pressed: var(--ui-color-warning-800);
	--ui-warning-border-hover: var(--ui-color-warning-700);
	--ui-success-bg-tint-hover: var(--ui-color-success-900);
	--ui-success-bg-tint-pressed: var(--ui-color-success-800);
	--ui-success-bg-solid-hover: var(--ui-color-success-700);
	--ui-success-bg-solid-pressed: var(--ui-color-success-800);
	--ui-success-border-hover: var(--ui-color-success-700);
	--ui-chart-1: var(--ui-color-brand-400);
	--ui-chart-2: var(--ui-color-success-400);
	--ui-chart-3: var(--ui-color-warning-400);
	--ui-chart-4: var(--ui-color-danger-400);
	--ui-chart-5: var(--ui-color-neutral-400);
	--ui-chart-6: var(--ui-color-brand-300);
	--ui-chart-7: var(--ui-color-success-300);
	--ui-chart-8: var(--ui-color-warning-300);
	--ui-shadow-ring: 0 0 0 1px rgb(255 255 255 / 0.08);
	--ui-shadow-ring-hover: 0 0 0 1px rgb(255 255 255 / 0.12);
	--ui-image-outline: rgb(255 255 255 / 0.1);
}
```