@refrakt-md/lumina 0.32.0 → 0.34.0

package/styles/runes/steps.css

@@ -1,84 +1,93 @@
 @layer skin {
-/* Steps — skin. The counter mechanism, step item layout, badge box placement, and
+	/* Steps — skin. The counter mechanism, step item layout, badge box placement, and
  * media-position flip live in @refrakt-md/skeleton (styles/runes/steps.css). */
-.rf-steps__preamble {
-	gap: 0.25rem;
-	margin-bottom: 1.5rem;
-}
-.rf-steps__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-steps__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-steps__eyebrow:has(a):hover { border-color: var(--rf-color-muted); }
-.rf-steps__eyebrow:has(a) a { color: var(--rf-color-primary); font-weight: var(--rf-weight-semibold); text-decoration: none; }
-.rf-steps__eyebrow:has(a) a::before { border-radius: inherit; }
-.rf-steps__headline {
-	margin-top: 0;
-}
-.rf-steps__blurb {
-	color: var(--rf-color-muted);
-	margin-bottom: 0;
-}
-.rf-steps__image {
-	margin-bottom: 1rem;
-}
-.rf-steps ol {
-	padding-left: 0;
-	margin: 0;
-}
-
-/* Individual step — borderless, matching recipe */
-.rf-step {
-	padding: 0.625rem 0 0.625rem 2.25rem;
-}
-.rf-step + .rf-step {
-	border-top: 1px solid var(--rf-color-border);
-}
-.rf-step::before {
-	background: var(--rf-color-surface);
-	color: var(--rf-color-primary);
-	border-radius: var(--rf-radius-full);
-	font-weight: var(--rf-weight-bold);
-	font-size: var(--rf-text-xs);
-	font-variant-numeric: tabular-nums;
-}
-.rf-step h1,
-.rf-step h2,
-.rf-step h3,
-.rf-step h4,
-.rf-step h5,
-.rf-step h6,
-/* Mirror the structure rule: only the leading title bold gets title spacing. */
-.rf-step__content > p:first-child > strong:first-child {
-	margin-top: 0;
-	margin-bottom: 0.375rem;
-}
-.rf-step pre {
-	margin-top: 0;
-}
-.rf-step > p:first-of-type {
-	margin-top: 0;
-}
-.rf-step p {
-	font-size: var(--rf-text-sm);
-	line-height: var(--rf-leading-relaxed);
-}
-.rf-step__media {
-	border-radius: var(--rf-radius-md);
-}
+	.rf-steps__preamble {
+		gap: 0.25rem;
+		margin-bottom: 1.5rem;
+	}
+	.rf-steps__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-steps__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-steps__eyebrow:has(a):hover {
+		border-color: var(--rf-color-muted);
+	}
+	.rf-steps__eyebrow:has(a) a {
+		color: var(--rf-color-primary);
+		font-weight: var(--rf-weight-semibold);
+		text-decoration: none;
+	}
+	.rf-steps__eyebrow:has(a) a::before {
+		border-radius: inherit;
+	}
+	.rf-steps__headline {
+		margin-top: 0;
+	}
+	.rf-steps__blurb {
+		color: var(--rf-color-muted);
+		margin-bottom: 0;
+	}
+	.rf-steps__image {
+		margin-bottom: 1rem;
+	}
+	.rf-steps ol {
+		padding-left: 0;
+		margin: 0;
+	}
 
+	/* Individual step — borderless, matching recipe */
+	.rf-step {
+		padding: 0.625rem 0 0.625rem 2.25rem;
+	}
+	.rf-step + .rf-step {
+		border-top: 1px solid var(--rf-color-border);
+	}
+	.rf-step::before {
+		background: var(--rf-color-surface);
+		color: var(--rf-color-primary);
+		border-radius: var(--rf-radius-full);
+		font-weight: var(--rf-weight-bold);
+		font-size: var(--rf-text-xs);
+		font-variant-numeric: tabular-nums;
+	}
+	.rf-step h1,
+	.rf-step h2,
+	.rf-step h3,
+	.rf-step h4,
+	.rf-step h5,
+	.rf-step h6,
+	/* Mirror the structure rule: only the leading title bold gets title spacing. */
+		.rf-step__content
+		> p:first-child
+		> strong:first-child {
+		margin-top: 0;
+		margin-bottom: 0.375rem;
+	}
+	.rf-step pre {
+		margin-top: 0;
+	}
+	.rf-step > p:first-of-type {
+		margin-top: 0;
+	}
+	.rf-step p {
+		font-size: var(--rf-text-sm);
+		line-height: var(--rf-leading-relaxed);
+	}
+	.rf-step__media {
+		border-radius: var(--rf-radius-md);
+	}
 }

