@refrakt-md/lumina 0.4.0 → 0.5.1

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,64 @@
 .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 dt:has(> .rf-icon) {
+	display: flex;
+	flex-direction: column;
+}
+.rf-feature-definition dt > .rf-icon {
+	width: 1.5rem;
+	height: 1.5rem;
+	margin-bottom: 0.5rem;
+	color: var(--rf-color-accent);
 }
 .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; }

package/styles/runes/hero.css

@@ -9,12 +9,17 @@
 .rf-hero__actions {
 	max-width: 720px;
 	margin: 0 auto;
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	flex-wrap: wrap;
 }
 .rf-hero--center {
 	text-align: center;
 }
 .rf-hero--center .rf-hero__actions {
 	margin: 0 auto;
+	justify-content: center;
 }
 .rf-hero--left {
 	text-align: left;
@@ -28,6 +33,16 @@
 .rf-hero--right .rf-hero__actions {
 	margin: 0 0 0 auto;
 }
+.rf-hero__actions pre {
+	margin: 0;
+	padding: 0.7rem 1.75rem;
+	font-size: 0.95rem;
+	border-radius: var(--rf-radius-sm);
+	background: var(--rf-color-code-bg);
+	color: var(--rf-color-code-text);
+	border: 1px solid var(--rf-color-border);
+	white-space: nowrap;
+}
 .rf-hero h1 {
 	font-size: 3.25rem;
 	font-weight: 800;

package/styles/runes/map.css

@@ -0,0 +1,113 @@
+/* ── Map Rune ── */
+
+.rf-map {
+	margin: 2rem 0;
+	border-radius: var(--rf-radius-lg, 0.75rem);
+	overflow: hidden;
+	border: 1px solid var(--rf-color-border);
+}
+
+/* Height variants */
+.rf-map--small .rf-map__container { height: 200px; }
+.rf-map--medium .rf-map__container { height: 400px; }
+.rf-map--large .rf-map__container { height: 600px; }
+.rf-map--full .rf-map__container { height: 80vh; min-height: 400px; }
+
+.rf-map__container {
+	width: 100%;
+	position: relative;
+	background: var(--rf-color-surface, #f8f9fa);
+}
+
+/* Fallback list shown while Leaflet loads */
+.rf-map__fallback {
+	padding: 1.5rem;
+	margin: 0;
+	list-style: decimal inside;
+	font-size: 0.925rem;
+	color: var(--rf-color-muted);
+}
+
+.rf-map__fallback li {
+	padding: 0.25rem 0;
+}
+
+.rf-map__fallback strong {
+	color: var(--rf-color-text);
+}
+
+/* Accessible text list (visible to screen readers, hidden visually) */
+.rf-map__pins {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+/* MapPin in fallback / a11y list */
+.rf-map-pin {
+	padding: 0.25rem 0;
+}
+
+.rf-map-pin__description {
+	color: var(--rf-color-muted);
+	font-style: italic;
+}
+
+.rf-map-pin__group {
+	display: inline-block;
+	font-size: 0.75rem;
+	padding: 0.1rem 0.5rem;
+	border-radius: var(--rf-radius-sm, 0.25rem);
+	background: var(--rf-color-surface, #f0f0f0);
+	color: var(--rf-color-muted);
+	margin-left: 0.5rem;
+}
+
+/* Hide meta tags and property spans inside the map */
+.rf-map meta,
+.rf-map span[property] {
+	display: none;
+}
+
+/* Leaflet popup overrides to match theme */
+.rf-map .leaflet-popup-content-wrapper {
+	border-radius: var(--rf-radius-md, 0.5rem);
+	font-family: var(--rf-font-sans, inherit);
+	font-size: 0.875rem;
+	color: var(--rf-color-text);
+}
+
+.rf-map .leaflet-popup-content {
+	margin: 0.75rem 1rem;
+	line-height: 1.5;
+}
+
+.rf-map .leaflet-popup-content strong {
+	display: block;
+	font-size: 0.95rem;
+	margin-bottom: 0.25rem;
+}
+
+.rf-map .leaflet-popup-content em {
+	color: var(--rf-color-muted);
+}
+
+.rf-map .leaflet-popup-content small {
+	color: var(--rf-color-muted);
+	font-size: 0.8rem;
+}
+
+.rf-map .leaflet-popup-content a {
+	color: var(--rf-color-primary);
+	text-decoration: none;
+}
+
+.rf-map .leaflet-popup-content a:hover {
+	text-decoration: underline;
+}

package/styles/runes/palette.css

@@ -0,0 +1,91 @@
+/* Palette — color swatch grid */
+.rf-palette {
+	margin: 1.5rem 0;
+}
+.rf-palette__title {
+	font-size: 1.125rem;
+	font-weight: 600;
+	margin-bottom: 1rem;
+}
+.rf-palette__group {
+	margin-bottom: 1.5rem;
+}
+.rf-palette__group:last-child {
+	margin-bottom: 0;
+}
+.rf-palette__group-title {
+	font-size: 0.8rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--rf-color-text-muted, #6b7280);
+	margin-bottom: 0.75rem;
+}
+.rf-palette__grid {
+	display: grid;
+	grid-template-columns: repeat(var(--rf-palette-cols, 4), 1fr);
+	gap: 0.75rem;
+}
+.rf-palette__swatch {
+	display: flex;
+	flex-direction: column;
+	gap: 0.375rem;
+}
+.rf-palette__swatch-color {
+	height: 5rem;
+	border-radius: var(--rf-radius-md, 8px);
+	border: 1px solid rgba(0, 0, 0, 0.08);
+}
+.rf-palette__swatch-name {
+	font-weight: 500;
+	font-size: 0.875rem;
+}
+.rf-palette__swatch-value {
+	font-family: var(--rf-font-mono, monospace);
+	font-size: 0.75rem;
+	color: var(--rf-color-text-muted, #6b7280);
+}
+.rf-palette__swatch-contrast {
+	font-family: var(--rf-font-mono, monospace);
+	font-size: 0.7rem;
+	color: var(--rf-color-text-muted, #6b7280);
+}
+.rf-palette__swatch-a11y {
+	display: flex;
+	gap: 0.5rem;
+	font-size: 0.7rem;
+	font-weight: 500;
+}
+.rf-palette__swatch-a11y--pass {
+	color: var(--rf-color-success, #10b981);
+}
+.rf-palette__swatch-a11y--fail {
+	color: var(--rf-color-danger, #ef4444);
+}
+
+/* Neutral scale — horizontal gradient strip */
+.rf-palette__scale {
+	display: flex;
+	border-radius: var(--rf-radius-md, 8px);
+	overflow: hidden;
+	margin-bottom: 0.5rem;
+}
+.rf-palette__scale-stop {
+	flex: 1;
+	padding: 1.25rem 0.5rem 0.5rem;
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
+	min-height: 4rem;
+	font-size: 0.625rem;
+	font-family: var(--rf-font-mono, monospace);
+}
+.rf-palette__scale + .rf-palette__swatch-name {
+	margin-top: 0.25rem;
+	font-size: 0.8rem;
+}
+
+/* Context-aware: no outer margin when inside design-context */
+.rf-palette--in-design-context {
+	margin: 0;
+}

package/styles/runes/preview.css

@@ -0,0 +1,188 @@
+/* Preview — Component showcase with theme toggle and width control */
+.rf-preview {
+	margin: 2rem 0;
+	border: 1px solid var(--rf-color-border);
+	border-radius: var(--rf-radius-lg);
+	overflow: hidden;
+}
+
+/* Width variants */
+.rf-preview[data-width="medium"] {
+	width: calc(100% + 4rem);
+	margin-left: -2rem;
+}
+@container (min-width: 1008px) {
+	.rf-preview[data-width="wide"] {
+		width: calc(100% + 8rem);
+		margin-left: -4rem;
+		max-width: 76rem;
+	}
+}
+.rf-preview[data-width="full"] {
+	width: 100vw;
+	margin-left: calc(-50vw + 50%);
+}
+
+/* Toolbar */
+.rf-preview__toolbar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0.5rem 1rem;
+	background: var(--rf-color-surface);
+	border-bottom: 1px solid var(--rf-color-border);
+	min-height: 2.5rem;
+}
+.rf-preview__title {
+	font-size: 0.75rem;
+	font-weight: 600;
+	color: var(--rf-color-muted);
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+}
+
+/* Controls container (view toggle + theme toggle) */
+.rf-preview__controls {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+}
+
+/* View toggle pill (code/preview) */
+.rf-preview__view-toggle {
+	display: flex;
+	gap: 0.125rem;
+	background: var(--rf-color-surface-active);
+	border-radius: var(--rf-radius-full);
+	padding: 0.125rem;
+}
+
+/* Theme toggle pill */
+.rf-preview__toggle {
+	display: flex;
+	gap: 0.125rem;
+	background: var(--rf-color-surface-active);
+	border-radius: var(--rf-radius-full);
+	padding: 0.125rem;
+}
+.rf-preview__toggle-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 1.625rem;
+	height: 1.625rem;
+	border: none;
+	border-radius: var(--rf-radius-full);
+	background: transparent;
+	color: var(--rf-color-muted);
+	cursor: pointer;
+	transition: background 150ms ease, color 150ms ease;
+	padding: 0;
+}
+.rf-preview__toggle-btn:hover {
+	color: var(--rf-color-text);
+}
+.rf-preview__toggle-btn--active {
+	background: var(--rf-color-bg);
+	color: var(--rf-color-text);
+	box-shadow: var(--rf-shadow-xs);
+}
+
+/* Canvas */
+.rf-preview__canvas {
+	padding: 2rem 2.5rem;
+	background: var(--rf-color-bg);
+}
+.rf-preview__canvas > *:first-child {
+	margin-top: 0;
+}
+.rf-preview__canvas > *:last-child {
+	margin-bottom: 0;
+}
+
+/* Viewport simulation toggle pill */
+.rf-preview__viewport-toggle {
+	display: flex;
+	gap: 0.125rem;
+	background: var(--rf-color-surface-active);
+	border-radius: var(--rf-radius-full);
+	padding: 0.125rem;
+}
+
+/* Viewport simulation frame */
+.rf-preview__viewport-frame {
+	position: relative;
+	overflow: hidden;
+	transition: max-width 300ms ease;
+}
+.rf-preview__viewport-frame--constrained {
+	margin: 0 auto;
+	border: 1px dashed var(--rf-color-border);
+	border-radius: var(--rf-radius-sm);
+}
+.rf-preview__viewport-label {
+	position: absolute;
+	top: 0.25rem;
+	right: 0.5rem;
+	font-size: 0.625rem;
+	color: var(--rf-color-muted);
+	font-variant-numeric: tabular-nums;
+	pointer-events: none;
+	z-index: 1;
+}
+
+/* Source code view */
+.rf-preview__source {
+	overflow: auto;
+}
+.rf-preview__source pre {
+	margin: 0;
+	border-radius: 0;
+}
+.rf-preview__source .rf-codeblock,
+.rf-preview__source .rf-code-wrapper {
+	border-radius: 0;
+}
+
+/* Source tabs (data-source panels) */
+.rf-preview__source-tabs {
+	display: flex;
+	gap: 0;
+	background: var(--rf-color-surface);
+	border-bottom: 1px solid var(--rf-color-border);
+}
+.rf-preview__source-tab {
+	padding: 0.5rem 1rem;
+	border: none;
+	background: transparent;
+	color: var(--rf-color-muted);
+	font-size: 0.75rem;
+	font-weight: 500;
+	cursor: pointer;
+	border-bottom: 2px solid transparent;
+	transition: color 150ms ease, border-color 150ms ease;
+}
+.rf-preview__source-tab:hover {
+	color: var(--rf-color-text);
+}
+.rf-preview__source-tab--active {
+	color: var(--rf-color-text);
+	border-bottom-color: var(--rf-color-primary);
+}
+
+/* Small containers: edge-to-edge bleed */
+@container (max-width: 1008px) {
+	.rf-preview {
+		margin-left: calc(-1 * var(--rf-content-padding, 1.5rem));
+		margin-right: calc(-1 * var(--rf-content-padding, 1.5rem));
+		border-radius: 0;
+		border-left: none;
+		border-right: none;
+	}
+	.rf-preview__toolbar {
+		padding: 0.5rem calc(var(--rf-content-padding, 1.5rem) + 1rem) 0.5rem var(--rf-content-padding, 1.5rem);
+	}
+	.rf-preview__canvas {
+		padding: 1.5rem var(--rf-content-padding, 1.5rem);
+	}
+}

package/styles/runes/sandbox.css

@@ -0,0 +1,23 @@
+/* Sandbox — Isolated HTML/CSS/JS rendering via iframe */
+.rf-sandbox {
+	margin: 1.5rem 0;
+	border-radius: var(--rf-radius-md);
+	overflow: hidden;
+}
+
+.rf-sandbox iframe {
+	display: block;
+	width: 100%;
+	border: none;
+}
+
+/* Static fallback (pre/code shown before hydration) */
+.rf-sandbox pre {
+	margin: 0;
+}
+
+/* When inside preview, remove sandbox margin */
+.rf-preview .rf-sandbox {
+	margin: 0;
+	border-radius: 0;
+}

package/styles/runes/spacing.css

@@ -0,0 +1,110 @@
+/* Spacing — spacing scale, radii, and shadow display */
+.rf-spacing {
+	margin: 1.5rem 0;
+}
+.rf-spacing__title {
+	font-size: 1.125rem;
+	font-weight: 600;
+	margin-bottom: 1rem;
+}
+.rf-spacing__section {
+	margin-bottom: 2rem;
+}
+.rf-spacing__section:last-child {
+	margin-bottom: 0;
+}
+.rf-spacing__section-title {
+	font-size: 0.8rem;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	color: var(--rf-color-text-muted, #6b7280);
+	margin-bottom: 0.75rem;
+}
+
+/* Spacing scale — proportional bars */
+.rf-spacing__scale {
+	display: flex;
+	flex-direction: column;
+	gap: 0.375rem;
+}
+.rf-spacing__scale-item {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+}
+.rf-spacing__scale-bar {
+	height: 1.25rem;
+	background: var(--rf-color-primary, #0ea5e9);
+	border-radius: var(--rf-radius-sm, 4px);
+	opacity: 0.8;
+	min-width: 4px;
+}
+.rf-spacing__scale-label {
+	font-size: 0.75rem;
+	font-family: var(--rf-font-mono, monospace);
+	color: var(--rf-color-text, #1a1a2e);
+	white-space: nowrap;
+	flex-shrink: 0;
+}
+.rf-spacing__scale-multiplier {
+	color: var(--rf-color-text-muted, #6b7280);
+	margin-left: 0.25rem;
+}
+
+/* Radius — rounded corner samples */
+.rf-spacing__radii {
+	display: flex;
+	gap: 1.25rem;
+	flex-wrap: wrap;
+	align-items: flex-end;
+}
+.rf-spacing__radius-item {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 0.375rem;
+}
+.rf-spacing__radius-sample {
+	width: 3.5rem;
+	height: 3.5rem;
+	border: 2px solid var(--rf-color-border, #e5e7eb);
+	background: var(--rf-color-surface-raised, #f9fafb);
+}
+.rf-spacing__radius-label {
+	font-weight: 500;
+	font-size: 0.8rem;
+}
+.rf-spacing__radius-value {
+	font-size: 0.7rem;
+	font-family: var(--rf-font-mono, monospace);
+	color: var(--rf-color-text-muted, #6b7280);
+}
+
+/* Shadows — sample cards */
+.rf-spacing__shadows {
+	display: flex;
+	gap: 1.5rem;
+	flex-wrap: wrap;
+}
+.rf-spacing__shadow-item {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 0.5rem;
+}
+.rf-spacing__shadow-sample {
+	width: 5rem;
+	height: 3.5rem;
+	background: var(--rf-color-surface, #fff);
+	border-radius: var(--rf-radius-md, 8px);
+}
+.rf-spacing__shadow-label {
+	font-weight: 500;
+	font-size: 0.8rem;
+}
+
+/* Context-aware: no outer margin when inside design-context */
+.rf-spacing--in-design-context {
+	margin: 0;
+}