[ @sdxc/ui ]

Theming

Every color a component draws comes from a variable, and every variable belongs to a role. Redefine the variables and the whole catalogue moves with them.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

Semantic roles

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. That pairing is the convention: a component never names a color, only the part of a role it needs.

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

What a document resolves to with no scheme class on it.

: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.

: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);
}