@refrakt-md/lumina 0.21.0 → 0.23.0

package/styles/runes/pagination.css

@@ -1,77 +1,44 @@
-/* Pagination — prev/next links at the foot of sequential pages.
- *
- * Each box stacks the directional marker above the label so the two
- * controls stay compact enough to sit side-by-side on mobile. Equal
- * heights are guaranteed by the container's `align-items: stretch`, so
- * if one label wraps to multiple lines the other box grows to match.
- *
- * Boxes are capped at ~50% width via `flex: 1 1 0` + `max-width`, with
- * `margin-left: auto` on `__next` so it stays right-aligned even when
- * `__prev` isn't rendered (first page in a sequence). */
-
+@layer skin {
+/* Pagination — skin. The flex row + box flex sizing + alignment + marker order
+ * live in @refrakt-md/skeleton (styles/runes/pagination.css). */
 .rf-pagination {
-	display: flex;
-	align-items: stretch;
 	gap: 1rem;
 	margin: 3rem 0 1.5rem;
 	padding-top: 1.5rem;
 	border-top: 1px solid var(--rf-color-border);
 }
-
 .rf-pagination__prev,
 .rf-pagination__next {
-	display: flex;
-	flex-direction: column;
 	gap: 0.375rem;
 	padding: 0.75rem 1rem;
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-md);
 	color: var(--rf-color-text);
 	text-decoration: none;
-	font-size: 0.9rem;
+	font-size: var(--rf-text-sm);
 	transition: border-color 150ms ease, background-color 150ms ease;
-	flex: 1 1 0;
-	min-width: 0;
-	max-width: calc(50% - 0.5rem);
 }
-
 .rf-pagination__prev {
-	align-items: flex-start;
 	text-align: left;
 }
-
 .rf-pagination__next {
-	align-items: flex-end;
 	text-align: right;
-	margin-left: auto;
 }
-
 .rf-pagination__prev:hover,
 .rf-pagination__next:hover {
 	border-color: var(--rf-color-primary);
 	background: var(--rf-color-surface, var(--rf-color-bg));
 	text-decoration: none;
 }
-
 .rf-pagination [data-name="marker"] {
 	color: var(--rf-color-muted);
-	font-weight: 400;
-	font-size: 1.1rem;
+	font-weight: var(--rf-weight-normal);
+	font-size: var(--rf-text-lg);
 	line-height: 1;
 }
-
 .rf-pagination [data-name="label"] {
-	font-weight: 500;
-}
-
-/* The pagination rune emits prev as `<marker> <label>` but next as
-   `<label> <marker>` (an artefact of the original row layout where the
-   arrow flanked the outer edge). With our vertical stack this puts the
-   next arrow at the bottom of its box. Force it to the top to match prev. */
-.rf-pagination__next [data-name="marker"] {
-	order: -1;
+	font-weight: var(--rf-weight-medium);
 }
-
 @media (max-width: 768px) {
 	.rf-pagination {
 		gap: 0.5rem;
@@ -79,7 +46,8 @@
 	.rf-pagination__prev,
 	.rf-pagination__next {
 		padding: 0.625rem 0.875rem;
-		max-width: calc(50% - 0.25rem);
-		font-size: 0.85rem;
+		font-size: var(--rf-text-sm);
 	}
 }
+
+}

package/styles/runes/palette.css

@@ -1,7 +1,8 @@
+@layer skin {
 /* Palette — color swatch grid */
 .rf-palette__title {
-	font-size: 1.125rem;
-	font-weight: 600;
+	font-size: var(--rf-text-lg);
+	font-weight: var(--rf-weight-semibold);
 	margin-bottom: 1rem;
 }
 .rf-palette__group {
@@ -11,56 +12,41 @@
 	margin-bottom: 0;
 }
 .rf-palette__group-title {
-	font-size: 0.8rem;
-	font-weight: 600;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-semibold);
 	text-transform: uppercase;
-	letter-spacing: 0.05em;
+	letter-spacing: var(--rf-tracking-wider);
 	color: var(--rf-color-muted);
 	margin-bottom: 0.75rem;
 }
 .rf-palette__grid {
-	display: grid;
-	grid-template-columns: repeat(var(--rf-palette-cols, 4), 1fr);
 	gap: 0.75rem;
 }
