@refrakt-md/lumina 0.21.0 → 0.23.0

package/styles/runes/breadcrumb.css

@@ -1,26 +1,16 @@
-/* Breadcrumb */
+@layer skin {
+/* Breadcrumb — skin. The contents passthroughs + the flex trail live in
+ * @refrakt-md/skeleton (styles/runes/breadcrumb.css). */
 .rf-breadcrumb {
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 	margin: 0 0 1.5rem;
 }
-.rf-breadcrumb__items {
-	display: contents;
-}
-.rf-breadcrumb-item {
-	display: contents;
-}
 .rf-breadcrumb ol {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
 	gap: 0.25rem;
-	list-style: none;
 	padding: 0;
 	margin: 0;
 }
 .rf-breadcrumb li {
-	display: flex;
-	align-items: center;
 	gap: 0.25rem;
 	padding: 0;
 	margin: 0;
@@ -42,5 +32,7 @@
 }
 .rf-breadcrumb li:last-child span {
 	color: var(--rf-color-text);
-	font-weight: 500;
+	font-weight: var(--rf-weight-medium);
+}
+
 }

package/styles/runes/budget.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Budget */
 
 /* Duration + currency meta row — flex/gap from the shared
@@ -9,9 +10,9 @@
 	margin-bottom: 1.5rem;
 }
 .rf-budget .rf-budget__eyebrow {
-	font-size: 0.8rem;
-	font-weight: 600;
-	letter-spacing: 0.06em;
+	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 0.375rem;
@@ -28,8 +29,6 @@
 
 /* Categories */
 .rf-budget__categories {
-	display: flex;
-	flex-direction: column;
 	gap: 1.5rem;
 }
 
@@ -42,17 +41,14 @@
 	padding-left: 1rem;
 }
 .rf-budget-category__header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
 	margin-bottom: 0.5rem;
 }
 .rf-budget-category--estimate .rf-budget-category__subtotal::before {
 	content: 'est.';
-	font-size: 0.6875rem;
-	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-warning);
 	background: var(--rf-color-warning-bg);
 	padding: 0.0625rem 0.375rem;
@@ -61,27 +57,23 @@
 	vertical-align: middle;
 }
 .rf-budget-category__label {
-	font-size: 0.9375rem;
-	font-weight: 600;
+	font-size: var(--rf-text);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-text);
 }
 .rf-budget-category__subtotal {
-	font-size: 0.9375rem;
-	font-weight: 600;
+	font-size: var(--rf-text);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-text);
 	white-space: nowrap;
 }
 .rf-budget-category__line-items {
-	list-style: none;
 	padding: 0;
 	margin: 0;
 }
 
 /* Budget Line Item */
 .rf-budget-line-item {
-	display: flex;
-	justify-content: space-between;
-	align-items: baseline;
 	padding: 0.3125rem 0;
 	gap: 1rem;
 }
@@ -89,14 +81,12 @@
 	border-top: 1px solid var(--rf-color-border);
 }
 .rf-budget-line-item__description {
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
-	flex: 1;
-	min-width: 0;
 }
 .rf-budget-line-item__amount {
-	font-size: 0.875rem;
-	font-weight: 500;
+	font-size: var(--rf-text-sm);
+	font-weight: var(--rf-weight-medium);
 	color: var(--rf-color-text);
 	white-space: nowrap;
 	font-variant-numeric: tabular-nums;
@@ -107,51 +97,39 @@
 	margin-top: 1.5rem;
 	padding-top: 1rem;
 	border-top: 2px solid var(--rf-color-text);
-	display: flex;
-	flex-direction: column;
 	gap: 0.5rem;
 }
 .rf-budget__total {
-	display: flex;
-	justify-content: space-between;
-	align-items: baseline;
 	gap: 1rem;
 }
 .rf-budget__total-label {
-	font-size: 1rem;
-	font-weight: 700;
+	font-size: var(--rf-text);
+	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-text);
 }
 .rf-budget__total-amount {
-	font-size: 1.25rem;
-	font-weight: 700;
+	font-size: var(--rf-text-xl);
+	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-text);
 	white-space: nowrap;
 	font-variant-numeric: tabular-nums;
 }
 .rf-budget__per-day {
-	display: flex;
-	justify-content: space-between;
-	align-items: baseline;
 	gap: 1rem;
 }
 .rf-budget__per-day-label {
-	font-size: 0.8125rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
-	min-width: 0;
 }
 .rf-budget__per-day-amount {
-	font-size: 0.9375rem;
-	font-weight: 500;
+	font-size: var(--rf-text);
+	font-weight: var(--rf-weight-medium);
 	color: var(--rf-color-muted);
 	white-space: nowrap;
 	font-variant-numeric: tabular-nums;
 }
