@refrakt-md/lumina 0.32.0 → 0.34.0

package/styles/runes/conversation.css

@@ -1,36 +1,39 @@
 @layer skin {
-/* Conversation — skin. The column stack, bubble flex/width/side-alignment, and the
+	/* Conversation — skin. The column stack, bubble flex/width/side-alignment, and the
  * data-carrier hides live in @refrakt-md/skeleton (styles/runes/conversation.css). */
-.rf-conversation {
-	gap: 1rem;
-	max-width: 40rem;
-}
-.rf-conversation__messages {
-	gap: 1rem;
-}
-.rf-conversation-message__speaker {
-	font-size: var(--rf-text-xs);
-	font-weight: var(--rf-weight-semibold);
-	color: var(--rf-color-muted);
-	margin-bottom: 0.25rem;
-	padding: 0 0.75rem;
-}
-.rf-conversation-message__body {
-	padding: 0.75rem 1rem;
-	border-radius: 1rem;
-	font-size: var(--rf-text);
-	line-height: var(--rf-leading-normal);
-}
-.rf-conversation-message--left .rf-conversation-message__body {
-	background: var(--rf-color-surface);
-	border-bottom-left-radius: 0.25rem;
-}
-.rf-conversation-message--right .rf-conversation-message__body {
-	background: var(--rf-color-primary);
-	color: white;
-	border-bottom-right-radius: 0.25rem;
-}
-.rf-conversation-message__body p { margin: 0; }
-.rf-conversation-message__body p + p { margin-top: 0.5rem; }
-
+	.rf-conversation {
+		gap: 1rem;
+		max-width: 40rem;
+	}
+	.rf-conversation__messages {
+		gap: 1rem;
+	}
+	.rf-conversation-message__speaker {
+		font-size: var(--rf-text-xs);
+		font-weight: var(--rf-weight-semibold);
+		color: var(--rf-color-muted);
+		margin-bottom: 0.25rem;
+		padding: 0 0.75rem;
+	}
+	.rf-conversation-message__body {
+		padding: 0.75rem 1rem;
+		border-radius: 1rem;
+		font-size: var(--rf-text);
+		line-height: var(--rf-leading-normal);
+	}
+	.rf-conversation-message--left .rf-conversation-message__body {
+		background: var(--rf-color-surface);
+		border-bottom-left-radius: 0.25rem;
+	}
+	.rf-conversation-message--right .rf-conversation-message__body {
+		background: var(--rf-color-primary);
+		color: white;
+		border-bottom-right-radius: 0.25rem;
+	}
+	.rf-conversation-message__body p {
+		margin: 0;
+	}
+	.rf-conversation-message__body p + p {
+		margin-top: 0.5rem;
+	}
 }

package/styles/runes/cta.css

