@threadlabs/looma 0.5.2 → 0.6.0-rc.2

package/styles/ui-search-result-row.css

@@ -5,18 +5,18 @@
       inline-size: 100%;
       min-block-size: var(--ui-search-result-row-min-height, 56px);
       margin: 0;
-      padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-3, 0.75rem));
-      padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-4, 1rem));
+      padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-3));
+      padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-4));
       display: flex;
       align-items: flex-start;
-      gap: var(--ui-search-result-row-gap, var(--ui-space-3, 0.75rem));
-      background: var(--ui-search-result-row-bg, transparent);
+      gap: var(--ui-search-result-row-gap, var(--ui-space-3));
+      background: var(--ui-search-result-row-surface, transparent);
       border: none;
-      border-block-end: 1px solid var(--ui-search-result-row-border, var(--ui-border, #e5e7eb));
+      border-block-end: 1px solid var(--ui-search-result-row-border, var(--ui-border));
       color: inherit;
       cursor: pointer;
       text-align: left;
-      transition: background-color var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease);
+      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
     :scope:last-child {
@@ -24,18 +24,18 @@
     }
 
     :scope:hover:enabled {
-      background: var(--ui-search-result-row-hover-bg, color-mix(in srgb, var(--ui-surface, #ffffff) 85%, black 3%));
+      background: var(--ui-search-result-row-hover-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%));
     }
 
     :scope[data-ui-search-result-row-state~="selected"] {
       background: var(
         --ui-search-result-row-selected-bg,
-        var(--ui-search-result-row-hover-bg, color-mix(in srgb, var(--ui-surface, #ffffff) 85%, black 3%))
+        var(--ui-search-result-row-hover-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%))
       );
     }
 
     :scope:focus-visible {
-      outline: 2px solid var(--ui-focus-ring, #2563eb);
+      outline: 2px solid var(--ui-focus-ring);
       outline-offset: -2px;
     }
 

package/styles/ui-search-shell.css

@@ -34,7 +34,7 @@
       max-block-size: var(--ui-search-shell-max-height, 80vh);
       margin-inline: auto;
       overflow: hidden;
-      background: var(--ui-search-shell-bg, var(--ui-surface-elevated));
+      background: var(--ui-search-shell-surface, var(--ui-surface-elevated));
       border: 1px solid var(--ui-search-shell-border, var(--ui-border-default));
       border-radius: var(--ui-search-shell-radius, var(--ui-radius-dialog));
       box-shadow: var(--ui-search-shell-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)));
@@ -115,7 +115,7 @@
       min-block-size: var(--ui-control-min-block-size);
       padding: var(--ui-space-2) var(--ui-space-3);
       border: 1px solid var(--ui-control-border);
-      border-radius: var(--ui-radius-2);
+      border-radius: var(--ui-radius-md);
       background: var(--ui-control-surface);
       color: var(--ui-text-primary);
       font: inherit;
@@ -124,7 +124,7 @@
 
     :where([data-slotted], [data-slotted] *):is(input[slot="search"]:focus-visible) {
       border-color: var(--ui-control-focus);
-      outline: 2px solid var(--ui-focus-ring, currentColor);
+      outline: 2px solid var(--ui-focus-ring);
       outline-offset: 2px;
     }
 

package/styles/ui-select.css

@@ -5,11 +5,11 @@
       display: inline-block;
       inline-size: 100%;
       min-inline-size: 0;
-      min-block-size: var(--ui-control-size-md, 2.5rem);
+      min-block-size: var(--ui-control-size-md);
       margin: 0;
       padding: var(--ui-space-2) var(--ui-space-3);
       border: 1px solid var(--ui-control-border, var(--ui-border-strong));
-      border-radius: var(--ui-select-radius, var(--ui-radius-2));
+      border-radius: var(--ui-select-radius, var(--ui-radius-md));
       background-color: var(--ui-control-surface, var(--ui-surface-elevated));
       color: var(--ui-text-primary);
       color-scheme: light dark;

package/styles/ui-sidebar.css

@@ -60,10 +60,10 @@
       inset-inline-start: 3px;
       inline-size: 2px;
       background: color-mix(in srgb, var(--ui-affordance-guide-color, var(--ui-border-strong)) 45%, transparent);
-      opacity: var(--ui-affordance-guide-opacity, 0.42);
+      opacity: var(--ui-affordance-guide-opacity);
       transition:
-        background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-        opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+        background-color var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease),
+        opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
     }
 
     .guide {
@@ -72,17 +72,17 @@
       inset-inline-start: 50%;
       inline-size: 6px;
       block-size: 22px;
-      border: 1px solid var(--ui-border-strong, #c8c8c4);
-      border-radius: var(--ui-radius-round, 999px);
-      background: var(--ui-surface-elevated, #fff);
+      border: 1px solid var(--ui-border-strong);
+      border-radius: var(--ui-radius-round);
+      background: var(--ui-surface-elevated);
       opacity: 0;
       transform: translate(-50%, -50%);
-      transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
+      transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
       pointer-events: none;
     }
 
     .resizer:is(:hover, :focus-visible)::after {
-      background: var(--ui-affordance-direct-color, var(--ui-accent-solid, var(--ui-color-focus, Highlight)));
+      background: var(--ui-affordance-direct-color, var(--ui-accent-solid, var(--ui-focus-ring)));
       opacity: 1;
     }
 
@@ -105,9 +105,9 @@
       box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
       transform: translateX(0);
       transition:
-        transform var(--ui-motion-base, 0.2s) var(--ui-motion-ease-out, ease-out),
-        display var(--ui-motion-base, 0.2s) allow-discrete,
-        overlay var(--ui-motion-base, 0.2s) allow-discrete;
+        transform var(--ui-motion-base) var(--ui-motion-ease-out),
+        display var(--ui-motion-base) allow-discrete,
+        overlay var(--ui-motion-base) allow-discrete;
     }
 
     /* The author display above would otherwise override the UA rule that hides a closed popover. */

package/styles/ui-stack.css

@@ -1,7 +1,7 @@
 /* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-stack"]) to ([data-component], [data-slotted]) {
 :scope {
-      --_layout-gap: var(--ui-space-4, 1rem);
+      --_layout-gap: var(--ui-space-4);
       display: flex;
       flex-direction: column;
       align-items: stretch;
@@ -12,19 +12,19 @@
     }
 
     :scope[data-ui-stack-state~="gap=xs"] {
-      --_layout-gap: var(--ui-space-2, 0.5rem);
+      --_layout-gap: var(--ui-space-2);
     }
     :scope[data-ui-stack-state~="gap=s"] {
-      --_layout-gap: var(--ui-space-3, 0.75rem);
+      --_layout-gap: var(--ui-space-3);
     }
     :scope[data-ui-stack-state~="gap=m"] {
-      --_layout-gap: var(--ui-space-4, 1rem);
+      --_layout-gap: var(--ui-space-4);
     }
     :scope[data-ui-stack-state~="gap=l"] {
-      --_layout-gap: var(--ui-space-5, 1.5rem);
+      --_layout-gap: var(--ui-space-5);
     }
     :scope[data-ui-stack-state~="gap=xl"] {
-      --_layout-gap: var(--ui-space-6, 2rem);
+      --_layout-gap: var(--ui-space-6);
     }
     :scope[data-ui-stack-state~="align=start"] {
       align-items: flex-start;

package/styles/ui-switcher.css

@@ -1,7 +1,7 @@
 /* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-switcher"]) to ([data-component], [data-slotted]) {
 :scope {
-      --_switcher-gap: var(--ui-space-4, 1rem);
+      --_switcher-gap: var(--ui-space-4);
       display: flex;
       flex-wrap: wrap;
       gap: var(--ui-switcher-gap, var(--_switcher-gap));
@@ -11,19 +11,19 @@
     }
 
     :scope[data-ui-switcher-state~="gap=xs"] {
-      --_switcher-gap: var(--ui-space-2, 0.5rem);
+      --_switcher-gap: var(--ui-space-2);
     }
     :scope[data-ui-switcher-state~="gap=s"] {
-      --_switcher-gap: var(--ui-space-3, 0.75rem);
+      --_switcher-gap: var(--ui-space-3);
     }
     :scope[data-ui-switcher-state~="gap=m"] {
-      --_switcher-gap: var(--ui-space-4, 1rem);
+      --_switcher-gap: var(--ui-space-4);
     }
     :scope[data-ui-switcher-state~="gap=l"] {
-      --_switcher-gap: var(--ui-space-5, 1.5rem);
+      --_switcher-gap: var(--ui-space-5);
     }
     :scope[data-ui-switcher-state~="gap=xl"] {
-      --_switcher-gap: var(--ui-space-6, 2rem);
+      --_switcher-gap: var(--ui-space-6);
     }
     :scope[data-ui-switcher-state~="align=start"] {
       align-items: flex-start;

package/styles/ui-tabs.css

@@ -1,6 +1,19 @@
 /* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-tabs"]) to ([data-component], [data-slotted]) {
-:scope {
+/* Density resolves into the tab row's own values; the public tokens still override them. */
+    :scope {
+      --_tab-min-block-size: var(--ui-control-size);
+      --_tab-padding-block: var(--ui-space-2);
+      --_tab-padding-inline: var(--ui-space-3);
+    }
+
+    :scope[data-ui-tabs-state~="density=compact"] {
+      --_tab-min-block-size: var(--ui-control-size-sm);
+      --_tab-padding-block: var(--ui-space-1);
+      --_tab-padding-inline: var(--ui-space-2);
+    }
+
+    :scope {
       display: grid;
       inline-size: 100%;
       min-inline-size: 0;
@@ -24,16 +37,16 @@
     }
 
     .list button {
-      min-block-size: 2.5rem;
+      min-block-size: var(--ui-tabs-tab-min-block-size, var(--_tab-min-block-size));
       margin: 0 0 -1px;
-      padding: var(--ui-space-2) var(--ui-space-3);
+      padding: var(--ui-tabs-tab-padding-block, var(--_tab-padding-block)) var(--ui-tabs-tab-padding-inline, var(--_tab-padding-inline));
       border: 0;
       border-block-end: 2px solid transparent;
       background: transparent;
       color: var(--ui-text-secondary);
       font: inherit;
       font-size: var(--ui-font-size-sm);
-      font-weight: var(--ui-font-medium, 500);
+      font-weight: var(--ui-font-medium);
       cursor: pointer;
       transition:
         color var(--ui-motion-fast) var(--ui-motion-ease),
@@ -61,7 +74,7 @@
       position: relative;
       outline: none;
       box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
-      border-radius: var(--ui-radius-1);
+      border-radius: var(--ui-radius-sm);
     }
 
     .panels {
@@ -103,7 +116,8 @@
     }
 }
 @scope ([data-component~="ui-tabs"]) to ([data-component]) {
-:where([data-slotted], [data-slotted] *):is(*) {
+/* Density resolves into the tab row's own values; the public tokens still override them. */
+    :where([data-slotted], [data-slotted] *):is(*) {
       padding: var(--ui-space-4);
     }
 

package/styles/ui-textarea.css

@@ -5,13 +5,13 @@
       display: inline-block;
       inline-size: 100%;
       min-inline-size: 0;
-      min-block-size: calc(var(--ui-space-12, 3rem) * 2);
+      min-block-size: calc(3rem * 2);
       margin: 0;
       padding: var(--ui-space-2) var(--ui-space-3);
       appearance: none;
       resize: vertical;
       border: 1px solid var(--ui-control-border, var(--ui-border-strong));
-      border-radius: var(--ui-textarea-radius, var(--ui-radius-2));
+      border-radius: var(--ui-textarea-radius, var(--ui-radius-md));
       background: var(--ui-control-surface, var(--ui-surface-elevated));
       color: var(--ui-text-primary);
       font: inherit;

package/styles/ui-toast-region.css

@@ -53,7 +53,7 @@
       gap: var(--ui-space-2);
       align-items: start;
       border: 1px solid var(--ui-border-default);
-      border-radius: var(--ui-radius-3);
+      border-radius: var(--ui-radius-lg);
       padding: var(--ui-space-3) var(--ui-space-4);
       background: var(--ui-surface-elevated);
       color: var(--ui-text-primary);
@@ -63,7 +63,7 @@
 
     /* Leaving slides on down and fades; the controller removes the toast when this ends. */
     .toast.closing {
-      animation: ui-toast-exit var(--ui-toast-exit-duration, 0.22s) var(--ui-motion-ease, ease) both;
+      animation: ui-toast-exit var(--ui-toast-exit-duration, 0.22s) var(--ui-motion-ease) both;
       pointer-events: none;
     }
 

package/styles/ui-tooltip.css

@@ -28,7 +28,7 @@
       box-sizing: border-box;
       max-inline-size: var(--ui-tooltip-max-inline-size, 18rem);
       border: 1px solid var(--_tooltip-line);
-      border-radius: var(--ui-tooltip-radius, var(--ui-radius-1));
+      border-radius: var(--ui-tooltip-radius, var(--ui-radius-sm));
       background: var(--ui-tooltip-surface, var(--ui-surface-elevated));
       color: var(--ui-tooltip-text, var(--ui-text-primary));
       padding: var(--ui-space-1) var(--ui-space-2);

package/styles/ui-top-bar.css

@@ -7,11 +7,11 @@
       min-block-size: calc(var(--ui-top-bar-height, 56px) + env(safe-area-inset-top));
       display: flex;
       align-items: center;
-      gap: var(--ui-top-bar-gap, var(--ui-space-3, 0.75rem));
+      gap: var(--ui-top-bar-gap, var(--ui-space-3));
       padding-block-start: env(safe-area-inset-top);
-      padding-inline-start: max(var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)), env(safe-area-inset-left));
-      padding-inline-end: max(var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)), env(safe-area-inset-right));
-      background: var(--ui-top-bar-bg, var(--ui-surface-elevated));
+      padding-inline-start: max(var(--ui-top-bar-padding-inline, var(--ui-space-4)), env(safe-area-inset-left));
+      padding-inline-end: max(var(--ui-top-bar-padding-inline, var(--ui-space-4)), env(safe-area-inset-right));
+      background: var(--ui-top-bar-surface, var(--ui-surface-elevated));
       border-block-end: 1px solid var(--ui-top-bar-border, var(--ui-border-default));
     }
 
