@kolkrabbi/kol-theme 0.132.1 → 0.134.0

package/kol-components-atoms.css

@@ -53,7 +53,12 @@
   display: inline-flex;
   align-items: center;
   border-radius: var(--kol-radius-sm);
-  border: 1px solid transparent;
+  /* paint from the TONE properties (kol-components-molecules.css, TONE):
+   * `--filled` / `--outline` are aliases of the primary / outline tones, the
+   * fallback is filled, and a toned wrapper reaches a shell with no modifier */
+  background-color: var(--kol-tone-bg, var(--kol-surface-secondary));
+  color: var(--kol-tone-fg, var(--kol-surface-on-primary));
+  border: 1px solid var(--kol-tone-border, transparent);
   transition: background-color 150ms ease,
               border-color     150ms ease,
               color            150ms ease;
@@ -62,10 +67,9 @@
 
 /* ─── Variants ─── */
 
-.kol-control--filled {
-  background-color: var(--kol-surface-secondary);
-  color: var(--kol-surface-on-primary);
-}
+/* `.kol-control--filled` / `.kol-control--outline` — tone aliases, see TONE.
+ * `.kol-control--plain` is the bare shell (ViewToggle's inactive text chip):
+ * no fill, no border, the meta ink. */
 
 .kol-control--ghost {
   /* DEPRECATED (2026-07-08 chrome law) — ghost folded into outline; Input
@@ -80,13 +84,6 @@
   color: var(--kol-surface-on-primary);
 }
 
-.kol-control--outline {
-  background-color: transparent;
-  color: var(--kol-surface-on-primary);
-  /* oq-08 — the one outline border (user ruling 2026-08-26); was oq-16 */
-  border-color: var(--kol-oq-08);
-}
-
 /* Textarea modifier — flips the inline-flex shell to block so a multi-line
  * textarea takes full width. Vertical resize is real (2026-07-08): the
  * resize-grip icon is the JS drag handle (both axes); native resize is
@@ -239,7 +236,20 @@
               color var(--kol-transition-base),
               border-color var(--kol-transition-base);
   cursor: pointer;
-}
+  /* THE TONE AXIS (tone-is-the-ground-axis, 2026-09-03): the paint is read
+   * from `--kol-tone-*` — set on the element by its own variant / tone class,
+   * or inherited from a toned wrapper — and the fallbacks are `primary`, so a
+   * bare button with no tone anywhere renders exactly what it always did.
+   * The bundles live in kol-components-molecules.css (TONE). */
+  background-color: var(--kol-tone-bg, var(--kol-surface-secondary));
+  background-image: var(--kol-tone-image, none);
+  color: var(--kol-tone-fg, var(--kol-surface-on-primary));
+  border: 1px solid var(--kol-tone-border, transparent);
+}
+/* WEIGHT IS THE VARIANT'S, not the tone's: a tone is a ground, and a ground
+ * must not re-weigh a label — a sunken secondary keeps its 500 (matrix-verified
+ * 2026-09-03, the one regression the first cut had). */
+.kol-btn-secondary, .kol-btn-accent, .kol-btn-danger, .kol-btn.kol-tone-secondary { font-weight: 500; }
 
 .kol-btn:focus-visible {
   outline: 2px solid var(--kol-focus-ring);
@@ -279,135 +289,26 @@
 .kol-btn-icon.kol-btn-md { width: 32px; height: 32px; padding: 0; }
 .kol-btn-icon.kol-btn-lg { width: 40px; height: 40px; padding: 0; }
 
-.kol-btn-primary {
-  background: var(--kol-surface-secondary);
-  color: var(--kol-surface-on-primary);
-  border: 1px solid transparent;
-}
-@media (hover: hover) {
-  .kol-btn-primary:not(.kol-btn-animate):not(.kol-dd-trigger):hover {
-    background-color: var(--kol-oq-08);
-    color: var(--kol-surface-on-primary);
-  }
-}
-
-.kol-btn-secondary {
-  background: var(--kol-surface-on-primary);
-  color: var(--kol-surface-primary);
-  border: 1px solid transparent;
-  font-weight: 500;
-}
+/* ─── Variants — the ground ones are TONES now (2026-09-03) ───
+ * `.kol-btn-primary` · `-secondary` · `-outline` · `-ghost` · `-grey` are
+ * aliases of `.kol-tone-*`, and `-nav` · `-danger` · `-accent` carry their own
+ * bundles — all in kol-components-molecules.css (TONE). What used to be eight
+ * hover rules is one, reading each tone's own rungs. */
 @media (hover: hover) {
-  .kol-btn-secondary:not(.kol-btn-animate):not(.kol-dd-trigger):hover {
-    background-color: var(--kol-oq-inverse-40);
-    color: var(--kol-surface-primary);
-    border-color: transparent;
+  .kol-btn:not(.kol-btn-animate):not(.kol-dd-trigger):hover {
+    background-color: var(--kol-tone-hover-bg, var(--kol-oq-08));
+    background-image: var(--kol-tone-hover-image, none);
+    color: var(--kol-tone-hover-fg, var(--kol-surface-on-primary));
+    border-color: var(--kol-tone-hover-border, transparent);
   }
 }
-
-.kol-btn-accent {
-  background: var(--kol-accent-primary);
-  color: var(--kol-accent-on-primary);
-  border: 1px solid transparent;
-  font-weight: 500;
-}
-@media (hover: hover) {
-  .kol-btn-accent:not(.kol-btn-animate):not(.kol-dd-trigger):hover {
-    background-color: var(--kol-accent-primary-strong);
-    color: var(--kol-accent-on-primary);
-  }
-}
-
-.kol-btn-outline {
-  background: transparent;
-  color: var(--kol-surface-on-primary);
-  /* ONE outline border across the controls (user ruling 2026-08-26): OPAQUE
-   * 8% — the system's hairline. oq-16 read heavy beside the segmented
-   * toggle's fg-04, and fg is out: a translucent border doubles where two
-   * controls touch. Button outline · .kol-control--outline · .kol-seg agree. */
-  border: 1px solid var(--kol-oq-08);
-}
-@media (hover: hover) {
-  .kol-btn-outline:not(.kol-btn-animate):not(.kol-dd-trigger):hover {
-    background-color: var(--kol-oq-02);
-    border-color: color-mix(in srgb, var(--kol-surface-on-primary) 25%, var(--kol-surface-primary));
-    color: var(--kol-surface-on-primary);
-  }
-}
-
-.kol-btn-ghost {
-  background: transparent;
-  color: var(--kol-oq-48);
-  border: 1px solid transparent;
-}
-@media (hover: hover) {
-  .kol-btn-ghost:not(.kol-btn-animate):not(.kol-dd-trigger):hover {
-    background-color: var(--kol-oq-04);
-    color: var(--kol-surface-on-primary);
-  }
-}
-
-/* Navigation (2026-07-28, user-ordered) — chrome for links that move between
- * pages, not tool actions. The SQUARE comes from `.kol-btn-icon` above — one
- * height per size, 22/26/32/40, so mixed bars line up (this rule described a
- * padding-derived box, `sm 24 / md 30 / lg 36`, from before the square was
- * pinned; corrected 2026-09-03). Quiet states: rest dimmed, hover the
- * ghost wash, and ACTIVE keys off aria-current="page" (NavLink sets it
- * natively) — brighter glyph on a faint wash, never the pressed fill;
- * navigation is location, not a toggled tool. */
-.kol-btn-nav {
-  background: transparent;
-  color: var(--kol-oq-80);
-  border: 1px solid transparent;
-}
-@media (hover: hover) {
-  .kol-btn-nav:not(.kol-btn-animate):not(.kol-dd-trigger):hover {
-    background-color: var(--kol-oq-04);
-    color: var(--kol-surface-on-primary);
-  }
-}
-/* active = brightness only (0.11.7, user-ordered): quiet chrome states ride
- * the opacity ladder — a background block is pressed-tool language, not
- * location. Hover keeps its transient wash (feedback, not state). */
+/* nav's ACTIVE keys off aria-current="page" (NavLink sets it natively) —
+ * brightness only (0.11.7, user-ordered): quiet chrome states ride the
+ * opacity ladder; a background block is pressed-tool language, not location.
+ * Hover keeps its transient wash (feedback, not state). */
 .kol-btn-nav[aria-current="page"] {
   color: var(--kol-oq-88);
 }
-/* square box comes from .kol-btn-icon (geometry, all variants) — no
- * nav-specific padding rules needed */
-
-/* Grey (2026-07-15, user-ordered) — pill-subtle's visual weight as a real
- * Button variant on the opaque tier: rest oq-12, hover/active one stop past
- * each, same state math as the rest of the family. */
-.kol-btn-grey {
-  /* Ladder (user ruling 2026-08-15): 12 rest → 04 hover (darker) → 32 press,
-   * then eased back down. */
-  background: var(--kol-oq-12);
-  color: var(--kol-surface-on-primary);
-  border: 1px solid transparent;
-}
-@media (hover: hover) {
-  .kol-btn-grey:not(.kol-btn-animate):not(.kol-dd-trigger):hover {
-    background-color: var(--kol-oq-16);
-    color: var(--kol-surface-on-primary);
-  }
-}
-
-/* Destructive actions (2026-07-15, chess consumer audit finding 1: red was
- * being hacked onto normal buttons via className). Accent's shape on the
- * --ui-error state token — filled, opaque interaction stops, white label
- * (error red carries it in both themes). */
-.kol-btn-danger {
-  background: var(--ui-error);
-  color: var(--kol-color-ab-white);
-  border: 1px solid transparent;
-  font-weight: 500;
-}
-@media (hover: hover) {
-  .kol-btn-danger:not(.kol-btn-animate):not(.kol-dd-trigger):hover {
-    background-color: color-mix(in srgb, var(--ui-error) 80%, var(--kol-surface-primary));
-    color: var(--kol-color-ab-white);
-  }
-}
 
 /* xs — the panel rung (ControlsXsRung, 2026-09-01): 22px shell (20 + ring), xs radius */
 .kol-btn-xs { padding: 4px 8px; border-radius: var(--kol-radius-xs); }
@@ -423,13 +324,10 @@
  * on :hover — and that restatement was specificity (0,4,0) against the sunken
  * tone's (0,2,0), so hovering a SUNKEN trigger repainted it in the untoned
  * fill: a light box beside two icon controls that stayed dark. */
-.kol-btn-primary:not(.kol-btn-animate):not(:disabled):not(.kol-dd-trigger):active { background-color: var(--kol-oq-16); }
-.kol-btn-secondary:not(.kol-btn-animate):not(:disabled):not(.kol-dd-trigger):active { background-color: var(--kol-oq-inverse-48); color: var(--kol-surface-primary); }
-.kol-btn-accent:not(.kol-btn-animate):not(:disabled):not(.kol-dd-trigger):active { background-color: color-mix(in srgb, var(--kol-accent-primary) 70%, var(--kol-surface-primary)); }
-.kol-btn-outline:not(.kol-btn-animate):not(:disabled):not(.kol-dd-trigger):active,
-.kol-btn-ghost:not(.kol-btn-animate):not(:disabled):not(.kol-dd-trigger):active { background-color: var(--kol-oq-08); }
-.kol-btn-danger:not(.kol-btn-animate):not(:disabled):not(.kol-dd-trigger):active { background-color: color-mix(in srgb, var(--ui-error) 70%, var(--kol-surface-primary)); }
-.kol-btn-grey:not(.kol-btn-animate):not(:disabled):not(.kol-dd-trigger):active { background-color: var(--kol-oq-24); }
+.kol-btn:not(.kol-btn-animate):not(:disabled):not(.kol-dd-trigger):active {
+  background-color: var(--kol-tone-active-bg, var(--kol-oq-16));
+  background-image: var(--kol-tone-active-image, none);
+}
 
 .kol-btn:disabled,
 .kol-btn[disabled] {
@@ -1156,8 +1054,9 @@ a:hover .icon-hover,
  * lit-when-active idiom. Always composes with a variant class — the
  * variant supplies the border that suppresses UA button chrome. */
 .kol-btn-pressed {
-  background-color: var(--kol-surface-on-primary);
-  color: var(--kol-surface-primary);
+  background-color: var(--kol-tone-pressed-bg, var(--kol-surface-on-primary));
+  background-image: var(--kol-tone-pressed-image, none);
+  color: var(--kol-tone-pressed-fg, var(--kol-surface-primary));
 }
 
 /* ─────────────────────────────────────────────────────────────────────
@@ -1212,6 +1111,13 @@ a:hover .icon-hover,
   line-height: 0;
   border-radius: var(--kol-radius-sm);
   padding: 0;
+  /* paint from the TONE properties (kol-components-molecules.css, TONE); the
+   * variant classes are aliases of the tones, the fallback is `secondary` —
+   * the frame's default since it was promoted — and a toned wrapper reaches a
+   * frame with no variant of its own. No states, as ever. */
+  background-color: var(--kol-tone-bg, var(--kol-surface-on-primary));
+  color: var(--kol-tone-fg, var(--kol-surface-primary));
+  border: 1px solid var(--kol-tone-border, transparent);
 }
 
 /* An ACTIONABLE frame — `onClick`/`href` (user ruling 2026-08-01: *"you dont
@@ -1257,46 +1163,12 @@ a.kol-icon-frame {
 .kol-icon-frame-md { width: 32px; height: 32px; }
 .kol-icon-frame-lg { width: 40px; height: 40px; }
 
-.kol-icon-frame-primary {
-  background: var(--kol-surface-secondary);
-  color: var(--kol-surface-on-primary);
-  border: 1px solid transparent;
-}
-.kol-icon-frame-secondary {
-  background: var(--kol-surface-on-primary);
-  color: var(--kol-surface-primary);
-  border: 1px solid transparent;
-}
-.kol-icon-frame-accent {
-  background: var(--kol-accent-primary);
-  color: var(--kol-accent-on-primary);
-  border: 1px solid transparent;
-}
-.kol-icon-frame-outline {
-  background: transparent;
-  color: var(--kol-surface-on-primary);
-  border: 1px solid var(--kol-oq-08);
-}
-.kol-icon-frame-ghost {
-  background: transparent;
-  color: var(--kol-oq-48);
-  border: 1px solid transparent;
-}
-.kol-icon-frame-nav {
-  background: transparent;
-  /* full ink, not oq-64 (user re-rule 2026-08-09: header glyphs at 100%
-   * opacity — the dimmed row read as disabled beside the ThemeToggle). */
-  color: var(--kol-surface-on-primary);
-  border: 1px solid transparent;
-}
-/* plate — the ONE exception in 05-control-chrome.md § Icon box: an affordance
- * sitting on a PHOTO. It needs an opaque plate and a backdrop blur to stay
- * legible over arbitrary pixels, and no Button variant covers it. Values are
- * MediaCard's, which is the instance the doc names. */
+/* `.kol-icon-frame-{primary,secondary,accent,outline,ghost,nav,grey,danger}` — tone aliases, see TONE */
 .kol-icon-frame-plate {
   background: var(--kol-fg-ab-12, rgba(0, 0, 0, 0.4));
   backdrop-filter: blur(4px);
   color: var(--kol-surface-on-primary);
+  border: 0; /* not a tone — its own glass, no ring (as before the tone axis) */
 }
 
 .kol-icon-frame-grey {
@@ -1354,23 +1226,25 @@ a.kol-icon-frame {
 /* fill="none" — invisible container. FULL-STRENGTH INK (user ruling): the text
  * and icon drop NO opacity. `.kol-btn-nav` rested at oq-64 only so its hover
  * could brighten to full; with no states that dim was just a faded label. */
+/* geometry variants read the TONE (kol-components-molecules.css) and fall
+ * back to what each painted before the tone axis (2026-09-03) */
 .kol-theme-toggle-none {
-  background: transparent;
-  color: var(--kol-surface-on-primary);
-  border: 1px solid transparent;
+  background-color: var(--kol-tone-bg, transparent);
+  color: var(--kol-tone-fg, var(--kol-surface-on-primary));
+  border: 1px solid var(--kol-tone-border, transparent);
 }
 
 /* fill="subtle" — the filled rung */
 .kol-theme-toggle-subtle {
-  background: var(--kol-surface-secondary);
-  color: var(--kol-surface-on-primary);
-  border: 1px solid transparent;
+  background-color: var(--kol-tone-bg, var(--kol-surface-secondary));
+  color: var(--kol-tone-fg, var(--kol-surface-on-primary));
+  border: 1px solid var(--kol-tone-border, transparent);
 }
 
 /* flush — no pad, no radius, no fill, ever */
 .kol-theme-toggle-flush {
-  background: transparent;
-  color: var(--kol-surface-on-primary);
+  background-color: var(--kol-tone-bg, transparent);
+  color: var(--kol-tone-fg, var(--kol-surface-on-primary));
   border: 0;
   border-radius: 0;
   padding: 0;

package/kol-components-molecules.css

@@ -98,12 +98,8 @@
   transition: rotate var(--kol-transition-base);
 }
 .kol-dd-trigger[data-state="open"] .kol-dd-caret { rotate: 180deg; }
-/* grey — the opaque oq-12 fill, dropdown-only (never a kol-btn-* variant) */
-.kol-dd-trigger--grey {
-  background: var(--kol-oq-12);
-  color: var(--kol-surface-on-primary);
-  border: 1px solid transparent;
-}
+/* grey — `.kol-dd-trigger--grey` is an alias of the grey TONE now (see TONE,
+ * below); the trigger is `.kol-btn` and paints from the tone properties */
 /* open/panel fusion — the open trigger and its panel read as ONE piece:
  * trigger squares its bottom corners, panel squares its top, and the fill
  * continues (panel offset is -1 in Dropdown.jsx for the same reason). */
@@ -117,13 +113,13 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
-}
-.kol-dd-panel--primary { background: var(--kol-surface-secondary); }
-.kol-dd-panel--grey    { background: var(--kol-oq-12); }
-.kol-dd-panel--outline {
-  background: var(--kol-surface-primary);
-  border: 1px solid var(--kol-oq-08); /* matches the trigger's rest border */
-  border-top: none; /* the trigger's bottom edge is the divider (docs page) */
+  /* the FLOATING surface of the trigger's tone (TONE, below): primary / grey /
+   * sunken continue their fill, outline and ghost paint the page's ground —
+   * `--kol-tone-ground` — so opening changes nothing under the panel. The
+   * `--primary` / `--grey` / `--outline` classes are aliases of the tones. */
+  background-color: var(--kol-tone-panel-bg, var(--kol-tone-bg, var(--kol-surface-secondary)));
+  border: var(--kol-tone-panel-border-w, 0) solid var(--kol-tone-panel-border, transparent); /* outline: matches the trigger's rest border */
+  border-top: 0; /* the trigger's bottom edge is the divider (docs page) */
 }
 .kol-dd-div  { border-top: 1px solid var(--kol-fg-08); }
 /* A ROWS CEILING THE CONSUMER CAN REACH (same ticket): Popover's size
@@ -1487,66 +1483,289 @@
  * `surface-tertiary` is `#0e0e11` in dark (14.2, genuinely below the page) and
  * `#ffffff` in light, so it is theme-correct on both sides where a mix toward
  * a fixed near-white could only ever be right on one. */
-.kol-view-toggle.kol-tone-sunken, .kol-view-toggle.kol-tone-inverse { background-color: var(--kol-surface-sunken); }
-.kol-view-toggle.kol-tone-sunken > button[aria-pressed="true"], .kol-view-toggle.kol-tone-inverse > button[aria-pressed="true"] { background-color: var(--kol-fg-08); }
-.kol-view-toggle.kol-tone-sunken > button:not([aria-pressed="true"]):hover, .kol-view-toggle.kol-tone-inverse > button:not([aria-pressed="true"]):hover { background-color: var(--kol-fg-04); }
-.kol-control.kol-tone-sunken, .kol-control.kol-tone-inverse { background-color: var(--kol-surface-sunken); }
-.kol-expand.kol-tone-sunken, .kol-expand.kol-tone-inverse { background-color: var(--kol-surface-sunken); }
-/* the tone's fill, one selector — nothing left to cancel (2026-08-28) */
-.kol-dd-trigger.kol-tone-sunken, .kol-dd-trigger.kol-tone-inverse { background-color: var(--kol-surface-sunken); }
-/* THE PANEL IS OPAQUE (user 2026-08-28: "transparent doesn't work for
- * dropdown") — it floats over page content, and every `fg-*` stop is an alpha
- * wash that the content reads through. `oq-inverse-*`, the opaque tier, bakes
- * onto `surface-inverse` — the near-WHITE in dark theme — so even `oq-inverse-96`
- * lands ~23.5 against the #121215 page's 18: lighter than the page, the wrong
- * side of it. `surface-tertiary` is the flat twin of what the trigger renders:
- * #0e0e11 (14.0) in dark against the trigger's 14.2, #ffffff in light. */
-.kol-dd-panel.kol-tone-sunken, .kol-dd-panel.kol-tone-inverse { background-color: var(--kol-surface-sunken); }
-/* the rest of the set — Button (icon-only especially), IconFrame, ThemeToggle:
- * the well, transparent edge, fg-96 ink; hover the CONTRAST wash, pressed the
- * fg-08 chip — both LAYERED over the well (a gradient image over the fill),
- * since one background cannot stack two translucent colours.
+/* ═══════════════════════════════════════════════════════════════════════
+ * TONE — the ground axis (tone-is-the-ground-axis, kol-client-olina 2026-09-03).
  *
- * REST / HOVER / SELECTED ARE ONE LADDER, THREE RUNGS (2026-08-30):
+ * User, on fxr's /settings: "it would be best to not have to set every
+ * component but rather get a set with it already set" — and, reading Button's
+ * variants: "I thought you would set these colors as variants … that is 6
+ * tones right?". Until 0.134.0 `toneClass` returned a class for `sunken` and
+ * '' for everything else: `tone` had ONE value, and the real ground vocabulary
+ * — five of Button's eight variants — lived on Button alone, so Dropdown,
+ * `.kol-control` and `.kol-dd-panel` each re-invented it with paints that
+ * drifted (`primary` painting `surface-secondary`; the panel's outline
+ * hardcoding `surface-primary`, so a dropdown opened over any other ground
+ * changed the colour under it).
  *
- *   rest      the well          10.2 dark · 244.8 light
- *   hover     + fg-04           19.8      · 235.7
- *   selected  + fg-08           29.4      · 226.7
+ * SIX TONES, ONE MECHANISM. A tone is a bundle of `--kol-tone-*` custom
+ * properties — rest, hover, press, pressed, and what a FLOATING surface of
+ * that tone paints — and every control reads its paint from those properties
+ * with its own old literal as the fallback:
  *
- * `fg-*` already flips toward the ink, so it darkens a light well and lightens
- * a dark one with no help. Two things were wrong before: the wash was a
- * hardcoded WHITE, invisible over the light well (white on a 245 ground), and
- * when that was first fixed it went to an 8% wash — the same strength as
- * `selected`, which put hover 0.4 from selected in dark and 1.5 in light. A
- * hovered unselected control was indistinguishable from the selected one.
- * 04 and 08 are ~10 apart on both themes; the ladder reads.
+ *   .kol-btn / .kol-dd-trigger   fallback primary
+ *   .kol-control                 fallback filled (= primary)
+ *   .kol-icon-frame              fallback secondary
+ *   .kol-dd-panel                fallback primary
+ *   .kol-view-toggle well · .kol-expand--open · .kol-theme-toggle-*   their own
  *
- * ⛔ THE TRIGGER IS EXCLUDED. `.kol-dd-trigger` carries `.kol-btn`, so every
- * `.kol-btn.kol-tone-sunken` state rule matches it unless it says otherwise —
- * and "REST AND OPEN ARE THE ONLY STATES" for a Dropdown trigger is a law
- * written TWICE at the top of this file (2026-07-15, re-called 2026-08-09 and
- * 2026-08-28). The atoms sheet excludes the trigger from all eight variant
- * hovers; these tone rules did not, so the law held everywhere except the one
- * tone the settings page uses. Repeatedly reported and repeatedly missed,
- * because the exclusion was checked in `kol-components-atoms.css` and the
- * offending rule lives here. */
-.kol-btn.kol-tone-sunken,
-.kol-icon-frame.kol-tone-sunken,
-.kol-theme-toggle.kol-tone-sunken {
-  background-color: var(--kol-surface-sunken);
-  border-color: transparent;
-  color: var(--kol-fg-96);
-}
-@media (hover: hover) {
-  .kol-btn.kol-tone-sunken:not(.kol-btn-animate):not(:disabled):not(.kol-dd-trigger):hover {
-    background-color: var(--kol-surface-sunken);
-    background-image: linear-gradient(var(--kol-fg-04), var(--kol-fg-04));
-    color: var(--kol-fg-96);
-  }
-}
+ * Custom properties INHERIT, which is the whole point (ticket ask 3): one
+ * `.kol-tone-grey` on a wrapper tones every control inside it, because a
+ * control with no tone of its own reads the inherited values. A control that
+ * IS handed a variant or tone sets the properties on itself, and an element's
+ * own declaration beats inheritance — so the per-component prop stays the
+ * exception, exactly as asked. The ground variants (`primary` · `secondary` ·
+ * `outline` · `ghost` · `grey` on Button, `filled` / `outline` on the control
+ * shell, the panel and icon-frame variants) are ALIASES of the tones — the
+ * same bundle under `:where()`, specificity 0, so an explicit `tone` on the
+ * same element wins regardless of source order. `danger` and `accent` are
+ * semantic, not grounds: they stay variants and carry their own bundle. `nav`
+ * is ghost's chrome rung — the ink one step brighter, plus aria-current — and
+ * stays a variant (the ticket read it as ghost; the CSS says oq-80 against
+ * ghost's oq-48, so folding it would have dimmed every close button and rail
+ * row in the estate).
+ *
+ * THE FLOATING SURFACE PAINTS THE GROUND (ask 2). `--kol-tone-panel-bg` is
+ * what a dropdown panel of that tone paints: primary/grey/sunken continue
+ * their fill; outline and ghost paint `--kol-tone-ground` — the page's own
+ * background, `surface-primary` unless the page says otherwise — so opening
+ * a dropdown changes nothing under it. A page on another ground sets
+ * `--kol-tone-ground` once at its root. (The panel is PORTALLED, so Dropdown
+ * copies the trigger's resolved properties onto it on open — see Dropdown.jsx.)
+ *
+ * A bundle sets EVERY property, including the ones it leaves at default, so a
+ * control with its own tone inside a differently-toned wrapper inherits
+ * nothing from it — not even a hover gradient. (Weight is the variant's own,
+ * never the tone's: a ground does not re-weigh a label.)
+ *
+ * `default` is not a tone: it is the ABSENCE of one — inherit the wrapper's,
+ * else the family's fallback. (An alias of `primary` set on the element would
+ * block the inheritance that ask 3 exists for.) `inverse` stays sunken's alias.
+ *
+ * The rules live HERE, after every default they out-rank. Sunken's own
+ * history — the well, its three-rung ladder, why it was raised until
+ * 2026-08-30 — is the comment above; nothing about its values changed.
+ * ═══════════════════════════════════════════════════════════════════════ */
+.kol-tone-primary,
+:where(.kol-btn-primary, .kol-control--filled, .kol-icon-frame-primary, .kol-dd-panel--primary) {
+  --kol-tone-bg: var(--kol-surface-secondary);
+  --kol-tone-image: none;
+  --kol-tone-fg: var(--kol-surface-on-primary);
+  --kol-tone-border: transparent;
+  --kol-tone-hover-bg: var(--kol-oq-08);
+  --kol-tone-hover-image: none;
+  --kol-tone-hover-fg: var(--kol-surface-on-primary);
+  --kol-tone-hover-border: transparent;
+  --kol-tone-active-bg: var(--kol-oq-16);
+  --kol-tone-active-image: none;
+  --kol-tone-pressed-bg: var(--kol-surface-on-primary);
+  --kol-tone-pressed-image: none;
+  --kol-tone-pressed-fg: var(--kol-surface-primary);
+  --kol-tone-panel-bg: var(--kol-surface-secondary);
+  --kol-tone-panel-border-w: 0;
+  --kol-tone-panel-border: transparent;
+}
+.kol-tone-secondary,
+:where(.kol-btn-secondary, .kol-icon-frame-secondary, .kol-dd-panel--secondary) {
+  --kol-tone-bg: var(--kol-surface-on-primary);
+  --kol-tone-image: none;
+  --kol-tone-fg: var(--kol-surface-primary);
+  --kol-tone-border: transparent;
+  --kol-tone-hover-bg: var(--kol-oq-inverse-40);
+  --kol-tone-hover-image: none;
+  --kol-tone-hover-fg: var(--kol-surface-primary);
+  --kol-tone-hover-border: transparent;
+  --kol-tone-active-bg: var(--kol-oq-inverse-48);
+  --kol-tone-active-image: none;
+  --kol-tone-pressed-bg: var(--kol-surface-on-primary);
+  --kol-tone-pressed-image: none;
+  --kol-tone-pressed-fg: var(--kol-surface-primary);
+  --kol-tone-panel-bg: var(--kol-surface-on-primary);
+  --kol-tone-panel-border-w: 0;
+  --kol-tone-panel-border: transparent;
+}
+.kol-tone-outline,
+:where(.kol-btn-outline, .kol-control--outline, .kol-icon-frame-outline, .kol-dd-panel--outline) {
+  --kol-tone-bg: transparent;
+  --kol-tone-image: none;
+  --kol-tone-fg: var(--kol-surface-on-primary);
+  --kol-tone-border: var(--kol-oq-08);
+  --kol-tone-hover-bg: var(--kol-oq-02);
+  --kol-tone-hover-image: none;
+  --kol-tone-hover-fg: var(--kol-surface-on-primary);
+  --kol-tone-hover-border: color-mix(in srgb, var(--kol-surface-on-primary) 25%, var(--kol-surface-primary));
+  --kol-tone-active-bg: var(--kol-oq-08);
+  --kol-tone-active-image: none;
+  --kol-tone-pressed-bg: var(--kol-surface-on-primary);
+  --kol-tone-pressed-image: none;
+  --kol-tone-pressed-fg: var(--kol-surface-primary);
+  --kol-tone-panel-bg: var(--kol-tone-ground, var(--kol-surface-primary));
+  --kol-tone-panel-border-w: 1px;
+  --kol-tone-panel-border: var(--kol-oq-08);
+}
+.kol-tone-ghost,
+:where(.kol-btn-ghost, .kol-icon-frame-ghost, .kol-dd-panel--ghost) {
+  --kol-tone-bg: transparent;
+  --kol-tone-image: none;
+  --kol-tone-fg: var(--kol-oq-48);
+  --kol-tone-border: transparent;
+  --kol-tone-hover-bg: var(--kol-oq-04);
+  --kol-tone-hover-image: none;
+  --kol-tone-hover-fg: var(--kol-surface-on-primary);
+  --kol-tone-hover-border: transparent;
+  --kol-tone-active-bg: var(--kol-oq-08);
+  --kol-tone-active-image: none;
+  --kol-tone-pressed-bg: var(--kol-surface-on-primary);
+  --kol-tone-pressed-image: none;
+  --kol-tone-pressed-fg: var(--kol-surface-primary);
+  --kol-tone-panel-bg: var(--kol-tone-ground, var(--kol-surface-primary));
+  --kol-tone-panel-border-w: 0;
+  --kol-tone-panel-border: transparent;
+}
+.kol-tone-grey,
+:where(.kol-btn-grey, .kol-dd-trigger--grey, .kol-dd-panel--grey, .kol-icon-frame-grey) {
+  --kol-tone-bg: var(--kol-oq-12);
+  --kol-tone-image: none;
+  --kol-tone-fg: var(--kol-surface-on-primary);
+  --kol-tone-border: transparent;
+  --kol-tone-hover-bg: var(--kol-oq-16);
+  --kol-tone-hover-image: none;
+  --kol-tone-hover-fg: var(--kol-surface-on-primary);
+  --kol-tone-hover-border: transparent;
+  --kol-tone-active-bg: var(--kol-oq-24);
+  --kol-tone-active-image: none;
+  --kol-tone-pressed-bg: var(--kol-surface-on-primary);
+  --kol-tone-pressed-image: none;
+  --kol-tone-pressed-fg: var(--kol-surface-primary);
+  --kol-tone-panel-bg: var(--kol-oq-12);
+  --kol-tone-panel-border-w: 0;
+  --kol-tone-panel-border: transparent;
+}
+.kol-tone-sunken,
+.kol-tone-inverse {
+  --kol-tone-bg: var(--kol-surface-sunken);
+  --kol-tone-image: none;
+  --kol-tone-fg: var(--kol-fg-96);
+  --kol-tone-border: transparent;
+  --kol-tone-hover-bg: var(--kol-surface-sunken);
+  --kol-tone-hover-image: linear-gradient(var(--kol-fg-04), var(--kol-fg-04));
+  --kol-tone-hover-fg: var(--kol-fg-96);
+  --kol-tone-hover-border: transparent;
+  --kol-tone-active-bg: var(--kol-surface-sunken);
+  --kol-tone-active-image: linear-gradient(var(--kol-fg-08), var(--kol-fg-08));
+  --kol-tone-pressed-bg: var(--kol-surface-sunken);
+  --kol-tone-pressed-image: linear-gradient(var(--kol-fg-08), var(--kol-fg-08));
+  --kol-tone-pressed-fg: var(--kol-fg-96);
+  --kol-tone-panel-bg: var(--kol-surface-sunken);
+  --kol-tone-panel-border-w: 0;
+  --kol-tone-panel-border: transparent;
+}
+:where(.kol-btn-nav) {
+  --kol-tone-bg: transparent;
+  --kol-tone-image: none;
+  --kol-tone-fg: var(--kol-oq-80);
+  --kol-tone-border: transparent;
+  --kol-tone-hover-bg: var(--kol-oq-04);
+  --kol-tone-hover-image: none;
+  --kol-tone-hover-fg: var(--kol-surface-on-primary);
+  --kol-tone-hover-border: transparent;
+  --kol-tone-active-bg: var(--kol-oq-04);
+  --kol-tone-active-image: none;
+  --kol-tone-pressed-bg: var(--kol-surface-on-primary);
+  --kol-tone-pressed-image: none;
+  --kol-tone-pressed-fg: var(--kol-surface-primary);
+  --kol-tone-panel-bg: var(--kol-tone-ground, var(--kol-surface-primary));
+  --kol-tone-panel-border-w: 0;
+  --kol-tone-panel-border: transparent;
+}
+:where(.kol-icon-frame-nav) {
+  --kol-tone-bg: transparent;
+  --kol-tone-image: none;
+  --kol-tone-fg: var(--kol-surface-on-primary);
+  --kol-tone-border: transparent;
+  --kol-tone-hover-bg: transparent;
+  --kol-tone-hover-image: none;
+  --kol-tone-hover-fg: var(--kol-surface-on-primary);
+  --kol-tone-hover-border: transparent;
+  --kol-tone-active-bg: transparent;
+  --kol-tone-active-image: none;
+  --kol-tone-pressed-bg: var(--kol-surface-on-primary);
+  --kol-tone-pressed-image: none;
+  --kol-tone-pressed-fg: var(--kol-surface-primary);
+  --kol-tone-panel-bg: var(--kol-tone-ground, var(--kol-surface-primary));
+  --kol-tone-panel-border-w: 0;
+  --kol-tone-panel-border: transparent;
+}
+:where(.kol-control--plain) {
+  --kol-tone-bg: transparent;
+  --kol-tone-image: none;
+  --kol-tone-fg: var(--kol-fg-meta);
+  --kol-tone-border: transparent;
+  --kol-tone-hover-bg: transparent;
+  --kol-tone-hover-image: none;
+  --kol-tone-hover-fg: var(--kol-fg-meta);
+  --kol-tone-hover-border: transparent;
+  --kol-tone-active-bg: transparent;
+  --kol-tone-active-image: none;
+  --kol-tone-pressed-bg: var(--kol-surface-on-primary);
+  --kol-tone-pressed-image: none;
+  --kol-tone-pressed-fg: var(--kol-surface-primary);
+  --kol-tone-panel-bg: var(--kol-tone-ground, var(--kol-surface-primary));
+  --kol-tone-panel-border-w: 0;
+  --kol-tone-panel-border: transparent;
+}
+:where(.kol-btn-danger, .kol-icon-frame-danger) {
+  --kol-tone-bg: var(--ui-error);
+  --kol-tone-image: none;
+  --kol-tone-fg: var(--kol-color-ab-white);
+  --kol-tone-border: transparent;
+  --kol-tone-hover-bg: color-mix(in srgb, var(--ui-error) 80%, var(--kol-surface-primary));
+  --kol-tone-hover-image: none;
+  --kol-tone-hover-fg: var(--kol-color-ab-white);
+  --kol-tone-hover-border: transparent;
+  --kol-tone-active-bg: color-mix(in srgb, var(--ui-error) 70%, var(--kol-surface-primary));
+  --kol-tone-active-image: none;
+  --kol-tone-pressed-bg: var(--kol-surface-on-primary);
+  --kol-tone-pressed-image: none;
+  --kol-tone-pressed-fg: var(--kol-surface-primary);
+  --kol-tone-panel-bg: var(--ui-error);
+  --kol-tone-panel-border-w: 0;
+  --kol-tone-panel-border: transparent;
+}
+:where(.kol-btn-accent, .kol-icon-frame-accent) {
+  --kol-tone-bg: var(--kol-accent-primary);
+  --kol-tone-image: none;
+  --kol-tone-fg: var(--kol-accent-on-primary);
+  --kol-tone-border: transparent;
+  --kol-tone-hover-bg: var(--kol-accent-primary-strong);
+  --kol-tone-hover-image: none;
+  --kol-tone-hover-fg: var(--kol-accent-on-primary);
+  --kol-tone-hover-border: transparent;
+  --kol-tone-active-bg: color-mix(in srgb, var(--kol-accent-primary) 70%, var(--kol-surface-primary));
+  --kol-tone-active-image: none;
+  --kol-tone-pressed-bg: var(--kol-surface-on-primary);
+  --kol-tone-pressed-image: none;
+  --kol-tone-pressed-fg: var(--kol-surface-primary);
+  --kol-tone-panel-bg: var(--kol-accent-primary);
+  --kol-tone-panel-border-w: 0;
+  --kol-tone-panel-border: transparent;
+}
+
+/* ─── the families that keep their own plates ─── */
+.kol-view-toggle { background-color: var(--kol-tone-bg, var(--kol-surface-secondary)); }
+/* the sunken well's chip ladder (rest · +fg-04 hover · +fg-08 selected) — on the
+ * element, or inherited from a sunken wrapper */
+:is(.kol-view-toggle.kol-tone-sunken, .kol-view-toggle.kol-tone-inverse, .kol-tone-sunken .kol-view-toggle) > button[aria-pressed="true"] { background-color: var(--kol-fg-08); }
+:is(.kol-view-toggle.kol-tone-sunken, .kol-view-toggle.kol-tone-inverse, .kol-tone-sunken .kol-view-toggle) > button:not([aria-pressed="true"]):hover { background-color: var(--kol-fg-04); }
+/* the open search shell — was `bg-fg-04` on the element, sunken by class */
+.kol-expand--open { background-color: var(--kol-tone-bg, var(--kol-fg-04)); }
+/* ⛔ THE TRIGGER IS EXCLUDED — rest and open are its only states (law, twice
+ * at the top of this file). Pressed on a sunken button out-ranks its hover, as
+ * it always did: this is the one rule the generic `.kol-btn-pressed` cannot
+ * express, because hover carries three `:not()`s of specificity. */
 .kol-btn.kol-tone-sunken.kol-btn-pressed:not(.kol-dd-trigger),
-.kol-btn.kol-tone-sunken:not(:disabled):not(.kol-dd-trigger):active {
-  background-color: var(--kol-surface-sunken);
-  background-image: linear-gradient(var(--kol-fg-08), var(--kol-fg-08));
-  color: var(--kol-fg-96);
+.kol-tone-sunken .kol-btn.kol-btn-pressed:not(.kol-dd-trigger) {
+  background-color: var(--kol-tone-pressed-bg);
+  background-image: var(--kol-tone-pressed-image);
+  color: var(--kol-tone-pressed-fg);
 }
+

package/kol-design-tokens.css

@@ -173,3 +173,40 @@
     --kol-shadow-inner: inset 0 2px 4px rgba(255, 255, 255, 0.04);
   }
 }
+
+/* =============================================================================
+ * TAILWIND CONTRACT — the widths and the z ladder as CLASSES
+ *
+ * THE LAW REQUIRED A CLASS THAT DID NOT EXIST (kol-client-olina 2026-09-03, off
+ * the brand app's full-consumption pass). Two of the six consumption checks say
+ * reach these tokens by class — check 2 flags `var(--kol-*)` in JSX, check 5
+ * flags a raw `z-[…]` — and the theme registered neither namespace, so the only
+ * way to use a content width or a z rung from JSX was
+ * `max-w-[var(--kol-content-measure)]` / `z-[var(--kol-z-modal)]`, which trip
+ * those very checks. Every consumer was hand-binding the same nine lines in its
+ * own `@theme` to get out of it; the brand app had done exactly that.
+ *
+ * Worse than verbose: SILENT. A `z-modal` written against an unregistered
+ * namespace emits nothing at all, which is how that app's skip link shipped
+ * with no fill and no stacking for a month (layout-skip-link, same pass).
+ *
+ * Tailwind v4 namespaces: `--container-*` generates `max-w-*` / `w-*` /
+ * `min-w-*`; `--z-index-*` generates `z-*`. The `--kol-*` tokens stay the source
+ * — these alias them, so there is one value and two ways to spell it, not two
+ * values. ============================================================== */
+@theme {
+  --container-canvas:  var(--kol-content-canvas);
+  --container-shell:   var(--kol-content-shell);
+  --container-panel:   var(--kol-content-panel);
+  --container-column:  var(--kol-content-column);
+  --container-measure: var(--kol-content-measure);
+
+  --z-index-base:     var(--kol-z-base);
+  --z-index-dropdown: var(--kol-z-dropdown);
+  --z-index-sticky:   var(--kol-z-sticky);
+  --z-index-overlay:  var(--kol-z-overlay);
+  --z-index-modal:    var(--kol-z-modal);
+  --z-index-toast:    var(--kol-z-toast);
+  --z-index-tooltip:  var(--kol-z-tooltip);
+  --z-index-nav:      var(--kol-z-nav);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-theme",
-  "version": "0.132.1",
+  "version": "0.134.0",
   "description": "KOL (Kolkrabbi) design-system tokens + base CSS — brand-neutral. The canonical token/cascade layer every other KOL package and consumer builds on.",
   "license": "MIT",
   "type": "module",