@@ -1,139 +1,142 @@
 @layer skin {
-/* Call to Action — skin. The preamble/eyebrow/button-row layout + mobile stack
+	/* Call to Action — skin. The preamble/eyebrow/button-row layout + mobile stack
  * live in @refrakt-md/skeleton (styles/runes/cta.css). */
-.rf-cta {
-	--rf-title-size: var(--rf-text-4xl);
-	padding: 3.5rem 2rem 3rem;
-}
-.rf-cta .rf-cta__preamble,
-.rf-cta > h1, .rf-cta > h2, .rf-cta > h3,
-.rf-cta > p {
-	text-align: center;
-}
-.rf-cta__preamble {
-	gap: 0.25rem;
-	margin-bottom: 1.5rem;
-}
-/* Higher specificity needed to override .rf-cta p (0,1,1) */
-.rf-cta .rf-cta__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.75rem;
-	max-width: none;
-}
-/* Pill-badge variant when eyebrow contains a link */
-.rf-cta .rf-cta__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-cta .rf-cta__eyebrow:has(a):hover {
-	border-color: var(--rf-color-muted);
-}
-.rf-cta .rf-cta__eyebrow:has(a) a {
-	color: var(--rf-color-primary);
-	font-weight: var(--rf-weight-semibold);
-	text-decoration: none;
-}
-.rf-cta .rf-cta__eyebrow:has(a) a::before {
-	border-radius: inherit;
-}
-.rf-cta__image {
-	margin-bottom: 1.5rem;
-}
-.rf-cta h1,
-.rf-cta h2,
-.rf-cta h3,
-.rf-cta__headline {
-	/* WORK-538 — read the prominence override first; the fallback is this rune's
+	.rf-cta {
+		--rf-title-size: var(--rf-text-4xl);
+		padding: 3.5rem 2rem 3rem;
+	}
+	.rf-cta .rf-cta__preamble,
+	.rf-cta > h1,
+	.rf-cta > h2,
+	.rf-cta > h3,
+	.rf-cta > p {
+		text-align: center;
+	}
+	.rf-cta__preamble {
+		gap: 0.25rem;
+		margin-bottom: 1.5rem;
+	}
+	/* Higher specificity needed to override .rf-cta p (0,1,1) */
+	.rf-cta .rf-cta__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.75rem;
+		max-width: none;
+	}
+	/* Pill-badge variant when eyebrow contains a link */
+	.rf-cta .rf-cta__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-cta .rf-cta__eyebrow:has(a):hover {
+		border-color: var(--rf-color-muted);
+	}
+	.rf-cta .rf-cta__eyebrow:has(a) a {
+		color: var(--rf-color-primary);
+		font-weight: var(--rf-weight-semibold);
+		text-decoration: none;
+	}
+	.rf-cta .rf-cta__eyebrow:has(a) a::before {
+		border-radius: inherit;
+	}
+	.rf-cta__image {
+		margin-bottom: 1.5rem;
+	}
+	.rf-cta h1,
+	.rf-cta h2,
+	.rf-cta h3,
+	.rf-cta__headline {
+		/* 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-bold);
-	letter-spacing: var(--rf-tracking-tight);
-	margin-bottom: 0.75rem;
-	margin-top: 0;
-	line-height: var(--rf-leading-tight);
-	background: linear-gradient(135deg, var(--rf-color-text) 0%, var(--rf-color-muted) 100%);
-	-webkit-background-clip: text;
-	-webkit-text-fill-color: transparent;
-	background-clip: text;
-}
-/* Higher specificity needed to override .rf-cta p (0,1,1) */
-.rf-cta p,
-.rf-cta .rf-cta__blurb {
-	font-size: var(--rf-text-lg);
-	color: var(--rf-color-muted);
-	max-width: 540px;
-	margin: 0 auto 2rem;
-	line-height: var(--rf-leading-relaxed);
-}
-.rf-cta ul {
-	gap: 0.75rem;
-	padding: 0;
-	margin: 0;
-}
-.rf-cta li {
-	padding: 0;
-	margin: 0;
-}
-.rf-cta li a,
-.rf-cta nav a {
-	padding: 0.625rem 1.5rem;
-	border-radius: var(--rf-radius-sm);
-	text-decoration: none;
-	font-weight: var(--rf-weight-semibold);
-	font-size: var(--rf-text-sm);
-	transition: all 200ms ease;
-}
-.rf-cta li:first-child a {
-	background: var(--rf-color-primary);
-	color: white;
-	box-shadow: var(--rf-shadow-sm);
-}
-.rf-cta li:first-child a:hover {
-	background: var(--rf-color-primary-hover);
-	box-shadow: var(--rf-shadow-md);
-	transform: translateY(-1px);
-	text-decoration: none;
-}
-.rf-cta li:not(:first-child) a {
-	background: var(--rf-color-surface);
-	color: var(--rf-color-text);
-	border: 1px solid var(--rf-color-border);
-}
-.rf-cta li:not(:first-child) a:hover {
-	background: var(--rf-color-surface-hover);
-	border-color: var(--rf-color-surface-active);
-	text-decoration: none;
-}
+		font-size: var(--rf-prominence-size, var(--rf-title-size));
+		font-weight: var(--rf-weight-bold);
+		letter-spacing: var(--rf-tracking-tight);
+		margin-bottom: 0.75rem;
+		margin-top: 0;
+		line-height: var(--rf-leading-tight);
+		background: linear-gradient(135deg, var(--rf-color-text) 0%, var(--rf-color-muted) 100%);
+		-webkit-background-clip: text;
+		-webkit-text-fill-color: transparent;
+		background-clip: text;
+	}
+	/* Higher specificity needed to override .rf-cta p (0,1,1) */
+	.rf-cta p,
+	.rf-cta .rf-cta__blurb {
+		font-size: var(--rf-text-lg);
+		color: var(--rf-color-muted);
+		max-width: 540px;
+		margin: 0 auto 2rem;
+		line-height: var(--rf-leading-relaxed);
+	}
+	.rf-cta ul {
+		gap: 0.75rem;
+		padding: 0;
+		margin: 0;
+	}
+	.rf-cta li {
+		padding: 0;
+		margin: 0;
+	}
+	.rf-cta li a,
+	.rf-cta nav a {
+		padding: 0.625rem 1.5rem;
+		border-radius: var(--rf-radius-sm);
+		text-decoration: none;
+		font-weight: var(--rf-weight-semibold);
+		font-size: var(--rf-text-sm);
+		transition: all 200ms ease;
+	}
+	.rf-cta li:first-child a {
+		background: var(--rf-color-primary);
+		color: white;
+		box-shadow: var(--rf-shadow-sm);
+	}
+	.rf-cta li:first-child a:hover {
+		background: var(--rf-color-primary-hover);
+		box-shadow: var(--rf-shadow-md);
+		transform: translateY(-1px);
+		text-decoration: none;
+	}
+	.rf-cta li:not(:first-child) a {
+		background: var(--rf-color-surface);
+		color: var(--rf-color-text);
+		border: 1px solid var(--rf-color-border);
+	}
+	.rf-cta li:not(:first-child) a:hover {
+		background: var(--rf-color-surface-hover);
+		border-color: var(--rf-color-surface-active);
+		text-decoration: none;
+	}
 
