@refrakt-md/lumina 0.32.0 → 0.34.0

package/styles/runes/tabs.css

@@ -1,85 +1,94 @@
 @layer skin {
-/* Tabs — skin. The eyebrow stretched-link, the scrollable tab strip, and the tab
+	/* 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: 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) {
-	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: var(--rf-weight-normal);
-	text-transform: none;
-	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: var(--rf-weight-semibold); text-decoration: none; }
-.rf-tabs__eyebrow:has(a) a::before { border-radius: inherit; }
-.rf-tabs__headline {
-	margin-top: 0;
-}
-.rf-tabs__blurb {
-	color: var(--rf-color-muted);
-	margin-bottom: 0;
-}
-.rf-tabs__image {
-	margin-bottom: 1rem;
-}
-
-/* Tab bar — clean bottom line, no background */
-.rf-tabs__tabs {
-	border-bottom: 1px solid var(--rf-color-border);
-}
-.rf-tabs__panels {
-	padding: 0;
-	margin: 0;
-}
+	.rf-tabs__preamble {
+		margin-bottom: 1.5rem;
+	}
+	.rf-tabs__eyebrow {
+		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) {
+		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: var(--rf-weight-normal);
+		text-transform: none;
+		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: var(--rf-weight-semibold);
+		text-decoration: none;
+	}
+	.rf-tabs__eyebrow:has(a) a::before {
+		border-radius: inherit;
+	}
+	.rf-tabs__headline {
+		margin-top: 0;
+	}
+	.rf-tabs__blurb {
+		color: var(--rf-color-muted);
+		margin-bottom: 0;
+	}
+	.rf-tabs__image {
+		margin-bottom: 1rem;
+	}
 
-/* Tab buttons */
-.rf-tab {
-	padding: 0.625rem 1.25rem;
-	font-size: var(--rf-text-sm);
-	font-weight: var(--rf-weight-medium);
-	color: var(--rf-color-muted);
-	background: none;
-	border: none;
-	border-bottom: 2px solid transparent;
-	cursor: pointer;
-	transition: color 200ms ease, border-color 200ms ease;
-	white-space: nowrap;
-	font-family: inherit;
-}
-.rf-tab:hover {
-	color: var(--rf-color-text);
-}
-.rf-tab--active {
-	color: var(--rf-color-primary);
-	border-bottom-color: var(--rf-color-primary);
-	font-weight: var(--rf-weight-semibold);
-}
+	/* Tab bar — clean bottom line, no background */
+	.rf-tabs__tabs {
+		border-bottom: 1px solid var(--rf-color-border);
+	}
+	.rf-tabs__panels {
+		padding: 0;
+		margin: 0;
+	}
 
-/* Panel content — breathing room */
-.rf-tab-panel {
-	padding: 1.5rem 0;
-}
-.rf-tab-panel > *:first-child {
-	margin-top: 0;
-}
-.rf-tab-panel > *:last-child {
-	margin-bottom: 0;
-}
-.rf-tab-panel pre {
-	margin: 0;
-}
+	/* Tab buttons */
+	.rf-tab {
+		padding: 0.625rem 1.25rem;
+		font-size: var(--rf-text-sm);
+		font-weight: var(--rf-weight-medium);
+		color: var(--rf-color-muted);
+		background: none;
+		border: none;
+		border-bottom: 2px solid transparent;
+		cursor: pointer;
+		transition:
+			color 200ms ease,
+			border-color 200ms ease;
+		white-space: nowrap;
+		font-family: inherit;
+	}
+	.rf-tab:hover {
+		color: var(--rf-color-text);
+	}
+	.rf-tab--active {
+		color: var(--rf-color-primary);
+		border-bottom-color: var(--rf-color-primary);
+		font-weight: var(--rf-weight-semibold);
+	}
 
+	/* Panel content — breathing room */
+	.rf-tab-panel {
+		padding: 1.5rem 0;
+	}
+	.rf-tab-panel > *:first-child {
+		margin-top: 0;
+	}
+	.rf-tab-panel > *:last-child {
+		margin-bottom: 0;
+	}
+	.rf-tab-panel pre {
+		margin: 0;
+	}
 }

package/styles/runes/testimonial.css

