@refrakt-md/lumina 0.33.0 → 0.35.0

package/styles/runes/plot.css

@@ -1,101 +1,106 @@
 @layer skin {
-.rf-plot > span[property="name"] {
-	font-size: var(--rf-text-2xl);
-	font-weight: var(--rf-weight-bold);
-	margin-bottom: 0.5rem;
-	color: var(--rf-color-text);
-}
+	.rf-plot__title {
+		/* No `font-size` — see the note on .rf-lore__title. This rule was *live*
+		   under its old `[property="name"]` selector, so plot's prominence axis and
+		   density ramp have both been inert: `{% plot prominence="display" %}` did
+		   nothing. The guard could not see it because the selector named the
+		   schema.org channel rather than the BEM slot. */
+		font-weight: var(--rf-weight-bold);
+		margin-bottom: 0.5rem;
+		color: var(--rf-color-text);
+	}
 
-/* Description */
-.rf-plot > p {
-	color: var(--rf-color-muted);
-	margin-bottom: 1rem;
-	margin-top: 0;
-}
+	/* Description */
+	.rf-plot > p {
+		color: var(--rf-color-muted);
+		margin-bottom: 1rem;
+		margin-top: 0;
+	}
 
-/* Beats list */
-.rf-plot ol {
-	padding-left: 0;
-	margin: 1rem 0 0;
-}
+	/* Beats list */
+	.rf-plot ol {
+		padding-left: 0;
+		margin: 1rem 0 0;
+	}
 
-/* Beat — all variants use left padding with dot at left: 0 */
-.rf-beat {
-	padding: 0.625rem 0 0.625rem 2.25rem;
-}
-.rf-beat + .rf-beat {
-	border-top: 1px solid var(--rf-color-border);
-}
-.rf-beat::before {
-	border-radius: 50%;
-	background: var(--rf-color-surface-active);
-	border: 2px solid var(--rf-color-bg);
-	box-shadow: 0 0 0 2px var(--rf-color-surface-active);
-}
-.rf-beat > span[data-field="label"] {
-	font-weight: var(--rf-weight-semibold);
-	font-size: var(--rf-text);
-	color: var(--rf-color-text);
-}
-.rf-beat__body {
-	margin-top: 0.25rem;
-	font-size: var(--rf-text);
-	color: var(--rf-color-muted);
-	line-height: var(--rf-leading-relaxed);
-}
-.rf-beat__body p {
-	margin: 0;
-}
-
-.rf-plot--linear ol {
-	margin-top: 1.5rem;
-}
-/* Linear variant — connector line matching timeline pattern */
-.rf-plot--linear .rf-beat {
-	padding: 0 0 2rem 2rem;
-	border-left: 2px solid var(--rf-color-border);
-	margin-left: 0.375rem;
-}
-.rf-plot--linear .rf-beat > span[data-field="label"] {
-	line-height: 1;
-	margin-top: -0.5rem;
-}
-.rf-plot--linear .rf-beat + .rf-beat {
-	border-top: none;
-}
-.rf-plot--linear .rf-beat:last-child {
-	border-left-color: transparent;
-	padding-bottom: 0;
-}
+	/* Beat — all variants use left padding with dot at left: 0 */
+	.rf-beat {
+		padding: 0.625rem 0 0.625rem 2.25rem;
+	}
+	.rf-beat + .rf-beat {
+		border-top: 1px solid var(--rf-color-border);
+	}
+	.rf-beat::before {
+		border-radius: 50%;
+		background: var(--rf-color-surface-active);
+		border: 2px solid var(--rf-color-bg);
+		box-shadow: 0 0 0 2px var(--rf-color-surface-active);
+	}
+	.rf-beat > span[data-field="label"] {
+		font-weight: var(--rf-weight-semibold);
+		font-size: var(--rf-text);
+		color: var(--rf-color-text);
+	}
+	.rf-beat__body {
+		margin-top: 0.25rem;
+		font-size: var(--rf-text);
+		color: var(--rf-color-muted);
+		line-height: var(--rf-leading-relaxed);
+	}
+	.rf-beat__body p {
+		margin: 0;
+	}
 
-/* Beat status variants */
-.rf-beat--complete::before {
-	background: var(--rf-color-success);
-	box-shadow: 0 0 0 2px var(--rf-color-success);
-}
-.rf-beat--complete > span[data-field="label"] {
-	color: var(--rf-color-muted);
-}
+	.rf-plot--linear ol {
+		margin-top: 1.5rem;
+	}
+	/* Linear variant — connector line matching timeline pattern */
+	.rf-plot--linear .rf-beat {
+		padding: 0 0 2rem 2rem;
+		border-left: 2px solid var(--rf-color-border);
+		margin-left: 0.375rem;
+	}
+	.rf-plot--linear .rf-beat > span[data-field="label"] {
+		line-height: 1;
+		margin-top: -0.5rem;
+	}
+	.rf-plot--linear .rf-beat + .rf-beat {
+		border-top: none;
+	}
+	.rf-plot--linear .rf-beat:last-child {
+		border-left-color: transparent;
+		padding-bottom: 0;
+	}
 
-.rf-beat--active::before {
-	background: var(--rf-color-primary);
-	box-shadow: 0 0 0 2px var(--rf-color-primary), 0 0 0 5px color-mix(in srgb, var(--rf-color-primary) 20%, transparent);
-}
-.rf-beat--active > span[data-field="label"] {
-	color: var(--rf-color-primary);
-}
+	/* Beat status variants */
+	.rf-beat--complete::before {
+		background: var(--rf-color-success);
+		box-shadow: 0 0 0 2px var(--rf-color-success);
+	}
+	.rf-beat--complete > span[data-field="label"] {
+		color: var(--rf-color-muted);
+	}
 
-.rf-beat--planned::before {
-	background: var(--rf-color-surface-active);
-}
+	.rf-beat--active::before {
+		background: var(--rf-color-primary);
+		box-shadow:
+			0 0 0 2px var(--rf-color-primary),
+			0 0 0 5px color-mix(in srgb, var(--rf-color-primary) 20%, transparent);
+	}
+	.rf-beat--active > span[data-field="label"] {
+		color: var(--rf-color-primary);
+	}
 
-.rf-beat--abandoned > span[data-field="label"] {
-	text-decoration: line-through;
-	color: var(--rf-color-muted);
-}
-.rf-beat--abandoned::before {
-	background: var(--rf-color-muted);
-	box-shadow: 0 0 0 2px var(--rf-color-muted);
-}
+	.rf-beat--planned::before {
+		background: var(--rf-color-surface-active);
+	}
 
+	.rf-beat--abandoned > span[data-field="label"] {
+		text-decoration: line-through;
+		color: var(--rf-color-muted);
+	}
+	.rf-beat--abandoned::before {
+		background: var(--rf-color-muted);
+		box-shadow: 0 0 0 2px var(--rf-color-muted);
+	}
 }

