@kolkrabbi/kol-theme 0.11.4 → 0.11.6

package/kol-base-tokens.css

@@ -75,3 +75,36 @@
   --kol-surface-absolute-split: #000000;
   --kol-surface-absolute-split-inverse: #ffffff;
 }
+
+/* System-follow dark (0.11.6, user law: explicit choice > system > light).
+ * Applies ONLY when no explicit theme is stamped — a consumer that sets
+ * data-theme (any value) vetoes the OS. MIRROR of the block above — edit both. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --kol-link:       #60A5FA;
+    --kol-link-hover: #93C5FD;
+
+    --kol-surface-primary: #121215;
+    --kol-surface-on-primary: #fafafa;
+
+    --kol-surface-secondary: #19191d;
+    --kol-surface-on-secondary: #f8f8f8;
+
+    --kol-surface-tertiary: #0e0e11;
+    --kol-surface-on-tertiary: #ffffff;
+
+    --kol-surface-inverse: #fcfbf8;
+    --kol-surface-on-inverse: #0e0e11;
+
+    --kol-surface-secondary-inverse: #e0e0e0;
+    --kol-surface-tertiary-inverse: #d4d4d8;
+
+    --kol-surface-contrast: #0b0b0c;
+
+    /* Surface split tokens - Dark Mode */
+    --kol-surface-support-split: #202026;
+    --kol-surface-support-split-inverse: #eeeeee;
+    --kol-surface-absolute-split: #000000;
+    --kol-surface-absolute-split-inverse: #ffffff;
+  }
+}

package/kol-components-atoms.css

@@ -232,6 +232,14 @@
 .kol-btn-icon {
   line-height: 0;
 }
+/* Icon-only is a GEOMETRY condition, not a variant (2026-07-28, user-ordered):
+ * a lone glyph gets a SQUARE box in every variant — the rung's vertical pad on
+ * all four sides (sm 24 / md 30 / lg 36 outer = the text-button height of the
+ * same rung, so mixed rows line up). Kills the pill shape the horizontal rung
+ * padding produced on icon-only buttons. */
+.kol-btn-icon.kol-btn-sm { padding: 4px; }
+.kol-btn-icon.kol-btn-md { padding: 6px; }
+.kol-btn-icon.kol-btn-lg { padding: 8px; }
 
 .kol-btn-primary {
   background: var(--kol-surface-secondary);
@@ -319,9 +327,8 @@
   background-color: var(--kol-oq-08);
   color: var(--kol-surface-on-primary);
 }
-.kol-btn-nav.kol-btn-sm { padding: 4px; }
-.kol-btn-nav.kol-btn-md { padding: 6px; }
-.kol-btn-nav.kol-btn-lg { padding: 8px; }
+/* square box comes from .kol-btn-icon (geometry, all variants) — no
+ * nav-specific padding rules needed */
 
 /* Grey (2026-07-15, user-ordered) — pill-subtle's visual weight as a real
  * Button variant on the opaque tier: rest oq-12, hover/active one stop past

package/kol-theme.css

@@ -119,4 +119,16 @@
   --kol-shadow-xl: 0 20px 25px rgba(255, 255, 255, 0.1);
   --kol-shadow-inner: inset 0 2px 4px rgba(255, 255, 255, 0.04);
 }
+
+/* System-follow dark (0.11.6) — only when no explicit theme is stamped.
+ * MIRROR of the block above — edit both. */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --kol-shadow-sm: 0 1px 2px rgba(255, 255, 255, 0.03);
+    --kol-shadow-md: 0 4px 6px rgba(255, 255, 255, 0.05);
+    --kol-shadow-lg: 0 10px 15px rgba(255, 255, 255, 0.08);
+    --kol-shadow-xl: 0 20px 25px rgba(255, 255, 255, 0.1);
+    --kol-shadow-inner: inset 0 2px 4px rgba(255, 255, 255, 0.04);
+  }
+}
 }

package/package.json

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