@refrakt-md/lumina 0.20.2 → 0.22.0

package/contracts/structures.json

@@ -1162,6 +1162,49 @@
 				"{content}"
 			]
 		},
+		"Section": {
+			"block": "section",
+			"root": ".rf-section",
+			"dataRune": "section",
+			"childOrder": [
+				"{content}"
+			],
+			"modifiers": {
+				"align": {
+					"source": "meta",
+					"default": "start",
+					"classPattern": ".rf-section--{value}",
+					"dataAttribute": "data-align"
+				}
+			},
+			"elements": {
+				"preamble": {
+					"tag": "header",
+					"selector": ".rf-section__preamble",
+					"source": "autoLabel"
+				},
+				"eyebrow": {
+					"tag": "eyebrow",
+					"selector": ".rf-section__eyebrow",
+					"source": "autoLabel"
+				},
+				"headline": {
+					"tag": "headline",
+					"selector": ".rf-section__headline",
+					"source": "autoLabel"
+				},
+				"blurb": {
+					"tag": "blurb",
+					"selector": ".rf-section__blurb",
+					"source": "autoLabel"
+				},
+				"image": {
+					"tag": "image",
+					"selector": ".rf-section__image",
+					"source": "autoLabel"
+				}
+			}
+		},
 		"Juxtapose": {
 			"block": "juxtapose",
 			"root": ".rf-juxtapose",
@@ -1266,7 +1309,7 @@
 			"modifiers": {
 				"media-position": {
 					"source": "meta",
-					"default": "top",
+					"default": "bottom",
 					"dataAttribute": "data-media-position"
 				},
 				"align": {
@@ -1286,6 +1329,18 @@
 				"collapse": {
 					"source": "meta",
 					"dataAttribute": "data-collapse"
+				},
+				"content-place": {
+					"source": "meta",
+					"dataAttribute": "data-content-place"
+				},
+				"height": {
+					"source": "meta",
+					"dataAttribute": "data-height"
+				},
+				"aspect": {
+					"source": "meta",
+					"dataAttribute": "data-aspect"
 				}
 			},
 			"elements": {
@@ -1323,6 +1378,100 @@
 			"inlineStyles": {
 				"valign": {
 					"prop": "--split-valign"
+				},
+				"aspect": "aspect-ratio"
+			},
+			"variants": {
+				"media-position": {
+					"cover": {
+						"block": "hero",
+						"root": ".rf-hero",
+						"dataRune": "hero",
+						"childOrder": [
+							"{content}"
+						],
+						"modifiers": {
+							"media-position": {
+								"source": "meta",
+								"default": "bottom",
+								"dataAttribute": "data-media-position"
+							},
+							"align": {
+								"source": "meta",
+								"default": "center",
+								"classPattern": ".rf-hero--{value}",
+								"dataAttribute": "data-align"
+							},
+							"media-ratio": {
+								"source": "meta",
+								"dataAttribute": "data-media-ratio"
+							},
+							"valign": {
+								"source": "meta",
+								"dataAttribute": "data-valign"
+							},
+							"collapse": {
+								"source": "meta",
+								"dataAttribute": "data-collapse"
+							},
+							"content-place": {
+								"source": "meta",
+								"dataAttribute": "data-content-place"
+							},
+							"height": {
+								"source": "meta",
+								"dataAttribute": "data-height"
+							},
+							"aspect": {
+								"source": "meta",
+								"dataAttribute": "data-aspect"
+							}
+						},
+						"staticModifiers": [
+							{
+								"name": "cover",
+								"selector": ".rf-hero--cover"
+							}
+						],
+						"elements": {
+							"preamble": {
+								"tag": "header",
+								"selector": ".rf-hero__preamble",
+								"source": "autoLabel"
+							},
+							"eyebrow": {
+								"tag": "eyebrow",
+								"selector": ".rf-hero__eyebrow",
+								"source": "autoLabel"
+							},
+							"headline": {
+								"tag": "headline",
+								"selector": ".rf-hero__headline",
+								"source": "autoLabel"
+							},
+							"blurb": {
+								"tag": "blurb",
+								"selector": ".rf-hero__blurb",
+								"source": "autoLabel"
+							},
+							"image": {
+								"tag": "image",
+								"selector": ".rf-hero__image",
+								"source": "autoLabel"
+							},
+							"media": {
+								"tag": "media",
+								"selector": ".rf-hero__media",
+								"source": "autoLabel"
+							}
+						},
+						"inlineStyles": {
+							"valign": {
+								"prop": "--split-valign"
+							},
+							"aspect": "aspect-ratio"
+						}
+					}
 				}
 			}
 		},
@@ -1472,7 +1621,7 @@
 			"modifiers": {
 				"media-position": {
 					"source": "meta",
-					"default": "top",
+					"default": "bottom",
 					"dataAttribute": "data-media-position"
 				},
 				"align": {
@@ -1553,7 +1702,7 @@
 						"modifiers": {
 							"media-position": {
 								"source": "meta",
-								"default": "top",
+								"default": "bottom",
 								"dataAttribute": "data-media-position"
 							},
 							"align": {
@@ -1639,7 +1788,7 @@
 						"modifiers": {
 							"media-position": {
 								"source": "meta",
-								"default": "top",
+								"default": "bottom",
 								"dataAttribute": "data-media-position"
 							},
 							"align": {
@@ -1773,7 +1922,7 @@
 			"modifiers": {
 				"media-position": {
 					"source": "meta",
-					"default": "top",
+					"default": "bottom",
 					"dataAttribute": "data-media-position"
 				},
 				"media-ratio": {

package/dist/tokens.d.ts

@@ -5,9 +5,11 @@ import type { ThemeTokensConfig } from '@refrakt-md/types';
  * "quiet spectrum walk" syntax palette (teal / violet / rust / ochre /
  * sage), and the four muted-earthy status colours.
  *
- * This is the *source of truth* for Lumina's runtime CSS values; the
- * hand-authored `tokens/base.css` and `tokens/dark.css` mirror it
- * verbatim and a coverage test keeps the two in lockstep.
+ * This is the *source of truth* for Lumina's runtime CSS values. The
+ * `tokens/base.css` and `tokens/dark.css` files are **generated** from this
+ * export by `scripts/generate-tokens.mjs` (run as part of the package build via
+ * `generateThemeStylesheet`); a drift test (`test/token-generation.test.ts`)
+ * fails CI if the committed CSS diverges. Edit this file, never the CSS.
  *
  * Sites that want the previous cream-and-navy appearance opt into the
  * `tideline` preset shipping alongside this default (see

package/dist/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,YAAY,EAAE,iBAyL1B,CAAC"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAE3D;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,YAAY,EAAE,iBAkO1B,CAAC"}

package/dist/tokens.js

@@ -4,9 +4,11 @@
  * "quiet spectrum walk" syntax palette (teal / violet / rust / ochre /
  * sage), and the four muted-earthy status colours.
  *
- * This is the *source of truth* for Lumina's runtime CSS values; the
- * hand-authored `tokens/base.css` and `tokens/dark.css` mirror it
- * verbatim and a coverage test keeps the two in lockstep.
+ * This is the *source of truth* for Lumina's runtime CSS values. The
+ * `tokens/base.css` and `tokens/dark.css` files are **generated** from this
+ * export by `scripts/generate-tokens.mjs` (run as part of the package build via
+ * `generateThemeStylesheet`); a drift test (`test/token-generation.test.ts`)
+ * fails CI if the committed CSS diverges. Edit this file, never the CSS.
  *
  * Sites that want the previous cream-and-navy appearance opt into the
  * `tideline` preset shipping alongside this default (see
@@ -19,6 +21,43 @@ export const luminaTokens = {
     font: {
         sans: "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
         mono: "'JetBrains Mono', 'Fira Code', ui-monospace, 'Cascadia Code', monospace",
+        // Lumina is a unified-neutral theme: its headings use the same sans as
+        // body. The slot exists so an editorial theme can swap in a serif/display
+        // family without touching rune CSS.
+        display: "'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+    },
+    // SPEC-094 — typographic scale. A roughly-1.2 modular scale anchored at a
+    // 1rem body. Nothing consumes these yet (WORK-405 migrates Lumina's
+    // hardcoded sizes onto them); values match Lumina's current type feel.
+    text: {
+        xs: '0.75rem',
+        sm: '0.875rem',
+        base: '1rem',
+        lg: '1.125rem',
+        xl: '1.25rem',
+        '2xl': '1.5rem',
+        '3xl': '1.875rem',
+        '4xl': '2.5rem',
+    },
+    weight: {
+        light: '300',
+        normal: '400',
+        medium: '500',
+        semibold: '600',
+        bold: '700',
+    },
+    leading: {
+        tight: '1.2',
+        snug: '1.35',
+        normal: '1.5',
+        relaxed: '1.65',
+        loose: '2',
+    },
+    tracking: {
+        tight: '-0.01em',
+        normal: '0',
+        wide: '0.03em',
+        wider: '0.06em',
     },
     color: {
         text: '#1c1a17',

package/dist/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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"}

package/index.css

@@ -80,6 +80,7 @@
 @import './styles/runes/faction.css';
 @import './styles/runes/feature.css';
 @import './styles/runes/figure.css';
+@import './styles/runes/placeholder.css';
 @import './styles/runes/gallery.css';
 @import './styles/runes/form.css';
 @import './styles/runes/grid.css';
@@ -103,6 +104,7 @@
 @import './styles/runes/realm.css';
 @import './styles/runes/recipe.css';
 @import './styles/runes/reveal.css';
+@import './styles/runes/section.css';
 @import './styles/runes/sidenote.css';
 @import './styles/runes/steps.css';
 @import './styles/runes/storyboard.css';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@refrakt-md/lumina",
   "description": "Lumina theme for refrakt.md — design tokens, CSS, identity transform, and layout configs",
-  "version": "0.20.2",
+  "version": "0.22.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -80,12 +80,13 @@
     "assets"
   ],
   "scripts": {
-    "build": "tsc"
+    "build": "tsc && node scripts/generate-tokens.mjs",
+    "generate-tokens": "node scripts/generate-tokens.mjs"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.20.2",
-    "@refrakt-md/transform": "0.20.2",
-    "@refrakt-md/types": "0.20.2"
+    "@refrakt-md/runes": "0.22.0",
+    "@refrakt-md/transform": "0.22.0",
+    "@refrakt-md/types": "0.22.0"
   },
   "devDependencies": {
     "postcss": "^8.4.0"

package/styles/dimensions/checklist.css

@@ -40,7 +40,7 @@
 
 [data-checked="active"] {
 	color: var(--rf-color-primary);
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 }
 
 /* Skipped — muted with strikethrough */

package/styles/dimensions/cover.css

@@ -63,6 +63,24 @@
 	height: 100%;
 	object-fit: cover;
 }
+/* SPEC-101 — non-img/video guests (a sandbox, an embed) fill the well too.
+ * They can't be object-fit-cropped, so they get the well's box outright;
+ * display:block covers undefined custom elements (inline by default). */
+[data-media-position="cover"] [data-section="media"] > :not(img, video) {
+	display: block;
+	width: 100%;
+	height: 100%;
+}
+/* A backdrop sandbox sits flush in the well — the well's own radius/overflow
+ * does the clipping. The iframe height is pinned inline by the element in
+ * `fill` mode; this carries the fixed-height case visually until then. */
+[data-media-position="cover"] [data-section="media"] .rf-sandbox {
+	margin: 0;
+	border-radius: 0;
+}
+[data-media-position="cover"] [data-section="media"] .rf-sandbox iframe {
+	height: 100%;
+}
 /* The overlaid box (full: content; header: preamble) anchors via content-place. */
 [data-media-position="cover"]:not([data-cover-scope="header"]) > [data-name="content"],
 [data-cover-scope="header"] > [data-name="cover-band"] > [data-name="preamble"] {

package/styles/dimensions/density.css

@@ -9,12 +9,14 @@
 
 [data-density="full"] {
 	--rune-padding: var(--rf-spacing-md);
+	--rf-title-size: var(--rf-text-2xl);
 }
 
 /* ─── Compact: truncated descriptions, tight spacing ──────────────── */
 
 [data-density="compact"] {
 	--rune-padding: var(--rf-spacing-sm);
+	--rf-title-size: var(--rf-text-xl);
 }
 
 [data-density="compact"] [data-section="description"] {
@@ -32,6 +34,7 @@
 
 [data-density="minimal"] {
 	--rune-padding: var(--rf-spacing-xs);
+	--rf-title-size: var(--rf-text);
 }
 
 [data-density="minimal"] [data-section="description"] {

package/styles/dimensions/frame.css

@@ -42,7 +42,7 @@
  * guest so a displaced image's shadow falls into the slot's exposed
  * interior (clipped at the slot's `overflow: hidden` boundary like any
  * other in-slot content). */
-[data-section="media"][data-frame-shadow] > :is(img, video, [data-rune]) {
+[data-section="media"][data-frame-shadow] > :is(img, video, .rf-placeholder, [data-rune]) {
 	filter: var(--frame-shadow);
 }
 
@@ -50,7 +50,7 @@
 [style*="--frame-aspect"] { aspect-ratio: var(--frame-aspect); }
 
 /* ── Crop anchor — focal point when the guest is cut ─────────────────── */
-[style*="--frame-anchor"] > :is(img, video) { object-position: var(--frame-anchor); }
+[style*="--frame-anchor"] > :is(img, video, .rf-placeholder) { object-position: var(--frame-anchor); }
 
 /* ── Placement of the framed box within its slot ─────────────────────── */
 [style*="--frame-place-x"] { justify-self: var(--frame-place-x, auto); align-self: var(--frame-place-y, auto); }
@@ -59,7 +59,7 @@
 /* `[data-rune]` extends the rule to nested rune guests (codegroup, mockup,
  * chart, etc.), so frame chrome stays guest-agnostic — the same selector
  * pattern the displace rule uses. */
-[style*="--frame-oversize"] > :is(img, video, [data-rune]) { width: calc(100% * var(--frame-oversize, 1)); max-width: none; }
+[style*="--frame-oversize"] > :is(img, video, .rf-placeholder, [data-rune]) { width: calc(100% * var(--frame-oversize, 1)); max-width: none; }
 
 /* ── Displacement (peek / spill) — move the guest toward an edge/corner.
  * The host decides whether the guest is cropped or spills; this only moves it.
@@ -80,7 +80,7 @@
  *      parent's edge for a true breakout. */
 
 /* — Case 1: media-zone displace → translate the inner guest, zone clips. */
-[data-section="media"][data-displace] > :is(img, video, [data-rune]) {
+[data-section="media"][data-displace] > :is(img, video, .rf-placeholder, [data-rune]) {
 	transform: translate(var(--displace-x, 0), var(--displace-y, 0));
 }
 [data-section="media"][data-displace="top"]        { --displace-y: calc(-1 * var(--frame-offset, var(--rf-spacing-lg))); }

package/styles/dimensions/metadata.css

@@ -22,7 +22,7 @@
 [data-meta-type="id"],
 [data-meta-type="code"] {
 	font-family: var(--rf-font-mono, monospace);
-	font-size: var(--meta-font-size, 0.8125rem);
+	font-size: var(--meta-font-size, var(--rf-text-sm));
 }
 
 /* IDs read as primary-coloured references wherever they appear (eyebrow
@@ -30,7 +30,7 @@
  * not a per-layout one. `code` (e.g. API paths) stays neutral monospace. */
 [data-meta-type="id"] {
 	color: var(--rf-color-primary);
-	font-weight: 500;
+	font-weight: var(--rf-weight-medium);
 }
 
 [data-meta-type="quantity"] {
@@ -123,14 +123,14 @@
 }
 
 [data-zone-layout="definition-list"] dt {
-	font-size: 0.75rem;
-	font-weight: 500;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-medium);
 	color: var(--rf-color-muted);
 }
 
 [data-zone-layout="definition-list"] dd {
 	margin: 0;
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 }
 
 /* Multi-value dd (fields with `splitOn`) renders a row of chips
@@ -145,7 +145,7 @@
 
 /* Label element within a chip — thin, muted; pairs visually with the value */
 [data-meta-label] {
-	font-weight: 400;
+	font-weight: var(--rf-weight-normal);
 	opacity: 0.65;
 }
 

package/styles/dimensions/sections.css

@@ -25,29 +25,26 @@
 
 /* ─── Title: primary heading ──────────────────────────────────────── */
 
+/* The size rides --rf-title-size (set per density root in density.css) so a
+ * nested rune's own density re-declares it — a full-density hero inside a
+ * compact preview keeps its full-size title — and a rune's own title CSS
+ * (e.g. .rf-hero__headline) outranks the bare attribute selector. The old
+ * `[data-density="compact"] [data-section="title"]` descendant rule leaked
+ * through nested densities AND beat per-rune title sizes. */
 [data-section="title"] {
 	font-family: var(--rf-font-sans);
-	font-size: 1.5rem;
-	font-weight: 700;
-	line-height: 1.2;
+	font-size: var(--rf-title-size, var(--rf-text-2xl));
+	font-weight: var(--rf-weight-bold);
+	line-height: var(--rf-leading-tight);
 	color: var(--rf-color-text);
 	margin: 0;
 }
 
-/* Scale title with density */
-[data-density="compact"] [data-section="title"] {
-	font-size: 1.25rem;
-}
-
-[data-density="minimal"] [data-section="title"] {
-	font-size: 1rem;
-}
-
 /* ─── Description: secondary text ─────────────────────────────────── */
 
 [data-section="description"] {
-	font-size: 1rem;
-	line-height: 1.5;
+	font-size: var(--rf-text);
+	line-height: var(--rf-leading-normal);
 	color: var(--rf-color-muted);
 	margin: var(--rf-spacing-xs) 0 var(--rf-spacing-md);
 }
@@ -55,7 +52,7 @@
 /* ─── Body: main content ──────────────────────────────────────────── */
 
 [data-section="body"] {
-	line-height: 1.6;
+	line-height: var(--rf-leading-relaxed);
 	color: var(--rf-color-text);
 }
 

package/styles/dimensions/sequence.css

@@ -23,8 +23,8 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	font-size: 0.75rem;
-	font-weight: 700;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-bold);
 	font-variant-numeric: tabular-nums;
 	color: var(--rf-color-primary);
 	background: var(--rf-color-surface-active);
@@ -110,7 +110,7 @@
 [data-density="compact"] [data-sequence="numbered"] > li::before {
 	width: 1.25rem;
 	height: 1.25rem;
-	font-size: 0.625rem;
+	font-size: var(--rf-text-xs);
 }
 
 [data-density="compact"] [data-sequence="connected"] > li {

package/styles/global.css

@@ -9,7 +9,7 @@ html {
 	font-family: var(--rf-font-sans);
 	color: var(--rf-color-text);
 	background: var(--rf-color-bg);
-	line-height: 1.7;
+	line-height: var(--rf-leading-relaxed);
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 	-webkit-text-size-adjust: 100%;
@@ -97,17 +97,17 @@ body {
 }
 
 h1, h2, h3, h4, h5, h6 {
-	line-height: 1.25;
+	line-height: var(--rf-leading-tight);
 	margin-top: 2em;
 	margin-bottom: 0.5em;
-	font-weight: 650;
-	letter-spacing: -0.015em;
+	font-weight: var(--rf-weight-semibold);
+	letter-spacing: var(--rf-tracking-tight);
 }
 
-h1 { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.025em; }
-h2 { font-size: 1.5rem; }
-h3 { font-size: 1.2rem; }
-h4 { font-size: 1.05rem; }
+h1 { font-size: var(--rf-text-3xl); font-weight: var(--rf-weight-bold); letter-spacing: var(--rf-tracking-tight); }
+h2 { font-size: var(--rf-text-2xl); }
+h3 { font-size: var(--rf-text-xl); }
+h4 { font-size: var(--rf-text); }
 
 p {
 	margin-top: 0;
@@ -124,7 +124,7 @@ a:hover {
 	text-decoration: underline;
 }
 
-strong { font-weight: 600; }
+strong { font-weight: var(--rf-weight-semibold); }
 
 code {
 	font-family: var(--rf-font-mono);
@@ -142,8 +142,8 @@ pre {
 	border-radius: var(--rf-radius-md);
 	overflow-x: auto;
 	margin: 1.5rem 0;
-	font-size: 0.875rem;
-	line-height: 1.7;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 	border: 1px solid var(--rf-color-border);
 }
 
@@ -183,17 +183,17 @@ table {
 	width: 100%;
 	border-collapse: collapse;
 	margin: 1.5rem 0;
-	font-size: 0.9rem;
+	font-size: var(--rf-text-sm);
 }
 
 th {
 	text-align: left;
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 	padding: 0.625rem 1rem;
 	border-bottom: 1px solid var(--rf-color-border);
-	font-size: 0.8rem;
+	font-size: var(--rf-text-xs);
 	text-transform: uppercase;
-	letter-spacing: 0.04em;
+	letter-spacing: var(--rf-tracking-wide);
 	color: var(--rf-color-muted);
 }