@kolkrabbi/kol-framework 0.5.0 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "KOL app shell — sidenav, layout, theme toggle, footer, heroes + brand color layer. SideNav takes nav data as props so the tree stays app-local.",
   "license": "MIT",
   "type": "module",
@@ -27,7 +27,7 @@
     "app-shell"
   ],
   "dependencies": {
-    "@kolkrabbi/kol-component": "0.11.0",
+    "@kolkrabbi/kol-component": "0.12.0",
     "@kolkrabbi/kol-icons": "0.7.0"
   },
   "peerDependencies": {

package/src/ShellHeader.jsx

@@ -133,7 +133,7 @@ export default function ShellHeader({
                       onClick={onTocToggle}
                       aria-label="Toggle table of contents sidebar"
                     >
-                      <Icon name="dock-right" size={18} />
+                      <Icon name="panel-right" size={18} />
                     </button>
                   )}
                 </div>

package/src/ThemeToggle.jsx

@@ -5,9 +5,9 @@ import { useTheme } from './theme.js'
  * Theme toggle — horizontal icon-swap button.
  *
  * Variants:
- *   icon     — minimal 32×32 icon-only button (no container chrome). For
- *              top-bar / nav-bar use where the toggle sits inline with other
- *              icon buttons.
+ *   icon     — icon-only button on the DS button ladder: `size` 'sm'|'md'|'lg'
+ *              → 14/16/18px glyph, box + hover from the ghost .kol-btn chrome,
+ *              so the toggle sizes exactly like sibling icon buttons in a bar.
  *   hop      — full-width labeled Button-primary-styled sidenav row
  *              (bg-fg-04, on-primary text). For sidenav rows where it pairs
  *              with other Button-primary "hop" entries.
@@ -22,7 +22,7 @@ import { useTheme } from './theme.js'
  * horizontally — the split-circle glyph makes the slide itself read as
  * the flip (same-icon slide, per design).
  */
-export default function ThemeToggle({ variant = 'icon', className = '' }) {
+export default function ThemeToggle({ variant = 'icon', size = 'md', className = '' }) {
   const { isDark, toggle } = useTheme()
 
   const next = isDark ? 'light' : 'dark'
@@ -69,17 +69,20 @@ export default function ThemeToggle({ variant = 'icon', className = '' }) {
     )
   }
 
-  // variant === 'icon' (default) — 36×36 button / 20px glyph, the DS reference
-  // (user-verified 2026-07-15; was 32/18, which consumers shimmed via CSS)
+  // variant === 'icon' (default) — geometry from the DS button ladder
+  // (sm 14 / md 16 / lg 18 glyph), chrome = ghost icon-only .kol-btn.
+  // Overrules the 2026-07-15 "36×36/20 reference" one-off (user ruling
+  // 2026-07-28: the button ladder is the reference, bar icons included).
+  const glyph = size === 'sm' ? 14 : size === 'lg' ? 18 : 16
   return (
     <button
       type="button"
       onClick={handleToggle}
       aria-label={`Switch to ${next} mode`}
       title={`Switch to ${next} mode`}
-      className={`inline-flex items-center justify-center w-9 h-9 p-0 bg-transparent border-0 cursor-pointer text-emphasis hover:opacity-80 transition-opacity duration-300 ${className}`.trim()}
+      className={`kol-btn kol-btn-ghost kol-btn-${size} kol-btn-icon ${className}`.trim()}
     >
-      {iconSwap(20)}
+      {iconSwap(glyph)}
     </button>
   )
 }

package/src/theme.js

@@ -2,10 +2,11 @@ import { useEffect, useState } from 'react'
 
 /* Theme-state machinery — the logic behind ThemeToggle, exported so app code
  * (navbars, heroes, anything theme-aware) can read/set the theme without
- * mounting the toggle UI. Policy (unchanged from ThemeToggle): the DS is
- * light-first; an explicit choice is an app-set data-theme attribute or a
- * saved user toggle, and absent both the page follows prefers-color-scheme
- * via the theme CSS. `data-theme` + localStorage are written ONLY through
+ * mounting the toggle UI. Policy: the DS is light-first (USER law, theme
+ * 0.9.2 dropped the OS-follow auto-dark CSS); an explicit choice is an
+ * app-set data-theme attribute or a saved user toggle, and absent both the
+ * theme is light — never the OS preference, so state can't disagree with
+ * what the CSS renders. `data-theme` + localStorage are written ONLY through
  * applyTheme (a user action) — mounting a reader leaves the DOM untouched. */
 
 export const THEME_STORAGE_KEY = 'kol-theme'
@@ -22,8 +23,7 @@ function getExplicitTheme() {
 
 export function getInitialTheme() {
   if (typeof document === 'undefined') return 'light'
-  return getExplicitTheme()
-    ?? (window.matchMedia?.('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light')
+  return getExplicitTheme() ?? 'light'
 }
 
 /** Stamp + persist an explicit theme choice. */
@@ -37,8 +37,8 @@ export function applyTheme(theme) {
  *
  * All instances observe the html `data-theme` attribute, so any writer
  * (this hook's setTheme, ThemeToggle, an app boot script) updates every
- * reader. When the page has no explicit choice, instances follow the
- * system preference. Returns { theme, isDark, setTheme, toggle }.
+ * reader. When the page has no explicit choice, the theme is light
+ * (light-first law). Returns { theme, isDark, setTheme, toggle }.
  */
 export function useTheme() {
   const [theme, setThemeState] = useState(getInitialTheme)
@@ -62,18 +62,8 @@ export function useTheme() {
     })
     observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })
 
-    /* No explicit choice anywhere — follow the system, like the theme CSS. */
-    const mq = window.matchMedia?.('(prefers-color-scheme: dark)')
-    const onChange = (e) => {
-      try { if (localStorage.getItem(THEME_STORAGE_KEY)) return } catch { /* storage blocked */ }
-      if (document.documentElement.dataset.theme) return
-      setThemeState(e.matches ? 'dark' : 'light')
-    }
-    mq?.addEventListener?.('change', onChange)
-
     return () => {
       observer.disconnect()
-      mq?.removeEventListener?.('change', onChange)
     }
   }, [])