@@ -24,7 +24,7 @@
     }
 
     .actions {
-      gap: var(--ui-top-bar-actions-gap, var(--ui-space-1, 0.25rem));
+      gap: var(--ui-top-bar-actions-gap, var(--ui-space-1));
     }
 
     .title {

package/styles/ui-tree-item.css

@@ -14,9 +14,9 @@
       display: grid;
       grid-template-columns: 20px auto minmax(0, 1fr) auto;
       align-items: center;
-      min-block-size: var(--ui-tree-row-min-height, var(--_tree-row-min-height));
+      min-block-size: var(--ui-tree-item-min-block-size, var(--_tree-row-min-height));
       min-inline-size: 0;
-      font-size: var(--ui-tree-font-size, var(--ui-font-size-ui, 0.9375rem));
+      font-size: var(--ui-tree-item-font-size, var(--ui-font-size-ui));
       border-radius: var(--ui-radius-md);
       color: var(--ui-text-secondary);
       transition:
@@ -50,7 +50,8 @@
       box-shadow: 0 0 0 2px var(--ui-focus-ring);
     }
 
-    :scope[data-drop-position="inside"] .row {
+    /* Child combinators: drop feedback belongs to this item's own row, not the rows nested in it. */
+    :scope[data-drop-position="inside"] > .row {
       background: var(--ui-accent-subtle);
       box-shadow: inset 0 0 0 1px var(--ui-tree-drop-color, var(--ui-accent-solid));
     }
@@ -141,9 +142,12 @@
       display: flex;
       align-items: center;
       min-inline-size: 0;
-      padding: var(--ui-tree-label-padding-block, var(--ui-space-1)) var(--ui-tree-label-padding-inline, var(--ui-space-2));
+      padding: var(--ui-tree-item-label-padding-block, var(--ui-space-1)) var(--ui-tree-item-label-padding-inline, var(--ui-space-2));
     }
 
