diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f3794a05ac84..c8131955e86d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36442,7 +36442,7 @@ snapshots:
       neo-async: 2.6.2
     optionalDependencies:
       sass-embedded: 1.97.3
-      webpack: 5.107.2(postcss@8.5.14)(webpack-cli@6.0.1)
+      webpack: 5.107.2(webpack-cli@6.0.1)
 
   sax@1.6.0: {}
 
diff --git a/projects/js-packages/charts/AGENTS.md b/projects/js-packages/charts/AGENTS.md
index 700b44384d61..b91e7e2e65ce 100644
--- a/projects/js-packages/charts/AGENTS.md
+++ b/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).
diff --git a/projects/js-packages/charts/changelog/update-charts-wpds-token-fallbacks b/projects/js-packages/charts/changelog/update-charts-wpds-token-fallbacks
new file mode 100644
index 000000000000..e8eb54941b4f
--- /dev/null
+++ b/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.
+
diff --git a/projects/js-packages/charts/src/charts/area-chart/area-chart.module.scss b/projects/js-packages/charts/src/charts/area-chart/area-chart.module.scss
index 7dbc4338fcce..51db992cce8a 100644
--- a/projects/js-packages/charts/src/charts/area-chart/area-chart.module.scss
+++ b/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;
 		}
 	}
 
diff --git a/projects/js-packages/charts/src/charts/bar-chart/bar-chart.module.scss b/projects/js-packages/charts/src/charts/bar-chart/bar-chart.module.scss
index 4d02b09aee29..ee828ef66def 100644
--- a/projects/js-packages/charts/src/charts/bar-chart/bar-chart.module.scss
+++ b/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 {
diff --git a/projects/js-packages/charts/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss b/projects/js-packages/charts/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss
index 1072b6c0db22..8b8922dfeb0b 100644
--- a/projects/js-packages/charts/src/charts/conversion-funnel-chart/conversion-funnel-chart.module.scss
+++ b/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,25 +54,25 @@
 }
 
 .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;
 }
@@ -80,15 +80,15 @@
 .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);
 }
diff --git a/projects/js-packages/charts/src/charts/heatmap-chart/heatmap-chart.module.scss b/projects/js-packages/charts/src/charts/heatmap-chart/heatmap-chart.module.scss
index 646ed10575c4..cd1b0fd59163 100644
--- a/projects/js-packages/charts/src/charts/heatmap-chart/heatmap-chart.module.scss
+++ b/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,15 +13,15 @@
 }
 
 .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.
@@ -29,10 +29,10 @@
 
 	&: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));
 }
diff --git a/projects/js-packages/charts/src/charts/leaderboard-chart/leaderboard-chart.module.scss b/projects/js-packages/charts/src/charts/leaderboard-chart/leaderboard-chart.module.scss
index a23b7bfe398e..f45ffda527a6 100644
--- a/projects/js-packages/charts/src/charts/leaderboard-chart/leaderboard-chart.module.scss
+++ b/projects/js-packages/charts/src/charts/leaderboard-chart/leaderboard-chart.module.scss
@@ -1,7 +1,7 @@
 .leaderboardChart {
 	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);
 
 	&--responsive {
 		height: 100%;
@@ -40,7 +40,7 @@
 		}
 
 		.label {
-			padding-left: var(--wpds-dimension-padding-sm, 8px);
+			padding-left: var(--wpds-dimension-padding-sm);
 		}
 	}
 
@@ -49,7 +49,7 @@
 		min-height: 6px;
 		// Keeps a sliver of bar visible for tiny shares, and stops the interactive
 		// row's fixed-pixel hover inset from collapsing a narrow bar to nothing.
-		min-width: var(--wpds-dimension-size-5xs, 4px);
+		min-width: var(--wpds-dimension-size-5xs);
 
 		border-radius: var(--a8c--charts--leaderboard--bar--border-radius, 9999px);
 		z-index: -1; /* places it behind the label */
