@vireo-ai/trellis-ui 0.1.8 → 0.1.10

package/packages/client/src/styles/theme.css

@@ -1,22 +1,67 @@
+@import "./generated/theme-palette.css";
+@import "./generated/theme-runtime.css";
 @import "./components.css";
 @import "./generated-sources.css";
 
 @custom-variant dark (&:where(.dark, .dark *):not(:where(.light, .light *)));
 @custom-variant ui-interactive (&:is([data-ui-interactive]));
-@custom-variant ui-interactive-surface (&:is([data-ui-interactive="surface"]));
 @custom-variant ui-active (&:is(:active, :focus-visible, [data-active], [data-highlighted]));
-@custom-variant ui-selected (&:is([data-selected], [aria-selected="true"], [data-current], [aria-current]:not([aria-current="false"]), [data-checked], [aria-checked="true"], [data-pressed], [aria-pressed="true"]));
+@custom-variant ui-selected (&:is([data-selected="true"], [aria-selected="true"], [data-current], [aria-current]:not([aria-current="false"]), [data-checked], [aria-checked="true"], [data-pressed], [aria-pressed="true"]));
+
+/* Keep the core authored palette available to custom components in the precompiled package. */
+@source inline("{bg,text,border,ring,fill,stroke}-{neutral,accent}-{1..12}");
+@source inline("{bg,text,border,ring,fill,stroke}-{neutral,accent}-a{1..12}");
+@source inline("bg-canvas {bg,border,ring,fill,stroke}-surface-{0..8}");
+@source inline("text-surface-{0..8}-{ink,ink-muted} shadow-elevation-{0..8}");
+@source inline("rounded-{1..6} rounded-{control,surface,overlay} rounded-{control,surface,overlay}-{xs,sm,md,lg}");
+@source inline("{rounded-t,rounded-r,rounded-b,rounded-l}-{control,surface,overlay}-{xs,sm,md,lg}");
+@source inline("rounded-{none,full,circle}");
+@source inline("gap-control-gap px-control-padding-{xs,sm,md,lg,xlg} px-badge-padding-{xs,sm,md,lg,xlg}");
+@source inline("p-popover-padding px-menu-item-padding-inline");
+@source inline("text-{1..13} text-{body,heading,code,label,description,metadata,menu-item}");
+@source inline("text-{control,badge}-{xs,sm,md,lg,xlg}");
+@source inline("font-{body,heading,code,control,badge,label,description,metadata,menu-item}");
+@source inline("min-h-control-multiline-{xs,sm,md,lg,xlg}");
+@source inline("size-{brand-logo,badge-close,checkbox-indicator,radio-indicator,radio-dot,slider-thumb}-{xs,sm,md,lg,xlg}");
+@source inline("h-switch-track-height-{xs,sm,md,lg,xlg} w-switch-track-width-{xs,sm,md,lg,xlg} size-switch-thumb-{xs,sm,md,lg,xlg}");
+@source inline("p-switch-inset data-checked:translate-x-switch-travel-{xs,sm,md,lg,xlg}");
+@source inline("{h,w}-slider-track-{xs,sm,md,lg,xlg} max-w-modal-{sm,md,lg,xl}");
+@source inline("border-{0..3} border-edge-{perimeter,control,separator,divider}");
+@source inline("{border-t,border-r,border-b,border-l}-edge-{perimeter,control,separator,divider}");
+
+@media (hover: hover) {
+  [data-ui-elevation][data-ui-interactive="surface"]:hover {
+    --ui-state-shadow-layers: 0 0 0 var(--border-width-edge-perimeter) var(--color-intent-neutral-edge-hover);
+  }
+}
+
+[data-ui-elevation][data-ui-interactive="surface"]:is(
+  [data-selected="true"],
+  [aria-selected="true"],
+  [data-current],
+  [aria-current]:not([aria-current="false"]),
+  [data-checked],
+  [aria-checked="true"],
+  [data-pressed],
+  [aria-pressed="true"]
+) {
+  --ui-state-shadow-layers: 0 0 0 var(--border-width-edge-perimeter) var(--color-intent-accent-edge);
+}
+
+[data-ui-elevation][data-ui-interactive="surface"]:is(:focus-visible, :has(:focus-visible)) {
+  --ui-state-shadow-layers: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
+}
 
 /*
   Root theme for the Trellis UI component system.
 
   Token layers:
-  1. Primitive scales: Radix-inspired color steps, type, space, radius.
-  2. Semantic aliases: app, surface, foreground, border, focus, overlay.
-  3. Component aliases: control, button, field, panel, popover, menu, nav.
+  1. Generated primitives: 1–12 color families, alpha families, surfaces, and elevation.
+  2. Generated relationships: intent roles, interaction states, paired inks, and scrim.
+  3. Authored recipes: local component variables and state composition.
 
-  Project themes should override semantic and component aliases first.
-  Primitive scale overrides are supported for full re-skinning.
+  Theme config regenerates the first two layers. Component recipes consume their
+  relationships; custom UI may use the registered Tailwind palette directly.
 
   CSS ownership:
   - TypeScript style recipes own class composition, variants, sizes, and parts.
@@ -28,320 +73,20 @@
 */
 
 @theme {
-  --font-sans: Inter var, Lexend, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-mono: Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-
-  --text-xs: 0.75rem;
-  --text-xs--line-height: 1rem;
-  --text-sm: 0.875rem;
-  --text-sm--line-height: 1.25rem;
-  --text-base: 1rem;
-  --text-base--line-height: 1.5rem;
-  --text-lg: 1.125rem;
-  --text-lg--line-height: 1.625rem;
-  --text-xl: 1.25rem;
-  --text-xl--line-height: 1.75rem;
-  --text-2xl: 1.875rem;
-  --text-2xl--line-height: 2.375rem;
-
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-
-  --spacing-0: 0;
-  --spacing-1: 0.25rem;
-  --spacing-2: 0.5rem;
-  --spacing-3: 0.75rem;
-  --spacing-4: 1rem;
-  --spacing-5: 1.25rem;
-  --spacing-6: 1.5rem;
-  --spacing-7: 1.75rem;
-  --spacing-8: 2rem;
-  --spacing-9: 2.25rem;
-  --spacing-10: 2.5rem;
-  --spacing-12: 3rem;
-  --spacing-popover: var(--ui-popover-padding);
-  --spacing-combobox-listbox: var(--ui-combobox-listbox-max-height);
-  --spacing-menu-item: var(--ui-menu-item-height);
-  --spacing-menu-item-x: var(--ui-menu-item-padding-x);
-  --spacing-icon: var(--ui-icon-size);
-  --spacing-icon-xs: var(--ui-icon-size-xs);
-  --spacing-icon-sm: var(--ui-icon-size-sm);
-  --spacing-icon-lg: var(--ui-icon-size-lg);
-  --spacing-scrollbar: var(--ui-scrollbar-size);
-  --spacing-scrollbar-inset: var(--ui-scrollbar-inset);
-  --spacing-control: var(--ui-control-gap);
-
-  --radius-1: 1px;
-  --radius-2: 2px;
-  --radius-3: 4px;
-  --radius-4: 6px;
-  --radius-5: 8px;
-  --radius-6: 12px;
-  --radius-full: 9999px;
-  --radius-control: var(--ui-control-radius);
   --radius-scrollbar-thumb: var(--ui-scrollbar-thumb-radius);
-
-  --spacing-control-xs: 1.25rem;
-  --spacing-control-sm: 1.5rem;
-  --spacing-control-md: 1.75rem;
-  --spacing-control-lg: 2rem;
-  --spacing-control-xlg: 2.25rem;
-
-  --color-black-a1: rgb(0 0 0 / 0.04);
-  --color-black-a2: rgb(0 0 0 / 0.08);
-  --color-black-a3: rgb(0 0 0 / 0.12);
-  --color-black-a4: rgb(0 0 0 / 0.18);
-  --color-black-a5: rgb(0 0 0 / 0.28);
-  --color-black-a6: rgb(0 0 0 / 0.40);
-
-  --shadow-border: var(--ui-shadow-border);
-  --shadow-border-hover: var(--ui-shadow-border-hover);
-  --shadow-1: var(--ui-shadow-1);
-  --shadow-2: var(--ui-shadow-2);
-  --shadow-3: var(--ui-shadow-3);
-  --shadow-4: var(--ui-shadow-4);
-  --shadow-5: var(--ui-shadow-5);
-  --shadow-6: var(--ui-shadow-6);
-  --shadow-popover: var(--ui-popover-shadow);
-  --shadow-panel: var(--ui-panel-shadow);
-  --shadow-dialog: var(--ui-dialog-shadow);
-  --shadow-modal: var(--ui-modal-shadow);
-  --shadow-inset: inset 0 1px 1px rgb(0 0 0 / 0.04);
-  --shadow-control: var(--ui-control-shadow);
-  --shadow-control-disabled: var(--ui-control-shadow-disabled);
-  --shadow-focus: 0 0 0 3px var(--color-focus-a4);
-  --shadow-danger-focus: var(--shadow-control), 0 0 0 3px var(--color-danger-a4);
-
-  --container-content: 72rem;
-  --container-reading: 42rem;
+  --container-reading: var(--container-prose);
   --z-index-popover: 50;
   --z-index-dialog: 60;
   --z-index-toast: 70;
 }
 
