@lolmath/ui 9.5.0 → 9.7.0

package/dist/index.css

@@ -1,185 +1,3 @@
-@layer lol {
-	/* ----- CSS reset ----- */
-	*,
-	*::before,
-	*::after {
-		box-sizing: border-box;
-	}
-
-	/* ----- Default CSS variables ----- */
-
-	:root {
-		color-scheme: dark;
-
-		--lol-z-index-app: 100;
-		--lol-z-index-modal: 200;
-		--lol-z-index-popover: 300;
-		--lol-z-index-overlay: 400;
-		--lol-z-index-max: 9999;
-
-		--lol-scale: 1;
-
-		--lol-color-blue-100: #cdfafa;
-		--lol-color-blue-200: #0ac8b9;
-		--lol-color-blue-300: #0397ab;
-		--lol-color-blue-400: #005a82;
-		--lol-color-blue-500: #0a323c;
-		--lol-color-blue-600: #091428;
-		--lol-color-blue-700: #0a1428;
-
-		--lol-color-grey-100: #a09b8c;
-		--lol-color-grey-150: #5b5a56;
-		--lol-color-grey-200: #3c3c41;
-		--lol-color-grey-300: #1e2328;
-		--lol-color-grey-cool: #1e282d;
-
-		--lol-color-hextech-black: #010a13;
-
-		--lol-color-gold-100: #f0e6d2;
-		--lol-color-gold-200: #c8aa6e;
-		--lol-color-gold-300: #cdbe91;
-		--lol-color-gold-400: #c89b3c;
-		--lol-color-gold-500: #785a28;
-		--lol-color-gold-600: #463714;
-		--lol-color-gold-700: #32281e;
-
-		--lol-font-size-h1: 3.3333rem;
-		--lol-line-height-h1: 3.5rem;
-		--lol-letter-spacing-h1: 0.05em;
-		--lol-font-weight-h1: 700;
-
-		--lol-font-size-h2: 2.3333rem;
-		--lol-line-height-h2: 2.6667rem;
-		--lol-letter-spacing-h2: 0.05em;
-		--lol-font-weight-h2: 700;
-
-		--lol-font-size-h3: 1.9167rem;
-		--lol-line-height-h3: 2.3333rem;
-		--lol-letter-spacing-h3: 0.05em;
-		--lol-font-weight-h3: 700;
-
-		--lol-font-size-h4: 1.5rem;
-		--lol-line-height-h4: 1.8333rem;
-		--lol-letter-spacing-h4: 0.05em;
-		--lol-font-weight-h4: 700;
-
-		--lol-font-size-h5: 1.1667rem;
-		--lol-line-height-h5: 1.5rem;
-		--lol-letter-spacing-h5: 0.075em;
-		--lol-font-weight-h5: 700;
-
-		--lol-font-size-label: 0.9167rem;
-		--lol-line-height-label: 1.3333rem;
-		--lol-letter-spacing-label: 0.05em;
-		--lol-font-weight-label: 700;
-
-		--lol-font-size-stat: 1.1667rem;
-		--lol-line-height-stat: 1.6667rem;
-		--lol-letter-spacing-stat: 0.05em;
-		--lol-font-weight-stat: 700;
-
-		--lol-font-size-large-number: 4.75rem;
-		--lol-line-height-large-number: 5.1667rem;
-		--lol-letter-spacing-large-number: 0.025em;
-		--lol-font-weight-large-number: 500;
-
-		--lol-font-size-xs: 0.75rem;
-		--lol-line-height-xs: 1rem;
-		--lol-letter-spacing-xs: 0.025em;
-		--lol-font-weight-xs: 400;
-
-		--lol-font-size-sm: 0.875rem;
-		--lol-line-height-sm: 1.1025rem;
-		--lol-letter-spacing-sm: 0.02em;
-		--lol-font-weight-sm: 400;
-
-		--lol-font-size-base: 1rem;
-		--lol-line-height-base: 1.24rem;
-		--lol-letter-spacing-base: 0.01em;
-		--lol-font-weight-base: 400;
-
-		--lol-font-size-md: 1.1667rem;
-		--lol-line-height-md: 1.6667rem;
-		--lol-letter-spacing-md: 0.025em;
-		--lol-font-weight-md: 400;
-
-		--lol-font-size-lg: 1.5rem;
-		--lol-line-height-lg: 1.875rem;
-		--lol-letter-spacing-lg: 0.025em;
-		--lol-font-weight-lg: 400;
-
-		--lol-font-family-beaufort: "beaufort";
-		--lol-font-family-spiegel: "spiegel";
-
-		--lol-gradient-gold: linear-gradient(
-			to top,
-			var(--lol-color-gold-500),
-			var(--lol-color-gold-400),
-			var(--lol-color-gold-200)
-		);
-		--lol-gradient-gold-hover: linear-gradient(
-			to top,
-			var(--lol-color-gold-400),
-			var(--lol-color-gold-200),
-			var(--lol-color-gold-100)
-		);
-		--lol-gradient-gold-press: linear-gradient(
-			to top,
-			var(--lol-color-gold-600),
-			var(--lol-color-gold-600),
-			var(--lol-color-gold-500)
-		);
-
-		--lol-gradient-grey-300: linear-gradient(
-			to top,
-			var(--lol-color-grey-300),
-			var(--lol-color-grey-300),
-			var(--lol-color-grey-300)
-		);
-		--lol-gradient-grey-focus: linear-gradient(
-			to top,
-			var(--lol-color-grey-200),
-			var(--lol-color-grey-300),
-			var(--lol-color-grey-300)
-		);
-		--lol-gradient-hextech-black: linear-gradient(
-			to top,
-			var(--lol-color-hextech-black),
-			var(--lol-color-hextech-black)
-		);
-		--lol-gradient-disabled: linear-gradient(
-			to top,
-			var(--lol-color-grey-150),
-			var(--lol-color-grey-150),
-			var(--lol-color-grey-150)
-		);
-		--lol-gradient-transparent: linear-gradient(
-			to top,
-			transparent,
-			transparent
-		);
-
-		--lol-gradient-hextech: linear-gradient(
-			to top,
-			var(--lol-color-blue-200),
-			var(--lol-color-blue-400)
-		);
-		--lol-gradient-hextech-hover: linear-gradient(
-			to top,
-			var(--lol-color-blue-100),
-			var(--lol-color-blue-300)
-		);
-		--lol-gradient-hextech-press: linear-gradient(
-			to top,
-			var(--lol-color-blue-500),
-			var(--lol-color-blue-400)
-		);
-
-		--lol-form-height-small: 2rem;
-		--lol-form-height-medium: 2.25rem;
-		--lol-form-height-large: 2.5rem;
-	}
-}
 @layer lol {
 	._breadcrumbs_1gzfl_2 {
 		display: flex;
@@ -1828,6 +1646,83 @@
 		}
 	}
 }
