Update color variations (#61334)

* Update color presets * Update CSS to match the designs * simplfy border radius * simplfy border radius * Use outline, small tweaks * remove animation * Tweak initial outline state * Use admin color for focus --------- Co-authored-by: Rich Tabor <hi@richtabor.com>
WordPress · May 4, 2024 · 3bed311 · 3bed311
1 parent c566725
commit 3bed311
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 59 deletions.
diff --git a/packages/edit-site/src/components/global-styles/color-palette-panel.js b/packages/edit-site/src/components/global-styles/color-palette-panel.js
@@ -13,6 +13,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+import ColorVariations from './variations/variations-color';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 const mobilePopoverProps = { placement: 'bottom-start', offset: 8 };
@@ -88,6 +89,7 @@ export default function ColorPalettePanel( { name } ) {
 				slugPrefix="custom-"
 				popoverProps={ popoverProps }
 			/>
+			<ColorVariations title={ __( 'Presets' ) } />
 		</VStack>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/preset-colors.js b/packages/edit-site/src/components/global-styles/preset-colors.js
@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import { useStylesPreviewColors } from './hooks';
+
+export default function PresetColors() {
+	const { paletteColors } = useStylesPreviewColors();
+	return paletteColors.slice( 0, 5 ).map( ( { slug, color }, index ) => (
+		<div
+			key={ `${ slug }-${ index }` }
+			style={ {
+				flexGrow: 1,
+				height: '100%',
+				background: color,
+			} }
+		/>
+	) );
+}
diff --git a/packages/edit-site/src/components/global-styles/preview-colors.js b/packages/edit-site/src/components/global-styles/preview-colors.js
@@ -9,7 +9,7 @@ import {
 /**
  * Internal dependencies
  */
-import HighlightedColors from './highlighted-colors';
+import PresetColors from './preset-colors';
 import PreviewIframe from './preview-iframe';
 
 const firstFrameVariants = {
@@ -30,7 +30,7 @@ const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {
 			isFocused={ isFocused }
 			withHoverView={ withHoverView }
 		>
-			{ ( { ratio, key } ) => (
+			{ ( { key } ) => (
 				<motion.div
 					key={ key }
 					variants={ firstFrameVariants }
@@ -40,17 +40,14 @@ const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {
 					} }
 				>
 					<HStack
-						spacing={ 5 * ratio }
+						spacing={ 0 }
 						justify="center"
 						style={ {
 							height: '100%',
 							overflow: 'hidden',
 						} }
 					>
-						<HighlightedColors
-							normalizedColorSwatchSize={ 56 }
-							ratio={ ratio }
-						/>
+						<PresetColors />
 					</HStack>
 				</motion.div>
 			) }

diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -11,7 +11,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import ScreenHeader from './header';
 import Palette from './palette';
 import { unlock } from '../../lock-unlock';
-import ColorVariations from './variations/variations-color';
 
 const {
 	useGlobalStyle,
@@ -40,7 +39,6 @@ function ScreenColors() {
 			/>
 			<div className="edit-site-global-styles-screen">
 				<VStack spacing={ 7 }>
-					<ColorVariations title={ __( 'Presets' ) } />
 					<Palette />
 					<StylesColorPanel
 						inheritedValue={ inheritedStyle }

diff --git a/packages/edit-site/src/components/global-styles/variations/style.scss b/packages/edit-site/src/components/global-styles/variations/style.scss
@@ -6,48 +6,32 @@
 
 	.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.15);
+		outline-offset: -$border-width;
 		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");
-		}
-
-		.edit-site-global-styles-color-variations & {
-			padding: $grid-unit-10;
+		&.is-pill {
+			height: $button-size-next-default-40px;
+			border-radius: 100px;
+			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);
 	}
 }
diff --git a/packages/edit-site/src/components/global-styles/variations/variation.js b/packages/edit-site/src/components/global-styles/variations/variation.js
@@ -21,7 +21,7 @@ const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
 	blockEditorPrivateApis
 );
 
-export default function Variation( { variation, children } ) {
+export default function Variation( { variation, children, isPill } ) {
 	const [ isFocused, setIsFocused ] = useState( false );
 	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
 	const context = useMemo(
@@ -81,7 +81,12 @@ export default function Variation( { variation, children } ) {
 				onFocus={ () => setIsFocused( true ) }
 				onBlur={ () => setIsFocused( false ) }
 			>
-				<div className="edit-site-global-styles-variations_item-preview">
+				<div
+					className={ classnames(
+						'edit-site-global-styles-variations_item-preview',
+						{ 'is-pill': isPill }
+					) }
+				>
 					{ children( isFocused ) }
 				</div>
 			</div>

diff --git a/packages/edit-site/src/components/global-styles/variations/variations-color.js b/packages/edit-site/src/components/global-styles/variations/variations-color.js
@@ -1,18 +1,15 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalGrid as Grid,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
+import { __experimentalVStack as VStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import Variation from './variation';
 import StylesPreviewColors from '../preview-colors';
 import { useColorVariations } from '../hooks';
 import Subtitle from '../subtitle';
+import Variation from './variation';
 
 export default function ColorVariations( { title, gap = 2 } ) {
 	const colorVariations = useColorVariations();
@@ -24,13 +21,13 @@ export default function ColorVariations( { title, gap = 2 } ) {
 	return (
 		<VStack spacing={ 3 }>
 			{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
-			<Grid columns={ 3 } gap={ gap }>
+			<VStack spacing={ gap }>
 				{ colorVariations.map( ( variation, index ) => (
-					<Variation key={ index } variation={ variation }>
+					<Variation key={ index } variation={ variation } isPill>
 						{ () => <StylesPreviewColors /> }
 					</Variation>
 				) ) }
-			</Grid>
+			</VStack>
 		</VStack>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -99,20 +99,22 @@
 }
 
 .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-variations_item {
+
+	// Use a white outline to provide contrast with the dark background.
 	.edit-site-global-styles-variations_item-preview {
-		box-shadow: 0 0 0 $border-width $gray-900;
+		outline-color: rgba($white, 0.05);
 	}
 
-	&:focus .edit-site-global-styles-variations_item-preview,
-	&.is-active .edit-site-global-styles-variations_item-preview {
-		box-shadow: inset 0 0 0 $border-width $gray-900, 0 0 0 var(--wp-admin-border-width-focus) $white;
+	&:not(.is-active):hover .edit-site-global-styles-variations_item-preview {
+		outline-color: rgba($white, 0.15);
+	}
 
-		// Shown in Windows 10 high contrast mode.
-		outline-width: 3px;
+	&.is-active .edit-site-global-styles-variations_item-preview {
+		outline-color: $white;
+	}
 
-		&::after {
-			box-shadow: inset 0 0 0 1px $gray-900;
-		}
+	&:focus-visible .edit-site-global-styles-variations_item-preview {
+		outline-color: var(--wp-admin-theme-color);
 	}
 }