-@theme {
-  /* Base, neutral scale. */
-  --color-base-1: #fcfcfd;
-  --color-base-2: #f9f9fb;
-  --color-base-3: #f0f0f3;
-  --color-base-4: #e8e8ec;
-  --color-base-5: #e0e1e6;
-  --color-base-6: #d9d9e0;
-  --color-base-7: #cdced6;
-  --color-base-8: #b9bbc6;
-  --color-base-9: #8b8d98;
-  --color-base-10: #80838d;
-  --color-base-11: #60646c;
-  --color-base-12: #1c2024;
-
-  --color-base-a1: #00005503;
-  --color-base-a2: #00005506;
-  --color-base-a3: #0000330f;
-  --color-base-a4: #00002d17;
-  --color-base-a5: #0009321f;
-  --color-base-a6: #00002f26;
-  --color-base-a7: #00062e32;
-  --color-base-a8: #00083046;
-  --color-base-a9: #00051d74;
-  --color-base-a10: #00071b7f;
-  --color-base-a11: #0007149f;
-  --color-base-a12: #000509e3;
-
-  /* Accent defaults to blue. Projects can remap this to any Radix scale. */
-  --color-accent-1: #fbfdff;
-  --color-accent-2: #f4faff;
-  --color-accent-3: #e6f4fe;
-  --color-accent-4: #d5efff;
-  --color-accent-5: #c2e5ff;
-  --color-accent-6: #acd8fc;
-  --color-accent-7: #8ec8f6;
-  --color-accent-8: #5eb1ef;
-  --color-accent-9: #0090ff;
-  --color-accent-10: #0588f0;
-  --color-accent-11: #0d74ce;
-  --color-accent-12: #113264;
-
-  --color-accent-a1: #0080ff04;
-  --color-accent-a2: #008cff0b;
-  --color-accent-a3: #008ff519;
-  --color-accent-a4: #009eff2a;
-  --color-accent-a5: #0093ff3d;
-  --color-accent-a6: #0088f653;
-  --color-accent-a7: #0083eb71;
-  --color-accent-a8: #0084e6a1;
-  --color-accent-a9: #0090ff;
-  --color-accent-a10: #0086f0fa;
-  --color-accent-a11: #006dcbf2;
-  --color-accent-a12: #002359ee;
-
-  --color-danger-1: #fffcfc;
-  --color-danger-2: #fff7f7;
-  --color-danger-3: #feebec;
-  --color-danger-4: #ffdbdc;
-  --color-danger-5: #ffcdce;
-  --color-danger-6: #fdbdbe;
-  --color-danger-7: #f4a9aa;
-  --color-danger-8: #eb8e90;
-  --color-danger-9: #e5484d;
-  --color-danger-10: #dc3e42;
-  --color-danger-11: #ce2c31;
-  --color-danger-12: #641723;
-
-  --color-danger-a1: #ff000003;
-  --color-danger-a2: #ff000008;
-  --color-danger-a3: #f3000d14;
-  --color-danger-a4: #ff000824;
-  --color-danger-a5: #ff000632;
-  --color-danger-a6: #f8000442;
-  --color-danger-a7: #df000356;
-  --color-danger-a8: #d2000571;
-  --color-danger-a9: #db0007b7;
-  --color-danger-a10: #d10005c1;
-  --color-danger-a11: #c40006d3;
-  --color-danger-a12: #55000de8;
-
-  --color-success-1: #fbfefc;
-  --color-success-2: #f4fbf6;
-  --color-success-3: #e6f6eb;
-  --color-success-4: #d6f1df;
-  --color-success-5: #c4e8d1;
-  --color-success-6: #adddc0;
-  --color-success-7: #8eceaa;
-  --color-success-8: #5bb98b;
-  --color-success-9: #30a46c;
-  --color-success-10: #2b9a66;
-  --color-success-11: #218358;
-  --color-success-12: #193b2d;
-
-  --color-success-a1: #00c04004;
-  --color-success-a2: #00a32f0b;
-  --color-success-a3: #00a43319;
-  --color-success-a4: #00a83829;
-  --color-success-a5: #019c393b;
-  --color-success-a6: #00963c52;
-  --color-success-a7: #00914071;
-  --color-success-a8: #00924ba4;
-  --color-success-a9: #008f4acf;
-  --color-success-a10: #008647d4;
-  --color-success-a11: #00713fde;
-  --color-success-a12: #002616e6;
-
-  --color-warning-1: #fefdfb;
-  --color-warning-2: #fefbe9;
-  --color-warning-3: #fff7c2;
-  --color-warning-4: #ffee9c;
-  --color-warning-5: #fbe577;
-  --color-warning-6: #f3d673;
-  --color-warning-7: #e9c162;
-  --color-warning-8: #e2a336;
-  --color-warning-9: #ffc53d;
-  --color-warning-10: #ffba18;
-  --color-warning-11: #ab6400;
-  --color-warning-12: #4f3422;
-
-  --color-warning-a1: #c0800004;
-  --color-warning-a2: #f4d10016;
-  --color-warning-a3: #ffde003d;
-  --color-warning-a4: #ffd40063;
-  --color-warning-a5: #f8cf0088;
-  --color-warning-a6: #eab5008c;
-  --color-warning-a7: #dc9b009d;
-  --color-warning-a8: #da8a00c9;
-  --color-warning-a9: #ffb300c2;
-  --color-warning-a10: #ffb300e7;
-  --color-warning-a11: #ab6400;
-  --color-warning-a12: #341500dd;
-}
-
-@theme {
-  /* Semantic aliases that produce Tailwind utilities. */
-  --color-app: var(--color-base-1);
-  --color-chrome: var(--color-base-2);
-  --color-chrome-alpha: color-mix(in srgb, var(--color-chrome) 86%, transparent);
-  --color-surface-subtle: var(--color-base-2);
-  --color-surface-panel: var(--color-base-1);
-  --color-surface-panel-alpha: color-mix(in srgb, var(--color-surface-panel) 88%, transparent);
-  --color-surface-raised: var(--color-base-1);
-  --color-surface-overlay: var(--color-base-1);
-  --color-surface-overlay-alpha: color-mix(in srgb, var(--color-surface-overlay) 92%, transparent);
-  --color-surface-accent: var(--color-accent-9);
-  --color-surface-accent-hover: var(--color-accent-10);
-  --color-surface-accent-fg: var(--color-accent-contrast);
-  --color-surface-inverse: var(--color-base-12);
-  --color-surface-inverse-fg: var(--color-base-1);
-  --color-foreground: var(--color-base-12);
-  --color-foreground-muted: var(--color-base-11);
-  --color-foreground-subtle: var(--color-base-11);
-  --color-border: var(--color-base-a5);
-  --color-border-interactive: var(--color-base-a6);
-  --color-border-strong: var(--color-base-a7);
-  --color-control: var(--ui-control-bg);
-  --color-control-hover: var(--ui-control-bg-hover);
-  --color-control-active: var(--ui-control-bg-active);
-  --color-control-disabled: var(--ui-control-bg-disabled);
-  --color-control-fg: var(--ui-control-fg);
-  --color-control-disabled-fg: var(--ui-control-fg-disabled);
-  --color-control-placeholder: var(--ui-control-placeholder);
-  --color-control-placeholder-disabled: var(--ui-control-placeholder-disabled);
-  --color-control-border: var(--ui-control-border);
-  --color-control-border-focus: var(--ui-control-border-focus);
-  --color-control-border-invalid: var(--ui-control-border-invalid);
-  --color-control-border-invalid-focus: var(--ui-control-border-invalid-focus);
-  --color-focus: var(--color-accent-8);
-  --color-focus-a4: color-mix(in srgb, var(--color-focus) var(--ui-focus-strength), transparent);
-  --color-overlay: rgb(0 0 0 / 0.35);
-  --color-accent-solid: var(--color-accent-11);
-  --color-accent-solid-hover: var(--color-accent-12);
-  --color-accent-contrast: white;
-  --color-accent-surface: color-mix(in srgb, var(--color-accent-9) var(--ui-accent-strength), var(--color-surface-panel));
-  --color-accent-surface-hover: color-mix(in srgb, var(--color-accent-9) var(--ui-accent-hover-strength), var(--color-surface-panel));
-  --color-accent-border: color-mix(in srgb, var(--color-accent-9) var(--ui-accent-border-strength), var(--color-border));
-  --color-accent-text: var(--color-accent-11);
-  --color-danger-solid: var(--color-danger-11);
-  --color-danger-solid-hover: var(--color-danger-12);
-  --color-danger-contrast: white;
-  --color-danger-surface: var(--color-danger-3);
-  --color-danger-surface-hover: var(--color-danger-4);
-  --color-danger-border: var(--color-danger-7);
-  --color-danger-text: var(--color-danger-11);
-  --color-success-solid: var(--color-success-9);
-  --color-success-solid-hover: var(--color-success-10);
-  --color-success-contrast: white;
-  --color-success-surface: var(--color-success-3);
-  --color-success-surface-hover: var(--color-success-4);
-  --color-success-border: var(--color-success-7);
-  --color-success-text: var(--color-success-11);
-  --color-warning-solid: var(--color-warning-9);
-  --color-warning-solid-hover: var(--color-warning-10);
-  --color-warning-contrast: var(--color-warning-12);
-  --color-warning-surface: var(--color-warning-3);
-  --color-warning-surface-hover: var(--color-warning-4);
-  --color-warning-border: var(--color-warning-7);
-  --color-warning-text: var(--color-warning-11);
-  --color-popover: var(--ui-popover-bg);
-  --color-popover-fg: var(--ui-popover-fg);
-  --color-popover-border: var(--ui-popover-border);
-  --color-toast: var(--ui-toast-bg);
-  --color-menu-item-hover: var(--ui-menu-item-bg-hover);
-  --color-menu-item-active: var(--ui-menu-item-bg-active);
-  --color-menu-item-fg: var(--ui-menu-item-fg);
-  --color-menu-item-muted: var(--ui-menu-item-fg-muted);
-  --color-menu-item-danger-hover: var(--ui-menu-item-danger-bg-hover);
-  --color-menu-item-danger-fg: var(--ui-menu-item-danger-fg);
-  --color-menu-separator: var(--ui-menu-separator);
-  --color-menu-heading-fg: var(--ui-menu-heading-fg);
-  --color-interactive-hover: var(--ui-interactive-bg-hover);
-  --color-interactive-active: var(--ui-interactive-bg-active);
-  --color-interactive-selected: var(--ui-interactive-bg-selected);
-  --color-interactive-selected-hover: var(--ui-interactive-bg-selected-hover);
-  --color-icon: var(--ui-icon-fg);
-  --color-scrollbar-thumb: var(--ui-scrollbar-thumb-bg);
-  --color-scrollbar-thumb-hover: var(--ui-scrollbar-thumb-bg-hover);
-  --shadow-interactive-hover: var(--ui-interactive-shadow-hover);
-  --shadow-interactive-selected: var(--ui-interactive-shadow-selected);
-  --shadow-interactive-focus: var(--ui-interactive-shadow-focus);
+@theme inline {
+  --color-surface: var(--ui-surface-color);
+  --color-surface-ink: var(--ui-surface-ink);
+  --color-surface-ink-muted: var(--ui-surface-ink-muted);
+  --color-icon: var(--ui-surface-ink-muted);
+  --color-scrollbar-thumb: var(--color-intent-neutral-edge);
+  --color-scrollbar-thumb-hover: var(--color-intent-neutral-edge-hover);
 }
 
 :root,
@@ -349,309 +94,37 @@
 .dark {
   color-scheme: light;
 
-  --ui-bg: var(--color-app);
-  --ui-bg-subtle: var(--color-surface-subtle);
-  --ui-fg: var(--color-foreground);
-  --ui-fg-muted: var(--color-foreground-muted);
-  --ui-fg-subtle: var(--color-foreground-subtle);
-  --ui-border: var(--color-border);
-  --ui-border-interactive: var(--color-border-interactive);
-  --ui-interactive-bg-hover: var(--color-base-a2);
-  --ui-interactive-bg-active: var(--color-base-a3);
-  --ui-interactive-bg-selected: var(--color-accent-surface);
-  --ui-interactive-bg-selected-hover: var(--color-accent-surface-hover);
-  --ui-interactive-shadow-hover: var(--shadow-border-hover);
-  --ui-interactive-shadow-selected: 0 0 0 1px var(--color-accent-border);
-  --ui-interactive-shadow-focus: var(--shadow-focus), var(--shadow-border-hover);
-  --ui-focus: var(--color-focus);
-  --ui-focus-ring: var(--shadow-focus);
-  --ui-overlay: var(--color-overlay);
-  --color-black-a1: rgb(0 0 0 / 0.04);
-  --color-black-a2: rgb(0 0 0 / 0.08);
-  --color-black-a3: rgb(0 0 0 / 0.12);
-  --color-black-a4: rgb(0 0 0 / 0.18);
-  --color-black-a5: rgb(0 0 0 / 0.28);
-  --color-black-a6: rgb(0 0 0 / 0.40);
-  --shadow-ring-weak: var(--color-base-a3);
-  --shadow-ring: var(--color-base-a5);
-  --shadow-ring-strong: var(--color-base-a6);
-  --ui-shadow-border:
-    0 0 0 1px var(--shadow-ring),
-    0 1px 2px -1px var(--color-black-a1),
-    0 2px 4px 0 var(--color-black-a1);
-  --ui-shadow-border-hover:
-    0 0 0 1px var(--shadow-ring-strong),
-    0 1px 2px -1px var(--color-black-a2),
-    0 2px 4px 0 var(--color-black-a2);
-  --ui-shadow-1: var(--shadow-border);
-  --ui-shadow-2:
-    0 0 0 1px var(--shadow-ring),
-    0 1px 1px var(--color-base-a2),
-    0 2px 4px -2px var(--color-black-a2),
-    0 4px 8px -4px var(--color-black-a1);
-  --ui-shadow-3:
-    0 0 0 1px var(--shadow-ring),
-    0 2px 4px -2px var(--color-base-a3),
-    0 6px 16px -6px var(--color-black-a2),
-    0 8px 24px -12px var(--color-black-a2);
-  --ui-shadow-4:
-    0 0 0 1px var(--shadow-ring),
-    0 8px 24px -8px var(--color-black-a2),
-    0 12px 32px -16px var(--color-black-a3);
-  --ui-shadow-5:
-    0 0 0 1px var(--shadow-ring),
-    0 12px 40px -12px var(--color-black-a3),
-    0 20px 64px -24px var(--color-black-a4);
-  --ui-shadow-6:
-    0 0 0 1px var(--shadow-ring),
-    0 16px 48px -12px var(--color-black-a4),
-    0 24px 80px -24px var(--color-black-a5);
-  --ui-accent-strength: 12%;
-  --ui-accent-hover-strength: 16%;
-  --ui-accent-border-strength: 38%;
-  --ui-focus-strength: 24%;
-
   --ui-font-weight-normal: var(--font-weight-normal);
   --ui-font-weight-medium: var(--font-weight-medium);
   --ui-font-weight-semibold: var(--font-weight-semibold);
   --ui-letter-spacing: 0;
 
-  --ui-border-width: 1px;
-  --ui-border-width-strong: 2px;
-
   --ui-control-height-xs: var(--spacing-control-xs);
   --ui-control-height-sm: var(--spacing-control-sm);
   --ui-control-height-md: var(--spacing-control-md);
   --ui-control-height-lg: var(--spacing-control-lg);
   --ui-control-height-xlg: var(--spacing-control-xlg);
-  --ui-control-padding-x: 0.75rem;
-  --ui-control-gap: 0.5rem;
-  --ui-control-radius: var(--radius-3);
-  --ui-control-bg: var(--color-surface-panel);
-  --ui-control-bg-hover: var(--color-base-a2);
-  --ui-control-bg-active: var(--color-base-a3);
-  --ui-control-bg-disabled: var(--color-surface-panel);
-  --ui-control-fg: var(--color-foreground);
-  --ui-control-fg-disabled: var(--color-foreground-subtle);
-  --ui-control-placeholder: var(--color-foreground-subtle);
-  --ui-control-placeholder-disabled: var(--color-foreground-subtle);
-  --ui-control-border: var(--color-border);
-  --ui-control-border-hover: color-mix(in srgb, var(--ui-control-border) 90%, var(--ui-fg) 10%);
-  --ui-control-border-focus: var(--color-accent-9);
-  --ui-control-border-invalid: var(--color-danger-border);
-  --ui-control-border-invalid-hover: color-mix(in srgb, var(--ui-control-border-invalid) 84%, var(--color-danger-text) 16%);
-  --ui-control-border-invalid-focus: var(--color-danger-9);
-  --ui-control-shadow: var(--ui-shadow-border);
-  --ui-control-shadow-disabled: var(--ui-shadow-border);
-  --ui-control-shadow-hover: 0 0 0 1px var(--ui-control-border-hover);
-  --ui-control-shadow-focus: 0 0 0 1px var(--ui-control-border-focus);
-  --ui-control-shadow-invalid: 0 0 0 1px var(--ui-control-border-invalid);
-  --ui-control-shadow-invalid-hover: 0 0 0 1px var(--ui-control-border-invalid-hover);
-  --ui-control-shadow-invalid-focus: 0 0 0 1px var(--ui-control-border-invalid-focus);
-  --ui-panel-shadow: var(--shadow-2);
-
-  --ui-popover-bg: var(--color-surface-overlay);
-  --ui-popover-fg: var(--color-foreground);
-  --ui-popover-border: var(--color-border);
-  --ui-popover-radius: var(--radius-4);
-  --ui-popover-shadow:
-    var(--shadow-border),
-    0 8px 24px -8px var(--color-black-a2),
-    0 12px 32px -16px var(--color-black-a3);
-  --ui-dialog-shadow: var(--shadow-5);
-  --ui-modal-shadow: var(--shadow-6);
-  --ui-popover-padding: 0.375rem;
+  --ui-control-radius: var(--radius-control);
+
+  --ui-popover-radius: var(--radius-overlay-sm);
+  --ui-popover-padding: var(--spacing-popover-padding);
   --ui-popover-z: var(--z-index-popover);
-  --ui-toast-bg: var(--color-surface-overlay);
   --ui-toast-stack-peek: 8px;
 
-  --ui-combobox-listbox-max-height: 16rem;
-
-  --ui-menu-item-height: var(--spacing-control-lg);
-  --ui-menu-item-padding-x: 0.625rem;
-  --ui-menu-item-radius: var(--radius-3);
-  --ui-menu-item-bg-hover: var(--color-base-a2);
-  --ui-menu-item-bg-active: var(--color-base-a3);
-  --ui-menu-item-fg: var(--color-foreground);
-  --ui-menu-item-fg-muted: var(--color-foreground-muted);
-  --ui-menu-item-danger-fg: var(--color-danger-text);
-  --ui-menu-item-danger-bg-hover: var(--color-danger-a3);
-  --ui-menu-separator: var(--color-base-a5);
-  --ui-menu-heading-fg: var(--color-foreground-muted);
-  --ui-icon-size-xs: 0.75rem;
-  --ui-icon-size-sm: 0.875rem;
-  --ui-icon-size: var(--ui-icon-size-sm);
-  --ui-icon-size-lg: 1rem;
-  --ui-icon-fg: var(--color-foreground-subtle);
-  --ui-scrollbar-size: 0.375rem;
-  --ui-scrollbar-inset: 0.125rem;
-  --ui-scrollbar-thumb-bg: var(--color-base-a5);
-  --ui-scrollbar-thumb-bg-hover: var(--color-base-a7);
-  --ui-scrollbar-thumb-radius: var(--radius-full);
+  --ui-select-listbox-max-height: var(--spacing-select-listbox);
 
-  --color-control: var(--ui-control-bg);
-  --color-control-hover: var(--ui-control-bg-hover);
-  --color-control-active: var(--ui-control-bg-active);
-  --color-control-disabled: var(--ui-control-bg-disabled);
-  --color-control-fg: var(--ui-control-fg);
-  --color-control-disabled-fg: var(--ui-control-fg-disabled);
-  --color-control-placeholder: var(--ui-control-placeholder);
-  --color-control-placeholder-disabled: var(--ui-control-placeholder-disabled);
-  --color-control-border: var(--ui-control-border);
-  --color-control-border-focus: var(--ui-control-border-focus);
-  --color-control-border-invalid: var(--ui-control-border-invalid);
-  --color-control-border-invalid-focus: var(--ui-control-border-invalid-focus);
-  --color-focus: var(--color-accent-8);
-  --color-focus-a4: color-mix(in srgb, var(--color-focus) var(--ui-focus-strength), transparent);
-  --color-accent-solid: var(--color-accent-11);
-  --color-accent-solid-hover: var(--color-accent-12);
-  --color-accent-surface: color-mix(in srgb, var(--color-accent-9) var(--ui-accent-strength), var(--color-surface-panel));
-  --color-accent-surface-hover: color-mix(in srgb, var(--color-accent-9) var(--ui-accent-hover-strength), var(--color-surface-panel));
-  --color-accent-border: color-mix(in srgb, var(--color-accent-9) var(--ui-accent-border-strength), var(--color-border));
-  --color-danger-solid: var(--color-danger-11);
-  --color-danger-solid-hover: var(--color-danger-12);
-  --color-danger-contrast: white;
-  --color-success-solid: var(--color-success-9);
-  --color-success-solid-hover: var(--color-success-10);
-  --color-success-contrast: white;
-  --color-success-surface: var(--color-success-3);
-  --color-success-surface-hover: var(--color-success-4);
-  --color-success-border: var(--color-success-7);
-  --color-warning-solid: var(--color-warning-9);
-  --color-warning-solid-hover: var(--color-warning-10);
-  --color-warning-contrast: var(--color-warning-12);
-  --color-warning-surface: var(--color-warning-3);
-  --color-warning-surface-hover: var(--color-warning-4);
-  --color-warning-border: var(--color-warning-7);
-  --color-popover: var(--ui-popover-bg);
-  --color-popover-fg: var(--ui-popover-fg);
-  --color-popover-border: var(--ui-popover-border);
-  --color-toast: var(--ui-toast-bg);
-  --color-menu-item-hover: var(--ui-menu-item-bg-hover);
-  --color-menu-item-active: var(--ui-menu-item-bg-active);
-  --color-menu-item-fg: var(--ui-menu-item-fg);
-  --color-menu-item-muted: var(--ui-menu-item-fg-muted);
-  --color-menu-item-danger-hover: var(--ui-menu-item-danger-bg-hover);
-  --color-menu-item-danger-fg: var(--ui-menu-item-danger-fg);
-  --color-menu-separator: var(--ui-menu-separator);
-  --color-menu-heading-fg: var(--ui-menu-heading-fg);
-  --color-interactive-hover: var(--ui-interactive-bg-hover);
-  --color-interactive-active: var(--ui-interactive-bg-active);
-  --color-interactive-selected: var(--ui-interactive-bg-selected);
-  --color-interactive-selected-hover: var(--ui-interactive-bg-selected-hover);
-  --color-icon: var(--ui-icon-fg);
-  --color-scrollbar-thumb: var(--ui-scrollbar-thumb-bg);
-  --color-scrollbar-thumb-hover: var(--ui-scrollbar-thumb-bg-hover);
-  --shadow-interactive-hover: var(--ui-interactive-shadow-hover);
-  --shadow-interactive-selected: var(--ui-interactive-shadow-selected);
-  --shadow-interactive-focus: var(--ui-interactive-shadow-focus);
+  --ui-menu-item-height: var(--spacing-menu-item);
+  --ui-icon-size-xs: var(--spacing-icon-xs);
+  --ui-icon-size-sm: var(--spacing-icon-sm);
+  --ui-icon-size: var(--spacing-icon);
+  --ui-icon-size-lg: var(--spacing-icon-lg);
+  --ui-scrollbar-size: var(--spacing-scrollbar);
+  --ui-scrollbar-inset: var(--spacing-scrollbar-inset);
+  --ui-scrollbar-thumb-radius: var(--radius-full);
 }
 
 .light {
-  --color-base-1: #fcfcfd;
-  --color-base-2: #f9f9fb;
-  --color-base-3: #f0f0f3;
-  --color-base-4: #e8e8ec;
-  --color-base-5: #e0e1e6;
-  --color-base-6: #d9d9e0;
-  --color-base-7: #cdced6;
-  --color-base-8: #b9bbc6;
-  --color-base-9: #8b8d98;
-  --color-base-10: #80838d;
-  --color-base-11: #60646c;
-  --color-base-12: #1c2024;
-
-  --color-base-a1: #00005503;
-  --color-base-a2: #00005506;
-  --color-base-a3: #0000330f;
-  --color-base-a4: #00002d17;
-  --color-base-a5: #0009321f;
-  --color-base-a6: #00002f26;
-  --color-base-a7: #00062e32;
-  --color-base-a8: #00083046;
-  --color-base-a9: #00051d74;
-  --color-base-a10: #00071b7f;
-  --color-base-a11: #0007149f;
-  --color-base-a12: #000509e3;
-
-  --color-app: var(--color-base-1);
-  --color-chrome: var(--color-base-2);
-  --color-chrome-alpha: color-mix(in srgb, var(--color-chrome) 86%, transparent);
-  --color-surface-subtle: var(--color-base-2);
-  --color-surface-panel: var(--color-base-1);
-  --color-surface-panel-alpha: color-mix(in srgb, var(--color-surface-panel) 88%, transparent);
-  --color-surface-raised: var(--color-base-1);
-  --color-surface-overlay: var(--color-base-1);
-  --color-surface-overlay-alpha: color-mix(in srgb, var(--color-surface-overlay) 92%, transparent);
-  --color-surface-inverse: var(--color-base-12);
-  --color-surface-inverse-fg: var(--color-base-1);
-  --color-foreground: var(--color-base-12);
-  --color-foreground-muted: var(--color-base-11);
-  --color-foreground-subtle: var(--color-base-11);
-  --color-border: var(--color-base-a5);
-  --color-border-interactive: var(--color-base-a6);
-  --color-border-strong: var(--color-base-a7);
-  --color-overlay: rgb(0 0 0 / 0.35);
-  --ui-accent-strength: 12%;
-  --ui-accent-hover-strength: 16%;
-  --ui-accent-border-strength: 38%;
-  --ui-focus-strength: 24%;
-  --color-accent-contrast: white;
-  --color-accent-text: var(--color-accent-11);
-  --color-danger-surface: var(--color-danger-3);
-  --color-danger-surface-hover: var(--color-danger-4);
-  --color-danger-border: var(--color-danger-7);
-  --color-danger-text: var(--color-danger-11);
-  --color-success-text: var(--color-success-11);
-  --color-warning-text: var(--color-warning-11);
-  --color-black-a1: rgb(0 0 0 / 0.04);
-  --color-black-a2: rgb(0 0 0 / 0.08);
-  --color-black-a3: rgb(0 0 0 / 0.12);
-  --color-black-a4: rgb(0 0 0 / 0.18);
-  --color-black-a5: rgb(0 0 0 / 0.28);
-  --color-black-a6: rgb(0 0 0 / 0.40);
-  --shadow-ring-weak: var(--color-base-a3);
-  --shadow-ring: var(--color-base-a5);
-  --shadow-ring-strong: var(--color-base-a6);
-  --ui-shadow-border:
-    0 0 0 1px var(--shadow-ring),
-    0 1px 2px -1px var(--color-black-a1),
-    0 2px 4px 0 var(--color-black-a1);
-  --ui-shadow-border-hover:
-    0 0 0 1px var(--shadow-ring-strong),
-    0 1px 2px -1px var(--color-black-a2),
-    0 2px 4px 0 var(--color-black-a2);
-  --ui-shadow-1: var(--shadow-border);
-  --ui-shadow-2:
-    0 0 0 1px var(--shadow-ring),
-    0 1px 1px var(--color-base-a2),
-    0 2px 4px -2px var(--color-black-a2),
-    0 4px 8px -4px var(--color-black-a1);
-  --ui-shadow-3:
-    0 0 0 1px var(--shadow-ring),
-    0 2px 4px -2px var(--color-base-a3),
-    0 6px 16px -6px var(--color-black-a2),
-    0 8px 24px -12px var(--color-black-a2);
-  --ui-shadow-4:
-    0 0 0 1px var(--shadow-ring),
-    0 8px 24px -8px var(--color-black-a2),
-    0 12px 32px -16px var(--color-black-a3);
-  --ui-shadow-5:
-    0 0 0 1px var(--shadow-ring),
-    0 12px 40px -12px var(--color-black-a3),
-    0 20px 64px -24px var(--color-black-a4);
-  --ui-shadow-6:
-    0 0 0 1px var(--shadow-ring),
-    0 16px 48px -12px var(--color-black-a4),
-    0 24px 80px -24px var(--color-black-a5);
-  --ui-panel-shadow: var(--shadow-2);
-  --ui-popover-shadow:
-    var(--shadow-border),
-    0 8px 24px -8px var(--color-black-a2),
-    0 12px 32px -16px var(--color-black-a3);
-  --ui-dialog-shadow: var(--shadow-5);
-  --ui-modal-shadow: var(--shadow-6);
-  --ui-toast-bg: var(--color-surface-overlay);
+  color-scheme: light;
 }
 
 @utility max-h-xs {
@@ -678,169 +151,735 @@
   max-height: 65ch;
 }
 
+@utility ui-edge {
+  box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-neutral-edge);
+}
+
+@utility ui-focus-ring {
+  box-shadow: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
+}
+
+@utility ui-focus-ring-inset {
+  box-shadow: inset 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
+}
+
 @layer components {
-  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"]):is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not([data-invalid]) {
-    --ui-control-shadow: var(--ui-control-shadow-hover);
+  /* Disabled is one terminal interaction treatment across every control anatomy. */
+  :is(
+    [data-ui-action-recipe]:is(:disabled, [aria-disabled="true"]):not([data-ui-loading]),
+    [data-ui-action-recipe][data-disabled],
+    [data-ui-control][data-ui-control-recipe]:is(
+      [data-disabled],
+      :disabled,
+      :has(:disabled):not(:has(:enabled))
+    ),
+    [data-ui-selection-root]:is([data-disabled], :has(:disabled):not(:has(:enabled)))
+  ) {
+    pointer-events: none;
+    opacity: var(--opacity-interaction-disabled);
+  }
+
+  /* Shared action treatment: Button and interactive Badge. */
+  [data-ui-action-recipe] {
+    --ui-action-text: var(--color-intent-neutral-text);
+    --ui-action-text-hover: var(--color-intent-neutral-text-hover);
+    --ui-action-soft: var(--color-intent-neutral-soft);
+    --ui-action-soft-hover: var(--color-intent-neutral-soft-hover);
+    --ui-action-soft-pressed: var(--color-intent-neutral-soft-pressed);
+    --ui-action-soft-ink: var(--color-intent-neutral-soft-ink);
+    --ui-action-solid: var(--color-intent-neutral-solid);
+    --ui-action-solid-hover: var(--color-intent-neutral-solid-hover);
+    --ui-action-solid-pressed: var(--color-intent-neutral-solid-pressed);
+    --ui-action-solid-ink: var(--color-intent-neutral-solid-ink);
+    --ui-action-edge: var(--color-intent-neutral-edge);
+    --ui-action-edge-hover: var(--color-intent-neutral-edge-hover);
+    --ui-action-edge-strong: var(--color-intent-neutral-edge-strong);
+    --ui-action-focus: var(--color-intent-neutral-focus);
+    --ui-action-focus-width: var(--color-intent-neutral-focus-width);
+  }
+
+  [data-ui-action-recipe][data-color="accent"] {
+    --ui-action-text: var(--color-intent-accent-text);
+    --ui-action-text-hover: var(--color-intent-accent-text-hover);
+    --ui-action-soft: var(--color-intent-accent-soft);
+    --ui-action-soft-hover: var(--color-intent-accent-soft-hover);
+    --ui-action-soft-pressed: var(--color-intent-accent-soft-pressed);
+    --ui-action-soft-ink: var(--color-intent-accent-soft-ink);
+    --ui-action-solid: var(--color-intent-accent-solid);
+    --ui-action-solid-hover: var(--color-intent-accent-solid-hover);
+    --ui-action-solid-pressed: var(--color-intent-accent-solid-pressed);
+    --ui-action-solid-ink: var(--color-intent-accent-solid-ink);
+    --ui-action-edge: var(--color-intent-accent-edge);
+    --ui-action-edge-hover: var(--color-intent-accent-edge-hover);
+    --ui-action-edge-strong: var(--color-intent-accent-edge-strong);
+    --ui-action-focus: var(--color-intent-accent-focus);
+    --ui-action-focus-width: var(--color-intent-accent-focus-width);
+  }
+
+  [data-ui-action-recipe][data-color="success"] {
+    --ui-action-text: var(--color-intent-success-text);
+    --ui-action-text-hover: var(--color-intent-success-text-hover);
+    --ui-action-soft: var(--color-intent-success-soft);
+    --ui-action-soft-hover: var(--color-intent-success-soft-hover);
+    --ui-action-soft-pressed: var(--color-intent-success-soft-pressed);
+    --ui-action-soft-ink: var(--color-intent-success-soft-ink);
+    --ui-action-solid: var(--color-intent-success-solid);
+    --ui-action-solid-hover: var(--color-intent-success-solid-hover);
+    --ui-action-solid-pressed: var(--color-intent-success-solid-pressed);
+    --ui-action-solid-ink: var(--color-intent-success-solid-ink);
+    --ui-action-edge: var(--color-intent-success-edge);
+    --ui-action-edge-hover: var(--color-intent-success-edge-hover);
+    --ui-action-edge-strong: var(--color-intent-success-edge-strong);
+    --ui-action-focus: var(--color-intent-success-focus);
+    --ui-action-focus-width: var(--color-intent-success-focus-width);
+  }
+
+  [data-ui-action-recipe][data-color="warning"] {
+    --ui-action-text: var(--color-intent-warning-text);
+    --ui-action-text-hover: var(--color-intent-warning-text-hover);
+    --ui-action-soft: var(--color-intent-warning-soft);
+    --ui-action-soft-hover: var(--color-intent-warning-soft-hover);
+    --ui-action-soft-pressed: var(--color-intent-warning-soft-pressed);
+    --ui-action-soft-ink: var(--color-intent-warning-soft-ink);
+    --ui-action-solid: var(--color-intent-warning-solid);
+    --ui-action-solid-hover: var(--color-intent-warning-solid-hover);
+    --ui-action-solid-pressed: var(--color-intent-warning-solid-pressed);
+    --ui-action-solid-ink: var(--color-intent-warning-solid-ink);
+    --ui-action-edge: var(--color-intent-warning-edge);
+    --ui-action-edge-hover: var(--color-intent-warning-edge-hover);
+    --ui-action-edge-strong: var(--color-intent-warning-edge-strong);
+    --ui-action-focus: var(--color-intent-warning-focus);
+    --ui-action-focus-width: var(--color-intent-warning-focus-width);
+  }
+
+  [data-ui-action-recipe][data-color="danger"] {
+    --ui-action-text: var(--color-intent-danger-text);
+    --ui-action-text-hover: var(--color-intent-danger-text-hover);
+    --ui-action-soft: var(--color-intent-danger-soft);
+    --ui-action-soft-hover: var(--color-intent-danger-soft-hover);
+    --ui-action-soft-pressed: var(--color-intent-danger-soft-pressed);
+    --ui-action-soft-ink: var(--color-intent-danger-soft-ink);
+    --ui-action-solid: var(--color-intent-danger-solid);
+    --ui-action-solid-hover: var(--color-intent-danger-solid-hover);
+    --ui-action-solid-pressed: var(--color-intent-danger-solid-pressed);
+    --ui-action-solid-ink: var(--color-intent-danger-solid-ink);
+    --ui-action-edge: var(--color-intent-danger-edge);
+    --ui-action-edge-hover: var(--color-intent-danger-edge-hover);
+    --ui-action-edge-strong: var(--color-intent-danger-edge-strong);
+    --ui-action-focus: var(--color-intent-danger-focus);
+    --ui-action-focus-width: var(--color-intent-danger-focus-width);
+  }
+
+  [data-ui-action-recipe]:where([data-variant="ghost"], [data-variant="link"]) {
+    color: var(--ui-action-text);
+    background-color: transparent;
+    box-shadow: none;
+  }
+
+  [data-ui-action-recipe][data-variant="soft"] {
+    color: var(--ui-action-soft-ink);
+    background-color: var(--ui-action-soft);
+    box-shadow: none;
+  }
+
+  /* Selected values need one more step of separation from their control surface than informational badges. */
+  [data-ui-select-chip][data-variant="soft"] {
+    background-color: var(--ui-action-soft-hover);
+  }
+
+  [data-ui-action-recipe][data-variant="surface"] {
+    color: var(--ui-action-text);
+    background-color: var(--color-interaction-hover);
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-action-edge);
+  }
+
+  [data-ui-action-recipe][data-variant="outline"] {
+    color: var(--ui-action-text);
+    background-color: transparent;
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-action-edge);
+  }
+
+  [data-ui-action-recipe][data-variant="solid"] {
+    color: var(--ui-action-solid-ink);
+    background-color: var(--ui-action-solid);
+    box-shadow: var(--shadow-elevation-1);
+  }
+
+  :is([data-ui-button], [data-ui-badge][data-interactive]):focus-visible {
+    box-shadow: 0 0 0 var(--ui-action-focus-width) var(--ui-action-focus);
+  }
+
+  :is([data-ui-button], [data-ui-badge][data-interactive]):where([data-variant="surface"], [data-variant="outline"]):hover:not(:disabled):not([aria-disabled="true"]) {
+    color: var(--ui-action-text-hover);
+    background-color: var(--color-interaction-hover);
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-action-edge-hover);
+  }
+
+  :is([data-ui-button], [data-ui-badge][data-interactive])[data-variant="ghost"]:hover:not(:disabled):not([aria-disabled="true"]) {
+    color: var(--ui-action-text-hover);
+    background-color: var(--color-interaction-hover);
+  }
+
+  :is([data-ui-button], [data-ui-badge][data-interactive])[data-variant="link"]:hover:not(:disabled):not([aria-disabled="true"]) {
+    color: var(--ui-action-text-hover);
+  }
+
+  :is([data-ui-button], [data-ui-badge][data-interactive])[data-variant="soft"]:hover:not(:disabled):not([aria-disabled="true"]) {
+    background-color: var(--ui-action-soft-hover);
+  }
+
+  :is([data-ui-button], [data-ui-badge][data-interactive])[data-variant="solid"]:hover:not(:disabled):not([aria-disabled="true"]) {
+    background-color: var(--ui-action-solid-hover);
+  }
+
+  :is([data-ui-button], [data-ui-badge][data-interactive])[data-variant="soft"]:active:not(:disabled):not([aria-disabled="true"]) {
+    background-color: var(--ui-action-soft-pressed);
+  }
+
+  :is([data-ui-button], [data-ui-badge][data-interactive])[data-variant="solid"]:active:not(:disabled):not([aria-disabled="true"]) {
+    background-color: var(--ui-action-solid-pressed);
+  }
+
+  :is([data-ui-button], [data-ui-badge][data-interactive]):where([data-variant="ghost"], [data-variant="surface"], [data-variant="outline"]):active:not(:disabled):not([aria-disabled="true"]) {
+    background-color: var(--color-interaction-pressed);
+  }
+
+  [data-ui-badge-close]:hover,
+  [data-ui-badge-close]:focus-visible {
+    background-color: color-mix(in srgb, currentColor 12%, transparent);
+  }
+
+  [data-ui-badge-close]:focus-visible {
+    box-shadow: 0 0 0 1px currentColor;
+  }
+
+  /* Feedback surface treatment: Toast. */
+  [data-ui-toast-recipe] {
+    --ui-toast-text: var(--color-intent-neutral-text);
+    --ui-toast-soft: var(--color-intent-neutral-soft);
+    --ui-toast-soft-ink: var(--color-intent-neutral-soft-ink);
+    --ui-toast-soft-ink-muted: var(--color-intent-neutral-soft-ink-muted);
+    --ui-toast-solid: var(--color-intent-neutral-solid);
+    --ui-toast-solid-ink: var(--color-intent-neutral-solid-ink);
+    --ui-toast-edge: var(--color-intent-neutral-edge);
+    --ui-toast-edge-strong: var(--color-intent-neutral-edge-strong);
+    --ui-toast-focus: var(--color-intent-neutral-focus);
+    --ui-toast-focus-width: var(--color-intent-neutral-focus-width);
+    --ui-toast-ink: var(--ui-surface-ink);
+    --ui-toast-ink-muted: var(--ui-surface-ink-muted);
+    color: var(--ui-toast-ink);
+    background-color: var(--ui-surface-color);
+  }
+
+  [data-ui-toast-recipe][data-color="accent"] {
+    --ui-toast-text: var(--color-intent-accent-text);
+    --ui-toast-soft: var(--color-intent-accent-soft);
+    --ui-toast-soft-ink: var(--color-intent-accent-soft-ink);
+    --ui-toast-soft-ink-muted: var(--color-intent-accent-soft-ink-muted);
+    --ui-toast-solid: var(--color-intent-accent-solid);
+    --ui-toast-solid-ink: var(--color-intent-accent-solid-ink);
+    --ui-toast-edge: var(--color-intent-accent-edge);
+    --ui-toast-edge-strong: var(--color-intent-accent-edge-strong);
+    --ui-toast-focus: var(--color-intent-accent-focus);
+    --ui-toast-focus-width: var(--color-intent-accent-focus-width);
+  }
+
+  [data-ui-toast-recipe][data-color="success"] {
+    --ui-toast-text: var(--color-intent-success-text);
+    --ui-toast-soft: var(--color-intent-success-soft);
+    --ui-toast-soft-ink: var(--color-intent-success-soft-ink);
+    --ui-toast-soft-ink-muted: var(--color-intent-success-soft-ink-muted);
+    --ui-toast-solid: var(--color-intent-success-solid);
+    --ui-toast-solid-ink: var(--color-intent-success-solid-ink);
+    --ui-toast-edge: var(--color-intent-success-edge);
+    --ui-toast-edge-strong: var(--color-intent-success-edge-strong);
+    --ui-toast-focus: var(--color-intent-success-focus);
+    --ui-toast-focus-width: var(--color-intent-success-focus-width);
+  }
+
+  [data-ui-toast-recipe][data-color="warning"] {
+    --ui-toast-text: var(--color-intent-warning-text);
+    --ui-toast-soft: var(--color-intent-warning-soft);
+    --ui-toast-soft-ink: var(--color-intent-warning-soft-ink);
+    --ui-toast-soft-ink-muted: var(--color-intent-warning-soft-ink-muted);
+    --ui-toast-solid: var(--color-intent-warning-solid);
+    --ui-toast-solid-ink: var(--color-intent-warning-solid-ink);
+    --ui-toast-edge: var(--color-intent-warning-edge);
+    --ui-toast-edge-strong: var(--color-intent-warning-edge-strong);
+    --ui-toast-focus: var(--color-intent-warning-focus);
+    --ui-toast-focus-width: var(--color-intent-warning-focus-width);
+  }
+
+  [data-ui-toast-recipe][data-color="danger"] {
+    --ui-toast-text: var(--color-intent-danger-text);
+    --ui-toast-soft: var(--color-intent-danger-soft);
+    --ui-toast-soft-ink: var(--color-intent-danger-soft-ink);
+    --ui-toast-soft-ink-muted: var(--color-intent-danger-soft-ink-muted);
+    --ui-toast-solid: var(--color-intent-danger-solid);
+    --ui-toast-solid-ink: var(--color-intent-danger-solid-ink);
+    --ui-toast-edge: var(--color-intent-danger-edge);
+    --ui-toast-edge-strong: var(--color-intent-danger-edge-strong);
+    --ui-toast-focus: var(--color-intent-danger-focus);
+    --ui-toast-focus-width: var(--color-intent-danger-focus-width);
+  }
+
+  [data-ui-toast-recipe][data-variant="soft"] {
+    --ui-toast-ink: var(--ui-toast-soft-ink);
+    --ui-toast-ink-muted: var(--ui-toast-soft-ink-muted);
+    color: var(--ui-toast-ink);
+    background-color: var(--ui-toast-soft);
+  }
+
+  [data-ui-toast-recipe][data-variant="surface"] {
+    --ui-state-shadow-layers: 0 0 0 var(--border-width-edge-perimeter) var(--ui-toast-edge);
+  }
+
+  [data-ui-toast-recipe][data-variant="outline"] {
+    --ui-toast-ink: var(--ui-toast-text);
+    --ui-toast-ink-muted: var(--ui-toast-text);
+    --ui-state-shadow-layers: 0 0 0 var(--border-width-edge-perimeter) var(--ui-toast-edge-strong);
+    color: var(--ui-toast-ink);
+    background-color: transparent;
+  }
+
+  [data-ui-toast-recipe][data-variant="solid"] {
+    --ui-toast-ink: var(--ui-toast-solid-ink);
+    --ui-toast-ink-muted: var(--ui-toast-solid-ink);
+    color: var(--ui-toast-ink);
+    background-color: var(--ui-toast-solid);
+  }
+
+  [data-ui-toast-marker] {
+    background-color: var(--ui-toast-solid);
+  }
+
+  [data-ui-toast-title] {
+    color: var(--ui-toast-ink);
+  }
+
+  [data-ui-toast-description] {
+    color: var(--ui-toast-ink-muted);
+  }
+
+  [data-ui-toast-close] {
+    color: var(--ui-toast-ink-muted);
+  }
+
+  [data-ui-toast-close]:hover {
+    color: var(--ui-toast-ink);
+    background-color: color-mix(in srgb, currentColor 10%, transparent);
+  }
+
+  [data-ui-toast-close]:focus-visible {
+    color: var(--ui-toast-ink);
+    box-shadow: 0 0 0 var(--ui-toast-focus-width) var(--ui-toast-focus);
+  }
+
+  /* Selection navigation treatment: Tabs. */
+  [data-ui-tabs-list] {
+    color: var(--ui-surface-ink);
+  }
+
+  [data-ui-tabs-list][data-variant="line"] {
+    box-shadow: inset 0 calc(var(--border-width-edge-separator) * -1) 0 var(--color-separator);
+  }
+
+  [data-ui-tabs-list][data-variant="line"][data-orientation="vertical"] {
+    box-shadow: inset var(--border-width-edge-separator) 0 0 var(--color-separator);
+  }
+
+  [data-ui-tabs-list][data-variant="segmented"] {
+    background-color: var(--color-interaction-hover);
+    box-shadow: inset 0 0 0 var(--border-width-edge-control) var(--color-intent-neutral-edge);
+  }
+
+  [data-ui-tabs-tab] {
+    color: var(--ui-surface-ink-muted);
+  }
+
+  [data-ui-tabs-tab]:hover:not([data-disabled]) {
+    color: var(--ui-surface-ink);
+  }
+
+  [data-ui-tabs-tab][data-selected] {
+    color: var(--ui-surface-ink);
+  }
+
+  [data-ui-tabs-tab]:focus-visible {
+    box-shadow: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
+  }
+
+  [data-ui-tabs-tab][data-disabled] {
+    color: var(--color-interaction-disabled-ink);
+  }
+
+  [data-ui-tabs-list][data-variant="subtle"] [data-ui-tabs-indicator],
+  [data-ui-tabs-list][data-variant="pills"] [data-ui-tabs-indicator] {
+    background-color: var(--color-interaction-selected);
+  }
+
+  [data-ui-tabs-list][data-variant="line"] [data-ui-tabs-indicator] {
+    background-color: var(--color-intent-accent-solid);
+  }
+
+  [data-ui-tabs-list][data-variant="segmented"] [data-ui-tabs-indicator] {
+    background-color: transparent;
+  }
+
+  [data-ui-tabs-list][data-variant="segmented"] [data-ui-tabs-indicator]::before {
+    position: absolute;
+    inset: var(--border-width-edge-control);
+    border-radius: inherit;
+    background-color: var(--ui-surface-color);
+    box-shadow: inset 0 0 0 var(--border-width-edge-control) var(--color-intent-neutral-edge);
+    content: "";
+  }
+
+  [data-ui-tabs-panel] {
+    color: var(--ui-surface-ink);
+  }
+
+  [data-ui-tabs-panel]:focus-visible {
+    box-shadow: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
+  }
+
+  /* Collection option treatment: Menu, Select, Date Picker, and Sidebar. */
+  [data-ui-option-recipe] {
+    --ui-option-text: var(--ui-surface-ink);
+    --ui-option-hover: var(--color-interaction-hover);
+    --ui-option-active: var(--color-interaction-pressed);
+    --ui-option-selected-background: var(--background-interaction-selection-neutral);
+    --ui-option-selected-background-hover: var(--background-interaction-selection-neutral-hover);
+    --ui-option-selected-ink: var(--color-interaction-selection-neutral-ink);
+    color: var(--ui-option-text);
+    background-color: transparent;
+  }
+
+  [data-ui-option-recipe][data-color="accent"] {
+    --ui-option-text: var(--color-intent-accent-text);
+    --ui-option-hover: var(--color-intent-accent-soft);
+    --ui-option-active: var(--color-intent-accent-soft-pressed);
+    --ui-option-selected-background: var(--background-interaction-selection-accent);
+    --ui-option-selected-background-hover: var(--background-interaction-selection-accent-hover);
+    --ui-option-selected-ink: var(--color-interaction-selection-accent-ink);
+  }
+
+  [data-ui-option-recipe][data-color="success"] {
+    --ui-option-text: var(--color-intent-success-text);
+    --ui-option-hover: var(--color-intent-success-soft);
+    --ui-option-active: var(--color-intent-success-soft-pressed);
+    --ui-option-selected-background: var(--background-interaction-selection-success);
+    --ui-option-selected-background-hover: var(--background-interaction-selection-success-hover);
+    --ui-option-selected-ink: var(--color-interaction-selection-success-ink);
+  }
+
+  [data-ui-option-recipe][data-color="warning"] {
+    --ui-option-text: var(--color-intent-warning-text);
+    --ui-option-hover: var(--color-intent-warning-soft);
+    --ui-option-active: var(--color-intent-warning-soft-pressed);
+    --ui-option-selected-background: var(--background-interaction-selection-warning);
+    --ui-option-selected-background-hover: var(--background-interaction-selection-warning-hover);
+    --ui-option-selected-ink: var(--color-interaction-selection-warning-ink);
+  }
+
+  [data-ui-option-recipe][data-color="danger"] {
+    --ui-option-text: var(--color-intent-danger-text);
+    --ui-option-hover: var(--color-intent-danger-soft);
+    --ui-option-active: var(--color-intent-danger-soft-pressed);
+    --ui-option-selected-background: var(--background-interaction-selection-danger);
+    --ui-option-selected-background-hover: var(--background-interaction-selection-danger-hover);
+    --ui-option-selected-ink: var(--color-interaction-selection-danger-ink);
+  }
+
+  [data-ui-option-recipe][data-variant="subtle"] {
+    background-color: var(--ui-option-hover);
+  }
+
+  [data-ui-option-recipe][data-variant="filled"] {
+    background-color: var(--ui-option-active);
+  }
+
+  [data-ui-option-recipe]:hover:not([data-disabled]),
+  [data-ui-option-recipe][data-selected]:hover:not([data-disabled]) {
+    color: var(--ui-option-text);
+    background-color: var(--ui-option-hover);
+  }
+
+  [data-ui-option-recipe]:is(:active, :focus-visible, [data-active], [data-highlighted]):not([data-disabled]) {
+    color: var(--ui-option-text);
+    background-color: var(--ui-option-active);
+  }
+
+  [data-ui-option-recipe]:is([data-selected], [data-current], [aria-current]:not([aria-current="false"])):not([data-disabled]) {
+    color: var(--ui-option-selected-ink);
+    background: var(--ui-option-selected-background);
+  }
+
+  [data-ui-option-recipe]:is([data-selected], [data-current], [aria-current]:not([aria-current="false"])):hover:not([data-disabled]) {
+    background: var(--ui-option-selected-background-hover);
+  }
+
+  [data-ui-option-recipe][data-disabled] {
+    pointer-events: none;
+    color: var(--color-interaction-disabled-ink);
+    background-color: transparent;
+  }
+
+  [data-ui-select-option-indicator] {
+    color: var(--color-intent-accent-text);
+  }
+
+  :is([data-ui-menu-label], [data-ui-select-label]) {
+    color: var(--ui-surface-ink-muted);
+  }
+
+  [data-ui-select-search] {
+    box-shadow: inset 0 calc(var(--border-width-edge-separator) * -1) 0 var(--color-separator);
+  }
+
+  [data-ui-select-create],
+  [data-ui-date-picker-footer] {
+    box-shadow: inset 0 var(--border-width-edge-separator) 0 var(--color-separator);
+  }
+
+  @media (min-width: 40rem) {
+    [data-ui-date-picker-presets][data-position="left"] {
+      box-shadow: inset calc(var(--border-width-edge-separator) * -1) 0 0 var(--color-separator);
+    }
+
+    [data-ui-date-picker-presets][data-position="right"] {
+      box-shadow: inset var(--border-width-edge-separator) 0 0 var(--color-separator);
+    }
+  }
+
+  [data-ui-date-picker-presets][data-position="top"] {
+    box-shadow: inset 0 calc(var(--border-width-edge-separator) * -1) 0 var(--color-separator);
+  }
+
+  [data-ui-date-picker-presets][data-position="bottom"] {
+    box-shadow: inset 0 var(--border-width-edge-separator) 0 var(--color-separator);
+  }
+
+  :is([data-ui-menu-separator], [data-ui-select-separator]) > [role="separator"],
+  [data-ui-select-separator] > div {
+    background-color: var(--color-separator);
+  }
+
+  /* Field and dropzone control treatments. */
+  [data-ui-control][data-ui-control-recipe="field"] {
+    color: inherit;
+    background-color: transparent;
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-neutral-edge);
+  }
+
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"] {
+    background-color: var(--color-interaction-hover);
+    box-shadow: none;
+  }
+
+  [data-ui-control][data-ui-control-recipe="field"][data-variant="filled"]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+    background-color: var(--color-interaction-pressed);
   }
 
