Assembler: use text and button colors for color variation swatches (#…

…87072)
Automattic · Apr 12, 2024 · 2432704 · 2432704
1 parent b281fae
commit 2432704
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 71 deletions.
diff --git a/packages/global-styles/src/components/color-palette-variations/index.tsx b/packages/global-styles/src/components/color-palette-variations/index.tsx
@@ -70,7 +70,7 @@ const ColorPaletteVariation = ( {
 						<div className="global-styles-variation__item-preview" ref={ ref }>
 							{ ( isActive || inView ) && (
 								<GlobalStylesContext.Provider value={ context }>
-									<ColorPaletteVariationPreview title={ colorPaletteVariation.title } />
+									<ColorPaletteVariationPreview />
 								</GlobalStylesContext.Provider>
 							) }
 						</div>

diff --git a/packages/global-styles/src/components/color-palette-variations/preview.tsx b/packages/global-styles/src/components/color-palette-variations/preview.tsx
@@ -1,43 +1,22 @@
-import {
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
+import { __experimentalHStack as HStack } from '@wordpress/components';
 import { useResizeObserver } from '@wordpress/compose';
-import { translate } from 'i18n-calypso';
 import {
 	STYLE_PREVIEW_WIDTH,
 	STYLE_PREVIEW_HEIGHT,
 	STYLE_PREVIEW_COLOR_SWATCH_SIZE,
 } from '../../constants';
-import { useGlobalSetting, useGlobalStyle } from '../../gutenberg-bridge';
+import { useGlobalStyle } from '../../gutenberg-bridge';
 import GlobalStylesVariationContainer from '../global-styles-variation-container';
-import type { Color } from '../../types';
-
-interface Props {
-	title?: string;
-}
 
-const ColorPaletteVariationPreview = ( { title }: Props ) => {
-	const [ fontWeight ] = useGlobalStyle( 'typography.fontWeight' );
-	const [ fontFamily = 'serif' ] = useGlobalStyle( 'typography.fontFamily' );
-	const [ headingFontFamily = fontFamily ] = useGlobalStyle( 'elements.h1.typography.fontFamily' );
-	const [ headingFontWeight = fontWeight ] = useGlobalStyle( 'elements.h1.typography.fontWeight' );
+const ColorPaletteVariationPreview = () => {
 	const [ textColor = 'black' ] = useGlobalStyle( 'color.text' );
-	const [ headingColor = textColor ] = useGlobalStyle( 'elements.h1.color.text' );
+	const [ buttonColor = textColor ] = useGlobalStyle( 'elements.button.color.background' );
 	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
 	const [ gradientValue ] = useGlobalStyle( 'color.gradient' );
-	const [ themeColors ] = useGlobalSetting( 'color.palette.theme' );
 	const [ containerResizeListener, { width } ] = useResizeObserver();
 	const ratio = width ? width / STYLE_PREVIEW_WIDTH : 1;
 	const normalizedHeight = Math.ceil( STYLE_PREVIEW_HEIGHT * ratio );
 	const normalizedSwatchSize = STYLE_PREVIEW_COLOR_SWATCH_SIZE * ratio * 2;
-	const uniqueColors = [ ...new Set< string >( themeColors.map( ( { color }: Color ) => color ) ) ];
-	const highlightedColors = uniqueColors
-		.filter(
-			// we exclude background color because it is already visible in the preview.
-			( color ) => color !== backgroundColor
-		)
-		.slice( 0, 2 );
 
 	return (
 		<GlobalStylesVariationContainer
@@ -60,54 +39,26 @@ const ColorPaletteVariationPreview = ( { title }: Props ) => {
 						overflow: 'hidden',
 					} }
 				>
-					{ title ? (
-						<HStack
-							spacing={ 10 * ratio }
-							justify="center"
-							style={ {
-								height: '100%',
-								overflow: 'hidden',
-							} }
-						>
-							{ highlightedColors.map( ( color, index ) => (
-								<div
-									key={ index }
-									style={ {
-										height: normalizedSwatchSize,
-										width: normalizedSwatchSize,
-										background: color,
-										borderRadius: normalizedSwatchSize / 2,
-									} }
-								/>
-							) ) }
-						</HStack>
-					) : (
-						<VStack
-							spacing={ 3 * ratio }
-							justify="center"
-							style={ {
-								height: '100%',
-								overflow: 'hidden',
-								padding: 10 * ratio,
-								boxSizing: 'border-box',
-							} }
-						>
+					<HStack
+						spacing={ 10 * ratio }
+						justify="center"
+						style={ {
+							height: '100%',
+							overflow: 'hidden',
+						} }
+					>
+						{ [ textColor, buttonColor ].map( ( color, index ) => (
 							<div
+								key={ index }
 								style={ {
-									fontSize: 40 * ratio,
-									fontFamily: headingFontFamily,
-									color: headingColor,
-									fontWeight: headingFontWeight,
-									lineHeight: '1em',
-									textAlign: 'center',
+									height: normalizedSwatchSize,
+									width: normalizedSwatchSize,
+									background: color,
+									borderRadius: normalizedSwatchSize / 2,
 								} }
-							>
-								{ translate( 'Default', {
-									comment: 'The default value of the color palette',
-								} ) }
-							</div>
-						</VStack>
-					) }
+							/>
+						) ) }
+					</HStack>
 				</div>
 			</div>
 		</GlobalStylesVariationContainer>