@kolkrabbi/kol-framework 0.3.2 → 0.3.4

package/README.md

@@ -28,3 +28,11 @@ import { NAV_TREE, getActivePage } from './sidebars.config'
 ```
 
 Exports: `AppShell`, `SideNav`, `ThemeToggle`, `Layout`, `PageSection`, `PortalFooter`, `ScrollToTop`, `BrandHero`, `SubPageHero`.
+
+## Tailwind v4 consumers
+
+Tailwind skips `node_modules` when scanning, so add this next to the imports above — otherwise the shell's layout utilities never generate and the AppShell grid collapses:
+
+```css
+@source "../node_modules/@kolkrabbi/kol-framework/src";
+```

package/kol-brand-color.css

@@ -59,6 +59,20 @@
   --kol-color-teal-400: #387E7F;
   --kol-color-teal-500: #275A5B;
 
+  /* Green — muted natural green (chart categorical hue; not a core identity anchor). ★ 300. */
+  --kol-color-green-100: #A8CBA0;
+  --kol-color-green-200: #7FB073;
+  --kol-color-green-300: #4C9A5F; /* anchor */
+  --kol-color-green-400: #37733F;
+  --kol-color-green-500: #285229;
+
+  /* Purple — muted violet (chart categorical hue; not a core identity anchor). ★ 300. */
+  --kol-color-purple-100: #B9A8D6;
+  --kol-color-purple-200: #9179B8;
+  --kol-color-purple-300: #6B4E9E; /* anchor */
+  --kol-color-purple-400: #4E3873;
+  --kol-color-purple-500: #38285A;
+
   /* Cream — utility neutral, project-flavored. */
   --kol-color-cream-100: #FAF7F0;
   --kol-color-cream-200: #F5F0E6;
@@ -97,6 +111,34 @@
   --kol-accent-on-secondary:   var(--kol-color-cream-100);  /* ink on accent-secondary */
 }
 
+/* =============================================================================
+ * CHART PALETTE + SEMANTIC ALIASES (consumed by kol-components-{chess,dashboards})
+ *
+ * The dashboards/chess chart classes reference a categorical `--kol-palette-*`
+ * scale plus a display-font + danger token. These map onto the ramps above
+ * (chart-legible mid-stops, not the identity anchors where those run too dark /
+ * light) and the theme's semantic tokens. Kept here so one edit rebrands the
+ * chart palette with the rest of the identity. Before this block these tokens
+ * resolved to nothing, collapsing every chart series onto --kol-accent-primary.
+ * ============================================================================= */
+
+:root {
+  --kol-palette-blue:   var(--kol-color-blue-200);
+  --kol-palette-green:  var(--kol-color-green-300);
+  --kol-palette-yellow: var(--kol-color-yellow-300);
+  --kol-palette-red:    var(--kol-color-red-200);
+  --kol-palette-orange: var(--kol-color-orange-300);
+  --kol-palette-purple: var(--kol-color-purple-300);
+  --kol-palette-teal:   var(--kol-color-teal-300);
+
+  /* Display heading font for the chess/dashboards specimen chrome. */
+  --kol-font-family-heading: var(--kol-font-family-sans-narrow);
+
+  /* Danger status (chess analysis results / time-class dots). */
+  --kol-status-danger:        var(--ui-error);
+  --kol-status-danger-muted:  color-mix(in srgb, var(--ui-error) 55%, transparent);
+}
+
 /* =============================================================================
  * TAILWIND CONTRACT — palette + accent exposures
  *
@@ -142,6 +184,18 @@
   --color-kol-teal-400:       var(--kol-color-teal-400);
   --color-kol-teal-500:       var(--kol-color-teal-500);
 
+  --color-kol-green-100:      var(--kol-color-green-100);
+  --color-kol-green-200:      var(--kol-color-green-200);
+  --color-kol-green-300:      var(--kol-color-green-300);
+  --color-kol-green-400:      var(--kol-color-green-400);
+  --color-kol-green-500:      var(--kol-color-green-500);
+
+  --color-kol-purple-100:     var(--kol-color-purple-100);
+  --color-kol-purple-200:     var(--kol-color-purple-200);
+  --color-kol-purple-300:     var(--kol-color-purple-300);
+  --color-kol-purple-400:     var(--kol-color-purple-400);
+  --color-kol-purple-500:     var(--kol-color-purple-500);
+
   /* Cream — utility neutral. */
   --color-kol-cream-100:      var(--kol-color-cream-100);
   --color-kol-cream-200:      var(--kol-color-cream-200);

package/kol-framework.css

@@ -285,13 +285,8 @@ code, pre {
   gap: 4px;
 }
 
-/* ───── Type sample (brand type specimen) ─────
-   Wrapper padding inlined in TypeSample.jsx; body margin handled by Preflight.
-   CSS retains the adjacent-sibling border-top that separates stacked samples. */
-
-.kol-type-sample + .kol-type-sample {
-  border-top: 1px solid var(--kol-fg-08);
-}
+/* Type-sample rule removed 2026-07-09 — was drift-flagged duplicate of the
+   theme-owned rule (now packages/theme/kol-components-foundry.css). */
 
 /* Prose moved to DS typography — see kol-typography-mono.css.
    See docs/documentation/06-framework/06-amendments.md 2026-04-23. */
@@ -529,13 +524,8 @@ code, pre {
   max-width: 100%;
 }
 
-/* ───── Typography spec card (meta panel + live sample) ─────
-   Wrappers + meta-row grid + responsive layout inlined in TypeSpecCard.jsx.
-   CSS retains the descendant <p> overrides for sample prose (Preflight zeros
-   <p> margin; specs need 16px gap between paragraphs). */
-
-.kol-type-spec-sample p { margin: 0 0 16px; }
-.kol-type-spec-sample p:last-child { margin-bottom: 0; }
+/* Type-spec-card rules removed 2026-07-09 — were drift-flagged duplicates of
+   the theme-owned rules (now packages/theme/kol-components-foundry.css). */
 
 /* ───── Exit preview (floating × button on client surfaces) ───── */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "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.6.0",
+    "@kolkrabbi/kol-component": "0.8.0",
     "@kolkrabbi/kol-icons": "0.5.0"
   },
   "peerDependencies": {

package/src/ShellHeader.jsx

@@ -61,7 +61,7 @@ export default function ShellHeader({
     <div className={`kol-shell-header sticky top-0 z-50 shrink-0 bg-surface-primary ${className}`.trim()}>
       {/* Row 1: brand block + controls */}
       <div className="border-b border-fg-08">
-        <div className="mx-auto max-w-[1800px] px-4 py-4 md:px-6 lg:px-8">
+        <div className="w-full px-4 py-4 md:px-5 lg:px-6">
           <div className="flex items-center justify-between">
             {/* kol-shell-header-brand reserves the nav-column width at lg+ so
              * the Row-2 tabs align to the shell grid. */}
@@ -89,7 +89,7 @@ export default function ShellHeader({
       {/* Row 2: section tabs + inline search + rail toggles */}
       {hasTabRow && (
         <div className="border-b border-fg-08">
-          <div className="mx-auto max-w-[1800px] px-4 md:px-5 lg:px-6">
+          <div className="w-full px-4 md:px-5 lg:px-6">
             <div className="kol-shell-header-tabs">
               <nav className="flex flex-1 gap-6" aria-label="Sections">
                 {nav.map((item) => {