@@ -1,48 +1,47 @@
 @layer skin {
-/* Testimonial — skin. The author block display + avatar box (size/crop) live in
+	/* 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;
-	background: var(--rf-color-surface);
-}
-/* Rating block — stars rendered by the shared `[data-meta-type=rating]`
+	.rf-testimonial {
+		border-radius: var(--rf-radius-lg);
+		padding: 1.75rem 2rem;
+		background: var(--rf-color-surface);
+	}
+	/* Rating block — stars rendered by the shared `[data-meta-type=rating]`
  * treatment; this rule only owns the spacing below the row. */
-.rf-testimonial__rating {
-	margin-bottom: 0.75rem;
-	font-size: var(--rf-text-lg);
-}
-.rf-testimonial blockquote {
-	border: none;
-	padding: 0;
-	margin: 0 0 1rem;
-	font-size: var(--rf-text);
-	font-style: italic;
-	line-height: var(--rf-leading-relaxed);
-	color: var(--rf-color-text);
-	background: none;
-	border-radius: 0;
-}
-.rf-testimonial blockquote::before {
-	display: none;
-}
-.rf-testimonial blockquote p {
-	margin: 0;
-}
-.rf-testimonial__author-name {
-	font-weight: var(--rf-weight-bold);
-	font-style: normal;
-	font-size: var(--rf-text-sm);
-	color: var(--rf-color-text);
-}
-.rf-testimonial__author-role {
-	margin-top: 0.125rem;
-	font-size: var(--rf-text-sm);
-	color: var(--rf-color-muted);
-}
-.rf-testimonial :is(img, .rf-placeholder) {
-	border-radius: 50%;
-	margin-top: 0.75rem;
-}
-
+	.rf-testimonial__rating {
+		margin-bottom: 0.75rem;
+		font-size: var(--rf-text-lg);
+	}
+	.rf-testimonial blockquote {
+		border: none;
+		padding: 0;
+		margin: 0 0 1rem;
+		font-size: var(--rf-text);
+		font-style: italic;
+		line-height: var(--rf-leading-relaxed);
+		color: var(--rf-color-text);
+		background: none;
+		border-radius: 0;
+	}
+	.rf-testimonial blockquote::before {
+		display: none;
+	}
+	.rf-testimonial blockquote p {
+		margin: 0;
+	}
+	.rf-testimonial__author-name {
+		font-weight: var(--rf-weight-bold);
+		font-style: normal;
+		font-size: var(--rf-text-sm);
+		color: var(--rf-color-text);
+	}
+	.rf-testimonial__author-role {
+		margin-top: 0.125rem;
+		font-size: var(--rf-text-sm);
+		color: var(--rf-color-muted);
+	}
+	.rf-testimonial :is(img, .rf-placeholder) {
+		border-radius: 50%;
+		margin-top: 0.75rem;
+	}
 }

package/styles/runes/textblock.css

@@ -1,36 +1,40 @@
 @layer skin {
-
-/* Drop cap is now the universal SPEC-108 opt-in, styled on
+	/* Drop cap is now the universal SPEC-108 opt-in, styled on
  * `[data-reading="prose"][data-dropcap]` (dimensions/reading.css); textblock's
  * body reads as prose, so it inherits the treatment. */
 
-/* Lead paragraph — emphasized opening text */
-.rf-textblock--lead .rf-textblock__body > p:first-child {
-	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-gap: 2rem;
-	column-rule: 1px solid var(--rf-color-border);
-}
-.rf-textblock[data-columns="3"] .rf-textblock__body {
-	column-gap: 2rem;
-	column-rule: 1px solid var(--rf-color-border);
-}
-.rf-textblock[data-columns="4"] .rf-textblock__body {
-	column-gap: 2rem;
-	column-rule: 1px solid var(--rf-color-border);
-}
+	/* Lead paragraph — emphasized opening text */
+	.rf-textblock--lead .rf-textblock__body > p:first-child {
+		font-size: var(--rf-text-xl);
+		line-height: var(--rf-leading-relaxed);
+		font-weight: var(--rf-weight-normal);
+		color: var(--rf-color-text);
+	}
 
-/* Text alignment */
-.rf-textblock--center .rf-textblock__body { text-align: center; }
-.rf-textblock--right .rf-textblock__body { text-align: right; }
-.rf-textblock--justify .rf-textblock__body { text-align: justify; }
+	/* Multi-column text flow */
+	.rf-textblock[data-columns="2"] .rf-textblock__body {
+		column-gap: 2rem;
+		column-rule: 1px solid var(--rf-color-border);
+	}
+	.rf-textblock[data-columns="3"] .rf-textblock__body {
+		column-gap: 2rem;
+		column-rule: 1px solid var(--rf-color-border);
+	}
+	.rf-textblock[data-columns="4"] .rf-textblock__body {
+		column-gap: 2rem;
+		column-rule: 1px solid var(--rf-color-border);
+	}
 
-/* Responsive — columns collapse on smaller screens */
+	/* Text alignment */
+	.rf-textblock--center .rf-textblock__body {
+		text-align: center;
+	}
+	.rf-textblock--right .rf-textblock__body {
+		text-align: right;
+	}
+	.rf-textblock--justify .rf-textblock__body {
+		text-align: justify;
+	}
 
+	/* Responsive — columns collapse on smaller screens */
 }

