Charts: inject wpds fallbacks during build

projects/js-packages/charts/AGENTS.md

@@ -24,7 +24,7 @@ jp changelog add js-packages/charts -s patch -t changed -e "Charts: <user-facing
 
 The package is migrating to WordPress UI and Theme as its defaults. When adding or changing code, follow these defaults unless the task explicitly says otherwise:
 
-- **Design tokens (WPDS).** In SCSS, use `var(--wpds-dimension-*, <fallback>)`, `var(--wpds-border-*, <fallback>)`, and `var(--wpds-typography-*, <fallback>)` instead of hardcoded px values for spacing, padding, margins, border radius, border width, font size, and font weight. Fallbacks must match the WPDS spec value for that token — do not invent fallback values.
+- **Design tokens (WPDS).** In SCSS and theme JS, use bare `var(--wpds-*)` tokens (no hardcoded fallbacks). Official fallbacks are injected at build time via `@wordpress/theme`'s Lightning CSS visitor (`css.lightningcss.visitor` in `tsdown.config.ts`) and the Vite `vite-ds-token-fallbacks` plugin for JS/TS theme strings. Do not invent fallback values.
 - **UI primitives.** Prefer `Stack` and the stable `Text` from `@wordpress/ui` over ad-hoc flexbox or raw `<span>`/`<div>` for layout and text. Do not use `__experimental*` exports from `@wordpress/components` (e.g. `__experimentalText`, `__experimentalHStack`) — use the stable `@wordpress/ui` equivalents. Exception: `__experimentalGrid` has no stable alternative yet and is acceptable to use for now.
 - **Theming.** Theming flows through `@wordpress/theme`'s `ThemeProvider` (unlocked via private APIs in Storybook; see `src/stories/chart-decorator.tsx`). Do not manually override DS tokens in stories or components to achieve theming — pass a color through `ThemeProvider` instead.
 - **Chart element styles.** Read chart element styles via `getElementStyles` from `GlobalChartsProvider`, not directly from `theme`. This is the supported path for color/style resolution across themes.
@@ -55,7 +55,7 @@ The package is migrating to WordPress UI and Theme as its defaults. When adding
 - Using ad-hoc flexbox layouts where established layout primitives (e.g. `Stack` from `@wordpress/ui`) should be preferred.
 - Accessing colors/styles directly from `theme` rather than using `getElementStyles` from `GlobalChartsProvider`.
 - Hardcoding px values in SCSS for spacing, borders, or typography where a WPDS token (`--wpds-dimension-*`, `--wpds-border-*`, `--wpds-typography-*`) exists.
-- CSS variable fallback values that diverge from the WPDS spec for that token.
+- Hardcoding CSS variable fallback values for `--wpds-*` tokens (prefer bare `var(--wpds-*)`; build injects official fallbacks).
 - Using `__experimental*` exports from `@wordpress/components` (e.g. `__experimentalText`, `__experimentalHStack`) instead of the stable `@wordpress/ui` equivalents. (`__experimentalGrid` is excepted — no stable alternative exists yet.)
 - Manually overriding DS tokens in stories or components to achieve theming instead of passing a color through `@wordpress/theme`'s `ThemeProvider`.
 - Responsive wrappers that conflict with component sizing semantics (fixed-height charts, resize behavior, aspect-ratio assumptions).

projects/js-packages/charts/changelog/update-charts-wpds-token-fallbacks

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+Comment: Emit DS token fallbacks via Lightning CSS/tsdown and drop hardcoded fallbacks from Charts styles and theme JS.
+

projects/js-packages/charts/src/charts/area-chart/area-chart.module.scss

@@ -7,8 +7,8 @@
 			transform-origin: 0 95%;
 			transform: scaleY(0);
 			animation:
-				rise var(--wpds-motion-duration-xl, 400ms)
-				var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1)) forwards;
+				rise var(--wpds-motion-duration-xl)
+				var(--wpds-motion-easing-expressive) forwards;
 		}
 	}
 

projects/js-packages/charts/src/charts/bar-chart/bar-chart.module.scss

@@ -9,8 +9,8 @@
 		transform-box: fill-box;
 		transform: scaleY(0);
 		animation:
