diff --git a/packages/edit-site/src/components/global-styles/variations/variation.js b/packages/edit-site/src/components/global-styles/variations/variation.js
index 8e74020ec8da3..1c1418a54931f 100644
--- a/packages/edit-site/src/components/global-styles/variations/variation.js
+++ b/packages/edit-site/src/components/global-styles/variations/variation.js
@@ -15,6 +15,7 @@ import { privateApis as editorPrivateApis } from '@wordpress/editor';
 /**
  * Internal dependencies
  */
+import { filterObjectByProperty } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 import { unlock } from '../../../lock-unlock';
 
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
@@ -22,18 +23,22 @@ const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
 	blockEditorPrivateApis
 );
 
-export default function Variation( { variation, children, isPill } ) {
+export default function Variation( { variation, children, isPill, property } ) {
 	const [ isFocused, setIsFocused ] = useState( false );
 	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
-	const context = useMemo(
-		() => ( {
+
+	const context = useMemo( () => {
+		let merged = mergeBaseAndUserConfigs( base, variation );
+		if ( property ) {
+			merged = filterObjectByProperty( merged, property );
+		}
+		return {
 			user: variation,
 			base,
-			merged: mergeBaseAndUserConfigs( base, variation ),
+			merged,
 			setUserConfig: () => {},
-		} ),
-		[ variation, base ]
-	);
+		};
+	}, [ variation, base, property ] );
 
 	const selectVariation = () => setUserConfig( variation );
 
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
index 88361afcc58f8..e84145afe2858 100644
--- a/packages/edit-site/src/components/global-styles/variations/variations-color.js
+++ b/packages/edit-site/src/components/global-styles/variations/variations-color.js
@@ -27,7 +27,12 @@ export default function ColorVariations( { title, gap = 2 } ) {
 			{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
 			<Grid spacing={ gap }>
 				{ colorVariations.map( ( variation, index ) => (
-					<Variation key={ index } variation={ variation } isPill>
+					<Variation
+						key={ index }
+						variation={ variation }
+						isPill
+						property="color"
+					>
 						{ () => <StylesPreviewColors /> }
 					</Variation>
 				) ) }
diff --git a/packages/edit-site/src/components/global-styles/variations/variations-typography.js b/packages/edit-site/src/components/global-styles/variations/variations-typography.js
index 208ed822b5a6f..689340cee9bd8 100644
--- a/packages/edit-site/src/components/global-styles/variations/variations-typography.js
+++ b/packages/edit-site/src/components/global-styles/variations/variations-typography.js
@@ -35,7 +35,11 @@ export default function TypographyVariations( { title, gap = 2 } ) {
 				{ typographyVariations &&
 					typographyVariations.length &&
 					typographyVariations.map( ( variation, index ) => (
-						<Variation key={ index } variation={ variation }>
+						<Variation
+							key={ index }
+							variation={ variation }
+							property="typography"
+						>
 							{ ( isFocused ) => (
 								<PreviewIframe
 									label={ variation?.title }