@refrakt-md/lumina 0.21.0 → 0.23.0

package/styles/runes/reveal.css

@@ -1,30 +1,31 @@
-/* Reveal */
+@layer skin {
+/* Reveal — skin. The eyebrow stretched-link, steps flex, hidden-step collapse,
+ * metadata hide, and control flex live in @refrakt-md/skeleton
+ * (styles/runes/reveal.css). */
 .rf-reveal__preamble {
 	margin-bottom: 1.5rem;
 }
 .rf-reveal__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-reveal__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-reveal__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
-.rf-reveal__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: 600; text-decoration: none; }
-.rf-reveal__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
+.rf-reveal__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: var(--rf-weight-semibold); text-decoration: none; }
+.rf-reveal__eyebrow:has(a) a::before { border-radius: inherit; }
 .rf-reveal__headline {
 	margin-top: 0;
 }
@@ -36,8 +37,6 @@
 	margin-bottom: 1rem;
 }
 .rf-reveal__steps {
-	display: flex;
-	flex-direction: column;
 	gap: 1rem;
 }
 .rf-reveal-step {
@@ -49,8 +48,6 @@
 }
 .rf-reveal-step--hidden {
 	opacity: 0;
-	height: 0;
-	overflow: hidden;
 	margin: 0;
 	transform: translateY(0.5rem);
 }
@@ -59,17 +56,13 @@
 	border-bottom: 1px solid var(--rf-color-border);
 }
 .rf-reveal-step__title {
-	font-size: 1.125rem;
-	font-weight: 600;
+	font-size: var(--rf-text-lg);
+	font-weight: var(--rf-weight-semibold);
 	margin: 0 0 0.5rem;
 }
-.rf-reveal-step__body > span[property],
-.rf-reveal-step__body > meta { display: none; }
 .rf-reveal-step__body p:last-child { margin-bottom: 0; }
 .rf-reveal__next,
 .rf-reveal__reset {
-	display: inline-flex;
-	align-items: center;
 	gap: 0.5rem;
 	margin-top: 1rem;
 	padding: 0.5rem 1.25rem;
@@ -77,8 +70,8 @@
 	border-radius: var(--rf-radius-md);
 	background: var(--rf-color-surface);
 	color: var(--rf-color-text);
-	font-size: 0.875rem;
-	font-weight: 500;
+	font-size: var(--rf-text-sm);
+	font-weight: var(--rf-weight-medium);
 	cursor: pointer;
 	transition: background 0.15s;
 }
@@ -86,3 +79,5 @@
 .rf-reveal__reset:hover {
 	background: var(--rf-color-border);
 }
+
+}

package/styles/runes/sandbox.css

