Premium analytics: remove token fallbacks

projects/packages/premium-analytics/changelog/update-premium-analytics-no-token-fallbacks

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Comment: Expand stylelint no-token-fallback-values to the whole package and remove manual WPDS token fallbacks from source so wp-build injects canonical theme fallbacks at build time.

projects/packages/premium-analytics/packages/ui/src/date-filters-panel/date-filters-panel.scss

@@ -55,7 +55,7 @@
 
 		.date-range-quick-presets__pill,
 		.date-filters-panel-button {
-			--wp-ui-button-height: calc(var(--wpds-dimension-size-lg, 40px) - 2px);
+			--wp-ui-button-height: calc(var(--wpds-dimension-size-lg) - 2px);
 		}
 	}
 }

projects/packages/premium-analytics/packages/ui/src/date-range-popover/date-range-filter.scss

@@ -22,7 +22,7 @@
 // Hovered/focused trigger: same brand-tinted highlight the select-control
 // popup gives its items.
 .date-filters-panel-button {
-	font-size: max(var(--wpds-typography-font-size-md, 13px), 16px);
+	font-size: max(var(--wpds-typography-font-size-md), 16px);
 	--wp-ui-button-background-color-active: var(--wpds-color-background-interactive-brand-weak-active);
 }
 
@@ -102,6 +102,6 @@
 @media (min-width: 600px) {
 
 	.date-filters-panel-button {
-		font-size: var(--wpds-typography-font-size-md, 13px);
+		font-size: var(--wpds-typography-font-size-md);
 	}
 }

projects/packages/premium-analytics/packages/ui/src/section-tabs/section-tabs.module.scss

