@refrakt-md/lumina 0.33.0 → 0.35.0

package/styles/runes/details.css

@@ -1,30 +1,29 @@
 @layer skin {
-/* Details — skin. The summary flex, marker hide, disclosure-marker push, and the
+	/* 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 {
-	gap: 0.5rem;
-	padding: 0.75rem 0;
-	font-weight: var(--rf-weight-semibold);
-	font-size: var(--rf-text-sm);
-	cursor: pointer;
-	user-select: none;
-	transition: background-color 200ms ease;
-}
-.rf-details__summary:hover {
-	color: var(--rf-color-primary);
-}
-.rf-details__summary::after {
-	content: '▸';
-	color: var(--rf-color-muted);
-	transition: transform 200ms ease;
-}
-.rf-details__body {
-	padding: 0 0 1rem;
-	font-size: var(--rf-text-sm);
-	line-height: var(--rf-leading-relaxed);
-}
-.rf-details__body p:last-child {
-	margin-bottom: 0;
-}
-
+	.rf-details__summary {
+		gap: 0.5rem;
+		padding: 0.75rem 0;
+		font-weight: var(--rf-weight-semibold);
+		font-size: var(--rf-text-sm);
+		cursor: pointer;
+		user-select: none;
+		transition: background-color 200ms ease;
+	}
+	.rf-details__summary:hover {
+		color: var(--rf-color-primary);
+	}
+	.rf-details__summary::after {
+		content: "▸";
+		color: var(--rf-color-muted);
+		transition: transform 200ms ease;
+	}
+	.rf-details__body {
+		padding: 0 0 1rem;
+		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,32 +1,31 @@
 @layer skin {
-/* Diagram — skin. The block/clip, scrollable container, and responsive SVG live in
+	/* Diagram — skin. The block/clip, scrollable container, and responsive SVG live in
  * @refrakt-md/skeleton (styles/runes/diagram.css). */
-.rf-diagram {
-	border-radius: var(--rf-radius-lg);
-	padding: 1.5rem;
-	text-align: center;
-}
-.rf-diagram__title {
-	font-weight: var(--rf-weight-semibold);
-	font-size: var(--rf-text);
-	margin-bottom: 1rem;
-}
-.rf-diagram__source {
-	text-align: left;
-	font-size: var(--rf-text-sm);
-	margin: 0;
-}
-/* Mermaid SVG overrides */
-.rf-diagram__container .label {
-	font-family: var(--rf-font-sans) !important;
-	color: var(--rf-color-text) !important;
-}
-.rf-diagram__container .edgeLabel {
-	background-color: var(--rf-color-surface) !important;
-}
-.rf-diagram__container .marker {
-	fill: var(--rf-color-muted) !important;
-	stroke: var(--rf-color-muted) !important;
-}
-
+	.rf-diagram {
+		border-radius: var(--rf-radius-lg);
+		padding: 1.5rem;
+		text-align: center;
+	}
+	.rf-diagram__title {
+		font-weight: var(--rf-weight-semibold);
+		font-size: var(--rf-text);
+		margin-bottom: 1rem;
+	}
+	.rf-diagram__source {
+		text-align: left;
+		font-size: var(--rf-text-sm);
+		margin: 0;
+	}
+	/* Mermaid SVG overrides */
+	.rf-diagram__container .label {
+		font-family: var(--rf-font-sans) !important;
+		color: var(--rf-color-text) !important;
+	}
+	.rf-diagram__container .edgeLabel {
+		background-color: var(--rf-color-surface) !important;
+	}
+	.rf-diagram__container .marker {
+		fill: var(--rf-color-muted) !important;
+		stroke: var(--rf-color-muted) !important;
+	}
 }

package/styles/runes/diff.css