package/styles/runes/timeline.css

@@ -1,68 +1,67 @@
 @layer skin {
-/* Timeline */
-.rf-timeline {
-	margin: 2rem 0;
-}
-.rf-timeline ol {
-	padding: 0;
-	margin: 0;
-}
-.rf-timeline-entry:last-child {
-	padding-bottom: 0;
-}
-.rf-timeline-entry > time {
-	font-size: var(--rf-text-xs);
-	font-weight: var(--rf-weight-semibold);
-	color: var(--rf-color-primary);
-	letter-spacing: var(--rf-tracking-wide);
-	margin-bottom: 0.25rem;
-}
-.rf-timeline-entry > span {
-	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: var(--rf-text-sm);
-	line-height: var(--rf-leading-relaxed);
-	color: var(--rf-color-muted);
-}
-.rf-timeline-entry__body p:last-child {
-	margin-bottom: 0;
-}
+	/* Timeline */
+	.rf-timeline {
+		margin: 2rem 0;
+	}
+	.rf-timeline ol {
+		padding: 0;
+		margin: 0;
+	}
+	.rf-timeline-entry:last-child {
+		padding-bottom: 0;
+	}
+	.rf-timeline-entry > time {
+		font-size: var(--rf-text-xs);
+		font-weight: var(--rf-weight-semibold);
+		color: var(--rf-color-primary);
+		letter-spacing: var(--rf-tracking-wide);
+		margin-bottom: 0.25rem;
+	}
+	.rf-timeline-entry > span {
+		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: var(--rf-text-sm);
+		line-height: var(--rf-leading-relaxed);
+		color: var(--rf-color-muted);
+	}
+	.rf-timeline-entry__body p:last-child {
+		margin-bottom: 0;
+	}
 
-/* Vertical timeline */
-.rf-timeline--vertical .rf-timeline-entry {
-	padding-left: 2rem;
-	padding-bottom: 2rem;
-	border-left: 2px solid var(--rf-color-border);
-	margin-left: 0.375rem;
-}
-.rf-timeline--vertical .rf-timeline-entry:last-child {
-	border-left-color: transparent;
-}
-.rf-timeline--vertical .rf-timeline-entry::before {
-	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);
-}
-
-/* Horizontal timeline */
-.rf-timeline--horizontal ol {
-	gap: 2rem;
-	padding: 2rem 0 1rem;
-}
-.rf-timeline--horizontal .rf-timeline-entry {
-	padding-top: 1.5rem;
-	border-top: 2px solid var(--rf-color-border);
-}
-.rf-timeline--horizontal .rf-timeline-entry::before {
-	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);
-}
+	/* Vertical timeline */
+	.rf-timeline--vertical .rf-timeline-entry {
+		padding-left: 2rem;
+		padding-bottom: 2rem;
+		border-left: 2px solid var(--rf-color-border);
+		margin-left: 0.375rem;
+	}
+	.rf-timeline--vertical .rf-timeline-entry:last-child {
+		border-left-color: transparent;
+	}
+	.rf-timeline--vertical .rf-timeline-entry::before {
+		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);
+	}
 
+	/* Horizontal timeline */
+	.rf-timeline--horizontal ol {
+		gap: 2rem;
+		padding: 2rem 0 1rem;
+	}
+	.rf-timeline--horizontal .rf-timeline-entry {
+		padding-top: 1.5rem;
+		border-top: 2px solid var(--rf-color-border);
+	}
+	.rf-timeline--horizontal .rf-timeline-entry::before {
+		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);
+	}
 }