@@ -59,8 +59,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 {
@@ -93,15 +93,15 @@
 }
 
 .emptyState {
-	padding: var(--wpds-dimension-padding-3xl, 32px) var(--wpds-dimension-padding-lg, 16px);
+	padding: var(--wpds-dimension-padding-3xl) var(--wpds-dimension-padding-lg);
 	text-align: center;
-	color: var(--wpds-color-foreground-content-neutral-weak, #707070);
-	font-size: var(--wpds-typography-font-size-md, 13px);
+	color: var(--wpds-color-foreground-content-neutral-weak);
+	font-size: var(--wpds-typography-font-size-md);
 	font-style: italic;
 }
 
 .interactiveRow {
-	--focus-ring-width: var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px));
+	--focus-ring-width: var(--wpds-border-width-focus);
 
 	display: grid;
 	grid-column: 1 / -1;
@@ -135,16 +135,16 @@
 	// value slide is given an RTL override below. No row background.
 	.bar {
 		transition:
-			opacity var(--wpds-motion-duration-sm, 100ms)
-			var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1)),
-			width var(--wpds-motion-duration-sm, 100ms)
-			var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1));
+			opacity var(--wpds-motion-duration-sm)
+			var(--wpds-motion-easing-subtle),
+			width var(--wpds-motion-duration-sm)
+			var(--wpds-motion-easing-subtle);
 	}
 
 	.valueContainer {
 		transition:
-			transform var(--wpds-motion-duration-sm, 100ms)
-			var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1));
+			transform var(--wpds-motion-duration-sm)
+			var(--wpds-motion-easing-subtle);
 	}
 
 	&:hover,
@@ -152,7 +152,7 @@
 
 		// 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--leaderboard--bar--hover-inset: var(--wpds-dimension-gap-2xl);
 
 		.bar {
 			opacity: 0.5;
@@ -174,10 +174,10 @@
 	}
 
 	&:focus-visible {
-		border-radius: var(--wpds-border-radius-sm, 2px);
+		border-radius: var(--wpds-border-radius-sm);
 		outline:
 			var(--focus-ring-width) solid
-			var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
+			var(--wpds-color-stroke-focus);
 		// Inset by its own width so the outer edge hugs the row boundary: the
 		// outline then sits in the row's padding (also a ring width), clear of the
 		// bar, and stays inside the overflow:auto container that would clip an
@@ -188,15 +188,15 @@
 
 .chevron {
 	position: absolute;
-	inset-inline-end: var(--wpds-dimension-padding-xs, 4px);
+	inset-inline-end: var(--wpds-dimension-padding-xs);
 	top: 0;
 	bottom: 0;
 	margin-block: auto;
 	opacity: 0;
-	color: var(--wpds-color-foreground-content-neutral-weak, #707070);
+	color: var(--wpds-color-foreground-content-neutral-weak);
 	transition:
-		opacity var(--wpds-motion-duration-sm, 100ms)
-		var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1));
+		opacity var(--wpds-motion-duration-sm)
+		var(--wpds-motion-easing-subtle);
 	pointer-events: none;
 
 	// The glyph points toward the inline end, so flip it to point left in RTL.
diff --git a/projects/js-packages/charts/src/charts/line-chart/line-chart.module.scss b/projects/js-packages/charts/src/charts/line-chart/line-chart.module.scss
index 4160e6719ca1..325ee88f713f 100644
--- a/projects/js-packages/charts/src/charts/line-chart/line-chart.module.scss
+++ b/projects/js-packages/charts/src/charts/line-chart/line-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;
 		}
 	}
 
