@refrakt-md/lumina 0.22.0 → 0.24.0

package/styles/runes/form.css

@@ -1,38 +1,16 @@
+@layer skin {
 /* Form */
 .rf-form {
-	display: flex;
-	flex-direction: column;
 	gap: 1.25rem;
 	max-width: none;
 }
 .rf-form__body {
-	display: flex;
-	flex-direction: column;
 	gap: 1.25rem;
 }
-.rf-form meta { display: none; }
-/* Honeypot */
-.rf-form__hp {
-	position: absolute;
-	left: -9999px;
-	opacity: 0;
-	height: 0;
-	overflow: hidden;
-}
 /* Inline variant */
 .rf-form--inline .rf-form__body {
-	flex-direction: row;
-	flex-wrap: wrap;
-	align-items: flex-end;
 	gap: 0.75rem;
 }
-.rf-form--inline .rf-form-field {
-	flex: 1;
-	min-width: 10rem;
-}
-.rf-form--inline .rf-form__submit {
-	align-self: flex-end;
-}
 /* Compact variant */
 .rf-form--compact {
 	gap: 0.75rem;
@@ -49,8 +27,6 @@
 }
 /* Field */
 .rf-form-field {
-	display: flex;
-	flex-direction: column;
 	gap: 0.375rem;
 }
 .rf-form-field label {
@@ -73,8 +49,6 @@
 	color: var(--rf-color-text);
 	background: var(--rf-color-bg);
 	transition: border-color 0.15s, box-shadow 0.15s;
-	width: 100%;
-	box-sizing: border-box;
 }
 .rf-form-field input:focus,
 .rf-form-field textarea:focus,
@@ -85,7 +59,6 @@
 }
 .rf-form-field textarea {
 	resize: vertical;
-	min-height: 6rem;
 }
 /* Fieldset */
 .rf-form-fieldset {
@@ -113,15 +86,12 @@
 	margin-bottom: 0.5rem;
 }
 .rf-form-choice {
-	display: flex;
-	align-items: center;
 	gap: 0.5rem;
 	padding: 0.375rem 0;
 	cursor: pointer;
 	font-size: var(--rf-text);
 }
 .rf-form-choice input {
-	width: auto;
 	margin: 0;
 	accent-color: var(--rf-color-primary);
 }
@@ -136,7 +106,6 @@
 	font-weight: var(--rf-weight-semibold);
 	cursor: pointer;
 	transition: background 0.15s;
-	align-self: flex-start;
 }
 .rf-form__submit:hover {
 	background: color-mix(in srgb, var(--rf-color-primary) 85%, black);
@@ -183,3 +152,5 @@
 	color: var(--rf-color-danger);
 	border: 1px solid color-mix(in srgb, var(--rf-color-danger) 25%, transparent);
 }
+
+}

package/styles/runes/gallery.css

