@refrakt-md/lumina 0.18.0 → 0.20.0

package/styles/runes/typography.css

@@ -11,7 +11,7 @@
 }
 .rf-typography__specimen {
 	border-radius: var(--rf-radius-lg, 12px);
-	padding: 1.5rem;
+	padding: 0;
 }
 .rf-typography__specimen-header {
 	display: flex;
@@ -26,14 +26,14 @@
 	font-weight: 600;
 	text-transform: uppercase;
 	letter-spacing: 0.05em;
-	color: var(--rf-color-primary, #0ea5e9);
-	background: var(--rf-color-primary-bg, rgba(14, 165, 233, 0.1));
+	color: var(--rf-color-muted);
+	background: var(--rf-color-surface-raised);
 	padding: 0.125rem 0.5rem;
 	border-radius: var(--rf-radius-sm, 4px);
 }
 .rf-typography__specimen-family {
 	font-size: 0.9rem;
-	color: var(--rf-color-text-muted, #6b7280);
+	color: var(--rf-color-muted);
 }
 .rf-typography__sizes {
 	display: flex;
@@ -54,7 +54,7 @@
 	flex-shrink: 0;
 	font-size: 0.7rem;
 	font-family: var(--rf-font-mono, monospace);
-	color: var(--rf-color-text-muted, #6b7280);
+	color: var(--rf-color-muted);
 	min-width: 3rem;
 	text-align: right;
 }
@@ -73,7 +73,7 @@
 .rf-typography__weight-label {
 	font-size: 0.7rem;
 	font-family: var(--rf-font-mono, monospace);
-	color: var(--rf-color-text-muted, #6b7280);
+	color: var(--rf-color-muted);
 }
 .rf-typography__charset {
 	margin-top: 1rem;
@@ -83,7 +83,7 @@
 	line-height: 1.8;
 	letter-spacing: 0.05em;
 	word-break: break-all;
-	color: var(--rf-color-text-muted, #6b7280);
+	color: var(--rf-color-muted);
 }
 
 /* Context-aware: no outer border when inside design-context (parent already has one) */

package/styles/runes/xref.css

@@ -23,6 +23,6 @@
 /* Unresolved reference */
 .rf-xref--unresolved {
 	text-decoration: underline dashed;
-	color: var(--rf-color-text-muted);
+	color: var(--rf-color-muted);
 	cursor: help;
 }

package/tokens/base.css

@@ -11,19 +11,6 @@
 	--rf-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
 	--rf-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, 'Cascadia Code', monospace;
 
-	/* Primary scale — warm-neutral axis, near-bg → near-text */
-	--rf-color-primary-50: #fbfaf7;
-	--rf-color-primary-100: #f5f4f1;
-	--rf-color-primary-200: #ecebe8;
-	--rf-color-primary-300: #e2e0dd;
-	--rf-color-primary-400: #bfbab2;
-	--rf-color-primary-500: #94908a;
-	--rf-color-primary-600: #76716a;
-	--rf-color-primary-700: #5a564f;
-	--rf-color-primary-800: #3a342d;
-	--rf-color-primary-900: #2a2622;
-	--rf-color-primary-950: #1c1a17;
-
 	/* Core palette */
 	--rf-color-text: #1c1a17;
 	--rf-color-muted: #6b6661;
@@ -31,12 +18,18 @@
 	--rf-color-bg: #f5f4f1;
 	--rf-color-primary: #1c1a17;
 	--rf-color-primary-hover: #3a342d;
+	/* Derived subtle primary wash — tracks `primary` in both modes. */
+	--rf-color-primary-bg: color-mix(in oklch, var(--rf-color-primary) 10%, transparent);
+	--rf-color-on-primary: #ffffff;
 
 	/* Surfaces */
 	--rf-color-surface: #fbfaf7;
 	--rf-color-surface-hover: #ecebe8;
 	--rf-color-surface-active: #e2e0dd;
 	--rf-color-surface-raised: #ffffff;
+	/* SPEC-087 — lightness delta for the derived inset surface (applied at use-site
+	 * via relative-color — lower L, keep C+H — so it tracks a tinted --rf-color-surface). */
+	--rf-surface-inset-shift: 0.04;
 
 	/* Semantic — muted earthy band per SPEC-051 */
 	--rf-color-info: #34547a;
@@ -58,7 +51,13 @@
 	 * status-coloured (which would compete with diff's add/remove channel
 	 * and the semantic palette above). `*-rail` is the optional left-edge
 	 * border colour; falls back to the primary accent via the consuming
-	 * CSS for themes that don't override it. */
+	 * CSS for themes that don't override it.
+	 *
+	 * WORK-341 — these three (and `--rf-color-primary-bg` above) are
+	 * **intentionally shared**: each derives from a mode-aware token
+	 * (`text` / `primary` / `muted`), so they track dark mode automatically
+	 * and deliberately have no dark.css override (a fixed dark value would
+	 * break the derivation). */
 	--rf-color-line-highlight: color-mix(in srgb, var(--rf-color-text) 6%, transparent);
 	--rf-color-line-highlight-rail: var(--rf-color-primary, var(--rf-color-text));
 	/* Gutter colour for `pre[data-linenumbers]` line counter. Defers to
@@ -93,6 +92,7 @@
 	--rf-inset-breathe: 8rem;
 
 	/* Shadows */
+	--rf-shadow-none: none;
 	--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);
 	--rf-shadow-md: 0 4px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);

package/tokens/dark.css

@@ -9,15 +9,17 @@
 [data-theme="dark"] {
 	--rf-color-text: #f6f4ef;
 	--rf-color-muted: #94908a;
-	--rf-color-border: #2a2825;
+	--rf-color-border: #282825;
 	--rf-color-bg: #1a1a17;
 	--rf-color-primary: #f6f4ef;
 	--rf-color-primary-hover: #d4cfc5;
+	--rf-color-on-primary: #1a1a17;
 
-	--rf-color-surface: #211f1c;
-	--rf-color-surface-hover: #2a2825;
-	--rf-color-surface-active: #353330;
-	--rf-color-surface-raised: #292723;
+	--rf-color-surface: #1f1f1c;
+	--rf-color-surface-hover: #282825;
+	--rf-color-surface-active: #333330;
+	--rf-color-surface-raised: #272723;
+	--rf-surface-inset-shift: 0.06;
 
 	--rf-color-info: #9bb4c7;
 	--rf-color-info-bg: #1f2530;
@@ -32,7 +34,7 @@
 	--rf-color-success-bg: #1a2a1f;
 	--rf-color-success-border: #2a4a35;
 
-	--rf-color-code-bg: #222220;
+	--rf-color-code-bg: #1c1c19;
 	--rf-color-code-text: #f6f4ef;
 	--rf-color-code-inline-bg: #2b2b29;
 	--rf-color-inline-code-bg: #2b2b29;
@@ -46,7 +48,7 @@
 	--rf-syntax-variable: #f6f4ef;
 
 	--rf-syntax-foreground: #f6f4ef;
-	--rf-syntax-background: #222220;
+	--rf-syntax-background: #1c1c19;
 	--rf-syntax-token-keyword: #7eb6bc;
 	--rf-syntax-token-string: #c79a9a;
 	--rf-syntax-token-string-expression: #c79a9a;
@@ -68,15 +70,17 @@
 	:root:not([data-theme="light"]) {
 		--rf-color-text: #f6f4ef;
 		--rf-color-muted: #94908a;
-		--rf-color-border: #2a2825;
+		--rf-color-border: #282825;
 		--rf-color-bg: #1a1a17;
 		--rf-color-primary: #f6f4ef;
 		--rf-color-primary-hover: #d4cfc5;
+	--rf-color-on-primary: #1a1a17;
 
-		--rf-color-surface: #211f1c;
-		--rf-color-surface-hover: #2a2825;
-		--rf-color-surface-active: #353330;
-		--rf-color-surface-raised: #292723;
+		--rf-color-surface: #1f1f1c;
+		--rf-color-surface-hover: #282825;
+		--rf-color-surface-active: #333330;
+		--rf-color-surface-raised: #272723;
+	--rf-surface-inset-shift: 0.06;
 
 		--rf-color-info: #9bb4c7;
 		--rf-color-info-bg: #1f2530;
@@ -91,7 +95,7 @@
 		--rf-color-success-bg: #1a2a1f;
 		--rf-color-success-border: #2a4a35;
 
-		--rf-color-code-bg: #222220;
+		--rf-color-code-bg: #1c1c19;
 		--rf-color-code-text: #f6f4ef;
 		--rf-color-code-inline-bg: #2b2b29;
 		--rf-color-inline-code-bg: #2b2b29;
@@ -105,7 +109,7 @@
 		--rf-syntax-variable: #f6f4ef;
 
 		--rf-syntax-foreground: #f6f4ef;
-		--rf-syntax-background: #222220;
+		--rf-syntax-background: #1c1c19;
 		--rf-syntax-token-keyword: #7eb6bc;
 		--rf-syntax-token-string: #c79a9a;
 		--rf-syntax-token-string-expression: #c79a9a;