@kolkrabbi/kol-theme 0.153.0 → 0.155.0

package/kol-components-molecules.css

@@ -918,7 +918,13 @@
   position: relative;
   width: 100%;
   overflow: hidden;
-  background-color: var(--kol-surface-primary);
+  /* THE PANEL LIFTS OFF THE PAGE (2026-09-28, user: the search overlay "is very
+   * faint, and the input text is also very faint"). It painted the page's own
+   * surface, so over a dark page and a scrim it read as a hole rather than a
+   * panel. `oq-04` is the lift the shortcuts sheet already wears (2026-09-03):
+   * opaque, one step off the ground, in both themes. */
+  background-color: var(--kol-oq-04);
+  color: var(--kol-oq-96);
   /* NO BORDER, NO SHADOW (user 2026-08-01). Both were tried and both were
    * wrong: the shadow was another product's floating-card idiom, and the
    * hairline left an empty palette reading as a bordered empty box. The SCRIM
@@ -932,6 +938,10 @@
    * and is deleted with it: it solved the wrong problem. */
 }
 
+/* the query field inside a panel reads at full ink; its placeholder at 48 */
+.kol-overlay-panel .kol-control--bare input { color: var(--kol-oq-96); }
+.kol-overlay-panel .kol-control--bare input::placeholder { color: var(--kol-oq-48); }
+
 /* ── Section — .kol-section-* ─────────────────────────────────────────────
  * Between-siblings rhythm for stacked inspector sections (InspectorSectionRhythm,
  * filed from kol-fxr 2026-08-15).
@@ -962,6 +972,34 @@
   padding-top: 20px;
 }
 
+/* InspectorSection `pane` — the Affinity panel shape (editor inspector rebuild, 2026-09-27).
+ * A named pane, not a labelled form group: the title in emphasis on its own strip, the body
+ * padded, and panes ruled edge to edge — each pane pads itself, so the rule is never inset. */
+.kol-inspector-pane + .kol-inspector-pane { border-top: 1px solid var(--kol-oq-08); }
+.kol-inspector-pane-head {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 40px;
+  padding: 4px 16px 0;
+}
+.kol-inspector-pane-title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-family: var(--kol-font-family-mono);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  color: var(--kol-fg-emphasis);
+}
+.kol-inspector-pane-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 4px 16px 20px;
+}
+
 /* ─────────────────────────────────────────────────────────────────────
  * Content family hover — molecules/ContentCard.jsx · ContentRow.jsx
  *

package/kol-components-organisms.css

@@ -912,3 +912,26 @@
   outline: 2px solid var(--kol-accent-primary);
   outline-offset: 1px;
 }
+
+/* ── ToolPalette · the tool row's states (editor inspector rebuild, 2026-09-27) ──
+ * The generic pressed toggle is an inverted tile, and ghost + `quiet` dims oq-48 ink
+ * by the disabled opacity on top — a tool row read washed-out at rest and shouted
+ * when armed. Affinity's row: the ink does the dimming, the armed tool is a sunken
+ * tile with a lighter edge and bright ink, hover a faint tile, a press gives. */
+.kol-tool-palette .kol-btn {
+  --kol-tone-fg: var(--kol-oq-64);
+  --kol-tone-hover-bg: var(--kol-oq-08);
+  --kol-tone-hover-fg: var(--kol-surface-on-primary);
+  --kol-tone-pressed-bg: var(--kol-surface-sunken);
+  --kol-tone-pressed-fg: var(--kol-surface-on-primary);
+  transition: color 120ms ease, background-color 120ms ease, transform 80ms ease;
+}
+/* armed = Affinity's selected cell: a SUNKEN tile under a 1px lighter edge, the glyph bright —
+ * and it stays so under the cursor (the hover rule outranks the pressed fill) */
+.kol-tool-palette .kol-btn-pressed {
+  --kol-tone-hover-bg: var(--kol-surface-sunken);
+  box-shadow: inset 0 0 0 1px var(--kol-oq-16);
+}
+.kol-tool-palette .kol-btn-quiet { opacity: 1; }
+.kol-tool-palette .kol-btn:disabled { opacity: var(--kol-opacity-disabled); }
+.kol-tool-palette .kol-btn:not(:disabled):not(.kol-dd-trigger):active { transform: scale(0.92); }

package/kol-components-workshop.css

@@ -82,11 +82,65 @@
   scrollbar-width: none;
 }
 
-/* Shell content grid — the rail/main/toc gutter. The gap lives HERE, not as a
- * utility on the element: a gap-8 in the JSX outranked this layer at every
- * width and made the 48px wide step (below, ≥1600px) dead code. */
+/* THE SHELL'S ONE SCROLL REGION (showcase refinement 2026-09-28). It used to
+ * be three: each rail and #main scrolled themselves inside a grid wrapped in
+ * the chrome inset, so main's scrollbar sat 24px in from the window edge and
+ * ended at main's right edge, beside the TOC rather than at the window's.
+ * Now the region below the header scrolls as one, edge to edge; the rails are
+ * sticky inside it and still scroll their own overflow. `container-type: size`
+ * lets a rail be exactly one region tall (100cqh) without measuring anything.
+ *
+ * ONE SPACE BETWEEN A RAIL AND THE PAGE, NOT TWO. The grid had a 32/48px gap
+ * AND pages padded themselves with --kol-pad-section-x, so rail text sat up to
+ * ~100px from the page's. The gap is gone: a rail ends in an opaque 08 seam
+ * (the seam law) with the chrome inset inside it, and main pads the page
+ * ladder from the seam. Pages do not pad themselves on x. */
+.shell-scroll {
+  container-type: size;
+  scrollbar-gutter: stable;
+  overscroll-behavior: none;
+}
+
 .shell-content-grid {
-  gap: 32px;
+  gap: 0;
+  min-height: 100%;
+}
+
+.shell-rail {
+  position: sticky;
+  top: 0;
+  align-self: start;
+  height: 100cqh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+}
+
+.shell-rail--nav {
+  border-right: 1px solid var(--kol-oq-08);
+  padding-inline-end: var(--kol-pad-chrome-x);
+}
+
+.shell-rail--toc {
+  border-left: 1px solid var(--kol-oq-08);
+  padding-inline-start: var(--kol-pad-chrome-x);
+}
+
+.shell-main {
+  min-width: 0;
+}
+
+/* THE TYPED WORDMARK — the shell's second mark as live type in the Tight cut
+ * (2026-09-28), sized so its caps stand as tall as the drawn KOLKRABBI mark
+ * beside it (h-6). The display voice is uppercase by contract. */
+.shell-wordmark-label {
+  font-family: var(--kol-font-family-sans-tight);
+  font-size: 33px;
+  line-height: 24px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0;
+  white-space: nowrap;
 }
 
 .shell-sidebar-sticky::-webkit-scrollbar {
@@ -463,10 +517,6 @@
     font-size: 13px;
   }
 
-  /* Wide grid gap */
-  .shell-content-grid {
-    gap: 48px;
-  }
 }
 
 /* =============================================================================

package/package.json

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