@refrakt-md/lumina 0.32.0 → 0.34.0

package/styles/runes/chart.css

@@ -1,114 +1,202 @@
 @layer skin {
-/* Chart — skin. The chart block, responsive SVG/container, legend flex, swatch box,
+	/* Chart — skin. The chart block, responsive SVG/container, legend flex, swatch box,
  * and the sr-only rendered data table live in @refrakt-md/skeleton
  * (styles/runes/chart.css). What remains is the --rf-chart-* theming contract, SVG
  * paint, palette rotation, data-table chrome, and type. */
-.rf-chart {
-	--rf-chart-series-1: #6366f1;
-	--rf-chart-series-2: #06b6d4;
-	--rf-chart-series-3: #22c55e;
-	--rf-chart-series-4: #f59e0b;
-	--rf-chart-series-5: #a855f7;
-	--rf-chart-series-6: #ec4899;
-	--rf-chart-bar-ratio: 0.75;
-	--rf-chart-bar-thickness: 12px;
-	--rf-chart-bar-gap: 0.15;
-	--rf-chart-bar-cluster-gap: 4px;
-	--rf-chart-bar-radius: var(--rf-radius-sm);
-	--rf-chart-area-opacity: 0.3;
-	--rf-chart-point-radius: 4px;
-	--rf-chart-line-width: 2px;
-	--rf-chart-label-size: 12px;
-	--rf-chart-label-color: var(--rf-color-muted);
-	--rf-chart-grid-color: var(--rf-color-border);
-	--rf-chart-grid-dash-color: var(--rf-color-muted);
-	--rf-chart-grid-width: 1px;
-	--rf-chart-grid-dash: 3 3;
-	border-radius: var(--rf-radius-lg);
-	padding: 1.5rem;
-	margin: 0;
-}
-.rf-chart__axis { stroke: var(--rf-chart-grid-color); stroke-width: var(--rf-chart-grid-width); }
-/* Dotted horizontal grid lines behind the data — text-tier muted colour so the
+	.rf-chart {
+		--rf-chart-series-1: #6366f1;
+		--rf-chart-series-2: #06b6d4;
+		--rf-chart-series-3: #22c55e;
+		--rf-chart-series-4: #f59e0b;
+		--rf-chart-series-5: #a855f7;
+		--rf-chart-series-6: #ec4899;
+		--rf-chart-bar-ratio: 0.75;
+		--rf-chart-bar-thickness: 12px;
+		--rf-chart-bar-gap: 0.15;
+		--rf-chart-bar-cluster-gap: 4px;
+		--rf-chart-bar-radius: var(--rf-radius-sm);
+		--rf-chart-area-opacity: 0.3;
+		--rf-chart-point-radius: 4px;
+		--rf-chart-line-width: 2px;
+		--rf-chart-label-size: 12px;
+		--rf-chart-label-color: var(--rf-color-muted);
+		--rf-chart-grid-color: var(--rf-color-border);
+		--rf-chart-grid-dash-color: var(--rf-color-muted);
+		--rf-chart-grid-width: 1px;
+		--rf-chart-grid-dash: 3 3;
+		border-radius: var(--rf-radius-lg);
+		padding: 1.5rem;
+		margin: 0;
+	}
+	.rf-chart__axis {
+		stroke: var(--rf-chart-grid-color);
+		stroke-width: var(--rf-chart-grid-width);
+	}
+	/* Dotted horizontal grid lines behind the data — text-tier muted colour so the
  * scale is legible at a glance. Opacity still keeps them quieter than the data,
  * which stays the figure-ground emphasis. */
-.rf-chart__grid {
-	stroke: var(--rf-chart-grid-dash-color);
-	stroke-width: var(--rf-chart-grid-width);
-	stroke-dasharray: var(--rf-chart-grid-dash);
-	opacity: 0.2;
-}
-.rf-chart__label { fill: var(--rf-chart-label-color); font-size: var(--rf-chart-label-size); }
-.rf-chart__tick-label { fill: var(--rf-chart-label-color); font-size: var(--rf-chart-label-size); }
-.rf-chart__bar { rx: var(--rf-chart-bar-radius); fill: var(--rf-chart-series-1); }
-.rf-chart__point { fill: var(--rf-chart-series-1); }
-.rf-chart__line { fill: none; stroke: var(--rf-chart-series-1); stroke-width: var(--rf-chart-line-width); }
-/* Area-under-line gradient stops. The `--rf-chart-area-opacity` knob drives the
+	.rf-chart__grid {
+		stroke: var(--rf-chart-grid-dash-color);
+		stroke-width: var(--rf-chart-grid-width);
+		stroke-dasharray: var(--rf-chart-grid-dash);
+		opacity: 0.2;
+	}
+	.rf-chart__label {
+		fill: var(--rf-chart-label-color);
+		font-size: var(--rf-chart-label-size);
+	}
+	.rf-chart__tick-label {
+		fill: var(--rf-chart-label-color);
+		font-size: var(--rf-chart-label-size);
+	}
+	.rf-chart__bar {
+		rx: var(--rf-chart-bar-radius);
+		fill: var(--rf-chart-series-1);
+	}
+	.rf-chart__point {
+		fill: var(--rf-chart-series-1);
+	}
+	.rf-chart__line {
+		fill: none;
+		stroke: var(--rf-chart-series-1);
+		stroke-width: var(--rf-chart-line-width);
+	}
+	/* Area-under-line gradient stops. The `--rf-chart-area-opacity` knob drives the
  * top alpha; the bottom is always 0 so the gradient fades into the chart floor. */
-.rf-chart__area-stop { stop-color: var(--rf-chart-series-1); }
-.rf-chart__area-stop[data-series="1"] { stop-color: var(--rf-chart-series-2); }
-.rf-chart__area-stop[data-series="2"] { stop-color: var(--rf-chart-series-3); }
-.rf-chart__area-stop[data-series="3"] { stop-color: var(--rf-chart-series-4); }
-.rf-chart__area-stop[data-series="4"] { stop-color: var(--rf-chart-series-5); }
-.rf-chart__area-stop[data-series="5"] { stop-color: var(--rf-chart-series-6); }
-.rf-chart__area-stop[data-position="top"]    { stop-opacity: var(--rf-chart-area-opacity); }
-.rf-chart__area-stop[data-position="bottom"] { stop-opacity: 0; }
-.rf-chart__bar[data-series="1"], .rf-chart__point[data-series="1"] { fill: var(--rf-chart-series-2); }
-.rf-chart__bar[data-series="2"], .rf-chart__point[data-series="2"] { fill: var(--rf-chart-series-3); }
-.rf-chart__bar[data-series="3"], .rf-chart__point[data-series="3"] { fill: var(--rf-chart-series-4); }
-.rf-chart__bar[data-series="4"], .rf-chart__point[data-series="4"] { fill: var(--rf-chart-series-5); }
-.rf-chart__bar[data-series="5"], .rf-chart__point[data-series="5"] { fill: var(--rf-chart-series-6); }
-.rf-chart__line[data-series="1"] { stroke: var(--rf-chart-series-2); }
-.rf-chart__line[data-series="2"] { stroke: var(--rf-chart-series-3); }
-.rf-chart__line[data-series="3"] { stroke: var(--rf-chart-series-4); }
-.rf-chart__line[data-series="4"] { stroke: var(--rf-chart-series-5); }
-.rf-chart__line[data-series="5"] { stroke: var(--rf-chart-series-6); }
-.rf-chart__bar[data-meta-sentiment="positive"], .rf-chart__point[data-meta-sentiment="positive"] { fill: var(--rf-color-success); }
-.rf-chart__bar[data-meta-sentiment="negative"], .rf-chart__point[data-meta-sentiment="negative"] { fill: var(--rf-color-danger); }
-.rf-chart__bar[data-meta-sentiment="caution"],  .rf-chart__point[data-meta-sentiment="caution"]  { fill: var(--rf-color-warning); }
-.rf-chart__bar[data-meta-sentiment="neutral"],  .rf-chart__point[data-meta-sentiment="neutral"]  { fill: var(--rf-color-muted); }
-.rf-chart__line[data-meta-sentiment="positive"] { stroke: var(--rf-color-success); }
-.rf-chart__line[data-meta-sentiment="negative"] { stroke: var(--rf-color-danger); }
-.rf-chart__line[data-meta-sentiment="caution"]  { stroke: var(--rf-color-warning); }
-.rf-chart__line[data-meta-sentiment="neutral"]  { stroke: var(--rf-color-muted); }
-.rf-chart__data {
-	width: 100%;
-	border-collapse: collapse;
-	font-size: var(--rf-text-sm);
-}
-.rf-chart__data caption {
-	font-weight: var(--rf-weight-semibold);
-	margin-bottom: 0.75rem;
-}
-.rf-chart__data th,
-.rf-chart__data td {
-	border: 1px solid var(--rf-color-border);
-	padding: 0.375rem 0.625rem;
-	text-align: left;
-}
-.rf-chart__title {
-	font-weight: var(--rf-weight-semibold);
-	font-size: var(--rf-text);
-	margin-bottom: 1rem;
-	text-align: center;
-}
-.rf-chart__legend {
-	gap: 1rem;
-	margin-top: 1rem;
-}
-.rf-chart__legend-item {
-	gap: 0.375rem;
-	font-size: var(--rf-text-sm);
-	color: var(--rf-color-muted);
-}
-.rf-chart__legend-color {
-	border-radius: 2px;
-	background: var(--rf-chart-series-1);
-}
-.rf-chart__legend-color[data-series="1"] { background: var(--rf-chart-series-2); }
-.rf-chart__legend-color[data-series="2"] { background: var(--rf-chart-series-3); }
-.rf-chart__legend-color[data-series="3"] { background: var(--rf-chart-series-4); }
-.rf-chart__legend-color[data-series="4"] { background: var(--rf-chart-series-5); }
-.rf-chart__legend-color[data-series="5"] { background: var(--rf-chart-series-6); }
-
+	.rf-chart__area-stop {
+		stop-color: var(--rf-chart-series-1);
+	}
+	.rf-chart__area-stop[data-series="1"] {
+		stop-color: var(--rf-chart-series-2);
+	}
+	.rf-chart__area-stop[data-series="2"] {
+		stop-color: var(--rf-chart-series-3);
+	}
+	.rf-chart__area-stop[data-series="3"] {
+		stop-color: var(--rf-chart-series-4);
+	}
+	.rf-chart__area-stop[data-series="4"] {
+		stop-color: var(--rf-chart-series-5);
+	}
+	.rf-chart__area-stop[data-series="5"] {
+		stop-color: var(--rf-chart-series-6);
+	}
+	.rf-chart__area-stop[data-position="top"] {
+		stop-opacity: var(--rf-chart-area-opacity);
+	}
+	.rf-chart__area-stop[data-position="bottom"] {
+		stop-opacity: 0;
+	}
+	.rf-chart__bar[data-series="1"],
+	.rf-chart__point[data-series="1"] {
+		fill: var(--rf-chart-series-2);
+	}
+	.rf-chart__bar[data-series="2"],
+	.rf-chart__point[data-series="2"] {
+		fill: var(--rf-chart-series-3);
+	}
+	.rf-chart__bar[data-series="3"],
+	.rf-chart__point[data-series="3"] {
+		fill: var(--rf-chart-series-4);
+	}
+	.rf-chart__bar[data-series="4"],
+	.rf-chart__point[data-series="4"] {
+		fill: var(--rf-chart-series-5);
+	}
+	.rf-chart__bar[data-series="5"],
+	.rf-chart__point[data-series="5"] {
+		fill: var(--rf-chart-series-6);
+	}
+	.rf-chart__line[data-series="1"] {
+		stroke: var(--rf-chart-series-2);
+	}
+	.rf-chart__line[data-series="2"] {
+		stroke: var(--rf-chart-series-3);
+	}
+	.rf-chart__line[data-series="3"] {
+		stroke: var(--rf-chart-series-4);
+	}
+	.rf-chart__line[data-series="4"] {
+		stroke: var(--rf-chart-series-5);
+	}
+	.rf-chart__line[data-series="5"] {
+		stroke: var(--rf-chart-series-6);
+	}
+	.rf-chart__bar[data-meta-sentiment="positive"],
+	.rf-chart__point[data-meta-sentiment="positive"] {
+		fill: var(--rf-color-success);
+	}
+	.rf-chart__bar[data-meta-sentiment="negative"],
+	.rf-chart__point[data-meta-sentiment="negative"] {
+		fill: var(--rf-color-danger);
+	}
+	.rf-chart__bar[data-meta-sentiment="caution"],
+	.rf-chart__point[data-meta-sentiment="caution"] {
+		fill: var(--rf-color-warning);
+	}
+	.rf-chart__bar[data-meta-sentiment="neutral"],
+	.rf-chart__point[data-meta-sentiment="neutral"] {
+		fill: var(--rf-color-muted);
+	}
+	.rf-chart__line[data-meta-sentiment="positive"] {
+		stroke: var(--rf-color-success);
+	}
+	.rf-chart__line[data-meta-sentiment="negative"] {
+		stroke: var(--rf-color-danger);
+	}
+	.rf-chart__line[data-meta-sentiment="caution"] {
+		stroke: var(--rf-color-warning);
+	}
+	.rf-chart__line[data-meta-sentiment="neutral"] {
+		stroke: var(--rf-color-muted);
+	}
+	.rf-chart__data {
+		width: 100%;
+		border-collapse: collapse;
+		font-size: var(--rf-text-sm);
+	}
+	.rf-chart__data caption {
+		font-weight: var(--rf-weight-semibold);
+		margin-bottom: 0.75rem;
+	}
+	.rf-chart__data th,
+	.rf-chart__data td {
+		border: 1px solid var(--rf-color-border);
+		padding: 0.375rem 0.625rem;
+		text-align: left;
+	}
+	.rf-chart__title {
+		font-weight: var(--rf-weight-semibold);
+		font-size: var(--rf-text);
+		margin-bottom: 1rem;
+		text-align: center;
+	}
+	.rf-chart__legend {
+		gap: 1rem;
+		margin-top: 1rem;
+	}
+	.rf-chart__legend-item {
+		gap: 0.375rem;
+		font-size: var(--rf-text-sm);
+		color: var(--rf-color-muted);
+	}
+	.rf-chart__legend-color {
+		border-radius: 2px;
+		background: var(--rf-chart-series-1);
+	}
+	.rf-chart__legend-color[data-series="1"] {
+		background: var(--rf-chart-series-2);
+	}
+	.rf-chart__legend-color[data-series="2"] {
+		background: var(--rf-chart-series-3);
+	}
+	.rf-chart__legend-color[data-series="3"] {
+		background: var(--rf-chart-series-4);
+	}
+	.rf-chart__legend-color[data-series="4"] {
+		background: var(--rf-chart-series-5);
+	}
+	.rf-chart__legend-color[data-series="5"] {
+		background: var(--rf-chart-series-6);
+	}
 }

