@refrakt-md/lumina 0.16.0 → 0.17.0

package/styles/runes/hint.css

@@ -7,13 +7,18 @@
 }
 .rf-hint__header {
 	margin-bottom: 0.375rem;
+	color: var(--hint-color);
 }
-.rf-hint__icon {
-	display: flex;
+/* The lone `hintType` field renders icon + label in one inline-flex span. */
+.rf-hint__header > span {
+	display: inline-flex;
 	align-items: center;
-	color: var(--hint-color);
+	gap: 0.375rem;
 }
-.rf-hint__icon::before {
+.rf-hint__header [data-icon-group="hint"] {
+	display: block;
+}
+.rf-hint__header [data-icon-group="hint"]::before {
 	content: '';
 	display: block;
 	width: 1.25rem;
@@ -24,28 +29,27 @@
 	-webkit-mask-repeat: no-repeat;
 	mask-repeat: no-repeat;
 }
-.rf-hint--note .rf-hint__icon::before {
+[data-icon-group="hint"][data-icon="note"]::before {
 	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
 	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E");
 }
-.rf-hint--warning .rf-hint__icon::before {
+[data-icon-group="hint"][data-icon="warning"]::before {
 	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
 	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cline x1='12' y1='9' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
 }
-.rf-hint--caution .rf-hint__icon::before {
+[data-icon-group="hint"][data-icon="caution"]::before {
 	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
 	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
 }
-.rf-hint--check .rf-hint__icon::before {
+[data-icon-group="hint"][data-icon="check"]::before {
 	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
 	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E");
 }
-.rf-hint__title {
+.rf-hint__header [data-meta-value] {
 	font-weight: 600;
 	text-transform: capitalize;
 	font-size: 0.8rem;
 	letter-spacing: 0.03em;
-	color: var(--hint-color);
 }
 .rf-hint__body {
 	font-size: 0.925rem;

package/styles/runes/howto.css

@@ -1,10 +1,5 @@
 /* HowTo — matches recipe design */
 
-/* Meta bar — extra bottom spacing beyond section header default */
-.rf-howto__meta {
-	margin-bottom: 1.5rem;
-}
-
 /* Tools/materials list — surfaced zone with primary markers */
 .rf-howto__content ul {
 	background: var(--rf-color-surface);
@@ -76,3 +71,23 @@
 .rf-howto__content blockquote p {
 	margin: 0;
 }
+
+/* Metadata — est. time / difficulty are short, symmetric facts, so keep the
+ * def-list a dense tile grid at every width (a smaller column min than the
+ * 8rem default) instead of the shared mobile label/value list. */
+.rf-howto__metadata {
+	grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
+}
+@media (max-width: 48rem) {
+	.rf-howto__metadata {
+		grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
+		gap: 0.75rem;
+		align-items: normal;
+		padding: 0;
+		border: none;
+	}
+	.rf-howto__metadata > [data-name="row"] {
+		display: flex;
+	}
+}
+

package/styles/runes/milestone.css

@@ -1,13 +1,9 @@
 /* Milestone */
 
-/* Primary badges: name left, status right */
-.rf-milestone__header-primary {
-	justify-content: space-between;
-	margin-bottom: 0.75rem;
-}
+/* SPEC-079: eyebrow + metadata zone names replace header-primary /
+ * header-secondary. */
 
-/* Preamble: title + optional description between badge groups */
-.rf-milestone__preamble {
+.rf-milestone__eyebrow {
 	margin-bottom: 0.75rem;
 }
 .rf-milestone__title h1,
@@ -16,14 +12,9 @@
 	margin-top: 0;
 }
 
-/* Secondary badges: pill row below preamble */
-.rf-milestone__header-secondary {
+.rf-milestone__metadata {
 	margin-bottom: 1.5rem;
 }
-
-.rf-milestone__target-badge {
-	margin-left: auto;
-}
 .rf-milestone__body {
 	font-size: 0.925rem;
 	line-height: 1.65;

package/styles/runes/realm.css

@@ -1,5 +1,11 @@
-/* Realm */
-.rf-realm {
+/* Realm — split/stacked geometry, the title, and the metadata def-list all
+ * come from the shared layers: layouts/split.css ([data-layout] +
+ * [data-section="media"]), dimensions/sections.css ([data-section="title"] /
+ * "preamble"), and dimensions/metadata.css ([data-zone-layout]). This file
+ * only carries realm-specific chrome. */
+
+/* Stacked layout — split / split-reverse are handled by shared split.css */
+.rf-realm[data-layout="stacked"] {
 	display: flex;
 	flex-direction: column;
 }
@@ -19,13 +25,6 @@
 .rf-realm__content ol {
 	padding-left: 1.5rem;
 }
-.rf-realm > span[property="name"] {
-	display: block;
-	font-size: 1.5rem;
-	font-weight: 700;
-	margin-bottom: 0.5rem;
-	color: var(--rf-color-heading);
-}
 
 /* Realm Section */
 .rf-realm-section {
@@ -44,113 +43,3 @@
 .rf-realm-section__body ol {
 	padding-left: 1.5rem;
 }
-
-/* Split layout — shared */
-.rf-realm[data-layout="split"],
-.rf-realm[data-layout="split-reverse"] {
-	display: grid;
-	grid-template-columns: var(--split-ratio, 1fr 1fr);
-	column-gap: var(--split-gap, 2rem);
-	align-items: var(--split-valign, start);
-}
-/* Split: badge + name + content left (col 1), scene right (col 2) */
-.rf-realm[data-layout="split"] > .rf-realm__badge {
-	grid-column: 1;
-	grid-row: 1;
-}
-.rf-realm[data-layout="split"] > span[property="name"] {
-	grid-column: 1;
-	grid-row: 2;
-}
-.rf-realm[data-layout="split"] > .rf-realm__content {
-	grid-column: 1;
-	grid-row: 3;
-}
-.rf-realm[data-layout="split"] > .rf-realm__scene {
-	grid-column: 2;
-	grid-row: 1 / 4;
-}
-/* Split-reverse: scene left (col 1), badge + name + content right (col 2) */
-.rf-realm[data-layout="split-reverse"] > .rf-realm__badge {
-	grid-column: 2;
-	grid-row: 1;
-}
-.rf-realm[data-layout="split-reverse"] > span[property="name"] {
-	grid-column: 2;
-	grid-row: 2;
-}
-.rf-realm[data-layout="split-reverse"] > .rf-realm__content {
-	grid-column: 2;
-	grid-row: 3;
-}
-.rf-realm[data-layout="split-reverse"] > .rf-realm__scene {
-	grid-column: 1;
-	grid-row: 1 / 4;
-	margin: 0;
-}
-/* Collapse to single column on small screens */
-@media (max-width: 640px) {
-	.rf-realm[data-layout="split"],
-	.rf-realm[data-layout="split-reverse"] {
-		grid-template-columns: 1fr;
-	}
-	.rf-realm[data-layout="split"] > .rf-realm__badge,
-	.rf-realm[data-layout="split"] > span[property="name"],
-	.rf-realm[data-layout="split"] > .rf-realm__content,
-	.rf-realm[data-layout="split"] > .rf-realm__scene,
-	.rf-realm[data-layout="split-reverse"] > .rf-realm__badge,
-	.rf-realm[data-layout="split-reverse"] > span[property="name"],
-	.rf-realm[data-layout="split-reverse"] > .rf-realm__content,
-	.rf-realm[data-layout="split-reverse"] > .rf-realm__scene {
-		grid-column: auto;
-		grid-row: auto;
-	}
-	/* Only add margin when NOT in full-bleed media-position mode (shared split.css handles that) */
-	.rf-realm[data-layout="split"]:not([data-media-position="top"]) > .rf-realm__scene,
-	.rf-realm[data-layout="split-reverse"]:not([data-media-position="top"]) > .rf-realm__scene {
-		margin-bottom: var(--rf-spacing-md);
-	}
-}
-/* Reset grid placement when data-collapse triggers single-column from shared split.css */
-@media (max-width: 640px) {
-	.rf-realm[data-collapse="sm"] > .rf-realm__badge,
-	.rf-realm[data-collapse="sm"] > span[property="name"],
-	.rf-realm[data-collapse="sm"] > .rf-realm__content,
-	.rf-realm[data-collapse="sm"] > .rf-realm__scene {
-		grid-column: auto;
-		grid-row: auto;
-	}
-	.rf-realm[data-collapse="sm"]:not([data-media-position="top"]) > .rf-realm__scene {
-		margin-bottom: var(--rf-spacing-md);
-	}
-}
-@media (max-width: 768px) {
-	.rf-realm[data-collapse="md"] > .rf-realm__badge,
-	.rf-realm[data-collapse="md"] > span[property="name"],
-	.rf-realm[data-collapse="md"] > .rf-realm__content,
-	.rf-realm[data-collapse="md"] > .rf-realm__scene {
-		grid-column: auto;
-		grid-row: auto;
-	}
-	.rf-realm[data-collapse="md"]:not([data-media-position="top"]) > .rf-realm__scene {
-		margin-bottom: var(--rf-spacing-md);
-	}
-}
-@media (max-width: 1024px) {
-	.rf-realm[data-collapse="lg"] > .rf-realm__badge,
-	.rf-realm[data-collapse="lg"] > span[property="name"],
-	.rf-realm[data-collapse="lg"] > .rf-realm__content,
-	.rf-realm[data-collapse="lg"] > .rf-realm__scene {
-		grid-column: auto;
-		grid-row: auto;
-	}
-	.rf-realm[data-collapse="lg"]:not([data-media-position="top"]) > .rf-realm__scene {
-		margin-bottom: var(--rf-spacing-md);
-	}
-}
-
-/* Split layout scene gets subtle depth */
-.rf-realm[data-layout="split"] .rf-realm__scene img,
-.rf-realm[data-layout="split-reverse"] .rf-realm__scene img {
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-}

package/styles/runes/recipe.css

@@ -104,3 +104,23 @@
 .rf-recipe__media img {
 	border-radius: var(--rf-radius-lg);
 }
+
+/* Metadata — prep / cook / serves / difficulty are short, symmetric facts,
+ * so keep the def-list a dense tile grid at every width (a smaller column
+ * min than the 8rem default) instead of the shared mobile label/value list. */
+.rf-recipe__metadata {
+	grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
+}
+@media (max-width: 48rem) {
+	.rf-recipe__metadata {
+		grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
+		gap: 0.75rem;
+		align-items: normal;
+		padding: 0;
+		border: none;
+	}
+	.rf-recipe__metadata > [data-name="row"] {
+		display: flex;
+	}
+}
+

package/styles/runes/spec.css

@@ -1,13 +1,10 @@
 /* Spec */
 
-/* Primary badges: ID left, status right */
-.rf-spec__header-primary {
-	justify-content: space-between;
-	margin-bottom: 0.75rem;
-}
+/* SPEC-079: eyebrow + metadata zone names replace header-primary /
+ * header-secondary. Layout-level geometry lives on [data-zone-layout]
+ * selectors. */
 
-/* Preamble: title + optional summary between badge groups */
-.rf-spec__preamble {
+.rf-spec__eyebrow {
 	margin-bottom: 0.75rem;
 }
 .rf-spec__title h1,
@@ -16,8 +13,7 @@
 	margin-top: 0;
 }
 
-/* Secondary badges: pill row below preamble */
-.rf-spec__header-secondary {
+.rf-spec__metadata {
 	margin-bottom: 1.5rem;
 }
 

package/styles/runes/symbol.css

@@ -1,14 +1,17 @@
 /* Symbol */
-.rf-symbol__header {
+
+/* SPEC-080: signature bar (kind/lang chips + source link). Geometry +
+ * the source link's right-push come from [data-zone-layout="bar"]; the
+ * source link is a `href` field (data-meta-type="link"). */
+.rf-symbol__eyebrow {
 	padding: 0.5rem 0;
 }
-.rf-symbol__source-link {
-	margin-left: auto;
+.rf-symbol__eyebrow [data-meta-type="link"] {
 	font-size: 0.75rem;
 	color: var(--rf-color-muted);
 	text-decoration: none;
 }
-.rf-symbol__source-link:hover {
+.rf-symbol__eyebrow [data-meta-type="link"]:hover {
 	color: var(--rf-color-primary);
 }
 .rf-symbol__body {

package/styles/runes/testimonial.css

@@ -4,24 +4,11 @@
 	padding: 1.75rem 2rem;
 	background: var(--rf-color-surface);
 }
+/* Rating block — stars rendered by the shared `[data-meta-type=rating]`
+ * treatment; this rule only owns the spacing below the row. */
 .rf-testimonial__rating {
-	display: flex;
-	gap: 0.125rem;
 	margin-bottom: 0.75rem;
-}
-.rf-testimonial__star {
 	font-size: 1.1rem;
-	color: var(--rf-color-border);
-	line-height: 1;
-}
-.rf-testimonial__star::before {
-	content: '★';
-}
-.rf-testimonial__star[data-filled="true"] {
-	color: var(--rf-color-warning);
-}
-.rf-testimonial__content {
-	display: contents;
 }
 .rf-testimonial blockquote {
 	border: none;

package/styles/runes/work.css

@@ -1,30 +1,28 @@
 /* Work */
 
-/* Primary badges: ID left, status right */
-.rf-work__header-primary {
-	justify-content: space-between;
-	margin-bottom: 0.75rem;
-}
+/* SPEC-080: eyebrow / metadata / tags are projected blocks placed at the
+ * rune root via `layout`. Geometry comes from the universal
+ * `[data-zone-layout]` selectors in dimensions/metadata.css; this file
+ * carries the work-specific spacing + complexity dots + assignee prefix. */
 
-/* Preamble: title + optional blurb between badge groups */
-.rf-work__preamble {
+.rf-work__eyebrow {
 	margin-bottom: 0.75rem;
 }
+
 .rf-work__title h1,
 .rf-work__title h2,
 .rf-work__title h3 {
 	margin-top: 0;
 }
 
-/* Secondary badges: pill row below preamble */
-.rf-work__header-secondary {
+.rf-work__metadata {
 	margin-bottom: 1.5rem;
 }
 
-.rf-work__assignee-badge {
-	margin-left: auto;
-}
-.rf-work__assignee-badge::before { content: '@'; }
+/* Assignee — `@` prefix on the plain-text def-list value. Targets the
+ * row by field name so milestone / tags don't get the prefix too. */
+.rf-work__metadata [data-field="assignee"] dd .rf-badge::before { content: '@'; }
+
 .rf-work__body {
 	font-size: 0.925rem;
 	line-height: 1.65;
@@ -38,12 +36,11 @@
 	margin-top: 0.75rem;
 }
 
-/* Complexity dots */
-.rf-work__complexity-badge::after {
-	margin-left: 0.25rem;
-}
-[data-complexity="trivial"] > .rf-work__header-secondary > .rf-work__complexity-badge::after { content: '●'; }
-[data-complexity="simple"] > .rf-work__header-secondary > .rf-work__complexity-badge::after { content: '●●'; }
-[data-complexity="moderate"] > .rf-work__header-secondary > .rf-work__complexity-badge::after { content: '●●●'; }
-[data-complexity="complex"] > .rf-work__header-secondary > .rf-work__complexity-badge::after { content: '●●●●'; }
-[data-complexity="unknown"] > .rf-work__header-secondary > .rf-work__complexity-badge::after { content: '?'; }
+/* Complexity dots — appended after the value cell in the def-list. The
+ * `data-complexity` attribute lives on the root work element (set by
+ * engine modifier processing). */
+[data-complexity="trivial"]  .rf-work__metadata [data-field="complexity"] dd::after { content: '  ●'; }
+[data-complexity="simple"]   .rf-work__metadata [data-field="complexity"] dd::after { content: '  ●●'; }
+[data-complexity="moderate"] .rf-work__metadata [data-field="complexity"] dd::after { content: '  ●●●'; }
+[data-complexity="complex"]  .rf-work__metadata [data-field="complexity"] dd::after { content: '  ●●●●'; }
+[data-complexity="unknown"]  .rf-work__metadata [data-field="complexity"] dd::after { content: '  ?'; }

package/tokens/base.css

@@ -52,6 +52,20 @@
 	--rf-color-success-bg: #e0eee4;
 	--rf-color-success-border: #b8d4be;
 
+	/* WORK-304 — neutral tint for line highlight (the third
+	 * `[data-line-status]` value that snippet / codegroup / diff share).
+	 * Subtle surface tint so highlighted rows read as emphasized but not
+	 * status-coloured (which would compete with diff's add/remove channel
+	 * and the semantic palette above). `*-rail` is the optional left-edge
+	 * border colour; falls back to the primary accent via the consuming
+	 * CSS for themes that don't override it. */
+	--rf-color-line-highlight: color-mix(in srgb, var(--rf-color-text) 6%, transparent);
+	--rf-color-line-highlight-rail: var(--rf-color-primary, var(--rf-color-text));
+	/* Gutter colour for `pre[data-linenumbers]` line counter. Defers to
+	 * the existing muted text token by default; themes can pin a
+	 * dedicated hue without overriding muted. */
+	--rf-color-line-number: var(--rf-color-muted);
+
 	/* Radii */
 	--rf-radius-sm: 6px;
 	--rf-radius-md: 10px;