@refrakt-md/lumina 0.22.0 → 0.24.0

package/styles/runes/pagination.css

@@ -1,27 +1,14 @@
-/* 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);
@@ -30,48 +17,28 @@
 	text-decoration: none;
 	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: var(--rf-weight-normal);
 	font-size: var(--rf-text-lg);
 	line-height: 1;
 }
-
 .rf-pagination [data-name="label"] {
 	font-weight: var(--rf-weight-medium);
 }
-
-/* 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;
-}
-
 @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: var(--rf-text-sm);
 	}
 }
+
+}

package/styles/runes/palette.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Palette — color swatch grid */
 .rf-palette__title {
 	font-size: var(--rf-text-lg);
@@ -19,26 +20,12 @@
 	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);
 }
@@ -57,7 +44,6 @@
 	color: var(--rf-color-muted);
 }
 .rf-palette__swatch-a11y {
-	display: flex;
 	gap: 0.5rem;
 	font-size: var(--rf-text-xs);
 	font-weight: var(--rf-weight-medium);
@@ -71,18 +57,11 @@
 
 /* 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: var(--rf-text-xs);
 	font-family: var(--rf-font-mono, monospace);
 }
@@ -95,3 +74,5 @@
 .rf-palette--in-design-context {
 	margin: 0;
 }
+
+}

package/styles/runes/placeholder.css

@@ -1,12 +1,10 @@
+@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 {
-	display: block;
-	width: 100%;
-	height: auto;
 	border-radius: var(--rf-radius-media);
 }
 
@@ -14,3 +12,5 @@
 .rf-placeholder[data-shape="avatar"] {
 	border-radius: 50%;
 }
+
+}

package/styles/runes/plan-history.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Plan History — vertical timeline (mirrors .rf-timeline--vertical) */
 
 .rf-plan-history {
@@ -12,14 +13,12 @@
 
 /* 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,7 +44,6 @@
 
 /* Date + hash header */
 .rf-plan-history__date {
-	display: inline;
 	font-size: var(--rf-text-xs);
 	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-primary);
@@ -74,8 +66,6 @@ a.rf-plan-history__hash:hover {
 	margin-top: 0.25rem;
 }
 .rf-plan-history__change {
-	display: flex;
-	align-items: center;
 	gap: 0.25rem;
 	font-size: var(--rf-text-sm);
 	line-height: var(--rf-leading-relaxed);
@@ -123,7 +113,6 @@ a.rf-plan-history__hash:hover {
 
 /* Criteria list */
 .rf-plan-history__criteria {
-	list-style: none;
 	padding: 0;
 	margin: 0.25rem 0 0;
 }
@@ -156,7 +145,6 @@ a.rf-plan-history__hash:hover {
 
 /* Global feed (commit-grouped) */
 .rf-plan-history--global .rf-plan-history__commit-message {
-	display: block;
 	font-size: var(--rf-text);
 	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-text);
@@ -164,8 +152,6 @@ a.rf-plan-history__hash:hover {
 	margin-bottom: 0.5rem;
 }
 .rf-plan-history--global .rf-plan-history__entity-summary {
-	display: flex;
-	align-items: baseline;
 	gap: 0.5rem;
 	font-size: var(--rf-text-sm);
 	line-height: var(--rf-leading-relaxed);
@@ -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,15 +1,12 @@
+@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 {
@@ -20,3 +17,5 @@
 	letter-spacing: var(--rf-tracking-wider);
 	color: var(--rf-color-muted);
 }
+
+}

package/styles/runes/plan-ref.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Plan cross-reference links */
 
 .rf-plan-ref {
@@ -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;
 }
@@ -51,29 +50,19 @@
 
 /* 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,27 +70,19 @@
 	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: 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: 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;
 }
@@ -110,7 +91,6 @@
 .rf-playlist__tracks [data-name="track-artist"] {
 	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
-	flex-shrink: 0;
 }
 .rf-playlist__tracks [data-name="track-artist"]::before {
 	content: '\00b7';
@@ -123,9 +103,6 @@
 	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;
 }
 
@@ -133,7 +110,6 @@
 .rf-playlist__tracks [data-name="track-meta"] {
 	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,10 +1,5 @@
-/* Plot */
-.rf-plot {
-	display: flex;
-	flex-direction: column;
-}
+@layer skin {
 .rf-plot > span[property="name"] {
-	display: block;
 	font-size: var(--rf-text-2xl);
 	font-weight: var(--rf-weight-bold);
 	margin-bottom: 0.5rem;
@@ -20,26 +15,18 @@
 
 /* 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);
@@ -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);
 }
+
+}

package/styles/runes/preview.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Preview — Component showcase with theme toggle and width control */
 .rf-preview {
 	margin: 2rem 0;
@@ -5,11 +6,7 @@
 
 /* Toolbar — transparent, controls float above the canvas */
 .rf-preview__toolbar {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
 	padding: 0.25rem 0.25rem 0.5rem;
-	min-height: 2rem;
 }
 .rf-preview__title {
 	font-size: var(--rf-text-xs);
@@ -21,14 +18,11 @@
 
 /* Controls container (view toggle + theme toggle) */
 .rf-preview__controls {
-	display: flex;
-	align-items: center;
 	gap: 0.5rem;
 }
 
 /* View toggle pill (code/preview) */
 .rf-preview__view-toggle {
-	display: flex;
 	gap: 0.125rem;
 	background: var(--rf-color-surface-active);
 	border-radius: var(--rf-radius-full);
@@ -37,18 +31,12 @@
 
 /* Theme toggle pill */
 .rf-preview__toggle {
-	display: flex;
 	gap: 0.125rem;
 	background: var(--rf-color-surface-active);
 	border-radius: var(--rf-radius-full);
 	padding: 0.125rem;
 }
 .rf-preview__toggle-btn {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 1.625rem;
-	height: 1.625rem;
 	border: none;
 	border-radius: var(--rf-radius-full);
 	background: transparent;
@@ -73,7 +61,6 @@
 	color: var(--rf-color-text);
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-lg);
-	overflow: hidden;
 }
 /* Centre a standalone mockup whose `data-fit="none"` makes it inline-block —
  * margin-inline auto can't centre an inline-block, only its parent's text
@@ -94,7 +81,6 @@
 
 /* Viewport simulation toggle pill */
 .rf-preview__viewport-toggle {
-	display: flex;
 	gap: 0.125rem;
 	background: var(--rf-color-surface-active);
 	border-radius: var(--rf-radius-full);
@@ -103,24 +89,16 @@
 
 /* Viewport simulation frame */
 .rf-preview__viewport-frame {
-	position: relative;
-	overflow: hidden;
 	transition: max-width 300ms ease;
 }
 .rf-preview__viewport-frame--constrained {
-	margin: 0 auto;
 	border: 1px dashed var(--rf-color-border);
 	border-radius: var(--rf-radius-sm);
 }
 .rf-preview__viewport-label {
-	position: absolute;
-	top: 0.25rem;
-	right: 0.5rem;
 	font-size: var(--rf-text-xs);
 	color: var(--rf-color-muted);
 	font-variant-numeric: tabular-nums;
-	pointer-events: none;
-	z-index: 1;
 }
 
 /* Source code view — bordered frame matching the canvas */
@@ -139,7 +117,6 @@
 
 /* Source tabs (data-source panels) */
 .rf-preview__source-tabs {
-	display: flex;
 	gap: 0;
 	background: var(--rf-color-surface);
 	border-radius: var(--rf-radius-lg);
@@ -179,7 +156,10 @@
 		border-left: none;
 		border-right: none;
 	}
-	/* Break out of feature's padding-inline to reach viewport edges */
+	/* Break out of the feature's padding-inline to reach the viewport edges. Stays
+	 * skin (not skeleton): this overrides the skin rule `.rf-preview { margin: 2rem 0 }`
+	 * by specificity, and that only wins within the same cascade layer — in
+	 * @layer skeleton it loses to the skin margin and the bleed is nullified. */
 	.rf-preview--in-feature {
 		margin-inline: calc(-1 * var(--rf-content-gutter, 1.5rem));
 	}
@@ -187,3 +167,5 @@
 		padding-inline: var(--rf-content-gutter, 1.5rem);
 	}
 }
+
+}

package/styles/runes/pricing.css

@@ -1,11 +1,11 @@
-/* Pricing */
+@layer skin {
+/* Pricing — skin. The tiers grid, tier flex-column, eyebrow stretched-link, and
+ * list resets live in @refrakt-md/skeleton (styles/runes/pricing.css). */
 .rf-pricing {
 	padding: 2rem 0;
 }
 .rf-pricing > header,
 .rf-pricing__preamble {
-	flex-direction: column;
-	align-items: flex-start;
 	gap: 0.25rem;
 	text-align: center;
 	margin-bottom: 2rem;
@@ -23,8 +23,6 @@
 	margin: 0 0 0.5rem;
 }
 .rf-pricing__eyebrow:has(a) {
-	display: inline-block;
-	position: relative;
 	padding: 0.25rem 0.875rem;
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-full);
@@ -36,7 +34,7 @@
 }
 .rf-pricing__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
 .rf-pricing__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: var(--rf-weight-semibold); text-decoration: none; }
-.rf-pricing__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
+.rf-pricing__eyebrow:has(a) a::before { border-radius: inherit; }
 .rf-pricing__blurb {
 	color: var(--rf-color-muted);
 	margin-bottom: 0;
@@ -44,19 +42,9 @@
 .rf-pricing__image {
 	margin-bottom: 1rem;
 }
-.rf-pricing__tiers {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-	gap: 1.5rem;
-	list-style: none;
-	padding: 0;
-	margin: 0;
-}
+.rf-pricing__tiers,
 .rf-pricing > ul[data-layout="grid"] {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
 	gap: 1.5rem;
-	list-style: none;
 	padding: 0;
 	margin: 0;
 }
@@ -65,8 +53,6 @@
 	border-radius: var(--rf-radius-md);
 	padding: 2rem;
 	background: var(--rf-color-bg);
-	display: flex;
-	flex-direction: column;
 	transition: box-shadow 200ms ease;
 }
 .rf-tier:hover {
@@ -90,11 +76,7 @@
 	margin-bottom: 1.5rem;
 	line-height: var(--rf-leading-tight);
 }
-.rf-tier__body {
-	flex: 1;
-}
 .rf-tier__body ul {
-	list-style: none;
 	padding-left: 0;
 	margin: 0 0 1.5rem;
 }
@@ -110,7 +92,6 @@
 	font-weight: var(--rf-weight-semibold);
 }
 .rf-tier__body a {
-	display: block;
 	text-align: center;
 	padding: 0.625rem 1.5rem;
 	border-radius: var(--rf-radius-sm);
@@ -118,7 +99,6 @@
 	font-size: var(--rf-text-sm);
 	text-decoration: none;
 	transition: background-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
-	margin-top: auto;
 }
 .rf-tier:not(.rf-tier--featured) a {
 	background: var(--rf-color-surface);
@@ -142,3 +122,5 @@
 .rf-tier__body p:has(a) {
 	margin-bottom: 0;
 }
+
+}