@refrakt-md/lumina 0.9.2 → 0.9.4

package/styles/runes/budget.css

@@ -1,15 +1,29 @@
 /* Budget */
-.rf-budget__header {
+.rf-budget__meta {
 	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 0.5rem;
+}
+.rf-budget__preamble {
 	margin-bottom: 1.5rem;
 }
-.rf-budget__title {
-	margin: 0 0 0.5rem;
-	font-size: 1.25rem;
-	font-weight: 700;
-	color: var(--rf-color-text);
+.rf-budget .rf-budget__eyebrow {
+	font-size: 0.8rem;
+	font-weight: 600;
+	letter-spacing: 0.06em;
+	text-transform: uppercase;
+	color: var(--rf-color-primary);
+	margin: 0 0 0.375rem;
+}
+.rf-budget__headline {
+	margin-top: 0;
+	margin-bottom: 0.25rem;
+}
+.rf-budget .rf-budget__blurb {
+	color: var(--rf-color-muted);
+	margin-bottom: 0;
+	max-width: 40rem;
 }
 
 /* Categories */

package/styles/runes/chart.css

@@ -2,6 +2,7 @@
 .rf-chart {
 	border-radius: var(--rf-radius-lg);
 	padding: 1.5rem;
+	margin: 0;
 }
 .rf-chart__title {
 	font-weight: 600;

package/styles/runes/codegroup.css

@@ -25,10 +25,11 @@
 .rf-codegroup__dot:nth-child(1) { background: #ef4444; }
 .rf-codegroup__dot:nth-child(2) { background: #f59e0b; }
 .rf-codegroup__dot:nth-child(3) { background: #22c55e; }
-.rf-codegroup__title {
+.rf-codegroup__title[data-section="title"] {
 	margin-left: 0.5rem;
 	font-family: var(--rf-font-mono);
 	font-size: 0.8rem;
+	font-weight: normal;
 	opacity: 0.7;
 }
 .rf-codegroup ul {
@@ -48,7 +49,7 @@
 	padding: 0.5rem 1rem;
 	font-size: 0.8rem;
 	font-family: var(--rf-font-mono);
-	color: rgba(255, 255, 255, 0.5);
+	color: rgba(255, 255, 255, 0.7);
 	background: none;
 	border: none;
 	border-bottom: 2px solid transparent;
@@ -56,12 +57,20 @@
 	transition: color 200ms ease, border-color 200ms ease;
 	white-space: nowrap;
 }
-.rf-codegroup__tab:hover {
+.rf-codegroup__tab:hover,
+.rf-codegroup button[data-state="inactive"]:hover {
 	color: rgba(255, 255, 255, 0.8);
 }
-.rf-codegroup__tab--active {
+.rf-codegroup__tab--active,
+.rf-codegroup button[data-state="active"] {
 	color: rgba(255, 255, 255, 0.95);
-	border-bottom-color: var(--rf-color-primary);
+	border-bottom-color: var(--rf-color-code-text);
+}
+.rf-codegroup button[data-state="inactive"] {
+	color: rgba(255, 255, 255, 0.7);
+}
+.rf-codegroup .rf-codeblock {
+	margin: 0;
 }
 .rf-codegroup pre {
 	margin: 0;

package/styles/runes/compare.css

@@ -33,6 +33,9 @@
 	background: var(--rf-color-surface);
 	border-bottom: 1px solid var(--rf-color-border);
 }
+.rf-compare .rf-codeblock {
+	margin: 0;
+}
 .rf-compare pre {
 	margin: 0;
 	border: none;

package/styles/runes/design-context.css

@@ -1,24 +1,21 @@
 /* Design Context — unified token card wrapper */
-.rf-design-context {
-	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);
+	font-size: 1.25rem;
+	font-weight: 700;
+	margin-bottom: 1rem;
 }
 .rf-design-context__sections {
 	display: flex;
 	flex-direction: column;
+	gap: 1.5rem;
 }
-.rf-design-context__sections > * {
-	padding: 1.25rem;
-	margin: 0;
-}
-.rf-design-context__sections > * + * {
-	border-top: 1px dashed var(--rf-color-border, #e5e7eb);
+
+/* Children inside design-context: remove card styling */
+.rf-palette--in-design-context,
+.rf-typography--in-design-context,
+.rf-spacing--in-design-context,
+.rf-swatch--in-design-context {
+	background: none;
+	border-radius: 0;
+	padding: 0;
 }

package/styles/runes/details.css

@@ -1,18 +1,14 @@
 /* Details */
 .rf-details {
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-md);
-	overflow: hidden;
 }
 .rf-details__summary {
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
-	padding: 0.75rem 1.25rem;
+	padding: 0.75rem 0;
 	font-weight: 600;
 	font-size: 0.925rem;
 	cursor: pointer;
-	background: var(--rf-color-surface);
 	user-select: none;
 	list-style: none;
 	transition: background-color 200ms ease;
@@ -20,7 +16,7 @@
 .rf-details__summary::-webkit-details-marker { display: none; }
 .rf-details__summary::marker { display: none; content: ''; }
 .rf-details__summary:hover {
-	background: var(--rf-color-surface-hover);
+	color: var(--rf-color-primary);
 }
 .rf-details__summary::after {
 	content: '▸';
@@ -33,8 +29,7 @@
 	transform: rotate(90deg);
 }
 .rf-details__body {
-	padding: 1rem 1.25rem;
-	border-top: 1px solid var(--rf-color-border);
+	padding: 0 0 1rem;
 	font-size: 0.925rem;
 	line-height: 1.65;
 }

package/styles/runes/diff.css

@@ -2,12 +2,13 @@
 .rf-diff {
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-lg);
-	overflow: hidden;
+	overflow-x: auto;
 	font-size: 0.875rem;
 }
 .rf-diff__split-container {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
+	min-width: 40rem;
 }
 .rf-diff__split-container .rf-diff__panel:first-child {
 	border-right: 1px solid var(--rf-color-border);
@@ -29,7 +30,7 @@
 }
 .rf-diff__code {
 	margin: 0;
-	padding: 0;
+	padding: var(--rf-spacing-sm) 0;
 	border: none;
 	border-radius: 0;
 	background: var(--rf-color-code-bg);
@@ -66,6 +67,9 @@
 }
 .rf-diff__line[data-type="remove"] .rf-diff__gutter-prefix { color: var(--rf-color-danger); }
 .rf-diff__line[data-type="add"] .rf-diff__gutter-prefix    { color: var(--rf-color-success); }
+.rf-diff .rf-codeblock {
+	margin: 0;
+}
 .rf-diff__line-content {
 	flex: 1;
 	white-space: pre;

package/styles/runes/event.css

@@ -1,30 +1,9 @@
 /* Event */
-.rf-event__details {
+.rf-event__meta {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
-	gap: 1.5rem;
-	background: var(--rf-color-surface);
-	border-radius: var(--rf-radius-md);
-	padding: 0.75rem 1rem;
-}
-.rf-event__detail {
-	display: block;
-}
-.rf-event__label {
-	display: block;
-	margin-bottom: 0.125rem;
-	font-size: 0.75rem;
-	font-weight: 400;
-	text-transform: uppercase;
-	letter-spacing: 0.05em;
-	color: var(--rf-color-muted);
-	opacity: 0.6;
-}
-.rf-event__value {
-	font-size: 0.9375rem;
-	font-weight: 500;
-	color: var(--rf-color-text);
+	gap: 0.5rem;
 }
 .rf-event__register {
 	display: inline-block;

package/styles/runes/form.css

@@ -3,7 +3,7 @@
 	display: flex;
 	flex-direction: column;
 	gap: 1.25rem;
-	max-width: 36rem;
+	max-width: none;
 }
 .rf-form__body {
 	display: flex;
@@ -30,6 +30,9 @@
 	flex: 1;
 	min-width: 10rem;
 }
+.rf-form--inline .rf-form__submit {
+	align-self: flex-end;
+}
 /* Compact variant */
 .rf-form--compact {
 	gap: 0.75rem;

package/styles/runes/gallery.css

@@ -1,6 +1,7 @@
 /* Gallery — Multi-image container with grid/carousel/masonry layout */
 .rf-gallery {
 	position: relative;
+	margin: 0;
 }
 
 /* Layout modifier classes */
@@ -156,25 +157,19 @@
 	right: 1rem;
 }
 
-/* Column count overrides */
-.rf-gallery[data-columns="1"] .rf-gallery__items { grid-template-columns: 1fr; }
-.rf-gallery[data-columns="2"] .rf-gallery__items { grid-template-columns: repeat(2, 1fr); }
-.rf-gallery[data-columns="4"] .rf-gallery__items { grid-template-columns: repeat(4, 1fr); }
-.rf-gallery[data-columns="5"] .rf-gallery__items { grid-template-columns: repeat(5, 1fr); }
-.rf-gallery[data-columns="6"] .rf-gallery__items { grid-template-columns: repeat(6, 1fr); }
-
-/* Responsive: collapse to fewer columns on small screens */
+/* Responsive: reset custom columns/gap and collapse on small screens */
 @media (max-width: 768px) {
-	.rf-gallery__items {
-		grid-template-columns: repeat(2, 1fr);
+	.rf-gallery {
+		--gallery-columns: 2 !important;
+		--gallery-gap: var(--rf-spacing-md) !important;
 	}
 	.rf-gallery[data-layout="carousel"] .rf-gallery__item {
 		flex-basis: 80%;
 	}
 }
 @media (max-width: 480px) {
-	.rf-gallery__items {
-		grid-template-columns: 1fr;
+	.rf-gallery {
+		--gallery-columns: 1 !important;
 	}
 	.rf-gallery[data-layout="carousel"] .rf-gallery__item {
 		flex-basis: 100%;

package/styles/runes/hint.css

@@ -7,6 +7,9 @@
 	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
 	background: var(--hint-bg);
 }
+.rf-hint__header {
+	margin-bottom: 0.375rem;
+}
 .rf-hint__icon {
 	display: flex;
 	align-items: center;

package/styles/runes/lore.css

@@ -12,17 +12,7 @@
 	padding-left: 1.5rem;
 }
 .rf-lore__content blockquote {
-	border-left: 2px solid var(--rf-color-primary);
-	background: var(--rf-color-surface);
-	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
-	padding: 0.75rem 1.25rem;
-	margin: 1rem 0;
 	font-style: italic;
-	color: var(--rf-color-muted);
-	line-height: 1.6;
-}
-.rf-lore__content blockquote p {
-	margin: 0;
 }
 .rf-lore > span[property="title"] {
 	display: block;

package/styles/runes/milestone.css

@@ -78,18 +78,26 @@
 /* Aggregate progress */
 .rf-milestone__progress {
 	display: flex;
-	align-items: center;
-	gap: 0.625rem;
+	flex-direction: column;
 	margin-bottom: 1rem;
 }
+.rf-milestone__progress-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: baseline;
+	margin-bottom: 0.375rem;
+}
 .rf-milestone__progress-label {
 	font-size: 0.75rem;
 	font-weight: 600;
 	color: var(--rf-color-muted);
-	white-space: nowrap;
+}
+.rf-milestone__progress-count {
+	font-size: 0.75rem;
+	font-weight: 600;
+	color: var(--rf-color-muted);
 }
 .rf-milestone__progress-bar {
-	flex: 1;
 	height: 0.375rem;
 	border-radius: var(--rf-radius-sm);
 	background: var(--rf-color-surface-active);
@@ -100,7 +108,7 @@
 	display: block;
 	height: 100%;
 	width: var(--rf-progress, 0%);
-	background: var(--rf-color-success);
+	background: var(--rf-color-primary);
 	border-radius: var(--rf-radius-sm);
 	transition: width 0.3s ease;
 }

package/styles/runes/preview.css

@@ -84,6 +84,9 @@
 .rf-preview__canvas > *:last-child {
 	margin-bottom: 0;
 }
+.rf-preview__canvas > [data-rune] + [data-rune] {
+	margin-top: 0.75rem;
+}
 
 /* Viewport simulation toggle pill */
 .rf-preview__viewport-toggle {
@@ -118,7 +121,6 @@
 
 /* Source code view — bordered frame matching the canvas */
 .rf-preview__source {
-	overflow: hidden;
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-lg);
 }
@@ -126,9 +128,9 @@
 	margin: 0;
 	border-radius: 0;
 }
-.rf-preview__source .rf-codeblock,
-.rf-preview__source .rf-code-wrapper {
+.rf-preview__source .rf-codeblock {
 	border-radius: 0;
+	margin: 0;
 }
 
 /* Source tabs (data-source panels) */
@@ -136,6 +138,7 @@
 	display: flex;
 	gap: 0;
 	background: var(--rf-color-surface);
+	border-radius: var(--rf-radius-lg);
 }
 .rf-preview__source-tab {
 	padding: 0.5rem 1rem;
@@ -169,6 +172,8 @@
 	}
 	.rf-preview__source {
 		border-radius: 0;
+		border-left: none;
+		border-right: none;
 	}
 	/* Break out of feature's padding-inline to reach viewport edges */
 	.rf-preview--in-feature {

package/styles/runes/testimonial.css

@@ -14,6 +14,9 @@
 	color: var(--rf-color-border);
 	line-height: 1;
 }
+.rf-testimonial__star::before {
+	content: '★';
+}
 .rf-testimonial__star[data-filled="true"] {
 	color: var(--rf-color-warning);
 }
@@ -37,14 +40,14 @@
 .rf-testimonial blockquote p {
 	margin: 0;
 }
-.rf-testimonial span[property="authorName"] {
+.rf-testimonial__author-name {
 	display: block;
 	font-weight: 700;
 	font-style: normal;
 	font-size: 0.925rem;
 	color: var(--rf-color-text);
 }
-.rf-testimonial span[property="authorRole"] {
+.rf-testimonial__author-role {
 	display: block;
 	margin-top: 0.125rem;
 	font-size: 0.85rem;

package/styles/runes/tint.css

@@ -11,37 +11,37 @@
 /* ── 0. Token registration ────────────────────────────────────────────────
  * @property makes guaranteed-invalid fall back to the inherited value
  * (inherits: true) rather than propagating as invalid through children.
- * initial-value matches the light-mode defaults from tokens/base.css. */
+ * initial-value must match the light-mode defaults in tokens/base.css. */
 
 @property --rf-color-bg {
 	syntax: '<color>';
 	inherits: true;
-	initial-value: #ffffff;
+	initial-value: #faf5eb;
 }
 @property --rf-color-surface {
 	syntax: '<color>';
 	inherits: true;
-	initial-value: #f8fafc;
+	initial-value: #fffbf2;
 }
 @property --rf-color-text {
 	syntax: '<color>';
 	inherits: true;
-	initial-value: #1a1a2e;
+	initial-value: #1d3557;
 }
 @property --rf-color-muted {
 	syntax: '<color>';
 	inherits: true;
-	initial-value: #64748b;
+	initial-value: #5a7a90;
 }
 @property --rf-color-primary {
 	syntax: '<color>';
 	inherits: true;
-	initial-value: #0ea5e9;
+	initial-value: #457b9d;
 }
 @property --rf-color-border {
 	syntax: '<color>';
 	inherits: true;
-	initial-value: #e2e8f0;
+	initial-value: #d8e4de;
 }
 
 /* ── 1. Colour scheme override ──────────────────────────────────────────────
@@ -49,17 +49,18 @@
  * tokens are also exposed as --cs-* intermediaries so compound selectors
  * in step 4 can fall back to them without a cycle. */
 
+/* Keep in sync with tokens/dark.css */
 [data-color-scheme="dark"] {
 	color-scheme: dark;
 	color: var(--rf-color-text);
 	background-color: var(--rf-color-bg);
 
-	--cs-bg: #0c1222;
-	--cs-surface: #0f172a;
-	--cs-text: #e2e8f0;
-	--cs-muted: #94a3b8;
-	--cs-accent: #38bdf8;
-	--cs-border: rgba(255, 255, 255, 0.1);
+	--cs-bg: #152238;
+	--cs-surface: #1a2940;
+	--cs-text: #f1faee;
+	--cs-muted: #a8dadc;
+	--cs-accent: #70b4c0;
+	--cs-border: rgba(168, 218, 220, 0.15);
 
 	--rf-color-bg: var(--cs-bg);
 	--rf-color-surface: var(--cs-surface);
@@ -68,27 +69,27 @@
 	--rf-color-primary: var(--cs-accent);
 	--rf-color-border: var(--cs-border);
 
-	--rf-color-primary-hover: #7dd3fc;
-	--rf-color-surface-hover: #1e293b;
-	--rf-color-surface-active: #334155;
-	--rf-color-surface-raised: #1e293b;
-
-	--rf-color-info: #60a5fa;
-	--rf-color-info-bg: rgba(59, 130, 246, 0.1);
-	--rf-color-info-border: rgba(59, 130, 246, 0.3);
-	--rf-color-warning: #fbbf24;
-	--rf-color-warning-bg: rgba(245, 158, 11, 0.1);
-	--rf-color-warning-border: rgba(245, 158, 11, 0.3);
-	--rf-color-danger: #f87171;
-	--rf-color-danger-bg: rgba(239, 68, 68, 0.1);
-	--rf-color-danger-border: rgba(239, 68, 68, 0.3);
-	--rf-color-success: #34d399;
-	--rf-color-success-bg: rgba(16, 185, 129, 0.1);
-	--rf-color-success-border: rgba(16, 185, 129, 0.3);
-
-	--rf-color-code-bg: #0f172a;
-	--rf-color-code-text: #e2e8f0;
-	--rf-color-inline-code-bg: rgba(255, 255, 255, 0.08);
+	--rf-color-primary-hover: #a8dadc;
+	--rf-color-surface-hover: #203048;
+	--rf-color-surface-active: #263850;
+	--rf-color-surface-raised: #1a2940;
+
+	--rf-color-info: #a8dadc;
+	--rf-color-info-bg: rgba(69, 123, 157, 0.12);
+	--rf-color-info-border: rgba(69, 123, 157, 0.3);
+	--rf-color-warning: #e8c07a;
+	--rf-color-warning-bg: rgba(200, 144, 10, 0.12);
+	--rf-color-warning-border: rgba(200, 144, 10, 0.3);
+	--rf-color-danger: #f07078;
+	--rf-color-danger-bg: rgba(230, 57, 70, 0.12);
+	--rf-color-danger-border: rgba(230, 57, 70, 0.3);
+	--rf-color-success: #72c098;
+	--rf-color-success-bg: rgba(61, 143, 101, 0.12);
+	--rf-color-success-border: rgba(61, 143, 101, 0.3);
+
+	--rf-color-code-bg: #152238;
+	--rf-color-code-text: #f1faee;
+	--rf-color-inline-code-bg: rgba(168, 218, 220, 0.08);
 
 	--rf-shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
 	--rf-shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
@@ -96,17 +97,18 @@
 	--rf-shadow-lg: 0 8px 24px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
 }
 
+/* Keep in sync with tokens/base.css */
 [data-color-scheme="light"] {
 	color-scheme: light;
 	color: var(--rf-color-text);
 	background-color: var(--rf-color-bg);
 
-	--cs-bg: #ffffff;
-	--cs-surface: #f8fafc;
-	--cs-text: #1a1a2e;
-	--cs-muted: #64748b;
-	--cs-accent: #0ea5e9;
-	--cs-border: #e2e8f0;
+	--cs-bg: #faf5eb;
+	--cs-surface: #fffbf2;
+	--cs-text: #1d3557;
+	--cs-muted: #5a7a90;
+	--cs-accent: #457b9d;
+	--cs-border: #d8e4de;
 
 	--rf-color-bg: var(--cs-bg);
 	--rf-color-surface: var(--cs-surface);
@@ -115,25 +117,25 @@
 	--rf-color-primary: var(--cs-accent);
 	--rf-color-border: var(--cs-border);
 
-	--rf-color-primary-hover: #0284c7;
-	--rf-color-surface-hover: #f1f5f9;
-	--rf-color-surface-active: #e2e8f0;
+	--rf-color-primary-hover: #376585;
+	--rf-color-surface-hover: #fdf0d5;
+	--rf-color-surface-active: #f9ebcc;
 	--rf-color-surface-raised: #ffffff;
 
-	--rf-color-info: #3b82f6;
-	--rf-color-info-bg: #eff6ff;
-	--rf-color-info-border: #bfdbfe;
-	--rf-color-warning: #f59e0b;
-	--rf-color-warning-bg: #fffbeb;
-	--rf-color-warning-border: #fde68a;
-	--rf-color-danger: #ef4444;
-	--rf-color-danger-bg: #fef2f2;
-	--rf-color-danger-border: #fecaca;
-	--rf-color-success: #10b981;
-	--rf-color-success-bg: #ecfdf5;
-	--rf-color-success-border: #a7f3d0;
-
-	--rf-color-inline-code-bg: #f1f5f9;
+	--rf-color-info: #457b9d;
+	--rf-color-info-bg: #edf4f8;
+	--rf-color-info-border: #a8dadc;
+	--rf-color-warning: #c8900a;
+	--rf-color-warning-bg: #fdf5e4;
+	--rf-color-warning-border: #edd49a;
+	--rf-color-danger: #e63946;
+	--rf-color-danger-bg: #fdeced;
+	--rf-color-danger-border: #f0b0b5;
+	--rf-color-success: #3d8f65;
+	--rf-color-success-bg: #ecf5ef;
+	--rf-color-success-border: #a8d4b8;
+
+	--rf-color-inline-code-bg: #f9ebcc;
 
 	--rf-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
 	--rf-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);

package/styles/runes/typography.css

@@ -10,7 +10,6 @@
 	gap: 2rem;
 }
 .rf-typography__specimen {
-	border: 1px solid var(--rf-color-border, #e5e7eb);
 	border-radius: var(--rf-radius-lg, 12px);
 	padding: 1.5rem;
 }