@kolkrabbi/kol-theme 0.7.2 → 0.7.4

package/kol-components-atoms.css

@@ -813,11 +813,6 @@ a:hover .icon-hover,
 }
 
 /* ─────────────────────────────────────────────────────────────────────
- * Type-specimen kit — TARGET: packages/theme/kol-components-atoms.css
- *   (the two .kol-prose-* rules may alternatively land in the prose
- *   section of packages/theme/kol-typography.css per the ProsePreview
- *   lobby spec — pick one home, not both.)
- *
  * Ported from kol-monorepo apps/brand/src/components/framework/
  * kol-framework.css. NOT ported (already in kol-typography.css, richer
  * DS versions win): .kol-prose pre, .kol-prose code, .kol-prose pre code.
@@ -826,21 +821,11 @@ a:hover .icon-hover,
  * No text-transform rules existed in the source CSS; the components'
  * Tailwind `uppercase` classes were dropped per the KOL no-auto-casing
  * rule — author labels/pullouts in their final case.
+ * The type-specimen kit rules (TypeSample / TypeSpecCard / TextPressure)
+ * moved to kol-components-foundry.css 2026-07-09 with the components'
+ * move to @kolkrabbi/kol-foundry.
  * ───────────────────────────────────────────────────────────────────── */
 
-/* ─── TypeSample — atoms/TypeSample.jsx ───
-   Wrapper padding inlined in the component; adjacent-sibling hairline
-   separates stacked samples. */
-.kol-type-sample + .kol-type-sample {
-  border-top: 1px solid var(--kol-fg-08);
-}
-
-/* ─── TypeSpecCard — atoms/TypeSpecCard.jsx ───
-   Layout inlined in the component; descendant <p> overrides give sample
-   prose 16px rhythm (Preflight zeroes <p> margin). */
-.kol-type-spec-sample p { margin: 0 0 16px; }
-.kol-type-spec-sample p:last-child { margin-bottom: 0; }
-
 /* ─── ProsePreview — atoms/ProsePreview.jsx ───
    Prose chrome beyond the base .kol-prose contract. */
 .kol-prose-indented {
@@ -854,29 +839,3 @@ a:hover .icon-hover,
   border-top: 1px solid var(--kol-fg-08);
   border-bottom: 1px solid var(--kol-fg-08);
 }
-
-/* =============================================================================
- * TextPressure  (atom)
- * append to packages/theme/kol-components-atoms.css
- *
- * Only the outlined-ghost layer lives here — it needs a ::after pseudo-element
- * and -webkit-text-stroke, neither expressible in Tailwind or inline style.
- * Everything else (layout, sizing, weight) is Tailwind utilities / inline vars
- * on the JSX. Stroke color comes in through the inline `--kol-text-pressure-
- * stroke` custom property (defaulted here so the rule is standalone-safe).
- * ============================================================================= */
-
-.kol-text-pressure--stroke .kol-text-pressure-char {
-  position: relative;
-}
-
-.kol-text-pressure--stroke .kol-text-pressure-char::after {
-  content: attr(data-char);
-  position: absolute;
-  left: 0;
-  top: 0;
-  color: transparent;
-  z-index: -1;
-  -webkit-text-stroke-width: 3px;
-  -webkit-text-stroke-color: var(--kol-text-pressure-stroke, var(--kol-accent-primary));
-}

package/kol-components-foundry.css