+@layer lol {
+	._previewButton_sepr8_2 {
+		appearance: none;
+		margin: 0;
+		padding: 0;
+		border: 0;
+		background: none;
+
+		/*
+		 * Not `pointer`: the preview opens on hover, so a hand would promise a
+		 * click that does nothing, and the term is not a link. This is the arrow
+		 * a `<button>` gets from the browser anyway, spelled out because a host's
+		 * CSS reset may have decided otherwise.
+		 */
+		cursor: default;
+
+		/*
+		 * The term belongs to the sentence around it, so everything but the face
+		 * is inherited: size, weight, leading and colour come from the paragraph.
+		 * `font: inherit` also resets the family, hence the override after it.
+		 */
+		font: inherit;
+		font-family: var(--lol-font-family-spiegel);
+		/* A button is an inline-block; without this it rides above the text. */
+		vertical-align: baseline;
+		text-align: inherit;
+
+		color: var(--lol-color-gold-100);
+
+		/*
+		 * An underline rather than a border-bottom: it follows the term when it
+		 * wraps, sits under the descenders instead of clipping them, and can go
+		 * from dashed to solid without moving anything on the line.
+		 */
+		text-decoration: underline dashed var(--lol-preview-underline-color);
+		text-decoration-thickness: 1px;
+		text-underline-offset: 0.25em;
+
+		--lol-preview-underline-color: var(--lol-color-gold-400);
+
+		transition: color, text-decoration-color;
+		transition-duration: 0.3s;
+
+		outline-style: solid;
+		outline-color: var(--lol-color-gold-400);
+		outline-offset: 2px;
+
+		&:not(:focus-visible) {
+			outline: none;
+		}
+
+		&:hover,
+		&:focus-visible {
+			--lol-preview-underline-color: var(--lol-color-gold-200);
+		}
+
+		/*
+		 * Once the preview is open the dashes have done their job — they hint that
+		 * there is more to read, and there now is — so they close up into a rule.
+		 * `aria-expanded` is set by whichever trigger wraps the button, so this
+		 * also covers a `DialogTrigger` used as a toggle tip.
+		 */
+		&[aria-expanded="true"] {
+			--lol-preview-underline-color: var(--lol-color-gold-200);
+			text-decoration-style: solid;
+		}
+
+		&:active {
+			color: var(--lol-color-gold-300);
+		}
+
+		&:disabled {
+			color: var(--lol-color-grey-150);
+			--lol-preview-underline-color: var(--lol-color-grey-150);
+		}
+	}
+}
 @layer lol {
 	._wrapper_1jgc6_2 {
 		display: flex;
@@ -3388,3 +3283,502 @@
 		text-align: end;
 	}
 }
