@kolkrabbi/kol-theme 0.43.1 → 0.45.0

package/kol-components-atoms.css

@@ -307,7 +307,7 @@
  * navigation is location, not a toggled tool. */
 .kol-btn-nav {
   background: transparent;
-  color: var(--kol-oq-64);
+  color: var(--kol-oq-80);
   border: 1px solid transparent;
 }
 @media (hover: hover) {
@@ -329,6 +329,8 @@
  * Button variant on the opaque tier: rest oq-12, hover/active one stop past
  * each, same state math as the rest of the family. */
 .kol-btn-grey {
+  /* Ladder (user ruling 2026-08-15): 12 rest → 04 hover (darker) → 32 press,
+   * then eased back down. */
   background: var(--kol-oq-12);
   color: var(--kol-surface-on-primary);
   border: 1px solid transparent;
@@ -804,95 +806,117 @@ a:hover .icon-hover,
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  /* PINNED SQUARE — the box never moves with glyph size (user law 2026-07-28,
-   * the same rule .kol-icon-frame-{sm,md,lg} obeys at 28/32/36). This class
-   * derived its size from `padding: 0.5rem` + whatever glyph it was handed, so
-   * a 14px icon silently produced a 30px control off the ladder. 32px is md on
-   * both the icon-frame squares and the button ladder (26/32/40), and it is
-   * exactly what 0.5rem + a 16px glyph already measured — CodeBlock's button
-   * does not move. */
-  width: 32px;
-  height: 32px;
-  padding: 0;
-  /* rungs below; the base stays md so a class used without one still lands
-   * on the ladder rather than collapsing to its content */
+  padding: 0.5rem;
   background: color-mix(in srgb, var(--kol-surface-on-primary) 2%, transparent);
   border: none;
   border-radius: var(--kol-radius-sm);
-  /* ink on the OPAQUE scale (user ruling 2026-08-15): a 72%-transparent glyph
-   * over a photograph lets the image through the strokes and reads as mush.
-   * oq is a baked grey — same value, nothing bleeds through. */
-  color: var(--kol-oq-72);
+  color: color-mix(in srgb, var(--kol-surface-on-primary) 72%, transparent);
   cursor: pointer;
   transition: background-color var(--kol-transition-base), color var(--kol-transition-base);
 }
 
 .kol-copy-btn:hover {
   background: color-mix(in srgb, var(--kol-surface-on-primary) 8%, transparent);
-  /* FULL ink on hover — no mix, no stop below 100% */
   color: var(--kol-surface-on-primary);
 }
 
-/* the click step, missing since this class was written — hover had a stop,
- * pressed had none, so the button gave no feedback on the way down. */
-.kol-copy-btn:active {
-  background: color-mix(in srgb, var(--kol-surface-on-primary) 12%, transparent);
-  color: var(--kol-surface-on-primary);
-}
+/* ─────────────────────────────────────────────────────────────────────
+ * TWO SEPARATE CONTROLS (user ruling 2026-08-15). They shared .kol-copy-btn
+ * as a base and every edit to one moved the other; the split is the point.
+ * ───────────────────────────────────────────────────────────────────── */
 
-/* --grey's ladder runs DOWN, not up (user ruling 2026-08-15). oq mixes ink
- * INTO the surface, so a higher stop is a LIGHTER box — the wrong direction for
- * a control that has to hold its own against a bright image. Rest is oq-12,
- * hover steps darker to oq-08, and the click lands on --kol-surface-primary
- * itself: fully opaque, no mix, the strongest the scale goes. */
-.kol-copy-btn--grey:hover {
-  background: var(--kol-oq-08);
-  color: var(--kol-surface-on-primary);
-}
-.kol-copy-btn--grey:active {
-  background: var(--kol-surface-primary);
+/* over MEDIA — boxed, opaque plate, full ink. Sits on a photograph, so it
+ * needs its own fill to stay legible and never dims at rest. */
+.kol-media-control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--kol-radius-sm);
+  background: var(--kol-oq-12);
   color: var(--kol-surface-on-primary);
-}
-
-/* --grey — the same control, over MEDIA instead of over a surface
- * (user ruling 2026-08-15). The base rule and every fg-scale variant are
- * TRANSLUCENT, so they are content-dependent: a light wash vanishes on a light
- * photo, a dark scrim vanishes on a dark one. There is no stop that survives
- * both, because the problem is the transparency, not the value.
- *
- * `oq` is the answer and kol-opaque.css:11 already says so — "use oq when you
- * need an OPAQUE grey (cover layer, CHIP OVER A PHOTO, any fill that must hide
- * what's behind it)". It mixes into the surface instead of into transparent, so
- * the control reads identically whatever the image does.
- *
- * The 12 / 16 / 24 ladder is not new — it is exactly .kol-btn-grey's, and
- * `grey` is already this system's name for an oq fill (kol-btn-grey,
- * kol-dd-trigger--grey, kol-icon-frame-grey). Same name, same stops. */
-/* the same three squares as .kol-icon-frame-{sm,md,lg}. The SOLO glyph ladder
- * (16/20/24) pairs 1:1 with them and ActionButton resolves it — the pairing is
- * never re-typed at a call site. */
-/* bare — no square, no fill, no padding; the glyph and its ink only. The host
- * owns the frame (CodeBlock / SearchInput / ThemeToggle sense of the word).
- * Hover and active still move the INK, so the control is not stateless. */
-.kol-copy-btn--bare {
-  width: auto;
-  height: auto;
+  cursor: pointer;
+  /* the house curve, not --kol-transition-base's generic material ease: it
+   * settles instead of stopping, which is what reads as smooth on the press. */
+  transition: background-color 1500ms var(--kol-ease-bounce), color 1500ms var(--kol-ease-bounce);
+}
+/* hover goes LIGHTER, not darker (user ruling 2026-08-15) — oq mixes ink into
+ * the surface, so up the scale is up in brightness. */
+/* the brand anchor, with the theme's own palette as the fallback — the yellow
+ * lives in kol-brand-color.css which the consumer supplies, so the theme must
+ * not hard-depend on it. NOT --kol-accent-primary, which resolves to white. */
+.kol-media-control:hover {
+  background: var(--kol-surface-tertiary);
+  color: var(--kol-color-yellow-300, var(--kol-palette-yellow));
+}
+/* The press RAMPS. The rule that is being entered owns the curve going in, so
+ * this one carries a slow ease-in-out; the base rule's bounce owns coming back
+ * out. One bezier cannot do both — the bounce covers most of its distance in
+ * the first quarter, which is exactly why the press read as instant. */
+/* the glyph GROWS on interaction: 18 at rest, 20 on hover and press, inside the
+ * unchanged 32px box. The SOLO md rung (20) stays the base and rest scales DOWN
+ * to it — 20 × 0.9 = 18 — so the ladder value is still what the component asks
+ * for. Scale, not a size swap: the box never moves (2026-07-28 law) and an SVG
+ * re-render would not tween. */
+.kol-media-control .kol-action-glyph {
+  transform: scale(0.9);
+  transition: transform 500ms var(--kol-ease-house);
+}
+.kol-media-control:hover .kol-action-glyph,
+.kol-media-control--pressed .kol-action-glyph {
+  transform: scale(1);
+}
+
+.kol-media-control:active,
+.kol-media-control--pressed {
+  background: var(--kol-oq-32);
+  transition: background-color 1500ms cubic-bezier(0.65, 0, 0.35, 1);
+}
+
+/* in TEXT — bare, no box, no fill. Rests on the SAME ink as the copy beside it
+ * (--kol-fg-meta = fg-48): these sit on a solid plate, not on a photograph, so
+ * the transparent scale is safe here and matching the text is worth more than
+ * the opaque rung. `--on` is a toggle's held state, not a hover. */
+.kol-inline-control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
   padding: 0;