-  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"]):focus-within:not([data-invalid]),
-  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"])[data-state="open"]:not([data-invalid]) {
-    --ui-control-shadow: var(--ui-control-shadow-focus);
+  [data-ui-control][data-ui-control-recipe="field"]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-neutral-edge-hover);
   }
 
-  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"], [data-variant="filled"])[data-invalid] {
-    --ui-control-shadow: var(--ui-control-shadow-invalid);
+  [data-ui-control][data-ui-control-recipe="field"]:is(:focus-within, [data-state="open"]):not([data-disabled]):not(:disabled):not([data-invalid]):not([aria-invalid="true"]) {
+    box-shadow:
+      0 0 0 var(--border-width-edge-control) var(--color-intent-accent-edge-strong),
+      0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
   }
 
-  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"], [data-variant="filled"])[data-invalid]:is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]) {
-    --ui-control-shadow: var(--ui-control-shadow-invalid-hover);
+  [data-ui-control][data-ui-control-recipe="field"]:is([data-invalid], [aria-invalid="true"]) {
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge, var(--color-intent-neutral-edge-strong));
   }
 
-  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"], [data-variant="filled"])[data-invalid]:focus-within:not([data-disabled]),
-  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"], [data-variant="filled"])[data-invalid][data-state="open"]:not([data-disabled]) {
-    --ui-control-shadow: var(--ui-control-shadow-invalid-focus);
-    box-shadow: var(--shadow-danger-focus);
+  [data-ui-control][data-ui-control-recipe="field"]:is([data-invalid], [aria-invalid="true"]):is(:hover, :active):not(:focus-within):not([data-state="open"]):not([data-disabled]):not(:disabled) {
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge-hover, var(--color-intent-neutral-edge-strong));
   }
 
