@refrakt-md/lumina 0.21.0 → 0.23.0

package/styles/dimensions/metadata.css

@@ -1,13 +1,12 @@
-/* ─── Metadata Dimensions ──────────────────────────────────────────────
- * SPEC-080 typography / geometry split:
- *  - `[data-meta-type=…]` selectors carry ONLY typography hints
- *    (monospace, tabular-nums). No padding, no border, no chip geometry.
- *  - Geometry comes from `[data-zone-layout=…]` selectors (`bar`,
- *    `definition-list`) and from the universal `.rf-badge` class, which
- *    is emitted by chip-type fields AND by the standalone `{% badge %}`
- *    rune.
- *  - Sentiment rules drive `--meta-color`, which the chip and any
- *    sentiment-tinted text inherits.
+@layer skin {
+/* ─── Metadata Dimensions — skin ───────────────────────────────────────
+ * SPEC-080 typography / geometry split. The zone-layout *structure* (bar +
+ * definition-list display/grid, the rating flex row, the sr-only label
+ * mechanism) lives in @refrakt-md/skeleton (dimensions/metadata.css). What
+ * remains here is skin: sentiment colours, meta-type typography, the rating
+ * glyph + colours, the chip/def-list spacing + borders + radius, and labels.
+ *  - `[data-meta-type=…]` selectors carry ONLY typography hints.
+ *  - Sentiment rules drive `--meta-color`, inherited by chips + tinted text.
  * ────────────────────────────────────────────────────────────────────── */
 
 /* ─── Sentiment ────────────────────────────────────────────────────── */
@@ -22,7 +21,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 +29,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"] {
@@ -44,9 +43,10 @@
 }
 
 /* Rating — `value` filled marks out of `total`; each mark carries
- * `data-filled`. Stars via colour (filled = primary, empty = border). */
+ * `data-filled`. Stars via colour (filled = primary, empty = border). The
+ * inline-flex row is structure (skeleton); the glyph + spacing + colours are
+ * skin. */
 [data-meta-type="rating"] {
-	display: inline-flex;
 	gap: 0.0625rem;
 	line-height: 1;
 }
@@ -73,71 +73,38 @@
 	text-underline-offset: 0.15em;
 }
 
-/* ─── Layout: bar (SPEC-080) ───────────────────────────────────────── */
-
-/* Horizontal flex row of fields, each in its own intrinsic shape (chip or
- * bare). Wraps by default; `data-wrap="false"` keeps it on one line. A field
- * tagged `data-align="end"` (and everything after it) is pushed to the right
- * edge. */
+/* ─── Layout: bar — spacing ────────────────────────────────────────── */
+/* The flex row + end-push are structure (skeleton); the gap is skin. */
 [data-zone-layout="bar"] {
-	display: flex;
-	flex-wrap: wrap;
 	gap: 0.5rem;
-	align-items: center;
-}
-[data-zone-layout="bar"][data-wrap="false"] {
-	flex-wrap: nowrap;
 }
-[data-zone-layout="bar"] [data-align="end"] {
-	margin-left: auto;
-}
-
-/* ─── Layout: definition-list ──────────────────────────────────────── */
 