-			rise var(--wpds-motion-duration-xl, 400ms)
-			var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1)) forwards;
+			rise var(--wpds-motion-duration-xl)
+			var(--wpds-motion-easing-expressive) forwards;
 	}
 
 	@keyframes rise {
@@ -25,8 +25,8 @@
 		transform-box: fill-box;
 		transform: scaleX(0);
 		animation:
-			stretch var(--wpds-motion-duration-xl, 400ms)
-			var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1)) forwards;
+			stretch var(--wpds-motion-duration-xl)
+			var(--wpds-motion-easing-expressive) forwards;
 	}
 
 	@keyframes stretch {

projects/js-packages/charts/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss

@@ -12,22 +12,22 @@
 
 .main-rate {
 	overflow: hidden;
-	color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
+	color: var(--wpds-color-foreground-content-neutral);
 	text-overflow: ellipsis;
-	font-size: var(--wpds-typography-font-size-xl, 18px);
+	font-size: var(--wpds-typography-font-size-xl);
 	font-style: normal;
-	font-weight: var(--wpds-typography-font-weight-medium, 499);
-	line-height: var(--wpds-typography-line-height-sm, 20px);
+	font-weight: var(--wpds-typography-font-weight-emphasis);
+	line-height: var(--wpds-typography-line-height-sm);
 	margin: 0;
 }
 
 .change-indicator {
 	overflow: hidden;
 	text-overflow: ellipsis;
-	font-size: var(--wpds-typography-font-size-md, 13px);
+	font-size: var(--wpds-typography-font-size-md);
 	font-style: normal;
-	font-weight: var(--wpds-typography-font-weight-medium, 499);
-	line-height: var(--wpds-typography-line-height-sm, 20px);
+	font-weight: var(--wpds-typography-font-weight-emphasis);
+	line-height: var(--wpds-typography-line-height-sm);
 	margin: 0;
 }
 
@@ -44,8 +44,8 @@
 
 	&--animated {
 		transition:
-			opacity var(--wpds-motion-duration-lg, 300ms)
-			var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1));
+			opacity var(--wpds-motion-duration-lg)
+			var(--wpds-motion-easing-subtle);
 	}
 
 	&--blurred {
@@ -54,41 +54,41 @@
 }
 
 .step-label {
-	color: 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);
+	color: var(--wpds-color-foreground-content-neutral-weak);
+	font-size: var(--wpds-typography-font-size-sm);
+	font-weight: var(--wpds-typography-font-weight-default);
+	line-height: var(--wpds-typography-line-height-xs);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
 .step-rate {
-	color: 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);
+	color: var(--wpds-color-foreground-content-neutral);
+	font-size: var(--wpds-typography-font-size-md);
+	font-weight: var(--wpds-typography-font-weight-emphasis);
+	line-height: var(--wpds-typography-line-height-xs);
 }
 
 .bar-container {
 	flex: 1;
-	border-radius: var(--wpds-border-radius-md, 4px);
+	border-radius: var(--wpds-border-radius-md);
 	position: relative;
 	cursor: pointer;
 }
 
 .funnel-bar {
 	width: 100%;
 	min-height: 4px;
-	border-radius: var(--wpds-border-radius-md, 4px) var(--wpds-border-radius-md, 4px) 0 0;
+	border-radius: var(--wpds-border-radius-md) var(--wpds-border-radius-md) 0 0;
 
 	&--animated {
 		transform-origin: bottom;
 		transform-box: fill-box;
 		transform: scaleY(0);
 		animation:
-			stretch var(--wpds-motion-duration-xl, 400ms)
-			var(--wpds-motion-easing-expressive, cubic-bezier(0.25, 0, 0, 1)) forwards;
+			stretch var(--wpds-motion-duration-xl)
+			var(--wpds-motion-easing-expressive) forwards;
 	}
 
 	@keyframes stretch {
@@ -100,33 +100,38 @@
 }
 
 .tooltip-wrapper {
-	background: var(--wpds-color-background-surface-neutral-strong, #fff);
+	background: var(--wpds-color-background-surface-neutral-strong);
 
 	// Override .visx-tooltip inline styles.
-	border-radius: var(--wpds-border-radius-md, 4px) !important;
-	padding: var(--wpds-dimension-padding-md, 12px) !important;
-	box-shadow: var(--wpds-elevation-sm, 0 1px 2px 0 #0000000d, 0 2px 3px 0 #0000000a, 0 6px 6px 0 #00000008, 0 8px 8px 0 #00000005) !important;
+	border-radius: var(--wpds-border-radius-md) !important;
+	padding: var(--wpds-dimension-padding-md) !important;
+	// No WPDS elevation token (ex `--wpds-elevation-sm`).
+	box-shadow:
+		0 1px 2px 0 #0000000d,
+		0 2px 3px 0 #0000000a,
+		0 6px 6px 0 #00000008,
+		0 8px 8px 0 #00000005 !important;
 
 }
 
 .tooltip-title {
-	color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
-	font-size: var(--wpds-typography-font-size-sm, 12px);
+	color: var(--wpds-color-foreground-content-neutral);
+	font-size: var(--wpds-typography-font-size-sm);
 	font-style: normal;
-	font-weight: var(--wpds-typography-font-weight-regular, 400);
-	line-height: var(--wpds-typography-line-height-xs, 16px);
+	font-weight: var(--wpds-typography-font-weight-default);
+	line-height: var(--wpds-typography-line-height-xs);
 }
 
 .tooltip-content {
-	color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
-	font-size: var(--wpds-typography-font-size-md, 13px);
+	color: var(--wpds-color-foreground-content-neutral);
+	font-size: var(--wpds-typography-font-size-md);
 	font-style: normal;
-	font-weight: var(--wpds-typography-font-weight-medium, 499);
-	line-height: var(--wpds-typography-line-height-sm, 20px);
+	font-weight: var(--wpds-typography-font-weight-emphasis);
+	line-height: var(--wpds-typography-line-height-sm);
 }
 
 .empty-state {
 	text-align: center;
-	color: var(--wpds-color-foreground-content-neutral-weak, #707070);
-	font-size: var(--wpds-typography-font-size-lg, 16px);
+	color: var(--wpds-color-foreground-content-neutral-weak);
+	font-size: var(--wpds-typography-font-size-lg);
 }

projects/js-packages/charts/src/charts/heatmap-chart/heatmap-chart.module.scss

@@ -2,7 +2,7 @@
 	width: 100%;
 	height: 100%;
 	min-height: 0;
-	font-size: var(--wpds-typography-font-size-sm, 12px);
+	font-size: var(--wpds-typography-font-size-sm);
 }
 
 // Height-capped grids are content-sized vertically, so the wrapper hugs them
@@ -13,26 +13,26 @@
 }
 
 .heatmap-chart__empty {
-	padding: var(--wpds-dimension-padding-lg, 16px);
-	color: var(--wpds-color-foreground-content-neutral-weak, #707070);
+	padding: var(--wpds-dimension-padding-lg);
+	color: var(--wpds-color-foreground-content-neutral-weak);
 }
 
 // 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(--heatmap-cell-gap, var(--wpds-dimension-gap-xs));
 	flex: 1 1 0;
 	width: 100%;
 	// Override flex's auto minimum so short widgets do not scroll.
 	min-height: 0;
 
 	&: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));
+			var(--wpds-border-width-focus) solid
+			var(--wpds-color-stroke-focus);
 		outline-offset: 2px;
-		border-radius: var(--wpds-border-radius-sm, 2px);
+		border-radius: var(--wpds-border-radius-sm);
 	}
 }
 