package/styles/runes/preview.css

@@ -1,173 +1,176 @@
 @layer skin {
-/* Preview — Component showcase with theme toggle and width control */
-.rf-preview {
-	margin: 2rem 0;
-}
+	/* Preview — Component showcase with theme toggle and width control */
+	.rf-preview {
+		margin: 2rem 0;
+	}
 
-/* Toolbar — transparent, controls float above the canvas (flush to the canvas
+	/* Toolbar — transparent, controls float above the canvas (flush to the canvas
  * edges, no horizontal inset). */
-.rf-preview__toolbar {
-	padding: 0.25rem 0 0.5rem;
-}
-.rf-preview__title {
-	font-size: var(--rf-text-xs);
-	font-weight: var(--rf-weight-semibold);
-	color: var(--rf-color-muted);
-	text-transform: uppercase;
-	letter-spacing: var(--rf-tracking-wider);
-}
+	.rf-preview__toolbar {
+		padding: 0.25rem 0 0.5rem;
+	}
+	.rf-preview__title {
+		font-size: var(--rf-text-xs);
+		font-weight: var(--rf-weight-semibold);
+		color: var(--rf-color-muted);
+		text-transform: uppercase;
+		letter-spacing: var(--rf-tracking-wider);
+	}
 
-/* Toolbar groups — view-mode toggle on the left, preview-only controls (viewport
+	/* Toolbar groups — view-mode toggle on the left, preview-only controls (viewport
  * + theme) on the right. */
-.rf-preview__controls {
-	gap: 0.5rem;
-}
+	.rf-preview__controls {
+		gap: 0.5rem;
+	}
 
-/* View toggle pill (code/preview) */
-.rf-preview__view-toggle {
-	gap: 0.125rem;
-	background: var(--rf-color-surface-active);
-	border-radius: var(--rf-radius-full);
-	padding: 0.125rem;
-}
+	/* View toggle pill (code/preview) */
+	.rf-preview__view-toggle {
+		gap: 0.125rem;
+		background: var(--rf-color-surface-active);
+		border-radius: var(--rf-radius-full);
+		padding: 0.125rem;
+	}
 
-/* Theme toggle pill */
-.rf-preview__toggle {
-	gap: 0.125rem;
-	background: var(--rf-color-surface-active);
-	border-radius: var(--rf-radius-full);
-	padding: 0.125rem;
-}
-.rf-preview__toggle-btn {
-	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);
-}
+	/* Theme toggle pill */
+	.rf-preview__toggle {
+		gap: 0.125rem;
+		background: var(--rf-color-surface-active);
+		border-radius: var(--rf-radius-full);
+		padding: 0.125rem;
+	}
+	.rf-preview__toggle-btn {
+		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 — framed area for the preview content */
-.rf-preview__canvas {
-	padding: 2rem 2.5rem;
-	background: var(--rf-color-bg);
-	color: var(--rf-color-text);
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-lg);
-}
-/* Centre a standalone mockup whose `data-fit="none"` makes it inline-block —
+	/* Canvas — framed area for the preview content */
+	.rf-preview__canvas {
+		padding: 2rem 2.5rem;
+		background: var(--rf-color-bg);
+		color: var(--rf-color-text);
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-lg);
+	}
+	/* Centre a standalone mockup whose `data-fit="none"` makes it inline-block —
  * margin-inline auto can't centre an inline-block, only its parent's text
  * alignment can. Scoped to a *direct-child* mockup so a card or bento cell
  * that happens to hold a mockup doesn't get its body text centred too. */
