@refrakt-md/lumina 0.21.0 → 0.23.0

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;
 }
+
+}

package/styles/global.css

@@ -1,15 +1,17 @@
-/* Lumina Theme — Global Base Styles */
-
-/* Reset */
-*, *::before, *::after {
-	box-sizing: border-box;
-}
+@layer skin {
+/* Lumina Theme — Global Base Styles (skin).
+ *
+ * Structure (box model, zone resets, prose/heading/list/table rhythm, the
+ * responsive-image + scroll mechanisms) lives in @refrakt-md/skeleton
+ * (styles/global.css) per SPEC-094 §3 / WORK-438. What remains here is skin:
+ * typography, colour, native chrome, and the surface treatment of code/pre/
+ * tables. */
 
 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%;
@@ -24,18 +26,12 @@ html {
 	text-size-adjust: 100%;
 }
 
-body {
-	margin: 0;
-}
-
 /* ─── Theme-aware browser chrome (WORK-351) ─────────────────────────
  * Make native chrome — scrollbars, form controls, the main viewport
  * scrollbar — follow the active theme instead of always rendering in
  * the OS default scheme. */
 
-/* `color-scheme` so the UA paints native widgets/scrollbars per mode.
- * Mirrors the dark-token selectors (explicit toggle + system preference
- * unless forced light). */
+/* `color-scheme` so the UA paints native widgets/scrollbars per mode. */
 :root { color-scheme: light; }
 [data-theme="dark"] { color-scheme: dark; }
 @media (prefers-color-scheme: dark) {
@@ -97,22 +93,15 @@ body {
 }
 
 h1, h2, h3, h4, h5, h6 {
-	line-height: 1.25;
-	margin-top: 2em;
-	margin-bottom: 0.5em;
-	font-weight: 650;
-	letter-spacing: -0.015em;
+	line-height: var(--rf-leading-tight);
+	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; }
-
-p {
-	margin-top: 0;
-	margin-bottom: 1rem;
-}
+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); }
 
 a {
 	color: var(--rf-color-primary);
@@ -124,7 +113,7 @@ a:hover {
 	text-decoration: underline;
 }
 
-strong { font-weight: 600; }
+strong { font-weight: var(--rf-weight-semibold); }
 
 code {
 	font-family: var(--rf-font-mono);
@@ -140,10 +129,8 @@ pre {
 	color: var(--rf-color-code-text);
 	padding: 1.25rem 1.5rem;
 	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);
 }
 
@@ -154,46 +141,23 @@ pre code {
 	border-radius: 0;
 }
 
-img {
-	max-width: 100%;
-	height: auto;
-}
-
 hr {
 	border: none;
 	border-top: 1px solid var(--rf-color-border);
-	margin: 2rem 0;
-}
-
-ul, ol {
-	padding-left: 1.5rem;
-	margin-top: 0;
-	margin-bottom: 1rem;
-}
-
-li {
-	margin-bottom: 0.25rem;
-}
-
-li > p {
-	margin-bottom: 0.5rem;
 }
 
 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);
 }
 
@@ -202,7 +166,4 @@ td {
 	border-bottom: 1px solid var(--rf-color-border);
 }
 
-meta {
-	display: none;
 }
-