@@ -58,8 +58,8 @@
 
 .heatmap-chart__col-label,
 .heatmap-chart__row-label {
-	color: var(--wpds-color-foreground-content-neutral-weak, #707070);
-	font-size: var(--wpds-typography-font-size-xs, 11px);
+	color: var(--wpds-color-foreground-content-neutral-weak);
+	font-size: var(--wpds-typography-font-size-xs);
 	white-space: nowrap;
 	overflow: visible;
 }
@@ -73,7 +73,7 @@
 	align-self: center;
 	justify-self: end;
 	text-align: right;
-	padding-inline-end: var(--wpds-dimension-padding-xs, 4px);
+	padding-inline-end: var(--wpds-dimension-padding-xs);
 }
 
 .heatmap-chart__cell {
@@ -82,9 +82,9 @@
 	justify-content: center;
 	min-width: 0;
 	min-height: 0;
-	border-radius: var(--wpds-border-radius-sm, 2px);
+	border-radius: var(--wpds-border-radius-sm);
 	// Empty (no-data) default; cells with a value override it below.
-	background: var(--wpds-color-background-track-neutral-weak, #f0f0f0);
+	background: var(--wpds-color-background-track-neutral-weak);
 }
 
 // Floor the mix at 15% so the lowest value stays visibly tinted, distinct from
@@ -95,25 +95,25 @@
 
 .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)));
+		var(--wpds-border-width-focus) solid
+		var(--wpds-color-stroke-focus);
+	outline-offset: calc(-1 * var(--wpds-border-width-focus));
 }
 
 .heatmap-chart__cell-value {
-	color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
-	font-size: var(--wpds-typography-font-size-md, 13px);
+	color: var(--wpds-color-foreground-content-neutral);
+	font-size: var(--wpds-typography-font-size-md);
 }
 
 // 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(--wpds-color-foreground-interactive-neutral-strong);
 }
 
 .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);
+	width: var(--wpds-dimension-size-3xs);
+	height: var(--wpds-dimension-size-3xs);
+	border-radius: var(--wpds-border-radius-sm);
 	background: color-mix(in sRGB, var(--heatmap-primary) calc((0.15 + 0.85 * var(--intensity)) * 100%), var(--heatmap-bg, #fff));
 }