@refrakt-md/lumina 0.32.0 → 0.34.0

package/styles/runes/form.css

@@ -1,156 +1,157 @@
 @layer skin {
-/* Form */
-.rf-form {
-	gap: 1.25rem;
-	max-width: none;
-}
-.rf-form__body {
-	gap: 1.25rem;
-}
-/* Inline variant */
-.rf-form--inline .rf-form__body {
-	gap: 0.75rem;
-}
-/* Compact variant */
-.rf-form--compact {
-	gap: 0.75rem;
-	font-size: var(--rf-text-sm);
-}
-.rf-form--compact .rf-form__body {
-	gap: 0.75rem;
-}
-.rf-form--compact input,
-.rf-form--compact textarea,
-.rf-form--compact select {
-	padding: 0.375rem 0.625rem;
-	font-size: var(--rf-text-sm);
-}
-/* Field */
-.rf-form-field {
-	gap: 0.375rem;
-}
-.rf-form-field label {
-	font-size: var(--rf-text-sm);
-	font-weight: var(--rf-weight-semibold);
-	color: var(--rf-color-text);
-}
-.rf-form-field__required {
-	color: var(--rf-color-danger);
-	margin-left: 0.125rem;
-}
-.rf-form-field input,
-.rf-form-field textarea,
-.rf-form-field select {
-	padding: 0.5rem 0.75rem;
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-md);
-	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;
-}
-.rf-form-field input:focus,
-.rf-form-field textarea:focus,
-.rf-form-field select:focus {
-	outline: none;
-	border-color: var(--rf-color-primary);
-	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rf-color-primary) 15%, transparent);
-}
-.rf-form-field textarea {
-	resize: vertical;
-}
-/* Fieldset */
-.rf-form-fieldset {
-	border: none;
-	padding: 0;
-	margin: 0.5rem 0 0;
-}
-.rf-form-fieldset legend {
-	font-size: var(--rf-text-lg);
-	font-weight: var(--rf-weight-bold);
-	color: var(--rf-color-text);
-	padding: 0;
-	margin-bottom: 0.75rem;
-}
-/* Choice groups */
-.rf-form-choice-group {
-	border: none;
-	padding: 0;
-}
-.rf-form-choice-group legend {
-	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 {
-	gap: 0.5rem;
-	padding: 0.375rem 0;
-	cursor: pointer;
-	font-size: var(--rf-text);
-}
-.rf-form-choice input {
-	margin: 0;
-	accent-color: var(--rf-color-primary);
-}
-/* Submit */
-.rf-form__submit {
-	padding: 0.625rem 1.5rem;
-	background: var(--rf-color-primary);
-	color: white;
-	border: none;
-	border-radius: var(--rf-radius-md);
-	font-size: var(--rf-text);
-	font-weight: var(--rf-weight-semibold);
-	cursor: pointer;
-	transition: background 0.15s;
-}
-.rf-form__submit:hover {
-	background: color-mix(in srgb, var(--rf-color-primary) 85%, black);
-}
-.rf-form__submit:active {
-	transform: scale(0.98);
-}
-/* Help & description */
-.rf-form__help {
-	font-size: var(--rf-text-sm);
-	color: var(--rf-color-muted);
-	font-style: italic;
-	margin: 0;
-}
-.rf-form__text {
-	font-size: var(--rf-text);
-	color: var(--rf-color-muted);
-	margin: 0;
-}
-/* Separator */
-.rf-form__separator {
-	border: none;
-	border-top: 1px solid var(--rf-color-border);
-	margin: 0.5rem 0;
-}
-/* Status messages */
-.rf-form__status {
-	padding: 0.75rem 1rem;
-	border-radius: var(--rf-radius-md);
-	font-size: var(--rf-text-sm);
-	font-weight: var(--rf-weight-medium);
-}
-.rf-form__status--submitting {
-	background: var(--rf-color-surface);
-	color: var(--rf-color-muted);
-}
-.rf-form__status--success {
-	background: color-mix(in srgb, var(--rf-color-success) 10%, transparent);
-	color: var(--rf-color-success);
-	border: 1px solid color-mix(in srgb, var(--rf-color-success) 25%, transparent);
-}
-.rf-form__status--error {
-	background: color-mix(in srgb, var(--rf-color-danger) 10%, transparent);
-	color: var(--rf-color-danger);
-	border: 1px solid color-mix(in srgb, var(--rf-color-danger) 25%, transparent);
-}
-
+	/* Form */
+	.rf-form {
+		gap: 1.25rem;
+		max-width: none;
+	}
+	.rf-form__body {
+		gap: 1.25rem;
+	}
+	/* Inline variant */
+	.rf-form--inline .rf-form__body {
+		gap: 0.75rem;
+	}
+	/* Compact variant */
+	.rf-form--compact {
+		gap: 0.75rem;
+		font-size: var(--rf-text-sm);
+	}
+	.rf-form--compact .rf-form__body {
+		gap: 0.75rem;
+	}
+	.rf-form--compact input,
+	.rf-form--compact textarea,
+	.rf-form--compact select {
+		padding: 0.375rem 0.625rem;
+		font-size: var(--rf-text-sm);
+	}
+	/* Field */
+	.rf-form-field {
+		gap: 0.375rem;
+	}
+	.rf-form-field label {
+		font-size: var(--rf-text-sm);
+		font-weight: var(--rf-weight-semibold);
+		color: var(--rf-color-text);
+	}
+	.rf-form-field__required {
+		color: var(--rf-color-danger);
+		margin-left: 0.125rem;
+	}
+	.rf-form-field input,
+	.rf-form-field textarea,
+	.rf-form-field select {
+		padding: 0.5rem 0.75rem;
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-md);
+		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;
+	}
+	.rf-form-field input:focus,
+	.rf-form-field textarea:focus,
+	.rf-form-field select:focus {
+		outline: none;
+		border-color: var(--rf-color-primary);
+		box-shadow: 0 0 0 3px color-mix(in srgb, var(--rf-color-primary) 15%, transparent);
+	}
+	.rf-form-field textarea {
+		resize: vertical;
+	}
+	/* Fieldset */
+	.rf-form-fieldset {
+		border: none;
+		padding: 0;
+		margin: 0.5rem 0 0;
+	}
+	.rf-form-fieldset legend {
+		font-size: var(--rf-text-lg);
+		font-weight: var(--rf-weight-bold);
+		color: var(--rf-color-text);
+		padding: 0;
+		margin-bottom: 0.75rem;
+	}
+	/* Choice groups */
+	.rf-form-choice-group {
+		border: none;
+		padding: 0;
+	}
+	.rf-form-choice-group legend {
+		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 {
+		gap: 0.5rem;
+		padding: 0.375rem 0;
+		cursor: pointer;
+		font-size: var(--rf-text);
+	}
+	.rf-form-choice input {
+		margin: 0;
+		accent-color: var(--rf-color-primary);
+	}
+	/* Submit */
+	.rf-form__submit {
+		padding: 0.625rem 1.5rem;
+		background: var(--rf-color-primary);
+		color: white;
+		border: none;
+		border-radius: var(--rf-radius-md);
+		font-size: var(--rf-text);
+		font-weight: var(--rf-weight-semibold);
+		cursor: pointer;
+		transition: background 0.15s;
+	}
+	.rf-form__submit:hover {
+		background: color-mix(in srgb, var(--rf-color-primary) 85%, black);
+	}
+	.rf-form__submit:active {
+		transform: scale(0.98);
+	}
+	/* Help & description */
+	.rf-form__help {
+		font-size: var(--rf-text-sm);
+		color: var(--rf-color-muted);
+		font-style: italic;
+		margin: 0;
+	}
+	.rf-form__text {
+		font-size: var(--rf-text);
+		color: var(--rf-color-muted);
+		margin: 0;
+	}
+	/* Separator */
+	.rf-form__separator {
+		border: none;
+		border-top: 1px solid var(--rf-color-border);
+		margin: 0.5rem 0;
+	}
+	/* Status messages */
+	.rf-form__status {
+		padding: 0.75rem 1rem;
+		border-radius: var(--rf-radius-md);
+		font-size: var(--rf-text-sm);
+		font-weight: var(--rf-weight-medium);
+	}
+	.rf-form__status--submitting {
+		background: var(--rf-color-surface);
+		color: var(--rf-color-muted);
+	}
+	.rf-form__status--success {
+		background: color-mix(in srgb, var(--rf-color-success) 10%, transparent);
+		color: var(--rf-color-success);
+		border: 1px solid color-mix(in srgb, var(--rf-color-success) 25%, transparent);
+	}
+	.rf-form__status--error {
+		background: color-mix(in srgb, var(--rf-color-danger) 10%, transparent);
+		color: var(--rf-color-danger);
+		border: 1px solid color-mix(in srgb, var(--rf-color-danger) 25%, transparent);
+	}
 }

