@refrakt-md/lumina 0.33.0 → 0.34.0

package/styles/runes/card.css

@@ -1,5 +1,5 @@
 @layer skin {
-/* card — generic content card (SPEC-070) — skin.
+	/* card — generic content card (SPEC-070) — skin.
  *
  * A soft surface fill plus a subtle border; the surface + border + structure
  * (media split, footer separator) carry the card. Pure layout (the stretched
@@ -7,84 +7,87 @@
  * @refrakt-md/skeleton (styles/runes/card.css). All spacing stays here in skin.
  */
 
-.rf-card {
-	/* Thin-edge inset model (matches `bento-cell`): the card hugs its media with
+	.rf-card {
+		/* Thin-edge inset model (matches `bento-cell`): the card hugs its media with
 	 * only a small edge margin, and the content zone adds the remaining inset
 	 * back below. The root `padding` lives in skin so it overrides the
 	 * surface-elevation padding (dimensions/surfaces.css, also skin) by source
 	 * order — in skeleton it would lose and an elevated card would double-pad. */
-	--rf-card-edge: var(--rf-spacing-sm);
-	--rf-card-media-gap: var(--rf-spacing-lg);
-	--rf-card-split-gap: var(--rf-spacing-sm);
-	padding: var(--rf-card-edge);
-	border-radius: var(--rf-radius-container);
-	border: 1px solid var(--rf-color-border);
-	background: var(--rf-color-surface);
-}
+		--rf-card-edge: var(--rf-spacing-sm);
+		--rf-card-media-gap: var(--rf-spacing-lg);
+		--rf-card-split-gap: var(--rf-spacing-sm);
+		padding: var(--rf-card-edge);
+		border-radius: var(--rf-radius-container);
+		border: 1px solid var(--rf-color-border);
+		background: var(--rf-color-surface);
+	}
 
-/* Media slot shares the card surface chrome (1px border + recessed well) so the
+	/* Media slot shares the card surface chrome (1px border + recessed well) so the
  * framed media reads as part of the card. `:where()` keeps it overridable
  * per-instance, matching the elevation rule. */
-:where(.rf-card) [data-section="media"] {
-	border: 1px solid var(--rf-color-border);
-	background: oklch(from var(--rf-color-surface) calc(l - var(--rf-surface-inset-shift)) c h);
-}
+	:where(.rf-card) [data-section="media"] {
+		border: 1px solid var(--rf-color-border);
+		background: oklch(from var(--rf-color-surface) calc(l - var(--rf-surface-inset-shift)) c h);
+	}
 
-/* Content zone fills the remaining inset so total text padding still equals
+	/* Content zone fills the remaining inset so total text padding still equals
  * `--rune-padding`. `max(0, …)` keeps dense+ (rune-padding < edge) safe. */
-.rf-card__content {
-	padding: max(0px, calc(var(--rune-padding, var(--rf-spacing-md)) - var(--rf-card-edge)));
-}
+	.rf-card__content {
+		padding: max(0px, calc(var(--rune-padding, var(--rf-spacing-md)) - var(--rf-card-edge)));
+	}
 
-/* Split layout: tight column-gap beside content; row-gap stays at the larger
+	/* Split layout: tight column-gap beside content; row-gap stays at the larger
  * media-gap so the collapse step picks up the generous stacked spacing. (The
  * vertical-align is structure; these gaps are skin.) */
-.rf-card[data-media-position="start"],
-.rf-card[data-media-position="end"] {
-	column-gap: var(--rf-card-split-gap);
-	row-gap: var(--rf-card-media-gap);
-}
+	.rf-card[data-media-position="start"],
+	.rf-card[data-media-position="end"] {
+		column-gap: var(--rf-card-split-gap);
+		row-gap: var(--rf-card-media-gap);
+	}
 
-/* Stacked layouts (top / bottom): explicit gap between the media banner and the
+	/* Stacked layouts (top / bottom): explicit gap between the media banner and the
  * content zone. */
