Ensuring the cursor for the color previews is a pointer, which is the…

… same as the typography preview

Reducing the vheight of the color panel to match typography
Some light refactoring

packages/edit-site/src/components/global-styles/preview-colors.js

@@ -93,21 +93,27 @@ const StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {
 
 	// Set a fallbackRatio to use before the throttled ratio has been set.
 	const fallbackRatio = width ? width / normalizedWidth : 1;
-	// Use the throttled ratio if it has been calculated, otherwise
-	// use the fallback ratio. The throttled ratio is used to avoid
-	// an endless loop of updates at particular viewport heights.
-	// See: https://github.com/WordPress/gutenberg/issues/55112
+	/*
+	 * Use the throttled ratio if it has been calculated, otherwise
+	 * use the fallback ratio. The throttled ratio is used to avoid
+	 * an endless loop of updates at particular viewport heights.
+	 * See: https://github.com/WordPress/gutenberg/issues/55112
+	 */
 	const ratio = ratioState ? ratioState : fallbackRatio;
 
 	const { highlightedColors } = useStylesPreviewColors();
 
-	// Reset leaked styles from WP common.css and remove main content layout padding and border.
+	/*
+	 * Reset leaked styles from WP common.css and remove main content layout padding and border.
+	 * Add pointer cursor to the body to indicate the iframe is interactive,
+	 * similar to Typography variation previews.
+	 */
 	const editorStyles = useMemo( () => {
 		if ( styles ) {
 			return [
 				...styles,
 				{
-					css: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;}',
+					css: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;cursor: pointer;}',
 					isGlobalStyles: true,
 				},
 			];

packages/edit-site/src/components/global-styles/screen-colors.js

@@ -46,7 +46,7 @@ function ScreenColors() {
 				) }
 			/>
 			<div className="edit-site-global-styles-screen-colors">
-				<VStack spacing={ 10 }>
+				<VStack spacing={ 3 }>
 					<Palette />
 
 					<StylesColorPanel

packages/edit-site/src/components/global-styles/variation.js

@@ -24,25 +24,24 @@ const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
 export default function Variation( { variation, children } ) {
 	const [ isFocused, setIsFocused ] = useState( false );
 	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
-	const context = useMemo( () => {
-		return {
+	const context = useMemo(
+		() => ( {
 			user: {
 				settings: variation.settings ?? {},
 				styles: variation.styles ?? {},
 			},
 			base,
 			merged: mergeBaseAndUserConfigs( base, variation ),
 			setUserConfig: () => {},
-		};
-	}, [ variation, base ] );
+		} ),
+		[ variation, base ]
+	);
 
 	const selectVariation = () => {
-		setUserConfig( () => {
-			return {
-				settings: variation.settings,
-				styles: variation.styles,
-			};
-		} );
+		setUserConfig( () => ( {
+			settings: variation.settings,
+			styles: variation.styles,
+		} ) );
 	};
 
 	const selectOnEnter = ( event ) => {
@@ -52,9 +51,10 @@ export default function Variation( { variation, children } ) {
 		}
 	};
 
-	const isActive = useMemo( () => {
-		return areGlobalStyleConfigsEqual( user, variation );
-	}, [ user, variation ] );
+	const isActive = useMemo(
+		() => areGlobalStyleConfigsEqual( user, variation ),
+		[ user, variation ]
+	);
 
 	let label = variation?.title;
 	if ( variation?.description ) {