@refrakt-md/lumina 0.21.0 → 0.23.0

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,30 +6,23 @@
 
 /* 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: 0.75rem;
-	font-weight: 600;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-muted);
 	text-transform: uppercase;
-	letter-spacing: 0.05em;
+	letter-spacing: var(--rf-tracking-wider);
 }
 
 /* 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: 0.625rem;
+	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);
@@ -149,8 +126,8 @@
 	border: none;
 	background: transparent;
 	color: var(--rf-color-muted);
-	font-size: 0.75rem;
-	font-weight: 500;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-medium);
 	cursor: pointer;
 	border-bottom: 2px solid transparent;
 	transition: color 150ms ease, border-color 150ms ease;
@@ -179,11 +156,9 @@
 		border-left: none;
 		border-right: none;
 	}
-	/* Break out of feature's padding-inline to reach viewport edges */
-	.rf-preview--in-feature {
-		margin-inline: calc(-1 * var(--rf-content-gutter, 1.5rem));
-	}
 	.rf-preview--in-feature .rf-preview__toolbar {
 		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;
@@ -15,28 +15,26 @@
 	margin-top: 0;
 }
 .rf-pricing__eyebrow {
-	font-size: 0.8125rem;
-	font-weight: 600;
-	letter-spacing: 0.05em;
+	font-size: var(--rf-text-sm);
+	font-weight: var(--rf-weight-semibold);
+	letter-spacing: var(--rf-tracking-wider);
 	text-transform: uppercase;
 	color: var(--rf-color-primary);
 	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);
 	color: var(--rf-color-text);
-	font-weight: 400;
+	font-weight: var(--rf-weight-normal);
 	text-transform: none;
-	letter-spacing: 0;
+	letter-spacing: var(--rf-tracking-normal);
 	transition: border-color 150ms ease;
 }
 .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: 600; text-decoration: none; }
-.rf-pricing__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
+.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 { 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 {
@@ -78,47 +64,41 @@
 }
 .rf-tier h1[property="name"] {
 	margin: 0 0 0.5rem;
-	font-size: 1.1rem;
-	font-weight: 600;
+	font-size: var(--rf-text-lg);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-muted);
 }
 .rf-tier p[property="price"] {
-	font-size: 2.5rem;
-	font-weight: 700;
-	letter-spacing: -0.03em;
+	font-size: var(--rf-text-4xl);
+	font-weight: var(--rf-weight-bold);
+	letter-spacing: var(--rf-tracking-tight);
 	color: var(--rf-color-text);
 	margin-bottom: 1.5rem;
-	line-height: 1.1;
-}
-.rf-tier__body {
-	flex: 1;
+	line-height: var(--rf-leading-tight);
 }
 .rf-tier__body ul {
-	list-style: none;
 	padding-left: 0;
 	margin: 0 0 1.5rem;
 }
 .rf-tier__body li {
 	padding: 0.375rem 0;
-	font-size: 0.9rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
 .rf-tier__body li::before {
 	content: '\2713';
 	margin-right: 0.5rem;
 	color: var(--rf-color-success);
-	font-weight: 600;
+	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);
-	font-weight: 600;
-	font-size: 0.9rem;
+	font-weight: var(--rf-weight-semibold);
+	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;
 }
+
+}

package/styles/runes/progress.css

@@ -1,49 +1,30 @@
-/* progress — generic completion bar (SPEC-072 / WORK-285).
- *
- * Presentational: the fill width is driven by the `--rf-progress` custom
- * property set on the root from the computed percent. Generalized from the
- * former plan milestone progress bar.
- */
-
+@layer skin {
+/* progress — skin. The flex row, value auto-push, track box, and fill box live in
+ * @refrakt-md/skeleton (styles/runes/progress.css). */
 .rf-progress {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: baseline;
 	gap: var(--rf-spacing-xs) var(--rf-spacing-sm);
 	margin: var(--rf-spacing-sm) 0;
 }
-
 .rf-progress__label {
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-text);
 }
-
 .rf-progress__value {
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-text);
-	margin-left: auto;
 }
-
 .rf-progress__track {
-	flex-basis: 100%;
-	height: 0.5rem;
 	border-radius: var(--rf-radius-pill, 999px);
 	background: var(--rf-color-surface-hover);
-	overflow: hidden;
 }
-
 .rf-progress__fill {
-	display: block;
-	height: 100%;
-	width: var(--rf-progress, 0%);
 	border-radius: inherit;
 	background: var(--rf-color-primary);
 	transition: width 0.3s ease;
 }
-
-/* Sentiment variants tint the fill; the neutral default uses the primary.
- * Token names follow the sentiment scheme in dimensions/metadata.css
- * (positive→success, caution→warning, negative→danger). */
+/* Sentiment variants tint the fill. */
 .rf-progress--positive .rf-progress__fill { background: var(--rf-color-success); }
 .rf-progress--caution .rf-progress__fill { background: var(--rf-color-warning); }
 .rf-progress--negative .rf-progress__fill { background: var(--rf-color-danger); }
