@refrakt-md/lumina 0.22.0 → 0.23.0

package/styles/dimensions/sections.css

@@ -1,36 +1,26 @@
-/* ─── 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, var(--rf-text-2xl));
@@ -41,7 +31,6 @@
 }
 
 /* ─── Description: secondary text ─────────────────────────────────── */
-
 [data-section="description"] {
 	font-size: var(--rf-text);
 	line-height: var(--rf-leading-normal);
@@ -50,17 +39,13 @@
 }
 
 /* ─── Body: main content ──────────────────────────────────────────── */
-
 [data-section="body"] {
 	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,28 +1,12 @@
-/* === 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: var(--rf-text-xs);
 	font-weight: var(--rf-weight-bold);
 	font-variant-numeric: tabular-nums;
@@ -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: var(--rf-text-xs);
 }
 
-[data-density="compact"] [data-sequence="connected"] > li {
-	padding-bottom: 1rem;
-}
-
-/* Minimal: no indicators, collapsed list */
-[data-density="minimal"] [data-sequence] > li::before {
-	display: none;
-}
-
+/* 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;
 }
+
+}

package/styles/dimensions/surfaces.css

@@ -1,7 +1,11 @@
-/* ─── Surface Assignments ──────────────────────────────────────────────
- * Groups runes into 4 surface types: card, inline, banner, inset.
- * Each surface defines container treatment (background, padding, radius).
- * Padding scales with density via --rune-padding custom property.
+@layer skin {
+/* ─── Surface Assignments (SPEC-107) ───────────────────────────────────
+ * Surface chrome is selected by the `data-elevation` depth-ladder axis, not by
+ * rune name. Each rung maps to a chrome bundle (fill / border / radius /
+ * padding / resting shadow); `data-prominence` maps the page-section-header
+ * family to a title type register. Per-rune defaults (`defaultElevation` /
+ * `defaultProminence`) live in each rune's config, so today's appearance is
+ * preserved while a theme can re-point any rune to a different rung.
  * ────────────────────────────────────────────────────────────────────── */
 
 /* Semantic surface/media aliases over the raw token scale (these reference
@@ -22,136 +26,92 @@
    so they sit flush with the surrounding header/footer container. */
 
 [data-rune]:not([data-rune] [data-rune]):not(:where([data-layout="menubar"], [data-layout="columns"])) {
-	margin: 1.5rem 0;
+	margin: var(--rf-spacing-md) 0;
 }
 
-/* ─── Card: elevated container ────────────────────────────────────── */
-
-.rf-recipe,
-.rf-character,
-.rf-testimonial,
-.rf-event,
-.rf-realm,
-.rf-faction,
-.rf-lore,
-.rf-plot,
-.rf-bond,
-.rf-playlist,
-.rf-track,
-.rf-budget,
-.rf-organization,
-.rf-timeline,
-.rf-swatch,
-.rf-palette,
-.rf-typography,
-.rf-spacing,
-.rf-design-context,
-.rf-itinerary,
-.rf-symbol,
-.rf-changelog,
-.rf-api,
-.rf-howto,
-.rf-form {
+/* ─── Elevation: depth-ladder chrome ──────────────────────────────────
+ * `flat` and the shadow rungs (`raised` / `floating` / `overlay`) carry a
+ * surface: fill, border, radius, and container padding. `sunken` adds the same
+ * chrome but recesses its fill below the page. `flush` has no surface boundary
+ * — it only reserves vertical rhythm. The shadow rungs layer a *resting*
+ * box-shadow on top of the flat chrome (kept distinct from `frame-shadow`'s
+ * per-guest drop-shadow, SPEC-107 §1). */
+
+[data-elevation="flat"],
+[data-elevation="sunken"],
+[data-elevation="raised"],
+[data-elevation="floating"],
+[data-elevation="overlay"] {
 	background: var(--rf-color-surface);
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-container);
 	padding: var(--rune-padding, var(--rf-spacing-md));
 }
 
-/* ─── Inline: no visual boundary ──────────────────────────────────── */
-
-.rf-hint,
-.rf-details,
-.rf-sidenote,
-.rf-conversation,
-.rf-annotate,
-.rf-xref,
-.rf-pullquote,
-.rf-textblock,
-.rf-nav,
-.rf-breadcrumb,
-.rf-toc,
-.rf-datatable {
-	padding: var(--rune-padding, var(--rf-spacing-sm)) 0;
+/* Sunken — the recessed "darker surface" (e.g. chart / diagram). Derived at
+ * use-site via relative-color (lower L, keep C+H) so it recomputes from a
+ * tinted `--rf-color-surface` automatically (a static inset-colour token would
+ * freeze to the untinted :root). Writes `background` only — never re-bases
+ * `--rf-color-surface` — so insets don't compound under nesting; depth is
+ * conveyed by border + the darker fill. `--rf-surface-inset-shift: 0` flushes
+ * it back to the surface colour. */
+[data-elevation="sunken"] {
+	background: oklch(from var(--rf-color-surface) calc(l - var(--rf-surface-inset-shift)) c h);
 }
 
-/* ─── Banner: full-width strip ────────────────────────────────────── */
-
-.rf-hero,
-.rf-cta,
-.rf-feature,
-.rf-steps,
-.rf-bento,
-.rf-storyboard,
-.rf-map {
-	padding: var(--rune-padding, var(--rf-spacing-xl)) 0;
+/* Resting-shadow rungs — depth above the flat surface. */
+[data-elevation="raised"] {
+	box-shadow: var(--rf-shadow-sm);
 }
-
-/* ─── Inset: recessed container ───────────────────────────────────── */
-
-.rf-codegroup,
-.rf-mockup,
-.rf-diagram,
-.rf-chart,
-.rf-embed,
-.rf-gallery,
-.rf-figure,
-.rf-reveal {
-	background: var(--rf-color-surface);
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-container);
-	padding: var(--rune-padding, var(--rf-spacing-md));
+[data-elevation="floating"] {
+	box-shadow: var(--rf-shadow-md);
 }
-
-/* ─── Media slot inherits the surface border ─────────────────────────
- * When a surface-bearing rune wraps a `[data-section="media"]` slot, the slot
- * shares the surface's 1px border so the framed media reads as part of the
- * same surface rather than a separate inner box. Scoped via `:where()` for
- * zero specificity — per-rune CSS can still override if a particular surface
- * wants a different chrome (e.g. character's circular portrait avoids this
- * because it's not a `[data-section="media"]` slot). */
-:where(.rf-card, .rf-bento-cell, .rf-recipe, .rf-realm, .rf-faction, .rf-playlist) [data-section="media"] {
-	border: 1px solid var(--rf-color-border);
+[data-elevation="overlay"] {
+	box-shadow: var(--rf-shadow-lg);
 }
 
-/* ─── Inset surface (SPEC-087) — tint-tracking recessed fill ──────────
- * Derived at use-site via relative-color (lower L, keep C+H) so it recomputes from a tinted
- * `--rf-color-surface` automatically (a static inset-colour token would
- * freeze to the untinted :root). Writes `background` only — never re-bases
- * `--rf-color-surface` — so insets don't compound under nesting; depth is
- * conveyed by border/elevation. `--rf-surface-inset-shift: 0` flushes it. */
+/* Flush — no surface boundary; only vertical rhythm (density-aware via
+ * --rune-padding). Replaces the old inline/banner padding buckets; banner runes
+ * that want a more generous band declare their own `padding-block`. */
+[data-elevation="flush"] {
+	padding-block: var(--rune-padding, var(--rf-spacing-sm));
+}
 
-/* chart / diagram self surface: the standalone "darker surface". */
-.rf-chart,
-.rf-diagram {
-	background: oklch(from var(--rf-color-surface) calc(l - var(--rf-surface-inset-shift)) c h);
+/* ─── Prominence: page-section-header type register ───────────────────
+ * `data-prominence` re-points the section title size for page-section-header
+ * family runes (the engine only emits it where a header role exists). `normal`
+ * is the density default; the other steps layer on top, cascading down to
+ * [data-section="title"] via --rf-title-size — the same mechanism density uses,
+ * so a nested rune's own density/prominence re-declares it. */
+[data-prominence="quiet"] {
+	--rf-title-size: var(--rf-text-xl);
+}
+[data-prominence="prominent"] {
+	--rf-title-size: var(--rf-text-3xl);
+}
+[data-prominence="display"] {
+	--rf-title-size: var(--rf-text-4xl);
 }
 
-/* …but when they're a media-zone guest the slot already provides the recessed
- * surface (border, radius, inset fill), so the inner chrome would just stack
- * as double-chrome. Drop it; keep padding so axis labels / SVG keep breathing
- * room. */
-[data-section="media"] > :is(.rf-chart, .rf-diagram) {
-	background: transparent;
-	border: 0;
+/* ─── Media slot shares the surface chrome ───────────────────────────
+ * When a `flat` surface wraps a cover `[data-section="media"]` slot, the slot
+ * shares the surface's 1px border and a recessed well fill so the framed media
+ * reads as part of the same surface. Scoped via `:where()` for zero specificity
+ * so per-rune CSS can override. Floated-avatar portraits (`[data-media="portrait"]`,
+ * e.g. character / testimonial) opt out — they manage their own circular chrome.
+ * The hand-rolled `card` / `bento-cell` surfaces (which sit outside the
+ * elevation axis) carry the same media chrome from their own CSS files. */
+:where([data-elevation="flat"]) [data-section="media"]:not([data-media="portrait"]) {
+	border: 1px solid var(--rf-color-border);
+	background: oklch(from var(--rf-color-surface) calc(l - var(--rf-surface-inset-shift)) c h);
 }
 
-/* Same treatment for `juxtapose` as a media guest — its `__panels` container
- * has its own border + background + rounded corners (juxtapose stands alone
- * outside a card), but inside a card slot they double up with the slot's own
- * chrome. Drop the inner chrome; round to match the slot's media radius so the
- * comparison reads as part of the card surface. The slot's overflow:visible
- * and container-type:normal still come from `split.css` (juxtapose manages
- * its own clip inside `__panels`). */
-[data-section="media"] > .rf-juxtapose .rf-juxtapose__panels {
+/* …but a sunken surface used as a media-zone guest already sits inside the
+ * slot's recessed well, so its own chrome would just double up. Drop it; keep
+ * padding so axis labels / SVG keep breathing room. */
+[data-section="media"] > [data-elevation="sunken"] {
 	background: transparent;
 	border: 0;
-	border-radius: var(--rf-radius-media);
 }
 
-/* Media wells of media-bearing runes: a recessed sub-surface that tracks the
- * (possibly tinted) container colour — invisible under a full-bleed guest,
- * visible in the gaps (transparent, displaced, or absent guest). */
-:is(.rf-card, .rf-bento-cell, .rf-recipe, .rf-realm, .rf-faction, .rf-playlist) [data-section="media"] {
-	background: oklch(from var(--rf-color-surface) calc(l - var(--rf-surface-inset-shift)) c h);
 }

package/styles/elements/blockquote.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Blockquote */
 blockquote {
 	position: relative;
@@ -5,8 +6,6 @@ blockquote {
 	margin: 1.5rem 0;
 	padding: 1rem 1.25rem 1rem 3.25rem;
 	color: var(--rf-color-muted);
-	background: var(--rf-color-surface);
-	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
 }
 blockquote::before {
 	content: '';
@@ -24,3 +23,5 @@ blockquote::before {
 blockquote p:last-child {
 	margin-bottom: 0;
 }
+
+}

package/styles/elements/code.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Code block wrapper — the rf-codeblock div comes from the Markdoc fence node
    schema at build time. Inside codegroup the margin is removed by
    .rf-codegroup .rf-codeblock. */
@@ -114,3 +115,5 @@
 	background: var(--rf-color-line-highlight);
 	border-left-color: var(--rf-color-line-highlight-rail);
 }
+
+}

package/styles/elements/table.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Table wrapper */
 .rf-table-wrapper {
 	overflow-x: auto;
@@ -34,3 +35,5 @@
 .rf-table-wrapper td code {
 	font-size: 1em;
 }
+
+}