+  border: none;
   background: transparent;
+  color: var(--kol-oq-64);
+  cursor: pointer;
+  transition: color var(--kol-transition-base);
 }
-.kol-copy-btn--bare:hover,
-.kol-copy-btn--bare:active {
-  background: transparent;
-}
-
-.kol-copy-btn-sm { width: 28px; height: 28px; }
-.kol-copy-btn-md { width: 32px; height: 32px; }
-.kol-copy-btn-lg { width: 36px; height: 36px; }
-
-.kol-copy-btn--grey {
-  background: var(--kol-oq-12);
-}
-
+/* ONE rest tone for every inline control (user ruling 2026-08-15): the star and
+ * the trash beside it sit at the same weight until you reach for one. They part
+ * on HOVER — a neutral control brightens, the accent control goes yellow. Yellow
+ * is the accent's alone, on hover and on its on-state; spending it on every
+ * hover left the on-state with nothing of its own to say. */
+.kol-inline-control:hover { color: var(--kol-oq-96); }
+
+.kol-inline-control--accent:hover,
+.kol-inline-control--on,
+.kol-inline-control--on:hover { color: var(--kol-color-yellow-300, var(--kol-palette-yellow)); }
+
+/* TWO GLYPHS, not one glyph and a fill (user ruling 2026-08-15: *"just create
+ * another star"*, *"leave the one alone in cards"*). `star` stays stroke-only
+ * and `star-solid` is the filled twin; a control that has an on-state names
+ * both and ActionButton crossfades them.
+ *
+ * The alternative — filling the shared `star.svg` and unfilling it here — was
+ * tried and reverted: a glyph that ships filled renders filled in every
+ * consumer that never asked for a state, and the DS cannot see those.
+ *
+ * The `--on` fill below is kept for a control that ships ONE glyph and carries
+ * its state in the class instead; it is a no-op on a stroke-only icon. */
+.kol-inline-control svg path { transition: fill var(--kol-transition-base); }
+.kol-inline-control--on svg path { fill: currentColor; }
 
 /* ─────────────────────────────────────────────────────────────────────
  * Figure — atoms/Figure.jsx

package/kol-components-molecules.css

@@ -818,3 +818,149 @@
    * (.kol-tag--sm, .kol-sidenav-group, .kol-control-* all set px directly). */
   padding-top: 20px;
 }