-  [data-ui-control]:where([data-variant="outline"], [data-variant="enhanced"]):has(:focus-visible):not([data-invalid]) {
-    box-shadow: var(--shadow-control), var(--shadow-focus);
+  [data-ui-control][data-ui-control-recipe="field"]:is([data-invalid], [aria-invalid="true"]):is(:focus-within, [data-state="open"]):not([data-disabled]):not(:disabled) {
+    box-shadow:
+      0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge-strong, var(--color-intent-neutral-edge-strong)),
+      0 0 0 var(--color-intent-danger-focus-width, var(--color-intent-accent-focus-width)) var(--color-intent-danger-focus, var(--color-intent-accent-focus));
   }
 
-  [data-ui-control][data-disabled] {
-    --ui-control-bg: var(--ui-control-bg-disabled);
-    --ui-control-bg-hover: var(--ui-control-bg-disabled);
-    --ui-control-bg-active: var(--ui-control-bg-disabled);
-    --ui-control-fg: var(--ui-control-fg-disabled);
-    --ui-control-placeholder: var(--ui-control-placeholder-disabled);
-    --ui-control-shadow: var(--ui-control-shadow-disabled);
+  [data-ui-control][data-ui-control-recipe="field"] :is(input, textarea)::placeholder {
+    color: var(--ui-surface-ink-muted);
+    opacity: 1;
+  }
+
+  [data-ui-control][data-ui-control-recipe="field"]:not([data-disabled]):not(:disabled) [data-ui-control-action]:hover {
+    color: inherit;
+    background-color: var(--color-interaction-hover);
+  }
+
+  [data-ui-control][data-ui-control-recipe="field"]:not([data-disabled]):not(:disabled) [data-ui-control-action]:focus-visible {
+    box-shadow: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
   }
 
-  [data-ui-control][data-disabled] :is(input, select, textarea, button):disabled {
-    color: var(--ui-control-fg-disabled);
+  [data-ui-control][data-ui-control-recipe="field"] :is(input, select, textarea, button):disabled {
+    color: inherit;
     opacity: 1;
-    -webkit-text-fill-color: var(--ui-control-fg-disabled);
+    -webkit-text-fill-color: currentColor;
   }
 
-  [data-ui-control][data-disabled] :is(input, textarea):disabled::placeholder {
-    color: var(--ui-control-placeholder-disabled);
+  [data-ui-control][data-ui-control-recipe="field"][data-disabled] :is(input, textarea):disabled::placeholder {
+    color: var(--ui-surface-ink-muted);
     opacity: 1;
-    -webkit-text-fill-color: var(--ui-control-placeholder-disabled);
+    -webkit-text-fill-color: currentColor;
   }
-}
 
-.dark {
-  color-scheme: dark;
+  [data-ui-select-native]:disabled + [data-ui-select-native-icon] {
+    opacity: var(--opacity-interaction-disabled);
+  }
 
-  --color-base-1: #111213;
-  --color-base-2: #131415;
-  --color-base-3: #151617;
-  --color-base-4: #191a1c;
-  --color-base-5: #1f2023;
-  --color-base-6: #292b2f;
-  --color-base-7: #373a40;
-  --color-base-8: #515861;
-  --color-base-9: #686e76;
-  --color-base-10: #7b8088;
-  --color-base-11: #a7abb1;
-  --color-base-12: #edeef0;
-  --color-base-a1: #00000000;
-  --color-base-a2: #ffffff09;
-  --color-base-a3: #ffffff12;
-  --color-base-a4: #ffffff1b;
-  --color-base-a5: #ffffff22;
-  --color-base-a6: #ffffff2c;
-  --color-base-a7: #ffffff3b;
-  --color-base-a8: #ffffff55;
-  --color-base-a9: #ffffff64;
-  --color-base-a10: #ffffff72;
-  --color-base-a11: #ffffffaf;
-  --color-base-a12: #ffffffed;
-
-  --color-app: var(--color-base-2);
-  --color-chrome: var(--color-base-1);
-  --color-chrome-alpha: color-mix(in srgb, var(--color-chrome) 86%, transparent);
-  --color-surface-subtle: var(--color-base-1);
-  --color-surface-panel: var(--color-base-2);
-  --color-surface-panel-alpha: color-mix(in srgb, var(--color-surface-panel) 88%, transparent);
-  --color-surface-raised: var(--color-base-3);
-  --color-surface-overlay: var(--color-base-4);
-  --color-surface-overlay-alpha: color-mix(in srgb, var(--color-surface-overlay) 92%, transparent);
-  --color-surface-inverse: var(--color-base-12);
-  --color-surface-inverse-fg: var(--color-base-1);
-  --ui-toast-bg: var(--color-surface-overlay);
-  --color-foreground: var(--color-base-12);
-  --color-foreground-muted: var(--color-base-11);
-  --color-foreground-subtle: var(--color-base-10);
-  --color-border: var(--color-base-a3);
-  --color-border-interactive: var(--color-base-a4);
-  --color-border-strong: var(--color-base-a5);
-  --color-overlay: rgb(0 0 0 / 0.55);
-  --ui-accent-strength: 16%;
-  --ui-accent-hover-strength: 20%;
-  --ui-accent-border-strength: 46%;
-  --ui-focus-strength: 32%;
-  --color-accent-contrast: white;
-  --color-accent-text: var(--color-accent-8);
-  --color-danger-surface: var(--color-danger-a3);
-  --color-danger-surface-hover: var(--color-danger-a4);
-  --color-danger-border: var(--color-danger-a7);
-  --color-danger-text: var(--color-danger-8);
-  --color-success-text: var(--color-success-8);
-  --color-warning-text: var(--color-warning-8);
-  --color-black-a1: rgb(0 0 0 / 0.20);
-  --color-black-a2: rgb(0 0 0 / 0.32);
-  --color-black-a3: rgb(0 0 0 / 0.44);
-  --color-black-a4: rgb(0 0 0 / 0.56);
-  --color-black-a5: rgb(0 0 0 / 0.68);
-  --color-black-a6: rgb(0 0 0 / 0.76);
-  --shadow-ring-weak: var(--color-base-a3);
-  --shadow-ring: var(--color-base-a4);
-  --shadow-ring-strong: var(--color-base-a5);
-  --ui-shadow-border: 0 0 0 1px var(--shadow-ring-weak);
-  --ui-shadow-border-hover: 0 0 0 1px var(--shadow-ring);
-  --ui-control-shadow-hover: 0 0 0 1px var(--color-base-a7);
-  --ui-shadow-1: var(--shadow-border);
-  --ui-shadow-2:
-    0 0 0 1px var(--shadow-ring-weak),
-    0 1px 1px var(--color-black-a2),
-    0 2px 4px -2px var(--color-black-a2),
-    0 4px 8px -4px var(--color-black-a2);
-  --ui-shadow-3:
-    0 0 0 1px var(--shadow-ring),
-    0 2px 4px -2px var(--color-black-a2),
-    0 6px 16px -6px var(--color-black-a3),
-    0 8px 24px -12px var(--color-black-a3);
-  --ui-shadow-4:
-    0 0 0 1px var(--shadow-ring),
-    0 8px 24px -8px var(--color-black-a3),
-    0 12px 32px -16px var(--color-black-a4);
-  --ui-shadow-5:
-    0 0 0 1px var(--shadow-ring-strong),
-    0 12px 40px -12px var(--color-black-a4),
-    0 20px 64px -24px var(--color-black-a5);
-  --ui-shadow-6:
-    0 0 0 1px var(--shadow-ring-strong),
-    0 16px 48px -12px var(--color-black-a5),
-    0 24px 80px -24px var(--color-black-a6);
-  --ui-panel-shadow: var(--shadow-2);
-  --ui-popover-shadow: var(--shadow-border);
-  --ui-dialog-shadow: var(--shadow-5);
-  --ui-modal-shadow: var(--shadow-6);
-}
+  [data-ui-control][data-ui-control-recipe="dropzone"] {
+    color: inherit;
+    background-color: transparent;
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-neutral-edge);
+  }
+
+  [data-ui-control][data-ui-control-recipe="dropzone"]:is(:hover, :active):not(:focus-within):not([data-dragging]):not([data-disabled]):not([data-invalid]) {
+    background-color: var(--color-interaction-hover);
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-neutral-edge-hover);
+  }
+
+  [data-ui-control][data-ui-control-recipe="dropzone"]:is(:focus-within, [data-dragging]):not([data-disabled]):not([data-invalid]) {
+    background-color: var(--color-intent-accent-soft);
+    box-shadow:
+      0 0 0 var(--border-width-edge-control) var(--color-intent-accent-edge-strong),
+      0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
+  }
+
+  [data-ui-control][data-ui-control-recipe="dropzone"][data-invalid] {
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge);
+  }
+
+  [data-ui-control][data-ui-control-recipe="dropzone"][data-invalid]:is(:hover, :active):not(:focus-within):not([data-dragging]):not([data-disabled]) {
+    background-color: var(--color-interaction-hover);
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge-hover);
+  }
+
+  [data-ui-control][data-ui-control-recipe="dropzone"][data-invalid]:is(:focus-within, [data-dragging]):not([data-disabled]) {
+    background-color: var(--color-intent-accent-soft);
+    box-shadow:
+      0 0 0 var(--border-width-edge-control) var(--color-intent-danger-edge-strong),
+      0 0 0 var(--color-intent-danger-focus-width) var(--color-intent-danger-focus);
+  }
+
+  [data-ui-control][data-ui-control-recipe="dropzone"] [data-ui-file-upload-browse] {
+    color: var(--color-intent-neutral-soft-ink);
+    background-color: var(--color-intent-neutral-soft);
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--color-intent-neutral-edge);
+  }
+
+  [data-ui-file-upload-item] {
+    color: inherit;
+    background-color: transparent;
+    box-shadow: 0 0 0 var(--border-width-edge-perimeter) var(--color-intent-neutral-edge);
+  }
+
+  [data-ui-file-upload-item]:hover {
+    box-shadow: 0 0 0 var(--border-width-edge-perimeter) var(--color-intent-neutral-edge-hover);
+  }
+
+  [data-ui-file-upload-item][data-invalid] {
+    background-color: var(--color-intent-danger-soft);
+    box-shadow: 0 0 0 var(--border-width-edge-perimeter) var(--color-intent-danger-edge);
+  }
 