-.rf-card[data-media-position="top"] > [data-section="media"] {
-	margin-bottom: var(--rf-card-media-gap);
-}
-.rf-card[data-media-position="bottom"] > [data-section="media"] {
-	margin-top: var(--rf-card-media-gap);
-}
+	.rf-card[data-media-position="top"] > [data-section="media"] {
+		margin-bottom: var(--rf-card-media-gap);
+	}
+	.rf-card[data-media-position="bottom"] > [data-section="media"] {
+		margin-top: var(--rf-card-media-gap);
+	}
 
-/* Only a linked card (stretched `.rf-card__link` present) reacts to hover. */
-.rf-card:has(.rf-card__link):hover {
-	background: var(--rf-color-surface-hover);
-}
+	/* Only a linked card (stretched `.rf-card__link` present) reacts to hover. */
+	.rf-card:has(.rf-card__link):hover {
+		background: var(--rf-color-surface-hover);
+	}
 
-.rf-card__body > :first-child { margin-top: 0; }
-.rf-card__body > :last-child { margin-bottom: 0; }
+	.rf-card__body > :first-child {
+		margin-top: 0;
+	}
+	.rf-card__body > :last-child {
+		margin-bottom: 0;
+	}
 
-/* Eyebrow — a leading paragraph immediately before a heading, the same kicker
+	/* Eyebrow — a leading paragraph immediately before a heading, the same kicker
  * treatment as page-section / recipe. */
-.rf-card__eyebrow {
-	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 var(--rf-spacing-xs);
-}
+	.rf-card__eyebrow {
+		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 var(--rf-spacing-xs);
+	}
 
-/* The body's leading heading is the card title; drop its prose top margin so it
+	/* The body's leading heading is the card title; drop its prose top margin so it
  * hugs the eyebrow (or the top of the card) instead of opening a gap. */
-.rf-card__title {
-	margin-top: 0;
-}
-
-.rf-card__footer {
-	margin-top: var(--rf-spacing-sm);
-	padding-top: var(--rf-spacing-sm);
-	border-top: 1px solid var(--rf-color-border);
-	font-size: 0.8125em;
-	color: var(--rf-color-muted);
-}
+	.rf-card__title {
+		margin-top: 0;
+	}
 
+	.rf-card__footer {
+		margin-top: var(--rf-spacing-sm);
+		padding-top: var(--rf-spacing-sm);
+		border-top: 1px solid var(--rf-color-border);
+		font-size: 0.8125em;
+		color: var(--rf-color-muted);
+	}
 }

package/styles/runes/carousel.css

@@ -1,18 +1,18 @@
 @layer skin {
-/* Carousel — shared nav chrome (SPEC-100). The track structure + nav positioning
+	/* Carousel — shared nav chrome (SPEC-100). The track structure + nav positioning
  * are skeleton (styles/runes/carousel.css); this is the skin (colour/shape). */
-.rf-carousel__nav {
-	border-radius: 50%;
-	border: none;
-	background: var(--rf-color-surface);
-	color: var(--rf-color-text);
-	box-shadow: var(--rf-shadow-md);
-	cursor: pointer;
-	font-size: var(--rf-text-xl);
-	opacity: 0.8;
-	transition: opacity 0.2s;
-}
-.rf-carousel__nav:hover {
-	opacity: 1;
-}
+	.rf-carousel__nav {
+		border-radius: 50%;
+		border: none;
+		background: var(--rf-color-surface);
+		color: var(--rf-color-text);
+		box-shadow: var(--rf-shadow-md);
+		cursor: pointer;
+		font-size: var(--rf-text-xl);
+		opacity: 0.8;
+		transition: opacity 0.2s;
+	}
+	.rf-carousel__nav:hover {
+		opacity: 1;
+	}
 }

package/styles/runes/cast.css

