@refrakt-md/lumina 0.22.0 → 0.24.0

package/styles/global.css

@@ -1,9 +1,11 @@
-/* Lumina Theme — Global Base Styles */
-
-/* Reset */
-*, *::before, *::after {
-	box-sizing: border-box;
-}
+@layer 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
+ * (styles/global.css) per SPEC-094 §3 / WORK-438. What remains here is skin:
+ * typography, colour, native chrome, and the surface treatment of code/pre/
+ * tables. */
 
 html {
 	font-family: var(--rf-font-sans);
@@ -24,18 +26,12 @@ html {
 	text-size-adjust: 100%;
 }
 
-body {
-	margin: 0;
-}
-
 /* ─── 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.
- * Mirrors the dark-token selectors (explicit toggle + system preference
- * unless forced light). */
+/* `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) {
@@ -98,8 +94,6 @@ body {
 
 h1, h2, h3, h4, h5, h6 {
 	line-height: var(--rf-leading-tight);
-	margin-top: 2em;
-	margin-bottom: 0.5em;
 	font-weight: var(--rf-weight-semibold);
 	letter-spacing: var(--rf-tracking-tight);
 }
@@ -109,11 +103,6 @@ h2 { font-size: var(--rf-text-2xl); }
 h3 { font-size: var(--rf-text-xl); }
 h4 { font-size: var(--rf-text); }
 
-p {
-	margin-top: 0;
-	margin-bottom: 1rem;
-}
-
 a {
 	color: var(--rf-color-primary);
 	text-decoration: none;
@@ -140,8 +129,6 @@ pre {
 	color: var(--rf-color-code-text);
 	padding: 1.25rem 1.5rem;
 	border-radius: var(--rf-radius-md);
-	overflow-x: auto;
-	margin: 1.5rem 0;
 	font-size: var(--rf-text-sm);
 	line-height: var(--rf-leading-relaxed);
 	border: 1px solid var(--rf-color-border);
@@ -154,35 +141,12 @@ pre code {
 	border-radius: 0;
 }
 
-img {
-	max-width: 100%;
-	height: auto;
-}
-
 hr {
 	border: none;
 	border-top: 1px solid var(--rf-color-border);
-	margin: 2rem 0;
-}
-
-ul, ol {
-	padding-left: 1.5rem;
-	margin-top: 0;
-	margin-bottom: 1rem;
-}
-
-li {
-	margin-bottom: 0.25rem;
-}
-
-li > p {
-	margin-bottom: 0.5rem;
 }
 
 table {
-	width: 100%;
-	border-collapse: collapse;
-	margin: 1.5rem 0;
 	font-size: var(--rf-text-sm);
 }
 
@@ -202,7 +166,4 @@ td {
 	border-bottom: 1px solid var(--rf-color-border);
 }
 
-meta {
-	display: none;
 }
-

package/styles/layouts/blog.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Blog layout */
 
 /* The blog header chrome is taller (1.125rem padding + 2rem logo), so
@@ -8,33 +9,18 @@
 }
 /* ---- Header ---- */
 .rf-blog-header {
-	position: sticky;
-	top: 0;
-	z-index: 100;
 	background: var(--rf-color-bg);
 	border-bottom: 1px solid var(--rf-color-border);
 }
 .rf-blog-header__inner {
-	display: flex;
-	align-items: center;
 	gap: 1rem;
 	padding: 1.125rem 1.5rem;
 }
-.rf-blog-header__inner .rf-search-trigger {
-	margin-left: auto;
-}
-.rf-blog-header__inner p ~ p {
-	order: 1;
-}
-.rf-blog-header__inner .rf-mobile-menu-btn {
-	order: 2;
-}
 .rf-blog-header p {
 	margin: 0;
 	line-height: 1;
 }
 .rf-blog-header a {
-	display: inline-block;
 	color: inherit;
 	text-decoration: none;
 }
@@ -42,20 +28,12 @@
 	text-decoration: none;
 }
 .rf-blog-header p:first-child a {
-	display: inline-flex;
-	align-items: center;
 	gap: 0.5rem;
 	font-weight: var(--rf-weight-semibold);
 	font-size: var(--rf-text-xl);
 	letter-spacing: var(--rf-tracking-tight);
 }
-.rf-blog-header img,
 .rf-blog-header p:first-child a > .rf-icon {
-	height: 2rem;
-	width: 2rem;
-}
-.rf-blog-header p:first-child a > .rf-icon {
-	display: inline-block;
 	vertical-align: middle;
 	color: currentColor;
 }
