@kolkrabbi/kol-theme 0.84.0 → 0.86.0

package/kol-components-molecules.css

@@ -1219,23 +1219,37 @@
  * so a consumer never restates them (brand hand-wrote the fill and GUESSED
  * the ink for its two icon buttons — that fork is what widening the set ends).
  *
- * THE SET: well `fg-absolute-24` (theme-invariant black, darkens either
- * theme) · active chip `fg-08` (user ruling 2026-08-28, down from the 0.78.1
- * fg-16) · inactive hover absolute-white @ 8% (a dark well wants a LIGHTER
- * hover) · ink `fg-96`. `.kol-tone-inverse` stays selected for any class
+ * THE SET: well `fg-inverse-96` (user ruling 2026-08-28, swapped from
+ * `fg-absolute-24` — measured on the dark theme, where the inverse tier is the
+ * one that DARKENS: on the #121215 page inverse-96 lands ~14.2 against
+ * absolute-24's 13.7, half a level apart. Unlike absolute it follows the
+ * theme, so the light-theme well flips to the near-white inverse anchor) ·
+ * active chip `fg-08` (user ruling 2026-08-28, down from the 0.78.1 fg-16) ·
+ * inactive hover absolute-white @ 8% (a dark well wants a LIGHTER hover) ·
+ * 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-absolute-24); }
+.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 > 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-absolute-24); }
-.kol-expand.kol-tone-sunken, .kol-expand.kol-tone-inverse { background-color: var(--kol-fg-absolute-24); }
-/* the trigger: rest and open are its only states — the pin-back rules above
- * paint surface-secondary on hover/active, so the tone pins its own chip */
+.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); }
+/* NO HOVER STATE ON THE DROPDOWN (user ruling 2026-08-28). Rest and open are
+ * its only states — and the three selectors are what ENFORCE that: the base
+ * `.kol-dd-trigger:hover/:active` rules paint surface-secondary, so the tone
+ * re-states its own fill on all three and nothing moves. Deleting them gives
+ * the hover back. */
 .kol-dd-trigger.kol-tone-sunken, .kol-dd-trigger.kol-tone-inverse,
 .kol-dd-trigger.kol-tone-sunken:not(:disabled):hover, .kol-dd-trigger.kol-tone-inverse:not(:disabled):hover,
-.kol-dd-trigger.kol-tone-sunken:not(:disabled):active, .kol-dd-trigger.kol-tone-inverse:not(:disabled):active { background-color: var(--kol-fg-absolute-24); }
-.kol-dd-panel.kol-tone-sunken, .kol-dd-panel.kol-tone-inverse { background-color: var(--kol-fg-absolute-24); }
+.kol-dd-trigger.kol-tone-sunken:not(:disabled):active, .kol-dd-trigger.kol-tone-inverse:not(:disabled):active { background-color: var(--kol-fg-inverse-96); }
+/* 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
+ * onto `surface-inverse` — the near-WHITE in dark theme — so even `oq-inverse-96`
+ * 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); }
 /* 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),
@@ -1243,20 +1257,20 @@
 .kol-btn.kol-tone-sunken,
 .kol-icon-frame.kol-tone-sunken,
 .kol-theme-toggle.kol-tone-sunken {
-  background-color: var(--kol-fg-absolute-24);
+  background-color: var(--kol-fg-inverse-96);
   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-absolute-24);
+    background-color: var(--kol-fg-inverse-96);
     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-absolute-24);
+  background-color: var(--kol-fg-inverse-96);
   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.84.0",
+  "version": "0.86.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",