@@ -1,59 +1,58 @@
 @layer skin {
-/* Cast */
+	/* Cast */
 
-/* Members list — base */
-.rf-cast__items {
-	padding: 0;
-	margin: 0;
-}
+	/* Members list — base */
+	.rf-cast__items {
+		padding: 0;
+		margin: 0;
+	}
 
-/* Grid layout (default) */
-.rf-cast--grid .rf-cast__items {
-	gap: 1rem;
-}
+	/* Grid layout (default) */
+	.rf-cast--grid .rf-cast__items {
+		gap: 1rem;
+	}
 
-/* List layout */
-.rf-cast--list .rf-cast__items {
-	gap: 0.75rem;
-}
+	/* List layout */
+	.rf-cast--list .rf-cast__items {
+		gap: 0.75rem;
+	}
 
-/* Member card — surface chrome (fill, border, radius, padding) comes from
+	/* Member card — surface chrome (fill, border, radius, padding) comes from
  * dimensions/surfaces.css via defaultElevation: 'flat'. */
-.rf-cast-member {
-	text-align: center;
-}
-.rf-cast-member__name {
-	font-weight: var(--rf-weight-semibold);
-	font-size: var(--rf-text);
-	color: var(--rf-color-text);
-}
-.rf-cast-member__role {
-	font-size: var(--rf-text-sm);
-	color: var(--rf-color-muted);
-	margin-top: 0.125rem;
-}
-.rf-cast-member__body {
-	margin-top: 0.75rem;
-	font-size: var(--rf-text-sm);
-	color: var(--rf-color-muted);
-	line-height: var(--rf-leading-normal);
-}
-.rf-cast-member img {
-	border-radius: var(--rf-radius-full);
-	margin: 0 auto 0.75rem;
-}
-
-/* List layout — horizontal member cards */
-.rf-cast--list .rf-cast-member {
-	gap: 1rem;
-	text-align: left;
-	padding: 0.75rem 1rem;
-}
-.rf-cast--list .rf-cast-member img {
-	margin: 0;
-}
-.rf-cast--list .rf-cast-member__body {
-	margin-top: 0;
-}
+	.rf-cast-member {
+		text-align: center;
+	}
+	.rf-cast-member__name {
+		font-weight: var(--rf-weight-semibold);
+		font-size: var(--rf-text);
+		color: var(--rf-color-text);
+	}
+	.rf-cast-member__role {
+		font-size: var(--rf-text-sm);
+		color: var(--rf-color-muted);
+		margin-top: 0.125rem;
+	}
+	.rf-cast-member__body {
+		margin-top: 0.75rem;
+		font-size: var(--rf-text-sm);
+		color: var(--rf-color-muted);
+		line-height: var(--rf-leading-normal);
+	}
+	.rf-cast-member img {
+		border-radius: var(--rf-radius-full);
+		margin: 0 auto 0.75rem;
+	}
 
+	/* List layout — horizontal member cards */
+	.rf-cast--list .rf-cast-member {
+		gap: 1rem;
+		text-align: left;
+		padding: 0.75rem 1rem;
+	}
+	.rf-cast--list .rf-cast-member img {
+		margin: 0;
+	}
+	.rf-cast--list .rf-cast-member__body {
+		margin-top: 0;
+	}
 }

package/styles/runes/changelog.css