package/styles/runes/storyboard.css

@@ -1,47 +1,48 @@
 @layer skin {
-/* Storyboard */
-.rf-storyboard__panels {
-	gap: 1rem;
-}
-/* Clean style */
-.rf-storyboard--clean .rf-storyboard-panel {
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-md);
-}
-.rf-storyboard--clean .rf-storyboard-panel__body {
-	padding: 0.75rem;
-}
-/* Comic style */
-.rf-storyboard--comic .rf-storyboard-panel {
-	border: 3px solid var(--rf-color-text);
-	border-radius: 0.25rem;
-	transform: rotate(-0.5deg);
-}
-.rf-storyboard--comic .rf-storyboard-panel:nth-child(even) {
-	transform: rotate(0.5deg);
-}
-.rf-storyboard--comic .rf-storyboard-panel__body {
-	padding: 0.5rem;
-}
-.rf-storyboard--comic .rf-storyboard-panel__body p {
-	font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;
-	font-size: var(--rf-text);
-	text-align: center;
-	margin: 0.5rem 0 0;
-}
-/* Polaroid style */
-.rf-storyboard--polaroid .rf-storyboard-panel {
-	background: white;
-	padding: 0.75rem 0.75rem 2.5rem;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-	border-radius: 2px;
-}
-.rf-storyboard--polaroid .rf-storyboard-panel__body p {
-	font-size: var(--rf-text-sm);
-	text-align: center;
-	color: var(--rf-color-muted);
-	margin: 0.5rem 0 0;
-}
-.rf-storyboard-panel__body p:last-child { margin-bottom: 0; }
-
+	/* Storyboard */
+	.rf-storyboard__panels {
+		gap: 1rem;
+	}
+	/* Clean style */
+	.rf-storyboard--clean .rf-storyboard-panel {
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-md);
+	}
+	.rf-storyboard--clean .rf-storyboard-panel__body {
+		padding: 0.75rem;
+	}
+	/* Comic style */
+	.rf-storyboard--comic .rf-storyboard-panel {
+		border: 3px solid var(--rf-color-text);
+		border-radius: 0.25rem;
+		transform: rotate(-0.5deg);
+	}
+	.rf-storyboard--comic .rf-storyboard-panel:nth-child(even) {
+		transform: rotate(0.5deg);
+	}
+	.rf-storyboard--comic .rf-storyboard-panel__body {
+		padding: 0.5rem;
+	}
+	.rf-storyboard--comic .rf-storyboard-panel__body p {
+		font-family: "Comic Sans MS", "Chalkboard SE", cursive;
+		font-size: var(--rf-text);
+		text-align: center;
+		margin: 0.5rem 0 0;
+	}
+	/* Polaroid style */
+	.rf-storyboard--polaroid .rf-storyboard-panel {
+		background: white;
+		padding: 0.75rem 0.75rem 2.5rem;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+		border-radius: 2px;
+	}
+	.rf-storyboard--polaroid .rf-storyboard-panel__body p {
+		font-size: var(--rf-text-sm);
+		text-align: center;
+		color: var(--rf-color-muted);
+		margin: 0.5rem 0 0;
+	}
+	.rf-storyboard-panel__body p:last-child {
+		margin-bottom: 0;
+	}
 }

package/styles/runes/swatch.css