-.rf-preview__canvas:has(> .rf-mockup) {
-	text-align: center;
-}
-.rf-preview__canvas > *:first-child {
-	margin-top: 0;
-}
-.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 {
-	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 {
-	transition: max-width 300ms ease;
-}
-.rf-preview__viewport-frame--constrained {
-	border: 1px dashed var(--rf-color-border);
-	border-radius: var(--rf-radius-sm);
-}
-.rf-preview__viewport-label {
-	font-size: var(--rf-text-xs);
-	color: var(--rf-color-muted);
-	font-variant-numeric: tabular-nums;
-}
+	.rf-preview__canvas:has(> .rf-mockup) {
+		text-align: center;
+	}
+	.rf-preview__canvas > *:first-child {
+		margin-top: 0;
+	}
+	.rf-preview__canvas > *:last-child {
+		margin-bottom: 0;
+	}
+	.rf-preview__canvas > [data-rune] + [data-rune] {
+		margin-top: 0.75rem;
+	}
 
-/* Source code view — bordered frame matching the canvas */
-.rf-preview__source {
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-lg);
-}
-.rf-preview__source pre {
-	margin: 0;
-	border-radius: 0;
-}
-.rf-preview__source .rf-codeblock {
-	border-radius: 0;
-	margin: 0;
-}
+	/* Viewport simulation toggle pill */
+	.rf-preview__viewport-toggle {
+		gap: 0.125rem;
+		background: var(--rf-color-surface-active);
+		border-radius: var(--rf-radius-full);
+		padding: 0.125rem;
+	}
 