@@ -1,8 +1,8 @@
 .tabList {
 	border-block-end:
-		var(--wpds-border-width-xs, 1px) solid
-		var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
-	margin-block-end: var(--wpds-dimension-gap-lg, 16px);
+		var(--wpds-border-width-xs) solid
+		var(--wpds-color-stroke-surface-neutral-weak);
+	margin-block-end: var(--wpds-dimension-gap-lg);
 }
 
 /*

projects/packages/premium-analytics/packages/widgets-toolkit/src/components/chart-empty-state/chart-empty-state.module.scss

@@ -9,5 +9,5 @@
 }
 
 .icon {
-	color: var(--wpds-color-stroke-surface-neutral-weak, #e0e0e0);
+	color: var(--wpds-color-stroke-surface-neutral-weak);
 }

projects/packages/premium-analytics/packages/widgets-toolkit/src/components/chart-empty-state/stories/chart-empty-state.stories.tsx

@@ -52,21 +52,21 @@ const WidgetCard = ( {
 		style={ {
 			width,
 			height,
-			border: '1px solid var(--wpds-color-stroke-surface-neutral-weak, #e0e0e0)',
-			borderRadius: 'var(--wpds-border-radius-md, 8px)',
-			background: 'var(--wpds-color-background-surface-neutral, #fff)',
+			border: '1px solid var(--wpds-color-stroke-surface-neutral-weak)',
+			borderRadius: 'var(--wpds-border-radius-md)',
+			background: 'var(--wpds-color-background-surface-neutral)',
 			display: 'flex',
 			flexDirection: 'column',
 			overflow: 'hidden',
 		} }
 	>
 		<div
 			style={ {
-				padding: 'var(--wpds-dimension-gap-lg, 16px)',
-				borderBottom: '1px solid var(--wpds-color-stroke-surface-neutral-weak, #e0e0e0)',
+				padding: 'var(--wpds-dimension-gap-lg)',
+				borderBottom: '1px solid var(--wpds-color-stroke-surface-neutral-weak)',
 				fontWeight: 600,
-				fontSize: 'var(--wpds-typography-font-size-sm, 14px)',
-				color: 'var(--wpds-color-foreground-content-neutral, #1e1e1e)',
+				fontSize: 'var(--wpds-typography-font-size-sm)',
+				color: 'var(--wpds-color-foreground-content-neutral)',
 			} }
 		>
 			{ title }

projects/packages/premium-analytics/packages/widgets-toolkit/src/components/chart-leaderboard/leaderboard-chart.module.scss

@@ -19,10 +19,10 @@
 	// Row label links sit inside the chart's scroll container, which would clip
 	// an outward focus ring — draw it inset instead.
 	:global(a:focus-visible) {
-		border-radius: var(--wpds-border-radius-sm, 2px);
+		border-radius: var(--wpds-border-radius-sm);
 		outline:
 			var(--wpds-border-width-focus) solid
-			var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
+			var(--wpds-color-stroke-focus);
 		outline-offset: calc(-1 * var(--wpds-border-width-focus));
 	}
 

projects/packages/premium-analytics/packages/widgets-toolkit/src/components/download-csv-button/download-csv-button.module.scss

@@ -2,7 +2,7 @@
 	align-self: flex-end;
 	display: inline-flex;
 	align-items: center;
-	gap: var(--wpds-dimension-gap-xs, 4px);
+	gap: var(--wpds-dimension-gap-xs);
 	min-block-size: 20px;
 	// Widget roots clip overflow, so the focus ring is drawn inset and the ring
 	// plus its gap must live inside the button's own box (mirrors
@@ -24,10 +24,10 @@
 }
 
 .downloadCsv:focus-visible {
-	border-radius: var(--wpds-border-radius-sm, 2px);
+	border-radius: var(--wpds-border-radius-sm);
 	outline:
 		var(--wpds-border-width-focus) solid
-		var(--wpds-color-stroke-focus, var(--wp-admin-theme-color, #3858e9));
+		var(--wpds-color-stroke-focus);
 	outline-offset: calc(-1 * var(--wpds-border-width-focus));
 }
 

projects/packages/premium-analytics/packages/widgets-toolkit/src/components/metric-tabs-chart/metric-tabs-chart.module.scss

@@ -10,7 +10,7 @@
 	container-type: inline-size;
 	display: flex;
 	flex-direction: column;
-	gap: var(--wpds-dimension-gap-md, 16px);
+	gap: var(--wpds-dimension-gap-md);
 	height: 100%;
 	min-height: 0;
 }
@@ -22,7 +22,7 @@
 	justify-content: space-between;
 	align-items: flex-start;
 	flex-shrink: 0;
-	gap: var(--wpds-dimension-gap-md, 16px);
+	gap: var(--wpds-dimension-gap-md);
 }
 
 /* The metric tab list: a row of cards that wrap (not a text tab bar).
@@ -31,7 +31,7 @@
 .tabs {
 	display: flex;
 	flex-wrap: wrap;
-	gap: var(--wpds-dimension-gap-sm, 8px);
+	gap: var(--wpds-dimension-gap-sm);
 	min-width: 0;
 	overflow: visible;
 }
@@ -53,14 +53,14 @@
  * rule sits in a low-priority @layer, so this unlayered override wins. */
 .metricSelect [class*="trigger-wrapper"] {
 	height: auto;
-	padding-block: var(--wpds-dimension-padding-sm, 8px);
+	padding-block: var(--wpds-dimension-padding-sm);
 }
 
 /* Draw the focus ring inside the card; the default outset ring gets clipped
  * by the widget chrome's `overflow: auto`. */
 .tab,
 .metricSelect [class*="trigger-wrapper"] {
-	outline-offset: calc(-1 * var(--wpds-border-width-focus, 1.5px));
+	outline-offset: calc(-1 * var(--wpds-border-width-focus));
 }
 
 .metricSelect button {
@@ -70,8 +70,8 @@
 
 .tab {
 	height: auto;
-	padding: var(--wpds-dimension-padding-sm, 8px) var(--wpds-dimension-padding-md, 12px);
-	border-radius: var(--wpds-border-radius-md, 4px);
+	padding: var(--wpds-dimension-padding-sm) var(--wpds-dimension-padding-md);
+	border-radius: var(--wpds-border-radius-md);
 }
 
 /* Hide the selection underline; the card fill shows selection instead. Older
@@ -97,7 +97,7 @@
 .tabContent {
 	display: flex;
 	flex-direction: column;
-	gap: var(--wpds-dimension-gap-xs, 4px);
+	gap: var(--wpds-dimension-gap-xs);
 	align-items: flex-start;
 	text-align: left;
 }

projects/packages/premium-analytics/packages/widgets-toolkit/src/components/metric-tile/metric-tile-grid.module.scss

@@ -5,7 +5,7 @@ $metric-tile-grid-grid-min-block-size: 360px;
 $metric-tile-grid-row-value-font-size-max: 40px;
 $metric-tile-grid-tile-value-font-size-max: 40px;
 $metric-tile-grid-prominent-value-font-size-max: 44px;
-$metric-tile-grid-large-row-min-block-size: calc(var(--wpds-typography-line-height-2xl, 40px) + var(--wpds-dimension-padding-2xl, 24px) + var(--wpds-dimension-padding-2xl, 24px) + var(--wpds-dimension-gap-lg, 16px));
+$metric-tile-grid-large-row-min-block-size: calc(var(--wpds-typography-line-height-2xl) + var(--wpds-dimension-padding-2xl) + var(--wpds-dimension-padding-2xl) + var(--wpds-dimension-gap-lg));
 
 /* Size containment removes the container from auto sizing, so it must get its
  * height from outside: flex stretching in a flex parent, or the 100% chain
@@ -19,9 +19,9 @@ $metric-tile-grid-large-row-min-block-size: calc(var(--wpds-typography-line-heig
 
 .grid {
 	display: grid;
-	grid-auto-rows: minmax(var(--wpds-typography-line-height-2xl, 40px), 1fr);
+	grid-auto-rows: minmax(var(--wpds-typography-line-height-2xl), 1fr);
 	grid-template-columns: 1fr;
-	gap: var(--wpds-dimension-gap-sm, 8px);
+	gap: var(--wpds-dimension-gap-sm);
 	block-size: 100%;
 	min-block-size: 0;
 }
@@ -30,20 +30,20 @@ $metric-tile-grid-large-row-min-block-size: calc(var(--wpds-typography-line-heig
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	gap: var(--wpds-dimension-gap-md, 12px);
+	gap: var(--wpds-dimension-gap-md);
 	min-inline-size: 0;
 	min-block-size: 0;
-	padding-block: var(--wpds-dimension-padding-sm, 8px);
-	padding-inline: var(--wpds-dimension-padding-lg, 16px);
-	border: var(--wpds-border-width-xs, 1px) solid var(--wpds-color-stroke-surface-neutral-weak);
-	border-radius: var(--wpds-border-radius-lg, 8px);
+	padding-block: var(--wpds-dimension-padding-sm);
+	padding-inline: var(--wpds-dimension-padding-lg);
+	border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak);
+	border-radius: var(--wpds-border-radius-lg);
 }
 
 .header {
 	display: flex;
 	flex: 1 1 auto;
 	align-items: center;
-	gap: var(--wpds-dimension-gap-sm, 8px);
+	gap: var(--wpds-dimension-gap-sm);
 	min-inline-size: 0;
 	color: var(--wpds-color-foreground-content-neutral);
 }
@@ -66,7 +66,7 @@ $metric-tile-grid-large-row-min-block-size: calc(var(--wpds-typography-line-heig
 	max-inline-size: 100%;
 	overflow: hidden;
 	color: var(--wpds-color-foreground-content-neutral);
-	font-size: clamp(var(--wpds-typography-font-size-xl, 20px), 10cqh, $metric-tile-grid-row-value-font-size-max);
+	font-size: clamp(var(--wpds-typography-font-size-xl), 10cqh, $metric-tile-grid-row-value-font-size-max);
 	line-height: 1.2;
 	text-overflow: ellipsis;
 	white-space: nowrap;
@@ -88,12 +88,12 @@ $metric-tile-grid-large-row-min-block-size: calc(var(--wpds-typography-line-heig
  * total here with explicit fallbacks. Scoped to the comparison cell so the
  * plain `.value` path keeps its responsive clamp. */
 .comparison span {
-	font-size: var(--wpds-typography-font-size-xl, 20px);
-	line-height: var(--wpds-typography-line-height-xl, 32px);
+	font-size: var(--wpds-typography-font-size-xl);
+	line-height: var(--wpds-typography-line-height-xl);
 }
 
 .placeholder {
-	font-weight: var(--wpds-typography-font-weight-medium, 500);
+	font-weight: var(--wpds-typography-font-weight-medium);
 }
 
 .tile .placeholder {
@@ -115,9 +115,9 @@ $metric-tile-grid-large-row-min-block-size: calc(var(--wpds-typography-line-heig
 	.tile {
 		flex-direction: column;
 		justify-content: center;
-		gap: var(--wpds-dimension-gap-sm, 8px);
-		padding-block: var(--wpds-dimension-padding-md, 12px);
-		padding-inline: var(--wpds-dimension-padding-md, 12px);
+		gap: var(--wpds-dimension-gap-sm);
+		padding-block: var(--wpds-dimension-padding-md);
+		padding-inline: var(--wpds-dimension-padding-md);
 		text-align: center;
 	}
 
@@ -135,7 +135,7 @@ $metric-tile-grid-large-row-min-block-size: calc(var(--wpds-typography-line-heig
 
 	.tile .value,
 	.tile .placeholder {
-		font-size: clamp(var(--wpds-typography-font-size-xl, 20px), 11cqh, $metric-tile-grid-tile-value-font-size-max);
+		font-size: clamp(var(--wpds-typography-font-size-xl), 11cqh, $metric-tile-grid-tile-value-font-size-max);
 	}
 }
 
@@ -152,12 +152,12 @@ $metric-tile-grid-large-row-min-block-size: calc(var(--wpds-typography-line-heig
 	}
 
 	.tile {
-		padding-block: var(--wpds-dimension-padding-2xl, 24px);
-		padding-inline: var(--wpds-dimension-padding-lg, 16px);
+		padding-block: var(--wpds-dimension-padding-2xl);
+		padding-inline: var(--wpds-dimension-padding-lg);
 	}
 
 	.tile .value,
 	.tile .placeholder {
-		font-size: clamp(var(--wpds-typography-font-size-2xl, 32px), 12cqh, $metric-tile-grid-prominent-value-font-size-max);
+		font-size: clamp(var(--wpds-typography-font-size-2xl), 12cqh, $metric-tile-grid-prominent-value-font-size-max);
 	}
 }

projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/report-page-layout.module.scss

@@ -1,33 +1,33 @@
 .root {
 	display: flex;
 	flex-direction: column;
-	gap: var(--wpds-dimension-gap-lg, 16px);
+	gap: var(--wpds-dimension-gap-lg);
 }
 
 .header {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: flex-start;
-	gap: var(--wpds-dimension-gap-md, 16px);
+	gap: var(--wpds-dimension-gap-md);
 }
 
 .heading {
 	display: flex;
 	flex-direction: column;
-	gap: var(--wpds-dimension-gap-xs, 4px);
+	gap: var(--wpds-dimension-gap-xs);
 	min-inline-size: 0;
 }
 
 .description {
-	color: var(--wpds-color-foreground-content-neutral-weak, #757575);
+	color: var(--wpds-color-foreground-content-neutral-weak);
 }
 
 .actions {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	gap: var(--wpds-dimension-gap-sm, 8px);
+	gap: var(--wpds-dimension-gap-sm);
 	flex-shrink: 0;
 }
 
@@ -36,19 +36,19 @@
 	flex-direction: row;
 	flex-wrap: wrap;
 	align-items: center;
-	gap: var(--wpds-dimension-gap-sm, 8px);
+	gap: var(--wpds-dimension-gap-sm);
 }
 
 .sections {
 	display: flex;
 	flex-direction: column;
-	gap: var(--wpds-dimension-gap-lg, 16px);
+	gap: var(--wpds-dimension-gap-lg);
 }
 
 .section {
 	border:
-		var(--wpds-border-width-xs, 1px) solid
-		var(--wpds-color-stroke-surface-neutral-weak, #f0f0f0);
-	border-radius: var(--wpds-border-radius-md, 8px);
-	padding: var(--wpds-dimension-padding-2xl, 24px);
+		var(--wpds-border-width-xs) solid
+		var(--wpds-color-stroke-surface-neutral-weak);
+	border-radius: var(--wpds-border-radius-md);
+	padding: var(--wpds-dimension-padding-2xl);
 }

projects/packages/premium-analytics/packages/widgets-toolkit/src/components/report-page/report-performance-chart.module.scss

@@ -1,22 +1,22 @@
 .root {
 	display: flex;
 	flex-direction: column;
-	gap: var(--wpds-dimension-gap-md, 16px);
+	gap: var(--wpds-dimension-gap-md);
 }
 
 .header {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: center;
-	gap: var(--wpds-dimension-gap-md, 16px);
+	gap: var(--wpds-dimension-gap-md);
 }
 
 .controls {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
-	gap: var(--wpds-dimension-gap-sm, 8px);
+	gap: var(--wpds-dimension-gap-sm);
 }
 
 /* Anchors the absolutely positioned loading overlay. The height must be fixed: