@wordpress/components 25.7.0 → 25.8.1

package/src/placeholder/test/index.tsx

@@ -8,6 +8,7 @@ import { render, screen, within } from '@testing-library/react';
  */
 import { useResizeObserver } from '@wordpress/compose';
 import { SVG, Path } from '@wordpress/primitives';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -41,6 +42,9 @@ const Placeholder = (
 
 const getPlaceholder = () => screen.getByTestId( 'placeholder' );
 
+jest.mock( '@wordpress/a11y', () => ( { speak: jest.fn() } ) );
+const mockedSpeak = jest.mocked( speak );
+
 describe( 'Placeholder', () => {
 	beforeEach( () => {
 		// @ts-ignore
@@ -48,10 +52,11 @@ describe( 'Placeholder', () => {
 			<div key="1" />,
 			{ width: 320 },
 		] );
+		mockedSpeak.mockReset();
 	} );
 
 	describe( 'basic rendering', () => {
-		it( 'should by default render label section and fieldset.', () => {
+		it( 'should by default render label section and content section.', () => {
 			render( <Placeholder /> );
 			const placeholder = getPlaceholder();
 
@@ -74,9 +79,12 @@ describe( 'Placeholder', () => {
 			);
 			expect( placeholderInstructions ).not.toBeInTheDocument();
 
-			// Test for empty fieldset.
-			const placeholderFieldset =
-				within( placeholder ).getByRole( 'group' );
+			// Test for empty content. When the content is empty,
+			// the only way to query the div is with `querySelector`
+			// eslint-disable-next-line testing-library/no-node-access
+			const placeholderFieldset = placeholder.querySelector(
+				'.components-placeholder__fieldset'
+			);
 			expect( placeholderFieldset ).toBeInTheDocument();
 			expect( placeholderFieldset ).toBeEmptyDOMElement();
 		} );
@@ -104,27 +112,38 @@ describe( 'Placeholder', () => {
 			expect( placeholderLabel ).toBeInTheDocument();
 		} );
 
-		it( 'should display a fieldset from the children property', () => {
-			const content = 'Fieldset';
+		it( 'should display content from the children property', () => {
+			const content = 'Placeholder content';
 			render( <Placeholder>{ content }</Placeholder> );
-			const placeholderFieldset = screen.getByRole( 'group' );
+			const placeholder = screen.getByText( content );
 
-			expect( placeholderFieldset ).toBeInTheDocument();
-			expect( placeholderFieldset ).toHaveTextContent( content );
+			expect( placeholder ).toBeInTheDocument();
+			expect( placeholder ).toHaveTextContent( content );
 		} );
 
-		it( 'should display a legend if instructions are passed', () => {
+		it( 'should display instructions when provided', () => {
 			const instructions = 'Choose an option.';
 			render(
 				<Placeholder instructions={ instructions }>
-					<div>Fieldset</div>
+					<div>Placeholder content</div>
+				</Placeholder>
+			);
+			const placeholder = getPlaceholder();
+			const instructionsContainer =
+				within( placeholder ).getByText( instructions );
+
+			expect( instructionsContainer ).toBeInTheDocument();
+		} );
+
+		it( 'should announce instructions to screen readers', () => {
+			const instructions = 'Awesome block placeholder instructions.';
+			render(
+				<Placeholder instructions={ instructions }>
+					<div>Placeholder content</div>
 				</Placeholder>
 			);
-			const captionedFieldset = screen.getByRole( 'group', {
-				name: instructions,
-			} );
 
-			expect( captionedFieldset ).toBeInTheDocument();
+			expect( speak ).toHaveBeenCalledWith( instructions );
 		} );
 
 		it( 'should add an additional className to the top container', () => {

package/src/popover/index.tsx

@@ -40,7 +40,6 @@ import {
 import { close } from '@wordpress/icons';
 import deprecated from '@wordpress/deprecated';
 import { Path, SVG } from '@wordpress/primitives';
-import { getScrollContainer } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -52,13 +51,11 @@ import {
 	computePopoverPosition,
 	positionToPlacement,
 	placementToMotionAnimationProps,
-	getReferenceOwnerDocument,
 	getReferenceElement,
 } from './utils';
 import type { WordPressComponentProps } from '../ui/context';
 import type {
 	PopoverProps,
-	AnimatedWrapperProps,
 	PopoverAnchorRefReference,
 	PopoverAnchorRefTopBottom,
 } from './types';
@@ -94,47 +91,6 @@ const ArrowTriangle = () => (
 	</SVG>
 );
 
-const AnimatedWrapper = forwardRef(
-	(
-		{
-			style: receivedInlineStyles,
-			placement,
-			shouldAnimate = false,
-			...props
-		}: HTMLMotionProps< 'div' > & AnimatedWrapperProps,
-		forwardedRef: ForwardedRef< any >
-	) => {
-		const shouldReduceMotion = useReducedMotion();
-
-		const { style: motionInlineStyles, ...otherMotionProps } = useMemo(
-			() => placementToMotionAnimationProps( placement ),
-			[ placement ]
-		);
-
-		const computedAnimationProps: HTMLMotionProps< 'div' > =
-			shouldAnimate && ! shouldReduceMotion
-				? {
-						style: {
-							...motionInlineStyles,
-							...receivedInlineStyles,
-						},
-						...otherMotionProps,
-				  }
-				: {
-						animate: false,
-						style: receivedInlineStyles,
-				  };
-
-		return (
-			<motion.div
-				{ ...computedAnimationProps }
-				{ ...props }
-				ref={ forwardedRef }
-			/>
-		);
-	}
-);
-
 const slotNameContext = createContext< string | undefined >( undefined );
 
 const fallbackContainerClassname = 'components-popover__fallback-container';
@@ -241,9 +197,6 @@ const UnforwardedPopover = (
 
 	const [ fallbackReferenceElement, setFallbackReferenceElement ] =
 		useState< HTMLSpanElement | null >( null );
-	const [ referenceOwnerDocument, setReferenceOwnerDocument ] = useState<
-		Document | undefined
-	>();
 
 	const anchorRefFallback: RefCallback< HTMLSpanElement > = useCallback(
 		( node ) => {
@@ -357,15 +310,6 @@ const UnforwardedPopover = (
 		?.current;
 
 	useLayoutEffect( () => {
-		const resultingReferenceOwnerDoc = getReferenceOwnerDocument( {
-			anchor,
-			anchorRef,
-			anchorRect,
-			getAnchorRect,
-			fallbackReferenceElement,
-			fallbackDocument: document,
-		} );
-
 		const resultingReferenceElement = getReferenceElement( {
 			anchor,
 			anchorRef,
@@ -375,8 +319,6 @@ const UnforwardedPopover = (
 		} );
 
 		refs.setReference( resultingReferenceElement );
-
-		setReferenceOwnerDocument( resultingReferenceOwnerDoc );
 	}, [
 		anchor,
 		anchorRef,
@@ -390,51 +332,61 @@ const UnforwardedPopover = (
 		refs,
 	] );
 
-	// If the reference element is in a different ownerDocument (e.g. iFrame),
-	// we need to manually update the floating's position as the reference's owner
-	// document scrolls.
-	useLayoutEffect( () => {
-		if (
-			! referenceOwnerDocument ||
-			! referenceOwnerDocument.defaultView
-		) {
-			return;
-		}
-
-		const { defaultView } = referenceOwnerDocument;
-		const { frameElement } = defaultView;
-
-		const scrollContainer = frameElement
-			? getScrollContainer( frameElement )
-			: null;
-
-		defaultView.addEventListener( 'resize', update );
-		scrollContainer?.addEventListener( 'scroll', update );
-
-		return () => {
-			defaultView.removeEventListener( 'resize', update );
-			scrollContainer?.removeEventListener( 'scroll', update );
-		};
-	}, [ referenceOwnerDocument, update ] );
-
 	const mergedFloatingRef = useMergeRefs( [
 		refs.setFloating,
 		dialogRef,
 		forwardedRef,
 	] );
 
-	// Disable reason: We care to capture the _bubbled_ events from inputs
-	// within popover as inferring close intent.
+	const style = isExpanded
+		? undefined
+		: {
+				position: strategy,
+				top: 0,
+				left: 0,
+				// `x` and `y` are framer-motion specific props and are shorthands
+				// for `translateX` and `translateY`. Currently it is not possible
+				// to use `translateX` and `translateY` because those values would
+				// be overridden by the return value of the
+				// `placementToMotionAnimationProps` function.
+				x: computePopoverPosition( x ),
+				y: computePopoverPosition( y ),
+		  };
+
+	const shouldReduceMotion = useReducedMotion();
+	const shouldAnimate = animate && ! isExpanded && ! shouldReduceMotion;
+
+	const [ animationFinished, setAnimationFinished ] = useState( false );
+
+	const { style: motionInlineStyles, ...otherMotionProps } = useMemo(
+		() => placementToMotionAnimationProps( computedPlacement ),
+		[ computedPlacement ]
+	);
+
+	const animationProps: HTMLMotionProps< 'div' > = shouldAnimate
+		? {
+				style: {
+					...motionInlineStyles,
+					...style,
+				},
+				onAnimationComplete: () => setAnimationFinished( true ),
+				...otherMotionProps,
+		  }
+		: {
+				animate: false,
+				style,
+		  };
+
+	// When Floating UI has finished positioning and Framer Motion has finished animating
+	// the popover, add the `is-positioned` class to signal that all transitions have finished.
+	const isPositioned =
+		( ! shouldAnimate || animationFinished ) && x !== null && y !== null;
 
 	let content = (
-		// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-		<AnimatedWrapper
-			shouldAnimate={ animate && ! isExpanded }
-			placement={ computedPlacement }
+		<motion.div
 			className={ classnames( 'components-popover', className, {
 				'is-expanded': isExpanded,
-				'is-positioned': x !== null && y !== null,
+				'is-positioned': isPositioned,
 				// Use the 'alternate' classname for 'toolbar' variant for back compat.
 				[ `is-${
 					computedVariant === 'toolbar'
@@ -442,26 +394,11 @@ const UnforwardedPopover = (
 						: computedVariant
 				}` ]: computedVariant,
 			} ) }
+			{ ...animationProps }
 			{ ...contentProps }
 			ref={ mergedFloatingRef }
 			{ ...dialogProps }
 			tabIndex={ -1 }
-			style={
-				isExpanded
-					? undefined
-					: {
-							position: strategy,
-							top: 0,
-							left: 0,
-							// `x` and `y` are framer-motion specific props and are shorthands
-							// for `translateX` and `translateY`. Currently it is not possible
-							// to use `translateX` and `translateY` because those values would
-							// be overridden by the return value of the
-							// `placementToMotionAnimationProps` function in `AnimatedWrapper`
-							x: computePopoverPosition( x ),
-							y: computePopoverPosition( y ),
-					  }
-			}
 		>
 			{ /* Prevents scroll on the document */ }
 			{ isExpanded && <ScrollLock /> }
@@ -501,7 +438,7 @@ const UnforwardedPopover = (
 					<ArrowTriangle />
 				</div>
 			) }
-		</AnimatedWrapper>
+		</motion.div>
 	);
 
 	const shouldRenderWithinSlot = slot.ref && ! inline;

package/src/popover/test/index.tsx

@@ -23,17 +23,17 @@ import { PopoverInsideIframeRenderedInExternalSlot } from './utils';
 
 type PositionToPlacementTuple = [
 	NonNullable< PopoverProps[ 'position' ] >,
-	NonNullable< PopoverProps[ 'placement' ] >
+	NonNullable< PopoverProps[ 'placement' ] >,
 ];
 type PlacementToAnimationOriginTuple = [
 	NonNullable< PopoverProps[ 'placement' ] >,
 	number,
-	number
+	number,
 ];
 type PlacementToInitialTranslationTuple = [
 	NonNullable< PopoverProps[ 'placement' ] >,
 	'translateY' | 'translateX',
-	CSSProperties[ 'translate' ]
+	CSSProperties[ 'translate' ],
 ];
 
 // There's no matching `placement` for 'middle center' positions,

package/src/popover/types.ts

@@ -14,11 +14,6 @@ type DomRectWithOwnerDocument = DOMRect & {
 
 type PopoverPlacement = Placement | 'overlay';
 
-export type AnimatedWrapperProps = {
-	placement: PopoverPlacement;
-	shouldAnimate?: boolean;
-};
-
 export type PopoverAnchorRefReference = MutableRefObject<
 	Element | null | undefined
 >;

package/src/popover/utils.ts

@@ -3,7 +3,7 @@
  */
 // eslint-disable-next-line no-restricted-imports
 import type { MotionProps } from 'framer-motion';
-import type { ReferenceType, VirtualElement } from '@floating-ui/react-dom';
+import type { Placement, ReferenceType } from '@floating-ui/react-dom';
 
 /**
  * Internal dependencies
@@ -16,7 +16,7 @@ import type {
 
 const POSITION_TO_PLACEMENT: Record<
 	NonNullable< PopoverProps[ 'position' ] >,
-	NonNullable< PopoverProps[ 'placement' ] >
+	Placement
 > = {
 	bottom: 'bottom',
 	top: 'top',
@@ -79,8 +79,7 @@ const POSITION_TO_PLACEMENT: Record<
  */
 export const positionToPlacement = (
 	position: NonNullable< PopoverProps[ 'position' ] >
-): NonNullable< PopoverProps[ 'placement' ] > =>
-	POSITION_TO_PLACEMENT[ position ] ?? 'bottom';
+) => POSITION_TO_PLACEMENT[ position ] ?? 'bottom';
 
 /**
  * @typedef AnimationOrigin
@@ -139,58 +138,17 @@ export const placementToMotionAnimationProps = (
 	};
 };
 
-export const getReferenceOwnerDocument = ( {
-	anchor,
-	anchorRef,
-	anchorRect,
-	getAnchorRect,
-	fallbackReferenceElement,
-	fallbackDocument,
-}: Pick<
-	PopoverProps,
-	'anchorRef' | 'anchorRect' | 'getAnchorRect' | 'anchor'
-> & {
-	fallbackReferenceElement: Element | null;
-	fallbackDocument: Document;
-} ): Document => {
-	// In floating-ui's terms:
-	// - "reference" refers to the popover's anchor element.
-	// - "floating" refers the floating popover's element.
-	// A floating element can also be positioned relative to a virtual element,
-	// instead of a real one. A virtual element is represented by an object
-	// with the `getBoundingClientRect()` function (like real elements).
-	// See https://floating-ui.com/docs/virtual-elements for more info.
-	let resultingReferenceOwnerDoc;
-	if ( ( anchor as VirtualElement )?.contextElement ) {
-		resultingReferenceOwnerDoc = ( anchor as VirtualElement ).contextElement
-			?.ownerDocument;
-	} else if ( anchor ) {
-		resultingReferenceOwnerDoc = anchor.ownerDocument;
-	} else if ( ( anchorRef as PopoverAnchorRefTopBottom | undefined )?.top ) {
-		resultingReferenceOwnerDoc = ( anchorRef as PopoverAnchorRefTopBottom )
-			?.top.ownerDocument;
-	} else if ( ( anchorRef as Range | undefined )?.startContainer ) {
-		resultingReferenceOwnerDoc = ( anchorRef as Range ).startContainer
-			.ownerDocument;
-	} else if (
-		( anchorRef as PopoverAnchorRefReference | undefined )?.current
-	) {
-		resultingReferenceOwnerDoc = (
-			( anchorRef as PopoverAnchorRefReference ).current as Element
-		 ).ownerDocument;
-	} else if ( anchorRef as Element | undefined ) {
-		// This one should be deprecated.
-		resultingReferenceOwnerDoc = ( anchorRef as Element ).ownerDocument;
-	} else if ( anchorRect && anchorRect?.ownerDocument ) {
-		resultingReferenceOwnerDoc = anchorRect.ownerDocument;
-	} else if ( getAnchorRect ) {
-		resultingReferenceOwnerDoc = getAnchorRect(
-			fallbackReferenceElement
-		)?.ownerDocument;
-	}
+function isTopBottom(
+	anchorRef: PopoverProps[ 'anchorRef' ]
+): anchorRef is PopoverAnchorRefTopBottom {
+	return !! ( anchorRef as PopoverAnchorRefTopBottom )?.top;
+}
 
-	return resultingReferenceOwnerDoc ?? fallbackDocument;
-};
+function isRef(
+	anchorRef: PopoverProps[ 'anchorRef' ]
+): anchorRef is PopoverAnchorRefReference {
+	return !! ( anchorRef as PopoverAnchorRefReference )?.current;
+}
 
 export const getReferenceElement = ( {
 	anchor,
@@ -208,19 +166,15 @@ export const getReferenceElement = ( {
 
 	if ( anchor ) {
 		referenceElement = anchor;
-	} else if ( ( anchorRef as PopoverAnchorRefTopBottom | undefined )?.top ) {
+	} else if ( isTopBottom( anchorRef ) ) {
 		// Create a virtual element for the ref. The expectation is that
 		// if anchorRef.top is defined, then anchorRef.bottom is defined too.
 		// Seems to be used by the block toolbar, when multiple blocks are selected
 		// (top and bottom blocks are used to calculate the resulting rect).
 		referenceElement = {
 			getBoundingClientRect() {
-				const topRect = (
-					anchorRef as PopoverAnchorRefTopBottom
-				 ).top.getBoundingClientRect();
-				const bottomRect = (
-					anchorRef as PopoverAnchorRefTopBottom
-				 ).bottom.getBoundingClientRect();
+				const topRect = anchorRef.top.getBoundingClientRect();
+				const bottomRect = anchorRef.bottom.getBoundingClientRect();
 				return new window.DOMRect(
 					topRect.x,
 					topRect.y,
@@ -229,12 +183,10 @@ export const getReferenceElement = ( {
 				);
 			},
 		};
-	} else if (
-		( anchorRef as PopoverAnchorRefReference | undefined )?.current
-	) {
+	} else if ( isRef( anchorRef ) ) {
 		// Standard React ref.
-		referenceElement = ( anchorRef as PopoverAnchorRefReference ).current;
-	} else if ( anchorRef as Element | undefined ) {
+		referenceElement = anchorRef.current;
+	} else if ( anchorRef ) {
 		// If `anchorRef` holds directly the element's value (no `current` key)
 		// This is a weird scenario and should be deprecated.
 		referenceElement = anchorRef as Element;

package/src/search-control/README.md

@@ -90,6 +90,13 @@ If true, the label will not be visible, but will be read by screen readers. Defa
 -   Type: `Boolean`
 -   Required: No
 
+#### `size`: `'default'` | `'compact'`
+
+The size of the component.
+
+-   Required: No
+-   Default: `'default'`
+
 ## Related components
 
 -   To offer users more constrained options for input, use TextControl, SelectControl, RadioControl, CheckboxControl, or RangeControl.

package/src/search-control/index.tsx

@@ -23,6 +23,7 @@ import type { ForwardedRef } from 'react';
 function UnforwardedSearchControl(
 	{
 		__nextHasNoMarginBottom,
+		__next40pxDefaultSize = false,
 		className,
 		onChange,
 		onKeyDown,
@@ -32,6 +33,7 @@ function UnforwardedSearchControl(
 		hideLabelFromVision = true,
 		help,
 		onClose,
+		size = 'default',
 		...restProps
 	}: WordPressComponentProps< SearchControlProps, 'input', false >,
 	forwardedRef: ForwardedRef< HTMLInputElement >
@@ -44,9 +46,11 @@ function UnforwardedSearchControl(
 		if ( onClose ) {
 			return (
 				<Button
+					__next40pxDefaultSize={ __next40pxDefaultSize }
 					icon={ closeSmall }
 					label={ __( 'Close search' ) }
 					onClick={ onClose }
+					size={ size }
 				/>
 			);
 		}
@@ -54,12 +58,14 @@ function UnforwardedSearchControl(
 		if ( !! value ) {
 			return (
 				<Button
+					__next40pxDefaultSize={ __next40pxDefaultSize }
 					icon={ closeSmall }
 					label={ __( 'Reset search' ) }
 					onClick={ () => {
 						onChange( '' );
 						searchRef.current?.focus();
 					} }
+					size={ size }
 				/>
 			);
 		}
@@ -74,7 +80,10 @@ function UnforwardedSearchControl(
 			id={ id }
 			hideLabelFromVision={ hideLabelFromVision }
 			help={ help }
-			className={ classnames( className, 'components-search-control' ) }
+			className={ classnames( className, 'components-search-control', {
+				'is-next-40px-default-size': __next40pxDefaultSize,
+				'is-size-compact': size === 'compact',
+			} ) }
 		>
 			<div className="components-search-control__input-wrapper">
 				<input

package/src/search-control/style.scss

@@ -4,7 +4,7 @@
 	input[type="search"].components-search-control__input {
 		@include input-control;
 		display: block;
-		padding: $grid-unit-20 $grid-unit-60 $grid-unit-20 $grid-unit-20;
+		padding: 0 $grid-unit-60 0 $grid-unit-20;
 		background: $gray-100;
 		border: none;
 		width: 100%;
@@ -36,21 +36,28 @@
 			-webkit-appearance: none;
 		}
 	}
+
+	&.is-next-40px-default-size input[type="search"].components-search-control__input {
+		height: $grid-unit-50;
+	}
+
+	&.is-size-compact input[type="search"].components-search-control__input {
+		height: $grid-unit-40;
+	}
+
 }
 
 .components-search-control__icon {
 	position: absolute;
-	top: 0;
-	width: $icon-size;
 	right: ( $grid-unit-60 - $icon-size ) * 0.5;
-	bottom: 0;
+	top: 50%;
+	transform: translateY(-50%);
+
 	display: flex;
 	align-items: center;
 	justify-content: center;
 
-	> svg {
-		margin: $grid-unit-10 0;
-	}
+	width: $icon-size;
 }
 
 .components-search-control__input-wrapper {

package/src/search-control/types.ts

@@ -40,4 +40,16 @@ export type SearchControlProps = Pick<
 	 * The current value of the input.
 	 */
 	value?: string;
+	/**
+	 * The size of the component
+	 *
+	 * @default 'default'
+	 */
+	size?: 'default' | 'compact';
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 };

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

@@ -13,6 +13,7 @@ import { wordpress, category, media } from '@wordpress/icons';
  * Internal dependencies
  */
 import TabPanel from '..';
+import cleanupTooltip from '../../tooltip/test/utils';
 
 const TABS = [
 	{
@@ -128,6 +129,8 @@ describe.each( [
 
 				await user.unhover( allTabs[ i ] );
 			}
+
+			await cleanupTooltip( user );
 		} );
 
 		it( 'should display a tooltip when moving the selection via the keyboard on tabs provided with an icon', async () => {
@@ -189,6 +192,8 @@ describe.each( [
 			expect( mockOnSelect ).toHaveBeenLastCalledWith( 'beta' );
 			expect( screen.getByText( 'Beta' ) ).toBeInTheDocument();
 			expect( await getSelectedTab() ).toHaveFocus();
+
+			await cleanupTooltip( user );
 		} );
 	} );
 

package/src/text/styles.js

@@ -34,7 +34,8 @@ export const highlighterText = css`
 	mark {
 		background: ${ COLORS.alert.yellow };
 		border-radius: 2px;
-		box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,
+		box-shadow:
+			0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,
 			0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset;
 	}
 `;

package/src/theme/README.md

@@ -40,8 +40,8 @@ If you would like your custom component to be themeable as a child of the `Theme
 -  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`
+   -	`--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`