@refrakt-md/lumina 0.21.0 → 0.23.0

package/styles/runes/conversation.css

@@ -1,31 +1,16 @@
-/* Conversation */
+@layer skin {
+/* 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 {
-	display: flex;
-	flex-direction: column;
 	gap: 1rem;
 	max-width: 40rem;
 }
 .rf-conversation__messages {
-	display: flex;
-	flex-direction: column;
 	gap: 1rem;
 }
-.rf-conversation-message {
-	display: flex;
-	flex-direction: column;
-	max-width: 80%;
-}
-.rf-conversation-message--left {
-	align-self: flex-start;
-	align-items: flex-start;
-}
-.rf-conversation-message--right {
-	align-self: flex-end;
-	align-items: flex-end;
-}
 .rf-conversation-message__speaker {
-	font-size: 0.75rem;
-	font-weight: 600;
+	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;
@@ -33,8 +18,8 @@
 .rf-conversation-message__body {
 	padding: 0.75rem 1rem;
 	border-radius: 1rem;
-	font-size: 0.9375rem;
-	line-height: 1.5;
+	font-size: var(--rf-text);
+	line-height: var(--rf-leading-normal);
 }
 .rf-conversation-message--left .rf-conversation-message__body {
 	background: var(--rf-color-surface);
@@ -47,12 +32,5 @@
 }
 .rf-conversation-message__body p { margin: 0; }
 .rf-conversation-message__body p + p { margin-top: 0.5rem; }
-/* The speaker name lives inline-bold inside the bubble (the explicit form
- * authors it that way, and the named-speakers form injects it the same way),
- * so the property-carrier span is data only — hide it. Same for the meta
- * tags the engine consumes. `data-field` is the post-engine attribute set by
- * createComponentRenderable. */
-.rf-conversation-message > span[data-field="speaker"],
-.rf-conversation-message > meta[data-field] { display: none; }
-.rf-conversation-message__body > span[data-field],
-.rf-conversation-message__body > meta { display: none; }
+
+}

package/styles/runes/cta.css

