@kolkrabbi/kol-framework 0.6.2 → 0.6.4

package/README.md

@@ -17,9 +17,14 @@ npm i @kolkrabbi/kol-framework @kolkrabbi/kol-component @kolkrabbi/kol-theme
 @import "tailwindcss";
 @import "@kolkrabbi/kol-theme";
 @import "@kolkrabbi/kol-framework/kol-brand-color.css";
-@import "@kolkrabbi/kol-framework/kol-framework.css";
+@import "@kolkrabbi/kol-framework/kol-framework.css" layer(components);
 ```
 
+`layer(components)` is **required**, not optional. Unlayered rules outrank every
+layered rule regardless of specificity, so a bare import promotes framework
+chrome above the theme's type layer and the same package renders differently
+per consumer.
+
 ```jsx
 import { AppShell } from '@kolkrabbi/kol-framework'
 import { NAV_TREE, getActivePage } from './sidebars.config'

package/kol-framework.css

@@ -238,43 +238,13 @@ body {
 /* 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. */
-
-.kol-prose-indented {
-  padding-left: 32px;
-  border-left: 1px solid var(--kol-fg-16);
-}
-
-.kol-prose pre {
-  margin: 0 0 24px;
-  padding: 16px;
-  border-radius: 4px;
-  font-family: 'Right Grotesk Mono', monospace;
-  font-size: 16px;
-  line-height: 24px;
-  overflow-x: auto;
-}
-
-.kol-prose code {
-  font-family: var(--kol-font-family-mono, monospace);
-  font-size: 0.9em;
-  padding: 1px 4px;
-  border-radius: 3px;
-}
-
-.kol-prose pre code {
-  padding: 0;
-  background: none;
-  border-radius: 0;
-}
-
-.kol-prose-pullout {
-  padding: 16px 0;
-  margin: 32px 0;
-  border-top: 1px solid var(--kol-fg-08);
-  border-bottom: 1px solid var(--kol-fg-08);
-}
+/* Prose chrome lives in kol-theme, ONE home (task 8, 2026-07-30). The copies
+   that stood here (.kol-prose-indented, .kol-prose-pullout, .kol-prose
+   pre/code) duplicated theme selectors exactly, so whichever sheet loaded last
+   won — and the `pre` copy hardcoded 'Right Grotesk Mono' instead of the mono
+   token, so when framework won, prose code rendered in the wrong family.
+   Owners: kol-type-roles.css (pre/code) · kol-components-atoms.css
+   (-indented / -pullout). Do not re-add them here. */
 
 /* ───── Fullscreen overlay ───── */
 
@@ -586,114 +556,11 @@ body {
 
 /* .kol-combo-* (+ @keyframes kol-combo-fade) relocated to kol-theme/kol-components-styleguide.css 2026-07-10 */
 
-/* ═════════════════════════════════════════════════════════════════════
-   SpectrumGrid — matrix color-token grid (9 ramps × 10 stops)
-   ═════════════════════════════════════════════════════════════════════ */
-
-.kol-spectrum-grid {
-  display: grid;
-  grid-template-columns: 100px repeat(10, minmax(0, 1fr));
-  gap: 4px;
-  width: 100%;
-}
-
-.kol-spectrum-grid--loading {
-  min-height: 400px;
-  background: var(--kol-fg-02);
-  border-radius: 6px;
-}
-
-.kol-spectrum-grid-head {
-  display: contents;
-}
-
-.kol-spectrum-grid-corner {
-  grid-column: 1;
-}
-
-.kol-spectrum-grid-stop-label {
-  font-family: var(--kol-font-family-mono, monospace);
-  font-size: 11px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--kol-fg-48);
-  padding: 4px 6px;
-  text-align: center;
-}
-
-.kol-spectrum-grid-row {
-  display: contents;
-}
+/* SpectrumGrid chrome moved to kol-theme/kol-components-molecules.css
+   2026-07-30 (task 8): it was defined in BOTH packages, so the cascade picked
+   a winner by load order and a consumer editing the theme copy saw nothing.
+   Theme owns component chrome. */
 
-.kol-spectrum-grid-row-label {
-  font-family: var(--kol-font-family-mono, monospace);
-  font-size: 12px;
-  font-weight: 500;
-  letter-spacing: 0.02em;
-  color: var(--kol-surface-on-primary);
-  align-self: center;
-  padding-right: 12px;
-}
-
-.kol-spectrum-grid-row-label::first-letter {
-  text-transform: uppercase;
-}
-
-.kol-spectrum-grid-cell {
-  position: relative;
-  aspect-ratio: 5 / 3;
-  min-width: 0;
-  border-radius: 4px;
-  padding: 6px 8px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  transition: transform 120ms ease;
-}
-
-.kol-spectrum-grid-cell-marker {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: currentColor;
-  opacity: 0.85;
-  pointer-events: none;
-}
-
-.kol-spectrum-grid-cell:hover {
-  transform: scale(1.04);
-}
-
-.kol-spectrum-grid-cell-stop {
-  font-family: var(--kol-font-family-mono, monospace);
-  font-weight: 700;
-  font-size: 12px;
-  letter-spacing: 0.04em;
-}
-
-.kol-spectrum-grid-cell-hex {
-  font-family: var(--kol-font-family-mono, monospace);
-  font-size: 9px;
-  text-transform: uppercase;
-  opacity: 0.78;
-}
-
-@media (max-width: 900px) {
-  .kol-spectrum-grid {
-    grid-template-columns: 72px repeat(10, minmax(0, 1fr));
-    gap: 2px;
-  }
-  .kol-spectrum-grid-cell {
-    padding: 4px;
-  }
-  .kol-spectrum-grid-cell-hex {
-    display: none;
-  }
-}
 
 
 /* .kol-anatomy-sample-* relocated to kol-theme/kol-components-styleguide.css 2026-07-10 */
@@ -828,7 +695,13 @@ body {
   align-items: center;
   gap: 6px;
   font-family: var(--kol-font-family-mono, monospace);
-  font-size: 13px;
+  /* The tab IS kol-mono-14 (14/18). Stated here, not as a utility class on the
+     element: this rule and the utility have equal specificity, so whichever
+     stylesheet loads last wins — and that flipped per consumer depending on
+     whether kol-framework.css was imported into a layer. Type lives in the
+     rule; do not re-add a kol-mono-* class to the tab. */
+  font-size: 14px;
+  line-height: 18px;
   font-weight: 500;
   letter-spacing: 0.02em;
   color: var(--kol-fg-64);
@@ -856,7 +729,8 @@ body {
   }
 
   .kol-shell-header-tab {
-    font-size: 16px;
+    /* No type bump — 14/18 is the tab size at every viewport (user ruling
+       2026-07-30). Only the spacing breathes at wide widths. */
     gap: 8px;
     padding-top: 10px;
     padding-bottom: 14px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.6.2",
+  "version": "0.6.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.12.19",
+    "@kolkrabbi/kol-component": "0.13.0",
     "@kolkrabbi/kol-icons": "0.8.10"
   },
   "peerDependencies": {

package/src/ShellHeader.jsx

@@ -112,7 +112,7 @@ export default function ShellHeader({
                     <a
                       key={item.href ?? item.label}
                       href={item.href}
-                      className="kol-shell-header-tab kol-mono-14"
+                      className="kol-shell-header-tab"
                       aria-current={active ? 'page' : undefined}
                       onClick={onNavigate ? (event) => onNavigate(event, item) : undefined}
                     >