@@ -70,27 +48,15 @@
 	color: var(--rf-color-text);
 }
 .rf-blog-header__inner p ~ p a svg {
-	width: 1.1rem;
-	height: 1.1rem;
 	vertical-align: -0.15em;
 }
 
 /* ---- Layout container ---- */
 .rf-blog {
-	max-width: 72rem;
-	margin: 0 auto;
 	padding: 2.5rem 1.5rem 4rem;
 }
 .rf-blog--has-sidebar {
-	display: grid;
-	grid-template-columns: 1fr 16rem;
 	gap: 3rem;
-	align-items: start;
-}
-
-/* ---- Blog index ---- */
-.rf-blog-index {
-	max-width: 42rem;
 }
 .rf-blog-index__title {
 	font-size: var(--rf-text-4xl);
@@ -105,18 +71,12 @@
 	line-height: var(--rf-leading-relaxed);
 	color: var(--rf-color-muted);
 }
-.rf-blog-index__body:empty {
-	display: none;
-}
 .rf-blog-index__posts {
-	display: flex;
-	flex-direction: column;
 	gap: 1.5rem;
 }
 
 /* ---- Post card ---- */
 .rf-blog-card {
-	display: block;
 	padding: 1.5rem;
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-md, 0.5rem);
@@ -136,8 +96,6 @@
 	color: var(--rf-color-text);
 }
 .rf-blog-card__meta {
-	display: flex;
-	align-items: center;
 	gap: 0.75rem;
 	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
@@ -154,8 +112,6 @@
 	color: var(--rf-color-muted);
 }
 .rf-blog-card__tags {
-	display: flex;
-	flex-wrap: wrap;
 	gap: 0.5rem;
 	margin-bottom: 0.75rem;
 }
@@ -164,11 +120,6 @@
 	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-primary, var(--rf-color-text));
 }
-
-/* ---- Article ---- */
-.rf-blog-article {
-	max-width: 42rem;
-}
 .rf-blog-article__header {
 	margin-bottom: 2.5rem;
 	padding-bottom: 1.5rem;
@@ -183,8 +134,6 @@
 	color: var(--rf-color-text);
 }
 .rf-blog-article__meta {
-	display: flex;
-	align-items: center;
 	gap: 0.75rem;
 	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
@@ -197,8 +146,6 @@
 	margin-right: 0.75rem;
 }
 .rf-blog-article__tags {
-	display: flex;
-	flex-wrap: wrap;
 	gap: 0.5rem;
 	margin-top: 0.75rem;
 }
@@ -232,8 +179,6 @@
 
 /* ---- Sidebar ---- */
 .rf-blog-sidebar {
-	position: sticky;
-	top: 2.5rem;
 	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
@@ -249,7 +194,6 @@
 	margin-bottom: 0.5rem;
 }
 .rf-blog-sidebar ul {
-	list-style: none;
 	padding: 0;
 	margin: 0;
 }
@@ -275,18 +219,13 @@
 
 /* ---- Mobile ---- */
 @media (max-width: 768px) {
-	.rf-blog-header__inner p ~ p {
-		display: none;
-	}
-	.rf-blog--has-sidebar {
-		grid-template-columns: 1fr;
-	}
 	.rf-blog-article__title {
 		font-size: var(--rf-text-3xl);
 	}
 	.rf-blog-sidebar {
-		position: static;
 		border-top: 1px solid var(--rf-color-border);
 		padding-top: 1.5rem;
 	}
 }
+
+}

package/styles/layouts/default.css

@@ -1,30 +1,13 @@
+@layer skin {
 /* Default layout */
 .rf-header {
-	position: sticky;
-	top: 0;
-	z-index: 100;
 	background: var(--rf-color-bg);
 	border-bottom: 1px solid var(--rf-color-border);
 }
 .rf-header__inner {
-	display: flex;
-	align-items: center;
 	gap: 1rem;
 	padding: 0.625rem 1.5rem;
 }
-.rf-header__inner .rf-search-trigger {
-	margin-left: auto;
-	order: 1;
-}
-.rf-header__inner > rf-nav {
-	order: 3;
-}
-.rf-header__inner p ~ p {
-	order: 1;
-}
-.rf-header__inner .rf-mobile-menu-btn {
-	order: 3;
-}
 .rf-header p {
 	margin: 0;
 	line-height: 1;
@@ -37,7 +20,6 @@
 	line-height: 1;
 }
 .rf-header a {
-	display: inline-block;
 	color: inherit;
 	text-decoration: none;
 }
@@ -45,23 +27,12 @@
 	text-decoration: none;
 }
 .rf-header p:first-child a {
-	display: inline-flex;
-	align-items: center;
 	gap: 0.5rem;
 	font-weight: var(--rf-weight-semibold);
 	font-size: var(--rf-text-xl);
 	letter-spacing: var(--rf-tracking-tight);
 }
