@refrakt-md/lumina 0.8.5 → 0.9.0

package/styles/dimensions/metadata.css

@@ -0,0 +1,161 @@
+/* ─── Metadata Dimensions ──────────────────────────────────────────────
+ * Generic styling for metadata badges across all runes.
+ * Works via data-meta-type, data-meta-rank, and data-meta-sentiment
+ * attributes emitted by the identity transform engine.
+ *
+ * Composability: --meta-color cascades from sentiment → type rules.
+ *                --meta-font-size cascades from rank → type rules.
+ * ────────────────────────────────────────────────────────────────────── */
+
+/* ─── Rank ─────────────────────────────────────────────────────────── */
+
+[data-meta-rank="primary"] {
+	--meta-font-size: 0.8125rem;
+}
+
+[data-meta-rank="secondary"] {
+	--meta-font-size: 0.75rem;
+	opacity: 0.8;
+}
+
+/* ─── Sentiment ────────────────────────────────────────────────────── */
+
+[data-meta-sentiment="positive"] { --meta-color: var(--rf-color-success, #10b981); }
+[data-meta-sentiment="negative"] { --meta-color: var(--rf-color-danger, #ef4444); }
+[data-meta-sentiment="caution"]  { --meta-color: var(--rf-color-warning, #f59e0b); }
+[data-meta-sentiment="neutral"]  { --meta-color: var(--rf-color-muted, #64748b); }
+
+/* Colored dot for any item with a sentiment */
+[data-meta-sentiment]::before {
+	content: '';
+	width: 0.5rem;
+	height: 0.5rem;
+	border-radius: 50%;
+	background: var(--meta-color, var(--rf-color-muted));
+	flex-shrink: 0;
+}
+
+/* ─── Meta Types ───────────────────────────────────────────────────── */
+
+/* Status: bordered pill */
+[data-meta-type="status"] {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.375rem;
+	padding: 0.5em 1.0em;
+	border: 1px solid var(--rf-color-border);
+	border-radius: 999px;
+	font-size: var(--meta-font-size, 0.8125rem);
+	font-weight: 500;
+	color: var(--rf-color-muted);
+}
+
+/* Category: bordered pill */
+[data-meta-type="category"] {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.375rem;
+	padding: 0.5em 1.0em;
+	border: 1px solid var(--rf-color-border);
+	border-radius: 999px;
+	font-size: var(--meta-font-size, 0.8125rem);
+	font-weight: 500;
+	color: var(--rf-color-muted);
+}
+
+/* Quantity: bordered pill with tabular numbers */
+[data-meta-type="quantity"] {
+	display: inline-flex;
+	align-items: center;
+	padding: 0.5em 1.0em;
+	border: 1px solid var(--rf-color-border);
+	border-radius: 999px;
+	font-variant-numeric: tabular-nums;
+	font-weight: 600;
+	font-size: var(--meta-font-size, 0.8125rem);
+	color: var(--rf-color-muted);
+}
+
+/* Temporal: bordered pill with time association */
+[data-meta-type="temporal"] {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.25rem;
+	padding: 0.5em 1.0em;
+	border: 1px solid var(--rf-color-border);
+	border-radius: 999px;
+	font-size: var(--meta-font-size, 0.8125rem);
+	font-variant-numeric: tabular-nums;
+	color: var(--rf-color-muted);
+}
+
+/* Tag: bordered pill */
+[data-meta-type="tag"] {
+	display: inline-flex;
+	align-items: center;
+	padding: 0.5em 1.0em;
+	border: 1px solid var(--rf-color-border);
+	border-radius: 999px;
+	font-size: calc(var(--meta-font-size, 0.8125rem) * 0.9);
+	color: var(--rf-color-muted);
+}
+
+/* ID: bordered pill, monospace */
+[data-meta-type="id"] {
+	display: inline-flex;
+	align-items: center;
+	padding: 0.5em 1.0em;
+	border: 1px solid var(--rf-color-border);
+	border-radius: 999px;
+	font-family: var(--rf-font-mono, monospace);
+	font-size: var(--meta-font-size, 0.8125rem);
+	font-weight: 500;
+	color: var(--rf-color-muted);
+}
+
+/* ─── Labels ──────────────────────────────────────────────────────── */
+
+/* Label element within metadata items — thin, muted style.
+ * Themes can override or hide entirely: [data-meta-label] { display: none } */
+[data-meta-label] {
+	font-weight: 400;
+	opacity: 0.65;
+}
+
+/* Visually hidden labels — accessible to screen readers but not visible.
+ * Themes can restore with: [data-meta-label-hidden] { position: static; ... } */
+[data-meta-label-hidden] {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+/* ─── Mobile: compact badges ─────────────────────────────────────────── */
+
+@media (max-width: 48rem) {
+	[data-meta-type="status"],
+	[data-meta-type="category"],
+	[data-meta-type="quantity"],
+	[data-meta-type="temporal"],
+	[data-meta-type="tag"],
+	[data-meta-type="id"] {
+		padding: 0.25em 0.625em;
+		font-size: calc(var(--meta-font-size, 0.8125rem) * 0.9);
+	}
+
+	[data-meta-sentiment]::before {
+		width: 0.375rem;
+		height: 0.375rem;
+	}
+
+	[data-section="header"] {
+		gap: 0.375rem;
+		margin-bottom: 1.5rem;
+	}
+}

package/styles/dimensions/sections.css

@@ -0,0 +1,77 @@
+/* ─── Section Anatomy Dimension ─────────────────────────────────────────
+ * Generic layout and typography for the 6 standard section roles.
+ * Every rune that declares `sections` in its config gets these for free.
+ *
+ * Includes density × section interactions (title scaling, hiding).
+ * ────────────────────────────────────────────────────────────────────── */
+
+/* ─── Header: chrome metadata row (badges, status, icons) ────────── */
+
+[data-section="header"] {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 0.5rem;
+	margin-bottom: 3rem;
+}
+
+/* ─── Preamble: intro section (eyebrow, headline, blurb) ─────────── */
+
+[data-section="preamble"] {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+}
+
+/* ─── Title: primary heading ──────────────────────────────────────── */
+
+[data-section="title"] {
+	font-family: var(--rf-font-sans);
+	font-size: 1.5rem;
+	font-weight: 700;
+	line-height: 1.2;
+	color: var(--rf-color-text);
+	margin: 0;
+}
+
+/* Scale title with density */
+[data-density="compact"] [data-section="title"] {
+	font-size: 2.125rem;
+}
+
+[data-density="minimal"] [data-section="title"] {
+	font-size: 1rem;
+}
+
+/* ─── Description: secondary text ─────────────────────────────────── */
+
+[data-section="description"] {
+	font-size: 1rem;
+	line-height: 1.5;
+	color: var(--rf-color-muted);
+	margin: var(--rf-spacing-xs) 0 var(--rf-spacing-md);
+}
+
+/* ─── Body: main content ──────────────────────────────────────────── */
+
+[data-section="body"] {
+	line-height: 1.6;
+	color: var(--rf-color-text);
+}
+
+/* ─── Footer: actions and links ───────────────────────────────────── */
+
+[data-section="footer"] {
+	display: flex;
+	flex-wrap: wrap;
+	gap: var(--rf-spacing-sm);
+	margin-top: var(--rf-spacing-md);
+	padding-top: var(--rf-spacing-sm);
+	border-top: 1px solid var(--rf-color-border);
+}
+
+/* ─── Media: visual content ───────────────────────────────────────── */
+
+[data-section="media"] {
+	margin: var(--rf-spacing-sm) 0;
+}

package/styles/dimensions/sequence.css

@@ -0,0 +1,129 @@
+/* === Sequential Items: universal ordered item styling === */
+
+/* Numbered — counter circle to the left of each item */
+[data-sequence="numbered"] {
+	counter-reset: sequence;
+	list-style: none;
+	padding-left: 0;
+}
+
+[data-sequence="numbered"] > li {
+	counter-increment: sequence;
+	position: relative;
+	padding-left: 2.25rem;
+}
+
+[data-sequence="numbered"] > li::before {
+	content: counter(sequence);
+	position: absolute;
+	left: 0;
+	top: 0.625rem;
+	width: 1.5rem;
+	height: 1.5rem;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 0.75rem;
+	font-weight: 700;
+	font-variant-numeric: tabular-nums;
+	color: var(--rf-color-primary);
+	background: var(--rf-color-surface-active);
+	border-radius: 50%;
+}
+
+[data-sequence="numbered"] > li + li {
+	border-top: 1px solid var(--rf-color-border);
+}
+
+/* Connected vertical — line with dots */
+[data-sequence="connected"] {
+	list-style: none;
+	padding-left: 0;
+}
+
+[data-sequence="connected"] > li {
+	position: relative;
+	padding-left: 2rem;
+	padding-bottom: 2rem;
+	border-left: 2px solid var(--rf-color-border);
+	margin-left: 0.375rem;
+}
+
+[data-sequence="connected"] > li:last-child {
+	border-left-color: transparent;
+	padding-bottom: 0;
+}
+
+[data-sequence="connected"] > li::before {
+	content: '';
+	position: absolute;
+	left: -0.4375rem;
+	top: 0.25rem;
+	width: 0.75rem;
+	height: 0.75rem;
+	border-radius: 50%;
+	background: var(--rf-color-primary);
+	border: 2px solid var(--rf-color-background);
+	box-shadow: 0 0 0 2px var(--rf-color-primary);
+}
+
+/* Connected horizontal — line with dots */
+[data-sequence="connected"][data-sequence-direction="horizontal"] {
+	display: flex;
+	gap: 2rem;
+	overflow-x: auto;
+}
+
+[data-sequence="connected"][data-sequence-direction="horizontal"] > li {
+	position: relative;
+	min-width: 12rem;
+	padding-top: 1.5rem;
+	padding-left: 0;
+	padding-bottom: 0;
+	border-left: none;
+	border-top: 2px solid var(--rf-color-border);
+	margin-left: 0;
+}
+
+[data-sequence="connected"][data-sequence-direction="horizontal"] > li:last-child {
+	border-top-color: var(--rf-color-border);
+}
+
+[data-sequence="connected"][data-sequence-direction="horizontal"] > li::before {
+	left: 0.5rem;
+	top: -0.4375rem;
+}
+
+/* Plain — no indicators, just ordered semantics */
+[data-sequence="plain"] {
+	list-style: none;
+	padding-left: 0;
+}
+
+/* === Density interaction === */
+
+/* Compact: smaller circles, tighter spacing */
+[data-density="compact"] [data-sequence="numbered"] > li {
+	padding-left: 1.75rem;
+}
+
+[data-density="compact"] [data-sequence="numbered"] > li::before {
+	width: 1.25rem;
+	height: 1.25rem;
+	font-size: 0.625rem;
+}
+
+[data-density="compact"] [data-sequence="connected"] > li {
+	padding-bottom: 1rem;
+}
+
+/* Minimal: no indicators, collapsed list */
+[data-density="minimal"] [data-sequence] > li::before {
+	display: none;
+}
+
+[data-density="minimal"] [data-sequence="connected"] > li {
+	border-left: none;
+	padding-left: 0;
+	margin-left: 0;
+}

package/styles/dimensions/state.css

@@ -0,0 +1,57 @@
+/* ─── Interactive State Dimension ───────────────────────────────────────
+ * Generic styling for interactive rune states: open/closed, active/inactive,
+ * selected, and disabled. Behaviours toggle data-state; themes read it here.
+ * ────────────────────────────────────────────────────────────────────── */
+
+/* ─── Open/Closed: collapsible content ────────────────────────────── */
+
+[data-state="closed"] > [class*="__body"],
+[data-state="closed"] > [class*="__content"] {
+	display: none;
+}
+
+[data-state="open"] > [class*="__body"],
+[data-state="open"] > [class*="__content"] {
+	display: block;
+	animation: rf-expand 0.2s ease-out;
+}
+
+@keyframes rf-expand {
+	from { opacity: 0; transform: translateY(-0.5rem); }
+	to { opacity: 1; transform: translateY(0); }
+}
+
+/* ─── Active/Inactive: selection indicators ───────────────────────── */
+
+button[data-state="active"] {
+	border-bottom: 2px solid var(--rf-color-primary);
+	color: var(--rf-color-primary);
+}
+
+button[data-state="inactive"] {
+	border-bottom: 2px solid transparent;
+	color: var(--rf-color-muted);
+}
+
+/* Panels controlled by tab/toggle state */
+[role="tabpanel"][data-state="inactive"] {
+	display: none;
+}
+
+[role="tabpanel"][data-state="active"] {
+	display: block;
+}
+
+/* ─── Selected: user selection highlight ──────────────────────────── */
+
+[data-state="selected"] {
+	background: color-mix(in oklch, var(--rf-color-primary) 10%, transparent);
+	outline: 2px solid var(--rf-color-primary);
+}
+
+/* ─── Disabled: dimmed non-interactive ────────────────────────────── */
+
+[data-state="disabled"] {
+	opacity: 0.4;
+	pointer-events: none;
+}

package/styles/dimensions/surfaces.css

@@ -0,0 +1,88 @@
+/* ─── Surface Assignments ──────────────────────────────────────────────
+ * Groups runes into 4 surface types: card, inline, banner, inset.
+ * Each surface defines container treatment (background, padding, radius).
+ * Padding scales with density via --rune-padding custom property.
+ * ────────────────────────────────────────────────────────────────────── */
+
+/* ─── Rune Spacing ────────────────────────────────────────────────── */
+/* Only top-level runes get vertical margin; child runes (nav items,
+   accordion items, grid cells, etc.) inherit spacing from their parent. */
+
+[data-rune]:not([data-rune] [data-rune]) {
+	margin: 1.5rem 0;
+}
+
+/* ─── Card: elevated container ────────────────────────────────────── */
+
+.rf-recipe,
+.rf-character,
+.rf-testimonial,
+.rf-event,
+.rf-realm,
+.rf-faction,
+.rf-lore,
+.rf-plot,
+.rf-bond,
+.rf-playlist,
+.rf-track,
+.rf-budget,
+.rf-organization,
+.rf-timeline,
+.rf-swatch,
+.rf-palette,
+.rf-typography,
+.rf-itinerary,
+.rf-symbol,
+.rf-changelog,
+.rf-api,
+.rf-howto {
+	background: var(--rf-color-surface);
+	border-radius: var(--rf-radius-md);
+	padding: var(--rune-padding, var(--rf-spacing-md));
+}
+
+/* ─── Inline: no visual boundary ──────────────────────────────────── */
+
+.rf-hint,
+.rf-details,
+.rf-sidenote,
+.rf-conversation,
+.rf-annotate,
+.rf-xref,
+.rf-diff,
+.rf-pullquote,
+.rf-textblock,
+.rf-nav,
+.rf-breadcrumb,
+.rf-toc,
+.rf-datatable,
+.rf-form {
+	padding: var(--rune-padding, var(--rf-spacing-sm)) 0;
+}
+
+/* ─── Banner: full-width strip ────────────────────────────────────── */
+
+.rf-hero,
+.rf-cta,
+.rf-feature,
+.rf-steps,
+.rf-bento,
+.rf-storyboard,
+.rf-map {
+	padding: var(--rune-padding, var(--rf-spacing-xl)) 0;
+}
+
+/* ─── Inset: recessed container ───────────────────────────────────── */
+
+.rf-codegroup,
+.rf-mockup,
+.rf-diagram,
+.rf-chart,
+.rf-embed,
+.rf-gallery,
+.rf-figure,
+.rf-reveal {
+	background: var(--rf-color-surface);
+	border-radius: var(--rf-radius-md);
+	padding: var(--rune-padding, var(--rf-spacing-md));
+}

package/styles/global.css

@@ -28,7 +28,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 { font-size: 2rem; font-weight: 400; letter-spacing: -0.025em; }
-h2 { font-size: 2.5rem; font-weight: 400; }
+h2 { font-size: 1.75rem; font-weight: 400; }
 h3 { font-size: 1.25rem; }
 h4 { font-size: 1.1rem; }
 

package/styles/layouts/docs.css

@@ -94,7 +94,6 @@
 .rf-docs-content__inner {
 	max-width: 60rem;
 	margin: 0 auto;
-	padding: 0 2.5rem;
 	--rf-content-padding: 2.5rem;
 }
 .rf-docs-content__inner--has-toc {
@@ -107,6 +106,33 @@
 	min-width: 0;
 }
 
+/* Width-variant grid — mirrors default layout's 5-track grid,
+   simplified to 3 tracks (no full breakout in docs context).
+   The wide inset tracks also serve as the content gutter. */
+.rf-docs-content__body > div > article {
+	display: grid;
+	grid-template-columns:
+		[wide-start] minmax(var(--rf-content-padding, 2.5rem), var(--rf-docs-wide-inset, 3rem))
+		[content-start] minmax(0, 1fr)
+		[content-end] minmax(var(--rf-content-padding, 2.5rem), var(--rf-docs-wide-inset, 3rem))
+		[wide-end];
+}
+.rf-docs-content__body > div > article > * {
+	grid-column: content;
+}
+.rf-docs-content__body > div > article > [data-width="wide"],
+.rf-docs-content__body > div > article > [data-width="full"] {
+	grid-column: wide;
+}
+.rf-docs-content__body > div > article > [data-width="compact"] {
+	max-width: var(--rf-width-compact, 30rem);
+	margin-inline: auto;
+}
+.rf-docs-content__body > div > article > [data-width="narrow"] {
+	max-width: var(--rf-width-narrow, 40rem);
+	margin-inline: auto;
+}
+
 /* ---- "On this page" sidebar ---- */
 .rf-docs-toc {
 	width: 220px;
@@ -209,7 +235,7 @@ html:has(.rf-docs-header) {
 		margin-left: 0;
 	}
 	.rf-docs-content__inner {
-		padding: 0 1.5rem;
 		--rf-content-padding: 1.5rem;
+		--rf-docs-wide-inset: 1.5rem;
 	}
 }