-
-/* Summary style — hide line items, show only category headers */
-[data-variant="summary"] .rf-budget-category__line-items {
-	display: none;
-}
 [data-variant="summary"] .rf-budget-category__header {
 	margin-bottom: 0;
 }
+
+}

package/styles/runes/bug.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Bug */
 
 /* SPEC-079: eyebrow + metadata zone names replace header-primary /
@@ -20,8 +21,8 @@
 .rf-bug__metadata [data-field="assignee"] dd .rf-badge::before { content: '@'; }
 
 .rf-bug__body {
-	font-size: 0.925rem;
-	line-height: 1.65;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-bug__body > section {
 	margin-top: 1rem;
@@ -31,3 +32,5 @@
 .rf-bug__body > section:first-child {
 	margin-top: 0.75rem;
 }
+
+}

package/styles/runes/card.css

@@ -1,73 +1,52 @@
-/* card — generic content card (SPEC-070).
+@layer 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. The media|content split +
- * responsive collapse + inset media banner come from the shared
- * layouts/split.css (keyed off data-layout / data-section="media" /
- * data-name="content" / data-media-position).
+ * (media split, footer separator) carry the card. Pure layout (the stretched
+ * link, clip, split align, collection-grid height filling, height scale) lives in
+ * @refrakt-md/skeleton (styles/runes/card.css). All spacing stays here in skin.
  */
 
 .rf-card {
-	position: relative; /* anchor for the stretched link */
 	/* 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 — so text still sits at the full `--rune-padding` while media
-	 * sits close to the card border, with no negative-margin bleed.
-	 *   • `--rf-card-edge`        — fixed thin outer padding.
-	 *   • `--rf-card-media-gap`   — generous gap when media stacks above/below
-	 *                                content (stacked layout, or split collapsed
-	 *                                to one column on mobile).
-	 *   • `--rf-card-split-gap`   — tight gap when media sits beside content,
-	 *                                so the card reads as a unified surface
-	 *                                rather than two loosely-related panels. */
-	--rf-card-edge: 0.5rem;
+	 * 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);
-	/* Clip non-media content (substrate patterns, bg gradient/image layers) to
-	 * the card's rounded outer corners. The displaced-peek case is unaffected:
-	 * `frame-displace` translates the guest *inside* the media zone, which has
-	 * its own `overflow: hidden`, so no peek ever crosses this boundary.
-	 * `box-shadow` from `elevation` paints outside the element box and is
-	 * unaffected by `overflow`. */
-	overflow: hidden;
+}
+
+/* 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);
 }
 
 /* Content zone fills the remaining inset so total text padding still equals
- * `--rune-padding`. `max(0, …)` keeps dense+ (rune-padding < edge) safe — at
- * tighter densities the edge becomes the floor. */
+ * `--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)));
 }
 
-/* Split layout: tight column-gap when media sits beside content. `row-gap`
- * stays at the larger media-gap so the collapse step (split grid → single
- * column) automatically picks up the generous stacked spacing instead of
- * inheriting the tight beside-gap. (2-section cards have only one grid row in
- * the uncollapsed state, so row-gap is dormant until collapse.) `stretch`
- * lets the media zone match the content's height — the image inside uses
- * `object-fit: cover` so it re-crops rather than letterboxing when content
- * is taller than the media's natural aspect ratio.
- *
- * We set `column-gap` / `row-gap` / `align-items` directly rather than override
- * `--split-gap` / `--split-valign`: the shared split layout transform emits
- * those vars as inline styles even when the author doesn't set the matching
- * attributes, so a CSS-variable override loses to inline-style specificity.
- * Direct grid properties win via selector specificity and stay in our control. */
+/* 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);
-	align-items: stretch;
 }
 
-/* Stacked layouts (top / bottom): explicit gap between the media banner and
- * the content zone (replaces the figure-style margin-bottom from the bleed
- * model). For `bottom`, column-reverse already flips the visual order, so the
- * gap still reads as the space between the two zones. */
+/* 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);
 }
@@ -86,12 +65,12 @@
 /* Eyebrow — a leading paragraph immediately before a heading, the same kicker
  * treatment as page-section / recipe. */
 .rf-card__eyebrow {
-	font-size: 0.8rem;
-	font-weight: 600;
-	letter-spacing: 0.06em;
+	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 0.375rem;
+	margin: 0 0 var(--rf-spacing-xs);
 }
 
 /* The body's leading heading is the card title; drop its prose top margin so it
@@ -108,51 +87,4 @@
 	color: var(--rf-color-muted);
 }
 
-/* In a collection grid, each row stretches its items to the tallest (see
- * collection.css); these rules make a stacked card spend that height usefully:
- * the card becomes a column, its content fills the leftover height, and the
- * body grows so footers drop to a common baseline across the row. Scoped to
- * stacked cards so a split card's grid (layouts/split.css) is left intact. */
-.rf-collection[data-layout='grid'] .rf-card[data-layout='stacked'] {
-	display: flex;
-	flex-direction: column;
-	/* The grid/flex wrapper stretches the card, but a nested flex container
-	 * doesn't always pass that height to its own flex children; pin it so the
-	 * content/body flex:1 reliably fills. */
-	height: 100%;
-}
-.rf-collection[data-layout='grid'] .rf-card[data-layout='stacked'] > .rf-card__content {
-	flex: 1;
-}
-.rf-collection[data-layout='grid'] .rf-card[data-layout='stacked'] .rf-card__content {
-	display: flex;
-	flex-direction: column;
-}
-.rf-collection[data-layout='grid'] .rf-card[data-layout='stacked'] .rf-card__body {
-	flex: 1;
-}
-
-/* Height knob (SPEC-089) — a named intrinsic-height scale for cover / bg-only
- * cards that have no natural content height to fill. `aspect` (→ aspect-ratio,
- * emitted inline by the engine) is the proportional alternative; `height` is the
- * absolute one. Both are authority overrides: they win over the cover variant's
- * default media aspect because they sit on the card root with a real value, and
- * over an external grid track only when the card isn't being stretched by one.
- * For cover cards the grid stack (cover.css) fills this box; for bg-only cards
- * the min-height simply gives the surface a poster shape. */
-.rf-card[data-height="sm"] { min-height: 12rem; }
-.rf-card[data-height="md"] { min-height: 18rem; }
-.rf-card[data-height="lg"] { min-height: 26rem; }
-.rf-card[data-height="xl"] { min-height: 34rem; }
-
-/* Whole-card stretched link — covers the card; real links in body/footer
- * sit above it via position:relative. */
-.rf-card__link {
-	position: absolute;
-	inset: 0;
-	z-index: 0;
-}
-.rf-card a:not(.rf-card__link) {
-	position: relative;
-	z-index: 1;
 }

package/styles/runes/cast.css

@@ -1,76 +1,59 @@
+@layer skin {
 /* Cast */
 
 /* Members list — base */
 .rf-cast__members {
-	list-style: none;
 	padding: 0;
 	margin: 0;
 }
 
 /* Grid layout (default) */
 .rf-cast--grid .rf-cast__members {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
 	gap: 1rem;
 }
 
 /* List layout */
 .rf-cast--list .rf-cast__members {
-	display: flex;
-	flex-direction: column;
 	gap: 0.75rem;
 }
 
-/* Member card — surface instead of border */
+/* Member card — surface chrome (fill, border, radius, padding) comes from
+ * dimensions/surfaces.css via defaultElevation: 'flat'. */
 .rf-cast-member {
-	background: var(--rf-color-surface);
-	border-radius: var(--rf-radius-md);
-	padding: 1.25rem;
 	text-align: center;
 }
 .rf-cast-member__name {
-	display: block;
-	font-weight: 600;
-	font-size: 1rem;
+	font-weight: var(--rf-weight-semibold);
+	font-size: var(--rf-text);
 	color: var(--rf-color-text);
 }
 .rf-cast-member__role {
-	display: block;
-	font-size: 0.875rem;
+	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: 0.875rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
-	line-height: 1.5;
+	line-height: var(--rf-leading-normal);
 }
-.rf-cast-member__body:empty { display: none; }
 .rf-cast-member img {
-	width: 80px;
-	height: 80px;
 	border-radius: var(--rf-radius-full);
-	object-fit: cover;
 	margin: 0 auto 0.75rem;
-	display: block;
 }
 
 /* List layout — horizontal member cards */
 .rf-cast--list .rf-cast-member {
-	display: flex;
-	align-items: center;
 	gap: 1rem;
 	text-align: left;
 	padding: 0.75rem 1rem;
 }
 .rf-cast--list .rf-cast-member img {
-	width: 48px;
-	height: 48px;
 	margin: 0;
-	flex-shrink: 0;
 }
 .rf-cast--list .rf-cast-member__body {
 	margin-top: 0;
-	flex: 1;
+}
+
 }

package/styles/runes/changelog.css

@@ -1,10 +1,9 @@
-/* Changelog */
+@layer skin {
+/* 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__releases {
-	display: contents;
-}
 .rf-changelog-release {
 	padding: 1.5rem 0;
 	border-bottom: 1px solid var(--rf-color-border);
@@ -12,18 +11,14 @@
 .rf-changelog-release:last-child {
 	border-bottom: none;
 }
-.rf-changelog-release__body {
-	display: contents;
-}
 .rf-changelog-release h3 {
-	font-size: 1.25rem;
-	font-weight: 700;
+	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 {
-	display: block;
-	font-size: 0.8rem;
+	font-size: var(--rf-text-xs);
 	color: var(--rf-color-muted);
 	margin-bottom: 0.75rem;
 }
@@ -32,16 +27,15 @@
 	margin: 0;
 }
 .rf-changelog-release li {
-	font-size: 0.925rem;
-	line-height: 1.65;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 	margin-bottom: 0.25rem;
 }
 .rf-changelog-release strong {
-	display: inline-block;
-	font-size: 0.7rem;
-	font-weight: 700;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-bold);
 	text-transform: uppercase;
-	letter-spacing: 0.05em;
+	letter-spacing: var(--rf-tracking-wider);
 	padding: 0.1rem 0.4rem;
 	border-radius: var(--rf-radius-sm);
 	margin-right: 0.375rem;
@@ -51,3 +45,5 @@
 	background: var(--rf-color-success-bg);
 	color: var(--rf-color-success);
 }
+
+}

package/styles/runes/character.css

@@ -1,33 +1,18 @@
+@layer skin {
 /* 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. */
 
-/* Contain the floated portrait within the article */
-.rf-character {
-	display: flow-root;
-}
-
 /* Portrait — floated circular avatar */
 .rf-character__portrait {
-	float: right;
 	margin-left: 1.5rem;
 	margin-bottom: 1rem;
-	width: 120px;
-	height: 120px;
 	border-radius: var(--rf-radius-full);
-	overflow: hidden;
-}
-.rf-character__portrait img {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
 }
 
 /* Content */
 .rf-character__sections {
-	display: flex;
-	flex-direction: column;
 	gap: 1rem;
 }
 .rf-character__content ul,
@@ -41,10 +26,9 @@
 	border-top: 1px solid var(--rf-color-border);
 }
 .rf-character-section__name {
-	display: block;
-	font-size: 1.25rem;
-	font-weight: 700;
-	line-height: 1.3;
+	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);
 }
@@ -52,3 +36,5 @@
 .rf-character-section__body ol {
 	padding-left: 1.5rem;
 }
+
+}