@kolkrabbi/kol-theme 0.91.0 → 0.92.0

package/kol-components-molecules.css

@@ -1262,13 +1262,13 @@
  * ink `fg-96`. `.kol-tone-inverse` stays selected for any class
  * hand-stamped on the old name.
  * ───────────────────────────────────────────────────────────────────── */
-.kol-view-toggle.kol-tone-sunken, .kol-view-toggle.kol-tone-inverse { background-color: var(--kol-fg-inverse-96); }
+.kol-view-toggle.kol-tone-sunken, .kol-view-toggle.kol-tone-inverse { background-color: var(--kol-tone-sunken-bg); }
 .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: color-mix(in srgb, var(--kol-color-absolute-white) 8%, transparent); }
-.kol-control.kol-tone-sunken, .kol-control.kol-tone-inverse { background-color: var(--kol-fg-inverse-96); }
-.kol-expand.kol-tone-sunken, .kol-expand.kol-tone-inverse { background-color: var(--kol-fg-inverse-96); }
+.kol-control.kol-tone-sunken, .kol-control.kol-tone-inverse { background-color: var(--kol-tone-sunken-bg); }
+.kol-expand.kol-tone-sunken, .kol-expand.kol-tone-inverse { background-color: var(--kol-tone-sunken-bg); }
 /* 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-fg-inverse-96); }
+.kol-dd-trigger.kol-tone-sunken, .kol-dd-trigger.kol-tone-inverse { background-color: var(--kol-tone-sunken-bg); }
 /* 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
@@ -1276,7 +1276,7 @@
  * 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-tertiary); }
+.kol-dd-panel.kol-tone-sunken, .kol-dd-panel.kol-tone-inverse { background-color: var(--kol-tone-sunken-bg); }
 /* the rest of the set — Button (icon-only especially), IconFrame, ThemeToggle:
  * the well, transparent edge, fg-96 ink; hover the white wash, pressed the
  * fg-08 chip — both LAYERED over the well (a gradient image over the fill),
@@ -1284,20 +1284,20 @@
 .kol-btn.kol-tone-sunken,
 .kol-icon-frame.kol-tone-sunken,
 .kol-theme-toggle.kol-tone-sunken {
-  background-color: var(--kol-fg-inverse-96);
+  background-color: var(--kol-tone-sunken-bg);
   border-color: transparent;
   color: var(--kol-fg-96);
 }
 @media (hover: hover) {
   .kol-btn.kol-tone-sunken:not(.kol-btn-animate):not(:disabled):hover {
-    background-color: var(--kol-fg-inverse-96);
+    background-color: var(--kol-tone-sunken-bg);
     background-image: linear-gradient(color-mix(in srgb, var(--kol-color-absolute-white) 8%, transparent), color-mix(in srgb, var(--kol-color-absolute-white) 8%, transparent));
     color: var(--kol-fg-96);
   }
 }
 .kol-btn.kol-tone-sunken.kol-btn-pressed,
 .kol-btn.kol-tone-sunken:not(:disabled):active {
-  background-color: var(--kol-fg-inverse-96);
+  background-color: var(--kol-tone-sunken-bg);
   background-image: linear-gradient(var(--kol-fg-08), var(--kol-fg-08));
   color: var(--kol-fg-96);
 }

package/kol-design-tokens.css

@@ -74,6 +74,19 @@
    * first fifth of the duration and the rest on a settle you cannot see — so
    * every motion read as instant no matter what duration it was given, and a
    * small hover affordance never showed its move at all. */
+  /* THE SUNKEN PLATE (ControlToneSunken, user ruling 2026-08-28) — the one fill
+   * every `tone="sunken"` control paints: ViewToggle's well, Input, SearchInput,
+   * the Dropdown trigger AND its panel, Button, IconFrame, ThemeToggle.
+   *
+   * OPAQUE and theme-invariant, and both halves are the ruling: "opaque so it
+   * doesn't bleed". A translucent well renders whatever is under it, which is
+   * how this went wrong twice in a day — `fg-absolute-24` and `fg-inverse-96`
+   * are washes, and the second one also follows the theme stamp, so an app
+   * painting a dark page without stamping `data-theme` got a near-white control
+   * row. Sunken means BELOW the plane; a plate that changes with the plane
+   * cannot say that. Ship one colour and let it be the same everywhere. */
+  --kol-tone-sunken-bg: color-mix(in srgb, var(--kol-color-absolute-white) 11%, var(--kol-color-absolute-black));
+
   --kol-ease-house: cubic-bezier(0.4, 0, 0.2, 1);
   /* the bounce — overshoots past its target and settles back (y > 1 is what
    * makes it bounce; house only decelerates). For a press that should feel

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-theme",
-  "version": "0.91.0",
+  "version": "0.92.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",