@kolkrabbi/kol-theme 0.152.0 → 0.154.0

package/kol-components-atoms.css

@@ -258,6 +258,16 @@
   outline-offset: 2px;
 }
 
+/* THE MENU BUTTONS TAKE THE SAME RING (editor review #8, 2026-09-27 — user: "the browser focus
+ * highlighter … I hate it, can we not use our own? like we do in media?"). MenuItem's trigger and
+ * its rows are bare <button>s, not `.kol-btn`, so they had NO focus rule and the browser drew its
+ * own blue ring whenever the menu handed focus back. Same ring as every Button now. */
+.kol-menu-btn:focus { outline: none; }
+.kol-menu-btn:focus-visible {
+  outline: 2px solid var(--kol-focus-ring);
+  outline-offset: 2px;
+}
+
 /* Icon-only buttons — was an inline style in Button.jsx, which beat every
  * consumer display utility (`lg:hidden` could never hide an iconOnly button).
  * Chrome belongs here, layered, so utilities stay sovereign. The flex

package/kol-components-molecules.css

@@ -953,7 +953,7 @@
  * against Section's shipped default, so there is no second density to name
  * until a consumer produces a value that actually differs. */
 .kol-section--divided + .kol-section--divided {
-  border-top: 1px solid var(--kol-fg-08);
+  border-top: 1px solid var(--kol-oq-08);
   /* 20px below the rule; the 20px above falls out of the rail body's own
    * gap-5, so a symmetric space–divider–space lands without this file
    * knowing anything about the rail.
@@ -962,6 +962,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/package.json

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