@wordpress/components 22.0.0 → 23.0.0

package/src/tab-panel/index.tsx

@@ -7,7 +7,7 @@ import { find } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useCallback } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 
 /**
@@ -77,6 +77,7 @@ export function TabPanel( {
 	className,
 	children,
 	tabs,
+	selectOnMove = true,
 	initialTabName,
 	orientation = 'horizontal',
 	activeClass = 'is-active',
@@ -85,12 +86,20 @@ export function TabPanel( {
 	const instanceId = useInstanceId( TabPanel, 'tab-panel' );
 	const [ selected, setSelected ] = useState< string >();
 
-	const handleTabSelection = ( tabKey: string ) => {
-		setSelected( tabKey );
-		onSelect?.( tabKey );
-	};
+	const handleTabSelection = useCallback(
+		( tabKey: string ) => {
+			setSelected( tabKey );
+			onSelect?.( tabKey );
+		},
+		[ onSelect ]
+	);
 
-	const onNavigate = ( _childIndex: number, child: HTMLButtonElement ) => {
+	// Simulate a click on the newly focused tab, which causes the component
+	// to show the `tab-panel` associated with the clicked tab.
+	const activateTabAutomatically = (
+		_childIndex: number,
+		child: HTMLButtonElement
+	) => {
 		child.click();
 	};
 	const selectedTab = find( tabs, { name: selected } );
@@ -100,14 +109,16 @@ export function TabPanel( {
 		if ( ! selectedTab?.name && tabs.length > 0 ) {
 			handleTabSelection( initialTabName || tabs[ 0 ].name );
 		}
-	}, [ tabs, selectedTab?.name, initialTabName ] );
+	}, [ tabs, selectedTab?.name, initialTabName, handleTabSelection ] );
 
 	return (
 		<div className={ className }>
 			<NavigableMenu
 				role="tablist"
 				orientation={ orientation }
-				onNavigate={ onNavigate }
+				onNavigate={
+					selectOnMove ? activateTabAutomatically : undefined
+				}
 				className="components-tab-panel__tabs"
 			>
 				{ tabs.map( ( tab ) => (
@@ -124,8 +135,11 @@ export function TabPanel( {
 						selected={ tab.name === selected }
 						key={ tab.name }
 						onClick={ () => handleTabSelection( tab.name ) }
+						label={ tab.icon && tab.title }
+						icon={ tab.icon }
+						showTooltip={ !! tab.icon }
 					>
-						{ tab.title }
+						{ ! tab.icon && tab.title }
 					</TabButton>
 				) ) }
 			</NavigableMenu>

package/src/tab-panel/style.scss

@@ -7,58 +7,69 @@
 	}
 }
 
+// This tab style CSS is duplicated verbatim in
+// /packages/edit-post/src/components/sidebar/settings-header/style.scss
 .components-tab-panel__tabs-item {
+	position: relative;
+	border-radius: 0;
+	height: $grid-unit-60;
 	background: transparent;
 	border: none;
 	box-shadow: none;
-	border-radius: 0;
 	cursor: pointer;
-	height: $grid-unit-60;
 	padding: 3px $grid-unit-20; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
 	margin-left: 0;
 	font-weight: 500;
-	transition: box-shadow 0.1s linear;
-	box-sizing: border-box;
-
-	// This pseudo-element "duplicates" the tab label and sets the text to bold.
-	// This ensures that the tab doesn't change width when selected.
-	// See: https://github.com/WordPress/gutenberg/pull/9793
-	&::after {
-		content: attr(data-label);
-		display: block;
-		height: 0;
-		overflow: hidden;
-		speak: none;
-		visibility: hidden;
-	}
 
 	&:focus:not(:disabled) {
-		box-shadow: inset 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		position: relative;
+		box-shadow: none;
 	}
 
+	// Tab indicator
+	&::after {
+		content: "";
+		position: absolute;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		pointer-events: none;
 
-	&.is-active {
-		// The transparent shadow ensures no jumpiness when focus animates on an active tab.
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent, inset 0 0 -$border-width-tab 0 0 var(--wp-admin-theme-color);
-		position: relative;
+		// Draw the indicator.
+		background: $components-color-accent;
+		height: calc(0 * var(--wp-admin-border-width-focus));
+		border-radius: 0;
 
-		// This border appears in Windows High Contrast mode instead of the box-shadow.
-		&::before {
-			content: "";
-			position: absolute;
-			top: 0;
-			bottom: 1px;
-			right: 0;
-			left: 0;
-			border-bottom: $border-width-tab solid transparent;
-		}
+		// Animation
+		transition: all 0.1s linear;
+		@include reduce-motion("transition");
 	}
 
-	&:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	// Active.
+	&.is-active::after {
+		height: calc(1 * var(--wp-admin-border-width-focus));
+	}
+
+	// Focus.
+	&::before {
+		content: "";
+		position: absolute;
+		top: $grid-unit-15;
+		right: $grid-unit-15;
+		bottom: $grid-unit-15;
+		left: $grid-unit-15;
+		pointer-events: none;
+
+		// Draw the indicator.
+		box-shadow: 0 0 0 0 transparent;
+		border-radius: $radius-block-ui;
+
+		// Animation
+		transition: all 0.1s linear;
+		@include reduce-motion("transition");
 	}
 
-	&.is-active:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -#{$border-width-tab * 2} 0 0 var(--wp-admin-theme-color);
+	&:focus-visible::before {
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 	}
 }

package/src/tab-panel/test/index.tsx

@@ -34,7 +34,24 @@ const TABS = [
 
 const getSelectedTab = () => screen.getByRole( 'tab', { selected: true } );
 
+let originalGetClientRects: () => DOMRectList;
+
 describe( 'TabPanel', () => {
+	beforeAll( () => {
+		originalGetClientRects = window.HTMLElement.prototype.getClientRects;
+		// Mocking `getClientRects()` is necessary to pass a check performed by
+		// the `focus.tabbable.find()` and by the `focus.focusable.find()` functions
+		// from the `@wordpress/dom` package.
+		// @ts-expect-error We're not trying to comply to the DOM spec, only mocking
+		window.HTMLElement.prototype.getClientRects = function () {
+			return [ 'trick-jsdom-into-having-size-for-element-rect' ];
+		};
+	} );
+
+	afterAll( () => {
+		window.HTMLElement.prototype.getClientRects = originalGetClientRects;
+	} );
+
 	it( 'should render a tabpanel, and clicking should change tabs', async () => {
 		const user = setupUser();
 		const panelRenderFunction = jest.fn();
@@ -194,4 +211,98 @@ describe( 'TabPanel', () => {
 			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
 		} );
 	} );
+
+	describe( 'tab activation', () => {
+		it( 'defaults to automatic tab activation', async () => {
+			const user = setupUser();
+			const mockOnSelect = jest.fn();
+
+			render(
+				<TabPanel
+					tabs={ TABS }
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+				/>
+			);
+
+			// onSelect gets called on the initial render.
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+
+			// Click on Alpha, make sure Alpha is selected
+			await user.click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+
+			// Navigate forward with arrow keys,
+			// make sure Beta is selected automatically.
+			await user.keyboard( '[ArrowRight]' );
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 3 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
+
+			// Navigate forward with arrow keys,
+			// make sure Gamma (last tab) is selected automatically.
+			await user.keyboard( '[ArrowRight]' );
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 4 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'gamma' );
+
+			// Navigate forward with arrow keys,
+			// make sure Alpha (first tab) is selected automatically.
+			await user.keyboard( '[ArrowRight]' );
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 5 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+
+			// Navigate backwards with arrow keys,
+			// make sure Gamma (last tab) is selected automatically
+			await user.keyboard( '[ArrowLeft]' );
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 6 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'gamma' );
+		} );
+
+		it( 'switches to manual tab activation when the `selectOnMove` prop is set to `false`', async () => {
+			const user = setupUser();
+			const mockOnSelect = jest.fn();
+
+			render(
+				<TabPanel
+					tabs={ TABS }
+					children={ () => undefined }
+					onSelect={ mockOnSelect }
+					selectOnMove={ false }
+				/>
+			);
+
+			// onSelect gets called on the initial render.
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 1 );
+
+			// Click on Alpha, make sure Alpha is selected
+			await user.click( screen.getByRole( 'tab', { name: 'Alpha' } ) );
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'alpha' );
+
+			// Navigate forward with arrow keys.
+			// Make sure Beta is focused, but that the tab selection happens only when
+			// pressing the spacebar or the enter key.
+			await user.keyboard( '[ArrowRight]' );
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 2 );
+			expect( screen.getByRole( 'tab', { name: 'Beta' } ) ).toHaveFocus();
+			await user.keyboard( '[Enter]' );
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 3 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
+
+			// Navigate forward with arrow keys.
+			// Make sure Gamma (last tab) is focused, but that the tab selection
+			// happens only when pressing the spacebar or the enter key.
+			await user.keyboard( '[ArrowRight]' );
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 3 );
+			expect(
+				screen.getByRole( 'tab', { name: 'Gamma' } )
+			).toHaveFocus();
+			await user.keyboard( '[Space]' );
+			expect( mockOnSelect ).toHaveBeenCalledTimes( 4 );
+			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'gamma' );
+
+			// No need to test the "wrap-around" behavior, as it's being tested in the
+			// "automatic tab activation" test above.
+		} );
+	} );
 } );

package/src/tab-panel/types.ts

@@ -3,6 +3,11 @@
  */
 import type { ReactNode } from 'react';
 
