@refrakt-md/lumina 0.24.2 → 0.24.4

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.24.2",
+  "version": "0.24.4",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -84,10 +84,10 @@
     "generate-tokens": "node scripts/generate-tokens.mjs"
   },
   "dependencies": {
-    "@refrakt-md/runes": "0.24.2",
-    "@refrakt-md/skeleton": "0.24.2",
-    "@refrakt-md/transform": "0.24.2",
-    "@refrakt-md/types": "0.24.2"
+    "@refrakt-md/runes": "0.24.4",
+    "@refrakt-md/skeleton": "0.24.4",
+    "@refrakt-md/transform": "0.24.4",
+    "@refrakt-md/types": "0.24.4"
   },
   "devDependencies": {
     "postcss": "^8.4.0"

package/styles/layouts/default.css

@@ -62,6 +62,17 @@
 		calc((100% - var(--rf-content-max, 80rem)) / 2)
 	);
 }
+/* Page sections (data-content-measure="anchored") keep their content at the
+ * text measure when bled to the wide track — only the surface/background
+ * widens, matching how `full` reads as a band. The absolutely-positioned bg
+ * fills the padded box, so the inner padding restores content without pulling
+ * the bleed in. Runes without the flag fill the wide track (card breakout). */
+.rf-page-content > article > [data-content-measure="anchored"][data-width="wide"] {
+	padding-inline: max(
+		var(--rf-content-gutter, 1.5rem),
+		calc((100% - var(--rf-content-max, 80rem)) / 2)
+	);
+}
 /* Tinted sections also break out to full width */
 .rf-page-content > article > :is([data-tint], [data-color-scheme]):not([data-width]) {
 	padding-inline: max(

package/styles/layouts/split.css

@@ -23,9 +23,33 @@
 [data-section="media"] {
 	border-radius: var(--rf-radius-media);
 }
-[data-section="media"] > * {
+
+/* `data-guest-fit` (emitted from rune config) is the chrome/containment axis:
+ *
+ *   clip  — a framed well (card, bento-cell, recipe, playlist). Every guest
+ *           adopts the slot radius so it reads as one surface with the well.
+ *   bleed — a bare section host (hero, feature). A *rune* guest keeps its own
+ *           chrome (its `data-elevation` radius, border, shadow) — the slot
+ *           would otherwise just mask a sandbox / codegroup / juxtapose's
+ *           corners. Leaf media still frames to the slot (an image has no
+ *           chrome of its own, so a bare hero image stays rounded).
+ *
+ * Absence of the attribute reads as `clip` (the historical default). */
+[data-section="media"]:not([data-guest-fit="bleed"]) > * {
 	border-radius: inherit;
 }
+[data-section="media"]:not([data-guest-fit="bleed"]) .rf-codegroup {
+	border-radius: var(--rf-radius-media);
+}
+
+/* Bleed host: leaf media adopts the slot radius; a rune guest does not, and the
+ * slot drops its own radius so its clip never rounds the guest's corners. */
+[data-section="media"][data-guest-fit="bleed"] > :is(img, video, svg, .rf-placeholder) {
+	border-radius: inherit;
+}
+[data-section="media"][data-guest-fit="bleed"]:has(> [data-rune]) {
+	border-radius: 0;
+}
 
 /* `preview` (negative-margin breakout) and a displaced `showcase` (peek spill)
  * want the slot fully de-chromed so the bleed reads as edge-to-edge. Juxtapose
@@ -44,12 +68,6 @@
 	border-radius: 0;
 }
 
-/* A code-group dropped into a media zone uses the media radius tier so its
- * border and corners line up with the zone's clip. */
-[data-section="media"] .rf-codegroup {
-	border-radius: var(--rf-radius-media);
-}
-
 /* Beside-layout images get subtle depth. Block runes carry their own visual
  * weight (topbars, frames) so the shadow is image-only. */
 [data-media-position="start"] > [data-section="media"] > img,

package/styles/runes/codegroup.css

@@ -1,26 +1,42 @@
 @layer skin {
 /* Code Group — skin.
  *
- * Chrome (the wrapper + topbar + tabs) uses `--rf-color-surface` so it
- * reads against the page in both light and dark modes. The code areas
- * themselves inherit `--rf-color-code-bg` from the global `pre` rule.
+ * A codegroup is a *code container*: the topbar, tabs, and code body all
+ * belong to the code surface, not the page chrome. So the wrapper fill and
+ * its inner chrome derive from `--rf-color-code-bg` / `--rf-color-code-text`
+ * — the tokens a syntax preset (Nord, Dracula, …) owns. This keeps the whole
+ * component coherent with its code body even when the active preset gives the
+ * code surface a palette that diverges from the page (e.g. Nord's Polar Night
+ * code surface on an otherwise-neutral site). It also matches `diff`, whose
+ * body already fills from `--rf-color-code-bg`.
+ *
+ * Only the outer frame (border + shadow) stays in the page world so the
+ * component still reads as a card sitting on the page — same as diff's outer
+ * border. The chrome strip is a subtle elevation off the code surface, and
+ * the separators / text derive from the code tokens via color-mix so they
+ * stay legible against any code background in both light and dark modes.
  *
  * The wrapper clip, topbar flex, list reset, the scrollable tab strip, and the
  * tab flex live in @refrakt-md/skeleton (styles/runes/codegroup.css). The pre/code
  * rules stay here in skin: they deliberately override elements/code.css by source
  * order (the `data-overflow="wrap"` reset especially). */
 .rf-codegroup {
+	/* Code-surface-derived chrome — legible against any --rf-color-code-bg. */
+	--rf-codegroup-chrome: color-mix(in srgb, var(--rf-color-code-text) 5%, var(--rf-color-code-bg));
+	--rf-codegroup-line: color-mix(in srgb, var(--rf-color-code-text) 14%, var(--rf-color-code-bg));
+	--rf-codegroup-muted: color-mix(in srgb, var(--rf-color-code-text) 55%, var(--rf-color-code-bg));
+
 	border: 1px solid var(--rf-color-border);
-	background: var(--rf-color-surface);
-	color: var(--rf-color-text);
+	background: var(--rf-color-code-bg);
+	color: var(--rf-color-code-text);
 	box-shadow: var(--rf-shadow-md);
 	padding: 0;
 }
 .rf-codegroup__topbar {
 	gap: 0.375rem;
 	padding: 0.75rem 1rem;
-	background: transparent;
-	border-bottom: 1px solid var(--rf-color-border);
+	background: var(--rf-codegroup-chrome);
+	border-bottom: 1px solid var(--rf-codegroup-line);
 	margin-bottom: 0;
 }
 /* Window chrome — three traffic-light dots painted as gradients on one
@@ -43,21 +59,21 @@
 	margin-left: 0.5rem;
 	font-size: var(--rf-text-xs);
 	font-weight: normal;
-	color: var(--rf-color-muted);
+	color: var(--rf-codegroup-muted);
 }
 .rf-codegroup ul {
 	padding: 0;
 	margin: 0;
 }
 .rf-codegroup__tabs {
-	background: transparent;
-	border-bottom: 1px solid var(--rf-color-border);
+	background: var(--rf-codegroup-chrome);
+	border-bottom: 1px solid var(--rf-codegroup-line);
 }
 .rf-codegroup__tab {
 	padding: 0.5rem 1rem;
 	font-size: var(--rf-text-xs);
 	font-family: var(--rf-font-mono);
-	color: var(--rf-color-muted);
+	color: var(--rf-codegroup-muted);
 	background: none;
 	border: none;
 	border-bottom: 2px solid transparent;
@@ -67,15 +83,15 @@
 }
 .rf-codegroup__tab:hover,
 .rf-codegroup button[data-state="inactive"]:hover {
-	color: var(--rf-color-text);
+	color: var(--rf-color-code-text);
 }
 .rf-codegroup__tab--active,
 .rf-codegroup button[data-state="active"] {
-	color: var(--rf-color-text);
+	color: var(--rf-color-code-text);
 	border-bottom-color: var(--rf-color-primary);
 }
 .rf-codegroup button[data-state="inactive"] {
-	color: var(--rf-color-muted);
+	color: var(--rf-codegroup-muted);
 }
 .rf-codegroup .rf-codeblock {
 	margin: 0;

package/styles/runes/diff.css

@@ -1,7 +1,20 @@
 @layer skin {
 /* Diff — skin. The scroll container, sticky header, split grid, rows grid, line
- * flex + gutter sizing live in @refrakt-md/skeleton (styles/runes/diff.css). */
+ * flex + gutter sizing live in @refrakt-md/skeleton (styles/runes/diff.css).
+ *
+ * Like codegroup, a diff is a code container: the header, the panel divider,
+ * and the gutter belong to the code surface, so they derive from
+ * `--rf-color-code-bg` / `--rf-color-code-text` (the tokens a syntax preset
+ * owns) via color-mix. This keeps the chrome coherent with the code body even
+ * when the active preset gives the code surface a palette that diverges from
+ * the page (e.g. Nord on a neutral site). Only the outer frame (border) stays
+ * in the page world. */
 .rf-diff {
+	/* Code-surface-derived chrome — legible against any --rf-color-code-bg. */
+	--rf-diff-chrome: color-mix(in srgb, var(--rf-color-code-text) 5%, var(--rf-color-code-bg));
+	--rf-diff-line: color-mix(in srgb, var(--rf-color-code-text) 14%, var(--rf-color-code-bg));
+	--rf-diff-muted: color-mix(in srgb, var(--rf-color-code-text) 55%, var(--rf-color-code-bg));
+
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-lg);
 	font-size: var(--rf-text-sm);
@@ -12,12 +25,12 @@
 	font-family: var(--rf-font-sans);
 	font-size: var(--rf-text-xs);
 	font-weight: var(--rf-weight-semibold);
-	color: var(--rf-color-muted);
-	background: var(--rf-color-surface);
-	border-bottom: 1px solid var(--rf-color-border);
+	color: var(--rf-diff-muted);
+	background: var(--rf-diff-chrome);
+	border-bottom: 1px solid var(--rf-diff-line);
 }
 .rf-diff__split-container .rf-diff__panel:first-child {
-	border-right: 1px solid var(--rf-color-border);
+	border-right: 1px solid var(--rf-diff-line);
 }
 .rf-diff__code {
 	margin: 0;
@@ -52,7 +65,7 @@
 	font-size: var(--rf-text-xs);
 	font-variant-numeric: tabular-nums;
 	user-select: none;
-	color: var(--rf-color-muted);
+	color: var(--rf-diff-muted);
 }
 .rf-diff__line[data-line-status="remove"] .rf-diff__gutter-num[data-side="before"] {
 	color: var(--rf-color-danger);

package/styles/runes/hero.css

@@ -149,6 +149,9 @@
 	margin-top: 3rem;
 	border-radius: var(--rf-radius-lg);
 }
+/* Rune-guest chrome handling (don't round a sandbox / codegroup / juxtapose) is
+ * the shared `data-guest-fit="bleed"` behaviour — see layouts/split.css. The
+ * hero only sets the image radius tier here. */
 .rf-hero[data-media-position="top"] > .rf-hero__media {
 	margin-top: 0;
 	margin-bottom: 3rem;

package/styles/runes/sandbox.css

@@ -1,8 +1,27 @@
 @layer skin {
 /* Sandbox — skin. The iframe clip/fill + banner/poster/activate layout live in
  * @refrakt-md/skeleton (styles/runes/sandbox.css). */
+
+/* The iframe canvas is opaque (the behaviour writes `color-scheme` onto the
+ * srcdoc `<html>`, so the UA paints a solid backdrop — `background: transparent`
+ * can't make it see-through). A rounded shape therefore can't come from inside
+ * the sandbox; the embedding element has to clip it. The sandbox owns its
+ * radius and skeleton's `overflow: hidden` does the clip; the iframe inherits
+ * the radius so the clip holds across browsers (the rounded-iframe corner case).
+ *
+ * Radius mirrors codegroup: `radius-container` standalone — and in a bleed host
+ * (hero/feature) where the guest keeps its own chrome — while a clip-host well
+ * rounds it to the smaller media tier via the shared `[data-section="media"]
+ * > *` rule. A full-bleed cover/backdrop sandbox sits flush. */
+.rf-sandbox {
+	border-radius: var(--rf-radius-container);
+}
+[data-media-position="cover"] .rf-sandbox {
+	border-radius: 0;
+}
 .rf-sandbox iframe {
 	border: none;
+	border-radius: inherit;
 }
 /* Static fallback (pre/code shown before hydration) */
 .rf-sandbox pre {