@kolkrabbi/kol-theme 0.108.0 → 0.110.0

package/kol-base-tokens.css

@@ -74,7 +74,12 @@
    * flips toward the ground, `oq-ab-96` IS the well everywhere — 245 under a
    * 250 page in light, 10 under an 18 page in dark. The per-theme alias this
    * replaced was the tell that the ladder underneath was wrong. */
-  --kol-surface-sunken: var(--kol-oq-ab-96);
+  /* THE POLE ITSELF (user 2026-08-30: *"in light mode we could fix the sunken
+   * to use fff? fully white?"*). `100` is the ab ladder's endpoint — the ground
+   * pole, no mix — so the well is pure #ffffff in light and pure #000000 in
+   * dark, and it is still ONE token because `ab` flips toward the ground.
+   * A washed page cannot close this gap the way it closed the 96 rung. */
+  --kol-surface-sunken: var(--kol-oq-ab-100);
 
   --kol-surface-inverse: #0e0e11;
   --kol-surface-on-inverse: #fcfbf8;

package/kol-components-molecules.css

@@ -1324,20 +1324,14 @@
  * ink `fg-96`. `.kol-tone-inverse` stays selected for any class
  * hand-stamped on the old name.
  * ───────────────────────────────────────────────────────────────────── */
-/* THE WELL TAKES THE PAGE'S WASH TOO (SunkenWellEatenByPageWash, kol-fxr
- * 2026-08-30). `--kol-surface-sunken` is derived from `surface-primary`, but
- * `AppShell`'s `pageWash` paints a film ON TOP of that page — and the control's
- * opaque fill does not receive it. At the ruled `fg-02` rung the light page
- * lands 250 × 0.98 + 18 × 0.02 = 245, which is EXACTLY the well: measured delta
- * [0,0,0], four controls rendering as bare text with no pill.
- *
- * Deepening the well would have worked by luck and broken on the next rung
- * change. Instead every sunken surface paints the same film the page does, so
- * the five levels hold by construction whatever `pageWash` is set to. The
- * property is unset outside an AppShell and falls back to `transparent`.
- *
- * State washes stack ON TOP of it — `linear-gradient(state), linear-gradient(wash)`
- * — because one background-color cannot carry two translucent layers.
+/* ⚠️ `SunkenWellEatenByPageWash` IS NOT SOLVED HERE — see the ticket.
+ * On 2026-08-30 these rules briefly painted `--kol-shell-page-wash` as a
+ * background layer so the well would track a washed page. That was the wrong
+ * layer (user: *"we are talking about components, wash affects background"*):
+ * a control has no business reproducing a page-level film, and portalling
+ * proved it — `.kol-dd-panel` renders at document.body, could not inherit the
+ * property, and drew a different colour from its own trigger. Reverted.
+ * The collision is a PAGE/token question and belongs there.
  *
  * 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`,
@@ -1356,13 +1350,13 @@
  * `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); background-image: linear-gradient(var(--kol-shell-page-wash, transparent), var(--kol-shell-page-wash, transparent)); }
+.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); background-image: linear-gradient(var(--kol-shell-page-wash, transparent), var(--kol-shell-page-wash, transparent)); }
-.kol-expand.kol-tone-sunken, .kol-expand.kol-tone-inverse { background-color: var(--kol-surface-sunken); background-image: linear-gradient(var(--kol-shell-page-wash, transparent), var(--kol-shell-page-wash, transparent)); }
+.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); background-image: linear-gradient(var(--kol-shell-page-wash, transparent), var(--kol-shell-page-wash, transparent)); }
+.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
@@ -1370,7 +1364,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-sunken); background-image: linear-gradient(var(--kol-shell-page-wash, transparent), var(--kol-shell-page-wash, transparent)); }
+.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),
@@ -1403,20 +1397,19 @@
 .kol-icon-frame.kol-tone-sunken,
 .kol-theme-toggle.kol-tone-sunken {
   background-color: var(--kol-surface-sunken);
-  background-image: linear-gradient(var(--kol-shell-page-wash, transparent), var(--kol-shell-page-wash, transparent));
   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)), linear-gradient(var(--kol-shell-page-wash, transparent), var(--kol-shell-page-wash, transparent));
+    background-image: linear-gradient(var(--kol-fg-04), var(--kol-fg-04));
     color: var(--kol-fg-96);
   }
 }
 .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)), linear-gradient(var(--kol-shell-page-wash, transparent), var(--kol-shell-page-wash, transparent));
+  background-image: linear-gradient(var(--kol-fg-08), var(--kol-fg-08));
   color: var(--kol-fg-96);
 }

package/kol-opaque.css

@@ -259,6 +259,7 @@
   --kol-oq-ab-80: color-mix(in srgb, var(--kol-color-ab-white) 80%, var(--kol-color-ab-black));
   --kol-oq-ab-88: color-mix(in srgb, var(--kol-color-ab-white) 88%, var(--kol-color-ab-black));
   --kol-oq-ab-96: color-mix(in srgb, var(--kol-color-ab-white) 96%, var(--kol-color-ab-black));
+  --kol-oq-ab-100: var(--kol-color-ab-white);
 
   --kol-oq-ab-inverse-01: color-mix(in srgb, var(--kol-color-ab-black) 1%, var(--kol-color-ab-white));
   --kol-oq-ab-inverse-02: color-mix(in srgb, var(--kol-color-ab-black) 2%, var(--kol-color-ab-white));
@@ -275,6 +276,7 @@
   --kol-oq-ab-inverse-80: color-mix(in srgb, var(--kol-color-ab-black) 80%, var(--kol-color-ab-white));
   --kol-oq-ab-inverse-88: color-mix(in srgb, var(--kol-color-ab-black) 88%, var(--kol-color-ab-white));
   --kol-oq-ab-inverse-96: color-mix(in srgb, var(--kol-color-ab-black) 96%, var(--kol-color-ab-white));
+  --kol-oq-ab-inverse-100: var(--kol-color-ab-black);
 }
 
 /* DARK — the ground is black, so `ab` starts from black */