-
-@media (max-width: 768px) {
-	/* Cap the grid at 3 columns on narrow viewports — at 4 cols each swatch
-	   is too cramped to read the hex value. Palettes with fewer than 3
-	   declared columns keep their natural count (the `min()`). */
-	.rf-palette__grid {
-		grid-template-columns: repeat(min(var(--rf-palette-cols, 4), 3), 1fr);
-	}
-}
 .rf-palette__swatch {
-	display: flex;
-	flex-direction: column;
 	gap: 0.375rem;
 }
 .rf-palette__swatch-color {
-	height: 5rem;
 	border-radius: var(--rf-radius-md, 8px);
 	border: 1px solid rgba(0, 0, 0, 0.08);
 }
 .rf-palette__swatch-name {
-	font-weight: 500;
-	font-size: 0.875rem;
+	font-weight: var(--rf-weight-medium);
+	font-size: var(--rf-text-sm);
 }
 .rf-palette__swatch-value {
 	font-family: var(--rf-font-mono, monospace);
-	font-size: 0.75rem;
+	font-size: var(--rf-text-xs);
 	color: var(--rf-color-muted);
 }
 .rf-palette__swatch-contrast {
 	font-family: var(--rf-font-mono, monospace);
-	font-size: 0.7rem;
+	font-size: var(--rf-text-xs);
 	color: var(--rf-color-muted);
 }
 .rf-palette__swatch-a11y {
-	display: flex;
 	gap: 0.5rem;
-	font-size: 0.7rem;
-	font-weight: 500;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-medium);
 }
 .rf-palette__swatch-a11y--pass {
 	color: var(--rf-color-success, #10b981);
@@ -71,27 +57,22 @@
 
 /* Neutral scale — horizontal gradient strip */
 .rf-palette__scale {
-	display: flex;
 	border-radius: var(--rf-radius-md, 8px);
-	overflow: hidden;
 	margin-bottom: 0.5rem;
 }
 .rf-palette__scale-stop {
-	flex: 1;
 	padding: 1.25rem 0.5rem 0.5rem;
-	display: flex;
-	align-items: flex-end;
-	justify-content: center;
-	min-height: 4rem;
-	font-size: 0.625rem;
+	font-size: var(--rf-text-xs);
 	font-family: var(--rf-font-mono, monospace);
 }
 .rf-palette__scale + .rf-palette__swatch-name {
 	margin-top: 0.25rem;
-	font-size: 0.8rem;
+	font-size: var(--rf-text-xs);
 }
 
 /* Context-aware: no outer margin when inside design-context */
 .rf-palette--in-design-context {
 	margin: 0;
 }
+
+}

package/styles/runes/placeholder.css

@@ -0,0 +1,16 @@
+@layer skin {
+/* Placeholder — generated inline SVG from the `placeholder:<shape>` image-src
+ * scheme (SPEC-106). The SVG carries its own viewBox aspect and tints itself
+ * with theme tokens (surface / muted / border), so it tracks the active tint
+ * and dark mode for free. These rules just make it behave like a responsive
+ * replaced element wherever a real `<img>` would have gone. */
+.rf-placeholder {
+	border-radius: var(--rf-radius-media);
+}
+
+/* Avatar shape reads as round. */
+.rf-placeholder[data-shape="avatar"] {
+	border-radius: 50%;
+}
+
+}

package/styles/runes/plan-history.css

@@ -1,25 +1,24 @@
+@layer skin {
 /* Plan History — vertical timeline (mirrors .rf-timeline--vertical) */
 
 .rf-plan-history {
 	margin: 2rem 0;
 }
 .rf-plan-history__heading {
-	font-size: 1.05rem;
-	font-weight: 700;
+	font-size: var(--rf-text);
+	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-text);
 	margin: 0 0 1rem;
 }
 
 /* Event list — vertical line */
 .rf-plan-history__events {
-	list-style: none;
 	padding: 0;
 	margin: 0;
 }
 
 /* Each event entry — left-padded with border line */
 .rf-plan-history__event {
-	position: relative;
 	padding-left: 2rem;
 	padding-bottom: 2rem;
 	border-left: 2px solid var(--rf-color-border);
@@ -32,12 +31,6 @@
 
 /* Circle markers on the timeline line */
 .rf-plan-history__event::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);
@@ -51,16 +44,15 @@
 
 /* Date + hash header */
 .rf-plan-history__date {
-	display: inline;
-	font-size: 0.8rem;
-	font-weight: 600;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-primary);
-	letter-spacing: 0.02em;
+	letter-spacing: var(--rf-tracking-wide);
 	margin-right: 0.5rem;
 }
 .rf-plan-history__hash {
 	font-family: var(--rf-font-mono);
-	font-size: 0.75rem;
+	font-size: var(--rf-text-xs);
 	color: var(--rf-color-muted);
 	text-decoration: none;
 }