-/* Context-aware: CTA inside a hero gets more vertical space */
-.rf-cta--in-hero {
-	padding-top: 2rem;
-	padding-bottom: 0;
-}
-
-/* Context-aware: CTA inside pricing — compact, left-aligned */
-.rf-cta--in-pricing {
-	padding: 1.5rem 0 0;
-}
-.rf-cta--in-pricing .rf-cta__preamble,
-.rf-cta--in-pricing > h1, .rf-cta--in-pricing > h2, .rf-cta--in-pricing > h3,
-.rf-cta--in-pricing > p {
-	text-align: left;
-}
-.rf-cta--in-pricing p {
-	margin: 0 0 1rem;
-	max-width: none;
-}
+	/* Context-aware: CTA inside a hero gets more vertical space */
+	.rf-cta--in-hero {
+		padding-top: 2rem;
+		padding-bottom: 0;
+	}
 
+	/* Context-aware: CTA inside pricing — compact, left-aligned */
+	.rf-cta--in-pricing {
+		padding: 1.5rem 0 0;
+	}
+	.rf-cta--in-pricing .rf-cta__preamble,
+	.rf-cta--in-pricing > h1,
+	.rf-cta--in-pricing > h2,
+	.rf-cta--in-pricing > h3,
+	.rf-cta--in-pricing > p {
+		text-align: left;
+	}
+	.rf-cta--in-pricing p {
+		margin: 0 0 1rem;
+		max-width: none;
+	}
 }

package/styles/runes/datatable.css

