@refrakt-md/lumina 0.21.0 → 0.23.0

package/styles/runes/symbol.css

@@ -1,4 +1,7 @@
-/* Symbol */
+@layer skin {
+/* Symbol — skin. The list display resets live in @refrakt-md/skeleton
+ * (styles/runes/symbol.css); the signature-bar geometry comes from the shared
+ * [data-zone-layout="bar"]. */
 
 /* SPEC-080: signature bar (kind/lang chips + source link). Geometry +
  * the source link's right-push come from [data-zone-layout="bar"]; the
@@ -7,7 +10,7 @@
 	padding: 0.5rem 0;
 }
 .rf-symbol__eyebrow [data-meta-type="link"] {
-	font-size: 0.75rem;
+	font-size: var(--rf-text-xs);
 	color: var(--rf-color-muted);
 	text-decoration: none;
 }
@@ -30,14 +33,13 @@
 	margin: 1rem 0;
 }
 .rf-symbol__body > div > ul {
-	list-style: none;
 	padding-left: 0;
 	margin: 1rem 0;
 }
 .rf-symbol__body > div > ul > li {
 	padding: 0.375rem 0;
 	border-bottom: 1px solid var(--rf-color-border);
-	font-size: 0.9375rem;
+	font-size: var(--rf-text);
 }
 .rf-symbol__body > div > ul > li:last-child {
 	border-bottom: none;
@@ -45,11 +47,10 @@
 .rf-symbol__body > div > ul > li > ul {
 	margin-top: 0.375rem;
 	padding-left: 1.25rem;
-	list-style: none;
 }
 .rf-symbol__body > div > ul > li > ul > li {
 	padding: 0.25rem 0;
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
 .rf-symbol__body blockquote {
@@ -57,7 +58,7 @@
 	padding: 0.5rem 1rem;
 	margin: 0.75rem 0;
 	border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0;
-	font-size: 0.9375rem;
+	font-size: var(--rf-text);
 }
 .rf-symbol__body blockquote::before {
 	content: none;
@@ -83,10 +84,10 @@
 	border-top: none;
 }
 .rf-symbol-group h3 {
-	font-size: 0.75rem;
-	font-weight: 700;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-bold);
 	text-transform: uppercase;
-	letter-spacing: 0.05em;
+	letter-spacing: var(--rf-tracking-wider);
 	color: var(--rf-color-muted);
 	margin: 0 0 1rem;
 }
@@ -99,28 +100,29 @@
 .rf-symbol-member h4 {
 	margin: 0 0 0.5rem;
 	font-family: var(--rf-font-mono);
-	font-size: 1rem;
+	font-size: var(--rf-text);
 }
 .rf-symbol-member pre {
 	border-radius: var(--rf-radius-sm);
 	margin: 0.75rem 0;
 }
 .rf-symbol-member ul {
-	list-style: none;
 	padding-left: 0;
 	margin: 0.75rem 0;
 }
 .rf-symbol-member li {
 	padding: 0.25rem 0;
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 }
 .rf-symbol-member blockquote {
 	border-left: 3px solid var(--rf-color-border);
 	padding: 0.375rem 0.75rem;
 	margin: 0.5rem 0;
 	border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0;
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 }
 .rf-symbol-member blockquote::before {
 	content: none;
 }
+
+}

package/styles/runes/tabs.css

@@ -1,30 +1,30 @@
-/* Tabs */
+@layer skin {
+/* Tabs — skin. The eyebrow stretched-link, the scrollable tab strip, and the tab
+ * flex live in @refrakt-md/skeleton (styles/runes/tabs.css). */
 .rf-tabs__preamble {
 	margin-bottom: 1.5rem;
 }
 .rf-tabs__eyebrow {
-	font-size: 0.8125rem;
-	font-weight: 600;
-	letter-spacing: 0.05em;
+	font-size: var(--rf-text-sm);
+	font-weight: var(--rf-weight-semibold);
+	letter-spacing: var(--rf-tracking-wider);
 	text-transform: uppercase;
 	color: var(--rf-color-primary);
 	margin: 0 0 0.5rem;
 }
 .rf-tabs__eyebrow:has(a) {
-	display: inline-block;
-	position: relative;
 	padding: 0.25rem 0.875rem;
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-full);
 	color: var(--rf-color-text);
-	font-weight: 400;
+	font-weight: var(--rf-weight-normal);
 	text-transform: none;
-	letter-spacing: 0;
+	letter-spacing: var(--rf-tracking-normal);
 	transition: border-color 150ms ease;
 }
 .rf-tabs__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
-.rf-tabs__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: 600; text-decoration: none; }
-.rf-tabs__eyebrow:has(a) a::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
+.rf-tabs__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: var(--rf-weight-semibold); text-decoration: none; }
+.rf-tabs__eyebrow:has(a) a::before { border-radius: inherit; }
 .rf-tabs__headline {
 	margin-top: 0;
 }