@@ -18,23 +18,23 @@
 
 	&__tooltip,
 	&__annotation-label-popover {
-		background: var(--wpds-color-background-surface-neutral-strong, #fff);
-		color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
-		padding: var(--wpds-dimension-padding-sm, 8px);
+		background: var(--wpds-color-background-surface-neutral-strong);
+		color: var(--wpds-color-foreground-content-neutral);
+		padding: var(--wpds-dimension-padding-sm);
 	}
 
 	&__tooltip-date {
-		font-weight: var(--wpds-typography-font-weight-medium, 499);
-		padding-bottom: var(--wpds-dimension-padding-md, 12px);
+		font-weight: var(--wpds-typography-font-weight-emphasis);
+		padding-bottom: var(--wpds-dimension-padding-md);
 	}
 
 	&__tooltip-row {
-		padding: var(--wpds-dimension-padding-xs, 4px) 0;
+		padding: var(--wpds-dimension-padding-xs) 0;
 	}
 
 	&__tooltip-label {
-		font-weight: var(--wpds-typography-font-weight-medium, 499);
-		padding-right: var(--wpds-dimension-padding-lg, 16px);
+		font-weight: var(--wpds-typography-font-weight-emphasis);
+		padding-right: var(--wpds-dimension-padding-lg);
 	}
 
 	&__annotations-overlay {
@@ -63,14 +63,19 @@
 	&__annotation-label-popover {
 		min-width: 125px;
 		border: none;
-		border-radius: var(--wpds-border-radius-md, 4px);
-		font-size: var(--wpds-typography-font-size-md, 13px);
-		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);
+		border-radius: var(--wpds-border-radius-md);
+		font-size: var(--wpds-typography-font-size-md);
+		// 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;
 		position: fixed;
 		// Without margin set, the popover has margin:auto which upsets the
 		// positioning relative to the trigger button. A gap token is appropriate
 		// because it creates a gap to the trigger button.
-		margin: var(--wpds-dimension-gap-sm, 8px);
+		margin: var(--wpds-dimension-gap-sm);
 		visibility: hidden;
 
 		&--visible {
@@ -84,7 +89,7 @@
 	}
 
 	&__annotation-label-popover-content {
-		padding: var(--wpds-dimension-padding-sm, 8px);
+		padding: var(--wpds-dimension-padding-sm);
 	}
 
 	&__annotation-label-popover-close-button {
diff --git a/projects/js-packages/charts/src/charts/pie-chart/stories/donut.stories.tsx b/projects/js-packages/charts/src/charts/pie-chart/stories/donut.stories.tsx
index 892eddd93806..09fd9163c9cd 100644
--- a/projects/js-packages/charts/src/charts/pie-chart/stories/donut.stories.tsx
+++ b/projects/js-packages/charts/src/charts/pie-chart/stories/donut.stories.tsx
@@ -263,7 +263,7 @@ const CustomPieLegend = ( {
 		style={ {
 			display: 'inline-grid',
 			gridTemplateColumns: '1fr auto auto',
-			gap: 'var(--wpds-dimension-gap-xs, 4px) var(--wpds-dimension-gap-sm, 8px)',
+			gap: 'var(--wpds-dimension-gap-xs) var(--wpds-dimension-gap-sm)',
 		} }
 	>
 		{ items.map( ( item, index ) => {
diff --git a/projects/js-packages/charts/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss b/projects/js-packages/charts/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss
index 28919bfa9c43..b3e0302e93c2 100644
--- a/projects/js-packages/charts/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss
+++ b/projects/js-packages/charts/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.module.scss
@@ -6,11 +6,11 @@
 	}
 
 	.label {
-		font-weight: var(--wpds-typography-font-weight-medium, 499);
-		font-size: var(--wpds-typography-font-size-lg, 16px);
+		font-weight: var(--wpds-typography-font-weight-emphasis);
+		font-size: var(--wpds-typography-font-size-lg);
 	}
 
 	.note {
-		font-size: var(--wpds-typography-font-size-md, 13px);
+		font-size: var(--wpds-typography-font-size-md);
 	}
 }
diff --git a/projects/js-packages/charts/src/charts/pie-semi-circle-chart/stories/index.docs.mdx b/projects/js-packages/charts/src/charts/pie-semi-circle-chart/stories/index.docs.mdx
index a4942f4141d6..4811efb2509b 100644
--- a/projects/js-packages/charts/src/charts/pie-semi-circle-chart/stories/index.docs.mdx
+++ b/projects/js-packages/charts/src/charts/pie-semi-circle-chart/stories/index.docs.mdx
@@ -222,7 +222,7 @@ Segments automatically use theme colors, but you can override individual segment
 
 The chart includes built-in styling for labels and notes with appropriate typography hierarchy:
 
-- **Label**: Uses `--wpds-typography-font-size-lg` (default 16px), `--wpds-typography-font-weight-medium` (default 499), positioned above the chart
+- **Label**: Uses `--wpds-typography-font-size-lg` (default 15px), `--wpds-typography-font-weight-emphasis` (default 600), positioned above the chart
 - **Note**: Uses `--wpds-typography-font-size-md` (default 13px), positioned below the label
 
 <Source
diff --git a/projects/js-packages/charts/src/charts/private/grid-control/grid-control.module.scss b/projects/js-packages/charts/src/charts/private/grid-control/grid-control.module.scss
index cababf969113..6b0e986aea81 100644
--- a/projects/js-packages/charts/src/charts/private/grid-control/grid-control.module.scss
+++ b/projects/js-packages/charts/src/charts/private/grid-control/grid-control.module.scss
@@ -1,7 +1,7 @@
 .grid-control {
 
 	:global(.visx-line) {
-		stroke: var(--wpds-color-stroke-surface-neutral, #dbdbdb);
+		stroke: var(--wpds-color-stroke-surface-neutral);
 		stroke-width: 1px;
 		shape-rendering: crispEdges;
 	}
diff --git a/projects/js-packages/charts/src/charts/private/svg-empty-state/svg-empty-state.module.scss b/projects/js-packages/charts/src/charts/private/svg-empty-state/svg-empty-state.module.scss
index fc8334565931..770beeb3ff3e 100644
--- a/projects/js-packages/charts/src/charts/private/svg-empty-state/svg-empty-state.module.scss
+++ b/projects/js-packages/charts/src/charts/private/svg-empty-state/svg-empty-state.module.scss
@@ -1,5 +1,5 @@
 .svg-empty-state {
 	text-align: center;
-	font-size: var(--wpds-typography-font-size-md, 13px);
-	color: var(--wpds-color-foreground-content-neutral-weak, #707070);
+	font-size: var(--wpds-typography-font-size-md);
+	color: var(--wpds-color-foreground-content-neutral-weak);
 }
diff --git a/projects/js-packages/charts/src/charts/private/x-zoom.module.scss b/projects/js-packages/charts/src/charts/private/x-zoom.module.scss
index e4792834299c..d6c77f5c164c 100644
--- a/projects/js-packages/charts/src/charts/private/x-zoom.module.scss
+++ b/projects/js-packages/charts/src/charts/private/x-zoom.module.scss
@@ -6,14 +6,14 @@
 	&__selection {
 		fill: var(--charts-zoom-selection-fill, rgba(56, 88, 233, 0.16));
 		stroke: var(--charts-zoom-selection-stroke, rgba(56, 88, 233, 0.65));
-		stroke-width: var(--wpds-border-width-xs, 1px);
+		stroke-width: var(--wpds-border-width-xs);
 		pointer-events: none;
 	}
 
 	&__reset {
 		position: absolute;
-		top: var(--wpds-dimension-gap-sm, 8px);
-		right: var(--wpds-dimension-gap-sm, 8px);
+		top: var(--wpds-dimension-gap-sm);
+		right: var(--wpds-dimension-gap-sm);
 		z-index: 2;
 		display: inline-flex;
 		align-items: center;
@@ -22,20 +22,25 @@
 		height: 28px;
 		padding: 0;
 		background: var(--charts-zoom-reset-bg, rgba(255, 255, 255, 0.92));
-		color: var(--charts-zoom-reset-fg, var(--wpds-color-foreground-content-neutral, #1e1e1e));
+		color: var(--charts-zoom-reset-fg, var(--wpds-color-foreground-content-neutral));
 		border:
-			var(--wpds-border-width-xs, 1px) solid
+			var(--wpds-border-width-xs) solid
 			var(--charts-zoom-reset-border, rgba(0, 0, 0, 0.16));
-		border-radius: var(--wpds-border-radius-md, 4px);
+		border-radius: var(--wpds-border-radius-md);
 		cursor: pointer;
-		box-shadow: var(--wpds-elevation-xs, 0 1px 1px 0 #00000008, 0 1px 2px 0 #00000005, 0 3px 3px 0 #00000005, 0 4px 4px 0 #00000003);
+		// No WPDS elevation token (ex `--wpds-elevation-xs`).
+		box-shadow:
+			0 1px 1px 0 #00000008,
+			0 1px 2px 0 #00000005,
+			0 3px 3px 0 #00000005,
+			0 4px 4px 0 #00000003;
 
 		&:hover {
 			background: var(--charts-zoom-reset-bg-hover, rgba(255, 255, 255, 1));
 		}
 
 		&:focus-visible {
-			outline: 2px solid var(--charts-zoom-reset-focus, var(--wpds-color-stroke-focus, #3858e9));
+			outline: 2px solid var(--charts-zoom-reset-focus, var(--wpds-color-stroke-focus));
 			outline-offset: 1px;
 		}
 	}
diff --git a/projects/js-packages/charts/src/components/legend/private/base-legend.module.scss b/projects/js-packages/charts/src/components/legend/private/base-legend.module.scss
index 2c41fc2f403e..f138f523f962 100644
--- a/projects/js-packages/charts/src/components/legend/private/base-legend.module.scss
+++ b/projects/js-packages/charts/src/components/legend/private/base-legend.module.scss
@@ -3,14 +3,14 @@
 }
 
 .legend-item {
-	font-size: var(--wpds-typography-font-size-md, 13px);
+	font-size: var(--wpds-typography-font-size-md);
 
 	&--interactive {
 		cursor: pointer;
 		user-select: none;
 		transition:
-			opacity var(--wpds-motion-duration-md, 200ms)
-			var(--wpds-motion-easing-subtle, cubic-bezier(0.15, 0, 0.15, 1));
+			opacity var(--wpds-motion-duration-md)
+			var(--wpds-motion-easing-subtle);
 
 		&:hover {
 			opacity: 0.8;
@@ -19,7 +19,7 @@
 		&:focus {
 			outline: 2px solid currentColor;
 			outline-offset: 2px;
-			border-radius: var(--wpds-border-radius-md, 4px);
+			border-radius: var(--wpds-border-radius-md);
 		}
 
 		&:focus:not(:focus-visible) {
@@ -54,6 +54,6 @@
 }
 
 .legend-item-value {
-	font-weight: var(--wpds-typography-font-weight-medium, 499);
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	flex-shrink: 0; // Prevent value from shrinking when text is ellipsized
 }
diff --git a/projects/js-packages/charts/src/components/tooltip/base-tooltip.module.scss b/projects/js-packages/charts/src/components/tooltip/base-tooltip.module.scss
index 961953182716..77f1e8e03d6a 100644
--- a/projects/js-packages/charts/src/components/tooltip/base-tooltip.module.scss
+++ b/projects/js-packages/charts/src/components/tooltip/base-tooltip.module.scss
@@ -1,13 +1,18 @@
 .tooltip {
-	padding: var(--wpds-dimension-padding-sm, 8px);
+	padding: var(--wpds-dimension-padding-sm);
 	// No WPDS token fits a translucent dark tooltip surface:
 	// bg-interactive-neutral-strong is opaque, and there is no
 	// white-on-dark content foreground token.
 	background-color: rgba(0, 0, 0, 0.85);
 	color: #fff;
-	border-radius: var(--wpds-border-radius-md, 4px);
-	font-size: var(--wpds-typography-font-size-md, 13px);
-	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);
+	border-radius: var(--wpds-border-radius-md);
+	font-size: var(--wpds-typography-font-size-md);
+	// 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;
 	position: absolute;
 	pointer-events: none;
 	transform: translate(-50%, -100%);
diff --git a/projects/js-packages/charts/src/components/trend-indicator/trend-indicator.module.scss b/projects/js-packages/charts/src/components/trend-indicator/trend-indicator.module.scss
index 53e5f6a8de47..a239acc038b3 100644
--- a/projects/js-packages/charts/src/components/trend-indicator/trend-indicator.module.scss
+++ b/projects/js-packages/charts/src/components/trend-indicator/trend-indicator.module.scss
@@ -2,22 +2,22 @@
 	display: inline-flex;
 	align-items: center;
 	gap: 0.125em;
-	font-size: var(--wpds-typography-font-size-md, 13px);
-	font-weight: var(--wpds-typography-font-weight-medium, 499);
+	font-size: var(--wpds-typography-font-size-md);
+	font-weight: var(--wpds-typography-font-weight-emphasis);
 	line-height: 1;
 
 	// Trend colors use the documented --charts-trend-* override API, falling
 	// back to the accessible WPDS semantic tokens.
 	&--up {
-		color: var(--charts-trend-up-color, var(--wpds-color-foreground-content-success-weak, #008030));
+		color: var(--charts-trend-up-color, var(--wpds-color-foreground-content-success-weak));
 	}
 
 	&--down {
-		color: var(--charts-trend-down-color, var(--wpds-color-foreground-content-error-weak, #cc1818));
+		color: var(--charts-trend-down-color, var(--wpds-color-foreground-content-error-weak));
 	}
 
 	&--neutral {
-		color: var(--charts-trend-neutral-color, var(--wpds-color-foreground-content-neutral-weak, #707070));
+		color: var(--charts-trend-neutral-color, var(--wpds-color-foreground-content-neutral-weak));
 	}
 
 	&__icon {
diff --git a/projects/js-packages/charts/src/providers/chart-context/themes.ts b/projects/js-packages/charts/src/providers/chart-context/themes.ts
index 8767f5e44b5b..d31f654d4e0b 100644
--- a/projects/js-packages/charts/src/providers/chart-context/themes.ts
+++ b/projects/js-packages/charts/src/providers/chart-context/themes.ts
@@ -4,24 +4,24 @@ import type { CompleteChartTheme } from '../../types';
  * Default theme configuration
  */
 const defaultTheme: CompleteChartTheme = {
-	backgroundColor: 'var(--wpds-color-background-surface-neutral-strong, #fff)',
+	backgroundColor: 'var(--wpds-color-background-surface-neutral-strong)',
 	labelBackgroundColor: 'transparent', // label background color (transparent by default)
 	// White label text sits on top of arbitrary series colors, so it has no WPDS
 	// content-foreground equivalent and stays hardcoded (tokenization outlier).
 	labelTextColor: '#FFFFFF',
 	colors: [ '#98C8DF', '#006DAB', '#A6DC80', '#1F9828', '#FF8C8F' ],
 	gridStyles: {
-		stroke: 'var(--wpds-color-stroke-surface-neutral, #dbdbdb)',
+		stroke: 'var(--wpds-color-stroke-surface-neutral)',
 		strokeWidth: 1,
 	},
 	tickLength: 4,
 	gridColor: '',
 	gridColorDark: '',
-	xTickLineStyles: { stroke: 'var(--wpds-color-stroke-surface-neutral, #dbdbdb)', strokeWidth: 1 },
-	xAxisLineStyles: { stroke: 'var(--wpds-color-stroke-surface-neutral, #dbdbdb)', strokeWidth: 1 },
+	xTickLineStyles: { stroke: 'var(--wpds-color-stroke-surface-neutral)', strokeWidth: 1 },
+	xAxisLineStyles: { stroke: 'var(--wpds-color-stroke-surface-neutral)', strokeWidth: 1 },
 	legend: {
 		labelStyles: {
-			color: 'var(--wpds-color-foreground-content-neutral, #1e1e1e)',
+			color: 'var(--wpds-color-foreground-content-neutral)',
 		},
 		containerStyles: {},
 		shapeStyles: [],
@@ -34,26 +34,26 @@ const defaultTheme: CompleteChartTheme = {
 	// elements for axis labels and ticks. Setting `inherit` lets SVG text
 	// pick up the host application's font-family via normal CSS inheritance.
 	svgLabelSmall: {
-		fill: 'var(--wpds-color-foreground-content-neutral, #1e1e1e)',
+		fill: 'var(--wpds-color-foreground-content-neutral)',
 		fontFamily: 'inherit',
 	},
 	svgLabelBig: { fontFamily: 'inherit' },
 	annotationStyles: {
 		label: {
-			anchorLineStroke: 'var(--wpds-color-foreground-content-neutral, #1e1e1e)',
-			backgroundFill: 'var(--wpds-color-background-surface-neutral-strong, #fff)',
+			anchorLineStroke: 'var(--wpds-color-foreground-content-neutral)',
+			backgroundFill: 'var(--wpds-color-background-surface-neutral-strong)',
 		},
 		connector: {
-			stroke: 'var(--wpds-color-foreground-content-neutral, #1e1e1e)',
+			stroke: 'var(--wpds-color-foreground-content-neutral)',
 		},
 		circleSubject: {
 			stroke: 'transparent',
-			fill: 'var(--wpds-color-foreground-content-neutral, #1e1e1e)',
+			fill: 'var(--wpds-color-foreground-content-neutral)',
 			radius: 5,
 		},
 	},
 	geoChart: {
-		featureFillColor: 'var(--wpds-color-background-surface-neutral-weak, #f4f4f4)',
+		featureFillColor: 'var(--wpds-color-background-surface-neutral-weak)',
 	},
 	leaderboardChart: {
 		rowGap: 12,
@@ -61,15 +61,15 @@ const defaultTheme: CompleteChartTheme = {
 		labelSpacing: 'xs',
 		// [negative, neutral, positive]
 		deltaColors: [
-			'var(--wpds-color-foreground-content-error-weak, #cc1818)',
-			'var(--wpds-color-foreground-content-neutral-weak, #707070)',
-			'var(--wpds-color-foreground-content-success-weak, #008030)',
+			'var(--wpds-color-foreground-content-error-weak)',
+			'var(--wpds-color-foreground-content-neutral-weak)',
+			'var(--wpds-color-foreground-content-success-weak)',
 		],
 	},
 	conversionFunnelChart: {
-		backgroundColor: 'var(--wpds-color-background-surface-neutral-weak, #f4f4f4)',
-		positiveChangeColor: 'var(--wpds-color-foreground-content-success-weak, #008030)',
-		negativeChangeColor: 'var(--wpds-color-foreground-content-error-weak, #cc1818)',
+		backgroundColor: 'var(--wpds-color-background-surface-neutral-weak)',
+		positiveChangeColor: 'var(--wpds-color-foreground-content-success-weak)',
+		negativeChangeColor: 'var(--wpds-color-foreground-content-error-weak)',
 	},
 	lineChart: {
 		lineStyles: {
diff --git a/projects/js-packages/charts/src/stories/chart-decorator.tsx b/projects/js-packages/charts/src/stories/chart-decorator.tsx
index 661835fb27de..49e4289a892b 100644
--- a/projects/js-packages/charts/src/stories/chart-decorator.tsx
+++ b/projects/js-packages/charts/src/stories/chart-decorator.tsx
@@ -163,7 +163,7 @@ const StoryChartProvider = ( {
 			*/ }
 			<div
 				style={ {
-					fontFamily: 'var(--wpds-typography-font-family-body, sans-serif)',
+					fontFamily: 'var(--wpds-typography-font-family-body)',
 				} }
 			>
 				<GlobalChartsProvider key={ providerKey } theme={ theme }>
diff --git a/projects/js-packages/charts/tsdown.config.ts b/projects/js-packages/charts/tsdown.config.ts
index 1cd3269e46c7..cd2bd5b43f69 100644
--- a/projects/js-packages/charts/tsdown.config.ts
+++ b/projects/js-packages/charts/tsdown.config.ts
@@ -1,4 +1,6 @@
 import { readFileSync } from 'node:fs';
+import lightningcssDsTokenFallbacks from '@wordpress/theme/lightningcss-plugins/lightningcss-ds-token-fallbacks';
+import viteDsTokenFallbacks from '@wordpress/theme/vite-plugins/vite-ds-token-fallbacks';
 import { defineConfig } from 'tsdown';
 import { removeDataTestId } from './tools/remove-data-testid.ts';
 
@@ -50,8 +52,13 @@ export default defineConfig( {
 		modules: {
 			generateScopedName: 'a8ccharts-[hash]-[local]',
 		},
+		lightningcss: {
+			visitor: lightningcssDsTokenFallbacks,
+		},
 	},
-	plugins: [ removeDataTestId() ],
+	// Lightning CSS injects official `--wpds-*` fallbacks into SCSS/CSS; the Vite
+	// plugin does the same for JS/TS theme strings (e.g. `themes.ts`).
+	plugins: [ removeDataTestId(), viteDsTokenFallbacks() ],
 	// Fail loudly once @tsdown/css stops emitting these, so the suppression can be dropped.
 	onSuccess() {
 		if ( ! suppressedCssSourcemapWarning ) {
diff --git a/tools/js-tools/stylelint.config.base.mjs b/tools/js-tools/stylelint.config.base.mjs
index 56ea35e33598..5f91bbf69ad5 100644
--- a/tools/js-tools/stylelint.config.base.mjs
+++ b/tools/js-tools/stylelint.config.base.mjs
@@ -89,7 +89,6 @@ const baseConfig = {
 			// Packages that still ship hardcoded WPDS fallbacks (no build-time inject yet).
 			files: [
 				'projects/js-packages/base-styles/**/*.{css,scss,sass}',
-				'projects/js-packages/charts/**/*.{css,scss,sass}',
 				'projects/js-packages/components/**/*.{css,scss,sass}',
 				'projects/js-packages/social-previews/**/*.{css,scss,sass}',
 				'projects/plugins/jetpack/**/*.{css,scss,sass}',