package/styles/runes/gallery.css

@@ -1,63 +1,62 @@
 @layer skin {
-/* Gallery — skin. The grid/carousel/masonry layouts, item/lightbox/nav positioning,
+	/* 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 {
-	margin: 0;
-	--rf-gallery-edge: 0.5rem;
-	--rf-gallery-gap: 0.5rem;
-	padding: var(--rf-gallery-edge);
-}
-.rf-gallery__items {
-	gap: var(--rf-gallery-gap);
-}
-.rf-gallery__item {
-	border-radius: var(--rf-radius-md);
-	margin: 0;
-}
-.rf-gallery__item figcaption {
-	padding: 0.5rem 0.75rem;
-	background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
-	color: white;
-	font-size: var(--rf-text-sm);
-}
-.rf-gallery > figcaption {
-	margin-top: 0.625rem;
-	font-size: var(--rf-text-sm);
-	color: var(--rf-color-muted);
-	text-align: center;
-	font-style: italic;
-}
-/* Carousel nav chrome is now the shared `.rf-carousel__nav` (styles/runes/carousel.css). */
-.rf-gallery[data-layout="masonry"] .rf-gallery__items {
-	column-gap: var(--rf-gallery-gap);
-}
-.rf-gallery[data-layout="masonry"] .rf-gallery__item {
-	margin-bottom: var(--rf-gallery-gap);
-}
-.rf-gallery[data-lightbox="true"] .rf-gallery__item {
-	cursor: zoom-in;
-}
-.rf-gallery__lightbox {
-	background: rgba(0, 0, 0, 0.9);
-}
-.rf-gallery__lightbox img {
-	border-radius: var(--rf-radius-md);
-}
-.rf-gallery__lightbox-close {
-	border-radius: 50%;
-	border: none;
-	background: rgba(255, 255, 255, 0.15);
-	color: white;
-	font-size: var(--rf-text-2xl);
-	cursor: pointer;
-}
-.rf-gallery__lightbox-nav {
-	border-radius: 50%;
-	border: none;
-	background: rgba(255, 255, 255, 0.15);
-	color: white;
-	font-size: var(--rf-text-2xl);
-	cursor: pointer;
-}
-
+	.rf-gallery {
+		margin: 0;
+		--rf-gallery-edge: 0.5rem;
+		--rf-gallery-gap: 0.5rem;
+		padding: var(--rf-gallery-edge);
+	}
+	.rf-gallery__items {
+		gap: var(--rf-gallery-gap);
+	}
+	.rf-gallery__item {
+		border-radius: var(--rf-radius-md);
+		margin: 0;
+	}
+	.rf-gallery__item figcaption {
+		padding: 0.5rem 0.75rem;
+		background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
+		color: white;
+		font-size: var(--rf-text-sm);
+	}
+	.rf-gallery > figcaption {
+		margin-top: 0.625rem;
+		font-size: var(--rf-text-sm);
+		color: var(--rf-color-muted);
+		text-align: center;
+		font-style: italic;
+	}
+	/* Carousel nav chrome is now the shared `.rf-carousel__nav` (styles/runes/carousel.css). */
+	.rf-gallery[data-layout="masonry"] .rf-gallery__items {
+		column-gap: var(--rf-gallery-gap);
+	}
+	.rf-gallery[data-layout="masonry"] .rf-gallery__item {
+		margin-bottom: var(--rf-gallery-gap);
+	}
+	.rf-gallery[data-lightbox="true"] .rf-gallery__item {
+		cursor: zoom-in;
+	}
+	.rf-gallery__lightbox {
+		background: rgba(0, 0, 0, 0.9);
+	}
+	.rf-gallery__lightbox img {
+		border-radius: var(--rf-radius-md);
+	}
+	.rf-gallery__lightbox-close {
+		border-radius: 50%;
+		border: none;
+		background: rgba(255, 255, 255, 0.15);
+		color: white;
+		font-size: var(--rf-text-2xl);
+		cursor: pointer;
+	}
+	.rf-gallery__lightbox-nav {
+		border-radius: 50%;
+		border: none;
+		background: rgba(255, 255, 255, 0.15);
+		color: white;
+		font-size: var(--rf-text-2xl);
+		cursor: pointer;
+	}
 }

package/styles/runes/grid.css

@@ -1,10 +1,13 @@
 @layer skin {
-/* Grid — skin. The grid system (tracks, columns, flow, spans, modes, aspect cells,
+	/* 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"] {
-	gap: var(--grid-gap, 1.5rem);
-}
-.rf-grid [data-name="cell"] p:first-child { margin-top: 0; }
-.rf-grid [data-name="cell"] p:last-child { margin-bottom: 0; }
-
+	.rf-grid [data-layout="grid"] {
+		gap: var(--grid-gap, 1.5rem);
+	}
+	.rf-grid [data-name="cell"] p:first-child {
+		margin-top: 0;
+	}
+	.rf-grid [data-name="cell"] p:last-child {
+		margin-bottom: 0;
+	}
 }