+
+}

package/styles/runes/pullquote.css

@@ -1,25 +1,23 @@
+@layer skin {
 /* PullQuote */
 .rf-pullquote {
 	margin: 2rem 0;
 	padding: 1.5rem 2rem;
 	border: none;
-	font-size: 1.375rem;
+	font-size: var(--rf-text-xl);
 	font-style: italic;
-	font-weight: 500;
-	line-height: 1.5;
+	font-weight: var(--rf-weight-medium);
+	line-height: var(--rf-leading-normal);
 	color: var(--rf-color-text);
 	background: none;
 	border-radius: 0;
-	position: relative;
 }
 .rf-pullquote::before {
 	content: '\201C';
-	position: absolute;
-	top: -0.25rem;
-	left: 0;
+	/* Decorative oversized quote glyph — a display one-off above the type scale. */
 	font-size: 4rem;
 	font-style: normal;
-	font-weight: 700;
+	font-weight: var(--rf-weight-bold);
 	line-height: 1;
 	color: var(--rf-color-primary);
 	opacity: 0.4;
@@ -35,40 +33,23 @@
 .rf-pullquote--center {
 	text-align: center;
 	max-width: 80%;
-	margin-left: auto;
-	margin-right: auto;
-}
-.rf-pullquote--center::before {
-	left: 50%;
-	transform: translateX(-50%);
 }
 .rf-pullquote--left {
 	text-align: left;
 	border-left: 2px solid var(--rf-color-primary);
 	padding-left: 1.5rem;
 }
-.rf-pullquote--left::before {
-	display: none;
-}
 .rf-pullquote--right {
 	text-align: right;
 	border-right: 2px solid var(--rf-color-primary);
 	padding-right: 1.5rem;
-	margin-left: auto;
-}
-.rf-pullquote--right::before {
-	display: none;
 }
 
 /* Float modes — left/right pull quotes can float for text wrapping */
 .rf-pullquote[data-align="left"] {
-	float: left;
-	width: 40%;
 	margin: 0.5rem 2rem 1rem 0;
 }
 .rf-pullquote[data-align="right"] {
-	float: right;
-	width: 40%;
 	margin: 0.5rem 0 1rem 2rem;
 }
 
@@ -89,10 +70,7 @@
 	border-bottom: 2px solid var(--rf-color-border);
 	padding: 1.75rem 0;
 	font-family: Georgia, 'Times New Roman', serif;
-	letter-spacing: 0.01em;
-}
-.rf-pullquote--editorial::before {
-	display: none;
+	letter-spacing: var(--rf-tracking-normal);
 }
 
 /* Reset inner blockquote — global blockquote styles shouldn't apply here */
@@ -112,11 +90,11 @@
 @media (max-width: 768px) {
 	.rf-pullquote[data-align="left"],
 	.rf-pullquote[data-align="right"] {
-		float: none;
-		width: 100%;
 		margin: 1.5rem 0;
 	}
 	.rf-pullquote--center {
 		max-width: 100%;
 	}
 }
+
+}

package/styles/runes/realm.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* 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"] /
@@ -28,12 +29,6 @@
 	row-gap: var(--rf-realm-media-gap);
 }
 
-/* Stacked layouts — beside layouts handled by shared split.css */
-.rf-realm[data-media-position="top"] {
-	display: flex;
-	flex-direction: column;
-}
-
 .rf-realm[data-media-position="top"] > .rf-realm__scene {
 	margin-bottom: var(--rf-realm-media-gap);
 }
@@ -43,8 +38,6 @@
 
 /* Content */
 .rf-realm__sections {
-	display: flex;
-	flex-direction: column;
 	gap: 1rem;
 }
 .rf-realm__content ul,
@@ -58,10 +51,9 @@
 	border-top: 1px solid var(--rf-color-border);
 }
 .rf-realm-section__name {
-	display: block;
-	font-size: 1.25rem;
-	font-weight: 700;
-	line-height: 1.3;
+	font-size: var(--rf-text-xl);
+	font-weight: var(--rf-weight-bold);
+	line-height: var(--rf-leading-snug);
 	margin-bottom: 0.5rem;
 	color: var(--rf-color-text);
 }
@@ -69,3 +61,5 @@
 .rf-realm-section__body ol {
 	padding-left: 1.5rem;
 }
+
+}

package/styles/runes/recipe.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Recipe — editorial cookbook aesthetic */
 
 /* Thin-edge inset model (matches `.rf-card`): card outer padding is a thin edge,
@@ -35,9 +36,9 @@
 }
 
 .rf-recipe .rf-recipe__eyebrow {
-	font-size: 0.8rem;
-	font-weight: 600;
-	letter-spacing: 0.06em;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-semibold);
+	letter-spacing: var(--rf-tracking-wider);
 	text-transform: uppercase;
 	color: var(--rf-color-primary);
 	margin: 0 0 0.375rem;
@@ -57,8 +58,6 @@
 
 /* Content wrapper */
 .rf-recipe__content {
-	display: flex;
-	flex-direction: column;
 	gap: 1.75rem;
 }
 
