@wordpress/edit-site 5.34.0 → 6.0.0

package/src/components/global-styles/style-variations-container.js

@@ -3,9 +3,10 @@
  */
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
+import { useContext, useEffect, useMemo, useState } from '@wordpress/element';
 import { __experimentalGrid as Grid } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -13,8 +14,19 @@ import { __ } from '@wordpress/i18n';
 import PreviewStyles from './preview-styles';
 import Variation from './variations/variation';
 import { isVariationWithSingleProperty } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import { unlock } from '../../lock-unlock';
+
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
 
 export default function StyleVariationsContainer( { gap = 2 } ) {
+	const { user } = useContext( GlobalStylesContext );
+	const [ currentUserStyles, setCurrentUserStyles ] = useState( user );
+	const userStyles = currentUserStyles?.styles;
+
+	useEffect( () => {
+		setCurrentUserStyles( user );
+	}, [ user ] );
+
 	const variations = useSelect( ( select ) => {
 		return select(
 			coreStore
@@ -29,20 +41,71 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 		);
 	} );
 
-	const withEmptyVariation = useMemo( () => {
-		return [
+	const themeVariations = useMemo( () => {
+		const withEmptyVariation = [
 			{
 				title: __( 'Default' ),
 				settings: {},
 				styles: {},
 			},
-			...( multiplePropertyVariations ?? [] ).map( ( variation ) => ( {
-				...variation,
-				settings: variation.settings ?? {},
-				styles: variation.styles ?? {},
-			} ) ),
+			...( multiplePropertyVariations ?? [] ),
+		];
+		return [
+			...withEmptyVariation.map( ( variation ) => {
+				const blockStyles = { ...variation?.styles?.blocks } || {};
+
+				// We need to copy any user custom CSS to the variation to prevent it being lost
+				// when switching variations.
+				if ( userStyles?.blocks ) {
+					Object.keys( userStyles.blocks ).forEach( ( blockName ) => {
+						// First get any block specific custom CSS from the current user styles and merge with any custom CSS for
+						// that block in the variation.
+						if ( userStyles.blocks[ blockName ].css ) {
+							const variationBlockStyles =
+								blockStyles[ blockName ] || {};
+							const customCSS = {
+								css: `${
+									blockStyles[ blockName ]?.css || ''
+								} ${
+									userStyles.blocks[ blockName ].css.trim() ||
+									''
+								}`,
+							};
+							blockStyles[ blockName ] = {
+								...variationBlockStyles,
+								...customCSS,
+							};
+						}
+					} );
+				}
+				// Now merge any global custom CSS from current user styles with global custom CSS in the variation.
+				const css =
+					userStyles?.css || variation.styles?.css
+						? {
+								css: `${ variation.styles?.css || '' } ${
+									userStyles?.css || ''
+								}`,
+						  }
+						: {};
+
+				const blocks =
+					Object.keys( blockStyles ).length > 0
+						? { blocks: blockStyles }
+						: {};
+
+				const styles = {
+					...variation.styles,
+					...css,
+					...blocks,
+				};
+				return {
+					...variation,
+					settings: variation.settings ?? {},
+					styles,
+				};
+			} ),
 		];
-	}, [ multiplePropertyVariations ] );
+	}, [ multiplePropertyVariations, userStyles?.blocks, userStyles?.css ] );
 
 	return (
 		<Grid
@@ -50,7 +113,7 @@ export default function StyleVariationsContainer( { gap = 2 } ) {
 			className="edit-site-global-styles-style-variations-container"
 			gap={ gap }
 		>
-			{ withEmptyVariation.map( ( variation, index ) => (
+			{ themeVariations.map( ( variation, index ) => (
 				<Variation key={ index } variation={ variation }>
 					{ ( isFocused ) => (
 						<PreviewStyles

package/src/components/global-styles/style.scss

@@ -7,7 +7,6 @@
 }
 
 .edit-site-global-styles-preview__iframe {
-	border-radius: $radius-block-ui + 1px; // Visually resembles the $radius-block-ui.
 	max-width: 100%;
 	display: block;
 	width: 100%;
@@ -59,10 +58,6 @@
 	row-gap: calc(#{$grid-unit-05} * 3);
 }
 
-.edit-site-global-styles-screen-colors__palette-count {
-	color: $gray-700;
-}
-
 .edit-site-global-styles-header__description {
 	padding: 0 $grid-unit-20;
 }
@@ -104,6 +99,11 @@
 	flex-shrink: 0;
 }
 
+.edit-site-global-styles__shadows-panel__title,
+.edit-site-global-styles__shadows-panel__options-container {
+	height: $grid-unit * 3;
+}
+
 .edit-site-global-styles__block-preview-panel {
 	position: relative;
 	width: 100%;
@@ -112,6 +112,55 @@
 	border-radius: $radius-block-ui;
 }
 
+.edit-site-global-styles__shadow-preview-panel {
+	height: 150px;
+	border: $gray-200 $border-width solid;
+	border-radius: $radius-block-ui;
+	overflow: auto;
+	background-image: repeating-linear-gradient(45deg, #f5f5f5 25%, #0000 0, #0000 75%, #f5f5f5 0, #f5f5f5), repeating-linear-gradient(45deg, #f5f5f5 25%, #0000 0, #0000 75%, #f5f5f5 0, #f5f5f5);
+	background-position: 0 0, 8px 8px;
+	background-size: 16px 16px;
+
+	.edit-site-global-styles__shadow-preview-block {
+		border: $gray-200 $border-width solid;
+		border-radius: $radius-block-ui;
+		background-color: $white;
+		width: 60%;
+		height: 60px;
+	}
+}
+
+.edit-site-global-styles__shadow-editor-panel {
+	width: 280px;
+	padding: $grid-unit-20;
+	// because tooltip of the range control is too close to the edge and creates overflow
+	margin-bottom: $grid-unit-05;
+
+	& .edit-site-global-styles__shadow-editor-color-palette {
+		// color palette adds empty .components-circular-option-picker
+		margin-bottom: -1 * $grid-unit-05;
+	}
+}
+
+.edit-site-global-styles__shadow-editor__dropdown {
+	width: 100%;
+
+	.edit-site-global-styles__shadow-editor__dropdown-toggle,
+	.edit-site-global-styles__shadow-editor__remove-button {
+		width: 100%;
+		height: auto;
+		padding-top: $grid-unit;
+		padding-bottom: $grid-unit;
+		text-align: left;
+		border-radius: inherit;
+
+		&.is-open {
+			background: $gray-100;
+			color: var(--wp-admin-theme-color);
+		}
+	}
+}
+
 .edit-site-global-styles-screen-css {
 	flex: 1 1 auto;
 	display: flex;

package/src/components/global-styles/test/shadow-utils.spec.js

@@ -0,0 +1,251 @@
+/**
+ * Internal dependencies
+ */
+import { getShadowParts, shadowStringToObject } from '../shadow-utils';
+
+const colorFormats = {
+	named: 'red',
+	hex: '#ff0000',
+	hexAlpha: '#ff000077',
+	rgb: 'rgb(255, 0, 0)',
+	rgbSpaced: 'rgb(255 0 0)',
+	rgbMultiSpaced: 'rgb(255  0   0)',
+	rgba: 'rgba(255, 0, 0, 0.5)',
+	rgbp: 'rgb(255 0 0 / 50%)',
+	hsl: 'hsl(0, 100%, 50%)',
+	hsla: 'hsla(0, 100%, 50%, 0.5)',
+	hslp: 'hsl(0 100% 50% / 50%)',
+	currentcolor: 'currentcolor',
+};
+const validShadowFormats = {
+	xy: '{x} {y}',
+	xyInset: '{x} {y} inset',
+	insetXY: 'inset {x} {y}',
+
+	xyColor: '{x} {y} {color}',
+	xyColorInset: '{x} {y} {color} inset',
+	xyInsetColor: '{x} {y} inset {color}',
+	insetXYColor: 'inset {x} {y} {color}',
+
+	colorXY: '{color} {x} {y}',
+	colorXYInset: '{color} {x} {y} inset',
+	colorInsetXY: '{color} inset {x} {y}',
+	insetColorXY: 'inset {color} {x} {y}',
+
+	xyBlur: '{x} {y} {blur}',
+	xyBlurInset: '{x} {y} {blur} inset',
+	insetXYBlur: 'inset {x} {y} {blur}',
+
+	xyBlurColor: '{x} {y} {blur} {color}',
+	xyBlurColorInset: '{x} {y} {blur} {color} inset',
+	xyBlurInsetColor: '{x} {y} {blur} inset {color}',
+	insetXYBlurColor: 'inset {x} {y} {blur} {color}',
+
+	colorXYBlur: '{color} {x} {y} {blur}',
+	colorXYBlurInset: '{color} {x} {y} {blur} inset',
+	colorInsetXYBlur: '{color} inset {x} {y} {blur}',
+	insetColorXYBlur: 'inset {color} {x} {y} {blur}',
+
+	xyBlurSpread: '{x} {y} {blur} {spread}',
+	xyBlurSpreadInset: '{x} {y} {blur} {spread} inset',
+	insetXYBlurSpread: 'inset {x} {y} {blur} {spread}',
+
+	xyBlurSpreadColor: '{x} {y} {blur} {spread} {color}',
+	xyBlurSpreadColorInset: '{x} {y} {blur} {spread} {color} inset',
+	xyBlurSpreadInsetColor: '{x} {y} {blur} {spread} inset {color}',
+	insetXYBlurSpreadColor: 'inset {x} {y} {blur} {spread} {color}',
+
+	colorXYBlurSpread: '{color} {x} {y} {blur} {spread}',
+	colorXYBlurSpreadInset: '{color} {x} {y} {blur} {spread} inset',
+	colorInsetXYBlurSpread: '{color} inset {x} {y} {blur} {spread}',
+	insetColorXYBlurSpread: 'inset {color} {x} {y} {blur} {spread}',
+
+	multipleSpaces: '{x}  {y}   {blur} {spread}',
+	upperInset: 'INSET {x} {y} {blur} {spread} {color}',
+};
+
+const invalidShadowFormats = {
+	oneLength: '{x}',
+	multipleLengthGroups1: '{x} {y} {color} {blur}',
+	multipleLengthGroups2: '{x} {y} {blur} {spread} {color} 5px',
+	multipleInsets: 'inset inset {x} {y} {blur} {spread} {color}',
+	multipleColors: '{x} {y} {blur} {spread} {color} {color}',
+};
+
+const combinedShadows = {
+	onePart: '{1}',
+	twoParts: '{1},{2}',
+	twoPartsSpaced: '{1}, {2}',
+	threeParts: '{1},{2},{3}',
+};
+
+const shadowUnits = {
+	px: '1px',
+	em: '1em',
+	rem: '1rem',
+	halfRem: '0.5rem',
+	percent: '1%',
+	halfPercent: '0.5%',
+	ex: '1ex',
+	inch: '1in',
+	cm: '1cm',
+	mm: '1mm',
+	pt: '1pt',
+	pc: '1pc',
+	vh: '1vh',
+	vw: '1vw',
+	vmin: '1vmin',
+	vmax: '1vmax',
+	ch: '1ch',
+	lh: '1lh',
+	zero: '0',
+};
+
+// Data helper functions
+function getShadowString( formatString, values ) {
+	return formatString.replace( /\{(\w+)\}/g, ( match, placeholder ) => {
+		if ( values.hasOwnProperty( placeholder ) ) {
+			return values[ placeholder ];
+		}
+		return match;
+	} );
+}
+function getCombinedShadowString( format, parts ) {
+	return format.replace( /{(\d+)}/g, ( _, index ) => parts[ index - 1 ] );
+}
+
+describe( 'getShadowParts', () => {
+	Object.entries( validShadowFormats ).forEach( ( [ shadowKey, shadow ] ) => {
+		describe( `test shadow format: ${ shadowKey }`, () => {
+			Object.entries( colorFormats ).forEach( ( [ colorKey, color ] ) => {
+				Object.entries( combinedShadows ).forEach(
+					( [ combinedShadowKey, combinedShadow ] ) => {
+						const shadowCount = combinedShadow.split( ',' ).length;
+						const shadowStrings = Array.from(
+							{ length: shadowCount },
+							() =>
+								getShadowString( shadow, {
+									x: '1px',
+									y: '2px',
+									blur: '3px',
+									spread: '4px',
+									color,
+								} )
+						);
+
+						const input = getCombinedShadowString(
+							combinedShadow,
+							shadowStrings
+						);
+						const output = shadowStrings;
+
+						it( `should return shadow parts for ${ colorKey } color and ${ combinedShadowKey } shadow`, () => {
+							const parts = getShadowParts( input );
+							expect( parts ).toEqual( output );
+						} );
+					}
+				);
+			} );
+		} );
+	} );
+} );
+
+describe( 'shadowStringToObject', () => {
+	const defaultShadow = {
+		x: '0',
+		y: '0',
+		blur: '0',
+		spread: '0',
+		color: '#000',
+		inset: false,
+	};
+
+	Object.entries( validShadowFormats ).forEach( ( [ shadowKey, shadow ] ) => {
+		describe( `test shadow format: ${ shadowKey }`, () => {
+			Object.entries( colorFormats ).forEach( ( [ colorKey, color ] ) => {
+				const hasX = shadow.includes( '{x}' );
+				const hasY = shadow.includes( '{y}' );
+				const hasBlur = shadow.includes( '{blur}' );
+				const hasSpread = shadow.includes( '{spread}' );
+				const hasColor = shadow.includes( '{color}' );
+				const hasInset = shadow.toLowerCase().includes( 'inset' );
+
+				const shadowString = getShadowString( shadow, {
+					x: '1px',
+					y: '2px',
+					blur: '3px',
+					spread: '4px',
+					color,
+				} );
+
+				const input = shadowString;
+				const output = {
+					x: hasX ? '1px' : defaultShadow.x,
+					y: hasY ? '2px' : defaultShadow.y,
+					blur: hasBlur ? '3px' : defaultShadow.blur,
+					spread: hasSpread ? '4px' : defaultShadow.spread,
+					color: hasColor ? color : defaultShadow.color,
+					inset: hasInset,
+				};
+
+				it( `should return shadow object for ${ colorKey } color`, () => {
+					const shadowObj = shadowStringToObject( input );
+					expect( shadowObj ).toEqual( output );
+				} );
+			} );
+		} );
+	} );
+
+	describe( `test invalid shadow formats`, () => {
+		const color = colorFormats.hex;
+		Object.entries( invalidShadowFormats ).forEach(
+			( [ shadowKey, shadow ] ) => {
+				const shadowString = getShadowString( shadow, {
+					x: '1px',
+					y: '2px',
+					blur: '3px',
+					spread: '4px',
+					color,
+				} );
+
+				const input = shadowString;
+				const output = defaultShadow;
+
+				it( `should return default shadow object for ${ shadowKey }`, () => {
+					const shadowObj = shadowStringToObject( input );
+					expect( shadowObj ).toEqual( output );
+				} );
+			}
+		);
+	} );
+
+	describe( `test shadow with all units`, () => {
+		const shadow = validShadowFormats.xyBlurSpreadColor;
+		const color = colorFormats.hex;
+
+		Object.entries( shadowUnits ).forEach( ( [ unitKey, unit ] ) => {
+			const shadowString = getShadowString( shadow, {
+				x: unit,
+				y: unit,
+				blur: unit,
+				spread: unit,
+				color,
+			} );
+
+			const input = shadowString;
+			const output = {
+				x: unit,
+				y: unit,
+				blur: unit,
+				spread: unit,
+				color,
+				inset: false,
+			};
+
+			it( `should return shadow object for the unit: ${ unitKey }`, () => {
+				const shadowObj = shadowStringToObject( input );
+				expect( shadowObj ).toEqual( output );
+			} );
+		} );
+	} );
+} );

package/src/components/global-styles/test/utils.spec.js

@@ -0,0 +1,59 @@
+/**
+ * Internal dependencies
+ */
+import { getNewIndexFromPresets } from '../utils';
+
+const validPresets = {
+	single: [ { slug: 'preset-1' } ],
+	multiple: [ { slug: 'preset-1' }, { slug: 'preset-2' } ],
+	withGaps: [ { slug: 'preset-1' }, { slug: 'preset-3' } ],
+	mixedPrefixes: [
+		{ slug: 'preset-1' },
+		{ slug: 'shadow-2' },
+		{ slug: 'preset-3' },
+	],
+	nonStringSlug: [ { slug: 'preset-1' }, { slug: 2 } ],
+	emptyArray: [],
+};
+
+const invalidPresets = {
+	noMatch: [ { slug: 'preset-alpha' }, { slug: 'preset-beta' } ],
+	emptySlug: [ { slug: '' } ],
+	nullSlug: [ { slug: null } ],
+	undefinedSlug: [ { slug: undefined } ],
+	nonObjectElements: [ 'preset-1' ],
+};
+
+const getExpectedIndex = ( presetKey, presets ) => {
+	if ( presetKey === 'withGaps' ) {
+		return 4;
+	}
+	if ( presetKey === 'mixedPrefixes' ) {
+		return 4;
+	}
+	if ( presetKey === 'nonStringSlug' ) {
+		return 2;
+	}
+	return presets.length + 1;
+};
+
+describe( 'getNewIndexFromPresets', () => {
+	Object.entries( validPresets ).forEach( ( [ presetKey, presets ] ) => {
+		describe( `test valid preset format: ${ presetKey }`, () => {
+			const newIndex = getNewIndexFromPresets( presets, 'preset-' );
+			it( `should return correct new index for ${ presetKey }`, () => {
+				const expectedIndex = getExpectedIndex( presetKey, presets );
+				expect( newIndex ).toBe( expectedIndex );
+			} );
+		} );
+	} );
+
+	Object.entries( invalidPresets ).forEach( ( [ presetKey, presets ] ) => {
+		describe( `test invalid preset format: ${ presetKey }`, () => {
+			const newIndex = getNewIndexFromPresets( presets, 'preset-' );
+			it( `should return 1 for ${ presetKey }`, () => {
+				expect( newIndex ).toBe( 1 );
+			} );
+		} );
+	} );
+} );

package/src/components/global-styles/typography-example.js

@@ -5,16 +5,17 @@ import { useContext } from '@wordpress/element';
 import { __unstableMotion as motion } from '@wordpress/components';
 import { _x } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from './global-styles-provider';
 import { unlock } from '../../lock-unlock';
 import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
 import { getFontFamilies } from './utils';
 
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
 export default function PreviewTypography( { fontSize, variation } ) {
 	const { base } = useContext( GlobalStylesContext );

package/src/components/global-styles/ui.js

@@ -35,12 +35,12 @@ import ScreenTypography from './screen-typography';
 import ScreenTypographyElement from './screen-typography-element';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
+import { ScreenShadows, ScreenShadowsEdit } from './screen-shadows';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
 import StyleBook from '../style-book';
 import ScreenCSS from './screen-css';
 import ScreenRevisions from './screen-revisions';
-import ScreenBackground from './screen-background';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
@@ -76,7 +76,11 @@ function GlobalStylesActionMenu() {
 
 	return (
 		<GlobalStylesMenuFill>
-			<DropdownMenu icon={ moreVertical } label={ __( 'More' ) }>
+			<DropdownMenu
+				icon={ moreVertical }
+				label={ __( 'More' ) }
+				toggleProps={ { size: 'compact' } }
+			>
 				{ ( { onClose } ) => (
 					<>
 						<MenuGroup>
@@ -333,6 +337,14 @@ function GlobalStylesUI() {
 				<ScreenColors />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path="/shadows">
+				<ScreenShadows />
+			</GlobalStylesNavigationScreen>
+
+			<GlobalStylesNavigationScreen path="/shadows/edit/:category/:slug">
+				<ScreenShadowsEdit />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen path="/layout">
 				<ScreenLayout />
 			</GlobalStylesNavigationScreen>
@@ -341,14 +353,10 @@ function GlobalStylesUI() {
 				<ScreenCSS />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path={ '/revisions' }>
+			<GlobalStylesNavigationScreen path="/revisions">
 				<ScreenRevisions />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path={ '/background' }>
-				<ScreenBackground />
-			</GlobalStylesNavigationScreen>
-
 			{ blocks.map( ( block ) => (
 				<GlobalStylesNavigationScreen
 					key={ 'menu-block-' + block.name }

package/src/components/global-styles/utils.js

@@ -11,6 +11,33 @@ export function getVariationClassName( variation ) {
 	return `is-style-${ variation }`;
 }
 
+/**
+ * Iterates through the presets array and searches for slugs that start with the specified
+ * slugPrefix followed by a numerical suffix. It identifies the highest numerical suffix found
+ * and returns one greater than the highest found suffix, ensuring that the new index is unique.
+ *
+ * @param {Array}  presets    The array of preset objects, each potentially containing a slug property.
+ * @param {string} slugPrefix The prefix to look for in the preset slugs.
+ *
+ * @return {number} The next available index for a preset with the specified slug prefix, or 1 if no matching slugs are found.
+ */
+export function getNewIndexFromPresets( presets, slugPrefix ) {
+	const nameRegex = new RegExp( `^${ slugPrefix }([\\d]+)$` );
+	const highestPresetValue = presets.reduce( ( currentHighest, preset ) => {
+		if ( typeof preset?.slug === 'string' ) {
+			const matches = preset?.slug.match( nameRegex );
+			if ( matches ) {
+				const id = parseInt( matches[ 1 ], 10 );
+				if ( id > currentHighest ) {
+					return id;
+				}
+			}
+		}
+		return currentHighest;
+	}, 0 );
+	return highestPresetValue + 1;
+}
+
 function getFontFamilyFromSetting( fontFamilies, setting ) {
 	if ( ! Array.isArray( fontFamilies ) || ! setting ) {
 		return null;

package/src/components/global-styles/variations/style.scss

@@ -6,48 +6,35 @@
 
 	.edit-site-global-styles-variations_item-preview {
 		border-radius: $radius-block-ui;
-		// Shown in Windows 10 high contrast mode.
-		outline: 1px solid transparent;
+		outline: $border-width solid rgba($black, 0.1);
+		outline-offset: -$border-width;
+		overflow: hidden;
 		position: relative;
 		// Add the same transition that block style variations and other buttons have.
-		transition: box-shadow 0.1s linear;
+		transition: outline 0.1s linear;
 		@include reduce-motion("transition");
 
-		&::after {
-			content: "";
-			position: absolute;
-			top: -$border-width;
-			left: -$border-width;
-			bottom: -$border-width;
-			right: -$border-width;
-			// Visually resembles the $radius-block-ui.
-			border-radius: $radius-block-ui + $border-width;
-			box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
-			// Show a thin outline in Windows high contrast mode, otherwise the button is invisible.
-			border: $border-width solid transparent;
-			box-sizing: inherit;
-			// Add the same transition that block style variations and other buttons have.
-			transition: box-shadow 0.1s linear;
-			@include reduce-motion("transition");
-		}
+		&.is-pill {
+			height: $button-size-compact;
 
-		.edit-site-global-styles-color-variations & {
-			padding: $grid-unit-10;
+			.block-editor-iframe__scale-container {
+				overflow: hidden;
+			}
 		}
 	}
 
-	&:not(.is-active):hover .edit-site-global-styles-variations_item-preview::after {
-		box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.4);
+	&:not(.is-active):hover .edit-site-global-styles-variations_item-preview {
+		outline-color: rgba($black, 0.3);
 	}
 
 	&.is-active .edit-site-global-styles-variations_item-preview,
 	&:focus-visible .edit-site-global-styles-variations_item-preview {
-		box-shadow: inset 0 0 0 $border-width $white, 0 0 0 var(--wp-admin-border-width-focus) $gray-900;
-		// Shown in Windows 10 high contrast mode.
-		outline-width: 3px;
+		outline-color: $gray-900;
+		outline-offset: $border-width;
+		outline-width: var(--wp-admin-border-width-focus);
+	}
 
-		&::after {
-			box-shadow: inset 0 0 0 1px $white;
-		}
+	&:focus-visible .edit-site-global-styles-variations_item-preview {
+		outline-color: var(--wp-admin-theme-color);
 	}
 }