@refrakt-md/lumina 0.4.0 → 0.5.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,86 @@
+/* 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;
+}

package/styles/runes/preview.css

@@ -0,0 +1,187 @@
+/* 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 {
+	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,105 @@
+/* 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;
+}

package/styles/runes/steps.css

@@ -1,9 +1,12 @@
 /* Steps */
 .rf-steps {
 	counter-reset: step;
+	margin: 1.5rem 0;
+}
+.rf-steps ol {
 	list-style: none;
 	padding-left: 0;
-	margin: 1.5rem 0;
+	margin: 0;
 }
 .rf-step__main {
 	display: contents;
@@ -53,6 +56,9 @@
 	grid-template-columns: 1fr 1fr;
 	gap: 2rem;
 }
+.rf-step--mirror .rf-step__showcase {
+	order: -1;
+}
 .rf-step__showcase {
 	border-radius: var(--rf-radius-md);
 	overflow: hidden;

package/styles/runes/swatch.css

@@ -0,0 +1,28 @@
+/* Swatch — inline color chip */
+.rf-swatch {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.375rem;
+	vertical-align: middle;
+	border: 1px solid rgba(0, 0, 0, 0.12);
+	border-radius: 9999px;
+	padding: 0.125em 0.625em 0.125em 0.375em;
+	margin: 0 0.15em;
+}
+.rf-swatch__chip {
+	display: inline-block;
+	width: 0.875em;
+	height: 0.875em;
+	border-radius: 50%;
+	border: 1px solid rgba(0, 0, 0, 0.1);
+	flex-shrink: 0;
+}
+.rf-swatch__label {
+	font-weight: 500;
+}
+.rf-swatch__value {
+	color: var(--rf-color-text-muted, #6b7280);
+	font-size: 0.75em;
+	font-family: var(--rf-font-mono, monospace);
+	vertical-align: middle;
+}