@refrakt-md/lumina 0.21.0 → 0.23.0

package/styles/runes/form.css

@@ -1,42 +1,20 @@
+@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;
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 }
 .rf-form--compact .rf-form__body {
 	gap: 0.75rem;
@@ -45,17 +23,15 @@
 .rf-form--compact textarea,
 .rf-form--compact select {
 	padding: 0.375rem 0.625rem;
-	font-size: 0.8125rem;
+	font-size: var(--rf-text-sm);
 }
 /* Field */
 .rf-form-field {
-	display: flex;
-	flex-direction: column;
 	gap: 0.375rem;
 }
 .rf-form-field label {
-	font-size: 0.875rem;
-	font-weight: 600;
+	font-size: var(--rf-text-sm);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-text);
 }
 .rf-form-field__required {
@@ -68,13 +44,11 @@
 	padding: 0.5rem 0.75rem;
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-md);
-	font-size: 0.9375rem;
+	font-size: var(--rf-text);
 	font-family: inherit;
 	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 {
@@ -94,8 +67,8 @@
 	margin: 0.5rem 0 0;
 }
 .rf-form-fieldset legend {
-	font-size: 1.0625rem;
-	font-weight: 700;
+	font-size: var(--rf-text-lg);
+	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-text);
 	padding: 0;
 	margin-bottom: 0.75rem;
@@ -106,22 +79,19 @@
 	padding: 0;
 }
 .rf-form-choice-group legend {
-	font-size: 0.875rem;
-	font-weight: 600;
+	font-size: var(--rf-text-sm);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-text);
 	padding: 0;
 	margin-bottom: 0.5rem;
 }
 .rf-form-choice {
-	display: flex;
-	align-items: center;
 	gap: 0.5rem;
 	padding: 0.375rem 0;
 	cursor: pointer;
-	font-size: 0.9375rem;
+	font-size: var(--rf-text);
 }
 .rf-form-choice input {
-	width: auto;
 	margin: 0;
 	accent-color: var(--rf-color-primary);
 }
@@ -132,11 +102,10 @@
 	color: white;
 	border: none;
 	border-radius: var(--rf-radius-md);
-	font-size: 0.9375rem;
-	font-weight: 600;
+	font-size: var(--rf-text);
+	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);
@@ -146,13 +115,13 @@
 }
 /* Help & description */
 .rf-form__help {
-	font-size: 0.8125rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 	font-style: italic;
 	margin: 0;
 }
 .rf-form__text {
-	font-size: 0.9375rem;
+	font-size: var(--rf-text);
 	color: var(--rf-color-muted);
 	margin: 0;
 }
@@ -166,8 +135,8 @@
 .rf-form__status {
 	padding: 0.75rem 1rem;
 	border-radius: var(--rf-radius-md);
-	font-size: 0.875rem;
-	font-weight: 500;
+	font-size: var(--rf-text-sm);
+	font-weight: var(--rf-weight-medium);
 }
 .rf-form__status--submitting {
 	background: var(--rf-color-surface);
@@ -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,208 +1,76 @@
-/* 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 img {
-	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: 0.825rem;
+	font-size: var(--rf-text-sm);
 }
-
-/* Gallery caption */
 .rf-gallery > figcaption {
 	margin-top: 0.625rem;
-	font-size: 0.825rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 	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: 1.25rem;
+	font-size: var(--rf-text-xl);
 	opacity: 0.8;
 	transition: opacity 0.2s;
 }
 .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 img {
-	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: 1.5rem;
+	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: 1.5rem;
+	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; }
+
 }