@@ -38,11 +38,7 @@
 
 /* Tab bar — clean bottom line, no background */
 .rf-tabs__tabs {
-	display: flex;
 	border-bottom: 1px solid var(--rf-color-border);
-	overflow-x: auto;
-	overflow-y: hidden;
-	-webkit-overflow-scrolling: touch;
 }
 .rf-tabs__panels {
 	padding: 0;
@@ -51,10 +47,9 @@
 
 /* Tab buttons */
 .rf-tab {
-	flex: 0 0 auto;
 	padding: 0.625rem 1.25rem;
-	font-size: 0.875rem;
-	font-weight: 500;
+	font-size: var(--rf-text-sm);
+	font-weight: var(--rf-weight-medium);
 	color: var(--rf-color-muted);
 	background: none;
 	border: none;
@@ -70,7 +65,7 @@
 .rf-tab--active {
 	color: var(--rf-color-primary);
 	border-bottom-color: var(--rf-color-primary);
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 }
 
 /* Panel content — breathing room */
@@ -86,3 +81,5 @@
 .rf-tab-panel pre {
 	margin: 0;
 }
+
+}

package/styles/runes/testimonial.css

@@ -1,4 +1,6 @@
-/* Testimonial */
+@layer skin {
+/* Testimonial — skin. The author block display + avatar box (size/crop) live in
+ * @refrakt-md/skeleton (styles/runes/testimonial.css). */
 .rf-testimonial {
 	border-radius: var(--rf-radius-lg);
 	padding: 1.75rem 2rem;
@@ -8,15 +10,15 @@
  * treatment; this rule only owns the spacing below the row. */
 .rf-testimonial__rating {
 	margin-bottom: 0.75rem;
-	font-size: 1.1rem;
+	font-size: var(--rf-text-lg);
 }
 .rf-testimonial blockquote {
 	border: none;
 	padding: 0;
 	margin: 0 0 1rem;
-	font-size: 1.05rem;
+	font-size: var(--rf-text);
 	font-style: italic;
-	line-height: 1.7;
+	line-height: var(--rf-leading-relaxed);
 	color: var(--rf-color-text);
 	background: none;
 	border-radius: 0;
@@ -28,22 +30,19 @@
 	margin: 0;
 }
 .rf-testimonial__author-name {
-	display: block;
-	font-weight: 700;
+	font-weight: var(--rf-weight-bold);
 	font-style: normal;
-	font-size: 0.925rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-text);
 }
 .rf-testimonial__author-role {
-	display: block;
 	margin-top: 0.125rem;
-	font-size: 0.85rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
-.rf-testimonial img {
-	width: 48px;
-	height: 48px;
+.rf-testimonial :is(img, .rf-placeholder) {
 	border-radius: 50%;
-	object-fit: cover;
 	margin-top: 0.75rem;
 }
+
+}

package/styles/runes/textblock.css

@@ -1,13 +1,9 @@
-/* TextBlock */
-.rf-textblock__body {
-	display: block;
-}
+@layer skin {
 
 /* Drop cap — decorative first letter */
 .rf-textblock--dropcap .rf-textblock__body > p:first-child::first-letter {
-	float: left;
 	font-size: 3.5em;
-	font-weight: 700;
+	font-weight: var(--rf-weight-bold);
 	line-height: 0.8;
 	padding-right: 0.1em;
 	margin-top: 0.05em;
@@ -17,25 +13,22 @@
 
 /* Lead paragraph — emphasized opening text */
 .rf-textblock--lead .rf-textblock__body > p:first-child {
-	font-size: 1.25rem;
-	line-height: 1.6;
-	font-weight: 400;
+	font-size: var(--rf-text-xl);
+	line-height: var(--rf-leading-relaxed);
+	font-weight: var(--rf-weight-normal);
 	color: var(--rf-color-text);
 }
 
 /* Multi-column text flow */
 .rf-textblock[data-columns="2"] .rf-textblock__body {
-	column-count: 2;
 	column-gap: 2rem;
 	column-rule: 1px solid var(--rf-color-border);
 }
 .rf-textblock[data-columns="3"] .rf-textblock__body {
-	column-count: 3;
 	column-gap: 2rem;
 	column-rule: 1px solid var(--rf-color-border);
 }
 .rf-textblock[data-columns="4"] .rf-textblock__body {
-	column-count: 4;
 	column-gap: 2rem;
 	column-rule: 1px solid var(--rf-color-border);
 }
@@ -46,16 +39,5 @@
 .rf-textblock--justify .rf-textblock__body { text-align: justify; }
 
 /* Responsive — columns collapse on smaller screens */
-@media (max-width: 768px) {
-	.rf-textblock[data-columns="3"] .rf-textblock__body,
-	.rf-textblock[data-columns="4"] .rf-textblock__body {
-		column-count: 2;
-	}
-}
-@media (max-width: 480px) {
-	.rf-textblock[data-columns="2"] .rf-textblock__body,
-	.rf-textblock[data-columns="3"] .rf-textblock__body,
-	.rf-textblock[data-columns="4"] .rf-textblock__body {
-		column-count: 1;
-	}
+
 }

package/styles/runes/timeline.css

@@ -1,36 +1,31 @@
+@layer skin {
 /* Timeline */
 .rf-timeline {
 	margin: 2rem 0;
 }
 .rf-timeline ol {
-	list-style: none;
 	padding: 0;
 	margin: 0;
 }
-.rf-timeline-entry {
-	position: relative;
-}
 .rf-timeline-entry:last-child {
 	padding-bottom: 0;
 }
 .rf-timeline-entry > time {
-	display: block;
-	font-size: 0.8rem;
-	font-weight: 600;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-primary);
-	letter-spacing: 0.02em;
+	letter-spacing: var(--rf-tracking-wide);
 	margin-bottom: 0.25rem;
 }
 .rf-timeline-entry > span {
-	display: block;
-	font-size: 1.05rem;
-	font-weight: 700;
+	font-size: var(--rf-text);
+	font-weight: var(--rf-weight-bold);
 	color: var(--rf-color-text);
 	margin-bottom: 0.5rem;
 }
 .rf-timeline-entry__body {
-	font-size: 0.925rem;
-	line-height: 1.65;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 	color: var(--rf-color-muted);
 }
 .rf-timeline-entry__body p:last-child {
@@ -48,12 +43,6 @@
 	border-left-color: transparent;
 }
 .rf-timeline--vertical .rf-timeline-entry::before {
-	content: '';
-	position: absolute;
-	left: -0.4375rem;
-	top: 0.25rem;
-	width: 0.75rem;
-	height: 0.75rem;
 	border-radius: 50%;
 	background: var(--rf-color-primary);
 	border: 2px solid var(--rf-color-bg);
@@ -62,25 +51,18 @@
 
 /* Horizontal timeline */
 .rf-timeline--horizontal ol {
-	display: flex;
 	gap: 2rem;
-	overflow-x: auto;
 	padding: 2rem 0 1rem;
 }
 .rf-timeline--horizontal .rf-timeline-entry {
-	min-width: 12rem;
 	padding-top: 1.5rem;
 	border-top: 2px solid var(--rf-color-border);
 }
 .rf-timeline--horizontal .rf-timeline-entry::before {
-	content: '';
-	position: absolute;
-	top: -0.4375rem;
-	left: 0.5rem;
-	width: 0.75rem;
-	height: 0.75rem;
 	border-radius: 50%;
 	background: var(--rf-color-primary);
 	border: 2px solid var(--rf-color-bg);
 	box-shadow: 0 0 0 2px var(--rf-color-primary);
 }
+
+}

package/styles/runes/tint.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Tint Rune — Colour Token Bridge
  *
  * Maps --tint-* custom properties (set by the identity transform) to
@@ -247,3 +248,5 @@
 	--rf-color-primary: var(--tint-primary, var(--cs-accent));
 	--rf-color-border: var(--tint-border, var(--cs-border));
 }
+
+}

package/styles/runes/toc.css

@@ -1,4 +1,6 @@
-/* Table of Contents */
+@layer skin {
+/* Table of Contents — skin. The list reset + the inline-block link live in
+ * @refrakt-md/skeleton (styles/runes/toc.css). */
 .rf-toc {
 	padding: 1.25rem 1.5rem;
 	border-left: 3px solid var(--rf-color-primary);
@@ -6,16 +8,15 @@
 	border-radius: 0 var(--rf-radius-md) var(--rf-radius-md) 0;
 }
 .rf-toc__list {
-	font-weight: 650;
+	font-weight: var(--rf-weight-semibold);
 	margin-bottom: 0.75rem;
-	font-size: 0.7rem;
+	font-size: var(--rf-text-xs);
 	text-transform: uppercase;
-	letter-spacing: 0.06em;
+	letter-spacing: var(--rf-tracking-wider);
 	color: var(--rf-color-muted);
 }
 .rf-toc ul,
 .rf-toc ol {
-	list-style: none;
 	padding-left: 0;
 	margin: 0;
 }
@@ -31,8 +32,7 @@
 .rf-toc a {
 	color: var(--rf-color-text);
 	text-decoration: none;
-	font-size: 0.85rem;
-	display: inline-block;
+	font-size: var(--rf-text-sm);
 	padding: 0.2rem 0;
 	transition: color 150ms ease;
 }
@@ -40,3 +40,5 @@
 	color: var(--rf-color-primary);
 	text-decoration: none;
 }
+
+}

package/styles/runes/track.css

@@ -1,11 +1,9 @@
+@layer skin {
 /* Track */
 .rf-track {
-	display: flex;
-	align-items: center;
 	gap: 0.75rem;
 	padding: 0.75rem 1.25rem;
 	transition: background 0.15s ease;
-	counter-increment: track;
 }
 .rf-track + .rf-track {
 	border-top: 1px solid var(--rf-color-border);
@@ -14,31 +12,24 @@
 	background: color-mix(in srgb, var(--rf-color-border) 15%, transparent);
 }
 .rf-track::before {
-	content: counter(track);
-	min-width: 1.5rem;
-	font-size: 0.8rem;
+	font-size: var(--rf-text-xs);
 	color: var(--rf-color-primary);
 	text-align: right;
-	flex-shrink: 0;
 }
 
 /* Track name — primary text, takes remaining space */
 .rf-track__track-name {
-	flex: 1;
-	font-size: 0.9375rem;
-	font-weight: 500;
+	font-size: var(--rf-text);
+	font-weight: var(--rf-weight-medium);
 	color: var(--rf-color-text);
-	min-width: 0;
-	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
 /* Artist — secondary text with dot separator */
 .rf-track__track-artist {
-	font-size: 0.8125rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
-	flex-shrink: 0;
 }
 .rf-track__track-artist::before {
 	content: '\00b7';
@@ -48,20 +39,16 @@
 
 /* Duration — pushed right, tabular nums */
 .rf-track__track-duration {
-	font-size: 0.8125rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 	font-variant-numeric: tabular-nums;
-	flex-shrink: 0;
-	margin-left: auto;
-	min-width: 3rem;
 	text-align: right;
 }
 
 /* Meta (date etc.) — dot separator */
 .rf-track__track-meta {
-	font-size: 0.75rem;
+	font-size: var(--rf-text-xs);
 	color: var(--rf-color-muted);
-	flex-shrink: 0;
 }
 .rf-track__track-meta::before {
 	content: '\00b7';
@@ -71,29 +58,21 @@
 
 /* Description — full width below the row */
 .rf-track__track-description {
-	flex-basis: 100%;
-	font-size: 0.8125rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
-	line-height: 1.5;
+	line-height: var(--rf-leading-normal);
 	padding-top: 0.5rem;
 }
 .rf-track__track-description p {
 	margin: 0;
 }
 
-/* Wrap when description is present */
-.rf-track:has(.rf-track__track-description) {
-	flex-wrap: wrap;
-}
-
 /* Cue points (lyrics / chapters) */
 .rf-track [data-name="lyrics"],
 .rf-track [data-name="chapters"] {
-	flex-basis: 100%;
-	list-style: none;
 	padding: 0.5rem 0 0;
 	margin: 0;
-	font-size: 0.8125rem;
+	font-size: var(--rf-text-sm);
 }
 .rf-track [data-name="lyrics"] li {
 	padding: 0.125rem 0;
@@ -103,26 +82,18 @@
 	margin: 0;
 }
 .rf-track [data-name="chapters"] li {
-	display: flex;
 	gap: 0.75rem;
 	padding: 0.25rem 0;
 }
 .rf-track [data-name="chapter-name"] {
 	color: var(--rf-color-text);
-	font-weight: 500;
+	font-weight: var(--rf-weight-medium);
 }
 .rf-track [data-name="chapter-time"] {
 	color: var(--rf-color-muted);
 	font-variant-numeric: tabular-nums;
-	margin-left: auto;
 }
 
 /* Hide secondary columns on narrow screens */
-@media (max-width: 480px) {
-	.rf-track__track-artist {
-		display: none;
-	}
-	.rf-track__track-meta {
-		display: none;
-	}
+
 }

package/styles/runes/typography.css

@@ -1,12 +1,11 @@
+@layer skin {
 /* Typography — font specimen display */
 .rf-typography__title {
-	font-size: 1.125rem;
-	font-weight: 600;
+	font-size: var(--rf-text-lg);
+	font-weight: var(--rf-weight-semibold);
 	margin-bottom: 1rem;
 }
 .rf-typography__specimens {
-	display: flex;
-	flex-direction: column;
 	gap: 2rem;
 }
 .rf-typography__specimen {
@@ -14,64 +13,51 @@
 	padding: 0;
 }
 .rf-typography__specimen-header {
-	display: flex;
-	align-items: baseline;
 	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: 0.75rem;
-	font-weight: 600;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-semibold);
 	text-transform: uppercase;
-	letter-spacing: 0.05em;
+	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: 0.9rem;
+	font-size: var(--rf-text-sm);
 	color: var(--rf-color-muted);
 }
 .rf-typography__sizes {
-	display: flex;
-	flex-direction: column;
 	gap: 0.5rem;
 	margin-bottom: 1rem;
 }
 .rf-typography__size-sample {
-	display: flex;
-	align-items: baseline;
 	gap: 1rem;
-	line-height: 1.3;
-	overflow: hidden;
+	line-height: var(--rf-leading-snug);
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 .rf-typography__size-label {
-	flex-shrink: 0;
-	font-size: 0.7rem;
+	font-size: var(--rf-text-xs);
 	font-family: var(--rf-font-mono, monospace);
 	color: var(--rf-color-muted);
-	min-width: 3rem;
 	text-align: right;
 }
 .rf-typography__weights {
-	display: flex;
 	gap: 1.5rem;
-	flex-wrap: wrap;
 	padding-top: 1rem;
 	border-top: 1px solid var(--rf-color-border, #e5e7eb);
 }
 .rf-typography__weight-sample {
-	display: flex;
-	flex-direction: column;
 	gap: 0.25rem;
 }
 .rf-typography__weight-label {
-	font-size: 0.7rem;
+	font-size: var(--rf-text-xs);
 	font-family: var(--rf-font-mono, monospace);
 	color: var(--rf-color-muted);
 }
@@ -79,9 +65,9 @@
 	margin-top: 1rem;
 	padding-top: 1rem;
 	border-top: 1px solid var(--rf-color-border, #e5e7eb);
-	font-size: 0.875rem;
-	line-height: 1.8;
-	letter-spacing: 0.05em;
+	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);
 }
@@ -98,3 +84,5 @@
 .rf-typography--in-design-context .rf-typography__specimen + .rf-typography__specimen {
 	padding-top: 1.5rem;
 }
+
+}

package/styles/runes/work.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Work */
 
 /* SPEC-080: eyebrow / metadata / tags are projected blocks placed at the
@@ -24,8 +25,8 @@
 .rf-work__metadata [data-field="assignee"] dd .rf-badge::before { content: '@'; }
 
 .rf-work__body {
-	font-size: 0.925rem;
-	line-height: 1.65;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-work__body > section {
 	margin-top: 1rem;
@@ -44,3 +45,5 @@
 [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: '  ?'; }
+
+}