make the styles look nicer

WordPress · Dec 6, 2023 · a39c4c8 · a39c4c8
1 parent 270afc1
commit a39c4c8
Showing 1 changed file with 16 additions and 10 deletions.
diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js
@@ -14,6 +14,7 @@ import {
 	__experimentalHeading as Heading,
 	__experimentalGrid as Grid,
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
 	__experimentalZStack as ZStack,
 	ColorIndicator,
 } from '@wordpress/components';
@@ -117,6 +118,9 @@ const getFontFamilyNames = ( themeJson ) => {
 	return [ bodyFontFamily?.name, headingFontFamily?.name ];
 };
 
+const normalizedHeight = 100;
+const ratio = 1;
+
 function Variation( { variation, isColor, isFont } ) {
 	const [ isFocused, setIsFocused ] = useState( false );
 	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
@@ -244,12 +248,9 @@ function ColorVariation( { variation } ) {
 	return (
 		<GlobalStylesContext.Provider value={ context }>
 			<div
-				className={ classnames(
-					'edit-site-global-styles-variations_item',
-					{
-						'is-active': isActive,
-					}
-				) }
+				className={ classnames( {
+					'is-active': isActive,
+				} ) }
 				role="button"
 				onClick={ selectVariation }
 				onKeyDown={ selectOnEnter }
@@ -336,7 +337,7 @@ function TypographyVariation( { variation } ) {
 	const bodyPreviewStyle = getFamilyPreviewStyle( bodyFontFamilies );
 	const headingPreviewStyle = {
 		...getFamilyPreviewStyle( headingFontFamilies ),
-		fontSize: '1.5rem',
+		fontSize: '1.2rem',
 	};
 
 	return (
@@ -357,17 +358,22 @@ function TypographyVariation( { variation } ) {
 				onFocus={ () => setIsFocused( true ) }
 				onBlur={ () => setIsFocused( false ) }
 			>
-				<div
+				<VStack
 					className="edit-site-global-styles-variations_item-preview"
 					isFocused={ isFocused }
+					style={ {
+						height: normalizedHeight * ratio,
+						lineHeight: 1.2,
+						textAlign: 'center',
+					} }
 				>
 					<div style={ headingPreviewStyle }>
 						{ headingFontFamilies.name }
 					</div>
 					<div style={ bodyPreviewStyle }>
 						{ bodyFontFamilies.name }
 					</div>
-				</div>
+				</VStack>
 			</div>
 		</GlobalStylesContext.Provider>
 	);
@@ -376,7 +382,7 @@ function TypographyVariation( { variation } ) {
 function ColorVariations( { variations } ) {
 	const { user } = useContext( GlobalStylesContext );
 	const colorVariations =
-		variations && getVariationsByType( user, variations, 'color' );
+		variations && getVariationsByType( user, variations, 'color' ); // should also get filter?
 
 	return (
 		<>