@@ -1,4 +1,6 @@
-/* Call to Action */
+@layer skin {
+/* Call to Action — skin. The preamble/eyebrow/button-row layout + mobile stack
+ * live in @refrakt-md/skeleton (styles/runes/cta.css). */
 .rf-cta {
 	padding: 3.5rem 2rem 3rem;
 }
@@ -8,16 +10,14 @@
 	text-align: center;
 }
 .rf-cta__preamble {
-	flex-direction: column;
-	align-items: center;
 	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: 0.875rem;
-	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.75rem;
@@ -25,15 +25,13 @@
 }
 /* Pill-badge variant when eyebrow contains a link */
 .rf-cta .rf-cta__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-cta .rf-cta__eyebrow:has(a):hover {
@@ -41,13 +39,10 @@
 }
 .rf-cta .rf-cta__eyebrow:has(a) a {
 	color: var(--rf-color-primary);
-	font-weight: 600;
+	font-weight: var(--rf-weight-semibold);
 	text-decoration: none;
 }
 .rf-cta .rf-cta__eyebrow:has(a) a::before {
-	content: '';
-	position: absolute;
-	inset: 0;
 	border-radius: inherit;
 }
 .rf-cta__image {
@@ -57,12 +52,12 @@
 .rf-cta h2,
 .rf-cta h3,
 .rf-cta__headline {
-	font-size: 2.5rem;
-	font-weight: 750;
-	letter-spacing: -0.03em;
+	font-size: var(--rf-text-4xl);
+	font-weight: var(--rf-weight-bold);
+	letter-spacing: var(--rf-tracking-tight);
 	margin-bottom: 0.75rem;
 	margin-top: 0;
-	line-height: 1.15;
+	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;
@@ -71,18 +66,14 @@
 /* Higher specificity needed to override .rf-cta p (0,1,1) */
 .rf-cta p,
 .rf-cta .rf-cta__blurb {
-	font-size: 1.15rem;
+	font-size: var(--rf-text-lg);
 	color: var(--rf-color-muted);
 	max-width: 540px;
 	margin: 0 auto 2rem;
-	line-height: 1.65;
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-cta ul {
-	display: flex;
 	gap: 0.75rem;
-	justify-content: center;
-	flex-wrap: wrap;
-	list-style: none;
 	padding: 0;
 	margin: 0;
 }
@@ -92,13 +83,11 @@
 }
 .rf-cta li a,
 .rf-cta nav a {
-	display: inline-flex;
-	align-items: center;
 	padding: 0.625rem 1.5rem;
 	border-radius: var(--rf-radius-sm);
 	text-decoration: none;
-	font-weight: 600;
-	font-size: 0.925rem;
+	font-weight: var(--rf-weight-semibold);
+	font-size: var(--rf-text-sm);
 	transition: all 200ms ease;
 }
 .rf-cta li:first-child a {
@@ -143,16 +132,4 @@
 	max-width: none;
 }
 
-/* Mobile: stack action buttons full-width so multi-button CTAs line up */
-@media (max-width: 640px) {
-	.rf-cta ul {
-		flex-direction: column;
-		align-items: stretch;
-	}
-	.rf-cta li a,
-	.rf-cta nav a {
-		justify-content: center;
-		width: 100%;
-		box-sizing: border-box;
-	}
 }

package/styles/runes/datatable.css

@@ -1,16 +1,22 @@
-/* DataTable */
+@layer skin {
+/* 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
+ * 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 {
-	display: flex;
-	justify-content: flex-end;
-	padding: 0.5rem 0.75rem;
-	background: var(--rf-color-surface);
+	padding: var(--rf-spacing-sm);
 }
 .rf-datatable__input {
-	width: 14rem;
-	padding: 0.35rem 0.625rem;
+	padding: var(--rf-spacing-snug);
 	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-sm);
-	font-size: 0.8rem;
+	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);
@@ -20,65 +26,42 @@
 	border-color: var(--rf-color-primary);
 	box-shadow: 0 0 0 2px color-mix(in srgb, var(--rf-color-primary) 15%, transparent);
 }
-.rf-datatable__content .rf-datatable__table {
-	border: none;
-	border-radius: 0;
-	margin: 0;
-	overflow: visible;
-}
-.rf-datatable__content .rf-datatable__table th {
-	background: var(--rf-color-surface);
-}
-.rf-datatable__content .rf-datatable__table th:first-child,
-.rf-datatable__content .rf-datatable__table th:last-child {
-	border-radius: 0;
-}
-.rf-datatable__content table {
+.rf-datatable__table {
 	width: 100%;
 	border-collapse: collapse;
 	margin: 0;
 }
-.rf-datatable__content .rf-table-wrapper {
-	margin: 0;
-	border: none;
-	border-radius: 0;
-	overflow: visible;
-}
-.rf-datatable__content th {
+.rf-datatable__table th {
 	text-align: left;
 	padding: 0.75rem 1rem;
-	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);
 }
-.rf-datatable__content th[style*="cursor"]:hover {
+/* Sortable headers (the behavior sets inline cursor:pointer on them). */
+.rf-datatable__table th[style*="cursor"]:hover {
 	color: var(--rf-color-text);
 }
-.rf-datatable__content .sort-indicator {
-	font-size: 0.65rem;
+.rf-datatable__sort-indicator {
+	font-size: var(--rf-text-xs);
 	opacity: 0.7;
 }
-.rf-datatable__content td {
+.rf-datatable__table td {
 	padding: 0.75rem 1rem;
 	border-bottom: 1px solid var(--rf-color-border);
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 }
-.rf-datatable__content tr:last-child td {
+.rf-datatable__table tr:last-child td {
 	border-bottom: none;
 }
-.rf-datatable__content tr:hover td {
+.rf-datatable__table tr:hover td {
 	background: var(--rf-color-surface-hover);
 }
 .rf-datatable__pagination {
-	display: flex;
-	align-items: center;
-	justify-content: flex-end;
 	gap: 0.75rem;
-	padding: 0.5rem 0.75rem;
-	background: var(--rf-color-surface);
+	padding: var(--rf-spacing-sm);
 }
 .rf-datatable__page-btn {
 	padding: 0.25rem 0.5rem;
@@ -86,7 +69,7 @@
 	border-radius: var(--rf-radius-sm);
 	background: transparent;
 	color: var(--rf-color-muted);
-	font-size: 0.8rem;
+	font-size: var(--rf-text-xs);
 	font-family: var(--rf-font-sans);
 	cursor: pointer;
 	transition: color 150ms ease, background 150ms ease;
@@ -100,6 +83,8 @@
 	cursor: not-allowed;
 }
 .rf-datatable__page-info {
-	font-size: 0.75rem;
+	font-size: var(--rf-text-xs);
 	color: var(--rf-color-muted);
 }
+
+}

package/styles/runes/decision.css

@@ -1,3 +1,4 @@
+@layer skin {
 /* Decision */
 
 /* SPEC-079: eyebrow + metadata zone names replace header-primary /
@@ -17,8 +18,8 @@
 }
 
 .rf-decision__body {
-	font-size: 0.925rem;
-	line-height: 1.65;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-decision__body > section {
 	margin-top: 1rem;
@@ -28,3 +29,5 @@
 .rf-decision__body > section:first-child {
 	margin-top: 0.75rem;
 }
+
+}

package/styles/runes/design-context.css

@@ -1,12 +1,11 @@
+@layer skin {
 /* Design Context — unified token card wrapper */
 .rf-design-context__title {
-	font-size: 1.25rem;
-	font-weight: 700;
+	font-size: var(--rf-text-xl);
+	font-weight: var(--rf-weight-bold);
 	margin-bottom: 1rem;
 }
 .rf-design-context__sections {
-	display: flex;
-	flex-direction: column;
 	gap: 1.5rem;
 }
 
@@ -21,3 +20,5 @@
 	border-radius: 0;
 	padding: 0;
 }
+
+}

package/styles/runes/details.css

@@ -1,38 +1,30 @@
-/* Details */
-.rf-details {
-}
+@layer skin {
+/* Details — skin. The summary flex, marker hide, disclosure-marker push, and the
+ * open-rotate live in @refrakt-md/skeleton (styles/runes/details.css). */
 .rf-details__summary {
-	display: flex;
-	align-items: center;
 	gap: 0.5rem;
 	padding: 0.75rem 0;
-	font-weight: 600;
-	font-size: 0.925rem;
+	font-weight: var(--rf-weight-semibold);
+	font-size: var(--rf-text-sm);
 	cursor: pointer;
 	user-select: none;
-	list-style: none;
 	transition: background-color 200ms ease;
 }
-.rf-details__summary::-webkit-details-marker { display: none; }
-.rf-details__summary::marker { display: none; content: ''; }
 .rf-details__summary:hover {
 	color: var(--rf-color-primary);
 }
 .rf-details__summary::after {
 	content: '▸';
-	flex-shrink: 0;
-	margin-left: auto;
 	color: var(--rf-color-muted);
 	transition: transform 200ms ease;
 }
-.rf-details[open] .rf-details__summary::after {
-	transform: rotate(90deg);
-}
 .rf-details__body {
 	padding: 0 0 1rem;
-	font-size: 0.925rem;
-	line-height: 1.65;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 }
 .rf-details__body p:last-child {
 	margin-bottom: 0;
 }
+
+}

package/styles/runes/diagram.css

@@ -1,31 +1,21 @@
-/* Diagram */
+@layer skin {
+/* Diagram — skin. The block/clip, scrollable container, and responsive SVG live in
+ * @refrakt-md/skeleton (styles/runes/diagram.css). */
 .rf-diagram {
-	display: block;
 	border-radius: var(--rf-radius-lg);
 	padding: 1.5rem;
 	text-align: center;
-	overflow: hidden;
 }
 .rf-diagram__title {
-	font-weight: 600;
-	font-size: 1rem;
+	font-weight: var(--rf-weight-semibold);
+	font-size: var(--rf-text);
 	margin-bottom: 1rem;
 }
-.rf-diagram__container {
-	display: flex;
-	justify-content: center;
-	overflow-x: auto;
-}
-.rf-diagram__container svg {
-	max-width: 100%;
-	height: auto;
-}
 .rf-diagram__source {
 	text-align: left;
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 	margin: 0;
 }
-
 /* Mermaid SVG overrides */
 .rf-diagram__container .label {
 	font-family: var(--rf-font-sans) !important;
@@ -38,3 +28,5 @@
 	fill: var(--rf-color-muted) !important;
 	stroke: var(--rf-color-muted) !important;
 }
+
+}

package/styles/runes/diff.css

@@ -1,44 +1,20 @@
-/* Diff */
+@layer skin {
+/* Diff — skin. The scroll container, sticky header, split grid, rows grid, line
+ * flex + gutter sizing live in @refrakt-md/skeleton (styles/runes/diff.css). */
 .rf-diff {
 	border: 1px solid var(--rf-color-border);
 	border-radius: var(--rf-radius-lg);
-	/* WORK-304 — horizontal scroll lives on `.rf-diff` itself, not on
-	 * `.rf-diff__split-container`. On mobile the split-container's
-	 * `min-width: 40rem` makes it wider than the viewport; previously
-	 * `.rf-diff { overflow: hidden }` clipped the right panel and the
-	 * touch scroll had nowhere to land. Moving the scroll affordance
-	 * up one level lets users swipe the entire diff sideways to
-	 * reveal the off-screen panel; the border-radius still clips the
-	 * children at the rounded corners because `overflow-x: auto` is
-	 * non-visible. `overflow-y: hidden` keeps the vertical clip for
-	 * the rounded top/bottom. */
-	overflow-x: auto;
-	overflow-y: hidden;
-	overscroll-behavior-x: contain;
-	font-size: 0.875rem;
+	font-size: var(--rf-text-sm);
 	background: var(--rf-color-code-bg);
 }
 .rf-diff__header {
 	padding: 0.5rem 1rem;
 	font-family: var(--rf-font-sans);
-	font-size: 0.75rem;
-	font-weight: 600;
+	font-size: var(--rf-text-xs);
+	font-weight: var(--rf-weight-semibold);
 	color: var(--rf-color-muted);
 	background: var(--rf-color-surface);
 	border-bottom: 1px solid var(--rf-color-border);
-	/* `.rf-diff` is the horizontal scroll container (so mobile users
-	 * can swipe to reveal the off-screen split panel). Without
-	 * sticky, the header would scroll horizontally along with the
-	 * content and the filename label would slide off-screen.
-	 * `position: sticky; left: 0` pins the header to the visible left
-	 * edge of the scroll viewport at all scroll positions. WORK-304. */
-	position: sticky;
-	left: 0;
-}
-.rf-diff__split-container {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	min-width: 40rem;
 }
 .rf-diff__split-container .rf-diff__panel:first-child {
 	border-right: 1px solid var(--rf-color-border);
@@ -49,53 +25,11 @@
 	border: none;
 	border-radius: 0;
 	background: var(--rf-color-code-bg);
-	overflow-x: auto;
-	overscroll-behavior-x: contain;
 	font-family: var(--rf-font-mono);
-	font-size: 0.8125rem;
-	line-height: 1.6;
-}
-
-/* WORK-304 — inner rows wrapper, sized as `display: grid; min-width:
- * max-content` so every `.rf-diff__line` (grid item) spans the
- * widest line's intrinsic width. The pre is the scroll container
- * (`overflow-x: auto`); this wrapper is what actually expands past
- * the pre's visible width when a line overflows, triggering the
- * pre's scroll and keeping the row tint (+/-/highlight) contiguous
- * across the full scroll region. Mirrors the
- * `pre code { display: grid; min-width: max-content }` pattern in
- * the standalone codeblock at `elements/code.css`. */
-.rf-diff__rows {
-	display: grid;
-	min-width: max-content;
+	font-size: var(--rf-text-sm);
+	line-height: var(--rf-leading-relaxed);
 }
-/* WORK-304 — annotated line primitive. Three states share one row
- * shape (`add`, `remove`, `highlight`); only the tint token and the
- * gutter rail colour change. The same selector form is reused by the
- * standalone code block for `data-line-status="highlight"` via the
- * `.rf-codeblock` rules below.
- *
- * `display: block` + inline-block children (not `display: flex`) for
- * the line container so the line's intrinsic max-content is the
- * unambiguous sum of children's intrinsic widths — flex container
- * max-content was being clipped by the flex-basis / flex-grow /
- * flex-shrink combination depending on browser, leaving the row
- * tint cut off at the text width when the user scrolled
- * horizontally. `white-space: nowrap` keeps the inline-block
- * children on a single row (the children themselves preserve their
- * own `white-space: pre` for the code). `min-width: max-content`
- * keeps the line at least as wide as its content (full row tint
- * when content overflows the visible viewport); default width =
- * 100% of pre keeps it filling the visible width on short rows. */
 .rf-diff__line {
-	/* `display: flex` for internal layout (gutters + content side
-	 * by side). The line's WIDTH is determined by the parent grid
-	 * track (`.rf-diff__code`'s `grid-template-columns:
-	 * minmax(100%, max-content)`), not by the flex sizing here —
-	 * so the row tint covers the full grid column regardless of
-	 * how flex sizing would have resolved. */
-	display: flex;
-	min-height: 1.6em;
 	border-left: 3px solid transparent;
 }
 .rf-diff__line[data-line-status="equal"]  { background: transparent; }
@@ -113,20 +47,13 @@
 }
 .rf-diff__line[data-line-status="empty"]  { background: transparent; }
 .rf-diff__gutter-num {
-	flex-shrink: 0;
 	padding: 0 0.5rem;
-	width: 2.5em;
-	min-height: 1.6em;
 	text-align: right;
-	font-size: 0.75rem;
+	font-size: var(--rf-text-xs);
 	font-variant-numeric: tabular-nums;
 	user-select: none;
 	color: var(--rf-color-muted);
 }
-/* Change-type colour drives the directional cue — no more +/- prefix.
- * Remove lines colour the before-number; add lines colour the after-number.
- * The opposite side renders empty (no number) which itself signals "nothing
- * here on this side". */
 .rf-diff__line[data-line-status="remove"] .rf-diff__gutter-num[data-side="before"] {
 	color: var(--rf-color-danger);
 }
@@ -137,18 +64,8 @@
 	margin: 0;
 }
 .rf-diff__line-content {
-	/* `flex: 1 0 auto` so line-content contributes its
-	 * `white-space: pre` text width to the line's intrinsic
-	 * max-content (which the parent grid track reads from); grow:1
-	 * lets it fill any free space in the row beyond the gutters
-	 * when the grid track is wider than the line's natural size
-	 * (short content / wide visible viewport). WORK-304. */
-	flex: 1 0 auto;
 	white-space: pre;
 	padding-right: 1rem;
-	/* Pin the row to 1.6em even when the text is empty — the highlighted
-	 * span for an empty input has no inline content to establish a line
-	 * box, so without this the flex item collapses below the parent's
-	 * min-height and rows visually drift in the split-mode grid. */
-	min-height: 1.6em;
+}
+
 }