@kolkrabbi/kol-theme 0.80.0 → 0.82.0

package/kol-components-molecules.css

@@ -1253,6 +1253,19 @@
 .kol-playback-scrub::-moz-range-track { height: 2px; border-radius: 1px; background: color-mix(in srgb, var(--kol-color-absolute-white) 40%, transparent); }
 .kol-playback-scrub::-moz-range-thumb { width: 4px; height: 28px; border: 0; border-radius: 2px; background: var(--kol-color-absolute-white); }
 
+/* ColumnBrowser rows — ONE SELECTED STATE (ColumnBrowserSeams, kol-r2b2
+ * 2026-08-28; user: "ONLY one selected state can exist, not TWO"). The row's
+ * fill lives here, keyed on its state classes, not on a `bg-fg-04` utility a
+ * consumer had to hang rules off. Hover and the keyboard cursor are the fill;
+ * a selected row is the TRAIL at half strength unless its column is the
+ * deepest one holding a selection — then it is the selection, full strength.
+ * `:has(~ …)` says what a positional selector cannot: "no later column has a
+ * selected row". */
+.kol-column-browser-row:hover,
+.kol-column-browser-row.is-cursor { background-color: var(--kol-fg-04); }
+.kol-column-browser-row.is-selected { background-color: var(--kol-fg-02); }
+.kol-column-browser-column:not(:has(~ .kol-column-browser-column .is-selected)) > .is-selected { background-color: var(--kol-fg-04); }
+
 /* ColumnBrowser resize handles (ColumnBrowserResize, kol-r2b2 2026-08-27 —
  * Finder's edge handles, user ruling "that should be a set in ds"; native CSS
  * `resize:` rejected). The column border already there is the visual; the
@@ -1314,32 +1327,58 @@
 }
 
 /* ─────────────────────────────────────────────────────────────────────
- * TONE — inverse (ControlToneInverse, kol-website 2026-08-27; user on brand's
- * /icons over a `pageWash` of fg-04: "a flipped version of this color scheme,
- * where the darker is background and grey is the active … it would fit better
- * on the light grey" — "that would also need to be a variant for the dropdown
- * and the input" — "the active grey can be lighter"). On a washed plane the
- * default grey well reads as a second plate. `tone="inverse"` on ViewToggle
- * (icon) · Dropdown · Input · SearchInput stamps `.kol-tone-inverse`; the rules
- * live HERE, after every default they out-rank, so a consumer never restates
- * them (brand's stopgap did).
+ * TONE — sunken (ControlToneSunken, kol-website 2026-08-28; was "inverse",
+ * ControlToneInverse 2026-08-27). User, on brand's /icons over a `pageWash`:
+ * "a flipped version of this color scheme, where the darker is background and
+ * grey is the active … it would fit better on the light grey" — and then, on
+ * the name: the control does not INVERT anything, it sits BELOW the plane it
+ * is on — `sunken`. ("inverse" already meant four things: `tone` here,
+ * `variant` on Tag/Pill, `theme` on Section, a boolean on Divider.) On a
+ * washed plane the default grey well reads as a second plate, so the set takes
+ * ONE tone: `tone="sunken"` (`inverse` aliased) on ViewToggle (icon) ·
+ * Dropdown · Input · SearchInput · Button · IconFrame · ThemeToggle stamps
+ * `.kol-tone-sunken`; the rules live HERE, after every default they out-rank,
+ * 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 chip is `fg-absolute-24` — theme-invariant black, as the icon well's
- * active state already was — so it darkens on either theme; the active chip
- * is the fg-16 ink wash (ruled on the page); a dark well wants a LIGHTER hover,
- * so the inactive hover is an absolute-white wash.
+ * 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
+ * hand-stamped on the old name.
  * ───────────────────────────────────────────────────────────────────── */
-.kol-view-toggle.kol-tone-inverse { background-color: var(--kol-fg-absolute-24); }
-/* the active chip is the fg-16 INK WASH (user ruling 2026-08-27 on the live page — "why are you using
- * absolute transparent? just use bg-fg-16"; surface-tertiary sat BELOW secondary on the dark ramp):
- * it lifts off the fg-absolute-24 well on both themes */
-.kol-view-toggle.kol-tone-inverse > button[aria-pressed="true"] { background-color: var(--kol-fg-16); }
-.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-inverse { background-color: var(--kol-fg-absolute-24); }
-.kol-expand.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-absolute-24); }
+.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 inverse pins its own chip */
-.kol-dd-trigger.kol-tone-inverse,
-.kol-dd-trigger.kol-tone-inverse:not(:disabled):hover,
-.kol-dd-trigger.kol-tone-inverse:not(:disabled):active { background-color: var(--kol-fg-absolute-24); }
-.kol-dd-panel.kol-tone-inverse { background-color: var(--kol-fg-absolute-24); }
+ * paint surface-secondary on hover/active, so the tone pins its own chip */
+.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); }
+/* 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),
+ * since one background cannot stack two translucent colours */
+.kol-btn.kol-tone-sunken,
+.kol-icon-frame.kol-tone-sunken,
+.kol-theme-toggle.kol-tone-sunken {
+  background-color: var(--kol-fg-absolute-24);
+  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-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-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.80.0",
+  "version": "0.82.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",