@refrakt-md/lumina 0.4.0 → 0.5.0

package/styles/layouts/blog.css

@@ -0,0 +1,255 @@
+/* Blog layout */
+
+/* ---- Header ---- */
+.rf-blog-header {
+	border-bottom: 1px solid var(--rf-color-border);
+}
+.rf-blog-header__inner {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0.875rem 1.5rem;
+}
+.rf-blog-header p {
+	margin: 0;
+	line-height: 1;
+}
+.rf-blog-header a {
+	display: inline-block;
+	color: inherit;
+	text-decoration: none;
+}
+.rf-blog-header a:hover {
+	text-decoration: none;
+}
+.rf-blog-header img {
+	display: block;
+	height: 1.5rem;
+	width: auto;
+}
+.rf-blog-header__inner p ~ p {
+	font-size: 0.85rem;
+}
+.rf-blog-header__inner p ~ p a {
+	margin-left: 1.5rem;
+	color: var(--rf-color-muted);
+}
+.rf-blog-header__inner p ~ p a:hover {
+	color: var(--rf-color-text);
+}
+
+/* ---- 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: 2.25rem;
+	font-weight: 800;
+	line-height: 1.15;
+	letter-spacing: -0.02em;
+	margin: 0 0 1rem;
+	color: var(--rf-color-text);
+}
+.rf-blog-index__body {
+	margin-bottom: 2rem;
+	line-height: 1.8;
+	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);
+	text-decoration: none;
+	color: inherit;
+	transition: border-color 0.15s, box-shadow 0.15s;
+}
+.rf-blog-card:hover {
+	border-color: var(--rf-color-text);
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+	text-decoration: none;
+}
+.rf-blog-card__title {
+	font-size: 1.35rem;
+	font-weight: 700;
+	margin: 0 0 0.5rem;
+	color: var(--rf-color-text);
+}
+.rf-blog-card__meta {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	font-size: 0.85rem;
+	color: var(--rf-color-muted);
+	margin-bottom: 0.5rem;
+}
+.rf-blog-card__author::before {
+	content: '\00b7';
+	margin-right: 0.75rem;
+}
+.rf-blog-card__desc {
+	margin: 0 0 0.75rem;
+	font-size: 0.95rem;
+	line-height: 1.6;
+	color: var(--rf-color-muted);
+}
+.rf-blog-card__tags {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+	margin-bottom: 0.75rem;
+}
+.rf-blog-card__link {
+	font-size: 0.85rem;
+	font-weight: 600;
+	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;
+	border-bottom: 1px solid var(--rf-color-border);
+}
+.rf-blog-article__title {
+	font-size: 2.25rem;
+	font-weight: 800;
+	line-height: 1.15;
+	letter-spacing: -0.02em;
+	margin: 0 0 1rem;
+	color: var(--rf-color-text);
+}
+.rf-blog-article__meta {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	font-size: 0.9rem;
+	color: var(--rf-color-muted);
+}
+.rf-blog-article__meta time {
+	font-weight: 500;
+}
+.rf-blog-article__author::before {
+	content: '\00b7';
+	margin-right: 0.75rem;
+}
+.rf-blog-article__tags {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 0.5rem;
+	margin-top: 0.75rem;
+}
+.rf-blog-article__tag {
+	font-size: 0.75rem;
+	font-weight: 500;
+	padding: 0.2rem 0.6rem;
+	border-radius: 9999px;
+	background: var(--rf-color-surface);
+	color: var(--rf-color-muted);
+	border: 1px solid var(--rf-color-border);
+}
+
+/* ---- Article body typography ---- */
+.rf-blog-article__body {
+	line-height: 1.8;
+}
+.rf-blog-article__body h2 {
+	margin-top: 2.5rem;
+}
+.rf-blog-article__body h3 {
+	margin-top: 2rem;
+}
+.rf-blog-article__body p {
+	margin-bottom: 1.25rem;
+}
+.rf-blog-article__body img {
+	border-radius: var(--rf-radius-md);
+	margin: 1.5rem 0;
+}
+
+/* ---- Sidebar ---- */
+.rf-blog-sidebar {
+	position: sticky;
+	top: 2.5rem;
+	font-size: 0.85rem;
+	color: var(--rf-color-muted);
+}
+.rf-blog-sidebar h2,
+.rf-blog-sidebar h3,
+.rf-blog-sidebar h4 {
+	font-size: 0.75rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--rf-color-muted);
+	margin-top: 0;
+	margin-bottom: 0.5rem;
+}
+.rf-blog-sidebar ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+.rf-blog-sidebar li {
+	padding: 0.25rem 0;
+}
+.rf-blog-sidebar a {
+	color: var(--rf-color-muted);
+	text-decoration: none;
+}
+.rf-blog-sidebar a:hover {
+	color: var(--rf-color-text);
+}
+
+/* ---- Footer ---- */
+.rf-blog-footer {
+	border-top: 1px solid var(--rf-color-border);
+	padding: 2rem 1.5rem;
+	text-align: center;
+	font-size: 0.85rem;
+	color: var(--rf-color-muted);
+}
+
+/* ---- 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: 1.75rem;
+	}
+	.rf-blog-sidebar {
+		position: static;
+		border-top: 1px solid var(--rf-color-border);
+		padding-top: 1.5rem;
+	}
+}

package/styles/layouts/default.css

@@ -25,14 +25,14 @@
 	height: 1.5rem;
 	width: auto;
 }
-.rf-header__inner p:last-child:not(:first-child) {
+.rf-header__inner p ~ p {
 	font-size: 0.85rem;
 }
-.rf-header__inner p:last-child:not(:first-child) a {
+.rf-header__inner p ~ p a {
 	margin-left: 1.5rem;
 	color: var(--rf-color-muted);
 }
-.rf-header__inner p:last-child:not(:first-child) a:hover {
+.rf-header__inner p ~ p a:hover {
 	color: var(--rf-color-text);
 }
 .rf-page-content {
@@ -42,4 +42,12 @@
 	margin: 0 auto;
 	padding-left: 1.5rem;
 	padding-right: 1.5rem;
+	--rf-content-padding: 1.5rem;
+	container-type: inline-size;
+}
+
+@media (max-width: 768px) {
+	.rf-header__inner p ~ p {
+		display: none;
+	}
 }

package/styles/layouts/docs.css

@@ -1,11 +1,13 @@
 /* Docs layout */