@@ -73,7 +72,7 @@
 }
 .rf-recipe__content ul li {
 	padding: 0.2rem 0;
-	line-height: 1.6;
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-recipe__content ul li::marker {
 	color: var(--rf-color-primary);
@@ -83,31 +82,18 @@
 .rf-recipe__content ol {
 	padding-left: 0;
 	margin: 0;
-	list-style: none;
-	counter-reset: recipe-step;
 }
 .rf-recipe__content ol > li {
-	counter-increment: recipe-step;
 	padding: 0.625rem 0;
 	padding-left: 2.25rem;
-	position: relative;
-	line-height: 1.65;
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-recipe__content ol > li + li {
 	border-top: 1px solid var(--rf-color-border);
 }
 .rf-recipe__content ol > li::before {
-	content: counter(recipe-step);
-	position: absolute;
-	left: 0;
-	top: 0.625rem;
-	width: 1.5rem;
-	height: 1.5rem;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 0.75rem;
-	font-weight: 700;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-primary);
 	background: var(--rf-color-surface);
 	border-radius: var(--rf-radius-full);
@@ -125,10 +111,10 @@
 	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
 	padding: 0.75rem 1.25rem;
 	margin: 0;
-	font-size: 0.9125rem;
+	font-size: var(--rf-text-sm);
 	font-style: italic;
 	color: var(--rf-color-muted);
-	line-height: 1.6;
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-recipe__content blockquote p {
 	margin: 0;
@@ -140,23 +126,13 @@
 .rf-recipe__media img {
 	border-radius: var(--rf-radius-media);
 }
-
-/* 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/relationships.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Relationships — an entity's graph edges, grouped by kind (SPEC-072).
  *
  * Generic over kind: the rune emits `data-kind` on each item and a humanized
@@ -16,8 +17,6 @@
 }
 
 .rf-relationships__items {
-	display: flex;
-	flex-direction: column;
 	gap: var(--rf-spacing-sm);
 }
 
@@ -25,17 +24,7 @@
  * Mirrors collection: item chrome comes from the item (the card built-in, or
  * a {% card %} in the body template), not the layout. */
 .rf-relationships[data-layout='grid'] .rf-relationships__items {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
 	gap: var(--rf-spacing-md);
-	align-items: stretch;
-}
-.rf-relationships[data-layout='grid'] .rf-relationships__item {
-	display: flex;
-}
-.rf-relationships[data-layout='grid'] .rf-relationships__item > * {
-	flex: 1;
-	min-width: 0;
 }
 
 /* Grouped grid: the grid belongs to each group (its items are the cells), not
@@ -44,24 +33,14 @@
  * the groups and each group becomes the grid, with its title spanning. */
 .rf-relationships[data-layout='grid'] .rf-relationships__items:has(.rf-relationships__group),
 .rf-relationships[data-layout='grid'] .rf-relationships__items:has(.rf-accordion) {
-	display: flex;
-	flex-direction: column;
 	gap: var(--rf-spacing-md);
 }
 .rf-relationships[data-layout='grid'] .rf-relationships__group {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
 	gap: var(--rf-spacing-md);
-	align-items: stretch;
-}
-.rf-relationships[data-layout='grid'] .rf-relationships__group-title {
-	grid-column: 1 / -1;
 }
 
 .rf-relationships__group {
 	margin-top: var(--rf-spacing-md);
-	display: flex;
-	flex-direction: column;
 	/* Tight default for the built-in inline shape (title + field spans). */
 	gap: var(--rf-spacing-xs);
 }
@@ -79,23 +58,13 @@
 	margin: 0 0 var(--rf-spacing-sm);
 	font-size: 0.875em;
 	text-transform: uppercase;
-	letter-spacing: 0.05em;
+	letter-spacing: var(--rf-tracking-wider);
 	color: var(--rf-color-muted);
 }
 
 .rf-relationships__item {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: baseline;
 	gap: var(--rf-spacing-xs) var(--rf-spacing-sm);
 }
-/* Block-content item — let the body template (card / callout / etc.) fill the
- * container width instead of shrink-fitting. Same `data-block` signal as the
- * group spacing above; trim the template's outer block margins so the group
- * `gap` governs spacing (works for any block content, not a wrapper element). */
-.rf-relationships__item[data-block] {
-	display: block;
-}
 .rf-relationships__item[data-block] > :first-child {
 	margin-top: 0;
 }
@@ -105,8 +74,6 @@
 
 /* Card chrome for the grid built-in (mirrors collection's __card). */
 .rf-relationships__card {
-	display: flex;
-	flex-direction: column;
 	gap: var(--rf-spacing-xs);
 	padding: var(--rf-spacing-md);
 	border: 1px solid var(--rf-color-border);
@@ -118,7 +85,7 @@
 }
 
 .rf-relationships__title {
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-text);
 	text-decoration: none;
 }
@@ -130,3 +97,5 @@
 	font-size: 0.875em;
 	color: var(--rf-color-muted);
 }
+
+}