-/* Single source of truth for the `definition-list` primitive, shared by
- * both the projected metadata zone (`<dl data-zone="…">`) and the authored
- * `{% deflist %}` rune (`<dl data-rune="deflist">`) — they emit the same
- * `data-zone-layout` so they render identically (geometry, borders, margin).
- *
- * Each row stacks `dt` above `dd`. Rows flow into multiple columns
- * via `auto-fit` — CSS grid naturally collapses to a single column
- * when the container is narrower than the minimum, so the same rule
- * reads fine on mobile and packs dense on wider screens without a
- * media-query step. The 8rem minimum keeps short label / value pairs
- * like "Prep" + "15m" tight while leaving room for the per-item border. */
+/* ─── Layout: definition-list — spacing + chrome ───────────────────── */
+/* The grid + row stacking are structure (skeleton); the gaps, the per-row
+ * border/padding/radius card chrome, and the dt/dd type are skin. */
 [data-zone-layout="definition-list"] {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
 	gap: 0.75rem;
 	margin: 1.25rem 0;
 }
 
 [data-zone-layout="definition-list"] > [data-name="row"] {
-	display: flex;
-	flex-direction: column;
 	gap: 0.125rem;
-	min-width: 0;
 	padding: 0.625rem 0.75rem;
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-sm);
 }
 
 [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
- * inside the cell, flowing naturally. */
 [data-zone-layout="definition-list"] dd[data-multi-value] {
-	display: flex;
-	flex-wrap: wrap;
 	gap: 0.25rem;
 }
 
@@ -145,23 +112,10 @@
 
 /* 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;
 }
 
-/* Visually hidden labels — accessible to screen readers only */
-[data-meta-label-hidden] {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	margin: -1px;
-	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	white-space: nowrap;
-	border: 0;
-}
-
 /* ─── Mobile: compact ──────────────────────────────────────────────── */
 
 @media (max-width: 48rem) {
@@ -169,26 +123,22 @@
 		gap: 0.375rem;
 	}
 
-	/* On narrow screens, fall back to the original label-left / value-right
-	 * list: each row's dt/dd flow directly into a two-column grid via
-	 * `display: contents`, which drops the per-item border (no box to paint).
-	 * The border + padding move to the list itself so the whole group reads
-	 * as one bordered card. */
+	/* The border + padding move to the list itself so the whole group reads as
+	 * one bordered card (the per-row box is dropped by the skeleton's
+	 * `display: contents`). */
 	[data-zone-layout="definition-list"] {
-		grid-template-columns: max-content 1fr;
 		gap: 0.25rem 1rem;
-		align-items: baseline;
 		padding: 0.75rem 1rem;
 		border: 1px solid var(--rf-color-border);
 		border-radius: var(--rf-radius-sm);
 	}
 
-	[data-zone-layout="definition-list"] > [data-name="row"] {
-		display: contents;
-	}
-
+	/* Header rhythm stays skin with sections.css (deferred until the split layout
+	 * + sections promote together). */
 	[data-section="header"] {
 		gap: 0.375rem;
 		margin-bottom: 1.5rem;
 	}
 }
+
+}

package/styles/dimensions/sections.css

@@ -1,66 +1,51 @@
-/* ─── Section Anatomy Dimension ─────────────────────────────────────────
- * Generic layout and typography for the 6 standard section roles.
- * Every rune that declares `sections` in its config gets these for free.
- *
- * Includes density × section interactions (title scaling, hiding).
+@layer skin {
+/* ─── Section Anatomy Dimension — skin ──────────────────────────────────
+ * Zone rhythm (margins, gaps, padding), typography, and borders for the 6
+ * standard section roles. The flex zone *containers* (header / preamble /
+ * footer) live in @refrakt-md/skeleton (dimensions/sections.css). Rhythm stays
+ * here so rune zone overrides resolve against it by source order.
  * ────────────────────────────────────────────────────────────────────── */
 
 /* ─── Header: chrome metadata row (badges, status, icons) ────────── */
-
 [data-section="header"] {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
 	gap: 0.5rem;
 	margin-bottom: 3rem;
 }
 
 /* ─── Preamble: intro section (eyebrow, headline, blurb) ─────────── */
-
 [data-section="preamble"] {
-	display: flex;
-	flex-direction: column;
 	gap: 0.25rem;
 }
 
 /* ─── 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. */
+ * nested rune's own density re-declares it, and a rune's own title CSS
+ * (e.g. .rf-hero__headline) outranks the bare attribute selector. */
 [data-section="title"] {
 	font-family: var(--rf-font-sans);
-	font-size: var(--rf-title-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;
 }
 
 /* ─── 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);
 }
 
 /* ─── Body: main content ──────────────────────────────────────────── */
-
 [data-section="body"] {
-	line-height: 1.6;
+	line-height: var(--rf-leading-relaxed);
 	color: var(--rf-color-text);
 }
 
 /* ─── Footer: actions and links ───────────────────────────────────── */
-
 [data-section="footer"] {
-	display: flex;
-	flex-wrap: wrap;
 	gap: var(--rf-spacing-sm);
 	margin-top: var(--rf-spacing-md);
 	padding-top: var(--rf-spacing-sm);
@@ -68,10 +53,11 @@
 }
 
 /* ─── Media: visual content ───────────────────────────────────────── */
-
 [data-section="media"] {
 	/* Media zones manage their own spacing via their layout (split gap, cell
 	 * padding, flow margins); a blanket block margin here misaligns media in
 	 * flex/beside layouts, so keep it neutral. */
 	margin: 0;
 }
+
+}

