@kolkrabbi/kol-theme 0.109.0 → 0.111.0

package/kol-base-tokens.css

@@ -74,7 +74,19 @@
    * 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);
+  /* ASYMMETRIC BY RULING (user 2026-08-30: pure white in light, the 96 rung in
+   * dark — *"I really only wanted that extreme for light"*).
+   *
+   * LIGHT takes the pole, `oq-ab-100` = #ffffff. A page wash moves 250 → 245,
+   * and at the old 96 rung the well was ALSO 245 — the collision this closes.
+   * At the pole the gap is 10 and no wash rung can reach it.
+   * DARK stays at `oq-ab-96` = 10 under an 18 page. Pure #000 was a 23-level
+   * step and too deep; dark never had the collision anyway, because its wash is
+   * a white film that moves the page AWAY from the well.
+   *
+   * Two declarations, not one. The single-token version was my elegance, not a
+   * requirement — the two themes want different depths and that is allowed. */
+  --kol-surface-sunken: var(--kol-oq-ab-100);
 
   --kol-surface-inverse: #0e0e11;
   --kol-surface-on-inverse: #fcfbf8;
@@ -102,6 +114,8 @@
   --kol-surface-on-secondary: #f8f8f8;
 
   --kol-surface-tertiary: #0e0e11;
+  /* the well is the 96 rung in dark, not the pole — see the light block */
+  --kol-surface-sunken: var(--kol-oq-ab-96);
   --kol-surface-on-tertiary: #ffffff;
 
 
@@ -148,6 +162,8 @@
     --kol-surface-on-secondary: #f8f8f8;
 
     --kol-surface-tertiary: #0e0e11;
+    /* the well is the 96 rung in dark, not the pole — see the light block */
+    --kol-surface-sunken: var(--kol-oq-ab-96);
     --kol-surface-on-tertiary: #ffffff;
 
 

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.109.0",
+  "version": "0.111.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",