@getvitops/generator 0.9.0 → 2.0.0

package/assets/css/patterns/combobox.css

@@ -20,7 +20,7 @@
     border-radius: var(--_br);
 
     &:focus {
-      outline: 2px solid var(--combobox-focus-color, var(--color-brand-primary-muted));
+      outline: 2px solid var(--combobox-focus-color, var(--color-border-focus));
       outline-offset: 2px;
     }
   }
@@ -35,7 +35,7 @@
     border: var(--_b);
     border-radius: var(--_br);
     box-shadow: var(--_ds);
-    background: var(--surface-bg);
+    background: var(--color-bg-surface);
     max-block-size: 15rem;
     overflow-y: auto;
     list-style: none;
@@ -55,7 +55,7 @@
 
     &:hover,
     &[aria-selected='true'] {
-      background: var(--color-surface-muted);
+      background: var(--color-bg-surface-muted);
     }
 
     &[aria-disabled='true'] {

package/assets/css/patterns/comment.css

@@ -62,7 +62,7 @@
     grid-column: 1 / -1;
     margin-inline-start: var(--comment-indent, 2rem);
     padding-inline-start: var(--comment-indent, 2rem);
-    border-inline-start: 2px solid var(--color-surface-muted);
+    border-inline-start: 2px solid var(--color-bg-surface-muted);
     display: flex;
     flex-direction: column;
     gap: 1rem;

package/assets/css/patterns/consent.css

@@ -0,0 +1,117 @@
+/**
+ * Consent — the docked banner `<wc-consent>` reveals.
+ *
+ * Deliberately thin: this partial owns the *dock* (where the thing sits and how it
+ * stacks) and nothing else. Everything inside it is composed from patterns that
+ * already exist — `.banner`, `.cluster`, `.btn`, `.cta`, the form patterns — so a
+ * consumer restyles their consent banner by restyling those, not by learning a
+ * second vocabulary.
+ *
+ * **Shown in the top layer via the Popover API**, for the same reason `.tooltip`
+ * is: a plain `position: fixed` banner resolves against the nearest containing
+ * block, and any ancestor with `container-type`, `transform`, `filter` or
+ * `contain` becomes one. `body { container-type: inline-size }` is a normal thing
+ * to write in a framework whose breakpoints are container queries — and it traps a
+ * fixed banner mid-page. The top layer escapes the containing-block chain
+ * entirely, so the dock is always the viewport and no z-index can lose to
+ * anything. `popover="manual"` (not `auto`): a light-dismiss banner would let a
+ * stray click count as a decision.
+ *
+ * The other reason it's fixed-and-floating: the banner appears after hydration,
+ * and out of flow it can't push content, so it contributes nothing to CLS. A
+ * statically-positioned bar inserted at the top of the document would shift the
+ * whole page and cost the metric the deferred script-loading strategy protects.
+ */
+
+/* ── Consent — bottom-docked banner shown while a choice is outstanding ────── */
+
+/**
+ * Layout only — `display` is set by the open/closed rules below.
+ *
+ * `[popover].consent` (0-2-0) rather than `.consent` (0-1-0) on purpose: this
+ * partial is imported *after* popover.css, whose `[popover] { &:not(:popover-open)
+ * { display: none } }` sits at 0-1-0. A bare `.consent { display: flex }` would
+ * tie on specificity, win on order, and reveal a closed popover.
+ */
+.consent {
+  --_p: var(--p-consent, var(--p-consent-group, var(--p-default)));
+  --_br: var(--br-consent, var(--br-consent-group, var(--br-default)));
+  --_ds: var(--ds-consent, var(--ds-consent-group, var(--ds-default)));
+  --_b: var(--b-consent, var(--b-consent-group, var(--b-default)));
+
+  position: fixed;
+  z-index: 100;
+  /* The gap is an inset, not a block margin: for an absolutely positioned box the
+     offsets resolve against the margin edge, so `inset-block-end: 0` plus a bottom
+     margin still sits flush to the viewport edge. Inline centring does come from
+     `margin-inline: auto`, where that resolution is the one we want. */
+  inset-block-end: 1rem;
+  inset-inline: 0;
+  inset-block-start: auto;
+  margin-inline: auto;
+  max-inline-size: min(48rem, calc(100% - 2rem));
+
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem;
+  padding: var(--_p);
+  border: var(--_b);
+  border-radius: var(--_br);
+  box-shadow: var(--_ds);
+  background: var(--color-bg-surface);
+  color: var(--color-text-surface);
+
+  /* Clear an iOS home indicator. */
+  padding-block-end: max(var(--_p), env(safe-area-inset-bottom));
+
+  .consent__body {
+    flex: 1 1 20rem;
+  }
+
+  .consent__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-inline-start: auto;
+  }
+
+  /* The per-category checkboxes. Two buttons answer a one-category question, so
+     `<CookieConsent />` only renders these when there is more than one — a banner
+     that demands reading is a banner that gets accepted unread. */
+  .consent__options {
+    flex-basis: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+  }
+}
+
+/* Open, in the top layer. */
+[popover].consent:popover-open {
+  display: flex;
+}
+
+/* The no-popover path: `<wc-consent>` strips the attribute when `showPopover` is
+   missing and falls back to toggling `hidden`, so this needs no `:popover-open`
+   support to work. `[hidden]` comes last and wins over both. */
+.consent:not([popover]) {
+  display: flex;
+}
+
+.consent[hidden],
+wc-consent[hidden] {
+  display: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .consent {
+    animation: consent-enter 0.25s ease-out;
+  }
+}
+
+@keyframes consent-enter {
+  from {
+    opacity: 0;
+    translate: 0 1rem;
+  }
+}