+
+/* ---- Fixed header ---- */
 .rf-docs-header {
 	position: fixed;
 	top: 0;
 	left: 0;
 	right: 0;
 	z-index: 10;
-	background: var(--rf-color-bg);
+	background: var(--rf-color-bg, #fff);
 	border-bottom: 1px solid var(--rf-color-border);
 }
 .rf-docs-header__inner {
@@ -31,17 +33,18 @@
 	height: 1.5rem;
 	width: auto;
 }
-.rf-docs-header__inner p:last-child:not(:first-child) {
+.rf-docs-header__inner p ~ p {
 	font-size: 0.85rem;
 }
-.rf-docs-header__inner p:last-child:not(:first-child) a {
+.rf-docs-header__inner p ~ p a {
 	margin-left: 1.5rem;
 	color: var(--rf-color-muted);
 }
-.rf-docs-header__inner p:last-child:not(:first-child) a:hover {
+.rf-docs-header__inner p ~ p a:hover {
 	color: var(--rf-color-text);
 }
-/* Sidebar */
+
+/* ---- Fixed sidebar ---- */
 .rf-docs-sidebar {
 	position: fixed;
 	left: 0;
@@ -51,16 +54,18 @@
 	overflow-y: auto;
 	padding: 1.5rem;
 	border-right: 1px solid var(--rf-color-border);
-	background: var(--rf-color-bg);
+	background: var(--rf-color-bg, #fff);
 	z-index: 5;
 }
 .rf-docs-sidebar::-webkit-scrollbar {
 	width: 0;
 }
-/* Content area */
+
+/* ---- Content area ---- */
 .rf-docs-content {
 	padding-top: 5rem;
 	padding-bottom: 4rem;
+	container-type: inline-size;
 }
 .rf-docs-content--has-nav {
 	margin-left: 240px;
@@ -69,18 +74,66 @@
 	max-width: 60rem;
 	margin: 0 auto;
 	padding: 0 2.5rem;
+	--rf-content-padding: 2.5rem;
 }
-/* Mobile */
+
+/* ---- 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);
+}
+.rf-docs-toolbar__hamburger {
+	background: none;
+	border: none;
+	padding: 0.25rem;
+	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;
+	color: var(--rf-color-muted);
+	min-width: 0;
+	overflow: hidden;
+	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: 500;
+}
+
+/* ---- Mobile overrides ---- */
 @media (max-width: 768px) {
 	.rf-docs-header {
 		position: static;
 	}
+	.rf-docs-header__inner p ~ p {
+		display: none;
+	}
+	.rf-docs-toolbar {
+		display: flex;
+	}
+	.rf-mobile-panel--nav {
+		top: 5.5rem;
+	}
 	.rf-docs-sidebar {
-		position: static;
-		width: auto;
-		border-right: none;
-		border-bottom: 1px solid var(--rf-color-border);
-		padding: 1rem 1.5rem;
+		display: none;
 	}
 	.rf-docs-content {
 		padding-top: 2rem;
@@ -90,5 +143,6 @@
 	}
 	.rf-docs-content__inner {
 		padding: 0 1.5rem;
+		--rf-content-padding: 1.5rem;
 	}
 }

package/styles/layouts/mobile.css

@@ -0,0 +1,84 @@
+/* Shared mobile UI — menu button, fullscreen panel, close */
+
+/* ---- Mobile menu button (hidden on desktop) ---- */
+.rf-mobile-menu-btn {
+	display: none;
+	background: none;
+	border: none;
+	padding: 0.25rem;
+	cursor: pointer;
+	color: var(--rf-color-muted);
+	line-height: 0;
+}
+.rf-mobile-menu-btn:hover {
+	color: var(--rf-color-text);
+}
+
+/* ---- Fullscreen mobile panel ---- */
+.rf-mobile-panel {
+	display: none;
+	position: fixed;
+	inset: 0;
+	z-index: 100;
+	background: var(--rf-color-bg, #fff);
+	overflow-y: auto;
+	-webkit-overflow-scrolling: touch;
+}
+.rf-mobile-panel__header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0.875rem 1.5rem;
+	border-bottom: 1px solid var(--rf-color-border);
+}
+.rf-mobile-panel__title {
+	font-size: 0.85rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--rf-color-muted);
+}
+.rf-mobile-panel__close {
+	background: none;
+	border: none;
+	padding: 0.25rem;
+	cursor: pointer;
+	color: var(--rf-color-muted);
+	line-height: 0;
+}
+.rf-mobile-panel__close:hover {
+	color: var(--rf-color-text);
+}
+.rf-mobile-panel__nav {
+	padding: 1.5rem;
+}
+.rf-mobile-panel__nav p {
+	margin: 0;
+}
+.rf-mobile-panel__nav img {
+	display: none;
+}
+.rf-mobile-panel__nav a {
+	display: block;
+	padding: 0.75rem 0;
+	font-size: 1.1rem;
+	color: var(--rf-color-text);
+	text-decoration: none;
+	border-bottom: 1px solid var(--rf-color-border);
+}
+.rf-mobile-panel__nav a:hover {
+	color: var(--rf-color-primary, var(--rf-color-text));
+	text-decoration: none;
+}
+.rf-mobile-panel__body {
+	padding: 1rem 1.5rem;
+}
+
+@media (max-width: 768px) {
+	.rf-mobile-menu-btn {
+		display: block;
+	}
+	.rf-mobile-panel {
+		display: block;
+	}
+}

package/styles/runes/bento.css

@@ -4,6 +4,8 @@
 }
 .rf-bento__grid {
 	display: grid;
+	grid-template-columns: repeat(var(--bento-columns, 4), 1fr);
+	gap: var(--bento-gap, 1rem);
 }
 .rf-bento-cell {
 	border: 1px solid var(--rf-color-border);

package/styles/runes/codegroup.css

@@ -31,6 +31,11 @@
 	font-size: 0.8rem;
 	opacity: 0.7;
 }
+.rf-codegroup ul {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
 .rf-codegroup__tabs {
 	display: flex;
 	background: rgba(255, 255, 255, 0.03);
@@ -58,7 +63,7 @@
 	color: rgba(255, 255, 255, 0.95);
 	border-bottom-color: var(--rf-color-primary);
 }
-.rf-codegroup__content pre {
+.rf-codegroup pre {
 	margin: 0;
 	padding: 1rem 1.25rem;
 	overflow-x: auto;
@@ -66,7 +71,7 @@
 	border: none;
 	border-radius: 0;
 }
-.rf-codegroup__content code {
+.rf-codegroup code {
 	font-family: var(--rf-font-mono);
 	font-size: 0.85rem;
 }

package/styles/runes/design-context.css

@@ -0,0 +1,25 @@
+/* Design Context — unified token card wrapper */
+.rf-design-context {
+	margin: 1.5rem 0;
+	border: 1px solid var(--rf-color-border, #e5e7eb);
+	border-radius: 0.75rem;
+	overflow: hidden;
+}
+.rf-design-context__title {
+	font-size: 1.125rem;
+	font-weight: 600;
+	padding: 1rem 1.25rem;
+	border-bottom: 1px solid var(--rf-color-border, #e5e7eb);
+	background: var(--rf-color-bg-muted, #f9fafb);
+}
+.rf-design-context__sections {
+	display: flex;
+	flex-direction: column;
+}
+.rf-design-context__sections > * {
+	padding: 1.25rem;
+	margin: 0;
+}
+.rf-design-context__sections > * + * {
+	border-top: 1px dashed var(--rf-color-border, #e5e7eb);
+}

package/styles/runes/feature.css

@@ -2,48 +2,54 @@
 .rf-feature {
 	padding: 2.5rem 0 2rem;
 }
-.rf-feature__main {
+.rf-feature__body {
 	display: contents;
 }
 .rf-feature h2 {
 	text-align: center;
 	margin-bottom: 2rem;
 }
+.rf-feature dl {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+	gap: 1.5rem;
+	margin: 0;
+}
 .rf-feature--split {
 	display: grid;
 	align-items: center;
+	grid-template-columns: 1fr 1fr;
 	gap: 3rem;
 }
+.rf-feature--split .rf-feature__body {
+	display: block;
+}
 .rf-feature--split h2 {
 	text-align: left;
 }
 .rf-feature--split dl {
 	display: block;
 }
-.rf-feature dl {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-	gap: 1.5rem;
-	margin: 0;
+.rf-feature--split .rf-feature-definition {
+	border: none;
+	background: none;
+	padding: 0.75rem 0;
+}
+.rf-feature--mirror .rf-feature__showcase {
+	order: -1;
 }
 .rf-feature-definition {
 	padding: 1.75rem;
 	border-radius: var(--rf-radius-md);
 	border: 1px solid var(--rf-color-border);
 	background: var(--rf-color-bg);
-	box-shadow: var(--rf-shadow-sm);
-	transition: box-shadow 200ms ease, border-color 200ms ease, transform 200ms ease;
-}
-.rf-feature-definition:hover {
-	box-shadow: var(--rf-shadow-lg);
-	border-color: var(--rf-color-surface-active);
-	transform: translateY(-2px);
 }
 .rf-feature-definition dt {
 	font-weight: 650;
 	font-size: 1.05rem;
-	margin-bottom: 0.5rem;
+	margin-bottom: 0.75rem;
 	letter-spacing: -0.01em;
+	color: var(--rf-color-text);
 }
 .rf-feature-definition dd {
 	margin: 0;

package/styles/runes/form.css

@@ -11,8 +11,7 @@
 	flex-direction: column;
 	gap: 1.25rem;
 }
-.rf-form meta,
-.rf-form span[property] { display: none; }
+.rf-form meta { display: none; }
 /* Honeypot */
 .rf-form__hp {
 	position: absolute;

package/styles/runes/grid.css

@@ -1,13 +1,31 @@
 /* Grid */
 .rf-grid {
+	margin: 1.5rem 0;
+}
+.rf-grid [data-layout="grid"] {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 	gap: 1.5rem;
-	margin: 1.5rem 0;
-}
-.rf-grid__item p:first-child {
-	margin-top: 0;
-}
-.rf-grid__item p:last-child {
-	margin-bottom: 0;
 }
+/* Explicit column counts override auto-fit */
+.rf-grid [data-columns="1"] { grid-template-columns: 1fr; }
+.rf-grid [data-columns="2"] { grid-template-columns: repeat(2, 1fr); }
+.rf-grid [data-columns="3"] { grid-template-columns: repeat(3, 1fr); }
+.rf-grid [data-columns="4"] { grid-template-columns: repeat(4, 1fr); }
+.rf-grid [data-columns="5"] { grid-template-columns: repeat(5, 1fr); }
+.rf-grid [data-columns="6"] { grid-template-columns: repeat(6, 1fr); }
+/* Flow */
+.rf-grid [data-flow="column"] { grid-auto-flow: column; }
+.rf-grid [data-flow="dense"] { grid-auto-flow: dense; }
+.rf-grid [data-flow="row dense"] { grid-auto-flow: row dense; }
+.rf-grid [data-flow="column dense"] { grid-auto-flow: column dense; }
+/* Spans */
+.rf-grid [data-colspan="2"] { grid-column: span 2; }
+.rf-grid [data-colspan="3"] { grid-column: span 3; }
+.rf-grid [data-colspan="4"] { grid-column: span 4; }
+.rf-grid [data-rowspan="2"] { grid-row: span 2; }
+.rf-grid [data-rowspan="3"] { grid-row: span 3; }
+.rf-grid [data-rowspan="4"] { grid-row: span 4; }
+/* Item styling */
+.rf-grid [data-name="item"] p:first-child { margin-top: 0; }
+.rf-grid [data-name="item"] p:last-child { margin-bottom: 0; }