-/* Source tabs (data-source panels) */
-.rf-preview__source-tabs {
-	gap: 0;
-	background: var(--rf-color-surface);
-	border-radius: var(--rf-radius-lg);
-}
-.rf-preview__source-tab {
-	padding: 0.5rem 1rem;
-	border: none;
-	background: transparent;
-	color: var(--rf-color-muted);
-	font-size: var(--rf-text-xs);
-	font-weight: var(--rf-weight-medium);
-	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);
-}
+	/* Viewport simulation frame */
+	.rf-preview__viewport-frame {
+		transition: max-width 300ms ease;
+	}
+	.rf-preview__viewport-frame--constrained {
+		border: 1px dashed var(--rf-color-border);
+		border-radius: var(--rf-radius-sm);
+	}
+	.rf-preview__viewport-label {
+		font-size: var(--rf-text-xs);
+		color: var(--rf-color-muted);
+		font-variant-numeric: tabular-nums;
+	}
 
-/* Small containers: edge-to-edge bleed */
-@container (max-width: 1280px) {
-	.rf-preview__toolbar {
-		padding: 0.25rem var(--rf-content-padding, 1.5rem) 0.5rem;
+	/* Source code view — bordered frame matching the canvas */
+	.rf-preview__source {
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-lg);
 	}
-	.rf-preview__canvas {
+	.rf-preview__source pre {
+		margin: 0;
 		border-radius: 0;
-		border-left: none;
-		border-right: none;
-		padding: 1.5rem var(--rf-content-padding, 1.5rem);
 	}
-	.rf-preview__source {
+	.rf-preview__source .rf-codeblock {
 		border-radius: 0;
-		border-left: none;
-		border-right: none;
+		margin: 0;
+	}
+
+	/* Source tabs (data-source panels) */
+	.rf-preview__source-tabs {
+		gap: 0;
+		background: var(--rf-color-surface);
+		border-radius: var(--rf-radius-lg);
 	}
-	/* Break out of the feature's padding-inline to reach the viewport edges. Stays
+	.rf-preview__source-tab {
+		padding: 0.5rem 1rem;
+		border: none;
+		background: transparent;
+		color: var(--rf-color-muted);
+		font-size: var(--rf-text-xs);
+		font-weight: var(--rf-weight-medium);
+		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: 1280px) {
+		.rf-preview__toolbar {
+			padding: 0.25rem var(--rf-content-padding, 1.5rem) 0.5rem;
+		}
+		.rf-preview__canvas {
+			border-radius: 0;
+			border-left: none;
+			border-right: none;
+			padding: 1.5rem var(--rf-content-padding, 1.5rem);
+		}
+		.rf-preview__source {
+			border-radius: 0;
+			border-left: none;
+			border-right: none;
+		}
+		/* Break out of the feature's padding-inline to reach the viewport edges. Stays
 	 * skin (not skeleton): this overrides the skin rule `.rf-preview { margin: 2rem 0 }`
 	 * by specificity, and that only wins within the same cascade layer — in
 	 * @layer skeleton it loses to the skin margin and the bleed is nullified. */
-	.rf-preview--in-feature {
-		margin-inline: calc(-1 * var(--rf-content-gutter, 1.5rem));
+		.rf-preview--in-feature {
+			margin-inline: calc(-1 * var(--rf-content-gutter, 1.5rem));
+		}
+		.rf-preview--in-feature .rf-preview__toolbar {
+			padding-inline: var(--rf-content-gutter, 1.5rem);
+		}
 	}
-	.rf-preview--in-feature .rf-preview__toolbar {
-		padding-inline: var(--rf-content-gutter, 1.5rem);
-	}
-}
-
 }