@refrakt-md/lumina 0.32.0 → 0.34.0

package/styles/layouts/default.css

@@ -1,184 +1,185 @@
 @layer skin {
-/* Default layout */
-.rf-header {
-	background: var(--rf-color-bg);
-	border-bottom: 1px solid var(--rf-color-border);
-}
-.rf-header__inner {
-	gap: 1rem;
-	padding: 0.625rem 1.5rem;
-}
-.rf-header p {
-	margin: 0;
-	line-height: 1;
-}
-.rf-header h1, .rf-header h2, .rf-header h3 {
-	margin: 0;
-	font-size: var(--rf-text-xl);
-	font-weight: var(--rf-weight-semibold);
-	letter-spacing: var(--rf-tracking-tight);
-	line-height: 1;
-}
-.rf-header a {
-	color: inherit;
-	text-decoration: none;
-}
-.rf-header a:hover {
-	text-decoration: none;
-}
-.rf-header p:first-child a {
-	gap: 0.5rem;
-	font-weight: var(--rf-weight-semibold);
-	font-size: var(--rf-text-xl);
-	letter-spacing: var(--rf-tracking-tight);
-}
-.rf-header p:first-child a > .rf-icon {
-	vertical-align: middle;
-	color: currentColor;
-}
-.rf-header__inner p ~ p {
-	font-size: var(--rf-text-sm);
-}
-.rf-header__inner p ~ p a {
-	margin-left: 1.5rem;
-	color: var(--rf-color-muted);
-}
-.rf-header__inner p ~ p a:hover {
-	color: var(--rf-color-text);
-}
-.rf-header__inner p ~ p a svg {
-	vertical-align: -0.15em;
-}
-.rf-page-content {
-	--rf-content-max: 80rem;
-	--rf-content-gutter: 1.5rem;
+	/* Default layout */
+	.rf-header {
+		background: var(--rf-color-bg);
+		border-bottom: 1px solid var(--rf-color-border);
+	}
+	.rf-header__inner {
+		gap: 1rem;
+		padding: 0.625rem 1.5rem;
+	}
+	.rf-header p {
+		margin: 0;
+		line-height: 1;
+	}
+	.rf-header h1,
+	.rf-header h2,
+	.rf-header h3 {
+		margin: 0;
+		font-size: var(--rf-text-xl);
+		font-weight: var(--rf-weight-semibold);
+		letter-spacing: var(--rf-tracking-tight);
+		line-height: 1;
+	}
+	.rf-header a {
+		color: inherit;
+		text-decoration: none;
+	}
+	.rf-header a:hover {
+		text-decoration: none;
+	}
+	.rf-header p:first-child a {
+		gap: 0.5rem;
+		font-weight: var(--rf-weight-semibold);
+		font-size: var(--rf-text-xl);
+		letter-spacing: var(--rf-tracking-tight);
+	}
+	.rf-header p:first-child a > .rf-icon {
+		vertical-align: middle;
+		color: currentColor;
+	}
+	.rf-header__inner p ~ p {
+		font-size: var(--rf-text-sm);
+	}
+	.rf-header__inner p ~ p a {
+		margin-left: 1.5rem;
+		color: var(--rf-color-muted);
+	}
+	.rf-header__inner p ~ p a:hover {
+		color: var(--rf-color-text);
+	}
+	.rf-header__inner p ~ p a svg {
+		vertical-align: -0.15em;
+	}
+	.rf-page-content {
+		--rf-content-max: 80rem;
+		--rf-content-gutter: 1.5rem;
 
-	padding-top: 2.5rem;
-	padding-bottom: 4rem;
-}
-.rf-page-content > article > [data-width="full"] {
-	padding-inline: max(
-		var(--rf-content-gutter, 1.5rem),
-		calc((100% - var(--rf-content-max, 80rem)) / 2)
-	);
-}
-/* Page sections (data-content-measure="anchored") keep their content at the
+		padding-top: 2.5rem;
+		padding-bottom: 4rem;
+	}
+	.rf-page-content > article > [data-width="full"] {
+		padding-inline: max(
+			var(--rf-content-gutter, 1.5rem),
+			calc((100% - var(--rf-content-max, 80rem)) / 2)
+		);
+	}
+	/* Page sections (data-content-measure="anchored") keep their content at the
  * text measure when bled to the wide track — only the surface/background
  * widens, matching how `full` reads as a band. The absolutely-positioned bg
  * fills the padded box, so the inner padding restores content without pulling
  * the bleed in. Runes without the flag fill the wide track (card breakout). */
-.rf-page-content > article > [data-content-measure="anchored"][data-width="wide"] {
-	padding-inline: max(
-		var(--rf-content-gutter, 1.5rem),
-		calc((100% - var(--rf-content-max, 80rem)) / 2)
-	);
-}
-/* Tinted sections also break out to full width */
-.rf-page-content > article > :is([data-tint], [data-color-scheme]):not([data-width]) {
-	padding-inline: max(
-		var(--rf-content-gutter, 1.5rem),
-		calc((100% - var(--rf-content-max, 80rem)) / 2)
-	);
-}
+	.rf-page-content > article > [data-content-measure="anchored"][data-width="wide"] {
+		padding-inline: max(
+			var(--rf-content-gutter, 1.5rem),
+			calc((100% - var(--rf-content-max, 80rem)) / 2)
+		);
+	}
+	/* Tinted sections also break out to full width */
+	.rf-page-content > article > :is([data-tint], [data-color-scheme]):not([data-width]) {
+		padding-inline: max(
+			var(--rf-content-gutter, 1.5rem),
+			calc((100% - var(--rf-content-max, 80rem)) / 2)
+		);
+	}
 
-/* Section spacing — vertical rhythm around block runes.
+	/* Section spacing — vertical rhythm around block runes.
  * Rune blocks (elements with data-rune) get section-level margins.
  * Prose elements (p, h2, pre, table, etc.) keep their natural flow
  * spacing from global.css — only gaining section margins when
  * immediately adjacent to a rune block. */
-.rf-page-content > article > * + [data-rune] {
-	margin-top: var(--rf-spacing-section, 4rem);
-	margin-bottom: var(--rf-spacing-section, 4rem);
-}
-/* Prose after a rune block: section gap above only.
+	.rf-page-content > article > * + [data-rune] {
+		margin-top: var(--rf-spacing-section, 4rem);
+		margin-bottom: var(--rf-spacing-section, 4rem);
+	}
+	/* Prose after a rune block: section gap above only.
  * No margin-bottom so subsequent prose keeps natural flow spacing. */
-.rf-page-content > article > [data-rune] + :not([data-rune]) {
-	margin-top: var(--rf-spacing-section, 4rem);
-}
-.rf-page-content > article > [data-spacing="flush"] {
-	margin-top: 0;
-	margin-bottom: 0;
-}
-.rf-page-content > article > [data-spacing="tight"] {
-	margin-top: var(--rf-spacing-section-tight, 1.5rem);
-	margin-bottom: var(--rf-spacing-section-tight, 1.5rem);
-}
-.rf-page-content > article > [data-spacing="loose"] {
-	margin-top: var(--rf-spacing-section-loose, 8rem);
-	margin-bottom: var(--rf-spacing-section-loose, 8rem);
-}
-.rf-page-content > article > [data-spacing="breathe"] {
-	margin-top: var(--rf-spacing-section-breathe, 12rem);
-	margin-bottom: var(--rf-spacing-section-breathe, 12rem);
-}
-
-/* Spacing on tinted/dark sections — use padding so space is inside the painted background */
-.rf-page-content > article > :is([data-color-scheme], [data-tint])[data-spacing="flush"] {
-	margin-top: 0;
-	margin-bottom: 0;
-	padding-top: 0;
-	padding-bottom: 0;
-}
-.rf-page-content > article > :is([data-color-scheme], [data-tint])[data-spacing="tight"] {
-	margin-top: 0;
-	margin-bottom: 0;
-	padding-top: var(--rf-spacing-section-tight, 1.5rem);
-	padding-bottom: var(--rf-spacing-section-tight, 1.5rem);
-}
-.rf-page-content > article > :is([data-color-scheme], [data-tint])[data-spacing="default"],
-.rf-page-content > article > :is([data-color-scheme], [data-tint]):not([data-spacing]) {
-	margin-top: 0;
-	margin-bottom: 0;
-	padding-top: var(--rf-spacing-section, 4rem);
-	padding-bottom: var(--rf-spacing-section, 4rem);
-}
-.rf-page-content > article > :is([data-color-scheme], [data-tint])[data-spacing="loose"] {
-	margin-top: 0;
-	margin-bottom: 0;
-	padding-top: var(--rf-spacing-section-loose, 8rem);
-	padding-bottom: var(--rf-spacing-section-loose, 8rem);
-}
-.rf-page-content > article > :is([data-color-scheme], [data-tint])[data-spacing="breathe"] {
-	margin-top: 0;
-	margin-bottom: 0;
-	padding-top: var(--rf-spacing-section-breathe, 12rem);
-	padding-bottom: var(--rf-spacing-section-breathe, 12rem);
-}
+	.rf-page-content > article > [data-rune] + :not([data-rune]) {
+		margin-top: var(--rf-spacing-section, 4rem);
+	}
+	.rf-page-content > article > [data-spacing="flush"] {
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+	.rf-page-content > article > [data-spacing="tight"] {
+		margin-top: var(--rf-spacing-section-tight, 1.5rem);
+		margin-bottom: var(--rf-spacing-section-tight, 1.5rem);
+	}
+	.rf-page-content > article > [data-spacing="loose"] {
+		margin-top: var(--rf-spacing-section-loose, 8rem);
+		margin-bottom: var(--rf-spacing-section-loose, 8rem);
+	}
+	.rf-page-content > article > [data-spacing="breathe"] {
+		margin-top: var(--rf-spacing-section-breathe, 12rem);
+		margin-bottom: var(--rf-spacing-section-breathe, 12rem);
+	}
 
-/* Inset — horizontal padding within block runes */
-.rf-page-content > article > [data-inset="flush"] {
-	padding-inline: 0;
-}
-.rf-page-content > article > [data-inset="tight"] {
-	padding-inline: var(--rf-inset-tight, 1rem);
-}
-.rf-page-content > article > [data-inset="loose"] {
-	padding-inline: var(--rf-inset-loose, 4rem);
-}
-.rf-page-content > article > [data-inset="breathe"] {
-	padding-inline: var(--rf-inset-breathe, 8rem);
-}
+	/* Spacing on tinted/dark sections — use padding so space is inside the painted background */
+	.rf-page-content > article > :is([data-color-scheme], [data-tint])[data-spacing="flush"] {
+		margin-top: 0;
+		margin-bottom: 0;
+		padding-top: 0;
+		padding-bottom: 0;
+	}
+	.rf-page-content > article > :is([data-color-scheme], [data-tint])[data-spacing="tight"] {
+		margin-top: 0;
+		margin-bottom: 0;
+		padding-top: var(--rf-spacing-section-tight, 1.5rem);
+		padding-bottom: var(--rf-spacing-section-tight, 1.5rem);
+	}
+	.rf-page-content > article > :is([data-color-scheme], [data-tint])[data-spacing="default"],
+	.rf-page-content > article > :is([data-color-scheme], [data-tint]):not([data-spacing]) {
+		margin-top: 0;
+		margin-bottom: 0;
+		padding-top: var(--rf-spacing-section, 4rem);
+		padding-bottom: var(--rf-spacing-section, 4rem);
+	}
+	.rf-page-content > article > :is([data-color-scheme], [data-tint])[data-spacing="loose"] {
+		margin-top: 0;
+		margin-bottom: 0;
+		padding-top: var(--rf-spacing-section-loose, 8rem);
+		padding-bottom: var(--rf-spacing-section-loose, 8rem);
+	}
+	.rf-page-content > article > :is([data-color-scheme], [data-tint])[data-spacing="breathe"] {
+		margin-top: 0;
+		margin-bottom: 0;
+		padding-top: var(--rf-spacing-section-breathe, 12rem);
+		padding-bottom: var(--rf-spacing-section-breathe, 12rem);
+	}
 
-/* Collapse top/bottom padding when a full-bleed section is first/last */
-.rf-page-content:has(> article > :first-child:is([data-width="full"], [data-tint])) {
-	padding-top: 0;
-}
-.rf-page-content:has(> article > :last-child:is([data-width="full"], [data-tint])) {
-	padding-bottom: 0;
-}
+	/* Inset — horizontal padding within block runes */
+	.rf-page-content > article > [data-inset="flush"] {
+		padding-inline: 0;
+	}
+	.rf-page-content > article > [data-inset="tight"] {
+		padding-inline: var(--rf-inset-tight, 1rem);
+	}
+	.rf-page-content > article > [data-inset="loose"] {
+		padding-inline: var(--rf-inset-loose, 4rem);
+	}
+	.rf-page-content > article > [data-inset="breathe"] {
+		padding-inline: var(--rf-inset-breathe, 8rem);
+	}
 
-/* Site footer */
-.rf-footer {
-	padding: 2.5rem 1.5rem 2rem;
-	border-top: 1px solid var(--rf-color-border);
-	background: var(--rf-color-bg);
-	color: var(--rf-color-muted);
-	font-size: var(--rf-text-sm);
-}
-.rf-footer p {
-	margin: 1.5rem 0 0;
-	font-size: var(--rf-text-xs);
-	color: var(--rf-color-muted);
-}
+	/* Collapse top/bottom padding when a full-bleed section is first/last */
+	.rf-page-content:has(> article > :first-child:is([data-width="full"], [data-tint])) {
+		padding-top: 0;
+	}
+	.rf-page-content:has(> article > :last-child:is([data-width="full"], [data-tint])) {
+		padding-bottom: 0;
+	}
 
+	/* Site footer */
+	.rf-footer {
+		padding: 2.5rem 1.5rem 2rem;
+		border-top: 1px solid var(--rf-color-border);
+		background: var(--rf-color-bg);
+		color: var(--rf-color-muted);
+		font-size: var(--rf-text-sm);
+	}
+	.rf-footer p {
+		margin: 1.5rem 0 0;
+		font-size: var(--rf-text-xs);
+		color: var(--rf-color-muted);
+	}
 }

package/styles/layouts/docs.css

@@ -1,140 +1,139 @@
 @layer skin {
-/* Docs layout */
+	/* Docs layout */
 
-/* ---- Fixed header ---- */
-.rf-docs-header {
-	background: var(--rf-color-bg, #fff);
-	border-bottom: 1px solid var(--rf-color-border);
-}
-.rf-docs-header__inner {
-	gap: 1rem;
-	padding: 0.625rem 1.5rem;
-}
-.rf-docs-header p {
-	margin: 0;
-	line-height: 1;
-}
-.rf-docs-header a {
-	color: inherit;
-	text-decoration: none;
-}
-.rf-docs-header a:hover {
-	text-decoration: none;
-}
-.rf-docs-header p:first-child a {
-	gap: 0.5rem;
-	font-weight: var(--rf-weight-semibold);
-	font-size: var(--rf-text-xl);
-	letter-spacing: var(--rf-tracking-tight);
-}
-.rf-docs-header p:first-child a > .rf-icon {
-	vertical-align: middle;
-	color: currentColor;
-}
-.rf-docs-header__inner p ~ p {
-	font-size: var(--rf-text-sm);
-}
-.rf-docs-header__inner p ~ p a {
-	margin-left: 1.5rem;
-	color: var(--rf-color-muted);
-}
-.rf-docs-header__inner p ~ p a:hover {
-	color: var(--rf-color-text);
-}
-.rf-docs-header__inner p ~ p a svg {
-	vertical-align: -0.15em;
-}
+	/* ---- Fixed header ---- */
+	.rf-docs-header {
+		background: var(--rf-color-bg, #fff);
+		border-bottom: 1px solid var(--rf-color-border);
+	}
+	.rf-docs-header__inner {
+		gap: 1rem;
+		padding: 0.625rem 1.5rem;
+	}
+	.rf-docs-header p {
+		margin: 0;
+		line-height: 1;
+	}
+	.rf-docs-header a {
+		color: inherit;
+		text-decoration: none;
+	}
+	.rf-docs-header a:hover {
+		text-decoration: none;
+	}
+	.rf-docs-header p:first-child a {
+		gap: 0.5rem;
+		font-weight: var(--rf-weight-semibold);
+		font-size: var(--rf-text-xl);
+		letter-spacing: var(--rf-tracking-tight);
+	}
+	.rf-docs-header p:first-child a > .rf-icon {
+		vertical-align: middle;
+		color: currentColor;
+	}
+	.rf-docs-header__inner p ~ p {
+		font-size: var(--rf-text-sm);
+	}
+	.rf-docs-header__inner p ~ p a {
+		margin-left: 1.5rem;
+		color: var(--rf-color-muted);
+	}
+	.rf-docs-header__inner p ~ p a:hover {
+		color: var(--rf-color-text);
+	}
+	.rf-docs-header__inner p ~ p a svg {
+		vertical-align: -0.15em;
+	}
 
-/* ---- Sticky sidebar ---- */
-.rf-docs-sidebar {
-	padding: 1.5rem;
-	border-right: 1px solid var(--rf-color-border);
-	background: var(--rf-color-bg, #fff);
-}
-.rf-docs-sidebar::-webkit-scrollbar {
-	width: 0;
-}
+	/* ---- Sticky sidebar ---- */
+	.rf-docs-sidebar {
+		padding: 1.5rem;
+		border-right: 1px solid var(--rf-color-border);
+		background: var(--rf-color-bg, #fff);
+	}
+	.rf-docs-sidebar::-webkit-scrollbar {
+		width: 0;
+	}
 
-/* ---- Content area ---- */
-.rf-docs-content {
-	padding-top: 4.75rem;
-	padding-bottom: 4rem;
-}
-.rf-docs-content__inner {
-	--rf-content-padding: 2.5rem;
-}
-.rf-docs-content__inner--has-toc {
-	gap: 6rem;
-}
+	/* ---- Content area ---- */
+	.rf-docs-content {
+		padding-top: 4.75rem;
+		padding-bottom: 4rem;
+	}
+	.rf-docs-content__inner {
+		--rf-content-padding: 2.5rem;
+	}
+	.rf-docs-content__inner--has-toc {
+		gap: 6rem;
+	}
 
-/* Pagination wrapper sits outside the article grid, so it gets its own
+	/* Pagination wrapper sits outside the article grid, so it gets its own
    horizontal padding so prev/next don't run to the viewport edges on
    narrow viewports. Uses the same `--rf-content-padding` token the
    article grid uses for its gutter columns. */
-.rf-docs-content__pagination {
-	padding-inline: var(--rf-content-padding, 2.5rem);
-}
+	.rf-docs-content__pagination {
+		padding-inline: var(--rf-content-padding, 2.5rem);
+	}
 
-/* ---- "On this page" sidebar ---- */
-.rf-docs-toc {
-	padding: 0 1.25rem;
-}
-.rf-docs-toc::-webkit-scrollbar {
-	width: 0;
-}
+	/* ---- "On this page" sidebar ---- */
+	.rf-docs-toc {
+		padding: 0 1.25rem;
+	}
+	.rf-docs-toc::-webkit-scrollbar {
+		width: 0;
+	}
 
-/* ---- Mobile toolbar (hidden on desktop) ---- */
-.rf-docs-toolbar {
-	gap: 0.75rem;
-	padding: 0.625rem 1rem;
-	border-bottom: 1px solid var(--rf-color-border);
-	background: var(--rf-color-bg, #fff);
-}
-.rf-docs-toolbar__hamburger {
-	background: none;
-	border: none;
-	padding: 0.25rem;
-	cursor: pointer;
-	color: var(--rf-color-muted);
-	line-height: 0;
-}
-.rf-docs-toolbar__hamburger:hover {
-	color: var(--rf-color-text);
-}
-.rf-docs-toolbar__breadcrumb {
-	font-size: var(--rf-text-xs);
-	color: var(--rf-color-muted);
-	/* `flex: 1 1 0` (basis 0, not auto) so the breadcrumb shrinks against
+	/* ---- Mobile toolbar (hidden on desktop) ---- */
+	.rf-docs-toolbar {
+		gap: 0.75rem;
+		padding: 0.625rem 1rem;
+		border-bottom: 1px solid var(--rf-color-border);
+		background: var(--rf-color-bg, #fff);
+	}
+	.rf-docs-toolbar__hamburger {
+		background: none;
+		border: none;
+		padding: 0.25rem;
+		cursor: pointer;
+		color: var(--rf-color-muted);
+		line-height: 0;
+	}
+	.rf-docs-toolbar__hamburger:hover {
+		color: var(--rf-color-text);
+	}
+	.rf-docs-toolbar__breadcrumb {
+		font-size: var(--rf-text-xs);
+		color: var(--rf-color-muted);
+		/* `flex: 1 1 0` (basis 0, not auto) so the breadcrumb shrinks against
 	 * the available space rather than starting at its full content width —
 	 * combined with `min-width: 0` this is what triggers ellipsis on long
 	 * titles. Without basis 0 a long page title overflows the toolbar and
 	 * forces horizontal page scroll on narrow viewports. */
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-.rf-docs-breadcrumb-category {
-	color: var(--rf-color-muted);
-}
-.rf-docs-breadcrumb-sep {
-	margin: 0 0.35rem;
-	color: var(--rf-color-border);
-}
-.rf-docs-breadcrumb-page {
-	color: var(--rf-color-text);
-	font-weight: var(--rf-weight-medium);
-}
-
-/* ---- Hide TOC on medium screens ---- */
-
-/* ---- Mobile overrides ---- */
-@media (max-width: 768px) {
-	.rf-docs-content {
-		padding-top: 2rem;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
-	.rf-docs-content__inner {
-		--rf-content-padding: 1.5rem;
-		--rf-docs-wide-inset: 1.5rem;
+	.rf-docs-breadcrumb-category {
+		color: var(--rf-color-muted);
 	}
-}
+	.rf-docs-breadcrumb-sep {
+		margin: 0 0.35rem;
+		color: var(--rf-color-border);
+	}
+	.rf-docs-breadcrumb-page {
+		color: var(--rf-color-text);
+		font-weight: var(--rf-weight-medium);
+	}
+
+	/* ---- Hide TOC on medium screens ---- */
 
+	/* ---- Mobile overrides ---- */
+	@media (max-width: 768px) {
+		.rf-docs-content {
+			padding-top: 2rem;
+		}
+		.rf-docs-content__inner {
+			--rf-content-padding: 1.5rem;
+			--rf-docs-wide-inset: 1.5rem;
+		}
+	}
 }