@refrakt-md/lumina 0.22.0 → 0.23.0

package/styles/runes/bug.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Bug */
 
 /* SPEC-079: eyebrow + metadata zone names replace header-primary /
@@ -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);
 }
@@ -91,7 +70,7 @@
 	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,41 +1,33 @@
+@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: var(--rf-weight-semibold);
 	font-size: var(--rf-text);
 	color: var(--rf-color-text);
 }
 .rf-cast-member__role {
-	display: block;
 	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 	margin-top: 0.125rem;
@@ -46,31 +38,22 @@
 	color: var(--rf-color-muted);
 	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,9 +11,6 @@
 .rf-changelog-release:last-child {
 	border-bottom: none;
 }
-.rf-changelog-release__body {
-	display: contents;
-}
 .rf-changelog-release h3 {
 	font-size: var(--rf-text-xl);
 	font-weight: var(--rf-weight-bold);
@@ -22,7 +18,6 @@
 	color: var(--rf-color-text);
 }
 .rf-changelog-release time {
-	display: block;
 	font-size: var(--rf-text-xs);
 	color: var(--rf-color-muted);
 	margin-bottom: 0.75rem;
@@ -37,7 +32,6 @@
 	margin-bottom: 0.25rem;
 }
 .rf-changelog-release strong {
-	display: inline-block;
 	font-size: var(--rf-text-xs);
 	font-weight: var(--rf-weight-bold);
 	text-transform: uppercase;
@@ -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,7 +26,6 @@
 	border-top: 1px solid var(--rf-color-border);
 }
 .rf-character-section__name {
-	display: block;
 	font-size: var(--rf-text-xl);
 	font-weight: var(--rf-weight-bold);
 	line-height: var(--rf-leading-snug);
@@ -52,3 +36,5 @@
 .rf-character-section__body ol {
 	padding-left: 1.5rem;
 }
+
+}

package/styles/runes/chart.css

@@ -1,50 +1,34 @@
-/* Chart */
+@layer skin {
+/* Chart — skin. The chart block, responsive SVG/container, legend flex, swatch box,
+ * and the sr-only rendered data table live in @refrakt-md/skeleton
+ * (styles/runes/chart.css). What remains is the --rf-chart-* theming contract, SVG
+ * paint, palette rotation, data-table chrome, and type. */
 .rf-chart {
-	/* ─── Theming contract (SPEC-083 / WORK-353) ───
-	 * Every paint + geometry value the renderer uses is one of these
-	 * `--rf-chart-*` properties; a theme overrides any of them (here, on a tint
-	 * scope, or inline) with no renderer or selector changes. A non-CSS provider
-	 * (canvas) reads the same props via getComputedStyle. */
-
-	/* Series palette — a dedicated categorical palette, deliberately distinct
-	 * from the semantic status tokens (those are reserved for sentiment mode). */
 	--rf-chart-series-1: #6366f1;
 	--rf-chart-series-2: #06b6d4;
 	--rf-chart-series-3: #22c55e;
 	--rf-chart-series-4: #f59e0b;
 	--rf-chart-series-5: #a855f7;
 	--rf-chart-series-6: #ec4899;
-
-	/* Geometry (layout values the renderer reads via getComputedStyle). */
-	--rf-chart-bar-ratio: 0.75;        /* bar width as a fraction of its slot */
-	--rf-chart-bar-thickness: 48px;    /* max bar width cap */
-	--rf-chart-bar-gap: 0.15;          /* slot fraction reserved as inter-group gap */
+	--rf-chart-bar-ratio: 0.75;
+	--rf-chart-bar-thickness: 48px;
+	--rf-chart-bar-gap: 0.15;
 	--rf-chart-bar-radius: 2px;
 	--rf-chart-point-radius: 4px;
 	--rf-chart-line-width: 2px;
-
-	/* Typography / grid (paint values applied by CSS below). */
 	--rf-chart-label-size: 12px;
 	--rf-chart-label-color: var(--rf-color-muted);
 	--rf-chart-grid-color: var(--rf-color-border);
 	--rf-chart-grid-width: 1px;
-
-	display: block;
 	border-radius: var(--rf-radius-lg);
 	padding: 1.5rem;
 	margin: 0;
 }
-
-/* ─── SVG paint — driven entirely by the contract (the renderer sets no inline
- * fill/stroke; it only tags elements with a class + data-series + optional
- * data-meta-sentiment). ─── */
 .rf-chart__axis { stroke: var(--rf-chart-grid-color); stroke-width: var(--rf-chart-grid-width); }
 .rf-chart__label { fill: var(--rf-chart-label-color); font-size: var(--rf-chart-label-size); }
 .rf-chart__bar { rx: var(--rf-chart-bar-radius); fill: var(--rf-chart-series-1); }
 .rf-chart__point { fill: var(--rf-chart-series-1); }
 .rf-chart__line { fill: none; stroke: var(--rf-chart-series-1); stroke-width: var(--rf-chart-line-width); }
-
-/* Series palette rotation (data-series 0 is the default above). */
 .rf-chart__bar[data-series="1"], .rf-chart__point[data-series="1"] { fill: var(--rf-chart-series-2); }
 .rf-chart__bar[data-series="2"], .rf-chart__point[data-series="2"] { fill: var(--rf-chart-series-3); }
 .rf-chart__bar[data-series="3"], .rf-chart__point[data-series="3"] { fill: var(--rf-chart-series-4); }
@@ -55,11 +39,6 @@
 .rf-chart__line[data-series="3"] { stroke: var(--rf-chart-series-4); }
 .rf-chart__line[data-series="4"] { stroke: var(--rf-chart-series-5); }
 .rf-chart__line[data-series="5"] { stroke: var(--rf-chart-series-6); }
-
-/* Sentiment colouring — a data cell carrying `data-meta-sentiment` overrides the
- * rotating palette with the semantic token (the roadmap chart renders green-done
- * / red-blocked with no per-chart config). After the palette so it wins at equal
- * specificity. */
 .rf-chart__bar[data-meta-sentiment="positive"], .rf-chart__point[data-meta-sentiment="positive"] { fill: var(--rf-color-success); }
 .rf-chart__bar[data-meta-sentiment="negative"], .rf-chart__point[data-meta-sentiment="negative"] { fill: var(--rf-color-danger); }
 .rf-chart__bar[data-meta-sentiment="caution"],  .rf-chart__point[data-meta-sentiment="caution"]  { fill: var(--rf-color-warning); }
@@ -68,10 +47,6 @@
 .rf-chart__line[data-meta-sentiment="negative"] { stroke: var(--rf-color-danger); }
 .rf-chart__line[data-meta-sentiment="caution"]  { stroke: var(--rf-color-warning); }
 .rf-chart__line[data-meta-sentiment="neutral"]  { stroke: var(--rf-color-muted); }
-
-/* Data table — the no-JS / screen-reader source of truth. Visible as the
- * fallback; visually-hidden (but kept for assistive tech) once rf-chart has
- * rendered the svg. */
 .rf-chart__data {
 	width: 100%;
 	border-collapse: collapse;
@@ -87,41 +62,22 @@
 	padding: 0.375rem 0.625rem;
 	text-align: left;
 }
-.rf-chart[data-rendered] .rf-chart__data {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	margin: -1px;
-	overflow: hidden;
-	clip: rect(0, 0, 0, 0);
-	white-space: nowrap;
-	border: 0;
-}
 .rf-chart__title {
 	font-weight: var(--rf-weight-semibold);
 	font-size: var(--rf-text);
 	margin-bottom: 1rem;
 	text-align: center;
 }
-.rf-chart__container { width: 100%; }
-.rf-chart__svg { width: 100%; height: auto; }
 .rf-chart__legend {
-	display: flex;
-	justify-content: center;
 	gap: 1rem;
 	margin-top: 1rem;
 }
 .rf-chart__legend-item {
-	display: flex;
-	align-items: center;
 	gap: 0.375rem;
 	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
 .rf-chart__legend-color {
-	width: 12px;
-	height: 12px;
 	border-radius: 2px;
 	background: var(--rf-chart-series-1);
 }
@@ -130,3 +86,5 @@
 .rf-chart__legend-color[data-series="3"] { background: var(--rf-chart-series-4); }
 .rf-chart__legend-color[data-series="4"] { background: var(--rf-chart-series-5); }
 .rf-chart__legend-color[data-series="5"] { background: var(--rf-chart-series-6); }
+
+}

package/styles/runes/codegroup.css

@@ -1,21 +1,22 @@
-/* Code Group
+@layer skin {
+/* Code Group — skin.
  *
  * Chrome (the wrapper + topbar + tabs) uses `--rf-color-surface` so it
  * reads against the page in both light and dark modes. The code areas
- * themselves inherit `--rf-color-code-bg` from the global `pre` rule, so
- * code stays on its own background even when the surrounding chrome
- * flips with the page mode. */
+ * themselves inherit `--rf-color-code-bg` from the global `pre` rule.
+ *
+ * The wrapper clip, topbar flex, list reset, the scrollable tab strip, and the
+ * tab flex live in @refrakt-md/skeleton (styles/runes/codegroup.css). The pre/code
+ * rules stay here in skin: they deliberately override elements/code.css by source
+ * order (the `data-overflow="wrap"` reset especially). */
 .rf-codegroup {
 	border: 1px solid var(--rf-color-border);
-	overflow: hidden;
 	background: var(--rf-color-surface);
 	color: var(--rf-color-text);
 	box-shadow: var(--rf-shadow-md);
 	padding: 0;
 }
 .rf-codegroup__topbar {
-	display: flex;
-	align-items: center;
 	gap: 0.375rem;
 	padding: 0.75rem 1rem;
 	background: transparent;
@@ -24,9 +25,7 @@
 }
 /* Window chrome — three traffic-light dots painted as gradients on one
  * pseudo-element. The element reserves real width (three 10px dots, 1rem
- * apart) so the flex row spaces the title clear of the dots — box-shadow
- * dots take no layout space and overlapped the title. Pure decoration, so
- * it lives entirely in CSS (no markup). */
+ * apart) so the flex row spaces the title clear of the dots. Pure decoration. */
 .rf-codegroup__topbar::before {
 	content: '';
 	flex: 0 0 auto;
@@ -47,19 +46,14 @@
 	color: var(--rf-color-muted);
 }
 .rf-codegroup ul {
-	list-style: none;
 	padding: 0;
 	margin: 0;
 }
 .rf-codegroup__tabs {
-	display: flex;
 	background: transparent;
 	border-bottom: 1px solid var(--rf-color-border);
-	overflow-x: auto;
-	overflow-y: hidden;
 }
 .rf-codegroup__tab {
-	flex: 0 0 auto;
 	padding: 0.5rem 1rem;
 	font-size: var(--rf-text-xs);
 	font-family: var(--rf-font-mono);
@@ -104,14 +98,10 @@
 	overflow-x: hidden;
 }
 /* WORK-304 — the standalone codeblock CSS at `elements/code.css`
- * sets `display: grid; min-width: max-content` on `pre code` so
- * row tints + line numbers extend across the horizontal scroll
- * region. That sizing actively prevents wrapping (the code track
- * is locked at max-content). Inside `overflow="wrap"` codegroups
- * we WANT wrapping, so revert the code element back to a plain
- * block with no min-width constraint. Lines stay block-flow so
- * Shiki's `<span class="line">` children wrap with the pre's
- * `white-space: pre-wrap`. */
+ * sets `display: grid; min-width: max-content` on `pre code`. Inside
+ * `overflow="wrap"` codegroups we WANT wrapping, so revert the code element
+ * back to a plain block with no min-width constraint. This must stay skin —
+ * it overrides elements/code.css (also skin) by source order + specificity. */
 .rf-codegroup[data-overflow="wrap"] pre code {
 	display: block;
 	min-width: 0;
@@ -119,3 +109,5 @@
 .rf-codegroup[data-overflow="hide"] pre {
 	overflow-x: hidden;
 }
+
+}