+/**
+ * Internal dependencies
+ */
+import type { IconType } from '../icon';
+
 type Tab = {
 	/**
 	 * The key of the tab.
@@ -18,11 +23,14 @@ type Tab = {
 	className?: string;
 } & Record< any, any >;
 
-export type TabButtonProps = {
+export type TabButtonProps< IconProps = unknown > = {
 	children: ReactNode;
 	className?: string;
+	icon?: IconType< IconProps >;
+	label?: string;
 	onClick: ( event: MouseEvent ) => void;
 	selected: boolean;
+	showTooltip?: boolean;
 	tabId: string;
 };
 
@@ -62,4 +70,15 @@ export type TabPanelProps = {
 	 * Array of tab objects. Each tab object should contain at least a `name` and a `title`.
 	 */
 	tabs: Tab[];
+	/**
+	 * When `true`, the tab will be selected when receiving focus (automatic tab
+	 * activation). When `false`, the tab will be selected only when clicked
+	 * (manual tab activation). See the official W3C docs for more info.
+	 * .
+	 *
+	 * @default true
+	 *
+	 * @see https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
+	 */
+	selectOnMove?: boolean;
 };

package/src/text/test/__snapshots__/index.tsx.snap

@@ -36,6 +36,7 @@ exports[`Text should render highlighted words with highlightCaseSensitive 1`] =
     class="components-truncate components-text emotion-0 emotion-1"
     data-wp-c16t="true"
     data-wp-component="Text"
