@wordpress/components 35.0.1 → 36.0.0

package/src/text-control/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import type { ChangeEvent, ForwardedRef } from 'react';
-import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -16,16 +15,15 @@ import { forwardRef } from '@wordpress/element';
 import BaseControl from '../base-control';
 import type { WordPressComponentProps } from '../context';
 import type { TextControlProps } from './types';
-import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 function UnforwardedTextControl(
 	props: WordPressComponentProps< TextControlProps, 'input', false >,
 	ref: ForwardedRef< HTMLInputElement >
 ) {
 	const {
-		// Prevent passing this to `input`.
+		// Prevent passing legacy props to `input`.
 		__nextHasNoMarginBottom: _,
-		__next40pxDefaultSize = false,
+		__next40pxDefaultSize: __,
 		label,
 		hideLabelFromVision,
 		value,
@@ -40,12 +38,6 @@ function UnforwardedTextControl(
 	const onChangeValue = ( event: ChangeEvent< HTMLInputElement > ) =>
 		onChange( event.target.value );
 
-	maybeWarnDeprecated36pxSize( {
-		componentName: 'TextControl',
-		size: undefined,
-		__next40pxDefaultSize,
-	} );
-
 	return (
 		<BaseControl
 			label={ label }
@@ -55,9 +47,7 @@ function UnforwardedTextControl(
 			className={ className }
 		>
 			<input
-				className={ clsx( 'components-text-control__input', {
-					'is-next-40px-default-size': __next40pxDefaultSize,
-				} ) }
+				className="components-text-control__input"
 				type={ type }
 				id={ id }
 				value={ value }
@@ -82,7 +72,6 @@ function UnforwardedTextControl(
  *
  *   return (
  *     <TextControl
- *       __next40pxDefaultSize
  *       label="Additional CSS Class"
  *       value={ className }
  *       onChange={ ( value ) => setClassName( value ) }

package/src/text-control/stories/index.story.tsx

@@ -46,7 +46,6 @@ const DefaultTemplate: StoryFn< typeof TextControl > = ( {
 
 	return (
 		<TextControl
-			__next40pxDefaultSize
 			{ ...args }
 			value={ value }
 			onChange={ ( v ) => {
@@ -61,7 +60,6 @@ export const Default: StoryFn< typeof TextControl > = DefaultTemplate.bind(
 	{}
 );
 Default.args = {
-	__next40pxDefaultSize: true,
 	placeholder: 'Placeholder',
 };
 

package/src/text-control/style.scss

@@ -18,7 +18,7 @@
 .components-text-control__input[type="month"],
 .components-text-control__input[type="number"] {
 	width: 100%;
-	height: $grid-unit-40;
+	height: $grid-unit-50;
 	// Override input style margin in WP forms.css.
 	margin: 0;
 	background: $components-color-background;
@@ -26,19 +26,15 @@
 	@include input-control( $components-color-accent );
 	border-color: $components-color-border;
 
+	// Subtract 1px to account for the border, which isn't included on the element
+	// on newer components like InputControl, SelectControl, etc.
+	// These values should be shared with the `controlPaddingX` in ./utils/config-values.js
+	padding-left: $grid-unit-15;
+	padding-right: $grid-unit-15;
+
 	&::placeholder {
 		color: $components-color-dark-gray-placeholder;
 	}
-
-	&.is-next-40px-default-size {
-		height: $grid-unit-50;
-
-		// Subtract 1px to account for the border, which isn't included on the element
-		// on newer components like InputControl, SelectControl, etc.
-		// These values should be shared with the `controlPaddingX` in ./utils/config-values.js
-		padding-left: $grid-unit-15;
-		padding-right: $grid-unit-15;
-	}
 }
 
 .components-text-control__input[type="email"],

package/src/text-control/test/text-control.tsx

@@ -6,11 +6,7 @@ import { render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import _TextControl from '..';
-
-const TextControl = ( props: React.ComponentProps< typeof _TextControl > ) => {
-	return <_TextControl { ...props } __next40pxDefaultSize />;
-};
+import TextControl from '..';
 
 const noop = () => {};
 

package/src/text-control/types.ts

@@ -39,7 +39,8 @@ export type TextControlProps = Pick<
 	/**
 	 * Start opting into the larger default height that will become the default size in a future version.
 	 *
-	 * @default false
+	 * @deprecated Default behavior since WordPress 7.1. Prop can be safely removed.
+	 * @ignore
 	 */
 	__next40pxDefaultSize?: boolean;
 };

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"
@@ -273,6 +274,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             >
               <svg
                 aria-hidden="true"
+                fill="currentColor"
                 focusable="false"
                 height="24"
                 viewBox="0 0 24 24"
@@ -297,6 +299,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"
@@ -306,6 +309,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
             >
               <svg
                 aria-hidden="true"
+                fill="currentColor"
                 focusable="false"
                 height="24"
                 viewBox="0 0 24 24"
@@ -359,7 +363,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 +397,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 +441,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 +485,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 +529,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 +552,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 +604,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 +638,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 +682,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 +710,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 +732,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 +756,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 +804,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 +840,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"
@@ -843,6 +850,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             >
               <svg
                 aria-hidden="true"
+                fill="currentColor"
                 focusable="false"
                 height="24"
                 viewBox="0 0 24 24"
@@ -867,6 +875,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"
@@ -876,6 +885,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
             >
               <svg
                 aria-hidden="true"
+                fill="currentColor"
                 focusable="false"
                 height="24"
                 viewBox="0 0 24 24"
@@ -923,7 +933,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 +967,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 +1011,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 +1055,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 +1099,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 +1122,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/tools-panel/tools-panel/README.md

@@ -126,7 +126,6 @@ export function DimensionPanel() {
 				onDeselect={ () => setPadding( undefined ) }
 			>
 				<BoxControl
-					__next40pxDefaultSize
 					label={ __( 'Padding' ) }
 					onChange={ setPadding }
 					values={ padding }
@@ -139,7 +138,6 @@ export function DimensionPanel() {
 				onDeselect={ () => setMargin( undefined ) }
 			>
 				<BoxControl
-					__next40pxDefaultSize
 					label={ __( 'Margin' ) }
 					onChange={ setMargin }
 					values={ margin }

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/tree-grid/test/index.tsx

@@ -24,29 +24,6 @@ const TestButton = forwardRef(
 );
 
 describe( 'TreeGrid', () => {
-	const originalGetClientRects = window.Element.prototype.getClientRects;
-
-	// `getClientRects` needs to be mocked so that `isVisible` from the `@wordpress/dom`
-	// `focusable` module can pass, in a JSDOM env where the DOM elements have no width/height.
-	const mockedGetClientRects = jest.fn( () => [
-		{
-			x: 0,
-			y: 0,
-			width: 100,
-			height: 100,
-		},
-	] );
-
-	beforeAll( () => {
-		// @ts-expect-error - This is just a mock
-		window.Element.prototype.getClientRects =
-			jest.fn( mockedGetClientRects );
-	} );
-
-	afterAll( () => {
-		window.Element.prototype.getClientRects = originalGetClientRects;
-	} );
-
 	describe( 'simple rendering', () => {
 		it( 'renders a table, tbody and any child elements', () => {
 			const { container } = render(

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',

package/src/utils/dropdown-motion.ts

@@ -1,6 +1,6 @@
 // Motion configuration for dropdown-like popovers.
 // Keep constants in sync with: packages/ui/src/utils/css/dropdown-motion.module.css
-// Values should stay in sync with --wpds-motion-* design tokens.
+// Values should stay in sync with the WPDS motion design tokens.
 
 export const DROPDOWN_MOTION = Object.freeze( {
 	SLIDE_DISTANCE: 4,
@@ -25,9 +25,11 @@ const convertEasingToString = ( easing: {
 	return easing.function;
 };
 
-// Note: --wpds-* tokens can't be used here directly because the build-time
-// fallback injection is not compatible with Emotion. This file is consumed
-// by Menu's Emotion styles.
+// Note: WPDS design tokens can't be referenced here directly. The build-time
+// fallback injection is incompatible with Emotion, and even mentioning a token's
+// full CSS custom property name in this file makes the esbuild fallback plugin
+// claim it and break the Emotion transform. This file is consumed by Menu's
+// Emotion styles.
 export const DROPDOWN_MOTION_CSS = Object.freeze( {
 	SLIDE_DISTANCE: `${ DROPDOWN_MOTION.SLIDE_DISTANCE }px`,
 	SLIDE_DURATION: `${ DROPDOWN_MOTION.SLIDE_DURATION }ms`,