Global Styles: Add theme origin to getStyle (#31267)

packages/edit-site/src/components/editor/global-styles-provider.js

@@ -142,6 +142,7 @@ export default function GlobalStylesProvider( { children, baseStyles } ) {
 
 	const contexts = useMemo( () => getContexts( blockTypes ), [ blockTypes ] );
 
+	const { __experimentalGlobalStylesBaseStyles: themeStyles } = settings;
 	const { userStyles, mergedStyles } = useMemo( () => {
 		let newUserStyles;
 		try {
@@ -191,11 +192,28 @@ export default function GlobalStylesProvider( { children, baseStyles } ) {
 				setContent( JSON.stringify( newContent ) );
 			},
 			getStyle: ( context, propertyName, origin = 'merged' ) => {
-				const styleOrigin =
-					'user' === origin ? userStyles : mergedStyles;
+				if ( origin === 'theme' ) {
+					const value = get(
+						themeStyles?.styles?.[ context ],
+						STYLE_PROPERTY[ propertyName ].value
+					);
+					return getValueFromVariable( themeStyles, context, value );
+				}
+
+				if ( origin === 'user' ) {
+					const value = get(
+						userStyles?.styles?.[ context ],
+						STYLE_PROPERTY[ propertyName ].value
+					);
+
+					// We still need to use merged styles here because the
+					// presets used to resolve user variable may be defined a
+					// layer down ( core, theme, or user ).
+					return getValueFromVariable( mergedStyles, context, value );
+				}
 
 				const value = get(
-					styleOrigin?.styles?.[ context ],
+					mergedStyles?.styles?.[ context ],
 					STYLE_PROPERTY[ propertyName ].value
 				);
 				return getValueFromVariable( mergedStyles, context, value );
@@ -220,7 +238,7 @@ export default function GlobalStylesProvider( { children, baseStyles } ) {
 				setContent( JSON.stringify( newContent ) );
 			},
 		} ),
-		[ content, mergedStyles ]
+		[ content, mergedStyles, themeStyles ]
 	);
 
 	useEffect( () => {