@kolkrabbi/kol-theme 0.110.0 → 0.112.0

package/kol-base-tokens.css

@@ -74,11 +74,18 @@
    * flips toward the ground, `oq-ab-96` IS the well everywhere — 245 under a
    * 250 page in light, 10 under an 18 page in dark. The per-theme alias this
    * replaced was the tell that the ladder underneath was wrong. */
-  /* THE POLE ITSELF (user 2026-08-30: *"in light mode we could fix the sunken
-   * to use fff? fully white?"*). `100` is the ab ladder's endpoint — the ground
-   * pole, no mix — so the well is pure #ffffff in light and pure #000000 in
-   * dark, and it is still ONE token because `ab` flips toward the ground.
-   * A washed page cannot close this gap the way it closed the 96 rung. */
+  /* ASYMMETRIC BY RULING (user 2026-08-30: pure white in light, the 96 rung in
+   * dark — *"I really only wanted that extreme for light"*).
+   *
+   * LIGHT takes the pole, `oq-ab-100` = #ffffff. A page wash moves 250 → 245,
+   * and at the old 96 rung the well was ALSO 245 — the collision this closes.
+   * At the pole the gap is 10 and no wash rung can reach it.
+   * DARK stays at `oq-ab-96` = 10 under an 18 page. Pure #000 was a 23-level
+   * step and too deep; dark never had the collision anyway, because its wash is
+   * a white film that moves the page AWAY from the well.
+   *
+   * Two declarations, not one. The single-token version was my elegance, not a
+   * requirement — the two themes want different depths and that is allowed. */
   --kol-surface-sunken: var(--kol-oq-ab-100);
 
   --kol-surface-inverse: #0e0e11;
@@ -107,6 +114,8 @@
   --kol-surface-on-secondary: #f8f8f8;
 
   --kol-surface-tertiary: #0e0e11;
+  /* the well is the 96 rung in dark, not the pole — see the light block */
+  --kol-surface-sunken: var(--kol-oq-ab-96);
   --kol-surface-on-tertiary: #ffffff;
 
 
@@ -153,6 +162,8 @@
     --kol-surface-on-secondary: #f8f8f8;
 
     --kol-surface-tertiary: #0e0e11;
+    /* the well is the 96 rung in dark, not the pole — see the light block */
+    --kol-surface-sunken: var(--kol-oq-ab-96);
     --kol-surface-on-tertiary: #ffffff;
 
 

package/kol-components-atoms.css

@@ -1317,3 +1317,40 @@ a.kol-icon-frame {
   padding: 0;
 }
 
+
+/* ── COARSE-POINTER TEXT FLOOR ──────────────────────────────────────────────
+ * iOS Safari zooms the page whenever a focused text field computes under 16px,
+ * and it does NOT zoom back out on blur (InputTypeScaleZoomsIOS, kol-website
+ * 2026-08-31). The DS's `sm` (12px) and `md` (14px) rungs both trip it, and md
+ * is the default — so every consumer with an input has it, on every iPhone.
+ *
+ * The cost is that it does not look like a font-size bug: the page stays zoomed
+ * and every subsequent screenshot reads as a catastrophic gutter failure. A
+ * mobile audit chased a non-existent overflow across a dozen routes because of
+ * this one rule.
+ *
+ * NOT a re-litigation of MobileTouchFloor (2026-08-26, "no type floor, 24px hit
+ * floor"). That ruling is about legibility — how big text is DRAWN for a human.
+ * This is a hard platform behaviour keyed on the computed `font-size` of the
+ * focused field, regardless of how legible it is. Pointer devices do not move.
+ *
+ * `maximum-scale=1` would also stop it and is the wrong fix — it kills
+ * pinch-zoom for everyone and fails WCAG 1.4.4.
+ *
+ * The type class (`kol-mono-*`) sits on the SHELL and the field INHERITS it, so
+ * an element+class rule here beats it cleanly rather than tying on specificity
+ * (ARCHITECTURE §5). The height pin travels with the size: Input pins its inner
+ * field to the token's line-height (h-4 / h-[18px] / h-[22px]), so a 16px face
+ * in an unlifted 16px box would clip. */
+@media (pointer: coarse) {
+  .kol-control input,
+  .kol-expand input {
+    font-size: 16px;
+    line-height: 22px;
+    height: 22px;
+  }
+  .kol-control textarea {
+    font-size: 16px;
+    line-height: 22px;
+  }
+}

package/kol-components-shell.css

@@ -78,3 +78,43 @@
   background-color: var(--kol-fg-24);
   color: inherit;
 }
+
+/* ── THE RAIL AS A DRAWER ────────────────────────────────────────────────────
+ * `AppShell touch="drawer"` below `drawerBelow` (ShellRailNoDrawerOnMobile,
+ * kol-chess 2026-08-31). At 390 the 48px rail is 12.3% of the viewport spent on
+ * chrome in the one place there is none to spare — a chess board went from
+ * 302px to 350px the moment it folded. `railToggleKey` could not help: it is a
+ * KEY, and a phone has no keyboard.
+ *
+ * JS owns the breakpoint and stamps `data-rail-drawer` on the shell root; CSS
+ * only paints. No media query here — the fold width is a prop, so a query would
+ * be a second source of truth for it. And no `!important`: the rail reads its
+ * own `--kol-shell-drawer-width` in drawer mode instead of the live rail token,
+ * so nothing here is fighting an inline style. */
+[data-rail-drawer] .kol-shell-rail {
+  transform: translateX(-100%);
+  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+[data-rail-drawer="open"] .kol-shell-rail {
+  transform: translateX(0);
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-rail-drawer] .kol-shell-rail { transition: none; }
+}
+
+/* Above the rail, so it stays tappable with the drawer open. */
+.kol-shell-drawer-trigger {
+  position: fixed;
+  top: 12px;
+  left: 12px;
+  z-index: calc(var(--kol-z-sticky) + 2);
+  width: 32px;
+  height: 32px;
+}
+
+.kol-shell-drawer-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--kol-z-sticky) - 1);
+  background: color-mix(in srgb, var(--kol-color-ab-black) 48%, transparent);
+}

package/package.json

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