@refrakt-md/lumina 0.22.0 → 0.24.0

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,7 +40,6 @@
 .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: var(--rf-text-2xl);
 	font-weight: var(--rf-weight-bold);
@@ -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,3 +1,4 @@
+@layer skin {
 /* On This Page — TOC sidebar navigation */
 
 .rf-on-this-page {
@@ -14,7 +15,6 @@
 }
 
 .rf-on-this-page__list {
-	list-style: none;
 	margin: 0;
 	padding: 0;
 }
@@ -28,7 +28,6 @@
 }
 
 .rf-on-this-page__item a {
-	display: block;
 	padding: 0.25rem 0.75rem;
 	color: var(--rf-color-muted, #64748b);
 	text-decoration: none;
@@ -46,3 +45,5 @@
 .rf-on-this-page__item[data-active] a {
 	color: var(--rf-color-primary);
 }
+
+}

package/styles/layouts/plan.css

@@ -1,18 +1,13 @@
+@layer skin {
 /* Plan layout */
 
 /* ---- Dashboard grid ---- */
 
 .rf-plan-dashboard {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
 	gap: var(--rf-spacing-lg, 1.5rem);
 	padding: var(--rf-spacing-lg, 1.5rem);
 }
 
-.rf-plan-dashboard__section {
-	min-width: 0;
-}
-
 .rf-plan-dashboard__section-title {
 	font-size: var(--rf-text-lg);
 	font-weight: var(--rf-weight-semibold);
@@ -25,14 +20,9 @@
 /* ---- Fixed sidebar ---- */
 
 .rf-plan-sidebar {
-	position: fixed;
-	inset-block: 0;
-	inset-inline-start: 0;
-	width: var(--plan-sidebar-width, 240px);
 	background: var(--rf-color-bg, #fff);
 	border-inline-end: 1px solid var(--rf-color-border, #dee2e6);
 	padding: var(--rf-spacing-lg, 1.5rem) var(--rf-spacing-md, 1rem);
-	overflow-y: auto;
 }
 
 .rf-plan-sidebar::-webkit-scrollbar {
@@ -40,9 +30,6 @@
 }
 
 .rf-plan-sidebar__title {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
 	font-size: var(--rf-text-lg);
 	font-weight: var(--rf-weight-bold);
 	margin-block-end: var(--rf-spacing-lg, 1.5rem);
@@ -50,9 +37,6 @@
 }
 
 .rf-plan-sidebar__search-trigger {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
 	padding: 0.25rem;
 	border: 1px solid var(--rf-color-border, #dee2e6);
 	border-radius: var(--rf-radius-sm, 4px);
@@ -66,11 +50,6 @@
 	color: var(--rf-color-text, #212529);
 	background: var(--rf-color-surface-hover, #f1f3f5);
 }
-.rf-plan-sidebar__search-trigger svg {
-	width: 16px;
-	height: 16px;
-	flex-shrink: 0;
-}
 
 .rf-plan-sidebar__group {
 	margin-block-end: var(--rf-spacing-lg, 1.5rem);
@@ -91,10 +70,6 @@
 }
 
 .rf-plan-sidebar__status-header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	width: 100%;
 	padding: 0.25rem 0.5rem;
 	border: none;
 	border-radius: var(--rf-radius-sm, 0.25rem);
@@ -111,19 +86,12 @@
 }
 
 .rf-plan-sidebar__status-header::before {
-	content: '\25B8';
-	display: inline-block;
 	margin-inline-end: 0.25rem;
 	transition: transform 0.15s ease;
 	font-size: 0.75em;
 }
 
-.rf-plan-sidebar__status-header[aria-expanded="true"]::before {
-	transform: rotate(90deg);
-}
-
 .rf-plan-sidebar__status-label {
-	flex: 1;
 	font-weight: var(--rf-weight-medium);
 }
 
@@ -134,7 +102,6 @@
 	background: var(--rf-color-surface-active, #f1f3f5);
 	padding: 0 0.375rem;
 	border-radius: var(--rf-radius-full, 9999px);
-	min-width: 1.25rem;
 	text-align: center;
 }
 
@@ -142,12 +109,7 @@
 	padding-inline-start: var(--rf-spacing-sm, 0.5rem);
 }
 
-.rf-plan-sidebar__status-items[hidden] {
-	display: none;
-}
-
 .rf-plan-sidebar__link {
-	display: block;
 	padding: 0.25rem 0.5rem;
 	border-radius: var(--rf-radius-sm, 0.25rem);
 	color: var(--rf-color-text, #212529);
@@ -161,14 +123,11 @@
 }
 
 .rf-plan-sidebar__link--dashboard {
-	display: flex;
-	align-items: center;
 	gap: 0.375rem;
 	margin-block-end: var(--rf-spacing-md, 1rem);
 }
 
 .rf-plan-sidebar__dashboard-icon {
-	flex-shrink: 0;
 	opacity: 0.6;
 }
 
@@ -192,17 +151,9 @@
 	border-left: 2px solid var(--rf-color-danger, #ff6b6b);
 }
 
-.rf-plan-sidebar__status-link {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-
 .rf-plan-sidebar__blocker-icon {
-	margin-left: auto;
 	font-size: var(--rf-text-xs);
 	color: var(--rf-color-danger, #ff6b6b);
-	flex-shrink: 0;
 }
 
 /* Views section in sidebar */
@@ -221,8 +172,6 @@
 }
 
 .rf-plan-sidebar__link .rf-plan-sidebar__view-label {
-	flex: 1;
-	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
@@ -234,66 +183,31 @@
 	background: var(--rf-color-surface-active, #f1f3f5);
 	padding: 0 0.375rem;
 	border-radius: var(--rf-radius-full, 9999px);
-	min-width: 1.25rem;
 	text-align: center;
 }
 
-.rf-plan-sidebar__group[data-type="views"] .rf-plan-sidebar__link {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-
 /* ---- Content area ---- */
 
 .rf-plan-main {
-	margin-inline-start: var(--plan-sidebar-width, 240px);
 	padding: var(--rf-spacing-xl, 2rem);
 }
 
 /* Inner wrapper: flex layout when TOC is present */
 .rf-plan-main__inner--has-toc {
-	display: flex;
 	gap: var(--rf-spacing-xl, 2rem);
-	max-width: calc(60rem + 200px + 2rem);
-	margin: 0 auto;
-}
-.rf-plan-main__inner--has-toc .rf-plan-main__body {
-	flex: 1;
-	min-width: 0;
-	max-width: 60rem;
 }
 
 .rf-plan-main__body {
-	max-width: 60rem;
-	margin: 0 auto;
 	padding: 0 2.5rem;
 }
 
-/* ---- "On this page" TOC aside ---- */
-
-.rf-plan-toc {
-	width: 200px;
-	flex-shrink: 0;
-	position: sticky;
-	top: var(--rf-spacing-lg, 1.5rem);
-	align-self: flex-start;
-	max-height: calc(100vh - var(--rf-spacing-xl, 2rem) * 2);
-	overflow-y: auto;
-}
-
 /* ---- Mobile toolbar (hidden on desktop) ---- */
 
 .rf-plan-toolbar {
-	display: none;
-	align-items: center;
 	gap: 0.75rem;
 	padding: 0.625rem 1rem;
 	border-block-end: 1px solid var(--rf-color-border, #dee2e6);
 	background: var(--rf-color-bg, #fff);
-	position: sticky;
-	top: 0;
-	z-index: 100;
 }
 
 .rf-plan-toolbar__hamburger {
@@ -303,7 +217,6 @@
 	cursor: pointer;
 	color: var(--rf-color-muted, #6c757d);
 	line-height: 0;
-	flex-shrink: 0;
 }
 
 .rf-plan-toolbar__hamburger:hover {
@@ -314,8 +227,6 @@
 	font-size: var(--rf-text-sm);
 	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-text, #212529);
-	flex: 1;
-	min-width: 0;
 }
 
 .rf-plan-toolbar__section-nav-toggle {
@@ -325,7 +236,6 @@
 	cursor: pointer;
 	color: var(--rf-color-muted, #6c757d);
 	line-height: 0;
-	flex-shrink: 0;
 }
 
 .rf-plan-toolbar__section-nav-toggle:hover {
@@ -335,25 +245,14 @@
 /* ---- Section nav dropdown ---- */
 
 .rf-section-nav {
-	display: none;
-	position: absolute;
-	top: 100%;
-	right: 0.5rem;
-	min-width: 14rem;
 	background: var(--rf-color-bg, #fff);
 	border: 1px solid var(--rf-color-border, #dee2e6);
 	border-radius: var(--rf-radius-md, 0.5rem);
 	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
-	z-index: 200;
 	padding: 0.25rem 0;
 }
 
-.rf-section-nav[data-open] {
-	display: block;
-}
-
 .rf-section-nav__list {
-	list-style: none;
 	margin: 0;
 	padding: 0;
 }
@@ -363,7 +262,6 @@
 }
 
 .rf-section-nav__link {
-	display: block;
 	padding: 0.5rem 1rem;
 	color: var(--rf-color-text, #212529);
 	text-decoration: none;
@@ -387,40 +285,10 @@
 /* ---- Responsive ---- */
 
 /* Hide TOC on medium screens */
-@media (max-width: 64rem) {
-	.rf-plan-toc {
-		display: none;
-	}
-	.rf-plan-main__inner--has-toc {
-		display: block;
-	}
-}
 
 @media (max-width: 48rem) {
-	/* Offset scroll targets for sticky toolbar */
-	html:has(.rf-plan-toolbar) {
-		scroll-padding-top: 3.5rem;
-	}
-
-	.rf-plan-toolbar {
-		display: flex;
-	}
-
-	.rf-plan-sidebar {
-		display: none;
-	}
-
-	/* Search trigger is in the toolbar on mobile; hide the sidebar copy */
-	.rf-mobile-panel .rf-plan-sidebar__search-trigger {
-		display: none;
-	}
-
-	.rf-layout-plan .rf-mobile-panel--nav {
-		top: 3.0625rem;
-	}
 
 	.rf-plan-main {
-		margin-inline-start: 0;
 		padding: var(--rf-spacing-md, 1rem);
 	}
 
@@ -429,7 +297,8 @@
 	}
 
 	.rf-plan-dashboard {
-		grid-template-columns: 1fr;
 		padding: var(--rf-spacing-md, 1rem);
 	}
 }
+
+}

package/styles/layouts/search.css

@@ -1,7 +1,6 @@
+@layer skin {
 /* Search trigger button */
 .rf-search-trigger {
-	display: inline-flex;
-	align-items: center;
 	gap: 0.5rem;
 	padding: 0.375rem 0.625rem 0.375rem 0.5rem;
 	border: 1px solid var(--rf-color-border);
@@ -14,24 +13,13 @@
 	transition: border-color 0.15s, color 0.15s, background 0.15s;
 	line-height: 1;
 	white-space: nowrap;
-	flex-shrink: 0;
 }
 .rf-search-trigger:hover {
 	border-color: var(--rf-color-primary);
 	color: var(--rf-color-text);
 	background: var(--rf-color-surface-hover);
 }
-.rf-search-trigger svg {
-	width: 16px;
-	height: 16px;
-	flex-shrink: 0;
-}
-.rf-search-trigger__label {
-	pointer-events: none;
-}
 .rf-search-trigger__kbd {
-	display: inline-flex;
-	align-items: center;
 	padding: 0.125rem 0.375rem;
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-sm);
@@ -44,43 +32,28 @@
 
 /* Search dialog */
 .rf-search-dialog {
-	position: fixed;
-	top: 15vh;
-	left: 50%;
-	transform: translateX(-50%);
-	width: min(560px, calc(100vw - 2rem));
-	max-height: 70vh;
 	margin: 0;
 	padding: 0;
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-lg);
 	background: var(--rf-color-bg);
 	box-shadow: var(--rf-shadow-lg);
-	overflow: hidden;
 	font-family: var(--rf-font-sans);
 }
-.rf-search-dialog[open] {
-	display: flex;
-	flex-direction: column;
-}
 .rf-search-dialog::backdrop {
 	background: rgba(0, 0, 0, 0.4);
 }
 
 /* Dialog header */
 .rf-search-dialog__header {
-	display: flex;
-	align-items: center;
 	gap: 0.75rem;
 	padding: 0.875rem 1rem;
 	border-bottom: 1px solid var(--rf-color-border);
 }
 .rf-search-dialog__icon {
-	flex-shrink: 0;
 	color: var(--rf-color-muted);
 }
 .rf-search-dialog__input {
-	flex: 1;
 	border: none;
 	outline: none;
 	background: transparent;
@@ -91,13 +64,7 @@
 .rf-search-dialog__input::placeholder {
 	color: var(--rf-color-muted);
 }
-/* Hide native search clear button */
-.rf-search-dialog__input::-webkit-search-cancel-button {
-	display: none;
-}
 .rf-search-dialog__esc {
-	display: inline-flex;
-	align-items: center;
 	padding: 0.125rem 0.375rem;
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-sm);
@@ -105,14 +72,6 @@
 	font-family: var(--rf-font-sans);
 	font-size: var(--rf-text-xs);
 	color: var(--rf-color-muted);
-	flex-shrink: 0;
-}
-
-/* Dialog body */
-.rf-search-dialog__body {
-	flex: 1;
-	overflow-y: auto;
-	overscroll-behavior: contain;
 }
 
 /* Results */
@@ -120,7 +79,6 @@
 	padding: 0.5rem;
 }
 .rf-search-result {
-	display: block;
 	padding: 0.625rem 0.75rem;
 	border-radius: var(--rf-radius-md);
 	text-decoration: none;
@@ -132,14 +90,12 @@
 	background: var(--rf-color-surface-hover);
 }
 .rf-search-result__title {
-	display: block;
 	font-weight: var(--rf-weight-medium);
 	font-size: var(--rf-text-sm);
 	line-height: var(--rf-leading-snug);
 	margin-bottom: 0.125rem;
 }
 .rf-search-result__excerpt {
-	display: block;
 	font-size: var(--rf-text-xs);
 	line-height: var(--rf-leading-normal);
 	color: var(--rf-color-muted);
@@ -161,8 +117,6 @@
 
 /* Footer */
 .rf-search-dialog__footer {
-	display: flex;
-	align-items: center;
 	gap: 1rem;
 	padding: 0.5rem 1rem;
 	border-top: 1px solid var(--rf-color-border);
@@ -170,10 +124,6 @@
 	color: var(--rf-color-muted);
 }
 .rf-search-dialog__footer kbd {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	min-width: 1.25rem;
 	padding: 0 0.25rem;
 	border: 1px solid var(--rf-color-border);
 	border-radius: 3px;
@@ -185,29 +135,14 @@
 
 /* Mobile */
 @media (max-width: 768px) {
-	.rf-search-trigger__label,
-	.rf-search-trigger__kbd {
-		display: none;
-	}
 	.rf-search-trigger {
 		padding: 0.375rem;
 		border-radius: var(--rf-radius-sm);
 	}
 	.rf-search-dialog[open] {
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		transform: none;
-		width: 100%;
-		height: 100vh;
-		height: 100dvh;
-		max-height: 100vh;
-		max-height: 100dvh;
 		border-radius: 0;
 		border: none;
 	}
-	.rf-search-dialog__footer {
-		display: none;
-	}
+}
+
 }