+    /* Slotted label content fills the cell, so a link is the row's hit area rather than sizing to
+       its own text and reading as overflow. */
+
     .actions {
       grid-column: 4;
       grid-row: 1;
@@ -177,7 +181,7 @@
     .row:hover .drag-handle,
     .drag-handle:hover,
     .drag-handle:focus-visible,
-    :scope[data-dragging] .drag-handle {
+    :scope[data-dragging] > .row > .drag-handle {
       opacity: 1;
     }
 
@@ -216,12 +220,12 @@
       inset-inline-end: -1px;
     }
 
-    :scope[data-drop-position="before"] .row-drop-indicator {
+    :scope[data-drop-position="before"] > .row > .row-drop-indicator {
       display: block;
       inset-block-start: -1px;
     }
 
-    :scope[data-drop-position="after"] .subtree-drop-indicator {
+    :scope[data-drop-position="after"] > .subtree-drop-indicator {
       display: block;
       inset-block-end: -1px;
     }
@@ -252,7 +256,9 @@
     }
 }
 @scope ([data-component~="ui-tree-item"]) to ([data-component]) {
-/* Lucide grip-vertical, filling the handle as in Looma 0.2. */
+/* Child combinators: drop feedback belongs to this item's own row, not the rows nested in it. */
+
+    /* Lucide grip-vertical, filling the handle as in Looma 0.2. */
 
     /* Slotted content is outside this scope, so :has() cannot see it; hide only a truly empty slot. */
 
@@ -268,6 +274,13 @@
     /* The label spans the row's height and centres its content, so slotted content (a link) can
        stretch to fill the row as its own hit area; the padding tokens remove the inset. */
 
+    /* Slotted label content fills the cell, so a link is the row's hit area rather than sizing to
+       its own text and reading as overflow. */
+    .label > :where([data-slotted], [data-slotted] *):is(*) {
+      flex: 1 1 auto;
+      min-inline-size: 0;
+    }
+
     @media (prefers-reduced-motion: reduce) {
     }
 

package/styles/ui-tree.css

@@ -1,6 +1,12 @@
 /* Generated by HTML Next 1.0.0-alpha.2. Do not edit. */
 @scope ([data-component~="ui-tree"]) to ([data-component], [data-slotted]) {
-:scope {
+:scope[data-ui-tree-state~="density=compact"] {
+      --ui-tree-item-min-block-size: var(--ui-control-size-sm);
+      --ui-tree-item-font-size: var(--ui-font-size-sm);
+      --ui-tree-item-label-padding-block: 0;
+    }
+
+    :scope {
       display: block;
       min-inline-size: 0;
       padding-inline-start: var(--ui-tree-gutter, 0px);

package/theme-dark.css

@@ -2,137 +2,80 @@
   @media (prefers-color-scheme: dark) {
     :root:not([data-theme]) {
       color-scheme: dark;
-      --ui-surface-canvas: #1a1a1a;
-      --ui-surface-default: #1a1a1a;
-      --ui-surface-muted: #242424;
-      --ui-surface-subtle: #2e2e2e;
-      --ui-surface-elevated: #2a2a2a;
-      --ui-control-inset: inset 0 1px 2px rgb(0 0 0 / 0.35);
-      --ui-raised: 0 1px 2px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.06);
-      --ui-raised-highlight: linear-gradient(rgb(255 255 255 / 0.04), rgb(255 255 255 / 0));
-      --ui-control-focus-halo: color-mix(in srgb, var(--ui-accent-solid) 30%, transparent);
-      --ui-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a09c' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+      --ui-surface: #1a1a1a;
+      --ui-surface-raised: #2a2a2a;
+      --ui-surface-sunken: #2e2e2e;
 
-      --ui-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
-      --ui-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.3);
-      --ui-shadow-md: 0 4px 12px rgb(0 0 0 / 0.5), 0 2px 4px rgb(0 0 0 / 0.3);
-      --ui-shadow-lg: 0 10px 28px rgb(0 0 0 / 0.55), 0 4px 10px rgb(0 0 0 / 0.35);
-      --ui-shadow-xl: 0 18px 48px rgb(0 0 0 / 0.6), 0 8px 18px rgb(0 0 0 / 0.4);
-
-      --ui-text-primary: #f0f0ec;
+      --ui-text: #f0f0ec;
       --ui-text-secondary: #a0a09c;
       --ui-text-muted: #6a6a66;
-      --ui-text-on-accent: #1a1a1a;
+      --ui-disabled-surface: #242424;
+      --ui-disabled-text: #6a6a66;
+      --ui-on-accent: #1a1a1a;
+      --ui-on-danger: #1a1a1a;
 
-      --ui-border-subtle: #2b2b28;
-      --ui-border-default: #333330;
+      --ui-border: #333330;
       --ui-border-strong: #4a4a46;
       --ui-focus-ring: #a99bf5;
-
-      /* Form controls need a visible 3:1 boundary and 4.5:1 placeholder text;
-         general dividers intentionally remain quieter. */
-      --ui-control-surface: #202020;
-      --ui-control-surface-disabled: #242424;
       --ui-control-border: #6f6f69;
-      --ui-control-border-hover: #92928c;
-      --ui-control-placeholder: #a0a09c;
 
-      --ui-accent-solid: #a99bf5;
+      --ui-accent: #a99bf5;
       --ui-accent-hover: #b9adff;
       --ui-accent-active: #c8beff;
-      --ui-accent-soft: #282342;
+      --ui-accent-subtle: #282342;
 
-      --ui-danger-solid: #ef6f86;
+      --ui-danger: #ef6f86;
       --ui-danger-hover: #f58a9d;
-      --ui-danger-soft: #321b22;
-      --ui-success-solid: #33cc66;
-      --ui-success-soft: #162a1f;
-      --ui-warning-solid: #ffaa22;
-      --ui-warning-soft: #2d2410;
-      --ui-info-solid: #4d9fff;
-      --ui-info-soft: #1a2a3d;
-      --ui-accent-strong-surface: #5148c8;
-      --ui-accent-on-strong: #ffffff;
-      --ui-accent-subtle-text: #b8b3ff;
-      --ui-danger-strong-surface: #a61b3c;
-      --ui-danger-on-strong: #ffffff;
-      --ui-danger-subtle-text: #ff9aae;
-      --ui-success-strong-surface: #006b2d;
-      --ui-success-on-strong: #ffffff;
-      --ui-success-subtle-text: #62dc89;
-      --ui-warning-strong-surface: #d69a0a;
-      --ui-warning-on-strong: #1f1500;
-      --ui-warning-subtle-text: #ffc45c;
-      --ui-info-strong-surface: #075cad;
-      --ui-info-on-strong: #ffffff;
-      --ui-info-subtle-text: #7eb8ff;
+      --ui-success: #33cc66;
+      --ui-warning: #ffaa22;
+      --ui-info: #4d9fff;
+
+      /* Depth reads differently on a dark surface: deeper shadows, a lit top edge. */
+      --ui-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.3);
+      --ui-shadow-lg: 0 10px 28px rgb(0 0 0 / 0.55), 0 4px 10px rgb(0 0 0 / 0.35);
+      --ui-control-inset: inset 0 1px 2px rgb(0 0 0 / 0.35);
+      --ui-raised: 0 1px 2px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.06);
+      --ui-raised-highlight: linear-gradient(rgb(255 255 255 / 0.04), rgb(255 255 255 / 0));
+      --ui-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a09c' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
     }
   }
 
   [data-theme="dark"] {
     color-scheme: dark;
-    --ui-surface-canvas: #1a1a1a;
-    --ui-surface-default: #1a1a1a;
-    --ui-surface-muted: #242424;
-    --ui-surface-subtle: #2e2e2e;
-    --ui-surface-elevated: #2a2a2a;
-    --ui-control-inset: inset 0 1px 2px rgb(0 0 0 / 0.35);
-    --ui-raised: 0 1px 2px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.06);
-    --ui-raised-highlight: linear-gradient(rgb(255 255 255 / 0.04), rgb(255 255 255 / 0));
-    --ui-control-focus-halo: color-mix(in srgb, var(--ui-accent-solid) 30%, transparent);
-    --ui-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a09c' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    --ui-surface: #1a1a1a;
+    --ui-surface-raised: #2a2a2a;
+    --ui-surface-sunken: #2e2e2e;
 
-    --ui-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
-    --ui-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.3);
-    --ui-shadow-md: 0 4px 12px rgb(0 0 0 / 0.5), 0 2px 4px rgb(0 0 0 / 0.3);
-    --ui-shadow-lg: 0 10px 28px rgb(0 0 0 / 0.55), 0 4px 10px rgb(0 0 0 / 0.35);
-    --ui-shadow-xl: 0 18px 48px rgb(0 0 0 / 0.6), 0 8px 18px rgb(0 0 0 / 0.4);
-
-    --ui-text-primary: #f0f0ec;
+    --ui-text: #f0f0ec;
     --ui-text-secondary: #a0a09c;
     --ui-text-muted: #6a6a66;
