@kolkrabbi/kol-theme 0.137.0 → 0.139.0

package/kol-components-atoms.css

@@ -249,7 +249,7 @@
 /* WEIGHT IS THE VARIANT'S, not the tone's: a tone is a ground, and a ground
  * must not re-weigh a label — a sunken secondary keeps its 500 (matrix-verified
  * 2026-09-03, the one regression the first cut had). */
-.kol-btn-secondary, .kol-btn-accent, .kol-btn-danger, .kol-btn.kol-tone-secondary { font-weight: 500; }
+.kol-btn-secondary, .kol-btn-accent, .kol-btn-danger, .kol-btn.kol-tone-inverted { font-weight: 500; }
 
 .kol-btn:focus-visible {
   outline: 2px solid var(--kol-focus-ring);
@@ -1112,8 +1112,8 @@ a:hover .icon-hover,
   border-radius: var(--kol-radius-sm);
   padding: 0;
   /* paint from the TONE properties (kol-components-molecules.css, TONE); the
-   * variant classes are aliases of the tones, the fallback is `secondary` —
-   * the frame's default since it was promoted — and a toned wrapper reaches a
+   * variant classes are aliases of the tones, the fallback is the `secondary`
+   * VARIANT's paint (the `inverted` tone) — the frame's default since it was promoted — and a toned wrapper reaches a
    * frame with no variant of its own. No states, as ever. */
   background-color: var(--kol-tone-bg, var(--kol-surface-on-primary));
   color: var(--kol-tone-fg, var(--kol-surface-primary));

package/kol-components-molecules.css

@@ -857,10 +857,15 @@
  * rounded-[…] / shadow-[…] / bg-black/NN / backdrop-blur-[…] in package chrome.
  * ───────────────────────────────────────────────────────────────────── */
 
-/* LOOK ONLY — the call site owns the box. Three scrims exist and two are
- * `fixed inset-0` while one is `absolute inset-0`; baking position in would
- * have forced a wrong one on two of them. The class owns what was drifting:
- * the tint (60 / 50 / 50 across three files).
+/* LOOK ONLY — the call site owns the box. Nine scrims wear it after the
+ * 2026-09-03 sweep (overlay-scrim-outliers: Modal · FullscreenOverlay ·
+ * ShellDrawer · ShellSearchOverlay · PageLayout's sidenav backdrop · FieldRow ·
+ * ShortcutsOverlay · TouchDeviceOverlay · the workshop's shortcuts sheet), and
+ * they are `fixed` or `absolute` by their own contract; baking position in
+ * would force a wrong one on some. The class owns what was drifting: the tint
+ * (60 / 50 / 50 across the first three files; an 8 % inverse wash + blur on
+ * the two shell overlays the sweep caught). ParamSheet is untinted on purpose;
+ * OverlayGlassPanel and PlaybackBar blur because they are surfaces, not scrims.
  * NO BLUR (user ruling 2026-09-01, OverlayScrimBlur): the 1px blur bought a
  * compositing layer on every overlay open, on a phone, for a separation the
  * 60% tint already carries. */
@@ -1170,6 +1175,9 @@
  * the clip path and the border path separately, and a hairline of the
  * lighter fill bleeds through on the arc, bright only on the curve. */
 .kol-card {
+  /* NOT toned. A wrapper tone reaches the CONTROLS on a page and stops at the
+   * card plate (user ruling 2026-09-03: "no just controls") — the plate is the
+   * content-card system's box per variant. */
   background: var(--kol-card-bg);
   background-clip: padding-box;
   border-color: var(--kol-card-border);
@@ -1540,6 +1548,9 @@
  * `default` is not a tone: it is the ABSENCE of one — inherit the wrapper's,
  * else the family's fallback. (An alias of `primary` set on the element would
  * block the inheritance that ask 3 exists for.) `inverse` stays sunken's alias.
+ * SEVEN since 0.138.0: `secondary` paints the page surface and `inverted` is
+ * the text-colour fill the word `secondary` used to mean (tone-secondary-is-
+ * inverse, the line of the user's ruling the first ticket did not carry).
  *
  * The rules live HERE, after every default they out-rank. Sunken's own
  * history — the well, its three-rung ladder, why it was raised until
@@ -1564,7 +1575,37 @@
   --kol-tone-panel-border-w: 0;
   --kol-tone-panel-border: transparent;
 }
-.kol-tone-secondary,
+/* `secondary` PAINTS THE PAGE SURFACE (tone-secondary-is-inverse, kol-client-olina
+ * 2026-09-03; user: "I told you I wanted primary surface as a tone … that tone
+ * should be called secondary. What is currently secondary should be called
+ * inverted."). 0.134.0 lifted the name from Button's `secondary` VARIANT, which
+ * was already an inverse, and the page's own colour had no tone at all. The
+ * variant keeps its pixels — it aliases `inverted` below — only the tone word
+ * moved. Hover / press are primary's rungs over the page colour. */
+.kol-tone-secondary {
+  --kol-tone-bg: var(--kol-surface-primary);
+  --kol-tone-image: none;
+  --kol-tone-fg: var(--kol-surface-on-primary);
+  --kol-tone-border: transparent;
+  --kol-tone-hover-bg: var(--kol-oq-08);
+  --kol-tone-hover-image: none;
+  --kol-tone-hover-fg: var(--kol-surface-on-primary);
+  --kol-tone-hover-border: transparent;
+  --kol-tone-active-bg: var(--kol-oq-16);
+  --kol-tone-active-image: none;
+  --kol-tone-pressed-bg: var(--kol-surface-on-primary);
+  --kol-tone-pressed-image: none;
+  --kol-tone-pressed-fg: var(--kol-surface-primary);
+  --kol-tone-panel-bg: var(--kol-surface-primary);
+  --kol-tone-panel-border-w: 0;
+  --kol-tone-panel-border: transparent;
+}
+/* `inverted` — the text colour as fill: Button's / IconFrame's `secondary`
+ * variant and the panel's `--secondary`, under the name the user gave it.
+ * (`inverse` is NOT this: it is sunken's alias from 0.117.0, still on one
+ * kol-website call, and stays that until it is dropped — the two words were
+ * one letter apart and a live alias, so the new tone took the user's word.) */
+.kol-tone-inverted,
 :where(.kol-btn-secondary, .kol-icon-frame-secondary, .kol-dd-panel--secondary) {
   --kol-tone-bg: var(--kol-surface-on-primary);
   --kol-tone-image: none;
@@ -1758,6 +1799,18 @@
 :is(.kol-view-toggle.kol-tone-sunken, .kol-view-toggle.kol-tone-inverse, .kol-tone-sunken .kol-view-toggle) > button:not([aria-pressed="true"]):hover { background-color: var(--kol-fg-04); }
 /* the open search shell — was `bg-fg-04` on the element, sunken by class */
 .kol-expand--open { background-color: var(--kol-tone-bg, var(--kol-fg-04)); }
+/* THE SEGMENTED STRIP, SUNKEN (segmented-toggle-sunken-tone, kol-client-olina
+ * 2026-09-03; user, on kol-fxr's labs rail: "is this a variant? its not what you
+ * have"). It was not — it was fxr's kol-labs.css:220-226, and olina's inspector
+ * carried the same three lines. Promoted verbatim: the shell's ring goes, the
+ * selected cell takes the well and the fg-96 ink; rest cells stay as the
+ * default paints them. `filled` / `tonal` keep their own selected law. On the
+ * element, or inherited from a sunken wrapper. */
+:is(.kol-seg.kol-tone-sunken, .kol-seg.kol-tone-inverse, .kol-tone-sunken .kol-seg):not(.kol-seg--filled) { border-color: transparent; }
+:is(.kol-seg.kol-tone-sunken, .kol-seg.kol-tone-inverse, .kol-tone-sunken .kol-seg):not(.kol-seg--filled) .kol-seg-cell.is-active {
+  background: var(--kol-surface-sunken);
+  color: var(--kol-fg-96);
+}
 /* ⛔ THE TRIGGER IS EXCLUDED — rest and open are its only states (law, twice
  * at the top of this file). Pressed on a sunken button out-ranks its hover, as
  * it always did: this is the one rule the generic `.kol-btn-pressed` cannot

package/kol-components-organisms.css

@@ -670,26 +670,29 @@
 .kol-filters-row {
   container-type: inline-size;
 }
-/* THE TRACK COUNT, COMPUTED ONCE AND READ TWICE (CatalogFilterFirstGroupTrackCount,
+/* THE TRACK COUNT, MEASURED ONCE AND READ TWICE (CatalogFilterFirstGroupTrackCount,
  * kol-client-olina 2026-09-03). The first group was `(100cqw − 120px) / 6` — one
  * column of a six-track grid — while the catalog grid asks how many tracks FIT
- * (ceiling 6, floor `--kol-catalog-min`): on a capped page at 1280 the grid
- * renders five at 165 and the group measured 133, its right edge mid-card.
- * The 2026-08-27 "sits over the first card" law was only true at six.
+ * (ceiling 6, floor `minColumn`): on a capped page at 1280 the grid renders five
+ * at 165 and the group measured 133, its right edge mid-card. The 2026-08-27
+ * "sits over the first card" law was only true at six.
  *
- * Both now read one number: the count the grid actually renders —
- * `min(cols, floor((W + gap) / (min + gap)))`, which is exactly what
- * `repeat(auto-fill, minmax(max(min, (W − 5·gap) / 6), 1fr))` resolved to, so
- * six-track pages are pixel-identical and narrower ones finally agree.
- * `100cqw` is each element's own container — the filter row and the catalog
- * grid's wrapper are both `inline-size` containers of the page's width.
- * `round(down, …)` is CSS Values 4 (Firefox 118 · Chrome 125 · Safari 15.4). */
-.kol-filters-first,
-.kol-catalog-grid {
-  --_kol-catalog-n: max(1, min(var(--kol-catalog-cols, 6), round(down, (100cqw + 24px) / (var(--kol-catalog-min, 160px) + 24px), 1)));
-}
+ * Both read `--kol-catalog-n`, the count the grid actually renders. CatalogPage
+ * MEASURES it (a ResizeObserver on the grid — `min(cols, floor((W + gap) /
+ * (min + gap)))`, exactly what `repeat(auto-fill, minmax(…))` resolved to) and
+ * publishes it on the page, so six-track pages are pixel-identical and narrower
+ * ones agree. Unset — a ContentFilters outside CatalogPage — falls back to 6,
+ * the pre-0.137.0 formula.
+ *
+ * ⚠️ 0.137.0 computed the count HERE with `round(down, (100cqw + 24px) / (min +
+ * 24px), 1)`. Chromium resolves a `<length> / <length>` division to a number;
+ * Firefox does not, so the declaration was invalid at computed-value time,
+ * `repeat(var(--n))` fell to `none`, and every catalog rendered ONE column — a
+ * ~1500px card (user: "is this supposed to be a joke? huge card"). Pulled the
+ * same hour; the count is measured in JS now, and CSS does one division by a
+ * NUMBER, which is Level 3 and everywhere. */
 .kol-filters-first {
   flex: none;
-  width: calc((100cqw - (var(--_kol-catalog-n) - 1) * 24px) / var(--_kol-catalog-n));
+  width: calc((100cqw - (var(--kol-catalog-n, 6) - 1) * 24px) / var(--kol-catalog-n, 6));
 }
 

package/kol-components-shell.css

@@ -79,17 +79,19 @@
 
 /* ── CatalogPage ────────────────────────────────────────────────────────── */
 
-/* THE CATALOG GRID — a ceiling with a floor: up to `--kol-catalog-cols` (6)
- * tracks, none narrower than `--kol-catalog-min` (160; `CatalogPage minColumn`
- * sets it), gap 24. The count `--_kol-catalog-n` is computed in
- * kol-components-organisms.css and shared with `.kol-filters-first`, so the
- * filter row's first group is one track of THIS grid at every width — the
- * grid used to be an inline `auto-fill` that resolved to the same tracks but
- * told nobody how many (CatalogFilterFirstGroupTrackCount, 2026-09-03). */
+/* THE CATALOG GRID — a ceiling with a floor: up to 6 tracks, none narrower
+ * than `CatalogPage minColumn` (160), gap 24. The count is `--kol-catalog-n`,
+ * MEASURED by CatalogPage (a ResizeObserver on this element) and published on
+ * the page, where `.kol-filters-first` reads the same number — so the filter
+ * row's first group is one track of THIS grid at every width. The grid used to
+ * be an inline `auto-fill` that resolved to the same tracks but told nobody
+ * how many (CatalogFilterFirstGroupTrackCount, 2026-09-03). 0.137.0 computed
+ * the count in CSS with a length ÷ length inside `round()`, which Firefox
+ * rejects — one column, huge card — see kol-components-organisms.css. */
 .kol-catalog-grid {
   display: grid;
   gap: 24px;
-  grid-template-columns: repeat(var(--_kol-catalog-n), minmax(0, 1fr));
+  grid-template-columns: repeat(var(--kol-catalog-n, 6), minmax(0, 1fr));
 }
 
 /* ── NavRail ────────────────────────────────────────────────────────────── */

package/package.json

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