@refrakt-md/lumina 0.32.0 → 0.34.0

package/styles/elements/blockquote.css

@@ -1,27 +1,26 @@
 @layer skin {
-/* Blockquote */
-blockquote {
-	position: relative;
-	border-left: 3px solid var(--rf-color-primary);
-	margin: 1.5rem 0;
-	padding: 1rem 1.25rem 1rem 3.25rem;
-	color: var(--rf-color-muted);
-}
-blockquote::before {
-	content: '';
-	position: absolute;
-	left: 0.75rem;
-	top: 1rem;
-	width: 18px;
-	height: 18px;
-	background: var(--rf-color-primary);
-	opacity: 0.4;
-	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 8C10 5.79 8.21 4 6 4C3.79 4 2 5.79 2 8C2 10.21 3.79 12 6 12C6.67 12 7.31 11.83 7.88 11.54C7.63 14.08 5.55 16.09 3 16.34V18.36C6.68 18.09 9.64 15.13 9.93 11.45C9.98 10.99 10 10.5 10 10V8ZM22 8C22 5.79 20.21 4 18 4C15.79 4 14 5.79 14 8C14 10.21 15.79 12 18 12C18.67 12 19.31 11.83 19.88 11.54C19.63 14.08 17.55 16.09 15 16.34V18.36C18.68 18.09 21.64 15.13 21.93 11.45C21.98 10.99 22 10.5 22 10V8Z'/%3E%3C/svg%3E");
-	mask-size: contain;
-	mask-repeat: no-repeat;
-}
-blockquote p:last-child {
-	margin-bottom: 0;
-}
-
+	/* Blockquote */
+	blockquote {
+		position: relative;
+		border-left: 3px solid var(--rf-color-primary);
+		margin: 1.5rem 0;
+		padding: 1rem 1.25rem 1rem 3.25rem;
+		color: var(--rf-color-muted);
+	}
+	blockquote::before {
+		content: "";
+		position: absolute;
+		left: 0.75rem;
+		top: 1rem;
+		width: 18px;
+		height: 18px;
+		background: var(--rf-color-primary);
+		opacity: 0.4;
+		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 8C10 5.79 8.21 4 6 4C3.79 4 2 5.79 2 8C2 10.21 3.79 12 6 12C6.67 12 7.31 11.83 7.88 11.54C7.63 14.08 5.55 16.09 3 16.34V18.36C6.68 18.09 9.64 15.13 9.93 11.45C9.98 10.99 10 10.5 10 10V8ZM22 8C22 5.79 20.21 4 18 4C15.79 4 14 5.79 14 8C14 10.21 15.79 12 18 12C18.67 12 19.31 11.83 19.88 11.54C19.63 14.08 17.55 16.09 15 16.34V18.36C18.68 18.09 21.64 15.13 21.93 11.45C21.98 10.99 22 10.5 22 10V8Z'/%3E%3C/svg%3E");
+		mask-size: contain;
+		mask-repeat: no-repeat;
+	}
+	blockquote p:last-child {
+		margin-bottom: 0;
+	}
 }

package/styles/elements/code.css