package/styles/dimensions/sequence.css

@@ -1,30 +1,14 @@
-/* === Sequential Items: universal ordered item styling === */
-
-/* Numbered — counter circle to the left of each item */
-[data-sequence="numbered"] {
-	counter-reset: sequence;
-	list-style: none;
-	padding-left: 0;
-}
-
-[data-sequence="numbered"] > li {
-	counter-increment: sequence;
-	position: relative;
-	padding-left: 2.25rem;
-}
-
+@layer skin {
+/* === Sequential Items — skin ===
+ * The connector lines (borders), the marker chrome (fill, radius, shadow), the
+ * counter type, and the layout gaps. The counter mechanism, list resets, item
+ * geometry, and marker box placement live in @refrakt-md/skeleton
+ * (dimensions/sequence.css). */
+
+/* Numbered — counter circle chrome + type. */
 [data-sequence="numbered"] > li::before {
-	content: counter(sequence);
-	position: absolute;
-	left: 0;
-	top: 0.625rem;
-	width: 1.5rem;
-	height: 1.5rem;
-	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);
@@ -35,95 +19,46 @@
 	border-top: 1px solid var(--rf-color-border);
 }
 
-/* Connected vertical — line with dots */
-[data-sequence="connected"] {
-	list-style: none;
-	padding-left: 0;
-}
-
+/* Connected vertical — the line is a left border; the dot is the marker. */
 [data-sequence="connected"] > li {
-	position: relative;
-	padding-left: 2rem;
-	padding-bottom: 2rem;
 	border-left: 2px solid var(--rf-color-border);
-	margin-left: 0.375rem;
 }
 
 [data-sequence="connected"] > li:last-child {
 	border-left-color: transparent;
-	padding-bottom: 0;
 }
 
 [data-sequence="connected"] > li::before {
-	content: '';
-	position: absolute;
-	left: -0.4375rem;
-	top: 0.25rem;
-	width: 0.75rem;
-	height: 0.75rem;
 	border-radius: 50%;
 	background: var(--rf-color-primary);
 	border: 2px solid var(--rf-color-bg);
 	box-shadow: 0 0 0 2px var(--rf-color-primary);
 }
 
-/* Connected horizontal — line with dots */
+/* Connected horizontal — the line moves to the top border; gap spaces the items. */
 [data-sequence="connected"][data-sequence-direction="horizontal"] {
-	display: flex;
 	gap: 2rem;
-	overflow-x: auto;
 }
 
 [data-sequence="connected"][data-sequence-direction="horizontal"] > li {
-	position: relative;
-	min-width: 12rem;
-	padding-top: 1.5rem;
-	padding-left: 0;
-	padding-bottom: 0;
 	border-left: none;
 	border-top: 2px solid var(--rf-color-border);
-	margin-left: 0;
 }
 
 [data-sequence="connected"][data-sequence-direction="horizontal"] > li:last-child {
 	border-top-color: var(--rf-color-border);
 }
 
-[data-sequence="connected"][data-sequence-direction="horizontal"] > li::before {
-	left: 0.5rem;
-	top: -0.4375rem;
-}
-
-/* Plain — no indicators, just ordered semantics */
-[data-sequence="plain"] {
-	list-style: none;
-	padding-left: 0;
-}
-
 /* === Density interaction === */
 
-/* Compact: smaller circles, tighter spacing */
-[data-density="compact"] [data-sequence="numbered"] > li {
-	padding-left: 1.75rem;
-}
-
+/* Compact: smaller circle keeps the same type scale. */
 [data-density="compact"] [data-sequence="numbered"] > li::before {
-	width: 1.25rem;
-	height: 1.25rem;
-	font-size: 0.625rem;
-}
-
-[data-density="compact"] [data-sequence="connected"] > li {
-	padding-bottom: 1rem;
-}
-
-/* Minimal: no indicators, collapsed list */
-[data-density="minimal"] [data-sequence] > li::before {
-	display: none;
+	font-size: var(--rf-text-xs);
 }
 