@@ -74,15 +66,13 @@ a.rf-plan-history__hash:hover {
 	margin-top: 0.25rem;
 }
 .rf-plan-history__change {
-	display: flex;
-	align-items: center;
 	gap: 0.25rem;
-	font-size: 0.925rem;
-	line-height: 1.65;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 	color: var(--rf-color-muted);
 }
 .rf-plan-history__field {
-	font-weight: 500;
+	font-weight: var(--rf-weight-medium);
 	color: var(--rf-color-text);
 }
 .rf-plan-history__field::after {
@@ -95,7 +85,7 @@ a.rf-plan-history__hash:hover {
 
 /* Value badges (add/remove) */
 .rf-plan-history__value {
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 	padding: 0.0625rem 0.375rem;
 	border-radius: var(--rf-radius-sm);
 }
@@ -111,25 +101,24 @@ a.rf-plan-history__hash:hover {
 
 /* Event kind labels */
 .rf-plan-history__created {
-	font-size: 0.925rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
 .rf-plan-history__resolution,
 .rf-plan-history__content-edit {
-	font-size: 0.925rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 	font-style: italic;
 }
 
 /* Criteria list */
 .rf-plan-history__criteria {
-	list-style: none;
 	padding: 0;
 	margin: 0.25rem 0 0;
 }
 .rf-plan-history__criteria li {
-	font-size: 0.8125rem;
-	line-height: 1.65;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 	color: var(--rf-color-text);
 }
 .rf-plan-history__criteria li[data-action="checked"] {
@@ -156,24 +145,21 @@ a.rf-plan-history__hash:hover {
 
 /* Global feed (commit-grouped) */
 .rf-plan-history--global .rf-plan-history__commit-message {
-	display: block;
-	font-size: 1.05rem;
-	font-weight: 700;
+	font-size: var(--rf-text);
+	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-text);
 	margin-top: 0.25rem;
 	margin-bottom: 0.5rem;
 }
 .rf-plan-history--global .rf-plan-history__entity-summary {
-	display: flex;
-	align-items: baseline;
 	gap: 0.5rem;
-	font-size: 0.8125rem;
-	line-height: 1.65;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-plan-history--global .rf-plan-history__entity-id {
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 	font-family: var(--rf-font-mono);
-	font-size: 0.75rem;
+	font-size: var(--rf-text-xs);
 	color: var(--rf-color-primary);
 	white-space: nowrap;
 }
@@ -186,12 +172,6 @@ a.rf-plan-history__hash:hover {
 	.rf-plan-history__event {
 		padding-left: 1.25rem;
 	}
-	.rf-plan-history__event::before {
-		width: 0.625rem;
-		height: 0.625rem;
-		left: -0.375rem;
-	}
-	.rf-plan-history__change {
-		flex-wrap: wrap;
-	}
+}
+
 }

package/styles/runes/plan-progress.css

@@ -1,22 +1,21 @@
+@layer skin {
 /* plan-progress (SPEC-076 / WORK-296) — a stack of per-type blocks, each a type
  * heading + an `aggregate` composition (progress bar + status badges). The bar
  * and badge-row chrome come from the `progress` / `aggregate` / `badge` runes;
  * this file only lays out the per-type grouping. */
 .rf-plan-progress {
-	display: flex;
-	flex-direction: column;
 	gap: var(--rf-spacing-lg, 2rem);
 }
 .rf-plan-progress__group {
-	display: flex;
-	flex-direction: column;
 	gap: var(--rf-spacing-sm, 0.75rem);
 }
 .rf-plan-progress__heading {
 	margin: 0;
-	font-size: 0.8125rem;
-	font-weight: 600;
+	font-size: var(--rf-text-sm);
+	font-weight: var(--rf-weight-semibold);
 	text-transform: uppercase;
-	letter-spacing: 0.05em;
+	letter-spacing: var(--rf-tracking-wider);
 	color: var(--rf-color-muted);
 }
+
+}

package/styles/runes/plan-ref.css

@@ -1,8 +1,9 @@
+@layer skin {
 /* Plan cross-reference links */
 
 .rf-plan-ref {
 	font-family: var(--rf-font-mono, ui-monospace, monospace);
-	font-size: 0.8125rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-info, #339af0);
 	text-decoration: none;
 	border-bottom: 1px dashed var(--rf-color-info, #339af0);
@@ -24,3 +25,5 @@
 .rf-plan-ref[data-type="bug"]::before { content: '\1F41B'; }
 .rf-plan-ref[data-type="decision"]::before { content: '\2696\FE0F'; }
 .rf-plan-ref[data-type="milestone"]::before { content: '\1F3AF'; }
+
+}

package/styles/runes/playlist.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Playlist */
 
 /* Thin-edge inset model (matches `.rf-card` / `.rf-recipe`): card outer padding
@@ -34,8 +35,6 @@
 
 /* Inner header (headline + description) inside content */
 .rf-playlist__content > .rf-playlist__header {
-	flex-direction: column;
-	align-items: flex-start;
 	gap: 0.25rem;
 	margin-bottom: 1rem;
 }
@@ -44,36 +43,26 @@
 }
 .rf-playlist__content > .rf-playlist__header p {
 	margin: 0;
-	font-size: 0.925rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
-	line-height: 1.5;
+	line-height: var(--rf-leading-normal);
 }
 
 /* Tracks list wrapper */
 .rf-playlist__tracks {
-	list-style: none;
 	padding: 0;
 	margin: 0;
-	counter-reset: track;
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-md);
-	overflow: hidden;
 }
 
 /* Track items — override sequence dimension's absolute positioning */
 .rf-playlist__tracks > li {
-	display: flex;
-	align-items: baseline;
 	gap: 0.75rem;
 	padding: 0.75rem 1.25rem;
 	padding-left: 1.25rem;
-	position: static;
 	transition: background 0.15s ease;
 }
-/* Hide meta elements from flex layout */
-.rf-playlist__tracks > li > meta {
-	display: none;
-}
 .rf-playlist__tracks > li + li {
 	border-top: 1px solid var(--rf-color-border);
 }
@@ -81,36 +70,27 @@
 	background: color-mix(in srgb, var(--rf-color-border) 15%, transparent);
 }
 .rf-playlist__tracks > li::before {
-	position: static;
-	width: auto;
-	height: auto;
-	min-width: 1.5rem;
-	font-size: 0.8rem;
+	font-size: var(--rf-text-xs);
 	font-variant-numeric: tabular-nums;
 	color: var(--rf-color-muted);
 	background: none;
 	border-radius: 0;
 	text-align: right;
-	flex-shrink: 0;
 }
 
 /* Track name */
 .rf-playlist__tracks [data-name="track-name"] {
-	flex: 1;
-	font-size: 0.9375rem;
-	font-weight: 500;
+	font-size: var(--rf-text);
+	font-weight: var(--rf-weight-medium);
 	color: var(--rf-color-text);
-	min-width: 0;
-	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
 /* Track artist */
 .rf-playlist__tracks [data-name="track-artist"] {
-	font-size: 0.8125rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
-	flex-shrink: 0;
 }
 .rf-playlist__tracks [data-name="track-artist"]::before {
 	content: '\00b7';
@@ -120,20 +100,16 @@
 
 /* Track duration — pushed right */
 .rf-playlist__tracks [data-name="track-duration"] {
-	font-size: 0.8125rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 	font-variant-numeric: tabular-nums;
-	flex-shrink: 0;
-	margin-left: auto;
-	min-width: 3rem;
 	text-align: right;
 }
 
 /* Track meta (date etc.) */
 .rf-playlist__tracks [data-name="track-meta"] {
-	font-size: 0.75rem;
+	font-size: var(--rf-text-xs);
 	color: var(--rf-color-muted);
-	flex-shrink: 0;
 }
 .rf-playlist__tracks [data-name="track-meta"]::before {
 	content: '\00b7';
@@ -147,16 +123,6 @@
 	margin-top: 0.5rem;
 }
 
-/* Media zone — domain-specific cover art overrides (base styles in split.css) */
-.rf-playlist__media img {
-	aspect-ratio: 1;
-	object-fit: cover;
-}
-
 /* Hide secondary columns on narrow screens */
-@media (max-width: 480px) {
-	.rf-playlist__tracks [data-name="track-artist"],
-	.rf-playlist__tracks [data-name="track-meta"] {
-		display: none;
-	}
+
 }

package/styles/runes/plot.css

@@ -1,12 +1,7 @@
-/* Plot */
-.rf-plot {
-	display: flex;
-	flex-direction: column;
-}
+@layer skin {
 .rf-plot > span[property="name"] {
-	display: block;
-	font-size: 1.5rem;
-	font-weight: 700;
+	font-size: var(--rf-text-2xl);
+	font-weight: var(--rf-weight-bold);
 	margin-bottom: 0.5rem;
 	color: var(--rf-color-text);
 }
@@ -20,41 +15,33 @@
 
 /* Beats list */
 .rf-plot ol {
-	list-style: none;
 	padding-left: 0;
 	margin: 1rem 0 0;
 }
 
 /* Beat — all variants use left padding with dot at left: 0 */
 .rf-beat {
-	position: relative;
 	padding: 0.625rem 0 0.625rem 2.25rem;
 }
 .rf-beat + .rf-beat {
 	border-top: 1px solid var(--rf-color-border);
 }
 .rf-beat::before {
-	content: '';
-	position: absolute;
-	left: 0.375rem;
-	top: 1rem;
-	width: 0.75rem;
-	height: 0.75rem;
 	border-radius: 50%;
 	background: var(--rf-color-surface-active);
 	border: 2px solid var(--rf-color-bg);
 	box-shadow: 0 0 0 2px var(--rf-color-surface-active);
 }
 .rf-beat > span[data-field="label"] {
-	font-weight: 600;
-	font-size: 1rem;
+	font-weight: var(--rf-weight-semibold);
+	font-size: var(--rf-text);
 	color: var(--rf-color-text);
 }
 .rf-beat__body {
 	margin-top: 0.25rem;
-	font-size: 0.9375rem;
+	font-size: var(--rf-text);
 	color: var(--rf-color-muted);
-	line-height: 1.6;
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-beat__body p {
 	margin: 0;
@@ -69,13 +56,8 @@
 	border-left: 2px solid var(--rf-color-border);
 	margin-left: 0.375rem;
 }
-.rf-plot--linear .rf-beat::before {
-	left: -0.4375rem;
-	top: 0.125rem;
-}
 .rf-plot--linear .rf-beat > span[data-field="label"] {
 	line-height: 1;
-	display: block;
 	margin-top: -0.5rem;
 }
 .rf-plot--linear .rf-beat + .rf-beat {
@@ -115,3 +97,5 @@
 	background: var(--rf-color-muted);
 	box-shadow: 0 0 0 2px var(--rf-color-muted);
 }
+
+}