@kolkrabbi/kol-theme 0.50.2 → 0.52.0

package/kol-base-tokens.css

@@ -17,7 +17,13 @@
  * Dark selector matches brand's mechanism: [data-theme="dark"], .dark.
  */
 
-:root {
+/* LIGHT is declared on the theme selectors too, not `:root` alone (0.52.0,
+ * nested-theme-scope): a `data-theme="light"` / `.light` SUBTREE inside a dark
+ * app must carry the light surfaces on its own element, or it inherits the
+ * root's dark values. `:root` still matches, so root-level theming and the
+ * system-follow mirror below are untouched. */
+:root,
+:is([data-theme="light"], .light) {
   /* Absolutes (theme-invariant) */
   --kol-color-absolute-white: #ffffff;
   --kol-color-absolute-black: #000000;

package/kol-color.css

@@ -89,8 +89,6 @@
    * BORDER
    * --------------------------------------------------------------------------- */
 
-  --kol-border-default: color-mix(in srgb, var(--kol-surface-on-primary) 8%, transparent);
-  --kol-border-focus: color-mix(in srgb, var(--kol-accent-primary) 70%, var(--kol-surface-on-primary));
   --kol-focus-ring: var(--kol-accent-primary);
   /* The QUIET ring — 1px, inset, for dense rows where the loud ring's 2px
    * offset would bloom over its neighbours (nav rail leaves today).
@@ -105,6 +103,21 @@
    * Default is --kol-fg-32, exactly what the rails already drew, so minting
    * this changes NOTHING visually. Both rings are white (--kol-accent-primary
    * resolves to --kol-surface-on-primary); the two differ in weight, not hue. */
+}
+
+/* SURFACE-DERIVED chrome tokens live on the THEME selectors, not `:root` alone
+ * (0.52.0, nested-theme-scope) — same reason as the fg ramp in kol-opacity.css:
+ * a var() resolves where the property is declared, so a themed SUBTREE that
+ * flips --kol-surface-on-primary kept the root's border colour (a white 8%
+ * hairline on white paper). The accent family stays in the :root block above
+ * on purpose: kol-brand-color.css rebinds it at :root only, and a themed
+ * re-declaration here would hand a branded app's nested pane the neutral
+ * ink accent instead of the brand. */
+:root,
+:is([data-theme="light"], .light),
+:is([data-theme="dark"], .dark) {
+  --kol-border-default: color-mix(in srgb, var(--kol-surface-on-primary) 8%, transparent);
+  --kol-border-focus: color-mix(in srgb, var(--kol-accent-primary) 70%, var(--kol-surface-on-primary));
   --kol-focus-ring-quiet: var(--kol-fg-32);
 }
 

package/kol-components-atoms.css

@@ -474,10 +474,28 @@
   background-color: transparent;
   color: var(--kol-surface-on-primary);
   cursor: pointer;
+  position: relative; /* the bare variant's hit extent below anchors here */
   transition: background-color var(--kol-transition-base),
               border-color var(--kol-transition-base);
 }
 
+/* THE TOUCH FLOOR (MobileTouchFloor, user ruling 2026-08-26): every pressable
+ * control clears a 24px hit box (WCAG 2.5.8 AA) and the DRAWN size never
+ * moves. No type floor — 10px chrome is the ruled helper/mono-10 voice. Two
+ * controls sat under 24: this bare switch (a 12px track in a 1px border, 14px
+ * tall) and the Slider's range input below (a 2px track was the whole target).
+ * The shells ride button geometry (26/32/40) and already clear it. The extent
+ * is a pseudo-element, so the layout box, the label and the track stay where
+ * they are; hit-testing on a pseudo lands on its originating button. */
+.toggle-switch--bare::before {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  top: 50%;
+  height: 24px;
+  translate: 0 -50%;
+}
+
 .toggle-switch:focus-visible {
   outline: 2px solid var(--kol-focus-ring);
   outline-offset: 2px;
@@ -626,7 +644,12 @@
   appearance: none;
   background: transparent;
   cursor: pointer;
-  height: 2px;
+  /* 24px, not 2px (the touch floor, user ruling 2026-08-26 — see ToggleSwitch
+   * above). The INPUT is the hit target and it was exactly the track's 2px;
+   * the drawing is unchanged: the 2px track centres inside the box by the UA's
+   * own `align-self: center` on the runnable track, and the thumb stays pinned
+   * to the track. The row (.control-slider) is already 24px, so nothing moves. */
+  height: 24px;
 }
 
 .slider-black::-webkit-slider-runnable-track {

package/kol-opacity.css

@@ -25,7 +25,16 @@
  * alias over one fg-* stop. `default` is a deprecated alias of `body`.
  */
 
-:root {
+/* Declared on the THEME selectors, not `:root` alone (0.52.0, nested-theme-
+ * scope). A custom property resolves its var() where it is DECLARED and
+ * descendants inherit the frozen result — a ramp declared only on :root bakes
+ * the root's ink, so a subtree that flips --kol-surface-on-primary
+ * (data-theme / .light / .dark on a div) kept the root's --kol-fg-*.
+ * Re-declaring on the theme selectors re-resolves the ramp on the themed
+ * element itself — the mechanism .bg-surface-inverse already uses. */
+:root,
+:is([data-theme="light"], .light),
+:is([data-theme="dark"], .dark) {
   /* ============================================================================
    * TOKENS — Standard tier (foreground on primary surface)
    * ============================================================================ */
@@ -374,7 +383,11 @@
  * descriptors are aliases, never their own colour values.
  * ============================================================================== */
 
-:root {
+/* Theme selectors, same reason as the ramp above — the roles chain through
+ * fg-* and freeze the same way. */
+:root,
+:is([data-theme="light"], .light),
+:is([data-theme="dark"], .dark) {
   --kol-fg-subtle:    var(--kol-fg-24);
   --kol-fg-meta:      var(--kol-fg-48);
   --kol-fg-body:      var(--kol-fg-64);

package/kol-opaque.css

@@ -13,7 +13,9 @@
  * transparency, it is a baked grey.
  *
  * Auto-themes for free: --kol-surface-on-primary and --kol-surface-primary both
- * flip in dark mode, so color-mix recomputes. No hardcoded light/dark blocks.
+ * flip in dark mode, so color-mix recomputes. No hardcoded light/dark blocks —
+ * but the block is declared on the theme selectors, not `:root` alone (0.52.0,
+ * nested-theme-scope), so a themed SUBTREE recomputes too; see kol-opacity.css.
  *
  * Scale: 01, 02, 04, 08, 12, 16, 24, 32, 40, 48, 64, 80, 88, 96 (14 stops)
  *
@@ -26,7 +28,9 @@
  * - Classes (.bg-oq-*, .text-oq-*, .border-oq-* + inverse + hover) for JSX
  */
 
-:root {
+:root,
+:is([data-theme="light"], .light),
+:is([data-theme="dark"], .dark) {
   /* ============================================================================
    * TOKENS — Standard tier (ink-on-primary, flattened onto primary surface)
    * ============================================================================ */

package/package.json

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