+
+/* ─────────────────────────────────────────────────────────────────────
+ * Content family hover — molecules/ContentCard.jsx · ContentRow.jsx
+ *
+ * ONE rule, driven by a per-variant custom property the component sets
+ * (`--kol-content-hover-bg`). The alternative was a hover utility per
+ * variant in JSX, which Tailwind cannot generate from package source
+ * anyway (the SegmentedToggle lesson — component chrome belongs in
+ * kol-theme). A variant with no hover simply never sets the property,
+ * and the rule resolves to nothing.
+ *
+ * The fill is an oq-* step per 05-control-chrome.md's state model; the
+ * value itself is chosen in ContentCard/ContentRow's HOVER table.
+ * ───────────────────────────────────────────────────────────────────── */
+@media (hover: hover) {
+  .kol-content-hover:hover {
+    background-color: var(--kol-content-hover-bg);
+  }
+  /* border is its OWN class, not a fallback chain off the bg one: a variant
+   * that steps its fill but not its frame (catalog) and one that steps its
+   * frame but not its fill (work) are both real, and an undefined var in a
+   * border-color declaration resolves to `unset` — which inherits, and quietly
+   * repaints a border nobody asked to move. */
+  .kol-content-hover-frame:hover {
+    border-color: var(--kol-content-hover-border);
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────────────
+ * ContentRow — the responsive step
+ *
+ * The row publishes its box as custom properties and reads them here, so
+ * the md: step is ONE media query instead of per-variant Tailwind variants
+ * that Tailwind cannot generate from package source anyway. A variant that
+ * publishes no `-md` value falls back to its base and never steps.
+ * ───────────────────────────────────────────────────────────────────── */
+.kol-row {
+  gap: var(--kol-row-gap);
+  padding: var(--kol-row-pad);
+  min-height: var(--kol-row-min-h);
+  background: var(--kol-row-bg);
+  border-color: var(--kol-row-border);
+  transition: background-color 300ms var(--kol-ease-house),
+              border-color     300ms var(--kol-ease-house);
+}
+.kol-row > .kol-row-thumb {
+  width: var(--kol-row-thumb);
+}
+
+/* 768 = the ruled `md` rung (08-breakpoints/01-values.md). A media query
+ * cannot read a custom property, so the number is a literal by necessity —
+ * naming the rung is the only thing that stops it reading as arbitrary. */
+@media (min-width: 768px) {
+  .kol-row {
+    gap: var(--kol-row-gap-md, var(--kol-row-gap));
+    padding: var(--kol-row-pad-md, var(--kol-row-pad));
+    min-height: var(--kol-row-min-h-md, var(--kol-row-min-h));
+  }
+  .kol-row > .kol-row-thumb {
+    width: var(--kol-row-thumb-md, var(--kol-row-thumb));
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────────────
+ * ContentCard — the work DRAWER
+ *
+ * A caption plate that rises over the bottom of the artwork on hover.
+ * The card is image-only at rest by design: a work shelf is a wall of
+ * images, and the caption is the reveal.
+ *
+ * Absolute, so it never adds height to the card and never reflows the
+ * shelf. Opacity only — a translucent wash over a photograph is exactly
+ * what the oq-* tier exists to avoid, but this plate is OPAQUE
+ * (surface-inverse) and it is the plate's PRESENCE that animates, not
+ * its transparency over the image.
+ * ───────────────────────────────────────────────────────────────────── */
+.kol-card-drawer {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  z-index: 10;
+  opacity: 0;
+  transition: opacity 300ms var(--kol-ease-house);
+}
+
+@media (hover: hover) {
+  .group:hover > .kol-card-drawer {
+    opacity: 1;
+  }
+}
+
+/* touch has no hover — the caption must not be unreachable there */
+@media (hover: none) {
+  .kol-card-drawer {
+    opacity: 1;
+  }
+}
+
+/* The card's text plate steps its padding at md where the variant declares
+ * one (work: 16 → 24, matching the shipped drawer's `p-4 md:p-6`). Same
+ * custom-property mechanism as .kol-row — Tailwind cannot generate an
+ * md: variant from package source, and these are per-variant data. */
+/* the ruled `md` rung, same as .kol-row above */
+@media (min-width: 768px) {
+  .kol-card-plate {
+    padding: var(--kol-plate-pad-md, var(--kol-plate-pad));
+  }
+}
+
+/* The card's rest colours, for the same reason as .kol-row — an inline
+ * background/borderColor outranks .kol-content-hover:hover, so the step
+ * silently never rendered. */
+.kol-card {
+  background: var(--kol-card-bg);
+  border-color: var(--kol-card-border);
+  transition: background-color 300ms var(--kol-ease-house),
+              border-color     300ms var(--kol-ease-house);
+}
+
+/* ─────────────────────────────────────────────────────────────────────
+ * The house expand — molecules/SearchInput.jsx · organisms/ContentFilters.jsx
+ *
+ * A collapsed control that opens to its field: the search glyph widening
+ * into an input. Two components hand-wrote the same three declarations
+ * inline (`width 600ms`, `background 400ms`, `opacity 300ms`, all on the
+ * house curve), which is how the curve came to be hardcoded in seven
+ * places to begin with.
+ *
+ * Durations are STAGGERED on purpose and that is the whole character of
+ * the move: the box travels longest (600), its fill settles sooner (400),
+ * and the content inside arrives last and quickest (300) so it does not
+ * smear across the widening box.
+ *
+ * The width VALUE stays inline — it is per-instance data (a consumer's
+ * expanded width), not chrome. Only the motion lives here.
+ * ───────────────────────────────────────────────────────────────────── */
+.kol-expand {
+  transition: width      600ms var(--kol-ease-house),
+              background 400ms var(--kol-ease-house),
+              border-color 400ms var(--kol-ease-house);
+}
+
+/* the content that rides inside an expanding box */
+.kol-expand-content {
+  transition: opacity 300ms var(--kol-ease-house);
+}

package/kol-theme.css

@@ -95,8 +95,18 @@
 
   /* The house curve (2026-08-15) — the easing the cards actually use; was
    * hardcoded in 5 files before this token existed. Curve only, no duration:
-   * it pairs with whatever duration the motion needs. */
-  --kol-ease-house: cubic-bezier(0.16, 1, 0.3, 1);
+   * it pairs with whatever duration the motion needs.
+   *
+   * BALANCED, not expo (user ruling 2026-08-15). This was easeOutExpo
+   * `cubic-bezier(0.16, 1, 0.3, 1)`, which spends ~90% of its distance in the
+   * first fifth of the duration and the rest on a settle you cannot see — so
+   * every motion read as instant no matter what duration it was given, and a
+   * small hover affordance never showed its move at all. */
+  --kol-ease-house: cubic-bezier(0.4, 0, 0.2, 1);
+  /* the bounce — overshoots past its target and settles back (y > 1 is what
+   * makes it bounce; house only decelerates). For a press that should feel
+   * springy rather than merely smooth. */
+  --kol-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
 
   /* Content widths (2026-07-28; panel added 2026-07-30) — ONE frame, three
    * inner caps (chess law). Every page: mx-auto max-w-shell + the one padding

package/package.json

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