-.rf-header img,
 .rf-header p:first-child a > .rf-icon {
-	height: 2rem;
-	width: 2rem;
-}
-.rf-header img {
-	width: auto;
-}
-.rf-header p:first-child a > .rf-icon {
-	display: inline-block;
 	vertical-align: middle;
 	color: currentColor;
 }
@@ -76,8 +47,6 @@
 	color: var(--rf-color-text);
 }
 .rf-header__inner p ~ p a svg {
-	width: 1.1rem;
-	height: 1.1rem;
 	vertical-align: -0.15em;
 }
 .rf-page-content {
@@ -86,39 +55,8 @@
 
 	padding-top: 2.5rem;
 	padding-bottom: 4rem;
-	container-type: inline-size;
-}
-/* Markdoc wraps content in <article>; make it the grid container.
-   5-track named grid: full | wide | content | wide | full */
-.rf-page-content > article {
-	display: grid;
-	grid-template-columns:
-		[full-start] 1fr
-		[wide-start] minmax(0, var(--rf-wide-inset, 8rem))
-		[content-start] min(var(--rf-content-max), 100% - var(--rf-content-gutter) * 2)
-		[content-end] minmax(0, var(--rf-wide-inset, 8rem))
-		[wide-end] 1fr
-		[full-end];
-}
-.rf-page-content > article > * {
-	grid-column: content;
-}
-
-/* Width constraint via data-width attribute — narrower than content */
-.rf-page-content > article > [data-width="compact"] {
-	max-width: var(--rf-width-compact, 30rem);
-	margin-inline: auto;
-}
-.rf-page-content > article > [data-width="narrow"] {
-	max-width: var(--rf-width-narrow, 40rem);
-	margin-inline: auto;
-}
-/* Width breakout via data-width attribute — wider than content */
-.rf-page-content > article > [data-width="wide"] {
-	grid-column: wide;
 }
 .rf-page-content > article > [data-width="full"] {
-	grid-column: full;
 	padding-inline: max(
 		var(--rf-content-gutter, 1.5rem),
 		calc((100% - var(--rf-content-max, 80rem)) / 2)
@@ -126,7 +64,6 @@
 }
 /* Tinted sections also break out to full width */
 .rf-page-content > article > :is([data-tint], [data-color-scheme]):not([data-width]) {
-	grid-column: full;
 	padding-inline: max(
 		var(--rf-content-gutter, 1.5rem),
 		calc((100% - var(--rf-content-max, 80rem)) / 2)
@@ -219,29 +156,18 @@
 	padding-bottom: 0;
 }
 
-@media (max-width: 768px) {
-	.rf-header__inner p ~ p {
-		display: none;
-	}
-}
-
 /* Site footer */
 .rf-footer {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
 	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 > * {
-	width: 100%;
-	max-width: 80rem;
-}
 .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,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,20 +22,12 @@
 	text-decoration: none;
 }
 .rf-docs-header p:first-child a {
-	display: inline-flex;
-	align-items: center;
 	gap: 0.5rem;
 	font-weight: var(--rf-weight-semibold);
 	font-size: var(--rf-text-xl);
 	letter-spacing: var(--rf-tracking-tight);
 }
-.rf-docs-header img,
-.rf-docs-header p:first-child a > .rf-icon {
-	height: 2rem;
-	width: 2rem;
-}
 .rf-docs-header p:first-child a > .rf-icon {
-	display: inline-block;
 	vertical-align: middle;
 	color: currentColor;
 }
@@ -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,7 +97,6 @@ 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);
@@ -222,9 +109,6 @@ html:has(.rf-docs-header) {
 	 * 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;
 }
@@ -241,45 +125,9 @@ html:has(.rf-docs-header) {
 }
 
 /* ---- 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;
 	}
 }
+
+}