package/styles/runes/codegroup.css

@@ -1,5 +1,5 @@
 @layer skin {
-/* Code Group — skin.
+	/* Code Group — skin.
  *
  * A codegroup is a *code container*: the topbar, tabs, and code body all
  * belong to the code surface, not the page chrome. So the wrapper fill and
@@ -20,110 +20,119 @@
  * tab flex live in @refrakt-md/skeleton (styles/runes/codegroup.css). The pre/code
  * rules stay here in skin: they deliberately override elements/code.css by source
  * order (the `data-overflow="wrap"` reset especially). */
-.rf-codegroup {
-	/* Code-surface-derived chrome — legible against any --rf-color-code-bg. */
-	--rf-codegroup-chrome: color-mix(in srgb, var(--rf-color-code-text) 5%, var(--rf-color-code-bg));
-	--rf-codegroup-line: color-mix(in srgb, var(--rf-color-code-text) 14%, var(--rf-color-code-bg));
-	--rf-codegroup-muted: color-mix(in srgb, var(--rf-color-code-text) 55%, var(--rf-color-code-bg));
+	.rf-codegroup {
+		/* Code-surface-derived chrome — legible against any --rf-color-code-bg. */
+		--rf-codegroup-chrome: color-mix(
+			in srgb,
+			var(--rf-color-code-text) 5%,
+			var(--rf-color-code-bg)
+		);
+		--rf-codegroup-line: color-mix(in srgb, var(--rf-color-code-text) 14%, var(--rf-color-code-bg));
+		--rf-codegroup-muted: color-mix(
+			in srgb,
+			var(--rf-color-code-text) 55%,
+			var(--rf-color-code-bg)
+		);
 
-	border: 1px solid var(--rf-color-border);
-	background: var(--rf-color-code-bg);
-	color: var(--rf-color-code-text);
-	box-shadow: var(--rf-shadow-md);
-	padding: 0;
-}
-.rf-codegroup__topbar {
-	gap: 0.375rem;
-	padding: 0.75rem 1rem;
-	background: var(--rf-codegroup-chrome);
-	border-bottom: 1px solid var(--rf-codegroup-line);
-	margin-bottom: 0;
-}
-/* Window chrome — three traffic-light dots painted as gradients on one
+		border: 1px solid var(--rf-color-border);
+		background: var(--rf-color-code-bg);
+		color: var(--rf-color-code-text);
+		box-shadow: var(--rf-shadow-md);
+		padding: 0;
+	}
+	.rf-codegroup__topbar {
+		gap: 0.375rem;
+		padding: 0.75rem 1rem;
+		background: var(--rf-codegroup-chrome);
+		border-bottom: 1px solid var(--rf-codegroup-line);
+		margin-bottom: 0;
+	}
+	/* Window chrome — three traffic-light dots painted as gradients on one
  * pseudo-element. The element reserves real width (three 10px dots, 1rem
  * apart) so the flex row spaces the title clear of the dots. Pure decoration. */
-.rf-codegroup__topbar::before {
-	content: '';
-	flex: 0 0 auto;
-	width: 2.625rem;
-	height: 10px;
-	opacity: 0.8;
-	background-repeat: no-repeat;
-	background-image:
-		radial-gradient(circle at 5px 50%, #ef4444 5px, transparent 5px),
-		radial-gradient(circle at calc(5px + 1rem) 50%, #f59e0b 5px, transparent 5px),
-		radial-gradient(circle at calc(5px + 2rem) 50%, #22c55e 5px, transparent 5px);
-}
-/* Filename title — the topbar bar's lone `code` field. */
-.rf-codegroup__topbar [data-meta-type="code"] {
-	margin-left: 0.5rem;
-	font-size: var(--rf-text-xs);
-	font-weight: normal;
-	color: var(--rf-codegroup-muted);
-}
-.rf-codegroup ul {
-	padding: 0;
-	margin: 0;
-}
-.rf-codegroup__tabs {
-	background: var(--rf-codegroup-chrome);
-	border-bottom: 1px solid var(--rf-codegroup-line);
-}
-.rf-codegroup__tab {
-	padding: 0.5rem 1rem;
-	font-size: var(--rf-text-xs);
-	font-family: var(--rf-font-mono);
-	color: var(--rf-codegroup-muted);
-	background: none;
-	border: none;
-	border-bottom: 2px solid transparent;
-	cursor: pointer;
-	transition: color 200ms ease, border-color 200ms ease;
-	white-space: nowrap;
-}
-.rf-codegroup__tab:hover,
-.rf-codegroup button[data-state="inactive"]:hover {
-	color: var(--rf-color-code-text);
-}
-.rf-codegroup__tab--active,
-.rf-codegroup button[data-state="active"] {
-	color: var(--rf-color-code-text);
-	border-bottom-color: var(--rf-color-primary);
-}
-.rf-codegroup button[data-state="inactive"] {
-	color: var(--rf-codegroup-muted);
-}
-.rf-codegroup .rf-codeblock {
-	margin: 0;
-}
-.rf-codegroup pre {
-	margin: 0;
-	padding: 1rem 1.25rem;
-	overflow-x: auto;
-	border: none;
-	border-radius: 0;
-}
-.rf-codegroup code {
-	font-family: var(--rf-font-mono);
-	font-size: var(--rf-text-sm);
-}
-/* Overflow modes */
-.rf-codegroup[data-overflow="wrap"] pre {
-	white-space: pre-wrap;
-	word-break: break-word;
-	overflow-x: hidden;
-}
-/* WORK-304 — the standalone codeblock CSS at `elements/code.css`
+	.rf-codegroup__topbar::before {
+		content: "";
+		flex: 0 0 auto;
+		width: 2.625rem;
+		height: 10px;
+		opacity: 0.8;
+		background-repeat: no-repeat;
+		background-image:
+			radial-gradient(circle at 5px 50%, #ef4444 5px, transparent 5px),
+			radial-gradient(circle at calc(5px + 1rem) 50%, #f59e0b 5px, transparent 5px),
+			radial-gradient(circle at calc(5px + 2rem) 50%, #22c55e 5px, transparent 5px);
+	}
+	/* Filename title — the topbar bar's lone `code` field. */
+	.rf-codegroup__topbar [data-meta-type="code"] {
+		margin-left: 0.5rem;
+		font-size: var(--rf-text-xs);
+		font-weight: normal;
+		color: var(--rf-codegroup-muted);
+	}
+	.rf-codegroup ul {
+		padding: 0;
+		margin: 0;
+	}
+	.rf-codegroup__tabs {
+		background: var(--rf-codegroup-chrome);
+		border-bottom: 1px solid var(--rf-codegroup-line);
+	}
+	.rf-codegroup__tab {
+		padding: 0.5rem 1rem;
+		font-size: var(--rf-text-xs);
+		font-family: var(--rf-font-mono);
+		color: var(--rf-codegroup-muted);
+		background: none;
+		border: none;
+		border-bottom: 2px solid transparent;
+		cursor: pointer;
+		transition:
+			color 200ms ease,
+			border-color 200ms ease;
+		white-space: nowrap;
+	}
+	.rf-codegroup__tab:hover,
+	.rf-codegroup button[data-state="inactive"]:hover {
+		color: var(--rf-color-code-text);
+	}
+	.rf-codegroup__tab--active,
+	.rf-codegroup button[data-state="active"] {
+		color: var(--rf-color-code-text);
+		border-bottom-color: var(--rf-color-primary);
+	}
+	.rf-codegroup button[data-state="inactive"] {
+		color: var(--rf-codegroup-muted);
+	}
+	.rf-codegroup .rf-codeblock {
+		margin: 0;
+	}
+	.rf-codegroup pre {
+		margin: 0;
+		padding: 1rem 1.25rem;
+		overflow-x: auto;
+		border: none;
+		border-radius: 0;
+	}
+	.rf-codegroup code {
+		font-family: var(--rf-font-mono);
+		font-size: var(--rf-text-sm);
+	}
+	/* Overflow modes */
+	.rf-codegroup[data-overflow="wrap"] pre {
+		white-space: pre-wrap;
+		word-break: break-word;
+		overflow-x: hidden;
+	}
+	/* WORK-304 — the standalone codeblock CSS at `elements/code.css`
  * sets `display: grid; min-width: max-content` on `pre code`. Inside
  * `overflow="wrap"` codegroups we WANT wrapping, so revert the code element
  * back to a plain block with no min-width constraint. This must stay skin —
  * it overrides elements/code.css (also skin) by source order + specificity. */
-.rf-codegroup[data-overflow="wrap"] pre code {
-	display: block;
-	min-width: 0;
-}
-.rf-codegroup[data-overflow="hide"] pre {
-	overflow-x: hidden;
-}
-
+	.rf-codegroup[data-overflow="wrap"] pre code {
+		display: block;
+		min-width: 0;
+	}
+	.rf-codegroup[data-overflow="hide"] pre {
+		overflow-x: hidden;
+	}
 }