@refrakt-md/lumina 0.31.0 → 0.32.0

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

package/styles/dimensions/density.css

@@ -38,6 +38,15 @@
 	--rf-title-size: var(--rf-text);
 }
 
+/* Every rune root clears the prominence override so an ancestor's `prominence=`
+ * cannot leak into a nested rune's title — the same protection the density
+ * declarations above already give --rf-title-size. Declared here because this
+ * file is imported before dimensions/surfaces.css, so a rune carrying both
+ * `data-density` and `data-prominence` still keeps its own. */
+[data-density] {
+	--rf-prominence-size: initial;
+}
+
 [data-density="minimal"] [data-section="description"] {
 	display: none;
 }

package/styles/dimensions/sections.css

@@ -18,12 +18,16 @@
 }
 
 /* ─── 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, and a rune's own title CSS
- * (e.g. .rf-hero__headline) outranks the bare attribute selector. */
+/* Two inputs, in priority order:
+ *   --rf-prominence-size  an explicit author `prominence=` (surfaces.css)
+ *   --rf-title-size       the resting size for this density (density.css)
+ * They were one variable until v0.32.0, which meant a rune could not state its
+ * own resting size without also clobbering the author's override — the reason
+ * `prominence` was inert on eight runes (WORK-538). Splitting them lets a rune
+ * pin its default while `prominence` still wins. */
 [data-section="title"] {
 	font-family: var(--rf-font-sans);
-	font-size: var(--rf-title-size, var(--rf-text-2xl));
+	font-size: var(--rf-prominence-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);

package/styles/dimensions/surfaces.css

@@ -85,17 +85,32 @@
 /* ─── 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. */
+ * is the rune's resting size; the other steps ramp away from it, cascading down
+ * to [data-section="title"] via --rf-prominence-size.
+ *
+ * **The ramp is relative, not an absolute type scale** (v0.32.0, WORK-538).
+ * The steps used to be fixed sizes — xl / 3xl / 4xl — which only reads as a
+ * register when the rune's resting size happens to be the density default. On a
+ * hero, whose headline rests above the whole scale, `display` made the title
+ * *smaller*; on a bento cell, which rests below it, `quiet` made it *larger*.
+ * The multipliers below are the ratios those fixed steps had to the 2xl resting
+ * size, so every rune resting at the density default keeps its exact numbers
+ * (1.5rem → 20 / 24 / 30 / 40px) while a rune that states its own resting size
+ * ramps around that instead.
+ *
+ * Published as --rf-prominence-size rather than by overwriting --rf-title-size,
+ * so a rune can state a resting size without also silencing the author's
+ * override. density.css clears the variable at every rune root, before these
+ * rules, so an ancestor's prominence cannot leak into a nested rune's title
+ * while a rune carrying both still keeps its own. */
 [data-prominence="quiet"] {
-	--rf-title-size: var(--rf-text-xl);
+	--rf-prominence-size: calc(var(--rf-title-size, var(--rf-text-2xl)) * 5 / 6);
 }
 [data-prominence="prominent"] {
-	--rf-title-size: var(--rf-text-3xl);
+	--rf-prominence-size: calc(var(--rf-title-size, var(--rf-text-2xl)) * 5 / 4);
 }
 [data-prominence="display"] {
-	--rf-title-size: var(--rf-text-4xl);
+	--rf-prominence-size: calc(var(--rf-title-size, var(--rf-text-2xl)) * 5 / 3);
 }
 
 /* ─── Media slot shares the surface chrome ───────────────────────────

package/styles/runes/bento.css

@@ -15,6 +15,7 @@
 	background: var(--rf-color-surface);
 }
 .rf-bento-cell {
+	--rf-title-size: var(--rf-text-lg);
 	border-radius: var(--rf-radius-container);
 	/* Thin-edge inset model: the cell hugs its media with a thin edge; the content
 	 * zone adds the remaining inset back (below). */
@@ -45,7 +46,10 @@
 	padding: calc(var(--container-padding) - var(--bento-cell-edge));
 }
 .rf-bento-cell__title {
-	font-size: var(--rf-text-lg);
+	/* WORK-538 — read the prominence override first; the fallback is this rune's
+	 * resting size, stated as --rf-title-size on the root so the prominence ramp
+	 * can compute from it. */
+	font-size: var(--rf-prominence-size, var(--rf-title-size));
 	font-weight: var(--rf-weight-semibold);
 	margin: 0 0 0.5rem;
 }

package/styles/runes/blog.css

