@kolkrabbi/kol-theme 0.9.2 → 0.10.0

package/kol-typography.css

@@ -772,6 +772,14 @@
   --kol-text-body-01: 16px;
   --kol-text-body-02: 14px;
   --kol-text-body-03: 12px;
+
+  /* Display Tight — the condensed-caps display voice (lobbied from the
+   * website's elder type system 2026-07-16). Own ladder with a 1024px step —
+   * deliberately NOT the sans-display ladder: values preserve the lobbied
+   * rendering exactly. */
+  --kol-text-display-tight-01: 48px;
+  --kol-text-display-tight-02: 40px;
+  --kol-text-display-tight-03: 32px;
 }
 
 @media (min-width: 768px) {
@@ -780,6 +788,18 @@
     --kol-text-display-02: 56px;
     --kol-text-display-03: 42px;
     --kol-text-heading-01: 56px;
+    --kol-text-display-tight-01: 64px;
+    --kol-text-display-tight-02: 48px;
+    --kol-text-display-tight-03: 40px;
+  }
+}
+
+/* Display Tight tops out at 1024, not 1280 — the lobbied ladder's own step. */
+@media (min-width: 1024px) {
+  :root {
+    --kol-text-display-tight-01: 96px;
+    --kol-text-display-tight-02: 64px;
+    --kol-text-display-tight-03: 48px;
   }
 }
 
@@ -813,6 +833,53 @@
 /* .kol-sans-display-03 deferred — orphan in current consumers. Token defined.
  * Add the class when a consumer needs it. */
 
+/* =============================================================================
+ * DISPLAY TIGHT — the condensed-caps display voice: base sans + the variable
+ * width axis (font-stretch), weight 470. Uppercase BY CONTRACT — display
+ * classes are the one type family that carries text-transform; the display
+ * voice is caps by design language.
+ * Lobbied verbatim from the website's elder type system (2026-07-16) so call
+ * sites migrate without renames. `kol-heading-display` was a byte-identical
+ * duplicate of `kol-display-lg` and was not carried — map it to display-lg.
+ * ============================================================================= */
+
+.kol-display-lg {
+  font-family: var(--kol-font-family-sans);
+  font-stretch: extra-condensed;
+  font-weight: 470;
+  font-size: var(--kol-text-display-tight-01);
+  line-height: 100%;
+  text-transform: uppercase;
+  color: var(--kol-fg-emphasis);
+}
+
+.kol-display-section {
+  font-family: var(--kol-font-family-sans);
+  font-stretch: extra-condensed;
+  font-weight: 470;
+  font-size: var(--kol-text-display-tight-02);
+  line-height: 100%;
+  text-transform: uppercase;
+}
+
+.kol-display-section-sm {
+  font-family: var(--kol-font-family-sans);
+  font-stretch: extra-condensed;
+  font-weight: 470;
+  font-size: var(--kol-text-display-tight-03);
+  line-height: 100%;
+  text-transform: uppercase;
+}
+
+/* subsection — the Narrow face, one voice quieter than section-sm */
+.kol-display-subsection {
+  font-family: var(--kol-font-family-sans-narrow);
+  font-weight: 470;
+  font-size: var(--kol-text-display-tight-03);
+  line-height: 100%;
+  text-transform: uppercase;
+}
+
 /* =============================================================================
  * HEADINGS — H1 sans Narrow, H2-H5 sans Compact, weight 500.
  * 01 = H1 anchor (matches prose H1). 02-06 use Compact for visual rhythm
@@ -897,7 +964,9 @@
   font-weight: 300;
   line-height: 24px;
   letter-spacing: 0.02em;
-  color: var(--kol-fg-80);
+  /* Text-role contract (kol-opacity roles): body copy sits at the body role;
+   * emphasis/strong/headings climb the ladder from there. */
+  color: var(--kol-fg-body);
 }
 
 .kol-prose > :first-child { margin-top: 0; }
@@ -970,7 +1039,7 @@
   line-height: 16px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
-  color: var(--kol-fg-64);
+  color: var(--kol-fg-body);
   margin: 0;
 }
 
@@ -987,7 +1056,7 @@
 .kol-prose h5,
 .kol-prose h6 {
   font-weight: 500;
-  color: var(--kol-surface-on-primary);
+  color: var(--kol-fg-emphasis);
 }
 
 .kol-prose h1 { font-family: var(--kol-font-family-sans-narrow);  font-size: var(--kol-text-heading-01); line-height: 52px; margin: 0 0 24px; }
@@ -1010,8 +1079,10 @@
 
 /* ─── Inline ─── */
 
-.kol-prose em     { font-style: italic; }
-.kol-prose strong { font-weight: 700; }
+/* Inline emphasis climbs the role ladder out of the body color:
+ * em stresses at the strong role, strong lands on full-ink emphasis. */
+.kol-prose em     { font-style: italic; color: var(--kol-fg-strong); }
+.kol-prose strong { font-weight: 700; color: var(--kol-fg-emphasis); }
 
 /* ─── Code (inline + block) — JetBrains Mono via the mono token. Same family
  *     as `.kol-mono-N` so a future swap cascades. Body weight 400. ─── */
@@ -1058,7 +1129,7 @@
   margin: 0 0 8px;
   font-size: 24px;
   line-height: 32px;
-  color: var(--kol-surface-on-primary);
+  color: var(--kol-fg-emphasis);
 }
 
 .kol-prose blockquote cite {
@@ -1069,7 +1140,7 @@
   font-weight: 500;
   line-height: 16px;
   letter-spacing: 0.04em;
-  color: var(--kol-fg-48);
+  color: var(--kol-fg-meta);
 }
 
 .kol-prose blockquote cite::before { content: '— '; opacity: 0.6; }
@@ -1106,7 +1177,7 @@
 .kol-segment-title {
   font-family: var(--kol-font-family-sans-compact);
   font-weight: 500;
-  color: var(--kol-surface-on-primary);
+  color: var(--kol-fg-emphasis);
 }
 
 /* standalone caption block (the `caption` block type) */
@@ -1116,7 +1187,7 @@
   font-size: 12px;
   line-height: 16px;
   letter-spacing: 0.02em;
-  color: var(--kol-fg-48, color-mix(in srgb, var(--kol-surface-on-primary) 48%, transparent));
+  color: var(--kol-fg-meta);
 }
 
 /* inline links (the `link` mark) */

package/package.json

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