@@ -1,50 +1,52 @@
 @layer skin {
-/* Code block wrapper — the rf-codeblock div comes from the Markdoc fence node
+	/* Code block wrapper — the rf-codeblock div comes from the Markdoc fence node
    schema at build time. Inside codegroup the margin is removed by
    .rf-codegroup .rf-codeblock. */
-.rf-codeblock {
-	position: relative;
-	margin: 1.5rem 0;
-}
+	.rf-codeblock {
+		position: relative;
+		margin: 1.5rem 0;
+	}
 
-.rf-codeblock > pre {
-	margin: 0;
-}
+	.rf-codeblock > pre {
+		margin: 0;
+	}
 
-/* Copy button — injected by the copy behavior at runtime */
-.rf-codeblock__copy {
-	position: absolute;
-	top: 0.5rem;
-	right: 0.5rem;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 2rem;
-	height: 2rem;
-	border: none;
-	border-radius: var(--rf-radius-sm);
-	background: transparent;
-	color: var(--rf-color-code-text, #e2e8f0);
-	cursor: pointer;
-	opacity: 0;
-	transition: opacity 150ms ease, background-color 150ms ease;
-}
+	/* Copy button — injected by the copy behavior at runtime */
+	.rf-codeblock__copy {
+		position: absolute;
+		top: 0.5rem;
+		right: 0.5rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2rem;
+		height: 2rem;
+		border: none;
+		border-radius: var(--rf-radius-sm);
+		background: transparent;
+		color: var(--rf-color-code-text, #e2e8f0);
+		cursor: pointer;
+		opacity: 0;
+		transition:
+			opacity 150ms ease,
+			background-color 150ms ease;
+	}
 
-.rf-codeblock:hover .rf-codeblock__copy {
-	opacity: 0.6;
-}
+	.rf-codeblock:hover .rf-codeblock__copy {
+		opacity: 0.6;
+	}
 
-.rf-codeblock__copy:hover {
-	opacity: 1 !important;
-	background: rgba(255, 255, 255, 0.1);
-}
+	.rf-codeblock__copy:hover {
+		opacity: 1 !important;
+		background: rgba(255, 255, 255, 0.1);
+	}
 
-.rf-codeblock__copy--copied {
-	opacity: 1 !important;
-	color: var(--rf-color-success, #4ade80);
-}
+	.rf-codeblock__copy--copied {
+		opacity: 1 !important;
+		color: var(--rf-color-success, #4ade80);
+	}
 
-/* WORK-304 — fence-level annotations: line numbers + line highlight.
+	/* WORK-304 — fence-level annotations: line numbers + line highlight.
  *
  * Shiki renders each line as `<span class="line">…</span>`. The fence
  * schema forwards `data-linenumbers` / `data-highlight-lines` /
@@ -71,49 +73,48 @@
  * consistent across highlighted and plain rows — matches the diff row
  * primitive at `runes/diff.css`. Highlighted rows just colour the
  * border + add the surface tint. */
-.rf-codeblock pre code {
-	display: grid;
-	min-width: max-content;
-}
+	.rf-codeblock pre code {
+		display: grid;
+		min-width: max-content;
+	}
 
-.rf-codeblock pre code .line {
-	border-left: 3px solid transparent;
-}
+	.rf-codeblock pre code .line {
+		border-left: 3px solid transparent;
+	}
 
-/* Line numbers — gutter::before owns the left column. Strip the pre's
+	/* Line numbers — gutter::before owns the left column. Strip the pre's
  * horizontal padding when linenumbers are on so the gutter sits flush
  * against the codeblock edge; the gutter's own padding + right border
  * provides the visual separation from the code body. */
-.rf-codeblock pre[data-linenumbers] {
-	padding-left: 0;
-}
+	.rf-codeblock pre[data-linenumbers] {
+		padding-left: 0;
+	}
 
-.rf-codeblock pre[data-linenumbers] code {
-	counter-reset: rf-line var(--rf-start-line, 0);
-}
+	.rf-codeblock pre[data-linenumbers] code {
+		counter-reset: rf-line var(--rf-start-line, 0);
+	}
 
-.rf-codeblock pre[data-linenumbers] code .line::before {
-	counter-increment: rf-line;
-	content: counter(rf-line);
-	display: inline-block;
-	width: 3em;
-	padding-inline: 0.75rem 0.5rem;
-	margin-right: 0.75rem;
-	text-align: right;
-	color: var(--rf-color-line-number);
-	font-variant-numeric: tabular-nums;
-	user-select: none;
-	border-right: 1px solid var(--rf-color-border);
-}
+	.rf-codeblock pre[data-linenumbers] code .line::before {
+		counter-increment: rf-line;
+		content: counter(rf-line);
+		display: inline-block;
+		width: 3em;
+		padding-inline: 0.75rem 0.5rem;
+		margin-right: 0.75rem;
+		text-align: right;
+		color: var(--rf-color-line-number);
+		font-variant-numeric: tabular-nums;
+		user-select: none;
+		border-right: 1px solid var(--rf-color-border);
+	}
 
-/* Highlighted lines share diff's row template — neutral surface tint
+	/* Highlighted lines share diff's row template — neutral surface tint
  * + primary-coloured left rail, no `+`/`-` sigil. The grid layout on
  * `<code>` above keeps consecutive highlighted rows continuous (no
  * subpixel gaps between the rails). Border is on every `.line` (above)
  * so the content alignment doesn't jump when highlighting a row. */
-.rf-codeblock pre code .line[data-line-status="highlight"] {
-	background: var(--rf-color-line-highlight);
-	border-left-color: var(--rf-color-line-highlight-rail);
-}
-
+	.rf-codeblock pre code .line[data-line-status="highlight"] {
+		background: var(--rf-color-line-highlight);
+		border-left-color: var(--rf-color-line-highlight-rail);
+	}
 }

package/styles/elements/table.css

@@ -1,39 +1,38 @@
 @layer skin {
-/* Table wrapper */
-.rf-table-wrapper {
-	overflow-x: auto;
-	-webkit-overflow-scrolling: touch;
-	margin: 1.5rem 0;
-}
-.rf-table-wrapper table {
-	margin: 0;
-	border-collapse: collapse;
-	width: 100%;
-}
-.rf-table-wrapper th {
-	white-space: nowrap;
-}
-.rf-table-wrapper td {
-	white-space: nowrap;
-}
-.rf-table-wrapper td:last-child {
-	white-space: normal;
-	min-width: 20rem;
-}
-.rf-table-wrapper th:first-child,
-.rf-table-wrapper td:first-child {
-	padding-left: 0;
-}
-.rf-table-wrapper th:last-child,
-.rf-table-wrapper td:last-child {
-	padding-right: 0;
-}
-.rf-table-wrapper tr:last-child td {
-	border-bottom: none;
-}
-.rf-table-wrapper th code,
-.rf-table-wrapper td code {
-	font-size: 1em;
-}
-
+	/* Table wrapper */
+	.rf-table-wrapper {
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+		margin: 1.5rem 0;
+	}
+	.rf-table-wrapper table {
+		margin: 0;
+		border-collapse: collapse;
+		width: 100%;
+	}
+	.rf-table-wrapper th {
+		white-space: nowrap;
+	}
+	.rf-table-wrapper td {
+		white-space: nowrap;
+	}
+	.rf-table-wrapper td:last-child {
+		white-space: normal;
+		min-width: 20rem;
+	}
+	.rf-table-wrapper th:first-child,
+	.rf-table-wrapper td:first-child {
+		padding-left: 0;
+	}
+	.rf-table-wrapper th:last-child,
+	.rf-table-wrapper td:last-child {
+		padding-right: 0;
+	}
+	.rf-table-wrapper tr:last-child td {
+		border-bottom: none;
+	}
+	.rf-table-wrapper th code,
+	.rf-table-wrapper td code {
+		font-size: 1em;
+	}
 }

package/styles/global.css

@@ -1,5 +1,5 @@
 @layer skin {
-/* Lumina Theme — Global Base Styles (skin).
+	/* Lumina Theme — Global Base Styles (skin).
  *
  * Structure (box model, zone resets, prose/heading/list/table rhythm, the
  * responsive-image + scroll mechanisms) lives in @refrakt-md/skeleton
@@ -7,163 +7,205 @@
  * typography, colour, native chrome, and the surface treatment of code/pre/
  * tables. */
 
-html {
-	font-family: var(--rf-font-sans);
-	color: var(--rf-color-text);
-	background: var(--rf-color-bg);
-	line-height: var(--rf-leading-relaxed);
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	-webkit-text-size-adjust: 100%;
-	text-size-adjust: 100%;
-	transition: background-color 200ms ease, color 200ms ease;
-	/* Opt out of mobile Safari's "text inflation" — it auto-scales text
+	html {
+		font-family: var(--rf-font-sans);
+		color: var(--rf-color-text);
+		background: var(--rf-color-bg);
+		line-height: var(--rf-leading-relaxed);
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+		-webkit-text-size-adjust: 100%;
+		text-size-adjust: 100%;
+		transition:
+			background-color 200ms ease,
+			color 200ms ease;
+		/* Opt out of mobile Safari's "text inflation" — it auto-scales text
 	 * inside elements wider than the viewport (e.g. the diff's
 	 * `min-width: 40rem` split panels and any horizontally-scrolling
 	 * code block) and makes their fonts read several pixels larger
 	 * than designed. */
-	-webkit-text-size-adjust: 100%;
-	text-size-adjust: 100%;
-}
+		-webkit-text-size-adjust: 100%;
+		text-size-adjust: 100%;
+	}
 
-/* ─── Theme-aware browser chrome (WORK-351) ─────────────────────────
+	/* ─── Theme-aware browser chrome (WORK-351) ─────────────────────────
  * Make native chrome — scrollbars, form controls, the main viewport
  * scrollbar — follow the active theme instead of always rendering in
  * the OS default scheme. */
 
-/* `color-scheme` so the UA paints native widgets/scrollbars per mode. */
-:root { color-scheme: light; }
-[data-theme="dark"] { color-scheme: dark; }
-@media (prefers-color-scheme: dark) {
-	:root:not([data-theme="light"]) { color-scheme: dark; }
-}
+	/* `color-scheme` so the UA paints native widgets/scrollbars per mode. */
+	:root {
+		color-scheme: light;
+	}
+	[data-theme="dark"] {
+		color-scheme: dark;
+	}
+	@media (prefers-color-scheme: dark) {
+		:root:not([data-theme="light"]) {
+			color-scheme: dark;
+		}
+	}
 
-/* Branded text selection — a subtle primary wash (the native/OS blue
+	/* Branded text selection — a subtle primary wash (the native/OS blue
  * otherwise leaks through). Background only, so the element's own text
  * colour stays legible under any theme. */
-::selection {
-	background: color-mix(in oklch, var(--rf-color-primary) 22%, transparent);
-}
+	::selection {
+		background: color-mix(in oklch, var(--rf-color-primary) 22%, transparent);
+	}
 
-/* Token-driven scrollbars. `scrollbar-color` / `scrollbar-width` inherit,
+	/* Token-driven scrollbars. `scrollbar-color` / `scrollbar-width` inherit,
  * so setting them on the root reaches every overflow container (codegroup,
  * datatable, drawer body, nav/sidebar) without per-rune rules; the WebKit
  * pseudo-elements refine the same colours. More specific per-container
  * rules (e.g. the hidden docs sidebar) still win. */
-:root {
-	scrollbar-width: thin;
-	scrollbar-color: var(--rf-color-muted) transparent;
-}
-::-webkit-scrollbar { width: 10px; height: 10px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb {
-	background: var(--rf-color-muted);
-	border-radius: var(--rf-radius-full);
-	border: 2px solid transparent;
-	background-clip: padding-box;
-}
-::-webkit-scrollbar-thumb:hover { background: var(--rf-color-text); }
+	:root {
+		scrollbar-width: thin;
+		scrollbar-color: var(--rf-color-muted) transparent;
+	}
+	::-webkit-scrollbar {
+		width: 10px;
+		height: 10px;
+	}
+	::-webkit-scrollbar-track {
+		background: transparent;
+	}
+	::-webkit-scrollbar-thumb {
+		background: var(--rf-color-muted);
+		border-radius: var(--rf-radius-full);
+		border: 2px solid transparent;
+		background-clip: padding-box;
+	}
+	::-webkit-scrollbar-thumb:hover {
+		background: var(--rf-color-text);
+	}
 
-/* ─── Keyboard focus (WORK-352) ─────────────────────────────────────
+	/* ─── Keyboard focus (WORK-352) ─────────────────────────────────────
  * A uniform, token-driven focus ring on every interactive element, at
  * zero specificity (`:where`) so a rune's own `:focus-visible` overrides
  * it. An outline (not box-shadow) follows border-radius and never shifts
  * layout; `outline-color` uses `primary`, so it is visible in both modes. */
-:where(
-	a[href], button, input, select, textarea, summary,
-	[tabindex]:not([tabindex="-1"]),
-	[role="button"], [role="tab"], [role="link"], [role="menuitem"], [role="menuitemradio"]
-):focus-visible {
-	outline: 2px solid var(--rf-color-primary);
-	outline-offset: 2px;
-}
+	:where(
+		a[href],
+		button,
+		input,
+		select,
+		textarea,
+		summary,
+		[tabindex]:not([tabindex="-1"]),
+		[role="button"],
+		[role="tab"],
+		[role="link"],
+		[role="menuitem"],
+		[role="menuitemradio"]
+	):focus-visible {
+		outline: 2px solid var(--rf-color-primary);
+		outline-offset: 2px;
+	}
 
-/* ─── Reduced motion (WORK-352) ─────────────────────────────────────
+	/* ─── Reduced motion (WORK-352) ─────────────────────────────────────
  * Honour the user's motion preference across every animated rune
  * (chart, reveal, juxtapose, accordion, drawer, …) in one place. Uses a
  * near-zero duration rather than `none` so animation/transition end
  * events still fire for behaviours that await them. */
-@media (prefers-reduced-motion: reduce) {
-	*, *::before, *::after {
-		animation-duration: 0.01ms !important;
-		animation-iteration-count: 1 !important;
-		transition-duration: 0.01ms !important;
-		scroll-behavior: auto !important;
+	@media (prefers-reduced-motion: reduce) {
+		*,
+		*::before,
+		*::after {
+			animation-duration: 0.01ms !important;
+			animation-iteration-count: 1 !important;
+			transition-duration: 0.01ms !important;
+			scroll-behavior: auto !important;
+		}
 	}
-}
-
-h1, h2, h3, h4, h5, h6 {
-	line-height: var(--rf-leading-tight);
-	font-weight: var(--rf-weight-semibold);
-	letter-spacing: var(--rf-tracking-tight);
-}
 
-h1 { font-size: var(--rf-text-3xl); font-weight: var(--rf-weight-bold); letter-spacing: var(--rf-tracking-tight); }
-h2 { font-size: var(--rf-text-2xl); }
-h3 { font-size: var(--rf-text-xl); }
-h4 { font-size: var(--rf-text); }
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		line-height: var(--rf-leading-tight);
+		font-weight: var(--rf-weight-semibold);
+		letter-spacing: var(--rf-tracking-tight);
+	}
 
-a {
-	color: var(--rf-color-primary);
-	text-decoration: none;
-	transition: color 150ms ease;
-}
-a:hover {
-	color: var(--rf-color-primary-hover);
-	text-decoration: underline;
-}
+	h1 {
+		font-size: var(--rf-text-3xl);
+		font-weight: var(--rf-weight-bold);
+		letter-spacing: var(--rf-tracking-tight);
+	}
+	h2 {
+		font-size: var(--rf-text-2xl);
+	}
+	h3 {
+		font-size: var(--rf-text-xl);
+	}
+	h4 {
+		font-size: var(--rf-text);
+	}
 
-strong { font-weight: var(--rf-weight-semibold); }
+	a {
+		color: var(--rf-color-primary);
+		text-decoration: none;
+		transition: color 150ms ease;
+	}
+	a:hover {
+		color: var(--rf-color-primary-hover);
+		text-decoration: underline;
+	}
 
-code {
-	font-family: var(--rf-font-mono);
-	font-size: 0.875em;
-	background: var(--rf-color-inline-code-bg);
-	padding: 0.15rem 0.4rem;
-	border-radius: var(--rf-radius-sm);
-	font-variant-ligatures: none;
-}
+	strong {
+		font-weight: var(--rf-weight-semibold);
+	}
 
-pre {
-	background: var(--rf-color-code-bg);
-	color: var(--rf-color-code-text);
-	padding: 1.25rem 1.5rem;
-	border-radius: var(--rf-radius-md);
-	font-size: var(--rf-text-sm);
-	line-height: var(--rf-leading-relaxed);
-	border: 1px solid var(--rf-color-border);
-}
+	code {
+		font-family: var(--rf-font-mono);
+		font-size: 0.875em;
+		background: var(--rf-color-inline-code-bg);
+		padding: 0.15rem 0.4rem;
+		border-radius: var(--rf-radius-sm);
+		font-variant-ligatures: none;
+	}
 
-pre code {
-	background: none;
-	padding: 0;
-	font-size: inherit;
-	border-radius: 0;
-}
+	pre {
+		background: var(--rf-color-code-bg);
+		color: var(--rf-color-code-text);
+		padding: 1.25rem 1.5rem;
+		border-radius: var(--rf-radius-md);
+		font-size: var(--rf-text-sm);
+		line-height: var(--rf-leading-relaxed);
+		border: 1px solid var(--rf-color-border);
+	}
 
-hr {
-	border: none;
-	border-top: 1px solid var(--rf-color-border);
-}
+	pre code {
+		background: none;
+		padding: 0;
+		font-size: inherit;
+		border-radius: 0;
+	}
 
-table {
-	font-size: var(--rf-text-sm);
-}
+	hr {
+		border: none;
+		border-top: 1px solid var(--rf-color-border);
+	}
 
-th {
-	text-align: left;
-	font-weight: var(--rf-weight-semibold);
-	padding: 0.625rem 1rem;
-	border-bottom: 1px solid var(--rf-color-border);
-	font-size: var(--rf-text-xs);
-	text-transform: uppercase;
-	letter-spacing: var(--rf-tracking-wide);
-	color: var(--rf-color-muted);
-}
+	table {
+		font-size: var(--rf-text-sm);
+	}
 
-td {
-	padding: 0.625rem 1rem;
-	border-bottom: 1px solid var(--rf-color-border);
-}
+	th {
+		text-align: left;
+		font-weight: var(--rf-weight-semibold);
+		padding: 0.625rem 1rem;
+		border-bottom: 1px solid var(--rf-color-border);
+		font-size: var(--rf-text-xs);
+		text-transform: uppercase;
+		letter-spacing: var(--rf-tracking-wide);
+		color: var(--rf-color-muted);
+	}
 
+	td {
+		padding: 0.625rem 1rem;
+		border-bottom: 1px solid var(--rf-color-border);
+	}
 }