@kolkrabbi/kol-theme 0.104.0 → 0.106.0

package/kol-components-molecules.css

@@ -1343,7 +1343,7 @@
  * 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-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) */
@@ -1357,9 +1357,23 @@
  * #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 white wash, pressed the
+ * 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 */
+ * since one background cannot stack two translucent colours.
+ *
+ * REST / HOVER / SELECTED ARE ONE LADDER, THREE RUNGS (2026-08-30):
+ *
+ *   rest      the well          10.2 dark · 244.8 light
+ *   hover     + fg-04           19.8      · 235.7
+ *   selected  + fg-08           29.4      · 226.7
+ *
+ * `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-tone-sunken,
 .kol-icon-frame.kol-tone-sunken,
 .kol-theme-toggle.kol-tone-sunken {
@@ -1370,7 +1384,7 @@
 @media (hover: hover) {
   .kol-btn.kol-tone-sunken:not(.kol-btn-animate):not(:disabled):hover {
     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));
+    background-image: linear-gradient(var(--kol-fg-04), var(--kol-fg-04));
     color: var(--kol-fg-96);
   }
 }

package/kol-opacity.css

@@ -85,6 +85,25 @@
   --kol-fg-ab-88: color-mix(in srgb, var(--kol-color-ab-white) 88%, transparent);
   --kol-fg-ab-96: color-mix(in srgb, var(--kol-color-ab-white) 96%, transparent);
 
+  /* fg-ab-inverse — the CONTRASTING pure pole. Declared in this shared scope
+   * as the light-ground value (black over a light well); the dark scopes below
+   * override it to white. Its `fg-ab` twin above works the same way. */
+  --kol-fg-ab-inverse-01: color-mix(in srgb, var(--kol-color-ab-black) 1%, transparent);
+  --kol-fg-ab-inverse-02: color-mix(in srgb, var(--kol-color-ab-black) 2%, transparent);
+  --kol-fg-ab-inverse-04: color-mix(in srgb, var(--kol-color-ab-black) 4%, transparent);
+  --kol-fg-ab-inverse-08: color-mix(in srgb, var(--kol-color-ab-black) 8%, transparent);
+  --kol-fg-ab-inverse-12: color-mix(in srgb, var(--kol-color-ab-black) 12%, transparent);
+  --kol-fg-ab-inverse-16: color-mix(in srgb, var(--kol-color-ab-black) 16%, transparent);
+  --kol-fg-ab-inverse-24: color-mix(in srgb, var(--kol-color-ab-black) 24%, transparent);
+  --kol-fg-ab-inverse-32: color-mix(in srgb, var(--kol-color-ab-black) 32%, transparent);
+  --kol-fg-ab-inverse-40: color-mix(in srgb, var(--kol-color-ab-black) 40%, transparent);
+  --kol-fg-ab-inverse-48: color-mix(in srgb, var(--kol-color-ab-black) 48%, transparent);
+  --kol-fg-ab-inverse-64: color-mix(in srgb, var(--kol-color-ab-black) 64%, transparent);
+  --kol-fg-ab-inverse-72: color-mix(in srgb, var(--kol-color-ab-black) 72%, transparent);
+  --kol-fg-ab-inverse-80: color-mix(in srgb, var(--kol-color-ab-black) 80%, transparent);
+  --kol-fg-ab-inverse-88: color-mix(in srgb, var(--kol-color-ab-black) 88%, transparent);
+  --kol-fg-ab-inverse-96: color-mix(in srgb, var(--kol-color-ab-black) 96%, transparent);
+
   /* ============================================================================
    * TOKENS — Inverse tier (foreground on inverse surface)
    * ============================================================================ */
@@ -574,22 +593,6 @@
   --kol-fg-absolute-inverse-80: color-mix(in srgb, var(--kol-color-white) 80%, transparent);
   --kol-fg-absolute-inverse-88: color-mix(in srgb, var(--kol-color-white) 88%, transparent);
   --kol-fg-absolute-inverse-96: color-mix(in srgb, var(--kol-color-white) 96%, transparent);
-  /* fg-ab-inverse — LIGHT ground: the opposite pole is black */
-  --kol-fg-ab-inverse-01: color-mix(in srgb, var(--kol-color-ab-black) 1%, transparent);
-  --kol-fg-ab-inverse-02: color-mix(in srgb, var(--kol-color-ab-black) 2%, transparent);
-  --kol-fg-ab-inverse-04: color-mix(in srgb, var(--kol-color-ab-black) 4%, transparent);
-  --kol-fg-ab-inverse-08: color-mix(in srgb, var(--kol-color-ab-black) 8%, transparent);
-  --kol-fg-ab-inverse-12: color-mix(in srgb, var(--kol-color-ab-black) 12%, transparent);
-  --kol-fg-ab-inverse-16: color-mix(in srgb, var(--kol-color-ab-black) 16%, transparent);
-  --kol-fg-ab-inverse-24: color-mix(in srgb, var(--kol-color-ab-black) 24%, transparent);
-  --kol-fg-ab-inverse-32: color-mix(in srgb, var(--kol-color-ab-black) 32%, transparent);
-  --kol-fg-ab-inverse-40: color-mix(in srgb, var(--kol-color-ab-black) 40%, transparent);
-  --kol-fg-ab-inverse-48: color-mix(in srgb, var(--kol-color-ab-black) 48%, transparent);
-  --kol-fg-ab-inverse-64: color-mix(in srgb, var(--kol-color-ab-black) 64%, transparent);
-  --kol-fg-ab-inverse-72: color-mix(in srgb, var(--kol-color-ab-black) 72%, transparent);
-  --kol-fg-ab-inverse-80: color-mix(in srgb, var(--kol-color-ab-black) 80%, transparent);
-  --kol-fg-ab-inverse-88: color-mix(in srgb, var(--kol-color-ab-black) 88%, transparent);
-  --kol-fg-ab-inverse-96: color-mix(in srgb, var(--kol-color-ab-black) 96%, transparent);
   --kol-color-absolute-black: var(--kol-color-black);
   --kol-color-absolute-white: var(--kol-color-white);
 }

package/package.json

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