@kolkrabbi/kol-theme 0.100.0 → 0.102.0

package/kol-base-tokens.css

@@ -38,6 +38,24 @@
   --kol-surface-tertiary: #ffffff;
   --kol-surface-on-tertiary: #0e0e11;
 
+  /* THE SUNKEN WELL — a step DOWN from the page, in BOTH themes (measured on
+   * kol-fxr's /settings, 2026-08-30). The `sunken` tone had no token of its own
+   * and borrowed `--kol-oq-inverse-96`, which is a step down in light (242 on a
+   * 250 page) and a step UP in dark (24 on an 18 page). Swapping it to
+   * `surface-tertiary` only mirrors the fault: 14 on 18 in dark, but 255 on 250
+   * in light. The two are exact opposites, so no existing token is sunken on
+   * both sides — which is why "everything should be sunken" kept coming back
+   * looking wrong on one theme however it was patched.
+   * BUILT ON THE `ab` LADDER, not on literals (user, 2026-08-30: *"oq-inverse-96
+   * is the wrong sunken token … its pair should have been oq-ab-inverse-96 …
+   * that's based on primary or some dark that's not 000000"*). The `ab` tier is
+   * ABSOLUTE — pure #000/#fff — so `oq-ab-96` is 10 and `oq-ab-inverse-96` is
+   * 245 in BOTH themes and neither can be the well on its own. What flips is
+   * which one the well points at, and that is this token's entire job.
+   * Light: `oq-ab-inverse-96` (245, under the 250 page)
+   * Dark:  `oq-ab-96` (10, under the 18 page) */
+  --kol-surface-sunken: var(--kol-oq-ab-inverse-96);
+
   --kol-surface-inverse: #0e0e11;
   --kol-surface-on-inverse: #fcfbf8;
 
@@ -66,6 +84,9 @@
   --kol-surface-tertiary: #0e0e11;
   --kol-surface-on-tertiary: #ffffff;
 
+  /* the sunken well, dark side — `oq-ab-96` (10) under the #121215 page (18) */
+  --kol-surface-sunken: var(--kol-oq-ab-96);
+
   --kol-surface-inverse: #fcfbf8;
   --kol-surface-on-inverse: #0e0e11;
 
@@ -111,6 +132,11 @@
     --kol-surface-tertiary: #0e0e11;
     --kol-surface-on-tertiary: #ffffff;
 
+    /* the sunken well, system-dark — this block is the one a user who never
+     * touched the toggle gets, and it is the one the first pass of this fix
+     * forgot: the `:root` light value would have leaked into system dark. */
+    --kol-surface-sunken: var(--kol-oq-ab-96);
+
     --kol-surface-inverse: #fcfbf8;
     --kol-surface-on-inverse: #0e0e11;
 

package/kol-components-molecules.css

@@ -1324,13 +1324,30 @@
  * 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-oq-inverse-96); }
+/* THE SUNKEN TONE IS `surface-tertiary`, NOT `oq-inverse-96` (measured on
+ * kol-fxr's /settings, 2026-08-30). The whole set read `--kol-oq-inverse-96`,
+ * which is `color-mix(#0e0e11 96%, #fcfbf8)` — four percent of near-WHITE mixed
+ * in. On the dark theme that lands at luminance **23.7 against an 18.2 page**:
+ * a tone named "sunken" was rendering RAISED, and every control wearing it
+ * (dropdown trigger, view toggle, icon frames, theme toggle) sat as its own
+ * pale box on the page. That is the "multiple backgrounds" the user has
+ * reported repeatedly and I have not fixed.
+ *
+ * The diagnosis was already written into this file, twenty lines down, in the
+ * comment above `.kol-dd-panel` — it works out the 23.5-vs-18 arithmetic and
+ * names `surface-tertiary` as the answer. It was never applied to the rules
+ * beneath it. Written down is not fixed.
+ *
+ * `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: color-mix(in srgb, var(--kol-color-ab-white) 8%, transparent); }
-.kol-control.kol-tone-sunken, .kol-control.kol-tone-inverse { background-color: var(--kol-oq-inverse-96); }
-.kol-expand.kol-tone-sunken, .kol-expand.kol-tone-inverse { background-color: var(--kol-oq-inverse-96); }
+.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-oq-inverse-96); }
+.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
@@ -1338,7 +1355,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-oq-inverse-96); }
+.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 white wash, pressed the
  * fg-08 chip — both LAYERED over the well (a gradient image over the fill),
@@ -1346,20 +1363,20 @@
 .kol-btn.kol-tone-sunken,
 .kol-icon-frame.kol-tone-sunken,
 .kol-theme-toggle.kol-tone-sunken {
-  background-color: var(--kol-oq-inverse-96);
+  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):hover {
-    background-color: var(--kol-oq-inverse-96);
+    background-color: var(--kol-surface-sunken);
     background-image: linear-gradient(color-mix(in srgb, var(--kol-color-ab-white) 8%, transparent), color-mix(in srgb, var(--kol-color-ab-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-oq-inverse-96);
+  background-color: var(--kol-surface-sunken);
   background-image: linear-gradient(var(--kol-fg-08), var(--kol-fg-08));
   color: var(--kol-fg-96);
 }

package/package.json

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