@@ -0,0 +1,49 @@
+/* =============================================================================
+ * KOL components — foundry (@kolkrabbi/kol-foundry)
+ * =============================================================================
+ * Component CSS for the type-specimen apparatus. Recreated 2026-07-09 when the
+ * type-specimen kit + live-font effects (TypeSample, TypeSpecCard, TextPressure,
+ * ColorLoader) moved from @kolkrabbi/kol-component into @kolkrabbi/kol-foundry;
+ * their rules moved here from kol-components-atoms.css with them. CSS always
+ * lives in kol-theme — the foundry package ships JS only.
+ *
+ * Layer: this file ships unlayered; kol-theme.css assigns the layer at import —
+ *   @import "./kol-components-foundry.css" layer(components);
+ * placing it in the `components` cascade layer alongside the rest of KOL chrome,
+ * so consumer utilities (a later Tailwind layer) still override it.
+ * ============================================================================= */
+
+/* ─── TypeSample — TypeSample.jsx ───
+   Wrapper padding inlined in the component; adjacent-sibling hairline
+   separates stacked samples. */
+.kol-type-sample + .kol-type-sample {
+  border-top: 1px solid var(--kol-fg-08);
+}
+
+/* ─── TypeSpecCard — TypeSpecCard.jsx ───
+   Layout inlined in the component; descendant <p> overrides give sample
+   prose 16px rhythm (Preflight zeroes <p> margin). */
+.kol-type-spec-sample p { margin: 0 0 16px; }
+.kol-type-spec-sample p:last-child { margin-bottom: 0; }
+
+/* ─── TextPressure — TextPressure.jsx ───
+   Only the outlined-ghost layer lives here — it needs a ::after pseudo-element
+   and -webkit-text-stroke, neither expressible in Tailwind or inline style.
+   Everything else (layout, sizing, weight) is Tailwind utilities / inline vars
+   on the JSX. Stroke color comes in through the inline `--kol-text-pressure-
+   stroke` custom property (defaulted here so the rule is standalone-safe).
+   ColorLoader composes TextPressure and needs no rules of its own. */
+.kol-text-pressure--stroke .kol-text-pressure-char {
+  position: relative;
+}
+
+.kol-text-pressure--stroke .kol-text-pressure-char::after {
+  content: attr(data-char);
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: transparent;
+  z-index: -1;
+  -webkit-text-stroke-width: 3px;
+  -webkit-text-stroke-color: var(--kol-text-pressure-stroke, var(--kol-accent-primary));
+}

package/kol-components-styleguide.css

@@ -0,0 +1,396 @@
+/* =============================================================================
+ * KOL components — style-guide / brand-guide set
+ * =============================================================================
+ * Chrome for the @kolkrabbi/kol-styleguide component set: the combination lab,
+ * colour anatomy, mood tiles, logo construction/scaling, type blocks, asset
+ * tables. Raided from the monorepo apps/brand styleguide (2026-07).
+ *
+ * Layer: ships unlayered; kol-theme.css assigns the layer at import —
+ *   @import "./kol-components-styleguide.css" layer(components);
+ *
+ * KOL conformance: resting type + colour live INLINE on the JSX (kol-* type
+ * classes + kol colour utilities); only structural props Tailwind can't express
+ * (grid templates, absolute positioning, transitions, pseudo-elements) live here.
+ *
+ * Rules are consolidated here as each component lands. Some were relocated from
+ * packages/framework/kol-framework.css (the .kol-combo-* / .kol-anatomy-sample /
+ * .kol-mood-tile-* clusters) — theme owns component chrome, framework owns page
+ * scaffold.
+ * ============================================================================= */
+
+/* =============================================================================
+   Mood tile — relocated from packages/framework/kol-framework.css 2026-07-10
+   ============================================================================= */
+
+/* ───── 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;
+}
+
+/* =============================================================================
+   Combo lab — relocated from packages/framework/kol-framework.css 2026-07-10
+   ============================================================================= */
+
+/* ───── 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: var(--kol-font-family-sans-compact);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 100%;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.kol-combo-number {
+  font-family: var(--kol-font-family-sans);
+  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: var(--kol-font-family-sans-compact);
+  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; }
+
+/* =============================================================================
+   Color anatomy — relocated from packages/framework/kol-framework.css 2026-07-10
+   ============================================================================= */
+
+/* ═════════════════════════════════════════════════════════════════════
+   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;
+}

package/kol-theme.css

@@ -44,6 +44,8 @@
 @import "./kol-components-dashboards.css" layer(components);
 @import "./kol-components-chess.css" layer(components);
 @import "./kol-components-workshop.css" layer(components);
+@import "./kol-components-foundry.css" layer(components);
+@import "./kol-components-styleguide.css" layer(components);
 
 /* Theme-level design tokens */
 @layer components {

package/package.json

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