-@supports (color: color-mix(in oklab, white, black)) {
-  :root,
-  .light {
-    --shadow-ring-weak: color-mix(in oklab, var(--color-base-a3), var(--color-base-3) 25%);
-    --shadow-ring: color-mix(in oklab, var(--color-base-a5), var(--color-base-5) 20%);
-    --shadow-ring-strong: color-mix(in oklab, var(--color-base-a6), var(--color-base-6) 20%);
+  [data-ui-file-upload-remove]:hover {
+    color: inherit;
+    background-color: var(--color-interaction-hover);
   }
 
-  .dark {
-    --shadow-ring-weak: var(--color-base-a3);
-    --shadow-ring: var(--color-base-a4);
-    --shadow-ring-strong: var(--color-base-a5);
+  [data-ui-file-upload-remove]:focus-visible {
+    box-shadow: 0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
   }
+
+  /* Native selection treatment: Checkbox, Radio, Switch, and Slider. */
+  [data-ui-selection-root] {
+    color: inherit;
+  }
+
+  [data-ui-selection-recipe="indicator"],
+  [data-ui-selection-recipe="switch-track"],
+  [data-ui-selection-recipe="slider-track"] {
+    --ui-selection-edge: var(--color-intent-neutral-edge);
+    color: var(--color-intent-accent-solid-ink);
+    background-color: var(--ui-surface-color);
+    box-shadow: 0 0 0 var(--border-width-edge-control) var(--ui-selection-edge);
+  }
+
+  [data-ui-selection-recipe="indicator"]:is([data-checked], [data-indeterminate]),
+  [data-ui-selection-recipe="switch-track"][data-checked] {
+    --ui-selection-edge: var(--color-intent-accent-edge);
+    color: var(--color-intent-accent-solid-ink);
+    background-color: var(--color-intent-accent-solid);
+  }
+
+  [data-ui-selection-recipe="switch-thumb"],
+  [data-ui-selection-recipe="slider-thumb"] {
+    background-color: var(--ui-surface-color);
+  }
+
+  [data-ui-selection-recipe="switch-track"],
+  [data-ui-selection-recipe="slider-track"] {
+    background-color: var(--color-intent-neutral-soft);
+  }
+
+  [data-ui-selection-recipe="switch-thumb"][data-checked] {
+    &::after {
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background-color: var(--color-intent-accent-solid-ink);
+      content: "";
+    }
+  }
+
+  [data-ui-selection-recipe="slider-range"] {
+    background-color: var(--color-intent-accent-solid);
+  }
+
+  [data-ui-selection-recipe][data-invalid] {
+    --ui-selection-edge: var(--color-intent-danger-edge-strong);
+  }
+
+  [data-ui-selection-root]:has(input:focus-visible) [data-ui-selection-recipe="indicator"],
+  [data-ui-selection-root]:has(input:focus-visible) [data-ui-selection-recipe="switch-track"],
+  [data-ui-selection-recipe="slider-thumb"][data-focus] {
+    box-shadow:
+      0 0 0 var(--border-width-edge-control) var(--ui-selection-edge, var(--color-intent-neutral-edge)),
+      0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus);
+  }
+
+  [data-ui-selection-recipe="slider-thumb"][data-focus] {
+    box-shadow:
+      0 0 0 var(--color-intent-accent-focus-width) var(--color-intent-accent-focus),
+      var(--shadow-elevation-1);
+  }
+
+  [data-ui-selection-root][data-invalid]:has(input:focus-visible) [data-ui-selection-recipe="indicator"],
+  [data-ui-selection-root][data-invalid]:has(input:focus-visible) [data-ui-selection-recipe="switch-track"],
+  [data-ui-selection-recipe="slider-thumb"][data-invalid][data-focus] {
+    box-shadow:
+      0 0 0 var(--border-width-edge-control) var(--ui-selection-edge, var(--color-intent-danger-edge-strong)),
+      0 0 0 var(--color-intent-danger-focus-width) var(--color-intent-danger-focus);
+  }
+
+  [data-ui-selection-recipe="slider-thumb"][data-invalid][data-focus] {
+    box-shadow:
+      0 0 0 var(--color-intent-danger-focus-width) var(--color-intent-danger-focus),
+      var(--shadow-elevation-1);
+  }
+
+}
+
+.dark {
+  color-scheme: dark;
 }
 
 html, body {