@@ -1,5 +1,5 @@
 @layer skin {
-/* Diff — skin. The scroll container, sticky header, split grid, rows grid, line
+	/* Diff — skin. The scroll container, sticky header, split grid, rows grid, line
  * flex + gutter sizing live in @refrakt-md/skeleton (styles/runes/diff.css).
  *
  * Like codegroup, a diff is a code container: the header, the panel divider,
@@ -9,76 +9,79 @@
  * when the active preset gives the code surface a palette that diverges from
  * the page (e.g. Nord on a neutral site). Only the outer frame (border) stays
  * in the page world. */
-.rf-diff {
-	/* Code-surface-derived chrome — legible against any --rf-color-code-bg. */
-	--rf-diff-chrome: color-mix(in srgb, var(--rf-color-code-text) 5%, var(--rf-color-code-bg));
-	--rf-diff-line: color-mix(in srgb, var(--rf-color-code-text) 14%, var(--rf-color-code-bg));
-	--rf-diff-muted: color-mix(in srgb, var(--rf-color-code-text) 55%, var(--rf-color-code-bg));
-
-	border: 1px solid var(--rf-color-border);
-	border-radius: var(--rf-radius-lg);
-	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: var(--rf-text-xs);
-	font-weight: var(--rf-weight-semibold);
-	color: var(--rf-diff-muted);
-	background: var(--rf-diff-chrome);
-	border-bottom: 1px solid var(--rf-diff-line);
-}
-.rf-diff__split-container .rf-diff__panel:first-child {
-	border-right: 1px solid var(--rf-diff-line);
-}
-.rf-diff__code {
-	margin: 0;
-	padding: var(--rf-spacing-sm) 0;
-	border: none;
-	border-radius: 0;
-	background: var(--rf-color-code-bg);
-	font-family: var(--rf-font-mono);
-	font-size: var(--rf-text-sm);
-	line-height: var(--rf-leading-relaxed);
-}
-.rf-diff__line {
-	border-left: 3px solid transparent;
-}
-.rf-diff__line[data-line-status="equal"]  { background: transparent; }
-.rf-diff__line[data-line-status="remove"] {
-	background: color-mix(in srgb, var(--rf-color-danger) 18%, transparent);
-	border-left-color: var(--rf-color-danger);
-}
-.rf-diff__line[data-line-status="add"] {
-	background: color-mix(in srgb, var(--rf-color-success) 18%, transparent);
-	border-left-color: var(--rf-color-success);
-}
-.rf-diff__line[data-line-status="highlight"] {
-	background: var(--rf-color-line-highlight);
-	border-left-color: var(--rf-color-line-highlight-rail, var(--rf-color-primary));
-}
-.rf-diff__line[data-line-status="empty"]  { background: transparent; }
-.rf-diff__gutter-num {
-	padding: 0 0.5rem;
-	text-align: right;
-	font-size: var(--rf-text-xs);
-	font-variant-numeric: tabular-nums;
-	user-select: none;
-	color: var(--rf-diff-muted);
-}
-.rf-diff__line[data-line-status="remove"] .rf-diff__gutter-num[data-side="before"] {
-	color: var(--rf-color-danger);
-}
-.rf-diff__line[data-line-status="add"] .rf-diff__gutter-num[data-side="after"] {
-	color: var(--rf-color-success);
-}
-.rf-diff .rf-codeblock {
-	margin: 0;
-}
-.rf-diff__line-content {
-	white-space: pre;
-	padding-right: 1rem;
-}
+	.rf-diff {
+		/* Code-surface-derived chrome — legible against any --rf-color-code-bg. */
+		--rf-diff-chrome: color-mix(in srgb, var(--rf-color-code-text) 5%, var(--rf-color-code-bg));
+		--rf-diff-line: color-mix(in srgb, var(--rf-color-code-text) 14%, var(--rf-color-code-bg));
+		--rf-diff-muted: color-mix(in srgb, var(--rf-color-code-text) 55%, var(--rf-color-code-bg));
 
+		border: 1px solid var(--rf-color-border);
+		border-radius: var(--rf-radius-lg);
+		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: var(--rf-text-xs);
+		font-weight: var(--rf-weight-semibold);
+		color: var(--rf-diff-muted);
+		background: var(--rf-diff-chrome);
+		border-bottom: 1px solid var(--rf-diff-line);
+	}
+	.rf-diff__split-container .rf-diff__panel:first-child {
+		border-right: 1px solid var(--rf-diff-line);
+	}
+	.rf-diff__code {
+		margin: 0;
+		padding: var(--rf-spacing-sm) 0;
+		border: none;
+		border-radius: 0;
+		background: var(--rf-color-code-bg);
+		font-family: var(--rf-font-mono);
+		font-size: var(--rf-text-sm);
+		line-height: var(--rf-leading-relaxed);
+	}
+	.rf-diff__line {
+		border-left: 3px solid transparent;
+	}
+	.rf-diff__line[data-line-status="equal"] {
+		background: transparent;
+	}
+	.rf-diff__line[data-line-status="remove"] {
+		background: color-mix(in srgb, var(--rf-color-danger) 18%, transparent);
+		border-left-color: var(--rf-color-danger);
+	}
+	.rf-diff__line[data-line-status="add"] {
+		background: color-mix(in srgb, var(--rf-color-success) 18%, transparent);
+		border-left-color: var(--rf-color-success);
+	}
+	.rf-diff__line[data-line-status="highlight"] {
+		background: var(--rf-color-line-highlight);
+		border-left-color: var(--rf-color-line-highlight-rail, var(--rf-color-primary));
+	}
+	.rf-diff__line[data-line-status="empty"] {
+		background: transparent;
+	}
+	.rf-diff__gutter-num {
+		padding: 0 0.5rem;
+		text-align: right;
+		font-size: var(--rf-text-xs);
+		font-variant-numeric: tabular-nums;
+		user-select: none;
+		color: var(--rf-diff-muted);
+	}
+	.rf-diff__line[data-line-status="remove"] .rf-diff__gutter-num[data-side="before"] {
+		color: var(--rf-color-danger);
+	}
+	.rf-diff__line[data-line-status="add"] .rf-diff__gutter-num[data-side="after"] {
+		color: var(--rf-color-success);
+	}
+	.rf-diff .rf-codeblock {
+		margin: 0;
+	}
+	.rf-diff__line-content {
+		white-space: pre;
+		padding-right: 1rem;
+	}
 }