@wordpress/components 22.0.0 → 23.0.0

package/src/tooltip/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, act } from '@testing-library/react';
+import { render, screen, act, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -13,6 +13,10 @@ import Tooltip from '../';
  */
 import { TOOLTIP_DELAY } from '../index.js';
 
+function getWrappingPopoverElement( element ) {
+	return element.closest( '.components-popover' );
+}
+
 describe( 'Tooltip', () => {
 	describe( '#render()', () => {
 		it( 'should not render the tooltip if multiple children are passed', () => {
@@ -24,7 +28,7 @@ describe( 'Tooltip', () => {
 			);
 
 			const button = screen.getByText( 'Button 1' );
-			button.focus();
+			act( () => button.focus() );
 			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
 		} );
 
@@ -37,11 +41,11 @@ describe( 'Tooltip', () => {
 
 			expect(
 				screen.getByRole( 'button', { name: 'Hover Me!' } )
-			).toBeInTheDocument();
+			).toBeVisible();
 			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
 		} );
 
-		it( 'should render children with additional tooltip when focused', () => {
+		it( 'should render children with additional tooltip when focused', async () => {
 			const mockOnFocus = jest.fn();
 
 			render(
@@ -51,20 +55,28 @@ describe( 'Tooltip', () => {
 			);
 
 			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
-			expect( button ).toBeInTheDocument();
+			expect( button ).toBeVisible();
 
 			// Before focus, the tooltip is not shown.
 			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
 
-			button.focus();
+			act( () => button.focus() );
 
 			// Tooltip is shown after focusing the anchor.
-			expect( screen.getByText( 'Help text' ) ).toBeInTheDocument();
+			const tooltip = screen.getByText( 'Help text' );
+			expect( tooltip ).toBeVisible();
 			expect( mockOnFocus ).toHaveBeenCalledWith(
 				expect.objectContaining( {
 					type: 'focus',
 				} )
 			);
+
+			// Wait for the tooltip element to be positioned (aligned with the button)
+			await waitFor( () =>
+				expect(
+					getWrappingPopoverElement( tooltip )
+				).toBePositionedPopover()
+			);
 		} );
 
 		it( 'should render children with additional tooltip when hovered', async () => {
@@ -79,7 +91,7 @@ describe( 'Tooltip', () => {
 			);
 
 			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
-			expect( button ).toBeInTheDocument();
+			expect( button ).toBeVisible();
 
 			await user.hover( button );
 
@@ -89,7 +101,15 @@ describe( 'Tooltip', () => {
 			act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
 
 			// Tooltip shows after the delay
-			expect( screen.getByText( 'Help text' ) ).toBeInTheDocument();
+			const tooltip = screen.getByText( 'Help text' );
+			expect( tooltip ).toBeVisible();
+
+			// Wait for the tooltip element to be positioned (aligned with the button)
+			await waitFor( () =>
+				expect(
+					getWrappingPopoverElement( tooltip )
+				).toBePositionedPopover()
+			);
 		} );
 
 		it( 'should not show tooltip on focus as result of mouse click', async () => {
@@ -105,7 +125,7 @@ describe( 'Tooltip', () => {
 			);
 
 			const button = screen.getByRole( 'button', { text: 'Hover Me!' } );
-			expect( button ).toBeInTheDocument();
+			expect( button ).toBeVisible();
 
 			await user.click( button );
 
@@ -144,7 +164,7 @@ describe( 'Tooltip', () => {
 			);
 
 			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
-			expect( button ).toBeInTheDocument();
+			expect( button ).toBeVisible();
 
 			await user.hover( button );
 
@@ -161,9 +181,17 @@ describe( 'Tooltip', () => {
 			act( () => jest.advanceTimersByTime( TEST_DELAY - TOOLTIP_DELAY ) );
 
 			// Tooltip shows after TEST_DELAY time
-			expect( screen.getByText( 'Help text' ) ).toBeInTheDocument();
+			const tooltip = screen.getByText( 'Help text' );
+			expect( tooltip ).toBeVisible();
 
 			expect( mockOnFocus ).not.toHaveBeenCalled();
+
+			// Wait for the tooltip element to be positioned (aligned with the button)
+			await waitFor( () =>
+				expect(
+					getWrappingPopoverElement( tooltip )
+				).toBePositionedPopover()
+			);
 		} );
 
 		it( 'should show tooltip when an element is disabled', async () => {
@@ -178,12 +206,13 @@ describe( 'Tooltip', () => {
 			);
 
 			const button = screen.getByRole( 'button', { name: 'Click me' } );
-			expect( button ).toBeInTheDocument();
+			expect( button ).toBeVisible();
 			expect( button ).toBeDisabled();
 
 			// Note: this is testing for implementation details,
 			// but couldn't find a better way.
 			const buttonRect = button.getBoundingClientRect();
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
 			const eventCatcher = container.querySelector( '.event-catcher' );
 			const eventCatcherRect = eventCatcher.getBoundingClientRect();
 			expect( buttonRect ).toEqual( eventCatcherRect );
@@ -198,9 +227,15 @@ describe( 'Tooltip', () => {
 			act( () => jest.advanceTimersByTime( TOOLTIP_DELAY ) );
 
 			// Tooltip shows after the delay
-			expect(
-				screen.getByText( 'Show helpful text here' )
-			).toBeInTheDocument();
+			const tooltip = screen.getByText( 'Show helpful text here' );
+			expect( tooltip ).toBeVisible();
+
+			// Wait for the tooltip element to be positioned (aligned with the button)
+			await waitFor( () =>
+				expect(
+					getWrappingPopoverElement( tooltip )
+				).toBePositionedPopover()
+			);
 		} );
 
 		it( 'should not emit events back to children when they are disabled', async () => {
@@ -217,8 +252,8 @@ describe( 'Tooltip', () => {
 				</Tooltip>
 			);
 
-			const eventCatcher =
-				container.getElementsByClassName( 'event-catcher' )[ 0 ];
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+			const eventCatcher = container.querySelector( '.event-catcher' );
 			await user.click( eventCatcher );
 			expect( onClickMock ).not.toHaveBeenCalled();
 		} );
@@ -276,5 +311,61 @@ describe( 'Tooltip', () => {
 			// Tooltip won't show, since the mouse has left the anchor
 			expect( screen.queryByText( 'Help text' ) ).not.toBeInTheDocument();
 		} );
+
+		it( 'should render the shortcut display text when a string is passed as the shortcut', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			render(
+				<Tooltip text="Help text" shortcut="shortcut text">
+					<button>Hover Me!</button>
+				</Tooltip>
+			);
+
+			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
+			await user.hover( button );
+
+			const tooltip = await screen.findByText( 'shortcut text' );
+			expect( tooltip ).toBeVisible();
+
+			// Wait for the tooltip element to be positioned (aligned with the button)
+			await waitFor( () =>
+				expect(
+					getWrappingPopoverElement( tooltip )
+				).toBePositionedPopover()
+			);
+		} );
+
+		it( 'should render the shortcut display text and aria-label when an object is passed as the shortcut with the correct properties', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
+			render(
+				<Tooltip
+					text="Help text"
+					shortcut={ {
+						display: 'shortcut text',
+						ariaLabel: 'shortcut label',
+					} }
+				>
+					<button>Hover Me!</button>
+				</Tooltip>
+			);
+
+			const button = screen.getByRole( 'button', { name: 'Hover Me!' } );
+			await user.hover( button );
+
+			const tooltip = await screen.findByLabelText( 'shortcut label' );
+			expect( tooltip ).toHaveTextContent( 'shortcut text' );
+
+			// Wait for the tooltip element to be positioned (aligned with the button)
+			await waitFor( () =>
+				expect(
+					getWrappingPopoverElement( tooltip )
+				).toBePositionedPopover()
+			);
+		} );
 	} );
 } );

package/src/tree-grid/test/index.js

@@ -97,7 +97,7 @@ describe( 'TreeGrid', () => {
 			);
 
 			screen.getByText( 'Row 1' ).focus();
-			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
+			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
 
 			fireEvent.keyDown( screen.getByText( 'Row 1' ), {
 				key: 'ArrowRight',
@@ -149,7 +149,7 @@ describe( 'TreeGrid', () => {
 			);
 
 			screen.getByText( 'Row 1' ).focus();
-			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
+			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
 
 			fireEvent.keyDown( screen.getByText( 'Row 1' ), {
 				key: 'ArrowLeft',
@@ -188,8 +188,8 @@ describe( 'TreeGrid', () => {
 
 			screen.getByText( 'Row 2' ).focus();
 
-			const row2Element = screen.getByText( 'Row 2' ).closest( 'tr' );
-			const row3Element = screen.getByText( 'Row 3' ).closest( 'tr' );
+			const row2Element = screen.getByRole( 'row', { name: 'Row 2' } );
+			const row3Element = screen.getByRole( 'row', { name: 'Row 3' } );
 
 			fireEvent.keyDown( screen.getByText( 'Row 2' ), {
 				key: 'ArrowDown',
@@ -210,8 +210,8 @@ describe( 'TreeGrid', () => {
 
 			screen.getByText( 'Row 1' ).focus();
 
-			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
-			const row3Element = screen.getByText( 'Row 3' ).closest( 'tr' );
+			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
+			const row3Element = screen.getByRole( 'row', { name: 'Row 3' } );
 
 			fireEvent.keyDown( screen.getByText( 'Row 1' ), {
 				key: 'End',
@@ -232,8 +232,8 @@ describe( 'TreeGrid', () => {
 
 			screen.getByText( 'Row 2' ).focus();
 
-			const row2Element = screen.getByText( 'Row 2' ).closest( 'tr' );
-			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
+			const row2Element = screen.getByRole( 'row', { name: 'Row 2' } );
+			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
 
 			fireEvent.keyDown( screen.getByText( 'Row 2' ), {
 				key: 'ArrowUp',
@@ -254,8 +254,8 @@ describe( 'TreeGrid', () => {
 
 			screen.getByText( 'Row 3' ).focus();
 
-			const row3Element = screen.getByText( 'Row 3' ).closest( 'tr' );
-			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
+			const row3Element = screen.getByRole( 'row', { name: 'Row 3' } );
+			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
 
 			fireEvent.keyDown( screen.getByText( 'Row 3' ), {
 				key: 'Home',
@@ -276,8 +276,8 @@ describe( 'TreeGrid', () => {
 
 			screen.getByText( 'Row 2' ).focus();
 
-			const row2Element = screen.getByText( 'Row 2' ).closest( 'tr' );
-			const row1Element = screen.getByText( 'Row 1' ).closest( 'tr' );
+			const row2Element = screen.getByRole( 'row', { name: 'Row 2' } );
+			const row1Element = screen.getByRole( 'row', { name: 'Row 1' } );
 
 			fireEvent.keyDown( screen.getByText( 'Row 2' ), {
 				key: 'ArrowUp',

package/src/truncate/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -10,34 +10,34 @@ import { Truncate } from '..';
 
 describe( 'props', () => {
 	test( 'should render correctly', () => {
-		const { container } = render( <Truncate>Lorem ipsum.</Truncate> );
-		expect( container.firstChild ).toHaveTextContent( 'Lorem ipsum.' );
+		render( <Truncate>Lorem ipsum.</Truncate> );
+		expect( screen.getByText( 'Lorem ipsum.' ) ).toBeVisible();
 	} );
 
 	test( 'should render limit', () => {
-		const { container } = render(
+		render(
 			<Truncate limit={ 1 } ellipsizeMode="tail">
 				Lorem ipsum.
 			</Truncate>
 		);
-		expect( container.firstChild ).toHaveTextContent( 'L…' );
+		expect( screen.getByText( 'L…' ) ).toBeVisible();
 	} );
 
 	test( 'should render custom ellipsis', () => {
-		const { container } = render(
+		render(
 			<Truncate ellipsis="!!!" limit={ 5 } ellipsizeMode="tail">
 				Lorem ipsum.
 			</Truncate>
 		);
-		expect( container.firstChild ).toHaveTextContent( 'Lorem!!!' );
+		expect( screen.getByText( 'Lorem!!!' ) ).toBeVisible();
 	} );
 
 	test( 'should render custom ellipsizeMode', () => {
-		const { container } = render(
+		render(
 			<Truncate ellipsis="!!!" ellipsizeMode="middle" limit={ 5 }>
 				Lorem ipsum.
 			</Truncate>
 		);
-		expect( container.firstChild ).toHaveTextContent( 'Lo!!!m.' );
+		expect( screen.getByText( 'Lo!!!m.' ) ).toBeVisible();
 	} );
 } );

package/src/ui/context/context-system-provider.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { isEqual, merge } from 'lodash';
+import fastDeepEqual from 'fast-deep-equal/es6';
+import { merge } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -42,7 +43,7 @@ function useContextSystemBridge( { value } ) {
 	useUpdateEffect( () => {
 		if (
 			// Objects are equivalent.
-			isEqual( valueRef.current, value ) &&
+			fastDeepEqual( valueRef.current, value ) &&
 			// But not the same reference.
 			valueRef.current !== value
 		) {

package/src/ui/context/test/context-system-provider.js

@@ -61,7 +61,7 @@ describe( 'props', () => {
 		);
 
 		expect( container ).toMatchSnapshot();
-		expect( container.firstChild.innerHTML ).toContain( 'Code is Poetry' );
+		expect( screen.getByText( 'Code is Poetry' ) ).toBeVisible();
 	} );
 
 	test( 'should render _override props', () => {
@@ -100,10 +100,11 @@ describe( 'props', () => {
 
 		expect( container ).toMatchSnapshot();
 
-		const el = container.querySelector( '.test-component' );
+		const element = screen.getByText( 'Code is Poetry' );
+		expect( element ).toBeVisible();
+		expect( element ).toHaveClass( 'test-component' );
 
-		expect( el.innerHTML ).toContain( 'Code is Poetry' );
-		expect( el.innerHTML ).not.toContain( 'WordPress.org' );
+		expect( screen.queryByText( 'WordPress.org' ) ).not.toBeInTheDocument();
 	} );
 } );
 

package/src/ui/control-label/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -16,11 +16,9 @@ describe( 'props', () => {
 	} );
 
 	test( 'should render htmlFor', () => {
-		const { container } = render(
-			<ControlLabel htmlFor="Field">Label</ControlLabel>
-		);
+		render( <ControlLabel htmlFor="Field">Label</ControlLabel> );
 
-		expect( container.firstChild ).toHaveAttribute( 'for', 'Field' );
+		expect( screen.getByText( 'Label' ) ).toHaveAttribute( 'for', 'Field' );
 	} );
 
 	test( 'should render size', () => {

package/src/ui/form-group/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -20,44 +20,43 @@ const TextInput = ( { id: idProp, ...props } ) => {
 /* eslint-disable no-restricted-syntax */
 describe( 'props', () => {
 	test( 'should render correctly', () => {
-		const { container } = render(
+		render(
 			<FormGroup id="fname" label="First name">
 				<TextInput />
 			</FormGroup>
 		);
 
-		const label = container.querySelector( 'label' );
-		expect( label ).toHaveAttribute( 'for', 'fname' );
-		expect( label ).toContainHTML( 'First name' );
-
-		const input = container.querySelector( 'input' );
-		expect( input ).toHaveAttribute( 'id', 'fname' );
+		expect(
+			screen.getByRole( 'textbox', { name: 'First name' } )
+		).toBeVisible();
 	} );
 
 	test( 'should render label without prop correctly', () => {
-		const { container } = render(
+		render(
 			<FormGroup id="fname">
 				<ControlLabel htmlFor="fname">First name</ControlLabel>
 				<TextInput />
 			</FormGroup>
 		);
 
-		const label = container.querySelector( 'label' );
-		expect( label ).toHaveAttribute( 'for', 'fname' );
-		expect( label ).toContainHTML( 'First name' );
+		expect(
+			screen.getByRole( 'textbox', { name: 'First name' } )
+		).toBeVisible();
 	} );
 
 	test( 'should render labelHidden', () => {
-		const { container } = render(
+		render(
 			<FormGroup labelHidden id="fname" label="First name">
 				<TextInput />
 			</FormGroup>
 		);
 
-		const label = container.querySelector( 'label' );
-		expect( label ).toContainHTML( 'First name' );
-		// @todo: Refactor this after adding next VisuallyHidden.
-		expect( label ).toHaveClass( 'components-visually-hidden' );
+		expect(
+			screen.getByRole( 'textbox', { name: 'First name' } )
+		).toBeVisible();
+		expect( screen.getByText( 'First name' ) ).toHaveClass(
+			'components-visually-hidden'
+		);
 	} );
 
 	test( 'should render alignLabel', () => {

package/src/unit-control/README.md

@@ -67,6 +67,12 @@ Callback invoked when either the quantity or unit inputs fire the `blur` event.
 
 -   Required: No
 
+### `onFocus`: `FocusEventHandler< HTMLInputElement | HTMLSelectElement >`
+
+Callback invoked when either the quantity or unit inputs fire the `focus` event.
+
+-   Required: No
+
 ### `onChange`: `UnitControlOnChangeCallback`
 
 Callback when the `value` changes.
@@ -121,7 +127,9 @@ const Example = () => {
 		{ value: 'em', label: 'em', default: 0 },
 	];
 
-	return <UnitControl onChange={ setValue } value={ value } units={units} />;
+	return (
+		<UnitControl onChange={ setValue } value={ value } units={ units } />
+	);
 };
 ```
 

package/src/unit-control/index.tsx

@@ -60,6 +60,7 @@ function UnforwardedUnitControl(
 		units: unitsProp = CSS_UNITS,
 		value: valueProp,
 		onBlur: onBlurProp,
+		onFocus: onFocusProp,
 		...props
 	} = unitControlProps;
 
@@ -244,6 +245,7 @@ function UnforwardedUnitControl(
 			unit={ unit }
 			units={ units }
 			onBlur={ onBlurProp }
+			onFocus={ onFocusProp }
 		/>
 	) : null;
 
@@ -277,6 +279,7 @@ function UnforwardedUnitControl(
 			value={ parsedQuantity ?? '' }
 			step={ step }
 			__unstableStateReducer={ stateReducer }
+			onFocus={ onFocusProp }
 		/>
 	);
 }

package/src/unit-control/test/index.tsx

@@ -115,6 +115,7 @@ describe( 'UnitControl', () => {
 				withoutClassName.querySelector( '.components-unit-control' )
 			).not.toHaveClass( 'hello' );
 			expect(
+				// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
 				withClassName.querySelector( '.components-unit-control' )
 			).toHaveClass( 'hello' );
 		} );

package/src/unit-control/types.ts

@@ -99,4 +99,8 @@ export type UnitControlProps = Omit< UnitSelectControlProps, 'unit' > &
 		 * Callback when either the quantity or the unit inputs lose focus.
 		 */
 		onBlur?: FocusEventHandler< HTMLInputElement | HTMLSelectElement >;
+		/**
+		 * Callback when either the quantity or the unit inputs gains focus.
+		 */
+		onFocus?: FocusEventHandler< HTMLInputElement | HTMLSelectElement >;
 	};

package/src/utils/colors-values.js

@@ -31,15 +31,17 @@ const ALERT = {
 
 // Matches @wordpress/base-styles
 const ADMIN = {
-	theme: 'var( --wp-admin-theme-color, #007cba)',
-	themeDark10: 'var( --wp-admin-theme-color-darker-10, #006ba1)',
+	theme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba))',
+	themeDark10:
+		'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1))',
 };
 
 const UI = {
 	theme: ADMIN.theme,
+	themeDark10: ADMIN.themeDark10,
 	background: white,
 	backgroundDisabled: GRAY[ 100 ],
-	border: GRAY[ 700 ],
+	border: GRAY[ 600 ],
 	borderHover: GRAY[ 700 ],
 	borderFocus: ADMIN.themeDark10,
 	borderDisabled: GRAY[ 400 ],

package/src/utils/config-values.js

@@ -15,9 +15,7 @@ const CONTROL_PROPS = {
 	controlPaddingXSmall: `calc(${ CONTROL_PADDING_X } / 1.3334)`,
 	controlBackgroundColor: COLORS.white,
 	controlBorderRadius: '2px',
-	controlBorderColor: COLORS.gray[ 700 ],
 	controlBoxShadow: 'transparent',
-	controlBorderColorHover: COLORS.gray[ 700 ],
 	controlBoxShadowFocus: `0 0 0 0.5px ${ COLORS.ui.theme }`,
 	controlDestructiveBorderColor: COLORS.alert.red,
 	controlHeight: CONTROL_HEIGHT,

package/src/utils/hooks/stories/use-cx.js

@@ -32,9 +32,9 @@ const Example = ( { serializedStyles, children } ) => {
 const ExampleWithUseMemoWrong = ( { serializedStyles, children } ) => {
 	const cx = useCx();
 	// Wrong: using 'useMemo' without adding 'cx' to the dependency list.
-	// eslint-disable-next-line react-hooks/exhaustive-deps
 	const classes = useMemo(
 		() => cx( serializedStyles ),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ serializedStyles ]
 	);
 	return <span className={ classes }>{ children }</span>;

package/src/utils/hooks/use-controlled-value.ts

@@ -22,7 +22,7 @@ export function useControlledValue< T >( {
 	defaultValue,
 	onChange,
 	value: valueProp,
-}: Props< T > ): [ T | undefined, ( value: T ) => void ] {
+}: Props< T > ) {
 	const hasValue = typeof valueProp !== 'undefined';
 	const initialValue = hasValue ? valueProp : defaultValue;
 	const [ state, setState ] = useState( initialValue );
@@ -40,5 +40,5 @@ export function useControlledValue< T >( {
 		setValue = setState;
 	}
 
-	return [ value, setValue ];
+	return [ value, setValue as typeof setState ] as const;
 }

package/src/utils/input/base.js

@@ -19,10 +19,10 @@ export const inputStyleNeutral = css`
 `;
 
 export const inputStyleFocus = css`
-	border-color: var( --wp-admin-theme-color );
+	border-color: ${ COLORS.ui.theme };
 	box-shadow: 0 0 0
 		calc( ${ CONFIG.borderWidthFocus } - ${ CONFIG.borderWidth } )
-		var( --wp-admin-theme-color );
+		${ COLORS.ui.theme };
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;

package/src/utils/theme-variables.scss

@@ -6,3 +6,23 @@
 $components-color-accent: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
 $components-color-accent-darker-10: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1));
 $components-color-accent-darker-20: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #005a87));
+
+// Used when placing text on the accent color.
+$components-color-accent-inverted: var(--wp-components-color-accent-inverted, $white);
+
+$components-color-background: var(--wp-components-color-background, $white);
+$components-color-foreground: var(--wp-components-color-foreground, $gray-900);
+
+// Used when placing text on the foreground color.
+$components-color-foreground-inverted: var(--wp-components-color-foreground-inverted, $white);
+
+$components-color-gray-100: var(--wp-components-color-gray-100, $gray-100);
+$components-color-gray-200: var(--wp-components-color-gray-200, $gray-200);
+$components-color-gray-300: var(--wp-components-color-gray-300, $gray-300);
+$components-color-gray-400: var(--wp-components-color-gray-400, $gray-400);
+$components-color-gray-600: var(--wp-components-color-gray-600, $gray-600);
+$components-color-gray-700: var(--wp-components-color-gray-700, $gray-700);
+$components-color-gray-800: var(--wp-components-color-gray-800, $gray-800);
+
+// Semantic aliases (prefer these over raw gray values when applicable).
+$components-color-border: #{ $components-color-gray-600 };