+@layer lol {
+	/*
+	 * "Metal linework as a framing element to support and draw focus towards
+	 * key pieces of information." The frame is a one-pixel hairline and nothing
+	 * more: a gradient painted into the border box, the plot painted into the
+	 * padding box. Anything heavier would compete with the data.
+	 */
+	._frame_7dkb0_8 {
+		display: flex;
+		flex-direction: column;
+		position: relative;
+		border: 1px solid transparent;
+		background:
+			var(--lol-chart-frame-fill) padding-box,
+			var(--lol-chart-frame-border) border-box;
+		color: var(--lol-chart-foreground);
+		font-family: var(--lol-chart-font-body);
+		/* A <figure>: the UA gives it 1em block and 40px inline margins. */
+		margin: 0;
+		padding: 1rem 1.125rem 1.125rem;
+		gap: 0.75rem;
+	}
+
+	/* Unframed: the same type and colours, no metal. For charts that already
+	 * sit inside a panel of their own. */
+	._bare_7dkb0_26 {
+		border-color: transparent;
+		background: none;
+		padding: 0;
+	}
+
+	/*
+	 * The diamond is the language's accent piece — it "guides attention toward
+	 * key information". Four of them pin the frame's corners to the grid the
+	 * square establishes. They are decoration, so they are hidden from the
+	 * accessibility tree by the component.
+	 */
+	._corner_7dkb0_38 {
+		position: absolute;
+		width: 5px;
+		height: 5px;
+		rotate: 45deg;
+		border: 1px solid var(--lol-chart-frame-accent);
+		background: var(--lol-chart-surface);
+	}
+
+	._bare_7dkb0_26 ._corner_7dkb0_38 {
+		display: none;
+	}
+
+	._cornerTopLeft_7dkb0_51 {
+		top: -3px;
+		left: -3px;
+	}
+
+	._cornerTopRight_7dkb0_56 {
+		top: -3px;
+		right: -3px;
+	}
+
+	._cornerBottomLeft_7dkb0_61 {
+		bottom: -3px;
+		left: -3px;
+	}
+
+	._cornerBottomRight_7dkb0_66 {
+		bottom: -3px;
+		right: -3px;
+	}
+
+	._header_7dkb0_71 {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 1rem;
+	}
+
+	._headings_7dkb0_78 {
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
+		min-width: 0;
+	}
+
+	/* Beaufort, spaced and uppercased — the client's voice for anything that
+	 * names a thing rather than measures it. */
+	._title_7dkb0_87 {
+		margin: 0;
+		font-family: var(--lol-chart-font-display);
+		font-size: var(--lol-font-size-h5, 1.1667rem);
+		line-height: var(--lol-line-height-h5, 1.5);
+		letter-spacing: var(--lol-letter-spacing-h5, 0.075em);
+		font-weight: var(--lol-font-weight-h5, 700);
+		text-transform: uppercase;
+		color: var(--lol-chart-foreground);
+	}
+
+	._subtitle_7dkb0_98 {
+		margin: 0;
+		font-size: var(--lol-font-size-sm, 0.875rem);
+		line-height: var(--lol-line-height-sm, 1.1025rem);
+		letter-spacing: var(--lol-letter-spacing-sm, 0.02em);
+		color: var(--lol-chart-muted);
+	}
+
+	._actions_7dkb0_106 {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		flex-shrink: 0;
+	}
+
+	/* A rule terminated at both ends by a diamond: the same figure the client
+	 * draws under every panel heading. */
+	._rule_7dkb0_115 {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+	}
+
+	._ruleLine_7dkb0_121 {
+		height: 1px;
+		flex-grow: 1;
+		border: none;
+		margin: 0;
+		background-image: linear-gradient(
+			to right,
+			transparent,
+			var(--lol-chart-frame-rule) 15%,
+			var(--lol-chart-frame-rule) 85%,
+			transparent
+		);
+	}
+
+	._ruleDiamond_7dkb0_135 {
+		width: 4px;
+		height: 4px;
+		rotate: 45deg;
+		border: 1px solid var(--lol-chart-frame-rule);
+		flex-shrink: 0;
+	}
+
+	._body_7dkb0_143 {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+	}
+
+	._footer_7dkb0_149 {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem 1rem;
+	}
+}
+@layer lol {
+	._legend_1rk8r_2 {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.375rem 1.25rem;
+		/* A <ul>: the UA gives it block margins and a list marker. */
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+
+	._item_1rk8r_13 {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5rem;
+		/* Never the series colour. Identity comes from the swatch beside the
+		 * label; a light teal or gold set as text would not clear contrast. */
+		color: var(--lol-chart-muted);
+		font-size: var(--lol-font-size-sm, 0.875rem);
+		line-height: var(--lol-line-height-sm, 1.1025rem);
+		letter-spacing: var(--lol-letter-spacing-sm, 0.02em);
+	}
+
+	/* The diamond again, at series scale, lit by the hue it stands for. */
+	._swatch_1rk8r_26 {
+		width: 0.5rem;
+		height: 0.5rem;
+		flex-shrink: 0;
+		rotate: 45deg;
+		background: var(--lol-chart-legend-color);
+		box-shadow: 0 0 5px var(--lol-chart-legend-color);
+	}
+
+	._square_1rk8r_35 {
+		rotate: none;
+	}
+
+	._line_1rk8r_39 {
+		width: 0.875rem;
+		height: 2px;
+		rotate: none;
+		box-shadow: none;
+	}
+}
+@layer lol {
+	._chart_1mnqy_2 {
+		width: 100%;
+		min-width: 0;
+	}
+}
+@layer lol {
+	/* ----- CSS reset ----- */
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
+	/* ----- Default CSS variables ----- */
+
+	:root {
+		color-scheme: dark;
+
+		--lol-z-index-app: 100;
+		--lol-z-index-modal: 200;
+		--lol-z-index-popover: 300;
+		--lol-z-index-overlay: 400;
+		--lol-z-index-max: 9999;
+
+		--lol-scale: 1;
+
+		--lol-color-blue-100: #cdfafa;
+		--lol-color-blue-200: #0ac8b9;
+		--lol-color-blue-300: #0397ab;
+		--lol-color-blue-400: #005a82;
+		--lol-color-blue-500: #0a323c;
+		--lol-color-blue-600: #091428;
+		--lol-color-blue-700: #0a1428;
+
+		--lol-color-grey-100: #a09b8c;
+		--lol-color-grey-150: #5b5a56;
+		--lol-color-grey-200: #3c3c41;
+		--lol-color-grey-300: #1e2328;
+		--lol-color-grey-cool: #1e282d;
+
+		--lol-color-hextech-black: #010a13;
+
+		--lol-color-gold-100: #f0e6d2;
+		--lol-color-gold-200: #c8aa6e;
+		--lol-color-gold-300: #cdbe91;
+		--lol-color-gold-400: #c89b3c;
+		--lol-color-gold-500: #785a28;
+		--lol-color-gold-600: #463714;
+		--lol-color-gold-700: #32281e;
+
+		--lol-font-size-h1: 3.3333rem;
+		--lol-line-height-h1: 3.5rem;
+		--lol-letter-spacing-h1: 0.05em;
+		--lol-font-weight-h1: 700;
+
+		--lol-font-size-h2: 2.3333rem;
+		--lol-line-height-h2: 2.6667rem;
+		--lol-letter-spacing-h2: 0.05em;
+		--lol-font-weight-h2: 700;
+
+		--lol-font-size-h3: 1.9167rem;
+		--lol-line-height-h3: 2.3333rem;
+		--lol-letter-spacing-h3: 0.05em;
+		--lol-font-weight-h3: 700;
+
+		--lol-font-size-h4: 1.5rem;
+		--lol-line-height-h4: 1.8333rem;
+		--lol-letter-spacing-h4: 0.05em;
+		--lol-font-weight-h4: 700;
+
+		--lol-font-size-h5: 1.1667rem;
+		--lol-line-height-h5: 1.5rem;
+		--lol-letter-spacing-h5: 0.075em;
+		--lol-font-weight-h5: 700;
+
+		--lol-font-size-label: 0.9167rem;
+		--lol-line-height-label: 1.3333rem;
+		--lol-letter-spacing-label: 0.05em;
+		--lol-font-weight-label: 700;
+
+		--lol-font-size-stat: 1.1667rem;
+		--lol-line-height-stat: 1.6667rem;
+		--lol-letter-spacing-stat: 0.05em;
+		--lol-font-weight-stat: 700;
+
+		--lol-font-size-large-number: 4.75rem;
+		--lol-line-height-large-number: 5.1667rem;
+		--lol-letter-spacing-large-number: 0.025em;
+		--lol-font-weight-large-number: 500;
+
+		--lol-font-size-xs: 0.75rem;
+		--lol-line-height-xs: 1rem;
+		--lol-letter-spacing-xs: 0.025em;
+		--lol-font-weight-xs: 400;
+
+		--lol-font-size-sm: 0.875rem;
+		--lol-line-height-sm: 1.1025rem;
+		--lol-letter-spacing-sm: 0.02em;
+		--lol-font-weight-sm: 400;
+
+		--lol-font-size-base: 1rem;
+		--lol-line-height-base: 1.24rem;
+		--lol-letter-spacing-base: 0.01em;
+		--lol-font-weight-base: 400;
+
+		--lol-font-size-md: 1.1667rem;
+		--lol-line-height-md: 1.6667rem;
+		--lol-letter-spacing-md: 0.025em;
+		--lol-font-weight-md: 400;
+
+		--lol-font-size-lg: 1.5rem;
+		--lol-line-height-lg: 1.875rem;
+		--lol-letter-spacing-lg: 0.025em;
+		--lol-font-weight-lg: 400;
+
+		--lol-font-family-beaufort: "beaufort";
+		--lol-font-family-spiegel: "spiegel";
+
+		--lol-gradient-gold: linear-gradient(
+			to top,
+			var(--lol-color-gold-500),
+			var(--lol-color-gold-400),
+			var(--lol-color-gold-200)
+		);
+		--lol-gradient-gold-hover: linear-gradient(
+			to top,
+			var(--lol-color-gold-400),
+			var(--lol-color-gold-200),
+			var(--lol-color-gold-100)
+		);
+		--lol-gradient-gold-press: linear-gradient(
+			to top,
+			var(--lol-color-gold-600),
+			var(--lol-color-gold-600),
+			var(--lol-color-gold-500)
+		);
+
+		--lol-gradient-grey-300: linear-gradient(
+			to top,
+			var(--lol-color-grey-300),
+			var(--lol-color-grey-300),
+			var(--lol-color-grey-300)
+		);
+		--lol-gradient-grey-focus: linear-gradient(
+			to top,
+			var(--lol-color-grey-200),
+			var(--lol-color-grey-300),
+			var(--lol-color-grey-300)
+		);
+		--lol-gradient-hextech-black: linear-gradient(
+			to top,
+			var(--lol-color-hextech-black),
+			var(--lol-color-hextech-black)
+		);
+		--lol-gradient-disabled: linear-gradient(
+			to top,
+			var(--lol-color-grey-150),
+			var(--lol-color-grey-150),
+			var(--lol-color-grey-150)
+		);
+		--lol-gradient-transparent: linear-gradient(
+			to top,
+			transparent,
+			transparent
+		);
+
+		--lol-gradient-hextech: linear-gradient(
+			to top,
+			var(--lol-color-blue-200),
+			var(--lol-color-blue-400)
+		);
+		--lol-gradient-hextech-hover: linear-gradient(
+			to top,
+			var(--lol-color-blue-100),
+			var(--lol-color-blue-300)
+		);
+		--lol-gradient-hextech-press: linear-gradient(
+			to top,
+			var(--lol-color-blue-500),
+			var(--lol-color-blue-400)
+		);
+
+		--lol-form-height-small: 2rem;
+		--lol-form-height-medium: 2.25rem;
+		--lol-form-height-large: 2.5rem;
+
+		/* ----- Charts -----
+		 *
+		 * Hextech separates the interface into two materials: metal linework
+		 * that *frames* information, and hextech magic that *is* it. A chart
+		 * maps onto that split exactly — gold for the frame, the axes and the
+		 * grid; the magic palette for the marks — so the ink and frame tokens
+		 * below are gold and the series tokens are not.
+		 *
+		 * Used by `@lolmath/ui/charts`, but defined here so a host page can
+		 * retune them from one place, and so a chart built by hand against
+		 * TanStack Charts picks them up too. */
+
+		/* Parchment gold for what you read, dimmer gold for what merely
+		 * orients you. The chart engine paints tick labels at 0.68 opacity on
+		 * top of these, so `muted` is deliberately brighter than it looks. */
+		--lol-chart-foreground: var(--lol-color-gold-100);
+		--lol-chart-muted: var(--lol-color-gold-300);
+		/* The grid is painted at 0.11 opacity — it has to start bright to
+		 * survive that and still read as gold rather than grey. */
+		--lol-chart-grid: var(--lol-color-gold-200);
+		--lol-chart-surface: var(--lol-color-hextech-black);
+
+		--lol-chart-frame-fill: linear-gradient(
+			180deg,
+			var(--lol-color-blue-600) 0%,
+			var(--lol-color-hextech-black) 100%
+		);
+		--lol-chart-frame-border: linear-gradient(
+			180deg,
+			var(--lol-color-gold-500) 0%,
+			var(--lol-color-gold-600) 55%,
+			var(--lol-color-gold-500) 100%
+		);
+		--lol-chart-frame-accent: var(--lol-color-gold-400);
+		--lol-chart-frame-rule: var(--lol-color-gold-500);
+
+		/* Six categorical slots in a fixed order, assigned in sequence and
+		 * never cycled. Slots 1 and 2 are the Hextech signature (teal energy,
+		 * Piltover gold); the rest reach into the wider Runeterra palette,
+		 * because a palette that stayed inside gold and teal could not be told
+		 * apart. The set is validated on the hextech-black surface for the
+		 * OKLCH lightness band, the chroma floor, protan/deutan separation and
+		 * contrast — see the readme before changing a value. */
+		--lol-chart-series-1: #0aa89b;
+		--lol-chart-series-2: #ba8c2e;
+		--lol-chart-series-3: #8e6be8;
+		--lol-chart-series-4: #e8574f;
+		--lol-chart-series-5: #1e8fd5;
+		--lol-chart-series-6: #4fa83a;
+
+		/* Reserved meanings. Never spend these on "series 4". */
+		--lol-chart-positive: #2e9e63;
+		--lol-chart-negative: #d6453c;
+
+		--lol-chart-font-display:
+			var(--lol-font-family-beaufort), "Times New Roman", serif;
+		--lol-chart-font-body:
+			var(--lol-font-family-spiegel), system-ui, sans-serif;
+
+		/* Bridge to TanStack Charts' own defaults, so a chart definition
+		 * written by hand — one that never sets a theme — still picks up the
+		 * Hextech palette and tooltip. */
+		--ts-chart-1: var(--lol-chart-series-1);
+		--ts-chart-2: var(--lol-chart-series-2);
+		--ts-chart-3: var(--lol-chart-series-3);
+		--ts-chart-4: var(--lol-chart-series-4);
+		--ts-chart-5: var(--lol-chart-series-5);
+		--ts-chart-6: var(--lol-chart-series-6);
+		--ts-chart-focus-fill: var(--lol-chart-surface);
+		--ts-chart-crosshair-marker-fill: var(--lol-chart-surface);
+		--ts-chart-crosshair-label-halo: var(--lol-chart-surface);
+
+		--ts-chart-tooltip-background: var(--lol-chart-surface);
+		--ts-chart-tooltip-border: 1px solid var(--lol-color-gold-500);
+		--ts-chart-tooltip-border-radius: 0;
+		--ts-chart-tooltip-color: var(--lol-chart-foreground);
+		--ts-chart-tooltip-padding: 0.5rem 0.7rem;
+		--ts-chart-tooltip-shadow:
+			0 0 0 1px var(--lol-color-hextech-black), 0 8px 24px rgb(1 10 19 / 0.75);
+		--ts-chart-tooltip-font: 400 0.8125rem / 1.35 var(--lol-chart-font-body);
+	}
+
+	/*
+	 * The scene TanStack Charts paints is plain SVG with stable class names on
+	 * it, so the parts CSS does better than JS — line caps, the magic glow —
+	 * are done here. `[data-lol-chart]` is set by `HextechChart`; nothing
+	 * outside a Hextech chart is touched.
+	 */
+	[data-lol-chart] {
+		font-family: var(--lol-chart-font-body);
+		color: var(--lol-chart-foreground);
+	}
+
+	[data-lol-chart] .ts-chart__line {
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
+
+	/*
+	 * "Its brightest executions are reserved for pivotal moments." The glow is
+	 * the one place the marks are allowed to be loud, so it stays faint.
+	 */
+	[data-lol-chart-glow="true"] .ts-chart__line,
+	[data-lol-chart-glow="true"] .ts-chart__area {
+		filter: drop-shadow(0 0 3px rgb(10 168 155 / 0.18));
+	}
+
+	[data-lol-chart] .ts-chart__crosshair {
+		pointer-events: none;
+	}
+}