@refrakt-md/lumina 0.21.0 → 0.23.0

package/styles/layouts/plan.css

@@ -1,21 +1,16 @@
+@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: 1.125rem;
-	font-weight: 600;
+	font-size: var(--rf-text-lg);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-text, #212529);
 	margin-block-end: var(--rf-spacing-md, 1rem);
 	padding-block-end: var(--rf-spacing-sm, 0.5rem);
@@ -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,19 +30,13 @@
 }
 
 .rf-plan-sidebar__title {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	font-size: 1.125rem;
-	font-weight: 700;
+	font-size: var(--rf-text-lg);
+	font-weight: var(--rf-weight-bold);
 	margin-block-end: var(--rf-spacing-lg, 1.5rem);
 	color: var(--rf-color-text, #212529);
 }
 
 .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,21 +50,16 @@
 	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);
 }
 
 .rf-plan-sidebar__group-title {
-	font-size: 0.8125rem;
-	font-weight: 600;
+	font-size: var(--rf-text-sm);
+	font-weight: var(--rf-weight-semibold);
 	text-transform: uppercase;
-	letter-spacing: 0.05em;
+	letter-spacing: var(--rf-tracking-wider);
 	color: var(--rf-color-muted, #6c757d);
 	margin-block-end: var(--rf-spacing-sm, 0.5rem);
 }
@@ -91,16 +70,12 @@
 }
 
 .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);
 	background: transparent;
 	color: var(--rf-color-muted, #6c757d);
-	font-size: 0.8125rem;
+	font-size: var(--rf-text-sm);
 	cursor: pointer;
 	text-align: start;
 	transition: background 0.15s ease;
@@ -111,30 +86,22 @@
 }
 
 .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: 500;
+	font-weight: var(--rf-weight-medium);
 }
 
 .rf-plan-sidebar__status-count {
-	font-size: 0.75rem;
-	font-weight: 600;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-muted, #6c757d);
 	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,17 +109,12 @@
 	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);
 	text-decoration: none;
-	font-size: 0.8125rem;
+	font-size: var(--rf-text-sm);
 	transition: background 0.15s ease;
 }
 
@@ -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;
 }
 
@@ -179,7 +138,7 @@
 .rf-plan-sidebar__link--active {
 	background: var(--rf-color-info-bg, #e7f5ff);
 	color: var(--rf-color-info, #339af0);
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 }
 
 .rf-plan-sidebar__link--focused {
@@ -192,25 +151,17 @@
 	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: 0.75rem;
+	font-size: var(--rf-text-xs);
 	color: var(--rf-color-danger, #ff6b6b);
-	flex-shrink: 0;
 }
 
 /* Views section in sidebar */
 .rf-plan-sidebar__view-header {
-	font-size: 0.6875rem;
-	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, #6c757d);
 	padding: 0.25rem 0.5rem;
 	margin-block-start: 0.25rem;
@@ -221,79 +172,42 @@
 }
 
 .rf-plan-sidebar__link .rf-plan-sidebar__view-label {
-	flex: 1;
-	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
 .rf-plan-sidebar__link .rf-plan-sidebar__view-count {
-	font-size: 0.6875rem;
-	font-weight: 600;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-muted, #6c757d);
 	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 {
@@ -311,11 +224,9 @@
 }
 
 .rf-plan-toolbar__title {
-	font-size: 0.875rem;
-	font-weight: 600;
+	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,12 +262,11 @@
 }
 
 .rf-section-nav__link {
-	display: block;
 	padding: 0.5rem 1rem;
 	color: var(--rf-color-text, #212529);
 	text-decoration: none;
-	font-size: 0.8125rem;
-	line-height: 1.4;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-snug);
 }
 
 .rf-section-nav__link:hover {
@@ -381,46 +279,16 @@
 
 .rf-section-nav__item[data-active] .rf-section-nav__link {
 	color: var(--rf-color-info, #339af0);
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 }
 
 /* ---- 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,118 +1,77 @@
+@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);
 	border-radius: var(--rf-radius-full);
 	background: var(--rf-color-surface);
 	color: var(--rf-color-muted);
-	font-size: 0.8rem;
+	font-size: var(--rf-text-xs);
 	font-family: var(--rf-font-sans);
 	cursor: pointer;
 	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);
 	background: var(--rf-color-bg);
 	font-family: var(--rf-font-sans);
-	font-size: 0.7rem;
-	line-height: 1.2;
+	font-size: var(--rf-text-xs);
+	line-height: var(--rf-leading-tight);
 	color: var(--rf-color-muted);
 }
 
 /* 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;
-	font-size: 1rem;
+	font-size: var(--rf-text);
 	font-family: var(--rf-font-sans);
 	color: var(--rf-color-text);
 }
 .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);
 	background: var(--rf-color-surface);
 	font-family: var(--rf-font-sans);
-	font-size: 0.7rem;
+	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,16 +90,14 @@
 	background: var(--rf-color-surface-hover);
 }
 .rf-search-result__title {
-	display: block;
-	font-weight: 500;
-	font-size: 0.875rem;
-	line-height: 1.4;
+	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: 0.8rem;
-	line-height: 1.5;
+	font-size: var(--rf-text-xs);
+	line-height: var(--rf-leading-normal);
 	color: var(--rf-color-muted);
 }
 .rf-search-result__excerpt mark {
@@ -155,59 +111,38 @@
 .rf-search-dialog__empty {
 	text-align: center;
 	padding: 2rem 1rem;
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
 
 /* Footer */
 .rf-search-dialog__footer {
-	display: flex;
-	align-items: center;
 	gap: 1rem;
 	padding: 0.5rem 1rem;
 	border-top: 1px solid var(--rf-color-border);
-	font-size: 0.7rem;
+	font-size: var(--rf-text-xs);
 	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;
 	background: var(--rf-color-surface);
 	font-family: var(--rf-font-sans);
-	font-size: 0.65rem;
-	line-height: 1.4;
+	font-size: var(--rf-text-xs);
+	line-height: var(--rf-leading-snug);
 }
 
 /* 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;
-	}
+}
+
 }