@getvitops/core 0.9.0 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,113 @@
 # @getvitops/core
 
+## 1.0.0
+
+### Major Changes
+
+- bb92a14: **The colour system is rebuilt on a target-prefixed grammar and a shared lightness ladder.**
+  This is a breaking change to every colour token and utility class.
+
+  ## Why
+
+  Two axes shared one class namespace — functional _planes_ (`--<role>-bg-muted`) and
+  appearance-relative _stops_ (`--color-<role>-muted`) — arbitrated by a "plane wins" rule. The
+  result was not a scale. On the shipped palette, light mode:
+
+  | class                              | resolved to  | step                                          |
+  | ---------------------------------- | ------------ | --------------------------------------------- |
+  | `bg-ui-accent-x-muted`             | stop         | 100                                           |
+  | `bg-ui-accent-muted`               | plane        | 100 — identical, so `x-muted` was a dead rung |
+  | `bg-ui-accent`                     | plane        | 50 — _lighter_ than both its "muted" rungs    |
+  | `border-ui-accent-muted` / `-bold` | stop / plane | 300 / 300 — identical                         |
+  | `text-ui-accent-bold`              | stop         | 700 — _lighter_ than `text-…-muted` (800)     |
+
+  Every family was non-monotonic, two had duplicate rungs, and `--color-<role>-muted` was
+  unreachable through any `bg-` class.
+
+  ## The new grammar
+
+  ```
+  --color-<target>-<role>[-<variant>]        target ∈ bg | text | icon | border
+  ```
+
+  The target is **inside** the name, so `bg-danger-muted` and `text-danger-muted` are different
+  tokens and there is nothing left to arbitrate. **The class name is the token name minus
+  `--color-`** — one vocabulary instead of two.
+
+  Variants are ordinal (`xx-muted` < `x-muted` < `muted` < bare < `bold` < `x-bold`) and the
+  tables are sparse: only cells that hold their contrast target exist.
+
+  ## Role kinds
+
+  `colors.roles` values may now be `{ hue, kind }` as well as a bare hue string:
+
+  ```jsonc
+  "roles": {
+    "danger":  "rust",                             // shorthand => chromatic
+    "surface": { "hue": "navy", "kind": "surface" }
+  }
+  ```
+
+  - **`surface`** — a page/panel colour: `bg-<role>` is the card, `bg-<role>-muted` the page
+    behind it, `bg-<role>-x-muted` a well, `bg-<role>-bold` the inverse surface. Full text scale.
+  - **`chromatic`** (default) — a signal colour: tints (`bg-<role>-x-muted`/`-muted`) and solids
+    (`bg-<role>-solid[-bold|-x-bold]`), with **no bare `bg-<role>`** — say how loud you mean.
+    `text-on-<role>` is the guaranteed foreground for the solid family.
+
+  ## Palette generation
+
+  Every ramp now sits on one **fixed lightness ladder** (50 → L 0.98 … 950 → L 0.21); only chroma
+  and hue vary. That is what makes a step mean the same lightness in every hue. Previously each
+  seed transposed the curve, so relative luminance at step 300 ranged from 0.253 to 0.384 across
+  the shipped palette — the same variant read differently depending on the role.
+
+  Authored colours are still reproduced **exactly**. A `seed`, an `anchors` entry or a `tones`
+  value is pinned verbatim at its nearest step; every other step takes the ladder. Snapping brand
+  colours to the ladder was measured and rejected: 11 of 18 real brand hexes moved beyond a
+  just-noticeable difference (worst ΔE-OK 0.050 — Facebook's `#1877F2` → `#0067e1`) and six left
+  sRGB gamut. Deviation is now bounded and local to pinned steps, and warns past ~0.03 L.
+
+  Two tones that claim the same step now **error** instead of one silently overwriting the other;
+  the record form (`tones: { "600": "…", "700": "…" }`) is how you resolve it.
+
+  ## New
+  - **`icon-<role>`** — a non-text tier, so a glyph may run more vivid than text. `icon` is now a
+    default utility family alongside `bg`/`text`/`border`.
+  - **`--color-border-focus`** — the focus-ring tone, taken from `ui-primary`'s solid.
+  - **Contrast is enforced at build time**, not only in tests: text ≥ APCA Lc 75 on its primary
+    background, ≥ 60 on secondary planes, icons and surface boundaries ≥ 45, both appearances.
+    A violation now fails `generate`. Chromatic text is checked against the _surface_ planes it
+    actually sits on, not only its own tints. `text-<role>-x-muted` (placeholder) and `-xx-muted`
+    (disabled) are explicitly exempt; nothing else is.
+
+  ## Migrating
+
+  Rename `--<role>-<suffix>` → `--color-<target>-<role>[-<variant>]`, and the same for classes:
+
+  | before                                  | after                                                            |
+  | --------------------------------------- | ---------------------------------------------------------------- |
+  | `--<role>-bg` / `bg-<role>` (chromatic) | `--color-bg-<role>-x-muted` / `bg-<role>-x-muted`                |
+  | `--<role>-bg-muted`                     | `--color-bg-<role>-muted`                                        |
+  | `--<role>-solid` / `-solid-bold`        | `--color-bg-<role>-solid` / `-solid-bold`                        |
+  | `--<role>-on-solid` / `text-on-<role>`  | `--color-text-on-<role>` (class unchanged)                       |
+  | `--<role>-text` / `-text-muted`         | `--color-text-<role>` / `-muted`                                 |
+  | `--<role>-border` / `-border-bold`      | `--color-border-<role>` / `-bold`                                |
+  | `--color-<role>-muted` (stop)           | judge by use: `--color-bg-<role>-muted` or `--color-text-<role>` |
+
+  **`surface` background names rotate**, value-preserving: what was `--surface-bg` (the page) is
+  now `--color-bg-surface-muted`; what was `--surface-bg-bold` (raised) is now
+  `--color-bg-surface`. Elevation is expressed by which token you reach for — page `bg-muted`,
+  card `bg` — rather than a raised/sunken pair, which is what lets a future surfaces axis flatten
+  it without touching markup.
+
+  `vitops lint` reports role classes that no longer resolve, and now derives its suggestions from
+  what the generator actually emits rather than a hand-maintained list.
+
+### Patch Changes
+
+- Updated dependencies [bb92a14]
+  - @getvitops/utils@1.0.0
+
 ## 0.9.0
 
 ### Minor Changes

package/css/animation.css

@@ -311,8 +311,8 @@
      @supports block it resolves to that transparent value. So default to the
      functional text tokens (they flip with the appearance) with a literal
      backstop, since this is precisely the declaration that must never fail. */
-  --_reveal-from: var(--text-reveal-color-from, var(--neutral-text-x-muted, #9099a8));
-  --_reveal-to: var(--text-reveal-color-to, var(--neutral-text, #05070d));
+  --_reveal-from: var(--text-reveal-color-from, var(--color-text-neutral-x-muted, #9099a8));
+  --_reveal-to: var(--text-reveal-color-to, var(--color-text-neutral, #05070d));
   /* Fallback baseline: ordinary visible text in the start color. */
   color: var(--text-reveal-color-from, currentColor);
 }

package/css/patterns/carousel.css

@@ -64,7 +64,7 @@
       border: none;
       border-radius: 50%;
       color: var(--carousel-button-color, currentColor);
-      background: var(--surface-bg-muted);
+      background: var(--color-bg-surface-muted);
       opacity: 0.9;
       transition:
         opacity 0.2s ease,
@@ -73,7 +73,7 @@
 
     &::scroll-button(*):hover {
       opacity: 1;
-      background: var(--color-surface-muted);
+      background: var(--color-bg-surface-muted);
     }
 
     &::scroll-button(*):focus-visible {
@@ -211,7 +211,7 @@
     block-size: 2rem;
     border: none;
     border-radius: 50%;
-    background: var(--surface-bg-muted);
+    background: var(--color-bg-surface-muted);
     color: var(--carousel-button-color, currentColor);
     opacity: 0.7;
     cursor: pointer;

package/css/patterns/code.css

@@ -10,8 +10,8 @@
 :where(:not(pre) > code) {
   font-family: var(--font-mono);
   font-size: 0.85em;
-  background: var(--neutral-border);
-  color: var(--neutral-text);
+  background: var(--color-border-neutral);
+  color: var(--color-text-neutral);
   padding: 0.1em 0.4em;
   border-radius: var(--br-default);
 }

package/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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. */

package/css/patterns/tag.css

@@ -41,7 +41,7 @@
   font-weight: 600;
   line-height: 1;
   border-radius: var(--br-badge-indicator, var(--br-pill, 999px));
-  background: var(--color-danger-bold);
+  background: var(--color-text-danger);
   color: #fff;
 
   &.badge-indicator--dot {

package/css/patterns/text-effects.css

@@ -225,7 +225,7 @@
 
 /* ── Highlight sweep ──────────────────────────────────────────────────────── */
 .text-highlight {
-  --_highlight-color: var(--text-highlight-color, var(--color-warning-muted));
+  --_highlight-color: var(--text-highlight-color, var(--color-bg-warning-muted));
   --_highlight-duration: var(--text-highlight-duration, 0.5s);
   --_highlight-pad-block: var(--text-highlight-pad-block, 0.1em);
   --_highlight-pad-inline: var(--text-highlight-pad-inline, 0);

package/css/patterns/theme-editor.css

@@ -64,7 +64,7 @@ wc-theme-editor {
     overflow: hidden;
     font-family: var(--font-mono, monospace);
     font-size: 0.9em;
-    color: var(--surface-text-x-muted);
+    color: var(--color-text-surface-x-muted);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -74,7 +74,7 @@ wc-theme-editor {
     padding: 0.3em 0.5em;
     border: var(--b-default);
     border-radius: var(--br-default);
-    background: var(--surface-bg);
+    background: var(--color-bg-surface);
     color: inherit;
     font: inherit;
   }
@@ -107,16 +107,16 @@ wc-theme-editor {
     inset-block-start: 0;
     z-index: 1;
     padding-block: 0.5rem;
-    background: var(--surface-bg);
+    background: var(--color-bg-surface);
   }
   .ed-segwrap {
     display: inline-flex;
   }
   .ed-seg.is-active {
-    background: var(--ui-primary-solid);
-    color: var(--ui-primary-on-solid);
+    background: var(--color-bg-ui-primary-solid);
+    color: var(--color-text-on-ui-primary);
   }
   .ed-danger {
-    color: var(--danger-text);
+    color: var(--color-text-danger);
   }
 }

package/css/patterns/tooltip.css

@@ -44,8 +44,8 @@
   padding: var(--_p);
   border-radius: var(--_br);
   box-shadow: var(--_ds);
-  background: var(--surface-text);
-  color: var(--surface-bg);
+  background: var(--color-text-surface);
+  color: var(--color-bg-surface);
   font-size: var(--_fs);
   white-space: nowrap;
   max-inline-size: 20rem;

package/css/patterns/tree.css

@@ -18,7 +18,7 @@
   .tree__item > .tree {
     margin-inline-start: var(--tree-indent, 1.5rem);
     padding-inline-start: var(--tree-indent, 1.5rem);
-    border-inline-start: 1px solid var(--color-surface-muted);
+    border-inline-start: 1px solid var(--color-bg-surface-muted);
   }
 
   .tree__content,
@@ -115,8 +115,8 @@
       inset-block-start: 0;
       block-size: 1rem;
       inline-size: calc(var(--tree-indent, 1.5rem) - 0.5rem);
-      border-inline-start: 1px solid var(--color-surface-muted);
-      border-block-end: 1px solid var(--color-surface-muted);
+      border-inline-start: 1px solid var(--color-bg-surface-muted);
+      border-block-end: 1px solid var(--color-bg-surface-muted);
     }
   }
 

package/dist/editor.js

@@ -1,2 +1,2 @@
-const e=`vitops:ds-overrides`,t=`/__vitops/design-system`,n=(e,t)=>t.startsWith(`stop-`)?`--color-${e}-${t.slice(5)}`:`--${e}-${t}`,r=(e,t)=>`--color-${e}-${t}`;var i=class extends HTMLElement{constructor(...e){super(...e),this.store={light:new Map,dark:new Map},this.roles=new Map,this.roleVars=new Set,this.syncers=new Set,this.scheme=`light`,this.canSave=!1}static{this.observedAttributes=[`manifest`]}connectedCallback(){this.boot()}async boot(){let e=this.getAttribute(`manifest`)??`/vitops/design-manifest.json`;try{let t=await fetch(e);if(!t.ok)throw Error(`manifest ${t.status}`);this.manifest=await t.json()}catch(t){console.warn(`[wc-theme-editor] manifest unavailable at ${e} — editor disabled`,t);return}this.styleEl=document.createElement(`style`),this.styleEl.id=`ds-overrides`,document.head.append(this.styleEl),this.hydrate(),this.render(),this.scheme=this.currentScheme(),new MutationObserver(()=>{let e=this.currentScheme();e!==this.scheme&&(this.scheme=e,this.syncers.forEach(e=>e()))}).observe(document.documentElement,{attributes:!0,attributeFilter:[`data-theme`]}),this.canSave=await this.probeSave(),this.build(this.manifest)}async probeSave(){try{let e=await fetch(t);return e.ok?(await e.json()).writable===!0:!1}catch{return!1}}block(e,t){return t.size?`${e} {\n${[...t].map(([e,t])=>`  ${e}: ${t};`).join(`
-`)}\n}\n`:``}serializeCSS(){return this.block(`:root`,this.store.light)+this.block(`:root[data-brx-theme="dark"], :root[data-theme="dark"]`,this.store.dark)}render(){this.styleEl&&(this.styleEl.textContent=this.serializeCSS())}persist(){try{localStorage.setItem(e,JSON.stringify({light:[...this.store.light],dark:[...this.store.dark],roles:[...this.roles]}))}catch{}}hydrate(){try{let t=localStorage.getItem(e);if(!t)return;let n=JSON.parse(t);this.store.light=new Map(n.light??[]),this.store.dark=new Map(n.dark??[]),this.roles=new Map(n.roles??[]);for(let[e,t]of this.roles)this.markRoleVars(e,t)}catch{}}setOverride(e,t,n){let r=this.store[n];t==null||t===``?r.delete(e):r.set(e,t),this.render(),this.persist()}effective(e,t,n){return this.store[t].has(e)?this.store[t].get(e):t===`dark`&&this.store.light.has(e)?this.store.light.get(e):n}reset(){this.store.light.clear(),this.store.dark.clear(),this.roles.clear(),this.roleVars.clear(),this.render(),this.persist(),this.syncers.forEach(e=>e())}currentScheme(){let e=document.documentElement;return e.dataset.theme===`dark`||e.getAttribute(`data-brx-theme`)===`dark`?`dark`:`light`}setScheme(e){this.scheme=e,document.documentElement.dataset.theme=e,document.documentElement.style.colorScheme=`${e} only`;try{localStorage.setItem(`vitops-color-scheme`,e)}catch{}this.syncers.forEach(e=>e())}roleTokenNames(e,t,r){let i=t===`surface`?`surface`:`default`,a=e.colors.roleTokens?.[r]?.[i];if(!a)return[];let o=[];for(let e of[`light`,`dark`])for(let[r,i]of Object.entries(a[e]))o.push([n(t,r),i,e]);return o}markRoleVars(e,t){if(this.manifest)for(let[n]of this.roleTokenNames(this.manifest,e,t))this.roleVars.add(n)}remapRole(e,t,n){let r=this.roleTokenNames(e,t,n);if(r.length){this.roles.set(t,n);for(let[e,t,n]of r)this.roleVars.add(e),this.store[n].set(e,t);this.render(),this.persist()}}deepSet(e,t,n){let r=t.split(`.`),i=e;for(let e=0;e<r.length-1;e++){let t=r[e];(typeof i[t]!=`object`||i[t]==null)&&(i[t]={}),i=i[t]}i[r[r.length-1]]=n}buildPatch(e){let t={},n=[];for(let[e,n]of this.roles)this.deepSet(t,`colors.roles.${e}`,n);for(let[r,i]of this.store.light){if(this.roleVars.has(r))continue;let a=e.reverseIndex[r];a?this.deepSet(t,a,i):n.push(r)}for(let e of this.store.dark.keys())this.roleVars.has(e)||n.push(`${e} (dark)`);return{patch:t,skipped:n}}el(e,t={},n=[]){let r=document.createElement(e),i=r;for(let[e,n]of Object.entries(t))n===!0?i.setAttribute(e,``):n!==!1&&i.setAttribute(e,String(n));for(let e of n)i.append(e);return r}row(e,t,n){return this.syncers.add(n),n(),this.el(`label`,{class:`ed-row`},[this.el(`span`,{class:`ed-label`,title:e},[e.replace(/^--/,``)]),t])}textInput(e,t,n=``){let r=this.el(`input`,{type:`text`,class:`ed-input`});return r.addEventListener(`input`,()=>this.setOverride(e,r.value.trim()||null,this.scheme)),this.row(e,r,()=>{r.value=this.store[this.scheme].get(e)??``,r.placeholder=n||t})}colorInput(e,t){let n=this.el(`input`,{type:`color`,class:`ed-color`}),r=this.el(`input`,{type:`text`,class:`ed-input ed-mono`}),i=t=>this.setOverride(e,t||null,`light`);n.addEventListener(`input`,()=>{r.value=n.value,i(n.value)}),r.addEventListener(`input`,()=>{/^#[0-9a-f]{6}$/i.test(r.value)&&(n.value=r.value),i(r.value.trim())});let a=this.el(`span`,{class:`ed-pair`},[n,r]);return this.row(e,a,()=>{let i=this.store.light.get(e)??t;r.value=i,/^#[0-9a-f]{6}$/i.test(i)&&(n.value=i)})}selectInput(e,t){let n=this.el(`select`,{class:`ed-input`});n.append(this.el(`option`,{value:``},[`— default —`]));for(let e of t)n.append(this.el(`option`,{value:e.value},[e.label]));return n.addEventListener(`change`,()=>this.setOverride(e,n.value||null,this.scheme)),this.row(e,n,()=>{n.value=this.store[this.scheme].get(e)??``})}remSlider(e,t){let n=parseFloat(t)||1,r=this.el(`input`,{type:`range`,class:`ed-range`,min:`0`,max:String(Math.max(4,Math.ceil(n*2))),step:`0.05`}),i=this.el(`output`,{class:`ed-out`});r.addEventListener(`input`,()=>{i.textContent=`${r.value}rem`,this.setOverride(e,`${r.value}rem`,this.scheme)});let a=this.el(`span`,{class:`ed-pair`},[r,i]);return this.row(e,a,()=>{r.value=String(parseFloat(this.effective(e,this.scheme,t))||n),i.textContent=this.store[this.scheme].get(e)??`auto`})}slider(e,t){let n=t.toValue??(e=>`${e}${t.unit??``}`),r=t.fromValue??(e=>Number.isNaN(parseFloat(e))?t.def:parseFloat(e)),i=this.el(`input`,{type:`range`,class:`ed-range`,min:String(t.min),max:String(t.max),step:String(t.step)}),a=this.el(`output`,{class:`ed-out`});i.addEventListener(`input`,()=>{let t=n(parseFloat(i.value));a.textContent=t,this.setOverride(e,t,this.scheme)});let o=this.el(`span`,{class:`ed-pair`},[i,a]);return this.row(e,o,()=>{let n=this.store[this.scheme].get(e);i.value=String(n==null?t.def:r(n)),a.textContent=n??`${t.def}${t.unit??``}`})}section(e,t=!1){let n=this.el(`div`,{class:`ed-body rhythm`});return{details:this.el(`details`,{class:`details details--marker-start ed-section`,...t?{open:!0}:{}},[this.el(`summary`,{class:`font-eyebrow`},[this.el(`span`,{class:`details-icon`,"aria-hidden":`true`},[`▸`]),e]),n]),body:n}}hint(e){return this.el(`p`,{class:`font-footnote text-surface-x-muted`},[e])}sub(e){let t=this.section(e);return t.details.classList.add(`ed-sub`),t}buildPalette(e){let{details:t,body:n}=this.section(`Palette`,!0);n.append(this.hint(`Hues feed the semantic roles below — edit a hue and every role mapped to it follows. Hue edits are scheme-global: dark mode re-points which step a token reads, it never redefines the hue itself.`));for(let t of e.colors.ramps){let i=this.sub(t);for(let n of e.colors.steps){let a=e.colors.palette[t]?.[n];a!=null&&i.body.append(this.colorInput(r(t,n),a))}n.append(i.details)}return n.append(this.buildRoles(e)),t}buildRoles(e){let{details:t,body:n}=this.sub(`Semantic roles`);n.append(this.hint(`Point a role at another hue — its whole functional token set (bg / border / solid / on-solid / text) is rewritten for both appearances.`));let r=e.colors.ramps;for(let{name:t,ramp:i}of e.colors.roles){let a=this.el(`select`,{class:`ed-input`});for(let e of r)a.append(this.el(`option`,{value:e},[e]));a.addEventListener(`change`,()=>this.remapRole(e,t,a.value)),n.append(this.row(`--${t}`,a,()=>{a.value=this.roles.get(t)??i}))}return t}buildTypography(e){let{details:t,body:n}=this.section(`Typography`),r=Object.keys(e.fonts).map(e=>({label:e,value:`var(--font-${e})`})),i=e.scales.text.map(e=>({label:e.name,value:`var(--text-${e.name})`})),a={tt:[`none`,`uppercase`,`lowercase`,`capitalize`],fst:[`normal`,`italic`,`oblique`],td:[`none`,`underline`,`line-through`],tw:[`wrap`,`balance`,`pretty`,`nowrap`]};for(let t of e.typography.roles){let o=e.typography.specs[t]??{},s=this.sub(t);for(let[n,{key:c}]of Object.entries(e.typography.hooks)){let e=`--${t}-${n}`,l=o[c]==null?``:String(o[c]);n===`ff`?s.body.append(this.selectInput(e,r)):n===`fs`?s.body.append(this.selectInput(e,i)):a[n]?s.body.append(this.selectInput(e,a[n].map(e=>({label:e,value:e})))):s.body.append(this.textInput(e,l,l||c))}n.append(s.details)}return t}buildSpacing(e){let{details:t,body:n}=this.section(`Spacing`);n.append(this.hint(`Each step overrides to a fixed rem (dropping the fluid clamp). Reset restores it.`));for(let t of e.scales.space)n.append(this.remSlider(`--space-${t.name}`,t.max));return t}buildLayout(){let{details:e,body:t}=this.section(`Layout`);return t.append(this.hint(`Vertical rhythm and the .centered track widths — global structure.`)),t.append(this.slider(`--rhythm-scale`,{min:.5,max:2.5,step:.05,def:1}),this.slider(`--width-measure`,{min:30,max:110,step:1,def:65,unit:`ch`}),this.slider(`--width-breakout`,{min:40,max:150,step:1,def:90,unit:`ch`}),this.slider(`--width-spotlight`,{min:60,max:200,step:1,def:120,unit:`ch`}),this.slider(`--gutter`,{min:0,max:6,step:.1,def:3,toValue:e=>`clamp(1rem, 4cqi, ${e}rem)`,fromValue:e=>{let t=/clamp\([^,]+,[^,]+,\s*([\d.]+)/.exec(e);return t?parseFloat(t[1]):3}})),e}buildPatterns(e){let t=this.section(`Pattern defaults`);for(let[n,r]of Object.entries(e.patterns.defaults))t.body.append(this.textInput(`--${n}-default`,r,r));let n=this.section(`Radii`);for(let[t,r]of Object.entries(e.patterns.radii))n.body.append(this.textInput(`--br-${t}`,r,r));let r=this.section(`Pattern groups`);for(let[t,n]of Object.entries(e.patterns.groups)){let e=this.sub(t);for(let[r,i]of Object.entries(n))e.body.append(this.textInput(`--${r}-${t}`,i,i));r.body.append(e.details)}let i=this.section(`Components`);i.body.append(this.hint(`Per-component geometry — overrides the group defaults for just this component.`));for(let t of e.patterns.items){if(!t.wrappable.length)continue;let e=this.sub(t.name);for(let{sfx:n,prop:r}of t.wrappable){let i=t.base[r]??``;e.body.append(this.textInput(`--${n}-${t.name}`,i,i))}i.body.append(e.details)}let a=this.section(`Shadows`);for(let[t,n]of Object.entries(e.shadows))a.body.append(this.textInput(`--shadow-${t}`,n,n));return[t.details,n.details,r.details,i.details,a.details]}async flash(e,t){let n=e.textContent;e.textContent=t,setTimeout(()=>e.textContent=n,1400)}async copy(e,t){try{await navigator.clipboard.writeText(e),this.flash(t,`Copied ✓`)}catch{this.flash(t,`Copy failed`)}}async save(e,n){let{patch:r}=this.buildPatch(e);if(!Object.keys(r).length)return void this.flash(n,`Nothing to save`);try{let e=await fetch(t,{method:`POST`,headers:{"content-type":`application/json`},body:JSON.stringify({patch:r})});if(!e.ok){let t=await e.json().catch(()=>({}));console.error(`[wc-theme-editor] save rejected`,t.errors??e.statusText),this.flash(n,`Rejected ✗`);return}this.reset(),this.flash(n,`Saved ✓`)}catch(e){console.error(`[wc-theme-editor] save failed`,e),this.flash(n,`Failed ✗`)}}buildToolbar(e){let t=this.el(`div`,{class:`cluster-start ed-toolbar`}),n=this.el(`button`,{type:`button`,class:`btn ed-seg`},[`Light`]),r=this.el(`button`,{type:`button`,class:`btn ed-seg`},[`Dark`]),i=()=>{n.classList.toggle(`is-active`,this.scheme===`light`),r.classList.toggle(`is-active`,this.scheme===`dark`)};this.syncers.add(i),n.addEventListener(`click`,()=>this.setScheme(`light`)),r.addEventListener(`click`,()=>this.setScheme(`dark`)),i(),t.append(this.el(`span`,{class:`ed-segwrap`,role:`group`},[n,r]));let a=this.el(`button`,{type:`button`,class:`btn`},[`Copy CSS`]);a.addEventListener(`click`,()=>this.copy(this.serializeCSS()||`/* no overrides yet */`,a));let o=this.el(`button`,{type:`button`,class:`btn`},[`Copy JSON patch`]);if(o.addEventListener(`click`,()=>{let{patch:t,skipped:n}=this.buildPatch(e),r=n.length?`\n// runtime-only (no source mapping): ${n.join(`, `)}`:``;this.copy(JSON.stringify(t,null,2)+r,o)}),t.append(a,o),this.canSave){let n=this.el(`button`,{type:`button`,class:`cta`},[`Save to source`]);n.addEventListener(`click`,()=>void this.save(e,n)),t.append(n)}let s=this.el(`button`,{type:`button`,class:`btn ed-danger`},[`Reset all`]);return s.addEventListener(`click`,()=>this.reset()),t.append(s),t}build(e){let t=`ds-editor-panel`,n=this.el(`div`,{id:t,popover:`manual`,class:`drawer drawer--right drawer--modeless ed-panel bg-surface text-surface rhythm`,"aria-label":`Design-system editor`});n.append(this.el(`header`,{class:`cluster-between`},[this.el(`strong`,{class:`font-heading`},[`Theme editor`]),(()=>{let e=this.el(`button`,{type:`button`,class:`btn`,popovertarget:t,popovertargetaction:`hide`},[`×`]);return e.setAttribute(`aria-label`,`Close editor`),e})()]),this.buildToolbar(e),this.buildPalette(e),this.buildTypography(e),this.buildSpacing(e),this.buildLayout(),...this.buildPatterns(e));let r=this.el(`button`,{type:`button`,class:`cta ed-launch`,popovertarget:t},[`🎨 Theme`]);document.addEventListener(`keydown`,e=>{e.key===`Escape`&&n.matches(`:popover-open`)&&n.hidePopover()}),this.append(r,n)}};customElements.get(`wc-theme-editor`)||customElements.define(`wc-theme-editor`,i);
+const e=`vitops:ds-overrides`,t=`/__vitops/design-system`,n=(e,t)=>{let n=t.indexOf(`-`),r=n===-1?t:t.slice(0,n),i=n===-1?``:t.slice(n+1);return i===`on`?`--color-${r}-on-${e}`:i.startsWith(`on-`)?`--color-${r}-on-${e}-${i.slice(3)}`:i?`--color-${r}-${e}-${i}`:`--color-${r}-${e}`},r=(e,t)=>`--color-${e}-${t}`;var i=class extends HTMLElement{constructor(...e){super(...e),this.store={light:new Map,dark:new Map},this.roles=new Map,this.roleVars=new Set,this.syncers=new Set,this.scheme=`light`,this.canSave=!1}static{this.observedAttributes=[`manifest`]}connectedCallback(){this.boot()}async boot(){let e=this.getAttribute(`manifest`)??`/vitops/design-manifest.json`;try{let t=await fetch(e);if(!t.ok)throw Error(`manifest ${t.status}`);this.manifest=await t.json()}catch(t){console.warn(`[wc-theme-editor] manifest unavailable at ${e} — editor disabled`,t);return}this.styleEl=document.createElement(`style`),this.styleEl.id=`ds-overrides`,document.head.append(this.styleEl),this.hydrate(),this.render(),this.scheme=this.currentScheme(),new MutationObserver(()=>{let e=this.currentScheme();e!==this.scheme&&(this.scheme=e,this.syncers.forEach(e=>e()))}).observe(document.documentElement,{attributes:!0,attributeFilter:[`data-theme`]}),this.canSave=await this.probeSave(),this.build(this.manifest)}async probeSave(){try{let e=await fetch(t);return e.ok?(await e.json()).writable===!0:!1}catch{return!1}}block(e,t){return t.size?`${e} {\n${[...t].map(([e,t])=>`  ${e}: ${t};`).join(`
+`)}\n}\n`:``}serializeCSS(){return this.block(`:root`,this.store.light)+this.block(`:root[data-brx-theme="dark"], :root[data-theme="dark"]`,this.store.dark)}render(){this.styleEl&&(this.styleEl.textContent=this.serializeCSS())}persist(){try{localStorage.setItem(e,JSON.stringify({light:[...this.store.light],dark:[...this.store.dark],roles:[...this.roles]}))}catch{}}hydrate(){try{let t=localStorage.getItem(e);if(!t)return;let n=JSON.parse(t);this.store.light=new Map(n.light??[]),this.store.dark=new Map(n.dark??[]),this.roles=new Map(n.roles??[]);for(let[e,t]of this.roles)this.markRoleVars(e,t)}catch{}}setOverride(e,t,n){let r=this.store[n];t==null||t===``?r.delete(e):r.set(e,t),this.render(),this.persist()}effective(e,t,n){return this.store[t].has(e)?this.store[t].get(e):t===`dark`&&this.store.light.has(e)?this.store.light.get(e):n}reset(){this.store.light.clear(),this.store.dark.clear(),this.roles.clear(),this.roleVars.clear(),this.render(),this.persist(),this.syncers.forEach(e=>e())}currentScheme(){let e=document.documentElement;return e.dataset.theme===`dark`||e.getAttribute(`data-brx-theme`)===`dark`?`dark`:`light`}setScheme(e){this.scheme=e,document.documentElement.dataset.theme=e,document.documentElement.style.colorScheme=`${e} only`;try{localStorage.setItem(`vitops-color-scheme`,e)}catch{}this.syncers.forEach(e=>e())}roleTokenNames(e,t,r){let i=e.colors.roles.find(e=>e.name===t)?.kind??`chromatic`,a=e.colors.roleTokens?.[r]?.[i];if(!a)return[];let o=[];for(let e of[`light`,`dark`])for(let[r,i]of Object.entries(a[e]))o.push([n(t,r),i,e]);return o}markRoleVars(e,t){if(this.manifest)for(let[n]of this.roleTokenNames(this.manifest,e,t))this.roleVars.add(n)}remapRole(e,t,n){let r=this.roleTokenNames(e,t,n);if(r.length){this.roles.set(t,n);for(let[e,t,n]of r)this.roleVars.add(e),this.store[n].set(e,t);this.render(),this.persist()}}deepSet(e,t,n){let r=t.split(`.`),i=e;for(let e=0;e<r.length-1;e++){let t=r[e];(typeof i[t]!=`object`||i[t]==null)&&(i[t]={}),i=i[t]}i[r[r.length-1]]=n}buildPatch(e){let t={},n=[];for(let[n,r]of this.roles){let i=e.colors.roles.find(e=>e.name===n)?.kind??`chromatic`;this.deepSet(t,`colors.roles.${n}`,{hue:r,kind:i})}for(let[r,i]of this.store.light){if(this.roleVars.has(r))continue;let a=e.reverseIndex[r];a?this.deepSet(t,a,i):n.push(r)}for(let e of this.store.dark.keys())this.roleVars.has(e)||n.push(`${e} (dark)`);return{patch:t,skipped:n}}el(e,t={},n=[]){let r=document.createElement(e),i=r;for(let[e,n]of Object.entries(t))n===!0?i.setAttribute(e,``):n!==!1&&i.setAttribute(e,String(n));for(let e of n)i.append(e);return r}row(e,t,n){return this.syncers.add(n),n(),this.el(`label`,{class:`ed-row`},[this.el(`span`,{class:`ed-label`,title:e},[e.replace(/^--/,``)]),t])}textInput(e,t,n=``){let r=this.el(`input`,{type:`text`,class:`ed-input`});return r.addEventListener(`input`,()=>this.setOverride(e,r.value.trim()||null,this.scheme)),this.row(e,r,()=>{r.value=this.store[this.scheme].get(e)??``,r.placeholder=n||t})}colorInput(e,t){let n=this.el(`input`,{type:`color`,class:`ed-color`}),r=this.el(`input`,{type:`text`,class:`ed-input ed-mono`}),i=t=>this.setOverride(e,t||null,`light`);n.addEventListener(`input`,()=>{r.value=n.value,i(n.value)}),r.addEventListener(`input`,()=>{/^#[0-9a-f]{6}$/i.test(r.value)&&(n.value=r.value),i(r.value.trim())});let a=this.el(`span`,{class:`ed-pair`},[n,r]);return this.row(e,a,()=>{let i=this.store.light.get(e)??t;r.value=i,/^#[0-9a-f]{6}$/i.test(i)&&(n.value=i)})}selectInput(e,t){let n=this.el(`select`,{class:`ed-input`});n.append(this.el(`option`,{value:``},[`— default —`]));for(let e of t)n.append(this.el(`option`,{value:e.value},[e.label]));return n.addEventListener(`change`,()=>this.setOverride(e,n.value||null,this.scheme)),this.row(e,n,()=>{n.value=this.store[this.scheme].get(e)??``})}remSlider(e,t){let n=parseFloat(t)||1,r=this.el(`input`,{type:`range`,class:`ed-range`,min:`0`,max:String(Math.max(4,Math.ceil(n*2))),step:`0.05`}),i=this.el(`output`,{class:`ed-out`});r.addEventListener(`input`,()=>{i.textContent=`${r.value}rem`,this.setOverride(e,`${r.value}rem`,this.scheme)});let a=this.el(`span`,{class:`ed-pair`},[r,i]);return this.row(e,a,()=>{r.value=String(parseFloat(this.effective(e,this.scheme,t))||n),i.textContent=this.store[this.scheme].get(e)??`auto`})}slider(e,t){let n=t.toValue??(e=>`${e}${t.unit??``}`),r=t.fromValue??(e=>Number.isNaN(parseFloat(e))?t.def:parseFloat(e)),i=this.el(`input`,{type:`range`,class:`ed-range`,min:String(t.min),max:String(t.max),step:String(t.step)}),a=this.el(`output`,{class:`ed-out`});i.addEventListener(`input`,()=>{let t=n(parseFloat(i.value));a.textContent=t,this.setOverride(e,t,this.scheme)});let o=this.el(`span`,{class:`ed-pair`},[i,a]);return this.row(e,o,()=>{let n=this.store[this.scheme].get(e);i.value=String(n==null?t.def:r(n)),a.textContent=n??`${t.def}${t.unit??``}`})}section(e,t=!1){let n=this.el(`div`,{class:`ed-body rhythm`});return{details:this.el(`details`,{class:`details details--marker-start ed-section`,...t?{open:!0}:{}},[this.el(`summary`,{class:`font-eyebrow`},[this.el(`span`,{class:`details-icon`,"aria-hidden":`true`},[`▸`]),e]),n]),body:n}}hint(e){return this.el(`p`,{class:`font-footnote text-surface-x-muted`},[e])}sub(e){let t=this.section(e);return t.details.classList.add(`ed-sub`),t}buildPalette(e){let{details:t,body:n}=this.section(`Palette`,!0);n.append(this.hint(`Hues feed the semantic roles below — edit a hue and every role mapped to it follows. Hue edits are scheme-global: dark mode re-points which step a token reads, it never redefines the hue itself.`));for(let t of e.colors.ramps){let i=this.sub(t);for(let n of e.colors.steps){let a=e.colors.palette[t]?.[n];a!=null&&i.body.append(this.colorInput(r(t,n),a))}n.append(i.details)}return n.append(this.buildRoles(e)),t}buildRoles(e){let{details:t,body:n}=this.sub(`Semantic roles`);n.append(this.hint(`Point a role at another hue — its whole functional token set (bg / border / solid / on-solid / text) is rewritten for both appearances.`));let r=e.colors.ramps;for(let{name:t,ramp:i}of e.colors.roles){let a=this.el(`select`,{class:`ed-input`});for(let e of r)a.append(this.el(`option`,{value:e},[e]));a.addEventListener(`change`,()=>this.remapRole(e,t,a.value)),n.append(this.row(`--${t}`,a,()=>{a.value=this.roles.get(t)??i}))}return t}buildTypography(e){let{details:t,body:n}=this.section(`Typography`),r=Object.keys(e.fonts).map(e=>({label:e,value:`var(--font-${e})`})),i=e.scales.text.map(e=>({label:e.name,value:`var(--text-${e.name})`})),a={tt:[`none`,`uppercase`,`lowercase`,`capitalize`],fst:[`normal`,`italic`,`oblique`],td:[`none`,`underline`,`line-through`],tw:[`wrap`,`balance`,`pretty`,`nowrap`]};for(let t of e.typography.roles){let o=e.typography.specs[t]??{},s=this.sub(t);for(let[n,{key:c}]of Object.entries(e.typography.hooks)){let e=`--${t}-${n}`,l=o[c]==null?``:String(o[c]);n===`ff`?s.body.append(this.selectInput(e,r)):n===`fs`?s.body.append(this.selectInput(e,i)):a[n]?s.body.append(this.selectInput(e,a[n].map(e=>({label:e,value:e})))):s.body.append(this.textInput(e,l,l||c))}n.append(s.details)}return t}buildSpacing(e){let{details:t,body:n}=this.section(`Spacing`);n.append(this.hint(`Each step overrides to a fixed rem (dropping the fluid clamp). Reset restores it.`));for(let t of e.scales.space)n.append(this.remSlider(`--space-${t.name}`,t.max));return t}buildLayout(){let{details:e,body:t}=this.section(`Layout`);return t.append(this.hint(`Vertical rhythm and the .centered track widths — global structure.`)),t.append(this.slider(`--rhythm-scale`,{min:.5,max:2.5,step:.05,def:1}),this.slider(`--width-measure`,{min:30,max:110,step:1,def:65,unit:`ch`}),this.slider(`--width-breakout`,{min:40,max:150,step:1,def:90,unit:`ch`}),this.slider(`--width-spotlight`,{min:60,max:200,step:1,def:120,unit:`ch`}),this.slider(`--gutter`,{min:0,max:6,step:.1,def:3,toValue:e=>`clamp(1rem, 4cqi, ${e}rem)`,fromValue:e=>{let t=/clamp\([^,]+,[^,]+,\s*([\d.]+)/.exec(e);return t?parseFloat(t[1]):3}})),e}buildPatterns(e){let t=this.section(`Pattern defaults`);for(let[n,r]of Object.entries(e.patterns.defaults))t.body.append(this.textInput(`--${n}-default`,r,r));let n=this.section(`Radii`);for(let[t,r]of Object.entries(e.patterns.radii))n.body.append(this.textInput(`--br-${t}`,r,r));let r=this.section(`Pattern groups`);for(let[t,n]of Object.entries(e.patterns.groups)){let e=this.sub(t);for(let[r,i]of Object.entries(n))e.body.append(this.textInput(`--${r}-${t}`,i,i));r.body.append(e.details)}let i=this.section(`Components`);i.body.append(this.hint(`Per-component geometry — overrides the group defaults for just this component.`));for(let t of e.patterns.items){if(!t.wrappable.length)continue;let e=this.sub(t.name);for(let{sfx:n,prop:r}of t.wrappable){let i=t.base[r]??``;e.body.append(this.textInput(`--${n}-${t.name}`,i,i))}i.body.append(e.details)}let a=this.section(`Shadows`);for(let[t,n]of Object.entries(e.shadows))a.body.append(this.textInput(`--shadow-${t}`,n,n));return[t.details,n.details,r.details,i.details,a.details]}async flash(e,t){let n=e.textContent;e.textContent=t,setTimeout(()=>e.textContent=n,1400)}async copy(e,t){try{await navigator.clipboard.writeText(e),this.flash(t,`Copied ✓`)}catch{this.flash(t,`Copy failed`)}}async save(e,n){let{patch:r}=this.buildPatch(e);if(!Object.keys(r).length)return void this.flash(n,`Nothing to save`);try{let e=await fetch(t,{method:`POST`,headers:{"content-type":`application/json`},body:JSON.stringify({patch:r})});if(!e.ok){let t=await e.json().catch(()=>({}));console.error(`[wc-theme-editor] save rejected`,t.errors??e.statusText),this.flash(n,`Rejected ✗`);return}this.reset(),this.flash(n,`Saved ✓`)}catch(e){console.error(`[wc-theme-editor] save failed`,e),this.flash(n,`Failed ✗`)}}buildToolbar(e){let t=this.el(`div`,{class:`cluster-start ed-toolbar`}),n=this.el(`button`,{type:`button`,class:`btn ed-seg`},[`Light`]),r=this.el(`button`,{type:`button`,class:`btn ed-seg`},[`Dark`]),i=()=>{n.classList.toggle(`is-active`,this.scheme===`light`),r.classList.toggle(`is-active`,this.scheme===`dark`)};this.syncers.add(i),n.addEventListener(`click`,()=>this.setScheme(`light`)),r.addEventListener(`click`,()=>this.setScheme(`dark`)),i(),t.append(this.el(`span`,{class:`ed-segwrap`,role:`group`},[n,r]));let a=this.el(`button`,{type:`button`,class:`btn`},[`Copy CSS`]);a.addEventListener(`click`,()=>this.copy(this.serializeCSS()||`/* no overrides yet */`,a));let o=this.el(`button`,{type:`button`,class:`btn`},[`Copy JSON patch`]);if(o.addEventListener(`click`,()=>{let{patch:t,skipped:n}=this.buildPatch(e),r=n.length?`\n// runtime-only (no source mapping): ${n.join(`, `)}`:``;this.copy(JSON.stringify(t,null,2)+r,o)}),t.append(a,o),this.canSave){let n=this.el(`button`,{type:`button`,class:`cta`},[`Save to source`]);n.addEventListener(`click`,()=>void this.save(e,n)),t.append(n)}let s=this.el(`button`,{type:`button`,class:`btn ed-danger`},[`Reset all`]);return s.addEventListener(`click`,()=>this.reset()),t.append(s),t}build(e){let t=`ds-editor-panel`,n=this.el(`div`,{id:t,popover:`manual`,class:`drawer drawer--right drawer--modeless ed-panel bg-surface text-surface rhythm`,"aria-label":`Design-system editor`});n.append(this.el(`header`,{class:`cluster-between`},[this.el(`strong`,{class:`font-heading`},[`Theme editor`]),(()=>{let e=this.el(`button`,{type:`button`,class:`btn`,popovertarget:t,popovertargetaction:`hide`},[`×`]);return e.setAttribute(`aria-label`,`Close editor`),e})()]),this.buildToolbar(e),this.buildPalette(e),this.buildTypography(e),this.buildSpacing(e),this.buildLayout(),...this.buildPatterns(e));let r=this.el(`button`,{type:`button`,class:`cta ed-launch`,popovertarget:t},[`🎨 Theme`]);document.addEventListener(`keydown`,e=>{e.key===`Escape`&&n.matches(`:popover-open`)&&n.hidePopover()}),this.append(r,n)}};customElements.get(`wc-theme-editor`)||customElements.define(`wc-theme-editor`,i);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getvitops/core",
-  "version": "0.9.0",
+  "version": "1.0.0",
   "description": "The Vitops design-system framework — CSS partials, Lit web components, and browser polyfills.",
   "license": "MIT",
   "files": [
@@ -31,6 +31,6 @@
     "lit": "^3.3.3",
     "scroll-timeline-polyfill": "^1.1.0",
     "temporal-polyfill": "^1.0.1",
-    "@getvitops/utils": "0.9.0"
+    "@getvitops/utils": "1.0.0"
   }
 }