From b63b4179a2fdf9cd5a2f94dba5462aa471a6f40c Mon Sep 17 00:00:00 2001
From: ramon <ramonjd@gmail.com>
Date: Mon, 19 Feb 2024 15:39:55 +1100
Subject: [PATCH] A bit of clean up. Remove comments, adjust margins.

---
 .../components/global-styles/color-palette-panel.js   |  6 +++---
 .../global-styles/screen-typography-typesets.js       |  2 +-
 .../src/components/global-styles/screen-typography.js |  2 --
 .../edit-site/src/components/global-styles/style.scss |  7 +++++++
 .../src/components/global-styles/variations-color.js  | 11 +++--------
 .../components/global-styles/variations-typography.js |  7 +------
 .../use-theme-style-variations-by-property.js         |  4 ++--
 7 files changed, 17 insertions(+), 22 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
index cc95c5abf35d9..9e6bb5dbe2c77 100644
--- a/packages/edit-site/src/components/global-styles/color-palette-panel.js
+++ b/packages/edit-site/src/components/global-styles/color-palette-panel.js
@@ -85,6 +85,9 @@ export default function ColorPalettePanel( { name } ) {
 						popoverProps={ popoverProps }
 					/>
 				) }
+			{ !! colorVariations.length && (
+				<ColorVariations variations={ colorVariations } />
+			) }
 			<PaletteEdit
 				colors={ customColors }
 				onChange={ setCustomColors }
@@ -96,9 +99,6 @@ export default function ColorPalettePanel( { name } ) {
 				slugPrefix="custom-"
 				popoverProps={ popoverProps }
 			/>
-			{ !! colorVariations.length && (
-				<ColorVariations variations={ colorVariations } />
-			) }
 		</VStack>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/screen-typography-typesets.js b/packages/edit-site/src/components/global-styles/screen-typography-typesets.js
index 9e631632e9d47..1ea5ab04eef34 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography-typesets.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography-typesets.js
@@ -15,7 +15,7 @@ export default function ScreenTypographyTypesets() {
 			<ScreenHeader
 				title={ __( 'Typeset' ) }
 				description={ __(
-					'Manage typography of different global elements on your site.'
+					"Apply a typography style variation to your site's font styles and settings."
 				) }
 			/>
 			<div className="edit-site-global-styles-screen-typography">
diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
index 1208889292319..bd5b8fc694137 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -50,7 +50,6 @@ function ScreenTypography() {
 					{ ! window.__experimentalDisableFontLibrary && (
 						<VStack spacing={ 3 }>
 							{ fontLibraryEnabled && <FontFamilies /> }
-							{ /* @TODO: abstract into component */ }
 							{ !! typographyVariations.length && (
 								<ItemGroup isBordered>
 									<NavigationButtonAsItem
@@ -59,7 +58,6 @@ function ScreenTypography() {
 									>
 										<HStack justify="space-between">
 											<FlexItem>
-												{ /* @TODO: think about this category. Could we stress "variations" typography styles to make descriptions/labelling easier (no font-name farming) */ }
 												{ __( 'Typesets' ) }
 											</FlexItem>
 											<IconWithCurrentColor
diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
index fb4dd71251fa5..3110b15064b47 100644
--- a/packages/edit-site/src/components/global-styles/style.scss
+++ b/packages/edit-site/src/components/global-styles/style.scss
@@ -207,3 +207,10 @@
 .edit-site-global-styles-screen-typography-typeset__button {
 	border: $gray-200 $border-width solid;
 }
+
+.edit-site-global-styles-sidebar__panel .edit-site-global-styles-style-variations-container .edit-site-global-styles-variations_item-preview {
+	min-height: 70px;
+	line-height: 1.2;
+	text-align: center;
+	padding: $grid-unit-10 $border-width * 2;
+}
diff --git a/packages/edit-site/src/components/global-styles/variations-color.js b/packages/edit-site/src/components/global-styles/variations-color.js
index 243257008b308..9806e78e1b551 100644
--- a/packages/edit-site/src/components/global-styles/variations-color.js
+++ b/packages/edit-site/src/components/global-styles/variations-color.js
@@ -120,19 +120,14 @@ function ColorVariation( { variation } ) {
 export default function ColorVariations( { variations } ) {
 	return (
 		<VStack spacing={ 3 }>
-			{ /*
-			@TODO is there an alternative to this heading?
-*/ }
 			<Subtitle level={ 3 }>{ __( 'Presets' ) }</Subtitle>
 			<Grid
 				columns={ 2 }
 				className="edit-site-global-styles-color-variations"
 			>
-				{ variations.map( ( variation, index ) => {
-					return (
-						<ColorVariation key={ index } variation={ variation } />
-					);
-				} ) }
+				{ variations.map( ( variation, index ) => (
+					<ColorVariation key={ index } variation={ variation } />
+				) ) }
 			</Grid>
 		</VStack>
 	);
diff --git a/packages/edit-site/src/components/global-styles/variations-typography.js b/packages/edit-site/src/components/global-styles/variations-typography.js
index e845e4ac7c5c8..13887134ec5b0 100644
--- a/packages/edit-site/src/components/global-styles/variations-typography.js
+++ b/packages/edit-site/src/components/global-styles/variations-typography.js
@@ -123,7 +123,7 @@ function TypographyVariation( { variation } ) {
 	const headingPreviewStyle = {
 		...( headingFontFamilies &&
 			getFamilyPreviewStyle( headingFontFamilies ) ),
-		fontSize: '1.2rem',
+		fontSize: '16px',
 	};
 
 	return (
@@ -147,11 +147,6 @@ function TypographyVariation( { variation } ) {
 				<VStack
 					className="edit-site-global-styles-variations_item-preview"
 					isFocused={ isFocused }
-					style={ {
-						height: 70,
-						lineHeight: 1.2,
-						textAlign: 'center',
-					} }
 				>
 					<div style={ headingPreviewStyle }>
 						{ headingFontFamilies?.name || variation?.title }
diff --git a/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js b/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js
index aff5c95ed8809..1023bef3b8814 100644
--- a/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js
+++ b/packages/edit-site/src/hooks/use-theme-style-variations/use-theme-style-variations-by-property.js
@@ -16,8 +16,8 @@ import { unlock } from '../../lock-unlock';
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
 
 /**
- * Fetches the current theme style variations, filters them by the provided property,
- * and merges with current user-defined global style/settings object.
+ * A convenience wrapper for `useThemeStyleVariationsByProperty()` that fetches the current theme style variations,
+ * and user-defined global style/settings object.
  *
  * @param {Object}   props          Object of hook args.
  * @param {string}   props.property The property to filter by.