@@ -1,13 +1,17 @@
 @layer skin {
 /* Blog — post listing with filtering and sorting */
 .rf-blog {
+	--rf-title-size: var(--rf-text-3xl);
 	padding: 2rem 0;
 }
 .rf-blog__preamble {
 	margin-bottom: 2rem;
 }
 .rf-blog__headline {
-	font-size: var(--rf-text-3xl);
+	/* WORK-538 — read the prominence override first; the fallback is this rune's
+	 * resting size, stated as --rf-title-size on the root so the prominence ramp
+	 * can compute from it. */
+	font-size: var(--rf-prominence-size, var(--rf-title-size));
 	font-weight: var(--rf-weight-bold);
 	letter-spacing: var(--rf-tracking-tight);
 	margin: 0 0 0.5rem;

package/styles/runes/cta.css

@@ -2,6 +2,7 @@
 /* Call to Action — skin. The preamble/eyebrow/button-row layout + mobile stack
  * live in @refrakt-md/skeleton (styles/runes/cta.css). */
 .rf-cta {
+	--rf-title-size: var(--rf-text-4xl);
 	padding: 3.5rem 2rem 3rem;
 }
 .rf-cta .rf-cta__preamble,
@@ -52,7 +53,10 @@
 .rf-cta h2,
 .rf-cta h3,
 .rf-cta__headline {
-	font-size: var(--rf-text-4xl);
+	/* WORK-538 — read the prominence override first; the fallback is this rune's
+	 * resting size, stated as --rf-title-size on the root so the prominence ramp
+	 * can compute from it. */
+	font-size: var(--rf-prominence-size, var(--rf-title-size));
 	font-weight: var(--rf-weight-bold);
 	letter-spacing: var(--rf-tracking-tight);
 	margin-bottom: 0.75rem;

package/styles/runes/design-context.css

@@ -1,7 +1,17 @@
 @layer skin {
+
+/* WORK-538 — resting title size, so the prominence ramp computes from it
+ * rather than from the density default. */
+.rf-design-context {
+	--rf-title-size: var(--rf-text-xl);
+}
+
 /* Design Context — unified token card wrapper */
 .rf-design-context__title {
-	font-size: var(--rf-text-xl);
+	/* WORK-538 — read the prominence override first; the fallback is this rune's
+	 * resting size, stated as --rf-title-size on the root so the prominence ramp
+	 * can compute from it. */
+	font-size: var(--rf-prominence-size, var(--rf-title-size));
 	font-weight: var(--rf-weight-bold);
 	margin-bottom: 1rem;
 }

package/styles/runes/hero.css

@@ -5,7 +5,12 @@
  * @refrakt-md/skeleton (styles/runes/hero.css). What remains here is skin:
  * spacing, type, the headline gradient, surface chrome, the scrim, radii, and
  * text-align. */
+/* The hero rests above the --rf-text scale's top step (4xl = 2.5rem); stated
+ * here rather than promoted to a --rf-text-5xl token, because the type scale is
+ * a typed contract every theme must satisfy (SPEC-048) and one rune's one-off
+ * does not belong in it. The prominence ramp scales around this value. */
 .rf-hero {
+	--rf-title-size: 3.25rem;
 	padding: 7rem 2rem 6.5rem;
 	background-size: cover;
 	background-position: center;
@@ -80,8 +85,10 @@
 }
 .rf-hero h1,
 .rf-hero__headline {
-	/* Hero display headline — a one-off above the --rf-text scale's top step. */
-	font-size: 3.25rem;
+	/* WORK-538 — read the prominence override first; the fallback is this rune's
+	 * resting size, stated as --rf-title-size on the root so the prominence ramp
+	 * can compute from it. */
+	font-size: var(--rf-prominence-size, var(--rf-title-size));
 	font-weight: var(--rf-weight-bold);
 	letter-spacing: var(--rf-tracking-tight);
 	line-height: var(--rf-leading-tight);

package/styles/runes/palette.css

@@ -1,7 +1,17 @@
 @layer skin {
+
+/* WORK-538 — resting title size, so the prominence ramp computes from it
+ * rather than from the density default. */
+.rf-palette {
+	--rf-title-size: var(--rf-text-lg);
+}
+
 /* Palette — color swatch grid */
 .rf-palette__title {
-	font-size: var(--rf-text-lg);
+	/* WORK-538 — read the prominence override first; the fallback is this rune's
+	 * resting size, stated as --rf-title-size on the root so the prominence ramp
+	 * can compute from it. */
+	font-size: var(--rf-prominence-size, var(--rf-title-size));
 	font-weight: var(--rf-weight-semibold);
 	margin-bottom: 1rem;
 }

package/styles/runes/spacing.css

@@ -1,7 +1,17 @@
 @layer skin {
+
+/* WORK-538 — resting title size, so the prominence ramp computes from it
+ * rather than from the density default. */
+.rf-spacing {
+	--rf-title-size: var(--rf-text-lg);
+}
+
 /* Spacing — spacing scale, radii, and shadow display */
 .rf-spacing__title {
-	font-size: var(--rf-text-lg);
+	/* WORK-538 — read the prominence override first; the fallback is this rune's
+	 * resting size, stated as --rf-title-size on the root so the prominence ramp
+	 * can compute from it. */
+	font-size: var(--rf-prominence-size, var(--rf-title-size));
 	font-weight: var(--rf-weight-semibold);
 	margin-bottom: 1rem;
 }

package/styles/runes/typography.css

@@ -1,7 +1,17 @@
 @layer skin {
+
+/* WORK-538 — resting title size, so the prominence ramp computes from it
+ * rather than from the density default. */
+.rf-typography {
+	--rf-title-size: var(--rf-text-lg);
+}
+
 /* Typography — font specimen display */
 .rf-typography__title {
-	font-size: var(--rf-text-lg);
+	/* WORK-538 — read the prominence override first; the fallback is this rune's
+	 * resting size, stated as --rf-title-size on the root so the prominence ramp
+	 * can compute from it. */
+	font-size: var(--rf-prominence-size, var(--rf-title-size));
 	font-weight: var(--rf-weight-semibold);
 	margin-bottom: 1rem;
 }