@@ -1,90 +1,91 @@
 @layer skin {
-/* DataTable — skin. The toolbar/pagination flex + input width live in
+	/* DataTable — skin. The toolbar/pagination flex + input width live in
  * @refrakt-md/skeleton (styles/runes/datatable.css). The table chrome (header
  * strip, cell padding, row borders, hover) stays here. */
 
-/* The sunken surface chrome (fill + border + container radius) stays, but the
+	/* The sunken surface chrome (fill + border + container radius) stays, but the
  * elevation padding is dropped: the toolbar, table, and pagination each carry
  * their own rhythm and sit flush with the surface edge. */
-.rf-datatable {
-	padding: 0;
-}
-.rf-datatable__toolbar {
-	padding: var(--rf-spacing-sm);
-}
-.rf-datatable__input {
-	padding: var(--rf-spacing-snug);
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-media);
-	font-size: var(--rf-text-xs);
-	font-family: var(--rf-font-sans);
-	background: var(--rf-color-bg);
-	color: var(--rf-color-text);
-}
-.rf-datatable__input:focus {
-	outline: none;
-	border-color: var(--rf-color-primary);
-	box-shadow: 0 0 0 2px color-mix(in srgb, var(--rf-color-primary) 15%, transparent);
-}
-.rf-datatable__table {
-	width: 100%;
-	border-collapse: collapse;
-	margin: 0;
-}
-.rf-datatable__table th {
-	text-align: left;
-	padding: 0.75rem 1rem;
-	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);
-}
-/* Sortable headers (the behavior sets inline cursor:pointer on them). */
-.rf-datatable__table th[style*="cursor"]:hover {
-	color: var(--rf-color-text);
-}
-.rf-datatable__sort-indicator {
-	font-size: var(--rf-text-xs);
-	opacity: 0.7;
-}
-.rf-datatable__table td {
-	padding: 0.75rem 1rem;
-	border-bottom: 1px solid var(--rf-color-border);
-	font-size: var(--rf-text-sm);
-}
-.rf-datatable__table tr:last-child td {
-	border-bottom: none;
-}
-.rf-datatable__table tr:hover td {
-	background: var(--rf-color-surface-hover);
-}
-.rf-datatable__pagination {
-	gap: 0.75rem;
-	padding: var(--rf-spacing-sm);
-}
-.rf-datatable__page-btn {
-	padding: 0.25rem 0.5rem;
-	border: none;
-	border-radius: var(--rf-radius-sm);
-	background: transparent;
-	color: var(--rf-color-muted);
-	font-size: var(--rf-text-xs);
-	font-family: var(--rf-font-sans);
-	cursor: pointer;
-	transition: color 150ms ease, background 150ms ease;
-}
-.rf-datatable__page-btn:hover:not(:disabled) {
-	color: var(--rf-color-text);
-	background: var(--rf-color-surface-hover);
-}
-.rf-datatable__page-btn:disabled {
-	opacity: 0.3;
-	cursor: not-allowed;
-}
-.rf-datatable__page-info {
-	font-size: var(--rf-text-xs);
-	color: var(--rf-color-muted);
-}
-
+	.rf-datatable {
+		padding: 0;
+	}
+	.rf-datatable__toolbar {
+		padding: var(--rf-spacing-sm);
+	}
+	.rf-datatable__input {
+		padding: var(--rf-spacing-snug);
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-media);
+		font-size: var(--rf-text-xs);
+		font-family: var(--rf-font-sans);
+		background: var(--rf-color-bg);
+		color: var(--rf-color-text);
+	}
+	.rf-datatable__input:focus {
+		outline: none;
+		border-color: var(--rf-color-primary);
+		box-shadow: 0 0 0 2px color-mix(in srgb, var(--rf-color-primary) 15%, transparent);
+	}
+	.rf-datatable__table {
+		width: 100%;
+		border-collapse: collapse;
+		margin: 0;
+	}
+	.rf-datatable__table th {
+		text-align: left;
+		padding: 0.75rem 1rem;
+		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);
+	}
+	/* Sortable headers (the behavior sets inline cursor:pointer on them). */
+	.rf-datatable__table th[style*="cursor"]:hover {
+		color: var(--rf-color-text);
+	}
+	.rf-datatable__sort-indicator {
+		font-size: var(--rf-text-xs);
+		opacity: 0.7;
+	}
+	.rf-datatable__table td {
+		padding: 0.75rem 1rem;
+		border-bottom: 1px solid var(--rf-color-border);
+		font-size: var(--rf-text-sm);
+	}
+	.rf-datatable__table tr:last-child td {
+		border-bottom: none;
+	}
+	.rf-datatable__table tr:hover td {
+		background: var(--rf-color-surface-hover);
+	}
+	.rf-datatable__pagination {
+		gap: 0.75rem;
+		padding: var(--rf-spacing-sm);
+	}
+	.rf-datatable__page-btn {
+		padding: 0.25rem 0.5rem;
+		border: none;
+		border-radius: var(--rf-radius-sm);
+		background: transparent;
+		color: var(--rf-color-muted);
+		font-size: var(--rf-text-xs);
+		font-family: var(--rf-font-sans);
+		cursor: pointer;
+		transition:
+			color 150ms ease,
+			background 150ms ease;
+	}
+	.rf-datatable__page-btn:hover:not(:disabled) {
+		color: var(--rf-color-text);
+		background: var(--rf-color-surface-hover);
+	}
+	.rf-datatable__page-btn:disabled {
+		opacity: 0.3;
+		cursor: not-allowed;
+	}
+	.rf-datatable__page-info {
+		font-size: var(--rf-text-xs);
+		color: var(--rf-color-muted);
+	}
 }