@@ -294,6 +296,7 @@
   --kol-oq-ab-80: color-mix(in srgb, var(--kol-color-ab-black) 80%, var(--kol-color-ab-white));
   --kol-oq-ab-88: color-mix(in srgb, var(--kol-color-ab-black) 88%, var(--kol-color-ab-white));
   --kol-oq-ab-96: color-mix(in srgb, var(--kol-color-ab-black) 96%, var(--kol-color-ab-white));
+  --kol-oq-ab-100: var(--kol-color-ab-black);
 
   --kol-oq-ab-inverse-01: color-mix(in srgb, var(--kol-color-ab-white) 1%, var(--kol-color-ab-black));
   --kol-oq-ab-inverse-02: color-mix(in srgb, var(--kol-color-ab-white) 2%, var(--kol-color-ab-black));
@@ -310,6 +313,7 @@
   --kol-oq-ab-inverse-80: color-mix(in srgb, var(--kol-color-ab-white) 80%, var(--kol-color-ab-black));
   --kol-oq-ab-inverse-88: color-mix(in srgb, var(--kol-color-ab-white) 88%, var(--kol-color-ab-black));
   --kol-oq-ab-inverse-96: color-mix(in srgb, var(--kol-color-ab-white) 96%, var(--kol-color-ab-black));
+  --kol-oq-ab-inverse-100: var(--kol-color-ab-white);
 }
 
 /* system-follow: the block a user who never touched the toggle gets */
@@ -330,6 +334,7 @@
       --kol-oq-ab-80: color-mix(in srgb, var(--kol-color-ab-black) 80%, var(--kol-color-ab-white));
       --kol-oq-ab-88: color-mix(in srgb, var(--kol-color-ab-black) 88%, var(--kol-color-ab-white));
       --kol-oq-ab-96: color-mix(in srgb, var(--kol-color-ab-black) 96%, var(--kol-color-ab-white));
+  --kol-oq-ab-100: var(--kol-color-ab-black);
   
       --kol-oq-ab-inverse-01: color-mix(in srgb, var(--kol-color-ab-white) 1%, var(--kol-color-ab-black));
       --kol-oq-ab-inverse-02: color-mix(in srgb, var(--kol-color-ab-white) 2%, var(--kol-color-ab-black));
@@ -346,6 +351,7 @@
       --kol-oq-ab-inverse-80: color-mix(in srgb, var(--kol-color-ab-white) 80%, var(--kol-color-ab-black));
       --kol-oq-ab-inverse-88: color-mix(in srgb, var(--kol-color-ab-white) 88%, var(--kol-color-ab-black));
       --kol-oq-ab-inverse-96: color-mix(in srgb, var(--kol-color-ab-white) 96%, var(--kol-color-ab-black));
+  --kol-oq-ab-inverse-100: var(--kol-color-ab-white);
   }
 }
 /* CLASSES — absolute tiers */
@@ -364,6 +370,7 @@
 .bg-oq-ab-80 { background-color: var(--kol-oq-ab-80); }
 .bg-oq-ab-88 { background-color: var(--kol-oq-ab-88); }
 .bg-oq-ab-96 { background-color: var(--kol-oq-ab-96); }
+.bg-oq-ab-100 { background-color: var(--kol-oq-ab-100); }
 
 .bg-oq-ab-inverse-01 { background-color: var(--kol-oq-ab-inverse-01); }
 .bg-oq-ab-inverse-02 { background-color: var(--kol-oq-ab-inverse-02); }

package/package.json

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