@wordpress/components 35.0.0 → 35.1.1-next.v.202606191442.0

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -28,7 +28,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 }
 
 .emotion-6 {
-  background: var(--wp-components-color-background, #fff);
+  background: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
   border: 1px solid transparent;
   border-radius: 2px;
   display: -webkit-inline-box;
@@ -62,8 +62,8 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   content: '';
   position: absolute;
   pointer-events: none;
-  background: var(--wp-components-color-gray-100, #f0f0f0);
-  border: 1px solid var(--wp-components-color-gray-700, #757575);
+  background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
+  border: 1px solid var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
   outline: 2px solid transparent;
   outline-offset: -3px;
   border-radius: 2px;
@@ -106,7 +106,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: var(--wp-components-color-gray-700, #757575);
+  color: var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -134,7 +134,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   font-weight: 499;
 }
 
@@ -156,7 +156,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 }
 
 .emotion-10:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 
 .emotion-11 {
@@ -180,7 +180,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: var(--wp-components-color-gray-700, #757575);
+  color: var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -228,7 +228,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
 }
 
 .emotion-15:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 
 <div>
@@ -264,6 +264,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
             id="wp-components-base-control-19-40"
+            name=":r3e:"
             role="radio"
             type="button"
             value="uppercase"
@@ -297,6 +298,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
             id="wp-components-base-control-19-41"
+            name=":r3e:"
             role="radio"
             type="button"
             value="lowercase"
@@ -359,7 +361,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
 }
 
 .emotion-6 {
-  background: var(--wp-components-color-background, #fff);
+  background: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
   border: 1px solid transparent;
   border-radius: 2px;
   display: -webkit-inline-box;
@@ -393,8 +395,8 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   content: '';
   position: absolute;
   pointer-events: none;
-  background: var(--wp-components-color-gray-100, #f0f0f0);
-  border: 1px solid var(--wp-components-color-gray-700, #757575);
+  background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
+  border: 1px solid var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
   outline: 2px solid transparent;
   outline-offset: -3px;
   border-radius: 2px;
@@ -437,7 +439,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: var(--wp-components-color-gray-700, #757575);
+  color: var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -481,7 +483,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
 }
 
 .emotion-10:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 
 .emotion-11 {
@@ -525,6 +527,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
             id="wp-components-base-control-18-38"
+            name=":r37:"
             role="radio"
             type="button"
             value="rigas"
@@ -547,6 +550,7 @@ exports[`ToggleGroupControl controlled should render correctly with text options
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
             id="wp-components-base-control-18-39"
+            name=":r37:"
             role="radio"
             type="button"
             value="jack"
@@ -598,7 +602,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 }
 
 .emotion-6 {
-  background: var(--wp-components-color-background, #fff);
+  background: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
   border: 1px solid transparent;
   border-radius: 2px;
   display: -webkit-inline-box;
@@ -632,8 +636,8 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   content: '';
   position: absolute;
   pointer-events: none;
-  background: var(--wp-components-color-gray-100, #f0f0f0);
-  border: 1px solid var(--wp-components-color-gray-700, #757575);
+  background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
+  border: 1px solid var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
   outline: 2px solid transparent;
   outline-offset: -3px;
   border-radius: 2px;
@@ -676,7 +680,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: var(--wp-components-color-gray-700, #757575);
+  color: var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -704,7 +708,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   aspect-ratio: 1;
   padding-left: 0;
   padding-right: 0;
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
   font-weight: 499;
 }
 
@@ -726,7 +730,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 }
 
 .emotion-10:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 
 .emotion-11 {
@@ -750,7 +754,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: var(--wp-components-color-gray-700, #757575);
+  color: var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -798,7 +802,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
 }
 
 .emotion-15:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 
 <div>
@@ -834,6 +838,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
             id="wp-components-base-control-1-2"
+            name=":r7:"
             role="radio"
             type="button"
             value="uppercase"
@@ -867,6 +872,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
             id="wp-components-base-control-1-3"
+            name=":r7:"
             role="radio"
             type="button"
             value="lowercase"
@@ -923,7 +929,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
 }
 
 .emotion-6 {
-  background: var(--wp-components-color-background, #fff);
+  background: var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff));
   border: 1px solid transparent;
   border-radius: 2px;
   display: -webkit-inline-box;
@@ -957,8 +963,8 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   content: '';
   position: absolute;
   pointer-events: none;
-  background: var(--wp-components-color-gray-100, #f0f0f0);
-  border: 1px solid var(--wp-components-color-gray-700, #757575);
+  background: var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc));
+  border: 1px solid var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
   outline: 2px solid transparent;
   outline-offset: -3px;
   border-radius: 2px;
@@ -1001,7 +1007,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   background: transparent;
   border: none;
   border-radius: 1px;
-  color: var(--wp-components-color-gray-700, #757575);
+  color: var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070));
   fill: currentColor;
   cursor: pointer;
   display: -webkit-box;
@@ -1045,7 +1051,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
 }
 
 .emotion-10:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
-  color: var(--wp-components-color-foreground, #1e1e1e);
+  color: var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e));
 }
 
 .emotion-11 {
@@ -1089,6 +1095,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
             id="wp-components-base-control-0-0"
+            name=":r0:"
             role="radio"
             type="button"
             value="rigas"
@@ -1111,6 +1118,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
             data-wp-c16t="true"
             data-wp-component="ToggleGroupControlOptionBase"
             id="wp-components-base-control-0-1"
+            name=":r0:"
             role="radio"
             type="button"
             value="jack"

package/src/toolbar/toolbar-group/style.scss

@@ -30,7 +30,7 @@
 		padding-right: $grid-unit-15 * 0.5;
 
 		svg {
-			min-width: $button-size-small; // This is the optimal icon size, and we size the whole button after this.
+			min-width: var(--wpds-dimension-size-sm); // This is the optimal icon size, and we size the whole button after this.
 		}
 
 		&::before {
@@ -75,7 +75,7 @@ div.components-toolbar {
 			display: inline-block;
 			content: "";
 			box-sizing: content-box;
-			background-color: $gray-300;
+			background-color: var(--wpds-color-stroke-surface-neutral);
 			position: absolute;
 			top: 8px;
 			left: -3px;

package/src/tools-panel/styles.ts

@@ -30,10 +30,10 @@ const toolsPanelGrid = {
 	},
 };
 
+// TODO: should use the `stroke-surface-neutral` WPDS token when refactored to SCSS modules
 export const ToolsPanel = ( columns: number ) => css`
 	${ toolsPanelGrid.columns( columns ) }
 	${ toolsPanelGrid.spacing }
-
 	border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 300 ] };
 	margin-top: -1px;
 	padding: ${ space( 4 ) };

package/src/tooltip/stories/index.story.tsx

@@ -15,7 +15,6 @@ import Tooltip from '..';
 import Button from '../../button';
 
 const meta: Meta< typeof Tooltip > = {
-	tags: [ 'manifest' ],
 	title: 'Components/Overlays/Tooltip',
 	id: 'components-tooltip',
 	component: Tooltip,
@@ -38,8 +37,9 @@ const meta: Meta< typeof Tooltip > = {
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'recommended',
+			status: 'not-recommended',
 			whereUsed: 'global',
+			notes: 'Use `Tooltip` from `@wordpress/ui` instead.',
 		},
 	},
 };

package/src/tooltip/style.scss

@@ -5,7 +5,7 @@
 .components-tooltip {
 	background: $black;
 	font-family: $default-font;
-	border-radius: $radius-small;
+	border-radius: var(--wpds-border-radius-md);
 	color: $gray-100;
 	text-align: center;
 	line-height: 1.4;

package/src/unit-control/utils.ts

@@ -2,227 +2,208 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import type { WPUnitControlUnit } from './types';
 
-const isWeb = Platform.OS === 'web';
-
 const allUnits: Record< string, WPUnitControlUnit > = {
 	px: {
 		value: 'px',
-		label: isWeb ? 'px' : __( 'Pixels (px)' ),
+		label: 'px',
 		a11yLabel: __( 'Pixels (px)' ),
 		step: 1,
 	},
 	'%': {
 		value: '%',
-		label: isWeb ? '%' : __( 'Percentage (%)' ),
+		label: '%',
 		a11yLabel: __( 'Percent (%)' ),
 		step: 0.1,
 	},
 	em: {
 		value: 'em',
-		label: isWeb ? 'em' : __( 'Relative to parent font size (em)' ),
+		label: 'em',
 		a11yLabel: _x( 'ems', 'Relative to parent font size (em)' ),
 		step: 0.01,
 	},
 	rem: {
 		value: 'rem',
-		label: isWeb ? 'rem' : __( 'Relative to root font size (rem)' ),
+		label: 'rem',
 		a11yLabel: _x( 'rems', 'Relative to root font size (rem)' ),
 		step: 0.01,
 	},
 	vw: {
 		value: 'vw',
-		label: isWeb ? 'vw' : __( 'Viewport width (vw)' ),
+		label: 'vw',
 		a11yLabel: __( 'Viewport width (vw)' ),
 		step: 0.1,
 	},
 	vh: {
 		value: 'vh',
-		label: isWeb ? 'vh' : __( 'Viewport height (vh)' ),
+		label: 'vh',
 		a11yLabel: __( 'Viewport height (vh)' ),
 		step: 0.1,
 	},
 	vmin: {
 		value: 'vmin',
-		label: isWeb ? 'vmin' : __( 'Viewport smallest dimension (vmin)' ),
+		label: 'vmin',
 		a11yLabel: __( 'Viewport smallest dimension (vmin)' ),
 		step: 0.1,
 	},
 	vmax: {
 		value: 'vmax',
-		label: isWeb ? 'vmax' : __( 'Viewport largest dimension (vmax)' ),
+		label: 'vmax',
 		a11yLabel: __( 'Viewport largest dimension (vmax)' ),
 		step: 0.1,
 	},
 	ch: {
 		value: 'ch',
-		label: isWeb ? 'ch' : __( 'Width of the zero (0) character (ch)' ),
+		label: 'ch',
 		a11yLabel: __( 'Width of the zero (0) character (ch)' ),
 		step: 0.01,
 	},
 	ex: {
 		value: 'ex',
-		label: isWeb ? 'ex' : __( 'x-height of the font (ex)' ),
+		label: 'ex',
 		a11yLabel: __( 'x-height of the font (ex)' ),
 		step: 0.01,
 	},
 	cm: {
 		value: 'cm',
-		label: isWeb ? 'cm' : __( 'Centimeters (cm)' ),
+		label: 'cm',
 		a11yLabel: __( 'Centimeters (cm)' ),
 		step: 0.001,
 	},
 	mm: {
 		value: 'mm',
-		label: isWeb ? 'mm' : __( 'Millimeters (mm)' ),
+		label: 'mm',
 		a11yLabel: __( 'Millimeters (mm)' ),
 		step: 0.1,
 	},
 	in: {
 		value: 'in',
-		label: isWeb ? 'in' : __( 'Inches (in)' ),
+		label: 'in',
 		a11yLabel: __( 'Inches (in)' ),
 		step: 0.001,
 	},
 	pc: {
 		value: 'pc',
-		label: isWeb ? 'pc' : __( 'Picas (pc)' ),
+		label: 'pc',
 		a11yLabel: __( 'Picas (pc)' ),
 		step: 1,
 	},
 	pt: {
 		value: 'pt',
-		label: isWeb ? 'pt' : __( 'Points (pt)' ),
+		label: 'pt',
 		a11yLabel: __( 'Points (pt)' ),
 		step: 1,
 	},
 	svw: {
 		value: 'svw',
-		label: isWeb ? 'svw' : __( 'Small viewport width (svw)' ),
+		label: 'svw',
 		a11yLabel: __( 'Small viewport width (svw)' ),
 		step: 0.1,
 	},
 	svh: {
 		value: 'svh',
-		label: isWeb ? 'svh' : __( 'Small viewport height (svh)' ),
+		label: 'svh',
 		a11yLabel: __( 'Small viewport height (svh)' ),
 		step: 0.1,
 	},
 	svi: {
 		value: 'svi',
-		label: isWeb
-			? 'svi'
-			: __( 'Viewport smallest size in the inline direction (svi)' ),
+		label: 'svi',
 		a11yLabel: __( 'Small viewport width or height (svi)' ),
 		step: 0.1,
 	},
 	svb: {
 		value: 'svb',
-		label: isWeb
-			? 'svb'
-			: __( 'Viewport smallest size in the block direction (svb)' ),
+		label: 'svb',
 		a11yLabel: __( 'Small viewport width or height (svb)' ),
 		step: 0.1,
 	},
 	svmin: {
 		value: 'svmin',
-		label: isWeb
-			? 'svmin'
-			: __( 'Small viewport smallest dimension (svmin)' ),
+		label: 'svmin',
 		a11yLabel: __( 'Small viewport smallest dimension (svmin)' ),
 		step: 0.1,
 	},
 	lvw: {
 		value: 'lvw',
-		label: isWeb ? 'lvw' : __( 'Large viewport width (lvw)' ),
+		label: 'lvw',
 		a11yLabel: __( 'Large viewport width (lvw)' ),
 		step: 0.1,
 	},
 	lvh: {
 		value: 'lvh',
-		label: isWeb ? 'lvh' : __( 'Large viewport height (lvh)' ),
+		label: 'lvh',
 		a11yLabel: __( 'Large viewport height (lvh)' ),
 		step: 0.1,
 	},
 	lvi: {
 		value: 'lvi',
-		label: isWeb ? 'lvi' : __( 'Large viewport width or height (lvi)' ),
+		label: 'lvi',
 		a11yLabel: __( 'Large viewport width or height (lvi)' ),
 		step: 0.1,
 	},
 	lvb: {
 		value: 'lvb',
-		label: isWeb ? 'lvb' : __( 'Large viewport width or height (lvb)' ),
+		label: 'lvb',
 		a11yLabel: __( 'Large viewport width or height (lvb)' ),
 		step: 0.1,
 	},
 	lvmin: {
 		value: 'lvmin',
-		label: isWeb
-			? 'lvmin'
-			: __( 'Large viewport smallest dimension (lvmin)' ),
+		label: 'lvmin',
 		a11yLabel: __( 'Large viewport smallest dimension (lvmin)' ),
 		step: 0.1,
 	},
 	dvw: {
 		value: 'dvw',
-		label: isWeb ? 'dvw' : __( 'Dynamic viewport width (dvw)' ),
+		label: 'dvw',
 		a11yLabel: __( 'Dynamic viewport width (dvw)' ),
 		step: 0.1,
 	},
 	dvh: {
 		value: 'dvh',
-		label: isWeb ? 'dvh' : __( 'Dynamic viewport height (dvh)' ),
+		label: 'dvh',
 		a11yLabel: __( 'Dynamic viewport height (dvh)' ),
 		step: 0.1,
 	},
 	dvi: {
 		value: 'dvi',
-		label: isWeb ? 'dvi' : __( 'Dynamic viewport width or height (dvi)' ),
+		label: 'dvi',
 		a11yLabel: __( 'Dynamic viewport width or height (dvi)' ),
 		step: 0.1,
 	},
 	dvb: {
 		value: 'dvb',
-		label: isWeb ? 'dvb' : __( 'Dynamic viewport width or height (dvb)' ),
+		label: 'dvb',
 		a11yLabel: __( 'Dynamic viewport width or height (dvb)' ),
 		step: 0.1,
 	},
 	dvmin: {
 		value: 'dvmin',
-		label: isWeb
-			? 'dvmin'
-			: __( 'Dynamic viewport smallest dimension (dvmin)' ),
+		label: 'dvmin',
 		a11yLabel: __( 'Dynamic viewport smallest dimension (dvmin)' ),
 		step: 0.1,
 	},
 	dvmax: {
 		value: 'dvmax',
-		label: isWeb
-			? 'dvmax'
-			: __( 'Dynamic viewport largest dimension (dvmax)' ),
+		label: 'dvmax',
 		a11yLabel: __( 'Dynamic viewport largest dimension (dvmax)' ),
 		step: 0.1,
 	},
 	svmax: {
 		value: 'svmax',
-		label: isWeb
-			? 'svmax'
-			: __( 'Small viewport largest dimension (svmax)' ),
+		label: 'svmax',
 		a11yLabel: __( 'Small viewport largest dimension (svmax)' ),
 		step: 0.1,
 	},
 	lvmax: {
 		value: 'lvmax',
-		label: isWeb
-			? 'lvmax'
-			: __( 'Large viewport largest dimension (lvmax)' ),
+		label: 'lvmax',
 		a11yLabel: __( 'Large viewport largest dimension (lvmax)' ),
 		step: 0.1,
 	},

package/src/utils/colors-values.js

@@ -1,6 +1,18 @@
-/**
- * Internal dependencies
- */
+/* eslint-disable @wordpress/no-ds-tokens -- This file is the JS counterpart of
+   theme-variables.scss and the package's single mapping to the design system.
+   The rule guards against bare `--wpds-*` references, which the build can't
+   inject fallbacks into for Emotion/JS files; here every reference carries an
+   explicit fallback, so that concern doesn't apply.
+
+   IMPORTANT: because this file's source contains `--wpds-` text, the
+   design-system fallback build plugin claims it (it matches any file whose
+   source includes `--wpds-`, comments included) and, in doing so, displaces
+   the Emotion transform for this file. That is harmless ONLY because this file
+   holds plain value constants and no Emotion `css`/styled component selectors.
+   Do not add any here: a co-located component selector would silently fail to
+   compile and break the build, with no lint signal (see #79245). Keep this
+   file selector-free — define styles elsewhere and consume these constants. */
+
 const white = '#fff';
 
 // Matches the grays in @wordpress/base-styles
@@ -27,33 +39,41 @@ const ALERT = {
 	green: '#4ab866',
 };
 
-// Should match packages/components/src/utils/theme-variables.scss
+// Should match packages/components/src/utils/theme-variables.scss.
+//
+// Mirrors the Sass structure: each non-accent value resolves through a design
+// system (`--wpds-*`) token, then a hardcoded fallback. The hardcoded values
+// match what the design-system fallback plugin injects into the Sass version,
+// so JS behaves consistently with the Sass variables. Keep both the token
+// references and the fallbacks in sync with the Sass version.
 const THEME = {
 	accent: `var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))`,
 	accentDarker10: `var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))`,
 	accentDarker20: `var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6))`,
 	/** Used when placing text on the accent color. */
-	accentInverted: `var(--wp-components-color-accent-inverted, ${ white })`,
+	accentInverted: `var(--wp-components-color-accent-inverted, var(--wpds-color-foreground-interactive-brand-strong, #fff))`,
 
-	background: `var(--wp-components-color-background, ${ white })`,
+	background: `var(--wp-components-color-background, var(--wpds-color-background-surface-neutral-strong, #fff))`,
 
-	foreground: `var(--wp-components-color-foreground, ${ GRAY[ 900 ] })`,
+	foreground: `var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,
 	/** Used when placing text on the foreground color. */
-	foregroundInverted: `var(--wp-components-color-foreground-inverted, ${ white })`,
+	foregroundInverted: `var(--wp-components-color-foreground-inverted, var(--wpds-color-background-surface-neutral, #fcfcfc))`,
 
 	gray: {
 		/** @deprecated Use `COLORS.theme.foreground` instead. */
-		900: `var(--wp-components-color-foreground, ${ GRAY[ 900 ] })`,
-		800: `var(--wp-components-color-gray-800, ${ GRAY[ 800 ] })`,
-		700: `var(--wp-components-color-gray-700, ${ GRAY[ 700 ] })`,
-		600: `var(--wp-components-color-gray-600, ${ GRAY[ 600 ] })`,
-		400: `var(--wp-components-color-gray-400, ${ GRAY[ 400 ] })`,
-		300: `var(--wp-components-color-gray-300, ${ GRAY[ 300 ] })`,
-		200: `var(--wp-components-color-gray-200, ${ GRAY[ 200 ] })`,
-		100: `var(--wp-components-color-gray-100, ${ GRAY[ 100 ] })`,
+		900: `var(--wp-components-color-foreground, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,
+		800: `var(--wp-components-color-gray-800, var(--wpds-color-foreground-content-neutral, #1e1e1e))`,
+		700: `var(--wp-components-color-gray-700, var(--wpds-color-foreground-content-neutral-weak, #707070))`,
+		600: `var(--wp-components-color-gray-600, var(--wpds-color-stroke-interactive-neutral, #8d8d8d))`,
+		400: `var(--wp-components-color-gray-400, var(--wpds-color-stroke-interactive-neutral, #8d8d8d))`,
+		300: `var(--wp-components-color-gray-300, var(--wpds-color-stroke-surface-neutral, #dbdbdb))`,
+		200: `var(--wp-components-color-gray-200, var(--wpds-color-stroke-surface-neutral, #dbdbdb))`,
+		100: `var(--wp-components-color-gray-100, var(--wpds-color-background-surface-neutral, #fcfcfc))`,
 	},
 };
 
+/* eslint-enable @wordpress/no-ds-tokens */
+
 const UI = {
 	background: THEME.background,
 	backgroundDisabled: THEME.gray[ 100 ],

package/src/utils/config-values.js

@@ -66,8 +66,8 @@ export default Object.assign( {}, CONTROL_PROPS, {
 	surfaceBackgroundTertiaryColor: COLORS.white,
 	surfaceColor: COLORS.white,
 	// Modal exit animation: `use-modal-exit-animation` parses this for the
-	// `animationend` timeout race; keep the numeric duration equal to
-	// `--wpds-motion-duration-md` on `.components-modal__frame` in modal/style.scss.
+	// `animationend` timeout race; keep the numeric duration equal to the WPDS
+	// `motion-duration-md` token on `.components-modal__frame` in modal/style.scss.
 	transitionDuration: '200ms',
 	transitionDurationFast: '160ms',
 	transitionDurationFaster: '120ms',