package/styles/runes/decision.css

@@ -1,33 +1,32 @@
 @layer skin {
-/* Decision */
+	/* Decision */
 
-/* SPEC-079: eyebrow + metadata zone names replace header-primary /
+	/* SPEC-079: eyebrow + metadata zone names replace header-primary /
  * header-secondary. */
 
-.rf-decision__eyebrow {
-	margin-bottom: 0.75rem;
-}
-.rf-decision__title h1,
-.rf-decision__title h2,
-.rf-decision__title h3 {
-	margin-top: 0;
-}
-
-.rf-decision__metadata {
-	margin-bottom: 1.5rem;
-}
+	.rf-decision__eyebrow {
+		margin-bottom: 0.75rem;
+	}
+	.rf-decision__title h1,
+	.rf-decision__title h2,
+	.rf-decision__title h3 {
+		margin-top: 0;
+	}
 
-.rf-decision__body {
-	font-size: var(--rf-text-sm);
-	line-height: var(--rf-leading-relaxed);
-}
-.rf-decision__body > section {
-	margin-top: 1rem;
-	padding-top: 0.75rem;
-	border-top: 1px solid var(--rf-color-border);
-}
-.rf-decision__body > section:first-child {
-	margin-top: 0.75rem;
-}
+	.rf-decision__metadata {
+		margin-bottom: 1.5rem;
+	}
 
+	.rf-decision__body {
+		font-size: var(--rf-text-sm);
+		line-height: var(--rf-leading-relaxed);
+	}
+	.rf-decision__body > section {
+		margin-top: 1rem;
+		padding-top: 0.75rem;
+		border-top: 1px solid var(--rf-color-border);
+	}
+	.rf-decision__body > section:first-child {
+		margin-top: 0.75rem;
+	}
 }

package/styles/runes/design-context.css

@@ -1,34 +1,32 @@
 @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-design-context {
-	--rf-title-size: var(--rf-text-xl);
-}
+	.rf-design-context {
+		--rf-title-size: var(--rf-text-xl);
+	}
 
-/* Design Context — unified token card wrapper */
-.rf-design-context__title {
-	/* WORK-538 — read the prominence override first; the fallback is this rune's
+	/* Design Context — unified token card wrapper */
+	.rf-design-context__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-bold);
-	margin-bottom: 1rem;
-}
-.rf-design-context__sections {
-	gap: 1.5rem;
-}
+		font-size: var(--rf-prominence-size, var(--rf-title-size));
+		font-weight: var(--rf-weight-bold);
+		margin-bottom: 1rem;
+	}
+	.rf-design-context__sections {
+		gap: 1.5rem;
+	}
 
-/* Children inside design-context: remove card styling so the outer
+	/* Children inside design-context: remove card styling so the outer
  * design-context surface is the only visible frame. Structural selector
  * (`> [data-rune]` inside the sections wrapper) catches every direct rune
  * child, not just the four design-system runes — so dropping a future rune
  * into a design-context will Just Work without a per-rune CSS update. */
-.rf-design-context__sections > [data-rune] {
-	background: none;
-	border: none;
-	border-radius: 0;
-	padding: 0;
-}
-
+	.rf-design-context__sections > [data-rune] {
+		background: none;
+		border: none;
+		border-radius: 0;
+		padding: 0;
+	}
 }