package/assets/css/patterns/copy.css

@@ -38,7 +38,7 @@
     }
 
     &:focus-visible {
-      outline: 2px solid var(--copy-focus-color, var(--color-brand-primary-muted));
+      outline: 2px solid var(--copy-focus-color, var(--color-border-focus));
       outline-offset: 2px;
     }
   }
@@ -66,8 +66,8 @@
     font-size: 0.75rem;
     border-radius: 0.25rem;
     white-space: nowrap;
-    background: var(--surface-text);
-    color: var(--surface-bg);
+    background: var(--color-text-surface);
+    color: var(--color-bg-surface);
     opacity: 0;
     visibility: hidden;
     transition:

package/assets/css/patterns/details.css

@@ -42,7 +42,7 @@ details,
    *
    * This carried the canonical open/close animation (`block-size: 0 → auto` with
    * `content-visibility` under `allow-discrete`, backed by the
-   * `interpolate-size: allow-keywords` in utilities.css). In Chrome 149 that
+   * `interpolate-size: allow-keywords` in patterns/reveal.css). In Chrome 149 that
    * deadlocks: `content-visibility` stays `hidden`, so the content has no layout,
    * so `auto` resolves to `0`, so the transition has nothing to run — and the
    * disclosure never opens *at all*. Not "opens without animating": every

package/assets/css/patterns/dialog.css

@@ -25,8 +25,8 @@ dialog.dialog {
   border: var(--_b);
   border-radius: var(--_br);
   box-shadow: var(--_ds);
-  background: var(--surface-bg);
-  color: var(--surface-text);
+  background: var(--color-bg-surface);
+  color: var(--color-text-surface);
   max-block-size: calc(100vh - 2rem);
 
   &::backdrop {

package/assets/css/patterns/drawer.css

@@ -15,8 +15,8 @@
   padding: var(--_p);
   border: var(--_b);
   box-shadow: var(--_ds);
-  background: var(--surface-bg);
-  color: var(--surface-text);
+  background: var(--color-bg-surface);
+  color: var(--color-text-surface);
   max-inline-size: none;
   max-block-size: none;
 

package/assets/css/patterns/forms.css

@@ -32,7 +32,7 @@
 
   .form-group__error {
     font-size: var(--form-error-size, 0.75rem);
-    color: var(--color-danger-bold);
+    color: var(--color-text-danger);
     display: flex;
     align-items: center;
     gap: 0.25rem;
@@ -87,7 +87,7 @@ fieldset.fieldset,
   border: var(--_b);
   border-radius: var(--_br);
   padding: var(--_p);
-  background: var(--surface-bg);
+  background: var(--color-bg-surface);
 }
 
 /* ── Range + colour controls ───────────────────────────────────────────────── */
@@ -95,7 +95,7 @@ fieldset.fieldset,
  * natively, in both appearances, with no pseudo-element rewriting. The colour
  * swatch only needs its chrome removed so the well fills the control box. */
 input[type='range'] {
-  accent-color: var(--range-accent, var(--ui-primary-solid));
+  accent-color: var(--range-accent, var(--color-bg-ui-primary-solid));
   inline-size: 100%;
   min-inline-size: 0;
 }
@@ -202,7 +202,7 @@ input[type='color'] {
     block-size: var(--_check-size);
     border: var(--_b);
     border-radius: var(--_br);
-    background: var(--surface-bg);
+    background: var(--color-bg-surface);
     color: #fff;
     display: flex;
     align-items: center;
@@ -225,8 +225,8 @@ input[type='color'] {
   }
 
   input:checked + .custom-check__box {
-    background: var(--brand-primary-solid);
-    border-color: var(--brand-primary-solid);
+    background: var(--color-bg-brand-primary-solid);
+    border-color: var(--color-bg-brand-primary-solid);
 
     .custom-check__indicator {
       opacity: 1;
@@ -235,7 +235,7 @@ input[type='color'] {
   }
 
   input:focus-visible + .custom-check__box {
-    outline: 2px solid var(--check-focus-color, var(--color-brand-primary-muted));
+    outline: 2px solid var(--check-focus-color, var(--color-border-focus));
     outline-offset: 2px;
   }
 
@@ -288,7 +288,7 @@ input[type='color'] {
     inline-size: var(--_switch-width);
     block-size: var(--_switch-height);
     border-radius: var(--br-switch-track, var(--br-pill, 999px));
-    background: var(--color-surface-muted);
+    background: var(--color-bg-surface-muted);
     transition: background-color 0.2s ease;
   }
 
@@ -306,7 +306,7 @@ input[type='color'] {
   }
 
   input:checked + .switch__track {
-    background: var(--brand-primary-solid);
+    background: var(--color-bg-brand-primary-solid);
 
     .switch__thumb {
       inset-inline-start: calc(100% - var(--_switch-thumb-size) - 2px);
@@ -314,7 +314,7 @@ input[type='color'] {
   }
 
   input:focus-visible + .switch__track {
-    outline: 2px solid var(--switch-focus-color, var(--color-brand-primary-muted));
+    outline: 2px solid var(--switch-focus-color, var(--color-border-focus));
     outline-offset: 2px;
   }
 
@@ -360,7 +360,7 @@ select.custom-select {
   cursor: pointer;
 
   &:focus-visible {
-    outline: 2px solid var(--select-focus-color, var(--color-brand-primary-muted));
+    outline: 2px solid var(--select-focus-color, var(--color-border-focus));
     outline-offset: 2px;
   }
 }

package/assets/css/patterns/grouped.css

@@ -9,7 +9,7 @@
   --_bs: var(--bs, solid);
   border-width: var(--_bw);
   border-style: var(--_bs);
-  border-color: var(--bc, var(--surface-border, currentColor));
+  border-color: var(--bc, var(--color-border-surface, currentColor));
 }
 
 /* ── Group — collapse border-radius (+ shared borders) across direct children ─

package/assets/css/patterns/icon.css

@@ -57,11 +57,11 @@
   transition: background-color 0.15s ease;
 
   &:hover {
-    background: var(--color-surface-muted);
+    background: var(--color-bg-surface-muted);
   }
 
   &:focus-visible {
-    outline: 2px solid var(--icon-button-focus-color, var(--color-brand-primary-muted));
+    outline: 2px solid var(--icon-button-focus-color, var(--color-border-focus));
     outline-offset: 2px;
   }
 

package/assets/css/patterns/list.css

@@ -62,7 +62,7 @@
   }
 
   &.list--divided .list__item + .list__item {
-    border-block-start: 1px solid var(--list-divider-color, var(--color-surface-muted));
+    border-block-start: 1px solid var(--list-divider-color, var(--color-bg-surface-muted));
   }
 
   &.list--bordered {
@@ -110,7 +110,7 @@
     font-size: 0.75em;
     padding: 0.125rem 0.375rem;
     border-radius: var(--br-count, var(--br-pill, 999px));
-    background: var(--color-surface-muted);
+    background: var(--color-bg-surface-muted);
   }
 
   .facet-list__item--active .facet-list__name {
@@ -140,7 +140,7 @@
     border-radius: var(--_br);
 
     &:focus {
-      outline: 2px solid var(--filter-focus-color, var(--color-brand-primary-muted));
+      outline: 2px solid var(--filter-focus-color, var(--color-border-focus));
       outline-offset: 2px;
     }
   }
@@ -185,7 +185,7 @@
   .filtered-list__match {
     padding-inline: 0.125rem;
     border-radius: 0.125rem;
-    background: var(--color-warning-muted);
+    background: var(--color-bg-warning-muted);
   }
 }
 
@@ -246,7 +246,7 @@
   }
 
   &:focus-within {
-    outline: 2px solid var(--tag-list-focus-color, var(--color-brand-primary-muted));
+    outline: 2px solid var(--tag-list-focus-color, var(--color-border-focus));
     outline-offset: 2px;
   }
 }

package/assets/css/patterns/media.css

@@ -43,7 +43,7 @@
   color: inherit;
 
   &:focus-visible {
-    outline: 2px solid var(--tile-focus-color, var(--color-brand-primary-muted));
+    outline: 2px solid var(--tile-focus-color, var(--color-border-focus));
     outline-offset: 2px;
   }
 

package/assets/css/patterns/nav.css

@@ -13,7 +13,7 @@ nav:has(> .nav-items) {
 
 .nav-header {
   padding-bottom: 1rem;
-  border-bottom: 1px solid var(--nav-border-color, var(--color-surface-muted));
+  border-bottom: 1px solid var(--nav-border-color, var(--color-bg-surface-muted));
 }
 
 .nav-items {
@@ -49,7 +49,7 @@ nav:has(> .nav-items) {
   flex-direction: column;
   gap: 1rem;
   padding-top: 1rem;
-  border-top: 1px solid var(--nav-border-color, var(--color-surface-muted));
+  border-top: 1px solid var(--nav-border-color, var(--color-bg-surface-muted));
 }
 
 /* ── Dropdown submenu ─────────────────────────────────────────────────────── */
@@ -106,7 +106,7 @@ nav:has(> .nav-items) {
     border-radius: 0.375rem;
 
     &:hover {
-      background-color: var(--color-surface-muted);
+      background-color: var(--color-bg-surface-muted);
     }
   }
 }
@@ -131,8 +131,8 @@ nav:has(> .nav-items) {
   inset: 0;
   height: 100dvh;
   width: 100%;
-  background: var(--surface-bg);
-  color: var(--surface-text);
+  background: var(--color-bg-surface);
+  color: var(--color-text-surface);
   opacity: 0;
   translate: -100%;
   transition-timing-function: var(--interact-easing, ease);

package/assets/css/patterns/notification.css

@@ -18,8 +18,8 @@
   border: var(--_b);
   border-radius: var(--_br);
   box-shadow: var(--_ds);
-  background: var(--surface-bg);
-  color: var(--surface-text);
+  background: var(--color-bg-surface);
+  color: var(--color-text-surface);
   animation: notification-enter 0.3s ease;
 
   &.notification--exiting {
@@ -77,7 +77,7 @@
     inset-block-end: 0;
     inset-inline: 0;
     block-size: 3px;
-    background: var(--brand-primary-solid);
+    background: var(--color-bg-brand-primary-solid);
     border-radius: 0 0 var(--_br) var(--_br);
     transform-origin: left;
     animation: notification-progress var(--notification-duration, 5s) linear forwards;

package/assets/css/patterns/reveal.css

@@ -0,0 +1,92 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   DISCLOSURE — animatable show/hide (auto ↔ 0), layered by support
+
+   Lives in `vitops.components` (the default for an unmapped partial), NOT in
+   utilities.css where it used to sit. `.reveal` is a container pattern — three
+   rules, a state selector and a child contract — and shelving it as a utility
+   meant it beat every pattern AND beat the display utilities, so
+   `class="reveal hidden"` stayed visible. The tailwind format has always inlined
+   it into `@layer components`; this removes the divergence.
+
+   The ::details-content half of this family is NOT here: patterns/details.css
+   owns it. Two copies existed, and the utilities-layer one was winning purely on
+   layer, which is how `overflow: clip` beat details.css's `overflow: hidden`.
+
+   Layer 1 (primary, broadly supported): CSS grid 0fr↔1fr hack. Needs ONE child
+     wrapper; the wrapper clips its own content as the track reveals.
+   Layer 2 (progressive): interpolate-size + native height:auto animation.
+   Layer 3 (native <details>, animating ::details-content): patterns/details.css.
+   `.reveal-fade` covers the display:none fade case with the allow-discrete +
+   @starting-style idiom (same as nav.css `.drawer-menu`).
+   Toggle: consumer sets `.is-open` / `[data-open]` (mirrors .is-active /
+   [data-active] in animation.css), OR nests under an [open] element (<details>).
+   ═══════════════════════════════════════════════════════════════════════════ */
+:root {
+  --reveal-duration: 0.4s;
+}
+
+/* ── Layer 1: grid-rows hack (primary) ──
+   Markup:
+     <div class="reveal" id="panel">        <!-- the animated track -->
+       <div> … </div>                          <!-- required single wrapper -->
+     </div>
+   Toggle .is-open / [data-open] on `.reveal` (JS/Lit), or nest under an [open]
+   element (e.g. <details>). The wrapper needs min-height:0 + overflow:hidden so
+   the content can be clipped to the 0fr track. */
+.reveal {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--reveal-duration) var(--interact-easing, ease);
+}
+.reveal > * {
+  min-height: 0;
+  overflow: hidden;
+}
+.reveal.is-open,
+.reveal[data-open],
+:where([open]) > .reveal {
+  grid-template-rows: 1fr;
+}
+
+/* ── Layer 2: native height:auto animation (progressive enhancement) ──
+   Where interpolate-size is supported, animate height directly (no wrapper
+   needed). Guarded so unsupported engines keep the grid hack above. */
+@supports (interpolate-size: allow-keywords) {
+  :root {
+    interpolate-size: allow-keywords;
+  }
+  .reveal-h {
+    height: auto;
+    overflow: hidden;
+    transition: height var(--reveal-duration) var(--interact-easing, ease);
+  }
+  .reveal-h:not(.is-open):not([data-open]) {
+    height: 0;
+  }
+}
+
+/* ── display:none fade/slide — allow-discrete + @starting-style ──
+   Same idiom as nav.css `.drawer-menu`. Base is display:none; the open state
+   restores display and fades in, and `display`/`overlay` are transitioned with
+   allow-discrete so the element animates out before it is removed. `overlay` is
+   a no-op unless the element is in the top layer (popover/dialog) — harmless.
+   Markup: <div class="reveal-fade" [data-open]?> … </div>  (toggle .is-open) */
+.reveal-fade {
+  display: none;
+  opacity: 0;
+  transition:
+    opacity var(--reveal-duration) var(--interact-easing, ease),
+    overlay var(--reveal-duration) allow-discrete,
+    display var(--reveal-duration) allow-discrete;
+}
+.reveal-fade.is-open,
+.reveal-fade[data-open] {
+  display: block;
+  opacity: 1;
+}
+@starting-style {
+  .reveal-fade.is-open,
+  .reveal-fade[data-open] {
+    opacity: 0;
+  }
+}

package/assets/css/patterns/scroll-based.css

@@ -123,7 +123,7 @@
 
   .scroll-progress__bar {
     block-size: 100%;
-    background: var(--scroll-progress-color, var(--brand-primary-solid));
+    background: var(--scroll-progress-color, var(--color-bg-brand-primary-solid));
     transform-origin: left;
     animation: scroll-progress-grow linear;
     animation-timeline: scroll(root);

package/assets/css/patterns/scroll-target.css

@@ -18,7 +18,7 @@
    (deferred.ts) on engines without `scroll-target-group` support. */
 .scroll-target-group a:target-current,
 .scroll-target-group a.is-current {
-  color: var(--scroll-target-active-color, var(--brand-primary-solid));
+  color: var(--scroll-target-active-color, var(--color-bg-brand-primary-solid));
 }
 
 .scroll-target-group--indicator a {
@@ -47,7 +47,7 @@
 .scroll-target-group--bar a:target-current::before,
 .scroll-target-group--indicator a.is-current::before,
 .scroll-target-group--bar a.is-current::before {
-  background-color: var(--scroll-target-active-color, var(--brand-primary-solid));
+  background-color: var(--scroll-target-active-color, var(--color-bg-brand-primary-solid));
 }
 
 .scroll-target-group--bar a {
@@ -107,7 +107,7 @@
 
 .toc-sidebar a:target-current,
 .toc-sidebar a.is-current {
-  color: var(--scroll-target-active-color, var(--brand-primary-solid));
+  color: var(--scroll-target-active-color, var(--color-bg-brand-primary-solid));
   font-weight: 500;
 }
 

package/assets/css/patterns/sitenav.css

@@ -47,11 +47,11 @@
   border-radius: var(--br-control, 0.375rem);
 
   &:hover {
-    background: var(--color-surface-muted);
+    background: var(--color-bg-surface-muted);
   }
 
   &:focus-visible {
-    outline: 2px solid var(--sitenav-focus-color, var(--color-brand-primary-muted));
+    outline: 2px solid var(--sitenav-focus-color, var(--color-border-focus));
     outline-offset: 2px;
   }
 }
@@ -73,8 +73,8 @@
   max-inline-size: 100dvw;
   padding: 1.5rem;
   padding-block-start: 3.5rem; /* clearance for the close button */
-  background: var(--surface-bg);
-  color: var(--surface-text);
+  background: var(--color-bg-surface);
+  color: var(--color-text-surface);
   border: none;
   box-shadow: var(--ds-panel);
   overflow-y: auto;
@@ -149,11 +149,11 @@
   border-radius: var(--br-control, 0.375rem);
 
   &:hover {
-    background: var(--color-surface-muted);
+    background: var(--color-bg-surface-muted);
   }
 
   &:focus-visible {
-    outline: 2px solid var(--sitenav-focus-color, var(--color-brand-primary-muted));
+    outline: 2px solid var(--sitenav-focus-color, var(--color-border-focus));
     outline-offset: 2px;
   }
 }
@@ -280,8 +280,8 @@
       min-inline-size: 13rem;
       padding: 0.5rem;
       overflow: visible;
-      background: var(--surface-bg);
-      color: var(--surface-text);
+      background: var(--color-bg-surface);
+      color: var(--color-text-surface);
       border: var(--b-panel);
       border-radius: var(--br-panel);
       box-shadow: var(--ds-panel);
@@ -366,8 +366,8 @@
       min-inline-size: 13rem;
       padding: 0.5rem;
       overflow: visible;
-      background: var(--surface-bg);
-      color: var(--surface-text);
+      background: var(--color-bg-surface);
+      color: var(--color-text-surface);
       border: var(--b-panel);
       border-radius: var(--br-panel);
       box-shadow: var(--ds-panel);
@@ -453,8 +453,8 @@
       min-inline-size: 13rem;
       padding: 0.5rem;
       overflow: visible;
-      background: var(--surface-bg);
-      color: var(--surface-text);
+      background: var(--color-bg-surface);
+      color: var(--color-text-surface);
       border: var(--b-panel);
       border-radius: var(--br-panel);
       box-shadow: var(--ds-panel);
@@ -540,8 +540,8 @@
       min-inline-size: 13rem;
       padding: 0.5rem;
       overflow: visible;
-      background: var(--surface-bg);
-      color: var(--surface-text);
+      background: var(--color-bg-surface);
+      color: var(--color-text-surface);
       border: var(--b-panel);
       border-radius: var(--br-panel);
       box-shadow: var(--ds-panel);

package/assets/css/patterns/split-link.css

@@ -38,11 +38,11 @@
   transition: background-color 0.15s ease;
 
   &:hover {
-    background: var(--color-surface-muted);
+    background: var(--color-bg-surface-muted);
   }
 
   &:focus-visible {
-    outline: 2px solid var(--split-link-focus-color, var(--color-brand-primary-muted));
+    outline: 2px solid var(--split-link-focus-color, var(--color-border-focus));
     outline-offset: 2px;
   }
 
@@ -71,8 +71,8 @@
   border: var(--_b);
   border-radius: var(--_br);
   box-shadow: var(--_ds);
-  background: var(--surface-bg);
-  color: var(--surface-text);
+  background: var(--color-bg-surface);
+  color: var(--color-text-surface);
 }
 
 /* Top-layer popover: anchored + placed via position-area. */