@@ -1,57 +1,25 @@
-/* Gallery — Multi-image container with grid/carousel/masonry layout.
- *
- * Thin-edge tile mosaic: a gallery is media all the way down (every child is an
- * image), so the outer padding is treated as a frame margin and locked to the
- * same value as the inter-item gap — outer = inter = a single visual rhythm.
- * Both are theme tokens (`--rf-gallery-edge` / `--rf-gallery-gap`), not author
- * attributes; the `gap` attribute was removed because aesthetic spacing is the
- * theme's concern. `columns` stays an author attribute — that's content density,
- * not aesthetics. */
+@layer skin {
+/* Gallery — skin. The grid/carousel/masonry layouts, item/lightbox/nav positioning,
+ * and responsive columns live in @refrakt-md/skeleton (styles/runes/gallery.css). */
 .rf-gallery {
-	position: relative;
 	margin: 0;
 	--rf-gallery-edge: 0.5rem;
 	--rf-gallery-gap: 0.5rem;
 	padding: var(--rf-gallery-edge);
 }
-
-/* Layout modifier classes */
-.rf-gallery--grid {}
-.rf-gallery--carousel {}
-.rf-gallery--masonry {}
-
-/* Items container — grid layout by default */
 .rf-gallery__items {
-	display: grid;
-	grid-template-columns: repeat(var(--gallery-columns, 3), 1fr);
 	gap: var(--rf-gallery-gap);
 }
-
-/* Individual gallery items */
 .rf-gallery__item {
-	position: relative;
-	overflow: hidden;
 	border-radius: var(--rf-radius-md);
 	margin: 0;
 }
-.rf-gallery__item :is(img, .rf-placeholder) {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-	display: block;
-}
 .rf-gallery__item figcaption {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	right: 0;
 	padding: 0.5rem 0.75rem;
 	background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
 	color: white;
 	font-size: var(--rf-text-sm);
 }
-
-/* Gallery caption */
 .rf-gallery > figcaption {
 	margin-top: 0.625rem;
 	font-size: var(--rf-text-sm);
@@ -59,36 +27,13 @@
 	text-align: center;
 	font-style: italic;
 }
-
-/* Carousel layout */
-.rf-gallery[data-layout="carousel"] .rf-gallery__items {
-	display: flex;
-	overflow-x: auto;
-	scroll-snap-type: x mandatory;
-	-webkit-overflow-scrolling: touch;
-}
-.rf-gallery[data-layout="carousel"] .rf-gallery__item {
-	flex: 0 0 calc(100% / var(--gallery-columns, 3));
-	scroll-snap-align: start;
-}
-
-/* Carousel nav buttons */
 .rf-gallery__nav {
-	position: absolute;
-	top: 50%;
-	transform: translateY(-50%);
-	z-index: 2;
-	width: 2.5rem;
-	height: 2.5rem;
 	border-radius: 50%;
 	border: none;
 	background: var(--rf-color-surface);
 	color: var(--rf-color-text);
 	box-shadow: var(--rf-shadow-md);
 	cursor: pointer;
-	display: flex;
-	align-items: center;
-	justify-content: center;
 	font-size: var(--rf-text-xl);
 	opacity: 0.8;
 	transition: opacity 0.2s;
@@ -96,113 +41,36 @@
 .rf-gallery__nav:hover {
 	opacity: 1;
 }
-/* Inset the carousel nav buttons from the image edge by the same 0.5rem the
- * gallery uses as its thin-edge frame, so the buttons overlap onto the image
- * slightly rather than sitting flush against it. The gallery's outer padding
- * already inserts 0.5rem between gallery border and image, so the total offset
- * from the gallery border is `edge + 0.5rem` = 1rem. */
-.rf-gallery__nav--prev {
-	left: calc(var(--rf-gallery-edge) + 0.5rem);
-}
-.rf-gallery__nav--next {
-	right: calc(var(--rf-gallery-edge) + 0.5rem);
-}
-
-/* Masonry layout — CSS multi-column flow gives true variable-height masonry in
- * every browser. (`grid-template-rows: masonry` is Firefox-only behind a flag
- * and silently falls back to uniform-height grid rows everywhere else, which is
- * why heights used to only vary in the collapsed single-column case.) Items
- * flow top-to-bottom inside each column, then move to the next column. */
 .rf-gallery[data-layout="masonry"] .rf-gallery__items {
-	display: block;
-	column-count: var(--gallery-columns, 3);
 	column-gap: var(--rf-gallery-gap);
 }
 .rf-gallery[data-layout="masonry"] .rf-gallery__item {
-	break-inside: avoid;
 	margin-bottom: var(--rf-gallery-gap);
 }
-/* In masonry the row height isn't pinned, so let each image take its natural
- * height (grid mode keeps `height: 100%` for uniform tiles). */
-.rf-gallery[data-layout="masonry"] .rf-gallery__item :is(img, .rf-placeholder) {
-	height: auto;
-}
-
-/* Lightbox cursor hint */
 .rf-gallery[data-lightbox="true"] .rf-gallery__item {
 	cursor: zoom-in;
 }
-
-/* Lightbox overlay */
 .rf-gallery__lightbox {
-	position: fixed;
-	inset: 0;
-	z-index: 9999;
 	background: rgba(0, 0, 0, 0.9);
-	display: flex;
-	align-items: center;
-	justify-content: center;
 }
 .rf-gallery__lightbox img {
-	max-width: 90vw;
-	max-height: 90vh;
-	object-fit: contain;
 	border-radius: var(--rf-radius-md);
 }
 .rf-gallery__lightbox-close {
-	position: absolute;
-	top: 1rem;
-	right: 1rem;
-	width: 2.5rem;
-	height: 2.5rem;
 	border-radius: 50%;
 	border: none;
 	background: rgba(255, 255, 255, 0.15);
 	color: white;
 	font-size: var(--rf-text-2xl);
 	cursor: pointer;
-	display: flex;
-	align-items: center;
-	justify-content: center;
 }
 .rf-gallery__lightbox-nav {
-	position: absolute;
-	top: 50%;
-	transform: translateY(-50%);
-	width: 3rem;
-	height: 3rem;
 	border-radius: 50%;
 	border: none;
 	background: rgba(255, 255, 255, 0.15);
 	color: white;
 	font-size: var(--rf-text-2xl);
 	cursor: pointer;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-.rf-gallery__lightbox-nav--prev {
-	left: 1rem;
-}
-.rf-gallery__lightbox-nav--next {
-	right: 1rem;
 }
 
-/* Responsive: collapse columns on small screens. (Gap is theme-locked at all
- * widths — no override needed.) */
-@media (max-width: 768px) {
-	.rf-gallery {
-		--gallery-columns: 2 !important;
-	}
-	.rf-gallery[data-layout="carousel"] .rf-gallery__item {
-		flex-basis: 80%;
-	}
-}
-@media (max-width: 480px) {
-	.rf-gallery {
-		--gallery-columns: 1 !important;
-	}
-	.rf-gallery[data-layout="carousel"] .rf-gallery__item {
-		flex-basis: 100%;
-	}
 }

package/styles/runes/grid.css

@@ -1,62 +1,10 @@
-/* Grid */
+@layer skin {
+/* Grid — skin. The grid system (tracks, columns, flow, spans, modes, aspect cells,
+ * collapse) lives in @refrakt-md/skeleton (styles/runes/grid.css). */
 .rf-grid [data-layout="grid"] {
-	display: grid;
-	grid-template-columns: var(--grid-ratio, repeat(auto-fit, minmax(250px, 1fr)));
-	align-items: var(--grid-valign, stretch);
 	gap: var(--grid-gap, 1.5rem);
 }
-/* Explicit column counts override auto-fit */
-.rf-grid [data-columns="1"] { grid-template-columns: 1fr; }
-.rf-grid [data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
-.rf-grid [data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
-.rf-grid [data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
-.rf-grid [data-columns="5"] { grid-template-columns: repeat(5, 1fr); }
-.rf-grid [data-columns="6"] { grid-template-columns: repeat(6, 1fr); }
-/* Flow */
-.rf-grid [data-flow="column"] { grid-auto-flow: column; }
-.rf-grid [data-flow="dense"] { grid-auto-flow: dense; }
-.rf-grid [data-flow="row dense"] { grid-auto-flow: row dense; }
-.rf-grid [data-flow="column dense"] { grid-auto-flow: column dense; }
-/* Spans */
-.rf-grid [data-colspan="2"] { grid-column: span 2; }
-.rf-grid [data-colspan="3"] { grid-column: span 3; }
-.rf-grid [data-colspan="4"] { grid-column: span 4; }
-.rf-grid [data-rowspan="2"] { grid-row: span 2; }
-.rf-grid [data-rowspan="3"] { grid-row: span 3; }
-.rf-grid [data-rowspan="4"] { grid-row: span 4; }
-/* Cell styling */
 .rf-grid [data-name="cell"] p:first-child { margin-top: 0; }
 .rf-grid [data-name="cell"] p:last-child { margin-bottom: 0; }
-/* Auto mode — responsive auto-fill */
-.rf-grid[data-mode="auto"] [data-layout="grid"] {
-	grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 250px), 1fr));
-}
-/* Masonry mode — progressive enhancement */
-.rf-grid[data-mode="masonry"] [data-layout="grid"] {
-	grid-template-rows: masonry;
-}
-/* Aspect ratio enforcement on cells */
-.rf-grid[data-aspect] [data-name="cell"] {
-	aspect-ratio: var(--grid-aspect);
-	overflow: hidden;
-}
-.rf-grid[data-aspect] [data-name="cell"] > img,
-.rf-grid[data-aspect] [data-name="cell"] > video {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-}
-/* Stack order when collapsed */
-.rf-grid[data-stack="reverse"] [data-name="cell"]:last-child {
-	order: -1;
-}
-/* Collapse breakpoints */
-@media (max-width: 640px) {
-	.rf-grid[data-collapse="sm"] [data-layout="grid"] { grid-template-columns: 1fr; }
-}
-@media (max-width: 768px) {
-	.rf-grid[data-collapse="md"] [data-layout="grid"] { grid-template-columns: 1fr; }
-}
-@media (max-width: 1024px) {
-	.rf-grid[data-collapse="lg"] [data-layout="grid"] { grid-template-columns: 1fr; }
+
 }

package/styles/runes/hero.css

@@ -1,13 +1,16 @@
-/* Hero */
+@layer skin {
+/* Hero — skin. The relative root, preamble/eyebrow/actions/button layout + their
+ * auto-margin alignment + mobile stack, the media-position flip, the responsive
+ * image box, and the cover-band height/containment authority live in
+ * @refrakt-md/skeleton (styles/runes/hero.css). What remains here is skin:
+ * spacing, type, the headline gradient, surface chrome, the scrim, radii, and
+ * text-align. */
 .rf-hero {
-	position: relative;
 	padding: 7rem 2rem 6.5rem;
 	background-size: cover;
 	background-position: center;
 }
 .rf-hero__preamble {
-	flex-direction: column;
-	align-items: center;
 	gap: 0.25rem;
 	margin-bottom: 2rem;
 }
@@ -23,8 +26,6 @@
 }
 /* Pill-badge variant when eyebrow contains a link */
 .rf-hero .rf-hero__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);
@@ -43,9 +44,6 @@
 	text-decoration: none;
 }
 .rf-hero .rf-hero__eyebrow:has(a) a::before {
-	content: '';
-	position: absolute;
-	inset: 0;
 	border-radius: inherit;
 }
 .rf-hero__image {
@@ -53,43 +51,23 @@
 }
 .rf-hero__actions {
 	max-width: 720px;
-	margin: 0 auto;
-	display: flex;
-	align-items: center;
 	gap: 0.75rem;
-	flex-wrap: wrap;
 }
 .rf-hero[data-align="center"] .rf-hero__preamble,
 .rf-hero[data-align="center"] > h1,
 .rf-hero[data-align="center"] > p {
 	text-align: center;
 }
-.rf-hero[data-align="center"] .rf-hero__actions {
-	margin: 0 auto;
-	justify-content: center;
-}
 .rf-hero[data-align="left"] .rf-hero__preamble,
 .rf-hero[data-align="left"] > h1,
 .rf-hero[data-align="left"] > p {
 	text-align: left;
 }
-.rf-hero[data-align="left"] .rf-hero__preamble {
-	align-items: flex-start;
-}
-.rf-hero[data-align="left"] .rf-hero__actions {
-	margin: 0;
-}
 .rf-hero[data-align="right"] .rf-hero__preamble,
 .rf-hero[data-align="right"] > h1,
 .rf-hero[data-align="right"] > p {
 	text-align: right;
 }
-.rf-hero[data-align="right"] .rf-hero__preamble {
-	align-items: flex-end;
-}
-.rf-hero[data-align="right"] .rf-hero__actions {
-	margin: 0 0 0 auto;
-}
 .rf-hero__actions pre {
 	margin: 0;
 	padding: 0.7rem 1.75rem;
@@ -125,31 +103,20 @@
 .rf-hero[data-align="center"] > p,
 .rf-hero[data-align="center"] .rf-hero__blurb {
 	max-width: 560px;
-	margin-left: auto;
-	margin-right: auto;
 	margin-bottom: 2rem;
 }
 .rf-hero ul,
 .rf-hero nav {
-	display: flex;
 	gap: 0.75rem;
-	flex-wrap: wrap;
-	list-style: none;
 	padding: 0;
 	margin: 0;
 }
-.rf-hero[data-align="center"] ul,
-.rf-hero[data-align="center"] nav {
-	justify-content: center;
-}
 .rf-hero li {
 	padding: 0;
 	margin: 0;
 }
 .rf-hero li a,
 .rf-hero nav a {
-	display: inline-flex;
-	align-items: center;
 	padding: 0.7rem 1.75rem;
 	border-radius: var(--rf-radius-sm);
 	text-decoration: none;
@@ -182,40 +149,17 @@
 	margin-top: 3rem;
 	border-radius: var(--rf-radius-lg);
 }
-/* BUG-001 — hero DOM is content-first (headline before media: the right
- * reading order for the classic hero), inverting the shared media-first
- * stacked contract in layouts/split.css. Counter it so the labels are
- * truthful: `bottom` (the hero default) is plain block flow — media renders
- * after the content, exactly the historical look — and an explicit `top`
- * flips the visual order without touching the DOM. */
-.rf-hero[data-media-position="bottom"] {
-	display: block;
-}
-.rf-hero[data-media-position="top"] {
-	display: flex;
-	flex-direction: column-reverse;
-}
 .rf-hero[data-media-position="top"] > .rf-hero__media {
 	margin-top: 0;
 	margin-bottom: 3rem;
 }
-.rf-hero__media img {
-	display: block;
-	width: 100%;
-	height: auto;
-}
 .rf-hero__media pre {
 	margin: 0;
 }
 
-/* ── Cover mode (SPEC-101) — `media-position="cover"` ───────────────────
- * The shared cover layer (dimensions/cover.css) does the grid stacking, the
- * default scrim, and the overlay anchoring; these rules supply the hero-band
- * specifics. This file imports after cover.css, so equal-specificity rules
- * here win. */
-
-/* The section's generous padding moves to the overlaid content — on the root
- * it would inset the media well (the backdrop must be flush with the band). */
+/* ── Cover mode (SPEC-101) — skin (the height/containment authority is skeleton).
+ * The section's generous padding moves to the overlaid content — on the root it
+ * would inset the media well (the backdrop must be flush with the band). */
 .rf-hero--cover {
 	padding: 0;
 }
@@ -223,38 +167,6 @@
 	--rune-padding: 7rem 2rem 6.5rem;
 }
 
-/* Band height authority: a hero is a full-width band, not a portrait tile.
- * Height comes from a viewport-aware floor — deliberately NOT a default
- * aspect-ratio: with `aspect-ratio` + `min-height`, the ratio transfers a
- * winning min-height back into *width* on narrow screens (a 22rem-tall 21/9
- * band computes ~820px wide on a 375px phone — the band marches off-screen).
- * `--cover-aspect: auto` releases the shared 3/4 tile default; an explicit
- * `aspect` knob still lands as an inline style and owns the shape. */
-.rf-hero--cover {
-	--cover-aspect: auto;
-	min-height: clamp(22rem, 55vh, 40rem);
-}
-/* An explicit aspect owns the shape — drop the floor so the same
- * ratio-vs-min-height transfer can't reintroduce the overflow. */
-.rf-hero--cover[data-aspect] {
-	min-height: 0;
-}
-
-/* The shared cover layer applies `container-type: size` (size containment) for
- * its orientation query — under it the band cannot grow with its content, so
- * tall content clips at min-height. The hero band doesn't use the orientation
- * query (the centred-band default below covers `auto` placement), so release
- * the containment and let the band stretch to fit. */
-.rf-hero--cover[data-media-position="cover"][data-cover-scope="full"] {
-	container-type: normal;
-}
-
-/* Named height scale (`height="sm…xl"`): an explicit band height. */
-.rf-hero--cover[data-height="sm"] { min-height: 20rem; }
-.rf-hero--cover[data-height="md"] { min-height: 28rem; }
-.rf-hero--cover[data-height="lg"] { min-height: 36rem; }
-.rf-hero--cover[data-height="xl"] { min-height: 44rem; }
-
 /* Mobile: the desktop overlay padding (7rem bands) would eat most of the well
  * on a phone — tighten it so the content fits the band. */
 @media (max-width: 640px) {
@@ -275,19 +187,9 @@
 	color: var(--rf-color-on-accent, var(--rf-color-bg));
 }
 
-/* Centre-band default: a hero overlay reads as a centred band, not the
- * cover-card caption strip — seat it mid-well unless the author anchors it
- * with an explicit `content-place`. */
-.rf-hero--cover[data-media-position="cover"]:is([data-content-place="auto"], :not([data-content-place])) > [data-name="content"] {
-	align-self: center;
-	justify-self: stretch;
-}
-
 /* The default cover scrim is edge-weighted (a caption-strip treatment); under
  * the centred band it would leave the headline on undarkened media. With no
- * explicit `content-place`, darken the well evenly (slightly bottom-weighted).
- * An explicit `content-place` re-enters the shared content-edge scrim contract,
- * and `scrim="none"` still opts out. */
+ * explicit `content-place`, darken the well evenly (slightly bottom-weighted). */
 .rf-hero--cover:is([data-content-place="auto"], :not([data-content-place])):not([data-scrim="none"]) > [data-section="media"]::after {
 	background-image: var(--cover-scrim-image, linear-gradient(rgb(0 0 0 / 0.45), rgb(0 0 0 / 0.35) 50%, rgb(0 0 0 / 0.55)));
 }
@@ -295,23 +197,8 @@
 /* Mobile: stack actions full-width so the code block and button line up */
 @media (max-width: 640px) {
 	.rf-hero__actions {
-		flex-direction: column;
-		align-items: stretch;
 		max-width: none;
 	}
-	.rf-hero__actions pre {
-		width: 100%;
-		box-sizing: border-box;
-	}
-	.rf-hero ul,
-	.rf-hero nav {
-		flex-direction: column;
-		align-items: stretch;
-	}
-	.rf-hero li a,
-	.rf-hero nav a {
-		justify-content: center;
-		width: 100%;
-		box-sizing: border-box;
-	}
+}
+
 }