@kolkrabbi/kol-theme 0.51.0 → 0.52.1

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

@@ -693,7 +693,6 @@
  * .kol-sidenav-hop-label    label slot — collapses to display:none in
  *                           rail mode (responsive cascade in framework.css)
  * .kol-sidenav-link         nav link with active-dot indicator
- * .kol-sidenav-group        small vertical wrapper
  *
  * Layout/sizing/responsive collapse rules stay in kol-framework.css
  * (they're page-grid concerns, not component chrome).
@@ -727,9 +726,11 @@
   color: var(--kol-accent-primary);
 }
 
-.kol-sidenav-group {
-  padding: 4px 0 4px;
-}
+/* .kol-sidenav-group — RETIRED here 0.52.1 (sidenav-nested-groups): the
+ * elder's `padding: 4px 0` wrapper, dead since the 2026-08-09 port dropped
+ * group rendering. The group's box now lives in kol-framework.css beside the
+ * hop and list rules; a consumer that nests the framework import under the
+ * theme's layer (the showcase does) had this rule outranking that one. */
 
 /* The rail leaf had NO focus treatment at all (ThreeColumnEditorShell §3,
  * kol-fxr 2026-08-15) — only .is-active and its dot — so it fell through to

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.51.0",
+  "version": "0.52.1",
   "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",