@automattic/charts 1.10.3 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/charts",
-	"version": "1.10.3",
+	"version": "1.11.0",
 	"description": "Display charts within Automattic products.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/charts/#readme",
 	"bugs": {

package/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss

@@ -12,7 +12,7 @@
 
 .main-rate {
 	overflow: hidden;
-	color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
+	color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 	text-overflow: ellipsis;
 	font-size: var(--wpds-typography-font-size-xl, 18px);
 	font-style: normal;
@@ -54,7 +54,7 @@
 }
 
 .step-label {
-	color: var(--wpds-color-foreground-content-neutral-weak, #707070);
+	color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
 	font-size: var(--wpds-typography-font-size-sm, 12px);
 	font-weight: var(--wpds-typography-font-weight-regular, 400);
 	line-height: var(--wpds-typography-line-height-xs, 16px);
@@ -64,7 +64,7 @@
 }
 
 .step-rate {
-	color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
+	color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 	font-size: var(--wpds-typography-font-size-md, 13px);
 	font-weight: var(--wpds-typography-font-weight-medium, 499);
 	line-height: var(--wpds-typography-line-height-xs, 16px);
@@ -100,7 +100,7 @@
 }
 
 .tooltip-wrapper {
-	background: var(--wpds-color-background-surface-neutral-strong, #fff);
+	background: var(--a8c-charts-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
 
 	// Override .visx-tooltip inline styles.
 	border-radius: var(--wpds-border-radius-md, 4px) !important;
@@ -110,7 +110,7 @@
 }
 
 .tooltip-title {
-	color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
+	color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 	font-size: var(--wpds-typography-font-size-sm, 12px);
 	font-style: normal;
 	font-weight: var(--wpds-typography-font-weight-regular, 400);
@@ -118,7 +118,7 @@
 }
 
 .tooltip-content {
-	color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
+	color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 	font-size: var(--wpds-typography-font-size-md, 13px);
 	font-style: normal;
 	font-weight: var(--wpds-typography-font-weight-medium, 499);
@@ -127,6 +127,6 @@
 
 .empty-state {
 	text-align: center;
-	color: var(--wpds-color-foreground-content-neutral-weak, #707070);
+	color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
 	font-size: var(--wpds-typography-font-size-lg, 16px);
 }

package/src/charts/heatmap-chart/heatmap-chart.module.scss

@@ -1,3 +1,8 @@
+// Focus-ring width shared across the grid and cell-selected focus outlines. A
+// Sass var, not a custom property: a compile-time constant scoped to this
+// module, so it needs no runtime cascade and never lands on the DOM.
+$focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
+
 .heatmap-chart {
 	width: 100%;
 	height: 100%;
@@ -14,14 +19,14 @@
 
 .heatmap-chart__empty {
 	padding: var(--wpds-dimension-padding-lg, 16px);
-	color: var(--wpds-color-foreground-content-neutral-weak, #707070);
+	color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
 }
 
 // Track template is set inline because CSS `repeat()` won't take a `var()`
 // count. ARIA rows are `display: contents` so their cells join this grid.
 .heatmap-chart__grid {
 	display: grid;
-	gap: var(--heatmap-cell-gap, var(--wpds-dimension-gap-xs, 4px));
+	gap: var(--a8c-charts-dimension-heatmap-cell-gap, var(--wpds-dimension-gap-xs, 4px));
 	flex: 1 1 0;
 	width: 100%;
 	// Override flex's auto minimum so short widgets do not scroll.
@@ -29,8 +34,8 @@
 
 	&:focus-visible {
 		outline:
-			var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid
-			var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
+			$focus-ring-width solid
+			var(--a8c-charts-color-focus, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
 		outline-offset: 2px;
 		border-radius: var(--wpds-border-radius-sm, 2px);
 	}
@@ -58,7 +63,7 @@
 
 .heatmap-chart__col-label,
 .heatmap-chart__row-label {
-	color: var(--wpds-color-foreground-content-neutral-weak, #707070);
+	color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
 	font-size: var(--wpds-typography-font-size-xs, 11px);
 	white-space: nowrap;
 	overflow: visible;
@@ -84,7 +89,7 @@
 	min-height: 0;
 	border-radius: var(--wpds-border-radius-sm, 2px);
 	// Empty (no-data) default; cells with a value override it below.
-	background: var(--wpds-color-background-track-neutral-weak, #f0f0f0);
+	background: var(--a8c-charts-color-track, var(--wpds-color-background-track-neutral-weak, #f0f0f0));
 }
 
 // An empty grid slot (calendar ragged edges): keeps its track but paints and
@@ -97,30 +102,30 @@
 // Floor the mix at 15% so the lowest value stays visibly tinted, distinct from
 // an empty cell.
 .heatmap-chart__cell--filled {
-	background: color-mix(in sRGB, var(--heatmap-primary) calc((0.15 + 0.85 * var(--intensity)) * 100%), var(--heatmap-bg, #fff));
+	background: color-mix(in sRGB, var(--a8c-charts-color-heatmap-primary) calc((0.15 + 0.85 * var(--a8c-charts-heatmap-cell-intensity)) * 100%), var(--a8c-charts-color-heatmap-background, #fff));
 }
 
 .heatmap-chart__cell--selected {
 	outline:
-		var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)) solid
-		var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
-	outline-offset: calc(-1 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
+		$focus-ring-width solid
+		var(--a8c-charts-color-focus, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
+	outline-offset: calc(-1 * #{$focus-ring-width});
 }
 
 .heatmap-chart__cell-value {
-	color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
+	color: var(--a8c-charts-color-label, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 	font-size: var(--wpds-typography-font-size-md, 13px);
 }
 
 // Light text on fills dark enough to out-contrast dark text (decided in JS from
 // the blended fill luminance).
 .heatmap-chart__cell--strong .heatmap-chart__cell-value {
-	color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
+	color: var(--a8c-charts-color-label-inverse, var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0));
 }
 
 .heatmap-chart__legend-swatch {
 	width: var(--wpds-dimension-size-3xs, 12px);
 	height: var(--wpds-dimension-size-3xs, 12px);
 	border-radius: var(--wpds-border-radius-sm, 2px);
-	background: color-mix(in sRGB, var(--heatmap-primary) calc((0.15 + 0.85 * var(--intensity)) * 100%), var(--heatmap-bg, #fff));
+	background: color-mix(in sRGB, var(--a8c-charts-color-heatmap-primary) calc((0.15 + 0.85 * var(--a8c-charts-heatmap-cell-intensity)) * 100%), var(--a8c-charts-color-heatmap-background, #fff));
 }

package/src/charts/heatmap-chart/heatmap-chart.tsx

@@ -277,20 +277,20 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 	// and a min floor makes the grid overflow (for a scrollable wrapper)
 	// rather than crushing cells on long ranges.
 	const columnTrack = compact
-		? 'var(--heatmap-cell-size)'
+		? 'var(--a8c-charts-dimension-heatmap-cell-size)'
 		: `minmax(${ minCellWidth ?? 0 }px, ${ maxCellWidth ? `${ maxCellWidth }px` : '1fr' })`;
 	const rowTrack = compact
-		? 'var(--heatmap-cell-size)'
+		? 'var(--a8c-charts-dimension-heatmap-cell-size)'
 		: `minmax(${ minCellHeight ?? 0 }px, ${ maxCellHeight ? `${ maxCellHeight }px` : '1fr' })`;
 	const gridStyle: Record< string, string | number > = {
-		'--heatmap-primary': primaryColorHex,
-		'--heatmap-bg': theme.backgroundColor,
+		'--a8c-charts-color-heatmap-primary': primaryColorHex,
+		'--a8c-charts-color-heatmap-background': theme.backgroundColor,
 		gridTemplateColumns: `auto repeat(${ columns }, ${ columnTrack })`,
 		gridTemplateRows: `auto repeat(${ rows }, ${ rowTrack })`,
 	};
 	if ( compact ) {
-		gridStyle[ '--heatmap-cell-gap' ] = `${ compactCellGap }px`;
-		gridStyle[ '--heatmap-cell-size' ] = `${ compactCellSize }px`;
+		gridStyle[ '--a8c-charts-dimension-heatmap-cell-gap' ] = `${ compactCellGap }px`;
+		gridStyle[ '--a8c-charts-dimension-heatmap-cell-size' ] = `${ compactCellSize }px`;
 	}
 
 	const activeDescendant =
@@ -419,7 +419,11 @@ const HeatmapChartInternal: FC< HeatmapChartProps > = ( {
 														selectedIndex === flatIndex,
 												} ) }
 												style={
-													present ? ( { '--intensity': normalized } as CSSProperties ) : undefined
+													present
+														? ( {
+																'--a8c-charts-heatmap-cell-intensity': normalized,
+														  } as CSSProperties )
+														: undefined
 												}
 												onMouseMove={ handleCellMouseMove }
 												onMouseLeave={ handleCellMouseLeave }

package/src/charts/heatmap-chart/private/heatmap-legend.tsx

@@ -37,9 +37,9 @@ export const HeatmapLegend: FC< HeatmapLegendProps > = ( { steps = 5, lessLabel,
 							className={ styles[ 'heatmap-chart__legend-swatch' ] }
 							style={
 								{
-									'--heatmap-primary': primaryColorHex,
-									'--heatmap-bg': backgroundColor,
-									'--intensity': intensity,
+									'--a8c-charts-color-heatmap-primary': primaryColorHex,
+									'--a8c-charts-color-heatmap-background': backgroundColor,
+									'--a8c-charts-heatmap-cell-intensity': intensity,
 								} as CSSProperties
 							}
 						/>

package/src/charts/heatmap-chart/test/heatmap-chart.test.tsx

@@ -285,7 +285,7 @@ describe( 'HeatmapChart', () => {
 		renderChart();
 		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
 		// Non-compact sets no inline gap — the SCSS falls back to the WPDS token.
-		expect( grid.style.getPropertyValue( '--heatmap-cell-gap' ) ).toBe( '' );
+		expect( grid.style.getPropertyValue( '--a8c-charts-dimension-heatmap-cell-gap' ) ).toBe( '' );
 	} );
 
 	test( 'applies the compact gap inline from the theme compactCellGap', () => {
@@ -295,7 +295,9 @@ describe( 'HeatmapChart', () => {
 			</GlobalChartsProvider>
 		);
 		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
-		expect( grid.style.getPropertyValue( '--heatmap-cell-gap' ) ).toBe( '3px' );
+		expect( grid.style.getPropertyValue( '--a8c-charts-dimension-heatmap-cell-gap' ) ).toBe(
+			'3px'
+		);
 	} );
 
 	test( 'sizes compact cells to the theme compactCellSize', () => {
@@ -305,9 +307,13 @@ describe( 'HeatmapChart', () => {
 			</GlobalChartsProvider>
 		);
 		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
-		expect( grid.style.getPropertyValue( '--heatmap-cell-size' ) ).toBe( '20px' );
+		expect( grid.style.getPropertyValue( '--a8c-charts-dimension-heatmap-cell-size' ) ).toBe(
+			'20px'
+		);
 		// Compact track template is built from the fixed cell size.
-		expect( grid.style.gridTemplateColumns ).toContain( 'var(--heatmap-cell-size)' );
+		expect( grid.style.gridTemplateColumns ).toContain(
+			'var(--a8c-charts-dimension-heatmap-cell-size)'
+		);
 	} );
 
 	test( 'caps cell width without changing the normal vertical layout', () => {
@@ -343,7 +349,7 @@ describe( 'HeatmapChart', () => {
 	test( 'applies the primaryColor prop as the cell-scale color', () => {
 		renderChart( { primaryColor: '#abcdef' } );
 		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
-		expect( grid.style.getPropertyValue( '--heatmap-primary' ) ).toBe( '#abcdef' );
+		expect( grid.style.getPropertyValue( '--a8c-charts-color-heatmap-primary' ) ).toBe( '#abcdef' );
 	} );
 
 	test( 'resolves primaryColor from the chart theme', () => {
@@ -353,7 +359,7 @@ describe( 'HeatmapChart', () => {
 			</GlobalChartsProvider>
 		);
 		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
-		expect( grid.style.getPropertyValue( '--heatmap-primary' ) ).toBe( '#0a0b0c' );
+		expect( grid.style.getPropertyValue( '--a8c-charts-color-heatmap-primary' ) ).toBe( '#0a0b0c' );
 	} );
 
 	test( 'falls back to the palette colors[0] when no prop or theme primaryColor is set', () => {
@@ -363,7 +369,7 @@ describe( 'HeatmapChart', () => {
 			</GlobalChartsProvider>
 		);
 		const grid = screen.getByRole( 'grid', { name: /heatmap/i } );
-		expect( grid.style.getPropertyValue( '--heatmap-primary' ) ).toBe( '#0a0b0c' );
+		expect( grid.style.getPropertyValue( '--a8c-charts-color-heatmap-primary' ) ).toBe( '#0a0b0c' );
 	} );
 
 	test( 'the unresponsive export pins explicit width and height', () => {

package/src/charts/leaderboard-chart/hooks/index.ts

@@ -1 +1,2 @@
+export { useFittedRowCount, SUBPIXEL_TOLERANCE } from './use-fitted-row-count';
 export { useLeaderboardLegendItems } from './use-leaderboard-legend-items';

package/src/charts/leaderboard-chart/hooks/use-fitted-row-count.ts

@@ -0,0 +1,115 @@
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+
+/**
+ * Fractional layout rounding can put a row's bottom a hair past the container's
+ * without any visible clipping. Allow that much slack before hiding a row.
+ *
+ * Exported so tests and stories assert against the real tolerance rather than
+ * restating it.
+ */
+export const SUBPIXEL_TOLERANCE = 0.5;
+
+/**
+ * Counts how many leading rows fit inside the content container.
+ *
+ * Rows are read from the DOM rather than derived from constants: row height
+ * depends on the theme's row gap, label wrapping, and whatever a caller renders
+ * as a label, so any restated number would drift.
+ *
+ * Every row is a direct grid child marked with `data-row-index`; interactive rows
+ * use a button wrapper and non-interactive rows use a div wrapper.
+ *
+ * @param enabled  - Whether to measure at all. When false every row fits.
+ * @param rowCount - Total number of rows rendered.
+ * @param data     - Rendered row data, whose geometry may change without changing the count.
+ * @return Ref for the content container and the number of leading rows that fit.
+ */
+export function useFittedRowCount( enabled: boolean, rowCount: number, data: unknown ) {
+	const contentRef = useRef< HTMLDivElement | null >( null );
+	const [ fittedCount, setFittedCount ] = useState( rowCount );
+	const [ isMeasurable, setIsMeasurable ] = useState( true );
+
+	const measure = useCallback( () => {
+		const content = contentRef.current;
+		if ( ! content ) {
+			return;
+		}
+
+		// Switching from the default scrollable mode can leave the content at a
+		// non-zero scroll offset, which would shift every measurement below.
+		content.scrollTop = 0;
+
+		const rows = content.querySelectorAll< HTMLElement >(
+			':scope > [data-leaderboard-grid] > [data-row-index]'
+		);
+
+		const rowBottoms: number[] = [];
+		rows.forEach( row => {
+			const index = Number( row.getAttribute( 'data-row-index' ) );
+			// An unparseable index would write a non-numeric key, leaving a hole
+			// that silently truncates the scan below at the preceding row.
+			if ( ! Number.isInteger( index ) || index < 0 || index >= rowCount ) {
+				return;
+			}
+			const { bottom } = row.getBoundingClientRect();
+			rowBottoms[ index ] = Math.max( rowBottoms[ index ] ?? -Infinity, bottom );
+		} );
+
+		// Fail open. If the rows cannot be measured at all — a changed DOM shape,
+		// a detached container — falling back to the scrollable default keeps the
+		// data reachable, where hiding every row reads as a broken tile.
+		if ( rowBottoms.length === 0 ) {
+			setIsMeasurable( false );
+			setFittedCount( rowCount );
+			return;
+		}
+		setIsMeasurable( true );
+
+		const contentBottom = content.getBoundingClientRect().bottom + SUBPIXEL_TOLERANCE;
+
+		let fits = 0;
+		while ( fits < rowBottoms.length && rowBottoms[ fits ] <= contentBottom ) {
+			fits++;
+		}
+
+		// Bail before setState: setState inside a ResizeObserver callback is the
+		// usual way this grows a render loop.
+		setFittedCount( current => ( current === fits ? current : fits ) );
+	}, [ rowCount ] );
+
+	// Measure after row data changes so geometry updates are caught even when the
+	// row count and the grid's overall size stay the same (for example, one label
+	// wraps while another unwraps after a same-length data update).
+	useLayoutEffect( () => {
+		if ( ! enabled ) {
+			setFittedCount( rowCount );
+			return;
+		}
+
+		measure();
+	}, [ enabled, rowCount, data, measure ] );
+
+	useLayoutEffect( () => {
+		if ( ! enabled ) {
+			return;
+		}
+
+		const content = contentRef.current;
+		if ( ! content ) {
+			return;
+		}
+
+		const observer = new ResizeObserver( measure );
+		// The container catches tile resizing; the grid catches font, image,
+		// theme, or label changes that alter row geometry on an unchanged tile.
+		observer.observe( content );
+		const grid = content.querySelector< HTMLElement >( ':scope > [data-leaderboard-grid]' );
+		if ( grid ) {
+			observer.observe( grid );
+		}
+
+		return () => observer.disconnect();
+	}, [ enabled, rowCount, measure ] );
+
+	return { contentRef, fittedCount: enabled ? fittedCount : rowCount, isMeasurable };
+}

package/src/charts/leaderboard-chart/leaderboard-chart.module.scss

@@ -16,6 +16,15 @@
 		flex: 1;
 		min-height: 0;
 		overflow: auto;
+
+		// With fitRows the chart hides the rows that would not fit, so there is
+		// nothing left to scroll to — a scrollbar here would only ever reveal the
+		// hidden rows' reserved space.
+		&--fit {
+			overflow: hidden;
+			// Anchors .fitEmptyState, which is laid over the hidden rows.
+			position: relative;
+		}
 	}
 }
 
@@ -51,7 +60,7 @@
 		// row's fixed-pixel hover inset from collapsing a narrow bar to nothing.
 		min-width: var(--wpds-dimension-size-5xs, 4px);
 
-		border-radius: var(--a8c--charts--leaderboard--bar--border-radius, 9999px);
+		border-radius: var(--a8c-charts-border-radius-leaderboard-bar, var(--a8c--charts--leaderboard--bar--border-radius, 9999px));
 		z-index: -1; /* places it behind the label */
 
 		&--animated {
@@ -95,14 +104,32 @@
 .emptyState {
 	padding: var(--wpds-dimension-padding-3xl, 32px) var(--wpds-dimension-padding-lg, 16px);
 	text-align: center;
-	color: var(--wpds-color-foreground-content-neutral-weak, #707070);
+	color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
 	font-size: var(--wpds-typography-font-size-md, 13px);
 	font-style: italic;
 }
 
-.row {
-	--focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
+// Shown when not even one row fits. The rows stay in the layout underneath so
+// they remain measurable, so this is taken out of flow to sit over them.
+.fitEmptyState {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	// The shared empty state reserves generous vertical whitespace. This overlay
+	// is specifically for compact containers, where the text may fit even though
+	// a complete data row does not.
+	padding-block: 0;
+}
 
+// Focus-ring width shared so a standard row's reserved padding and an
+// interactive row's outline (and its inset offset) stay equal. A Sass var,
+// not a custom property: a compile-time constant scoped to this module, so it
+// needs no runtime cascade and never lands on the DOM as an unprefixed var.
+$focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
+
+.row {
 	display: grid;
 	grid-column: 1 / -1;
 	grid-template-columns: subgrid;
@@ -110,7 +137,7 @@
 	// Every row reserves the same space for the interactive focus ring. Keeping
 	// this on the shared wrapper ensures that adding or removing an action never
 	// changes the row height or subgrid column edges.
-	padding: var(--focus-ring-width);
+	padding: $focus-ring-width;
 }
 
 .interactiveRow {
@@ -153,14 +180,14 @@
 
 		// Fixed reserve for the chevron — the value slides by it in full, and the
 		// bar width inset (see leaderboard-chart.tsx) scales it by the bar's share.
-		--a8c--charts--leaderboard--bar--hover-inset: var(--wpds-dimension-gap-2xl, 32px);
+		--a8c-charts-dimension-leaderboard-bar-hover-inset: var(--wpds-dimension-gap-2xl, 32px);
 
 		.bar {
 			opacity: 0.5;
 		}
 
 		.valueContainer {
-			transform: translateX(calc(var(--a8c--charts--leaderboard--bar--hover-inset) * -1));
+			transform: translateX(calc(var(--a8c-charts-dimension-leaderboard-bar-hover-inset) * -1));
 		}
 
 		.chevron {
@@ -171,18 +198,18 @@
 	// In RTL the value slides toward the inline start the other way (rightward).
 	[dir="rtl"] &:hover .valueContainer,
 	[dir="rtl"] &:focus-visible .valueContainer {
-		transform: translateX(var(--a8c--charts--leaderboard--bar--hover-inset));
+		transform: translateX(var(--a8c-charts-dimension-leaderboard-bar-hover-inset));
 	}
 
 	&:focus-visible {
 		border-radius: var(--wpds-border-radius-sm, 2px);
 		outline:
-			var(--focus-ring-width) solid
-			var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
+			$focus-ring-width solid
+			var(--a8c-charts-color-focus, var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9)));
 		// Inset by its own width so the outer edge hugs the row boundary: the
 		// outline then sits in the shared row padding, clear of the bar, and stays
 		// inside the overflow:auto container that would clip an outset ring.
-		outline-offset: calc(-1 * var(--focus-ring-width));
+		outline-offset: calc(-1 * #{$focus-ring-width});
 	}
 }
 
@@ -193,7 +220,7 @@
 	bottom: 0;
 	margin-block: auto;
 	opacity: 0;
-	color: var(--wpds-color-foreground-content-neutral-weak, #707070);
+	color: var(--a8c-charts-color-label-secondary, var(--wpds-color-foreground-content-neutral-weak, #707070));
 	transition:
 		opacity var(--wpds-motion-duration-sm, 100ms)
 		var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1));