@refrakt-md/lumina 0.32.0 → 0.34.0

package/styles/runes/track.css

@@ -1,99 +1,98 @@
 @layer skin {
-/* Track */
-.rf-track {
-	gap: 0.75rem;
-	padding: 0.75rem 1.25rem;
-	transition: background 0.15s ease;
-}
-.rf-track + .rf-track {
-	border-top: 1px solid var(--rf-color-border);
-}
-.rf-track:hover {
-	background: color-mix(in srgb, var(--rf-color-border) 15%, transparent);
-}
-.rf-track::before {
-	font-size: var(--rf-text-xs);
-	color: var(--rf-color-primary);
-	text-align: right;
-}
+	/* Track */
+	.rf-track {
+		gap: 0.75rem;
+		padding: 0.75rem 1.25rem;
+		transition: background 0.15s ease;
+	}
+	.rf-track + .rf-track {
+		border-top: 1px solid var(--rf-color-border);
+	}
+	.rf-track:hover {
+		background: color-mix(in srgb, var(--rf-color-border) 15%, transparent);
+	}
+	.rf-track::before {
+		font-size: var(--rf-text-xs);
+		color: var(--rf-color-primary);
+		text-align: right;
+	}
 
-/* Track name — primary text, takes remaining space */
-.rf-track__track-name {
-	font-size: var(--rf-text);
-	font-weight: var(--rf-weight-medium);
-	color: var(--rf-color-text);
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
+	/* Track name — primary text, takes remaining space */
+	.rf-track__track-name {
+		font-size: var(--rf-text);
+		font-weight: var(--rf-weight-medium);
+		color: var(--rf-color-text);
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
 
-/* Artist — secondary text with dot separator */
-.rf-track__track-artist {
-	font-size: var(--rf-text-sm);
-	color: var(--rf-color-muted);
-}
-.rf-track__track-artist::before {
-	content: '\00b7';
-	margin-right: 0.5rem;
-	opacity: 0.5;
-}
+	/* Artist — secondary text with dot separator */
+	.rf-track__track-artist {
+		font-size: var(--rf-text-sm);
+		color: var(--rf-color-muted);
+	}
+	.rf-track__track-artist::before {
+		content: "\00b7";
+		margin-right: 0.5rem;
+		opacity: 0.5;
+	}
 
-/* Duration — pushed right, tabular nums */
-.rf-track__track-duration {
-	font-size: var(--rf-text-sm);
-	color: var(--rf-color-muted);
-	font-variant-numeric: tabular-nums;
-	text-align: right;
-}
+	/* Duration — pushed right, tabular nums */
+	.rf-track__track-duration {
+		font-size: var(--rf-text-sm);
+		color: var(--rf-color-muted);
+		font-variant-numeric: tabular-nums;
+		text-align: right;
+	}
 
-/* Meta (date etc.) — dot separator */
-.rf-track__track-meta {
-	font-size: var(--rf-text-xs);
-	color: var(--rf-color-muted);
-}
-.rf-track__track-meta::before {
-	content: '\00b7';
-	margin-right: 0.5rem;
-	opacity: 0.5;
-}
+	/* Meta (date etc.) — dot separator */
+	.rf-track__track-meta {
+		font-size: var(--rf-text-xs);
+		color: var(--rf-color-muted);
+	}
+	.rf-track__track-meta::before {
+		content: "\00b7";
+		margin-right: 0.5rem;
+		opacity: 0.5;
+	}
 
-/* Description — full width below the row */
-.rf-track__track-description {
-	font-size: var(--rf-text-sm);
-	color: var(--rf-color-muted);
-	line-height: var(--rf-leading-normal);
-	padding-top: 0.5rem;
-}
-.rf-track__track-description p {
-	margin: 0;
-}
-
-/* Cue points (lyrics / chapters) */
-.rf-track [data-name="lyrics"],
-.rf-track [data-name="chapters"] {
-	padding: 0.5rem 0 0;
-	margin: 0;
-	font-size: var(--rf-text-sm);
-}
-.rf-track [data-name="lyrics"] li {
-	padding: 0.125rem 0;
-	color: var(--rf-color-muted);
-}
-.rf-track [data-name="lyric"] {
-	margin: 0;
-}
-.rf-track [data-name="chapters"] li {
-	gap: 0.75rem;
-	padding: 0.25rem 0;
-}
-.rf-track [data-name="chapter-name"] {
-	color: var(--rf-color-text);
-	font-weight: var(--rf-weight-medium);
-}
-.rf-track [data-name="chapter-time"] {
-	color: var(--rf-color-muted);
-	font-variant-numeric: tabular-nums;
-}
+	/* Description — full width below the row */
+	.rf-track__track-description {
+		font-size: var(--rf-text-sm);
+		color: var(--rf-color-muted);
+		line-height: var(--rf-leading-normal);
+		padding-top: 0.5rem;
+	}
+	.rf-track__track-description p {
+		margin: 0;
+	}
 
-/* Hide secondary columns on narrow screens */
+	/* Cue points (lyrics / chapters) */
+	.rf-track [data-name="lyrics"],
+	.rf-track [data-name="chapters"] {
+		padding: 0.5rem 0 0;
+		margin: 0;
+		font-size: var(--rf-text-sm);
+	}
+	.rf-track [data-name="lyrics"] li {
+		padding: 0.125rem 0;
+		color: var(--rf-color-muted);
+	}
+	.rf-track [data-name="lyric"] {
+		margin: 0;
+	}
+	.rf-track [data-name="chapters"] li {
+		gap: 0.75rem;
+		padding: 0.25rem 0;
+	}
+	.rf-track [data-name="chapter-name"] {
+		color: var(--rf-color-text);
+		font-weight: var(--rf-weight-medium);
+	}
+	.rf-track [data-name="chapter-time"] {
+		color: var(--rf-color-muted);
+		font-variant-numeric: tabular-nums;
+	}
 
+	/* Hide secondary columns on narrow screens */
 }

package/styles/runes/typography.css

@@ -1,98 +1,96 @@
 @layer skin {
-
-/* WORK-538 — resting title size, so the prominence ramp computes from it
+	/* WORK-538 — resting title size, so the prominence ramp computes from it
  * rather than from the density default. */
-.rf-typography {
-	--rf-title-size: var(--rf-text-lg);
-}
+	.rf-typography {
+		--rf-title-size: var(--rf-text-lg);
+	}
 
-/* Typography — font specimen display */
-.rf-typography__title {
-	/* WORK-538 — read the prominence override first; the fallback is this rune's
+	/* Typography — font specimen display */
+	.rf-typography__title {
+		/* WORK-538 — read the prominence override first; the fallback is this rune's
 	 * resting size, stated as --rf-title-size on the root so the prominence ramp
 	 * can compute from it. */
-	font-size: var(--rf-prominence-size, var(--rf-title-size));
-	font-weight: var(--rf-weight-semibold);
-	margin-bottom: 1rem;
-}
-.rf-typography__specimens {
-	gap: 2rem;
-}
-.rf-typography__specimen {
-	border-radius: var(--rf-radius-lg, 12px);
-	padding: 0;
-}
-.rf-typography__specimen-header {
-	gap: 0.75rem;
-	margin-bottom: 1.25rem;
-	padding-bottom: 0.75rem;
-	border-bottom: 1px solid var(--rf-color-border, #e5e7eb);
-}
-.rf-typography__specimen-role {
-	font-size: var(--rf-text-xs);
-	font-weight: var(--rf-weight-semibold);
-	text-transform: uppercase;
-	letter-spacing: var(--rf-tracking-wider);
-	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: var(--rf-text-sm);
-	color: var(--rf-color-muted);
-}
-.rf-typography__sizes {
-	gap: 0.5rem;
-	margin-bottom: 1rem;
-}
-.rf-typography__size-sample {
-	gap: 1rem;
-	line-height: var(--rf-leading-snug);
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-.rf-typography__size-label {
-	font-size: var(--rf-text-xs);
-	font-family: var(--rf-font-mono, monospace);
-	color: var(--rf-color-muted);
-	text-align: right;
-}
-.rf-typography__weights {
-	gap: 1.5rem;
-	padding-top: 1rem;
-	border-top: 1px solid var(--rf-color-border, #e5e7eb);
-}
-.rf-typography__weight-sample {
-	gap: 0.25rem;
-}
-.rf-typography__weight-label {
-	font-size: var(--rf-text-xs);
-	font-family: var(--rf-font-mono, monospace);
-	color: var(--rf-color-muted);
-}
-.rf-typography__charset {
-	margin-top: 1rem;
-	padding-top: 1rem;
-	border-top: 1px solid var(--rf-color-border, #e5e7eb);
-	font-size: var(--rf-text-sm);
-	line-height: var(--rf-leading-relaxed);
-	letter-spacing: var(--rf-tracking-wider);
-	word-break: break-all;
-	color: var(--rf-color-muted);
-}
-
-/* Context-aware: no outer border when inside design-context (parent already has one) */
-.rf-typography--in-design-context {
-	margin: 0;
-}
-.rf-typography--in-design-context .rf-typography__specimen {
-	border: none;
-	border-radius: 0;
-	padding: 0;
-}
-.rf-typography--in-design-context .rf-typography__specimen + .rf-typography__specimen {
-	padding-top: 1.5rem;
-}
+		font-size: var(--rf-prominence-size, var(--rf-title-size));
+		font-weight: var(--rf-weight-semibold);
+		margin-bottom: 1rem;
+	}
+	.rf-typography__specimens {
+		gap: 2rem;
+	}
+	.rf-typography__specimen {
+		border-radius: var(--rf-radius-lg, 12px);
+		padding: 0;
+	}
+	.rf-typography__specimen-header {
+		gap: 0.75rem;
+		margin-bottom: 1.25rem;
+		padding-bottom: 0.75rem;
+		border-bottom: 1px solid var(--rf-color-border, #e5e7eb);
+	}
+	.rf-typography__specimen-role {
+		font-size: var(--rf-text-xs);
+		font-weight: var(--rf-weight-semibold);
+		text-transform: uppercase;
+		letter-spacing: var(--rf-tracking-wider);
+		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: var(--rf-text-sm);
+		color: var(--rf-color-muted);
+	}
+	.rf-typography__sizes {
+		gap: 0.5rem;
+		margin-bottom: 1rem;
+	}
+	.rf-typography__size-sample {
+		gap: 1rem;
+		line-height: var(--rf-leading-snug);
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.rf-typography__size-label {
+		font-size: var(--rf-text-xs);
+		font-family: var(--rf-font-mono, monospace);
+		color: var(--rf-color-muted);
+		text-align: right;
+	}
+	.rf-typography__weights {
+		gap: 1.5rem;
+		padding-top: 1rem;
+		border-top: 1px solid var(--rf-color-border, #e5e7eb);
+	}
+	.rf-typography__weight-sample {
+		gap: 0.25rem;
+	}
+	.rf-typography__weight-label {
+		font-size: var(--rf-text-xs);
+		font-family: var(--rf-font-mono, monospace);
+		color: var(--rf-color-muted);
+	}
+	.rf-typography__charset {
+		margin-top: 1rem;
+		padding-top: 1rem;
+		border-top: 1px solid var(--rf-color-border, #e5e7eb);
+		font-size: var(--rf-text-sm);
+		line-height: var(--rf-leading-relaxed);
+		letter-spacing: var(--rf-tracking-wider);
+		word-break: break-all;
+		color: var(--rf-color-muted);
+	}
 
+	/* Context-aware: no outer border when inside design-context (parent already has one) */
+	.rf-typography--in-design-context {
+		margin: 0;
+	}
+	.rf-typography--in-design-context .rf-typography__specimen {
+		border: none;
+		border-radius: 0;
+		padding: 0;
+	}
+	.rf-typography--in-design-context .rf-typography__specimen + .rf-typography__specimen {
+		padding-top: 1.5rem;
+	}
 }

package/styles/runes/work.css

@@ -1,49 +1,60 @@
 @layer skin {
-/* Work */
+	/* Work */
 
-/* SPEC-080: eyebrow / metadata / tags are projected blocks placed at the
+	/* SPEC-080: eyebrow / metadata / tags are projected blocks placed at the
  * rune root via `layout`. Geometry comes from the universal
  * `[data-zone-layout]` selectors in dimensions/metadata.css; this file
  * carries the work-specific spacing + complexity dots + assignee prefix. */
 
-.rf-work__eyebrow {
-	margin-bottom: 0.75rem;
-}
+	.rf-work__eyebrow {
+		margin-bottom: 0.75rem;
+	}
 
-.rf-work__title h1,
-.rf-work__title h2,
-.rf-work__title h3 {
-	margin-top: 0;
-}
+	.rf-work__title h1,
+	.rf-work__title h2,
+	.rf-work__title h3 {
+		margin-top: 0;
+	}
 
-.rf-work__metadata {
-	margin-bottom: 1.5rem;
-}
+	.rf-work__metadata {
+		margin-bottom: 1.5rem;
+	}
 
-/* Assignee — `@` prefix on the plain-text def-list value. Targets the
+	/* Assignee — `@` prefix on the plain-text def-list value. Targets the
  * row by field name so milestone / tags don't get the prefix too. */
-.rf-work__metadata [data-field="assignee"] dd .rf-badge::before { content: '@'; }
-
-.rf-work__body {
-	font-size: var(--rf-text-sm);
-	line-height: var(--rf-leading-relaxed);
-}
-.rf-work__body > section {
-	margin-top: 1rem;
-	padding-top: 0.75rem;
-	border-top: 1px solid var(--rf-color-border);
-}
-.rf-work__body > section:first-child {
-	margin-top: 0.75rem;
-}
-
-/* Complexity dots — appended after the value cell in the def-list. The
+	.rf-work__metadata [data-field="assignee"] dd .rf-badge::before {
+		content: "@";
+	}
+
+	.rf-work__body {
+		font-size: var(--rf-text-sm);
+		line-height: var(--rf-leading-relaxed);
+	}
+	.rf-work__body > section {
+		margin-top: 1rem;
+		padding-top: 0.75rem;
+		border-top: 1px solid var(--rf-color-border);
+	}
+	.rf-work__body > section:first-child {
+		margin-top: 0.75rem;
+	}
+
+	/* Complexity dots — appended after the value cell in the def-list. The
  * `data-complexity` attribute lives on the root work element (set by
  * engine modifier processing). */
-[data-complexity="trivial"]  .rf-work__metadata [data-field="complexity"] dd::after { content: '  ●'; }
-[data-complexity="simple"]   .rf-work__metadata [data-field="complexity"] dd::after { content: '  ●●'; }
-[data-complexity="moderate"] .rf-work__metadata [data-field="complexity"] dd::after { content: '  ●●●'; }
-[data-complexity="complex"]  .rf-work__metadata [data-field="complexity"] dd::after { content: '  ●●●●'; }
-[data-complexity="unknown"]  .rf-work__metadata [data-field="complexity"] dd::after { content: '  ?'; }
-
+	[data-complexity="trivial"] .rf-work__metadata [data-field="complexity"] dd::after {
+		content: "  ●";
+	}
+	[data-complexity="simple"] .rf-work__metadata [data-field="complexity"] dd::after {
+		content: "  ●●";
+	}
+	[data-complexity="moderate"] .rf-work__metadata [data-field="complexity"] dd::after {
+		content: "  ●●●";
+	}
+	[data-complexity="complex"] .rf-work__metadata [data-field="complexity"] dd::after {
+		content: "  ●●●●";
+	}
+	[data-complexity="unknown"] .rf-work__metadata [data-field="complexity"] dd::after {
+		content: "  ?";
+	}
 }

package/styles/runes/xref.css

@@ -1,30 +1,29 @@
 @layer skin {
-/* Xref — inline cross-reference link */
+	/* Xref — inline cross-reference link */
 
-.rf-xref {
-	/* Inherits normal link styling from the theme */
-}
+	.rf-xref {
+		/* Inherits normal link styling from the theme */
+	}
 
-/* External — pattern-resolved refs and any other type that doesn't have a
+	/* External — pattern-resolved refs and any other type that doesn't have a
  * dedicated treatment. A subtle outbound indicator distinguishes these
  * from local refs without being noisy. */
-.rf-xref--external {
-	/* Theme-inherited link colour; outbound indicator via a small inline
+	.rf-xref--external {
+		/* Theme-inherited link colour; outbound indicator via a small inline
 	 * arrow that adapts to RTL via the logical-property side. */
-}
-.rf-xref--external::after {
-	content: '\2197'; /* ↗ */
-	margin-inline-start: 0.15em;
-	font-size: 0.85em;
-	vertical-align: 0.05em;
-	opacity: 0.6;
-}
-
-/* Unresolved reference */
-.rf-xref--unresolved {
-	text-decoration: underline dashed;
-	color: var(--rf-color-muted);
-	cursor: help;
-}
+	}
+	.rf-xref--external::after {
+		content: "\2197"; /* ↗ */
+		margin-inline-start: 0.15em;
+		font-size: 0.85em;
+		vertical-align: 0.05em;
+		opacity: 0.6;
+	}
 
+	/* Unresolved reference */
+	.rf-xref--unresolved {
+		text-decoration: underline dashed;
+		color: var(--rf-color-muted);
+		cursor: help;
+	}
 }