@@ -1,71 +1,42 @@
-/* Sandbox — Isolated HTML/CSS/JS rendering via iframe */
+@layer skin {
+/* Sandbox — skin. The iframe clip/fill + banner/poster/activate layout live in
+ * @refrakt-md/skeleton (styles/runes/sandbox.css). */
 .rf-sandbox {
 	border-radius: var(--rf-radius-md);
-	overflow: hidden;
 }
-
 .rf-sandbox iframe {
-	display: block;
-	width: 100%;
 	border: none;
 }
-
 /* Static fallback (pre/code shown before hydration) */
 .rf-sandbox pre {
 	margin: 0;
 }
-
 /* When inside preview, remove sandbox margin */
 .rf-preview .rf-sandbox {
 	margin: 0;
 	border-radius: 0;
 }
-
-/* Untrusted-mode affordance: persistent banner the iframe can't suppress.
-   Rendered by the RfSandbox custom element when `data-security-mode="untrusted"`. */
+/* Untrusted-mode affordance. */
 .rf-sandbox[data-security-mode="untrusted"] {
 	border: 1px solid var(--rf-color-warning, #b45309);
 }
-
 .rf-sandbox__untrusted-banner {
-	display: block;
 	padding: 0.5rem 0.75rem;
-	font-size: 0.8125rem;
+	font-size: var(--rf-text-sm);
 	line-height: 1.25rem;
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-warning);
 	background: var(--rf-color-warning-bg, #fef3c7);
 	border-bottom: 1px solid var(--rf-color-warning, #b45309);
 }
-
-/* Deferred activation (WORK-381): poster shown until a non-eager sandbox
-   mounts. Rendered by the RfSandbox custom element from `data-poster`. */
 .rf-sandbox__poster {
-	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	min-height: 150px;
 	background: var(--rf-color-surface-2, var(--rf-color-surface, #f4f4f5));
 }
-
-.rf-sandbox__poster-image {
-	position: absolute;
-	inset: 0;
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-}
-
 .rf-sandbox__activate {
-	position: relative;
-	z-index: 1;
-	display: inline-flex;
-	align-items: center;
 	gap: 0.5ch;
 	padding: 0.5rem 1rem;
 	font: inherit;
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-on-accent, #fff);
 	background: var(--rf-color-accent, #2563eb);
 	border: none;
@@ -73,17 +44,16 @@
 	cursor: pointer;
 	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
 }
-
 .rf-sandbox__activate::before {
 	content: "▶";
 	font-size: 0.85em;
 }
-
 .rf-sandbox__activate:hover {
 	background: var(--rf-color-accent-hover, var(--rf-color-accent, #1d4ed8));
 }
-
 .rf-sandbox__activate:focus-visible {
 	outline: 2px solid var(--rf-color-accent, #2563eb);
 	outline-offset: 2px;
 }
+
+}

package/styles/runes/section.css

@@ -1,43 +1,38 @@
+@layer skin {
 /* Section — a generic page section: an eyebrow/headline/blurb header above
    arbitrary body content. Header styling mirrors the shared page-section look
    (reveal/feature); the body is content-agnostic and full width. */
 .rf-section {
-	display: flex;
-	flex-direction: column;
 	gap: 1.5rem;
 }
 
 /* Header */
 .rf-section__preamble {
-	display: flex;
-	flex-direction: column;
 	gap: 0.5rem;
 	max-width: var(--rf-measure, 65ch);
 	margin: 0;
 }
 .rf-section__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;
 }
 .rf-section__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-section__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
-.rf-section__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: 600; text-decoration: none; }
-.rf-section__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
+.rf-section__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: var(--rf-weight-semibold); text-decoration: none; }
+.rf-section__eyebrow:has(a) a::before { border-radius: inherit; }
 .rf-section__headline {
 	margin: 0;
 }
@@ -48,23 +43,14 @@
 .rf-section__image {
 	margin: 0;
 	border-radius: var(--rf-radius-md);
-	max-width: 100%;
-	height: auto;
-}
-
-/* Body — content-agnostic; fills the section width regardless of header align. */
-.rf-section__body {
-	width: 100%;
 }
 
 /* Header alignment (the body stays full width). */
 .rf-section[data-align="center"] .rf-section__preamble {
-	align-items: center;
 	text-align: center;
-	margin-inline: auto;
 }
 .rf-section[data-align="end"] .rf-section__preamble {
-	align-items: flex-end;
 	text-align: end;
-	margin-inline-start: auto;
+}
+
 }

package/styles/runes/showcase.css

@@ -1,23 +1,4 @@
-/* Showcase — `frameTarget: 'self'` media wrapper (SPEC-086). Shadow, aspect,
- * displacement, place, and crop anchor are now the shared `frame` chrome
- * (dimensions/frame.css), landing on the showcase root. This file keeps only
- * showcase's structural rules and its distinct value: breakout. */
-.rf-showcase {
-	position: relative;
-}
-.rf-showcase__viewport {
-	position: relative;
-}
-/* Breakout — a displaced showcase spills past a non-clipping ancestor; clipping
- * hosts (e.g. bento cells) keep it cropped (host-owned clip). */
-:has(> .rf-showcase[data-displace]:not(.rf-showcase--in-bento-cell)) {
-	overflow: visible;
-}
-/* Bento cell context — showcase fills remaining space */
-.rf-showcase--in-bento-cell {
-	flex: 1;
-	min-height: 0;
-}
+@layer skin {
 /* Spacing — vertical margin around the showcase */
 .rf-showcase[data-spacing="flush"]   { margin-top: 0; margin-bottom: 0; }
 .rf-showcase[data-spacing="tight"]   { margin-top: var(--rf-spacing-section-tight, 1.5rem); margin-bottom: var(--rf-spacing-section-tight, 1.5rem); }
@@ -36,3 +17,5 @@
 		margin-inline-end: 0;
 	}
 }
+
+}

package/styles/runes/sidenote.css

@@ -1,14 +1,13 @@
+@layer skin {
 /* Sidenote */
 .rf-sidenote {
 	margin: 1rem 0;
-	font-size: 0.875rem;
-	line-height: 1.6;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-sidenote--sidenote {
 	border-left: 3px solid var(--rf-color-primary);
 	padding: 0.75rem 1rem;
-	background: var(--rf-color-info-bg);
-	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
 	color: var(--rf-color-muted);
 }
 .rf-sidenote--footnote {
@@ -26,3 +25,5 @@
 }
 .rf-sidenote__body p { margin: 0; }
 .rf-sidenote__body p + p { margin-top: 0.5rem; }
+
+}

package/styles/runes/snippet.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Snippet — file embedded as a code block.
  *
  * The standalone form is a `<figure class="rf-snippet">` wrapping the
@@ -25,3 +26,5 @@
 	margin-inline-end: 0;
 	padding: 0;
 }
+
+}

package/styles/runes/spacing.css

@@ -1,7 +1,8 @@
+@layer skin {
 /* Spacing — spacing scale, radii, and shadow display */
 .rf-spacing__title {
-	font-size: 1.125rem;
-	font-weight: 600;
+	font-size: var(--rf-text-lg);
+	font-weight: var(--rf-weight-semibold);
 	margin-bottom: 1rem;
 }
 .rf-spacing__section {
@@ -11,38 +12,31 @@
 	margin-bottom: 0;
 }
 .rf-spacing__section-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;
 }
 
 /* Spacing scale — proportional bars */
 .rf-spacing__scale {
-	display: flex;
-	flex-direction: column;
 	gap: 0.375rem;
 }
 .rf-spacing__scale-item {
-	display: flex;
-	align-items: center;
 	gap: 0.75rem;
 }
 .rf-spacing__scale-bar {
-	height: 1.25rem;
 	background: var(--rf-color-primary);
 	border-radius: var(--rf-radius-sm, 4px);
 	opacity: 0.8;
-	min-width: 4px;
 }
 .rf-spacing__scale-label {
-	font-size: 0.75rem;
+	font-size: var(--rf-text-xs);
 	font-family: var(--rf-font-mono, monospace);
 	color: var(--rf-color-text, #1a1a2e);
 	white-space: nowrap;
-	flex-shrink: 0;
 }
 .rf-spacing__scale-multiplier {
 	color: var(--rf-color-muted);
@@ -51,57 +45,44 @@
 
 /* Radius — rounded corner samples */
 .rf-spacing__radii {
-	display: flex;
 	gap: 1.25rem;
-	flex-wrap: wrap;
-	align-items: flex-end;
 }
 .rf-spacing__radius-item {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
 	gap: 0.375rem;
 }
 .rf-spacing__radius-sample {
-	width: 3.5rem;
-	height: 3.5rem;
 	border: 2px solid var(--rf-color-border, #e5e7eb);
 	background: var(--rf-color-surface-raised, #f9fafb);
 }
 .rf-spacing__radius-label {
-	font-weight: 500;
-	font-size: 0.8rem;
+	font-weight: var(--rf-weight-medium);
+	font-size: var(--rf-text-xs);
 }
 .rf-spacing__radius-value {
-	font-size: 0.7rem;
+	font-size: var(--rf-text-xs);
 	font-family: var(--rf-font-mono, monospace);
 	color: var(--rf-color-muted);
 }
 
 /* Shadows — sample cards */
 .rf-spacing__shadows {
-	display: flex;
 	gap: 1.5rem;
-	flex-wrap: wrap;
 }
 .rf-spacing__shadow-item {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
 	gap: 0.5rem;
 }
 .rf-spacing__shadow-sample {
-	width: 5rem;
-	height: 3.5rem;
 	background: var(--rf-color-surface, #fff);
 	border-radius: var(--rf-radius-md, 8px);
 }
 .rf-spacing__shadow-label {
-	font-weight: 500;
-	font-size: 0.8rem;
+	font-weight: var(--rf-weight-medium);
+	font-size: var(--rf-text-xs);
 }
 
 /* Context-aware: no outer margin when inside design-context */
 .rf-spacing--in-design-context {
 	margin: 0;
 }
+
+}

package/styles/runes/spec.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Spec */
 
 /* SPEC-079: eyebrow + metadata zone names replace header-primary /
@@ -18,8 +19,8 @@
 }
 
 .rf-spec__body {
-	font-size: 0.925rem;
-	line-height: 1.65;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-spec__body blockquote {
 	border-left: 3px solid var(--rf-color-border);
@@ -28,3 +29,5 @@
 	font-style: italic;
 	color: var(--rf-color-muted);
 }
+
+}

package/styles/runes/steps.css

@@ -1,36 +1,31 @@
-/* Steps */
-.rf-steps {
-	counter-reset: step;
-}
+@layer skin {
+/* Steps — skin. The counter mechanism, step item layout, badge box placement, and
+ * media-position flip live in @refrakt-md/skeleton (styles/runes/steps.css). */
 .rf-steps__preamble {
-	flex-direction: column;
-	align-items: flex-start;
 	gap: 0.25rem;
 	margin-bottom: 1.5rem;
 }
 .rf-steps__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-steps__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-steps__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
-.rf-steps__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: 600; text-decoration: none; }
-.rf-steps__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
+.rf-steps__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: var(--rf-weight-semibold); text-decoration: none; }
+.rf-steps__eyebrow:has(a) a::before { border-radius: inherit; }
 .rf-steps__headline {
 	margin-top: 0;
 }
@@ -42,38 +37,23 @@
 	margin-bottom: 1rem;
 }
 .rf-steps ol {
-	list-style: none;
 	padding-left: 0;
 	margin: 0;
 }
-.rf-step__content {
-	display: contents;
-}
 
 /* Individual step — borderless, matching recipe */
 .rf-step {
-	counter-increment: step;
-	position: relative;
 	padding: 0.625rem 0 0.625rem 2.25rem;
 }
 .rf-step + .rf-step {
 	border-top: 1px solid var(--rf-color-border);
 }
 .rf-step::before {
-	content: counter(step);
-	position: absolute;
-	left: 0;
-	top: 0.625rem;
-	width: 1.5rem;
-	height: 1.5rem;
 	background: var(--rf-color-surface);
 	color: var(--rf-color-primary);
 	border-radius: var(--rf-radius-full);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-weight: 700;
-	font-size: 0.75rem;
+	font-weight: var(--rf-weight-bold);
+	font-size: var(--rf-text-xs);
 	font-variant-numeric: tabular-nums;
 }
 .rf-step h1,
@@ -83,7 +63,6 @@
 .rf-step h5,
 .rf-step h6,
 .rf-step strong {
-	display: block;
 	margin-top: 0;
 	margin-bottom: 0.375rem;
 }
@@ -94,22 +73,11 @@
 	margin-top: 0;
 }
 .rf-step p {
-	font-size: 0.925rem;
-	line-height: 1.65;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-step__media {
 	border-radius: var(--rf-radius-md);
-	overflow: hidden;
 }
 
-/* BUG-001 — content-first DOM inverts the shared media-first stacked contract
- * (layouts/split.css): counter it so the labels are truthful. `bottom` (the
- * default) is plain block flow — media after the content, the historical
- * look; an explicit `top` flips the visual order without touching the DOM. */
-.rf-step[data-media-position="bottom"] {
-	display: block;
-}
-.rf-step[data-media-position="top"] {
-	display: flex;
-	flex-direction: column-reverse;
 }

package/styles/runes/storyboard.css

@@ -1,14 +1,12 @@
+@layer skin {
 /* Storyboard */
 .rf-storyboard__panels {
-	display: grid;
-	grid-template-columns: repeat(var(--sb-columns, 3), 1fr);
 	gap: 1rem;
 }
 /* Clean style */
 .rf-storyboard--clean .rf-storyboard-panel {
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-md);
-	overflow: hidden;
 }
 .rf-storyboard--clean .rf-storyboard-panel__body {
 	padding: 0.75rem;
@@ -17,7 +15,6 @@
 .rf-storyboard--comic .rf-storyboard-panel {
 	border: 3px solid var(--rf-color-text);
 	border-radius: 0.25rem;
-	overflow: hidden;
 	transform: rotate(-0.5deg);
 }
 .rf-storyboard--comic .rf-storyboard-panel:nth-child(even) {
@@ -28,7 +25,7 @@
 }
 .rf-storyboard--comic .rf-storyboard-panel__body p {
 	font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;
-	font-size: 0.9375rem;
+	font-size: var(--rf-text);
 	text-align: center;
 	margin: 0.5rem 0 0;
 }
@@ -40,23 +37,11 @@
 	border-radius: 2px;
 }
 .rf-storyboard--polaroid .rf-storyboard-panel__body p {
-	font-size: 0.8125rem;
+	font-size: var(--rf-text-sm);
 	text-align: center;
 	color: var(--rf-color-muted);
 	margin: 0.5rem 0 0;
 }
-/* Shared image styles */
-.rf-storyboard-panel img {
-	width: 100%;
-	height: auto;
-	display: block;
-}
-.rf-storyboard-panel__body > span[property],
-.rf-storyboard-panel__body > meta { display: none; }
 .rf-storyboard-panel__body p:last-child { margin-bottom: 0; }
-@media (max-width: 768px) {
-	.rf-storyboard__panels { grid-template-columns: repeat(2, 1fr) !important; }
-}
-@media (max-width: 480px) {
-	.rf-storyboard__panels { grid-template-columns: 1fr !important; }
+
 }

package/styles/runes/swatch.css

@@ -1,7 +1,6 @@
+@layer skin {
 /* Swatch — inline color chip */
 .rf-swatch {
-	display: inline-flex;
-	align-items: center;
 	gap: 0.375rem;
 	vertical-align: middle;
 	border: 1px solid rgba(0, 0, 0, 0.12);
@@ -10,15 +9,11 @@
 	margin: 0 0.15em;
 }
 .rf-swatch__chip {
-	display: inline-block;
-	width: 0.875em;
-	height: 0.875em;
 	border-radius: 50%;
 	border: 1px solid rgba(0, 0, 0, 0.1);
-	flex-shrink: 0;
 }
 .rf-swatch__label {
-	font-weight: 500;
+	font-weight: var(--rf-weight-medium);
 }
 .rf-swatch__value {
 	color: var(--rf-color-muted);
@@ -26,3 +21,5 @@
 	font-family: var(--rf-font-mono, monospace);
 	vertical-align: middle;
 }
+
+}