-    --ui-text-on-accent: #1a1a1a;
+    --ui-disabled-surface: #242424;
+    --ui-disabled-text: #6a6a66;
+    --ui-on-accent: #1a1a1a;
+    --ui-on-danger: #1a1a1a;
 
-    --ui-border-subtle: #2b2b28;
-    --ui-border-default: #333330;
+    --ui-border: #333330;
     --ui-border-strong: #4a4a46;
     --ui-focus-ring: #a99bf5;
-
-    /* Keep explicit dark mode identical to the system-dark palette. */
-    --ui-control-surface: #202020;
-    --ui-control-surface-disabled: #242424;
     --ui-control-border: #6f6f69;
-    --ui-control-border-hover: #92928c;
-    --ui-control-placeholder: #a0a09c;
 
-    --ui-accent-solid: #a99bf5;
+    --ui-accent: #a99bf5;
     --ui-accent-hover: #b9adff;
     --ui-accent-active: #c8beff;
-    --ui-accent-soft: #282342;
+    --ui-accent-subtle: #282342;
 
-    --ui-danger-solid: #ef6f86;
+    --ui-danger: #ef6f86;
     --ui-danger-hover: #f58a9d;
-    --ui-danger-soft: #321b22;
-    --ui-success-solid: #33cc66;
-    --ui-success-soft: #162a1f;
-    --ui-warning-solid: #ffaa22;
-    --ui-warning-soft: #2d2410;
-    --ui-info-solid: #4d9fff;
-    --ui-info-soft: #1a2a3d;
-    --ui-accent-strong-surface: #5148c8;
-    --ui-accent-on-strong: #ffffff;
-    --ui-accent-subtle-text: #b8b3ff;
-    --ui-danger-strong-surface: #a61b3c;
-    --ui-danger-on-strong: #ffffff;
-    --ui-danger-subtle-text: #ff9aae;
-    --ui-success-strong-surface: #006b2d;
-    --ui-success-on-strong: #ffffff;
-    --ui-success-subtle-text: #62dc89;
-    --ui-warning-strong-surface: #d69a0a;
-    --ui-warning-on-strong: #1f1500;
-    --ui-warning-subtle-text: #ffc45c;
-    --ui-info-strong-surface: #075cad;
-    --ui-info-on-strong: #ffffff;
-    --ui-info-subtle-text: #7eb8ff;
+    --ui-success: #33cc66;
+    --ui-warning: #ffaa22;
+    --ui-info: #4d9fff;
+
+    /* Depth reads differently on a dark surface: deeper shadows, a lit top edge. */
+    --ui-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px rgb(0 0 0 / 0.3);
+    --ui-shadow-lg: 0 10px 28px rgb(0 0 0 / 0.55), 0 4px 10px rgb(0 0 0 / 0.35);
+    --ui-control-inset: inset 0 1px 2px rgb(0 0 0 / 0.35);
+    --ui-raised: 0 1px 2px rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.06);
+    --ui-raised-highlight: linear-gradient(rgb(255 255 255 / 0.04), rgb(255 255 255 / 0));
+    --ui-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a09c' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
   }
 }