@refrakt-md/lumina 0.21.0 → 0.23.0

package/styles/layouts/docs.css

@@ -1,40 +1,20 @@
+@layer skin {
 /* Docs layout */
 
 /* ---- Fixed header ---- */
 .rf-docs-header {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	z-index: 10;
 	background: var(--rf-color-bg, #fff);
 	border-bottom: 1px solid var(--rf-color-border);
 }
 .rf-docs-header__inner {
-	display: flex;
-	align-items: center;
 	gap: 1rem;
 	padding: 0.625rem 1.5rem;
 }
-.rf-docs-header__inner .rf-search-trigger {
-	margin-left: auto;
-	order: 1;
-}
-.rf-docs-header__inner > rf-nav {
-	order: 3;
-}
-.rf-docs-header__inner p ~ p {
-	order: 1;
-}
-.rf-docs-header__inner .rf-mobile-menu-btn {
-	order: 3;
-}
 .rf-docs-header p {
 	margin: 0;
 	line-height: 1;
 }
 .rf-docs-header a {
-	display: inline-block;
 	color: inherit;
 	text-decoration: none;
 }
@@ -42,25 +22,17 @@
 	text-decoration: none;
 }
 .rf-docs-header p:first-child a {
-	display: inline-flex;
-	align-items: center;
 	gap: 0.5rem;
-	font-weight: 600;
-	font-size: 1.2rem;
-	letter-spacing: -0.02em;
-}
-.rf-docs-header img,
-.rf-docs-header p:first-child a > .rf-icon {
-	height: 2rem;
-	width: 2rem;
+	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 {
-	display: inline-block;
 	vertical-align: middle;
 	color: currentColor;
 }
 .rf-docs-header__inner p ~ p {
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 }
 .rf-docs-header__inner p ~ p a {
 	margin-left: 1.5rem;
@@ -70,44 +42,14 @@
 	color: var(--rf-color-text);
 }
 .rf-docs-header__inner p ~ p a svg {
-	width: 1.1rem;
-	height: 1.1rem;
 	vertical-align: -0.15em;
 }
 
-/* ---- Body wrapper: sidebar + content row ----
- * The `body` slot in docsLayout groups sidebar + main so `position: sticky`
- * on the sidebar has a containing block that ends *before* the footer.
- * When the user scrolls past the wrapper's bottom (i.e. when the footer
- * comes into view) sticky releases and the sidebar scrolls away with the
- * page rather than overlaying the footer. */
-.rf-docs-body {
-	display: flex;
-	align-items: flex-start;
-}
-
 /* ---- Sticky sidebar ---- */
 .rf-docs-sidebar {
-	position: sticky;
-	top: 3.125rem;
-	align-self: flex-start;
-	flex-shrink: 0;
-	width: 240px;
-	height: calc(100vh - 3.125rem);
-	overflow-y: auto;
 	padding: 1.5rem;
 	border-right: 1px solid var(--rf-color-border);
 	background: var(--rf-color-bg, #fff);
-	z-index: 5;
-}
-/* Match the sticky offset in the natural-flow position too. The fixed header
- * is out of flow so `.rf-docs-body` starts at viewport top; without this
- * margin, the sidebar's static position sits at Y=0 with its top 3.125rem
- * hidden under the header — visible only when the page scrolls enough for
- * sticky to activate. Scoped to `:has(.rf-docs-header)` so layouts without a
- * header don't gain an unwanted top gap. */
-html:has(.rf-docs-header) .rf-docs-sidebar {
-	margin-top: 3.125rem;
 }
 .rf-docs-sidebar::-webkit-scrollbar {
 	width: 0;
@@ -115,52 +57,14 @@ html:has(.rf-docs-header) .rf-docs-sidebar {
 
 /* ---- Content area ---- */
 .rf-docs-content {
-	flex: 1;
-	min-width: 0;
 	padding-top: 4.75rem;
 	padding-bottom: 4rem;
-	container-type: inline-size;
 }
 .rf-docs-content__inner {
-	max-width: 60rem;
-	margin: 0 auto;
 	--rf-content-padding: 2.5rem;
 }
 .rf-docs-content__inner--has-toc {
-	display: flex;
 	gap: 6rem;
-	max-width: calc(60rem + 220px + 6rem);
-}
-.rf-docs-content__inner--has-toc .rf-docs-content__body {
-	flex: 1;
-	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;
 }
 
 /* Pagination wrapper sits outside the article grid, so it gets its own
@@ -173,34 +77,18 @@ html:has(.rf-docs-header) .rf-docs-sidebar {
 
 /* ---- "On this page" sidebar ---- */
 .rf-docs-toc {
-	width: 220px;
-	flex-shrink: 0;
-	position: sticky;
-	top: 5.75rem;
-	align-self: flex-start;
-	max-height: calc(100vh - 5.75rem);
-	overflow-y: auto;
 	padding: 0 1.25rem;
 }
 .rf-docs-toc::-webkit-scrollbar {
 	width: 0;
 }
 
-/* ---- Fixed-header offset ---- */
-html:has(.rf-docs-header) {
-	scroll-padding-top: 5rem;
-}
-
 /* ---- Mobile toolbar (hidden on desktop) ---- */
 .rf-docs-toolbar {
-	display: none;
-	align-items: center;
 	gap: 0.75rem;
 	padding: 0.625rem 1rem;
 	border-bottom: 1px solid var(--rf-color-border);
 	background: var(--rf-color-bg, #fff);
-	max-width: 100%;
-	overflow: hidden;
 }
 .rf-docs-toolbar__hamburger {
 	background: none;
@@ -209,22 +97,18 @@ html:has(.rf-docs-header) {
 	cursor: pointer;
 	color: var(--rf-color-muted);
 	line-height: 0;
-	flex-shrink: 0;
 }
 .rf-docs-toolbar__hamburger:hover {
 	color: var(--rf-color-text);
 }
 .rf-docs-toolbar__breadcrumb {
-	font-size: 0.8rem;
+	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. */
-	flex: 1 1 0;
-	min-width: 0;
-	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
@@ -237,49 +121,13 @@ html:has(.rf-docs-header) {
 }
 .rf-docs-breadcrumb-page {
 	color: var(--rf-color-text);
-	font-weight: 500;
+	font-weight: var(--rf-weight-medium);
 }
 
 /* ---- Hide TOC on medium screens ---- */
-@media (max-width: 1100px) {
-	.rf-docs-toc {
-		display: none;
-	}
-	.rf-docs-content__inner--has-toc {
-		display: block;
-		max-width: 60rem;
-	}
-}
 
 /* ---- Mobile overrides ---- */
 @media (max-width: 768px) {
-	.rf-docs-header {
-		position: sticky;
-		top: 0;
-	}
-	.rf-docs-header__inner p ~ p {
-		display: none;
-	}
-	/* The toolbar is sticky directly below the header so the hamburger —
-	   which doubles as the open/close trigger for the sidebar-nav panel —
-	   stays reachable while the panel is open or the page is scrolled.
-	   `top` is 1px less than the header height so the two bars overlap by
-	   a pixel — sub-pixel rounding during scroll can otherwise leave a
-	   hairline gap that lets page content shine through.
-	   z-index sits above the .rf-mobile-panel (99) so the hamburger
-	   stays clickable while the panel is open. */
-	.rf-docs-toolbar {
-		display: flex;
-		position: sticky;
-		top: calc(3.5rem - 1px);
-		z-index: 100;
-	}
-	.rf-mobile-panel--nav {
-		top: calc(6.25rem - 1px);
-	}
-	.rf-docs-sidebar {
-		display: none;
-	}
 	.rf-docs-content {
 		padding-top: 2rem;
 	}
@@ -288,3 +136,5 @@ html:has(.rf-docs-header) {
 		--rf-docs-wide-inset: 1.5rem;
 	}
 }
+
+}

package/styles/layouts/mobile.css

@@ -1,8 +1,8 @@
+@layer skin {
 /* Shared mobile UI — menu button, panel docked below header, close */
 
 /* ---- Mobile menu button (hidden on desktop) ---- */
 .rf-mobile-menu-btn {
-	display: none;
 	background: none;
 	border: none;
 	padding: 0.25rem;
@@ -13,17 +13,6 @@
 .rf-mobile-menu-btn:hover {
 	color: var(--rf-color-text);
 }
-/* Dots/X toggle — the SVG has both icons stacked; we show one at a time
-   based on the button's aria-expanded state. */
-.rf-mobile-menu-btn__icon-close {
-	display: none;
-}
-.rf-mobile-menu-btn[aria-expanded="true"] .rf-mobile-menu-btn__icon-open {
-	display: none;
-}
-.rf-mobile-menu-btn[aria-expanded="true"] .rf-mobile-menu-btn__icon-close {
-	display: inline;
-}
 
 /* ---- Mobile panel — docks below the header ----
    The header height is fixed by --rf-header-height (default 3.5rem to
@@ -31,19 +20,7 @@
    line-box rounding). Layouts with a taller header set the variable on
    their layout root so the panel — a sibling of the header — inherits. */
 .rf-mobile-panel {
-	display: none;
-	position: fixed;
-	top: var(--rf-header-height, 3.5rem);
-	right: 0;
-	bottom: 0;
-	left: 0;
-	width: 100%;
-	max-width: 100vw;
-	z-index: 99;
 	background: var(--rf-color-bg, #fff);
-	overflow-x: hidden;
-	overflow-y: auto;
-	-webkit-overflow-scrolling: touch;
 }
 /* Layout-specific panels (e.g. the docs sidebar-nav panel that sits
    under the docs header *and* toolbar) override `top` in their own
@@ -54,9 +31,6 @@
 .rf-mobile-panel__nav p {
 	margin: 0;
 }
-.rf-mobile-panel__nav img {
-	display: none;
-}
 /* Panel items — top-level links and group items render uniformly. The
    selectors below need to beat nav.css's nested-columns mobile overrides
    ((0,4,0)) on equal source position (nav.css is imported later than
@@ -66,10 +40,9 @@
 .rf-mobile-panel .rf-nav--menubar .rf-nav__top-level .rf-nav-item__link,
 .rf-mobile-panel .rf-nav--menubar .rf-nav-group .rf-nav-item__link,
 .rf-mobile-panel .rf-nav--menubar .rf-nav-group__panel .rf-nav--columns .rf-nav-item__link {
-	display: block;
 	padding: 0;
-	font-size: 1.5rem;
-	font-weight: 700;
+	font-size: var(--rf-text-2xl);
+	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-text);
 	text-decoration: none;
 	background: transparent;
@@ -96,26 +69,4 @@
 	padding: 1rem 1.5rem;
 }
 
-/* Panel opens via data-open attribute (set by mobile-menu behavior) */
-.rf-mobile-panel[data-open] {
-	display: block;
-}
-
-@media (max-width: 768px) {
-	.rf-mobile-menu-btn {
-		display: block;
-	}
-	/* The inline menubar collapses behind the kebab on mobile — the
-	   .rf-mobile-panel duplicates the same nav and styles it as a flat
-	   vertical list (see nav.css's rf-nav--menubar mobile rules). */
-	.rf-header__inner > rf-nav,
-	.rf-docs-header__inner > rf-nav,
-	.rf-blog-header__inner > rf-nav {
-		display: none;
-	}
-	/* Hide the duplicated brand line inside the mobile panel — the header
-	   above the panel already shows it. */
-	.rf-mobile-panel__nav > p:first-child {
-		display: none;
-	}
 }

package/styles/layouts/on-this-page.css

@@ -1,20 +1,20 @@
+@layer skin {
 /* On This Page — TOC sidebar navigation */
 
 .rf-on-this-page {
-	font-size: 0.8rem;
+	font-size: var(--rf-text-xs);
 }
 
 .rf-on-this-page__title {
-	font-size: 0.7rem;
-	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-muted, #64748b);
 	margin: 0 0 0.75rem;
 }
 
 .rf-on-this-page__list {
-	list-style: none;
 	margin: 0;
 	padding: 0;
 }
@@ -28,11 +28,10 @@
 }
 
 .rf-on-this-page__item a {
-	display: block;
 	padding: 0.25rem 0.75rem;
 	color: var(--rf-color-muted, #64748b);
 	text-decoration: none;
-	line-height: 1.4;
+	line-height: var(--rf-leading-snug);
 }
 
 .rf-on-this-page__item a:hover {
@@ -46,3 +45,5 @@
 .rf-on-this-page__item[data-active] a {
 	color: var(--rf-color-primary);
 }
+
+}