@kolkrabbi/kol-framework 0.3.3 → 0.3.5

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

@@ -233,28 +233,7 @@ code, pre {
   .kol-asset-grid-4col { grid-template-columns: 1fr; }
 }
 
-/* ───── Mood tile (image + overlay logomark) ─────
-   Wrappers inlined in MoodTile.jsx. CSS retains descendant img positioning
-   (cover-crop the photo) + overlay logo sizing. */
-
-.kol-mood-tile-frame img {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.kol-mood-tile-overlay .kol-brand-logo {
-  width: 32%;
-  max-width: 180px;
-  display: inline-flex;
-}
-
-.kol-mood-tile-overlay svg {
-  width: 100%;
-  height: auto;
-}
+/* .kol-mood-tile-* relocated to kol-theme/kol-components-styleguide.css 2026-07-10 */
 
 /* ───── Swatch / Ramp (color specimens) ───── */
 
@@ -684,324 +663,7 @@ code, pre {
 /* ───── Foundations · typography specimens ─────
    Wrappers fully inlined in TypographySections.jsx. */
 
-/* ───── Combo Lab layout primitives — shared structure classes ───── */
-
-.kol-combo-frame {
-  border-radius: 4px;
-  overflow: hidden;
-  transition: background-color 400ms ease, border-color 400ms ease;
-}
-
-.kol-combo-slab {
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  min-height: 0;
-  transition: background-color 400ms ease, color 400ms ease;
-}
-
-.kol-combo-slab--end     { justify-content: flex-end; }
-.kol-combo-slab--between { justify-content: space-between; }
-
-.kol-combo-label {
-  font-family: 'Right Grotesk Compact', sans-serif;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 100%;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.kol-combo-number {
-  font-family: 'Right Grotesk', sans-serif;
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 100%;
-  letter-spacing: 0.02em;
-}
-
-.kol-combo-stage--fill {
-  height: 100%;
-  min-height: 360px;
-  width: 100%;
-}
-
-.kol-combo-logo {
-  display: inline-flex;
-  color: currentColor;
-}
-
-/* 60 / 30 / 10 */
-.kol-combo-stage--ratio { display: flex; }
-.kol-combo-stage--ratio > :nth-child(1) { flex: 1; }
-.kol-combo-stage--ratio > :nth-child(2) { flex: 3; }
-.kol-combo-stage--ratio > :nth-child(3) { flex: 6; }
-
-/* Tower */
-.kol-combo-stage--tower {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-}
-.kol-combo-stage--tower > * { flex: 1; }
-
-/* Quad split */
-.kol-combo-stage--quad { display: flex; }
-.kol-combo-stage--quad > * { flex: 1; }
-
-.kol-combo-quad-col {
-  display: flex;
-  flex-direction: column;
-}
-.kol-combo-quad-col > * { flex: 1; }
-
-/* Card row */
-.kol-combo-stage--card-row {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 16px;
-  height: 100%;
-  min-height: 360px;
-  width: 100%;
-}
-
-.kol-combo-card {
-  flex: 1;
-  min-height: 240px;
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  transition: background-color 400ms ease, color 400ms ease;
-}
-
-.kol-combo-card--end     { justify-content: flex-end; }
-.kol-combo-card--between { justify-content: space-between; }
-
-/* Stripe row */
-.kol-combo-stage--stripe-row {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  height: 100%;
-  min-height: 360px;
-  width: 100%;
-}
-
-.kol-combo-stripe-row {
-  display: flex;
-  flex: 1;
-  align-items: stretch;
-  width: 100%;
-}
-
-.kol-combo-stripe-bar {
-  display: flex;
-  flex: 1;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.kol-combo-stripe-seg { transition: background-color 400ms ease; }
-.kol-combo-stripe-seg--6 { flex: 6; }
-.kol-combo-stripe-seg--3 { flex: 3; }
-.kol-combo-stripe-seg--1 { flex: 1; }
-
-.kol-combo-stripe-group { display: flex; }
-.kol-combo-stripe-group--3 { flex: 3; }
-.kol-combo-stripe-group--1 { flex: 1; }
-
-.kol-combo-stripe-neutral {
-  border-top: 1px solid var(--stripe-rule, transparent);
-  border-bottom: 1px solid var(--stripe-rule, transparent);
-}
-
-.kol-combo-stripe-accent-border {
-  border: 1.73px solid var(--stripe-accent, transparent);
-}
-
-.kol-combo-stripe-method {
-  position: absolute;
-  top: 12px;
-  left: 12px;
-  font-family: 'Right Grotesk Compact', sans-serif;
-  font-size: 12px;
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  line-height: 100%;
-  text-transform: uppercase;
-  color: white;
-  pointer-events: none;
-}
-
-/* Applied card */
-.kol-combo-stage--applied {
-  display: flex;
-  height: 100%;
-  min-height: 360px;
-  width: 100%;
-}
-
-.kol-combo-applied-plate {
-  flex: 2;
-  padding: 32px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  transition: background-color 400ms ease, color 400ms ease;
-}
-
-.kol-combo-applied-col {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.kol-combo-applied-surface { flex: 3; }
-.kol-combo-applied-band--lg { flex: 2; }
-.kol-combo-applied-band--sm { flex: 1; }
-.kol-combo-applied-band { transition: background-color 400ms ease; }
-
-.kol-combo-applied-accent-strip {
-  display: flex;
-  gap: 8px;
-}
-
-.kol-combo-applied-accent-chip {
-  width: 20px;
-  height: 20px;
-  border-radius: 2px;
-  transition: background-color 400ms ease;
-}
-
-/* ───── Foundations · combo lab ───── */
-
-.kol-combo-lab {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  padding: 24px;
-  border: 1px solid var(--kol-fg-08);
-  border-radius: 4px;
-  background: var(--kol-fg-02);
-}
-
-.kol-combo-controls { margin-bottom: 24px; }
-
-.kol-combo-stage-wrap {
-  flex: 1;
-  margin-bottom: 24px;
-  padding: 32px;
-  background: var(--kol-fg-02);
-  border-radius: 4px;
-  min-height: 440px;
-  display: flex;
-  align-items: stretch;
-  justify-content: center;
-}
-
-.kol-combo-stage-anim {
-  width: 100%;
-  height: 100%;
-  animation: kol-combo-fade 260ms ease;
-  display: flex;
-  align-items: stretch;
-}
-
-.kol-combo-stage-anim > * { width: 100%; height: 100%; }
-
-/* In fullbleed mode, let the lab fill the section */
-.kol-page--fullbleed .kol-combo-lab { flex: 1; }
-.kol-page--fullbleed .kol-combo-stage-wrap { min-height: 520px; }
-
-@keyframes kol-combo-fade {
-  from { opacity: 0.2; transform: translateY(6px); }
-  to   { opacity: 1;   transform: none; }
-}
-
-.kol-combo-readout {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: 8px 32px;
-  padding-top: 16px;
-  border-top: 1px solid var(--kol-fg-08);
-}
-
-/* Combo Lab — control rows (Layout / Palette / Logo selectors) */
-.kol-combo-row {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  flex-wrap: wrap;
-  margin-bottom: 12px;
-}
-
-.kol-combo-row-label { min-width: 72px; }
-
-.kol-combo-row-controls {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-.kol-combo-footer {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  margin-top: 8px;
-}
-
-.kol-combo-footer-desc { flex: 1; }
-
-.kol-combo-randomize {
-  padding: 8px 16px;
-  background: transparent;
-  color: var(--kol-fg-80);
-  border: 1px solid var(--kol-fg-16);
-  border-radius: 4px;
-  font-family: var(--kol-font-family-mono, monospace);
-  font-weight: 600;
-  cursor: pointer;
-  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
-}
-
-.kol-combo-randomize:hover {
-  color: var(--kol-surface-on-primary);
-  border-color: var(--kol-fg-48);
-  background: var(--kol-fg-04);
-}
-
-/* Combo Lab — live palette readout rows */
-.kol-combo-swatch-row {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 6px 0;
-}
-
-.kol-combo-swatch-chip {
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-  border-radius: 3px;
-  transition: background 400ms ease;
-}
-
-.kol-combo-swatch-label {
-  min-width: 88px;
-  font-weight: 600;
-}
-
-.kol-combo-swatch-hex {
-  font-family: var(--kol-font-family-mono, monospace);
-  text-transform: uppercase;
-}
-
-.kol-combo-summary { margin-top: 16px; }
+/* .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)
@@ -1113,28 +775,7 @@ code, pre {
 }
 
 
-/* ═════════════════════════════════════════════════════════════════════
-   Color Anatomy — token composition samples
-
-   Wrappers inlined in ColorAnatomy.jsx; figure margin via Preflight.
-   CSS retains the descendant typography for figcaption + inline <code>.
-   ═════════════════════════════════════════════════════════════════════ */
-
-.kol-anatomy-sample figcaption {
-  margin-top: 12px;
-  font-size: 12px;
-  color: var(--kol-fg-48);
-  font-style: italic;
-}
-
-.kol-anatomy-sample code {
-  font-family: var(--kol-font-family-mono, monospace);
-  font-size: 11px;
-  background: color-mix(in srgb, currentColor 18%, transparent);
-  padding: 1px 4px;
-  border-radius: 3px;
-  opacity: 1;
-}
+/* .kol-anatomy-sample-* relocated to kol-theme/kol-components-styleguide.css 2026-07-10 */
 
 
 /* ═════════════════════════════════════════════════════════════════════

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "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.8.0",
+    "@kolkrabbi/kol-component": "0.9.0",
     "@kolkrabbi/kol-icons": "0.5.0"
   },
   "peerDependencies": {