@@ -1,25 +1,24 @@
 @layer skin {
-/* Swatch — inline color chip */
-.rf-swatch {
-	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 {
-	border-radius: 50%;
-	border: 1px solid rgba(0, 0, 0, 0.1);
-}
-.rf-swatch__label {
-	font-weight: var(--rf-weight-medium);
-}
-.rf-swatch__value {
-	color: var(--rf-color-muted);
-	font-size: 0.75em;
-	font-family: var(--rf-font-mono, monospace);
-	vertical-align: middle;
-}
-
+	/* Swatch — inline color chip */
+	.rf-swatch {
+		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 {
+		border-radius: 50%;
+		border: 1px solid rgba(0, 0, 0, 0.1);
+	}
+	.rf-swatch__label {
+		font-weight: var(--rf-weight-medium);
+	}
+	.rf-swatch__value {
+		color: var(--rf-color-muted);
+		font-size: 0.75em;
+		font-family: var(--rf-font-mono, monospace);
+		vertical-align: middle;
+	}
 }

package/styles/runes/symbol.css

@@ -1,128 +1,127 @@
 @layer skin {
-/* Symbol — skin. The list display resets live in @refrakt-md/skeleton
+	/* 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 +
+	/* SPEC-080: signature bar (kind/lang chips + source link). Geometry +
  * the source link's right-push come from [data-zone-layout="bar"]; the
  * source link is a `href` field (data-meta-type="link"). */
-.rf-symbol__eyebrow {
-	padding: 0.5rem 0;
-}
-.rf-symbol__eyebrow [data-meta-type="link"] {
-	font-size: var(--rf-text-xs);
-	color: var(--rf-color-muted);
-	text-decoration: none;
-}
-.rf-symbol__eyebrow [data-meta-type="link"]:hover {
-	color: var(--rf-color-primary);
-}
-.rf-symbol__body {
-	padding: 0;
-}
-.rf-symbol__body > header {
-	margin-bottom: 1rem;
-}
-.rf-symbol__body > header h2,
-.rf-symbol__body > header h3,
-.rf-symbol__body > header h4 {
-	margin-top: 0;
-}
-.rf-symbol__body pre {
-	border-radius: var(--rf-radius-md);
-	margin: 1rem 0;
-}
-.rf-symbol__body > div > ul {
-	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: var(--rf-text);
-}
-.rf-symbol__body > div > ul > li:last-child {
-	border-bottom: none;
-}
-.rf-symbol__body > div > ul > li > ul {
-	margin-top: 0.375rem;
-	padding-left: 1.25rem;
-}
-.rf-symbol__body > div > ul > li > ul > li {
-	padding: 0.25rem 0;
-	font-size: var(--rf-text-sm);
-	color: var(--rf-color-muted);
-}
-.rf-symbol__body blockquote {
-	border-left: 3px solid var(--rf-color-border);
-	padding: 0.5rem 1rem;
-	margin: 0.75rem 0;
-	border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0;
-	font-size: var(--rf-text);
-}
-.rf-symbol__body blockquote::before {
-	content: none;
-}
+	.rf-symbol__eyebrow {
+		padding: 0.5rem 0;
+	}
+	.rf-symbol__eyebrow [data-meta-type="link"] {
+		font-size: var(--rf-text-xs);
+		color: var(--rf-color-muted);
+		text-decoration: none;
+	}
+	.rf-symbol__eyebrow [data-meta-type="link"]:hover {
+		color: var(--rf-color-primary);
+	}
+	.rf-symbol__body {
+		padding: 0;
+	}
+	.rf-symbol__body > header {
+		margin-bottom: 1rem;
+	}
+	.rf-symbol__body > header h2,
+	.rf-symbol__body > header h3,
+	.rf-symbol__body > header h4 {
+		margin-top: 0;
+	}
+	.rf-symbol__body pre {
+		border-radius: var(--rf-radius-md);
+		margin: 1rem 0;
+	}
+	.rf-symbol__body > div > ul {
+		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: var(--rf-text);
+	}
+	.rf-symbol__body > div > ul > li:last-child {
+		border-bottom: none;
+	}
+	.rf-symbol__body > div > ul > li > ul {
+		margin-top: 0.375rem;
+		padding-left: 1.25rem;
+	}
+	.rf-symbol__body > div > ul > li > ul > li {
+		padding: 0.25rem 0;
+		font-size: var(--rf-text-sm);
+		color: var(--rf-color-muted);
+	}
+	.rf-symbol__body blockquote {
+		border-left: 3px solid var(--rf-color-border);
+		padding: 0.5rem 1rem;
+		margin: 0.75rem 0;
+		border-radius: 0 var(--rf-radius-sm) var(--rf-radius-sm) 0;
+		font-size: var(--rf-text);
+	}
+	.rf-symbol__body blockquote::before {
+		content: none;
+	}
 
-/* Deprecated symbol */
-[data-deprecated] .rf-symbol__body > header h2,
-[data-deprecated] .rf-symbol__body > header h3,
-[data-deprecated] .rf-symbol__body > header h4 {
-	text-decoration: line-through;
-	opacity: 0.7;
-}
+	/* Deprecated symbol */
+	[data-deprecated] .rf-symbol__body > header h2,
+	[data-deprecated] .rf-symbol__body > header h3,
+	[data-deprecated] .rf-symbol__body > header h4 {
+		text-decoration: line-through;
+		opacity: 0.7;
+	}
 
-/* SymbolGroup */
-.rf-symbol-group {
-	margin: 1.5rem 0 0;
-	padding-top: 1rem;
-	border-top: 1px solid var(--rf-color-border);
-}
-.rf-symbol-group:first-child {
-	margin-top: 0;
-	padding-top: 0;
-	border-top: none;
-}
-.rf-symbol-group h3 {
-	font-size: var(--rf-text-xs);
-	font-weight: var(--rf-weight-bold);
-	text-transform: uppercase;
-	letter-spacing: var(--rf-tracking-wider);
-	color: var(--rf-color-muted);
-	margin: 0 0 1rem;
-}
-
-/* SymbolMember */
-.rf-symbol-member {
-	margin: 1.25rem 0;
-	padding: 0;
-}
-.rf-symbol-member h4 {
-	margin: 0 0 0.5rem;
-	font-family: var(--rf-font-mono);
-	font-size: var(--rf-text);
-}
-.rf-symbol-member pre {
-	border-radius: var(--rf-radius-sm);
-	margin: 0.75rem 0;
-}
-.rf-symbol-member ul {
-	padding-left: 0;
-	margin: 0.75rem 0;
-}
-.rf-symbol-member li {
-	padding: 0.25rem 0;
-	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: var(--rf-text-sm);
-}
-.rf-symbol-member blockquote::before {
-	content: none;
-}
+	/* SymbolGroup */
+	.rf-symbol-group {
+		margin: 1.5rem 0 0;
+		padding-top: 1rem;
+		border-top: 1px solid var(--rf-color-border);
+	}
+	.rf-symbol-group:first-child {
+		margin-top: 0;
+		padding-top: 0;
+		border-top: none;
+	}
+	.rf-symbol-group h3 {
+		font-size: var(--rf-text-xs);
+		font-weight: var(--rf-weight-bold);
+		text-transform: uppercase;
+		letter-spacing: var(--rf-tracking-wider);
+		color: var(--rf-color-muted);
+		margin: 0 0 1rem;
+	}
 
+	/* SymbolMember */
+	.rf-symbol-member {
+		margin: 1.25rem 0;
+		padding: 0;
+	}
+	.rf-symbol-member h4 {
+		margin: 0 0 0.5rem;
+		font-family: var(--rf-font-mono);
+		font-size: var(--rf-text);
+	}
+	.rf-symbol-member pre {
+		border-radius: var(--rf-radius-sm);
+		margin: 0.75rem 0;
+	}
+	.rf-symbol-member ul {
+		padding-left: 0;
+		margin: 0.75rem 0;
+	}
+	.rf-symbol-member li {
+		padding: 0.25rem 0;
+		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: var(--rf-text-sm);
+	}
+	.rf-symbol-member blockquote::before {
+		content: none;
+	}
 }