+    role="heading"
   >
     <span
       class=""

package/src/text/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -19,133 +19,185 @@ describe( 'Text', () => {
 	} );
 
 	test( 'should render optimizeReadabilityFor', () => {
-		const { container } = render(
-			<Text optimizeReadabilityFor="blue">Lorem ipsum.</Text>
+		render(
+			<Text role="heading" optimizeReadabilityFor="blue">
+				Lorem ipsum.
+			</Text>
 		);
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByRole( 'heading' ) ).toHaveStyle( {
 			color: COLORS.white,
 		} );
 	} );
 
 	test( 'should render truncate', () => {
-		const { container } = render( <Text truncate>Lorem ipsum.</Text> );
-		expect( container.firstChild ).toHaveStyle( {
+		render(
+			<Text role="heading" truncate>
+				Lorem ipsum.
+			</Text>
+		);
+		expect( screen.getByRole( 'heading' ) ).toHaveStyle( {
 			textOverflow: 'ellipsis',
 		} );
 	} );
 
 	test( 'should render size', () => {
-		const { container } = render( <Text size="title">Lorem ipsum.</Text> );
-		expect( container.firstChild ).toHaveStyle( {
+		render(
+			<Text role="heading" size="title">
+				Lorem ipsum.
+			</Text>
+		);
+		expect( screen.getByRole( 'heading' ) ).toHaveStyle( {
 			fontSize: getFontSize( 'title' ),
 		} );
 	} );
 
 	test( 'should render custom size', () => {
-		const { container } = render( <Text size={ 15 }>Lorem ipsum.</Text> );
-		expect( container.firstChild ).toHaveStyle( {
+		render(
+			<Text role="heading" size={ 15 }>
+				Lorem ipsum.
+			</Text>
+		);
+		expect( screen.getByRole( 'heading' ) ).toHaveStyle( {
 			fontSize: getFontSize( 15 ),
 		} );
 	} );
 
 	test( 'should render variant', () => {
-		const { container } = render(
-			<Text variant="muted">Lorem ipsum.</Text>
+		render(
+			<Text role="heading" variant="muted">
+				Lorem ipsum.
+			</Text>
 		);
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByRole( 'heading' ) ).toHaveStyle( {
 			color: COLORS.gray[ 700 ],
 		} );
 	} );
 
 	test( 'should render as another element', () => {
-		const { container } = render( <Text as="div">Lorem ipsum.</Text> );
-		expect( container.firstChild?.nodeName ).toBe( 'DIV' );
+		render(
+			<Text role="heading" as="div">
+				Lorem ipsum.
+			</Text>
+		);
+		expect( screen.getByRole( 'heading' )?.nodeName ).toBe( 'DIV' );
 	} );
 
 	test( 'should render align', () => {
-		const { container: centerAlignedContainer } = render(
-			<Text align="center">Lorem ipsum.</Text>
-		);
-		const { container: defaultAlignedContainer } = render(
-			<Text>Lorem ipsum.</Text>
+		render(
+			<>
+				<Text role="heading" align="center">
+					Lorem ipsum.
+				</Text>
+				<Text role="note">Lorem ipsum.</Text>
+			</>
 		);
 
-		expect(
-			defaultAlignedContainer.children[ 0 ]
-		).toMatchStyleDiffSnapshot( centerAlignedContainer.children[ 0 ] );
+		expect( screen.getByRole( 'note' ) ).toMatchStyleDiffSnapshot(
+			screen.getByRole( 'heading' )
+		);
 	} );
 
 	test( 'should render color', () => {
-		const { container } = render(
-			<Text color="orange">Lorem ipsum.</Text>
+		render(
+			<Text role="heading" color="orange">
+				Lorem ipsum.
+			</Text>
 		);
-		expect( container.firstChild ).toHaveStyle( { color: 'orange' } );
+		expect( screen.getByRole( 'heading' ) ).toHaveStyle( {
+			color: 'orange',
+		} );
 	} );
 
 	test( 'should render display', () => {
-		const { container } = render(
-			<Text display="inline-flex">Lorem ipsum.</Text>
+		render(
+			<Text role="heading" display="inline-flex">
+				Lorem ipsum.
+			</Text>
 		);
-		expect( container.firstChild ).toHaveStyle( {
+		expect( screen.getByRole( 'heading' ) ).toHaveStyle( {
 			display: 'inline-flex',
 		} );
 	} );
 
 	test( 'should render highlighted words', async () => {
-		const wrapper = render(
-			<Text highlightWords={ [ 'm' ] }>Lorem ipsum.</Text>
+		render(
+			<Text role="heading" highlightWords={ [ 'm' ] }>
+				Lorem ipsum.
+			</Text>
 		);
-		expect( wrapper.container.firstChild?.childNodes ).toHaveLength( 5 );
-		const words = await wrapper.findAllByText( 'm' );
+		expect( screen.getByRole( 'heading' )?.childNodes ).toHaveLength( 5 );
+		const words = await screen.findAllByText( 'm' );
 		expect( words ).toHaveLength( 2 );
 		words.forEach( ( word ) => expect( word.tagName ).toEqual( 'MARK' ) );
 	} );
 
 	test( 'should render highlighted words with undefined passed', () => {
-		const { container } = render(
-			<Text highlightWords={ undefined }>Lorem ipsum.</Text>
+		render(
+			<Text role="heading" highlightWords={ undefined }>
+				Lorem ipsum.
+			</Text>
 		);
 		// It'll have a length of 1 because there shouldn't be anything but the single span being rendered.
-		expect( container.firstChild?.childNodes ).toHaveLength( 1 );
+		expect( screen.getByRole( 'heading' )?.childNodes ).toHaveLength( 1 );
 	} );
 
 	test( 'should render highlighted words with highlightCaseSensitive', () => {
 		const { container } = render(
-			<Text highlightCaseSensitive highlightWords={ [ 'IPSUM' ] }>
+			<Text
+				role="heading"
+				highlightCaseSensitive
+				highlightWords={ [ 'IPSUM' ] }
+			>
 				Lorem ipsum.
 			</Text>
 		);
 
 		expect( container ).toMatchSnapshot();
 		// It'll have a length of 1 because there shouldn't be anything but the single span being rendered.
-		expect( container.firstChild?.childNodes ).toHaveLength( 1 );
+		expect( screen.getByRole( 'heading' )?.childNodes ).toHaveLength( 1 );
 	} );
 
 	test( 'should render isBlock', () => {
-		const { container } = render( <Text isBlock>Lorem ipsum.</Text> );
-		expect( container.firstChild ).toHaveStyle( {
+		render(
+			<Text role="heading" isBlock>
+				Lorem ipsum.
+			</Text>
+		);
+		expect( screen.getByRole( 'heading' ) ).toHaveStyle( {
 			display: 'block',
 		} );
 	} );
 
 	test( 'should render lineHeight', () => {
-		const { container } = render(
-			<Text lineHeight={ 1.5 }>Lorem ipsum.</Text>
+		render(
+			<Text role="heading" lineHeight={ 1.5 }>
+				Lorem ipsum.
+			</Text>
 		);
-		expect( container.firstChild ).toHaveStyle( { lineHeight: '1.5' } );
+		expect( screen.getByRole( 'heading' ) ).toHaveStyle( {
+			lineHeight: '1.5',
+		} );
 	} );
 
 	test( 'should render upperCase', () => {
-		const { container } = render( <Text upperCase>Lorem ipsum.</Text> );
-		expect( container.firstChild ).toHaveStyle( {
+		render(
+			<Text role="heading" upperCase>
+				Lorem ipsum.
+			</Text>
+		);
+		expect( screen.getByRole( 'heading' ) ).toHaveStyle( {
 			textTransform: 'uppercase',
 		} );
 	} );
 
 	test( 'should render weight', () => {
-		const { container } = render(
-			<Text weight={ 700 }>Lorem ipsum.</Text>
+		render(
+			<Text role="heading" weight={ 700 }>
+				Lorem ipsum.
+			</Text>
 		);
-		expect( container.firstChild ).toHaveStyle( { fontWeight: '700' } );
+		expect( screen.getByRole( 'heading' ) ).toHaveStyle( {
+			fontWeight: '700',
+		} );
 	} );
 } );

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

@@ -19,7 +19,6 @@ const meta: ComponentMeta< typeof TextControl > = {
 	argTypes: {
 		help: { control: { type: 'text' } },
 		label: { control: { type: 'text' } },
-		type: { control: { type: 'text' } },
 		onChange: { action: 'onChange' },
 		value: { control: { type: null } },
 	},

package/src/text-control/types.ts

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import type { HTMLInputTypeAttribute } from 'react';
-
 /**
  * Internal dependencies
  */
@@ -29,5 +24,5 @@ export type TextControlProps = Pick<
 	 *
 	 * @default 'text'
 	 */
-	type?: HTMLInputTypeAttribute;
+	type?: 'email' | 'number' | 'password' | 'tel' | 'text' | 'search' | 'url';
 };

package/src/theme/README.md

@@ -17,7 +17,7 @@ const Example = () => {
 	return (
 		<Theme accent="red">
 			<Button variant="primary">I'm red</Button>
-			<Theme accent="blue">
+			<Theme accent="blue" background="black">
 				<Button variant="primary">I'm blue</Button>
 			</Theme>
 		</Theme>
@@ -29,6 +29,36 @@ const Example = () => {
 
 ### `accent`: `string`
 
-Used to set the accent color (used by components as the primary color). If an accent color is not defined, the default fallback value is the original WP Admin main theme color. No all valid CSS color syntaxes are supported — in particular, keywords (like `'currentcolor'`, `'inherit'`, `'initial'`, `'revert'`, `'unset'`...) and CSS custom properties (e.g. `var(--my-custom-property)`) are _not_ supported values for this property.
+The accent color (used by components as the primary color). If an accent color is not defined, the default fallback value is the original WP Admin main theme color.
+
+Not all valid CSS color syntaxes are supported — in particular, keywords (like `'currentcolor'`, `'inherit'`, `'initial'`, `'revert'`, `'unset'`...) and CSS custom properties (e.g. `var(--my-custom-property)`) are _not_ supported values for this property.
 
 -   Required: No
+
+### `background`: `string`
+
+The background color.  If a component explicitly has a background, it will be this color. Otherwise, this color will simply be used to determine what the foreground colors should be. The actual background color will need to be set on the component's container element. If a background color is not defined, the default fallback value is #fff.
+
+Not all valid CSS color syntaxes are supported — in particular, keywords (like `'currentcolor'`, `'inherit'`, `'initial'`, `'revert'`, `'unset'`...) and CSS custom properties (e.g. `var(--my-custom-property)`) are _not_ supported values for this property.
+
+-   Required: No
+
+## Writing themeable components
+
+If you would like your custom component to be themeable as a child of the `Theme` component, it should use these color variables. (This is a work in progress, and this list of variables may change. We do not recommend using these variables in production at this time.)
+
+-  `--wp-components-color-accent`: The accent color.
+-  `--wp-components-color-accent-darker-10`: A slightly darker version of the accent color.
+-  `--wp-components-color-accent-darker-20`: An even darker version of the accent color.
+-  `--wp-components-color-accent-inverted`: The foreground color when the accent color is the background, for example when placing text on the accent color.
+-  `--wp-components-color-background`: The background color.
+-  `--wp-components-color-foreground`: The foreground color, for example text.
+-  `--wp-components-color-foreground-inverted`: The foreground color when the foreground color is the background, for example when placing text on the foreground color.
+-  Grayscale:
+   -  `--wp-components-color-gray-100`: Used for light gray backgrounds.
+   -  `--wp-components-color-gray-200`: Used sparingly for light borders.
+	 -	`--wp-components-color-gray-300`: Used for most borders.
+	 -	`--wp-components-color-gray-400`
+	 -	`--wp-components-color-gray-600`: Meets 3:1 UI or large text contrast against white.
+	 -	`--wp-components-color-gray-700`: Meets 4.6:1 text contrast against white.
+	 -	`--wp-components-color-gray-800`