@@ -1,49 +1,48 @@
 @layer skin {
-/* Changelog — skin. The display:contents passthroughs + the date/badge displays
+	/* Changelog — skin. The display:contents passthroughs + the date/badge displays
  * live in @refrakt-md/skeleton (styles/runes/changelog.css). */
-.rf-changelog {
-	margin: 2rem 0;
-}
-.rf-changelog-release {
-	padding: 1.5rem 0;
-	border-bottom: 1px solid var(--rf-color-border);
-}
-.rf-changelog-release:last-child {
-	border-bottom: none;
-}
-.rf-changelog-release h3 {
-	font-size: var(--rf-text-xl);
-	font-weight: var(--rf-weight-bold);
-	margin: 0 0 0.25rem;
-	color: var(--rf-color-text);
-}
-.rf-changelog-release time {
-	font-size: var(--rf-text-xs);
-	color: var(--rf-color-muted);
-	margin-bottom: 0.75rem;
-}
-.rf-changelog-release ul {
-	padding-left: 1.25rem;
-	margin: 0;
-}
-.rf-changelog-release li {
-	font-size: var(--rf-text-sm);
-	line-height: var(--rf-leading-relaxed);
-	margin-bottom: 0.25rem;
-}
-.rf-changelog-release strong {
-	font-size: var(--rf-text-xs);
-	font-weight: var(--rf-weight-bold);
-	text-transform: uppercase;
-	letter-spacing: var(--rf-tracking-wider);
-	padding: 0.1rem 0.4rem;
-	border-radius: var(--rf-radius-sm);
-	margin-right: 0.375rem;
-	vertical-align: middle;
-}
-.rf-changelog-release li strong:first-child {
-	background: var(--rf-color-success-bg);
-	color: var(--rf-color-success);
-}
-
+	.rf-changelog {
+		margin: 2rem 0;
+	}
+	.rf-changelog-release {
+		padding: 1.5rem 0;
+		border-bottom: 1px solid var(--rf-color-border);
+	}
+	.rf-changelog-release:last-child {
+		border-bottom: none;
+	}
+	.rf-changelog-release h3 {
+		font-size: var(--rf-text-xl);
+		font-weight: var(--rf-weight-bold);
+		margin: 0 0 0.25rem;
+		color: var(--rf-color-text);
+	}
+	.rf-changelog-release time {
+		font-size: var(--rf-text-xs);
+		color: var(--rf-color-muted);
+		margin-bottom: 0.75rem;
+	}
+	.rf-changelog-release ul {
+		padding-left: 1.25rem;
+		margin: 0;
+	}
+	.rf-changelog-release li {
+		font-size: var(--rf-text-sm);
+		line-height: var(--rf-leading-relaxed);
+		margin-bottom: 0.25rem;
+	}
+	.rf-changelog-release strong {
+		font-size: var(--rf-text-xs);
+		font-weight: var(--rf-weight-bold);
+		text-transform: uppercase;
+		letter-spacing: var(--rf-tracking-wider);
+		padding: 0.1rem 0.4rem;
+		border-radius: var(--rf-radius-sm);
+		margin-right: 0.375rem;
+		vertical-align: middle;
+	}
+	.rf-changelog-release li strong:first-child {
+		background: var(--rf-color-success-bg);
+		color: var(--rf-color-success);
+	}
 }

package/styles/runes/character.css

@@ -1,40 +1,39 @@
 @layer skin {
-/* Character — the title and the role/status def-list come from the shared
+	/* Character — the title and the role/status def-list come from the shared
  * dimensions (sections + metadata); only the floated portrait avatar is
  * character-specific chrome. Unlike faction/realm, character is not a split
  * rune: the portrait floats and the content column wraps around it. */
 
-/* Portrait — floated circular avatar */
-.rf-character__portrait {
-	margin-left: 1.5rem;
-	margin-bottom: 1rem;
-	border-radius: var(--rf-radius-full);
-}
-
-/* Content */
-.rf-character__sections {
-	gap: 1rem;
-}
-.rf-character__content ul,
-.rf-character__content ol {
-	padding-left: 1.5rem;
-}
+	/* Portrait — floated circular avatar */
+	.rf-character__portrait {
+		margin-left: 1.5rem;
+		margin-bottom: 1rem;
+		border-radius: var(--rf-radius-full);
+	}
 
-/* Character Section */
-.rf-character-section {
-	padding: 0.75rem 0;
-	border-top: 1px solid var(--rf-color-border);
-}
-.rf-character-section__name {
-	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);
-}
-.rf-character-section__body ul,
-.rf-character-section__body ol {
-	padding-left: 1.5rem;
-}
+	/* Content */
+	.rf-character__sections {
+		gap: 1rem;
+	}
+	.rf-character__content ul,
+	.rf-character__content ol {
+		padding-left: 1.5rem;
+	}
 
+	/* Character Section */
+	.rf-character-section {
+		padding: 0.75rem 0;
+		border-top: 1px solid var(--rf-color-border);
+	}
+	.rf-character-section__name {
+		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);
+	}
+	.rf-character-section__body ul,
+	.rf-character-section__body ol {
+		padding-left: 1.5rem;
+	}
 }