+/* Minimal: drop the connector line on the collapsed list. */
 [data-density="minimal"] [data-sequence="connected"] > li {
 	border-left: none;
-	padding-left: 0;
-	margin-left: 0;
+}
+
 }

package/styles/dimensions/state.css

@@ -1,57 +1,40 @@
-/* ─── Interactive State Dimension ───────────────────────────────────────
- * Generic styling for interactive rune states: open/closed, active/inactive,
- * selected, and disabled. Behaviours toggle data-state; themes read it here.
- * ────────────────────────────────────────────────────────────────────── */
-
-/* ─── Open/Closed: collapsible content ────────────────────────────── */
-
-[data-state="closed"] > [class*="__body"],
-[data-state="closed"] > [class*="__content"] {
-	display: none;
-}
-
-[data-state="open"] > [class*="__body"],
-[data-state="open"] > [class*="__content"] {
-	display: block;
-	animation: rf-expand 0.2s ease-out;
-}
-
-@keyframes rf-expand {
-	from { opacity: 0; transform: translateY(-0.5rem); }
-	to { opacity: 1; transform: translateY(0); }
-}
-
-/* ─── Active/Inactive: selection indicators ───────────────────────── */
-
-button[data-state="active"] {
-	border-bottom: 2px solid var(--rf-color-primary);
-	color: var(--rf-color-primary);
-}
-
-button[data-state="inactive"] {
-	border-bottom: 2px solid transparent;
-	color: var(--rf-color-muted);
-}
-
-/* Panels controlled by tab/toggle state */
-[role="tabpanel"][data-state="inactive"] {
-	display: none;
-}
-
-[role="tabpanel"][data-state="active"] {
-	display: block;
-}
-
-/* ─── Selected: user selection highlight ──────────────────────────── */
-
-[data-state="selected"] {
-	background: var(--rf-color-primary-bg);
-	outline: 2px solid var(--rf-color-primary);
-}
-
-/* ─── Disabled: dimmed non-interactive ────────────────────────────── */
-
-[data-state="disabled"] {
-	opacity: 0.4;
-	pointer-events: none;
+/* ─── Interactive State Dimension — skin ────────────────────────────────
+ * Aesthetic state treatments. The visibility/interaction mechanisms (collapse,
+ * panel switching, disabled pointer suppression) are structure and live in
+ * `@refrakt-md/skeleton` (styles/dimensions/state.css). Skin sits in @layer skin,
+ * ordered after skeleton, so these low-specificity rules win where they overlap. */
+
+@layer skin {
+	/* Expand animation for opening collapsibles (decorative — the rune works
+	 * without it; the skeleton supplies the display:block). */
+	[data-state="open"] > [class*="__body"],
+	[data-state="open"] > [class*="__content"] {
+		animation: rf-expand 0.2s ease-out;
+	}
+
+	@keyframes rf-expand {
+		from { opacity: 0; transform: translateY(-0.5rem); }
+		to { opacity: 1; transform: translateY(0); }
+	}
+
+	/* Active/inactive selection indicators */
+	button[data-state="active"] {
+		border-bottom: 2px solid var(--rf-color-primary);
+		color: var(--rf-color-primary);
+	}
+	button[data-state="inactive"] {
+		border-bottom: 2px solid transparent;
+		color: var(--rf-color-muted);
+	}
+
+	/* Selected highlight */
+	[data-state="selected"] {
+		background: var(--rf-color-primary-bg);
+		outline: 2px solid var(--rf-color-primary);
+	}
+
+	/* Disabled dim (the pointer-events:none is structure) */
+	[data-state="disabled"] {
+		opacity: 0.4;
+	}
 }

package/styles/dimensions/substrate.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Substrate (SPEC-087) — generated surface pattern.
  *
  * The token-driven gradient recipes that realise each pattern ship here in the
@@ -106,3 +107,5 @@
 [data-color-scheme="light"] {
 	--substrate-mode-boost: 1;
 }
+
+}