diff --git a/packages/block-editor/src/components/inspector-controls/fill.js b/packages/block-editor/src/components/inspector-controls/fill.js
index af3478252de6d..ae02bbf00be9d 100644
--- a/packages/block-editor/src/components/inspector-controls/fill.js
+++ b/packages/block-editor/src/components/inspector-controls/fill.js
@@ -7,6 +7,8 @@ import { isEmpty } from 'lodash';
  * WordPress dependencies
  */
 import {
+	__experimentalContextSystemProvider as ContextSystemProvider,
+	__experimentalSizeVariantContext as SIZE_VARIANT_CONTEXT,
 	__experimentalStyleProvider as StyleProvider,
 	__experimentalToolsPanelContext as ToolsPanelContext,
 } from '@wordpress/components';
@@ -42,9 +44,13 @@ export default function InspectorControlsFill( {
 					// Provider in this subtree.
 					const value = ! isEmpty( fillProps ) ? fillProps : null;
 					return (
-						<ToolsPanelContext.Provider value={ value }>
-							{ children }
-						</ToolsPanelContext.Provider>
+						<ContextSystemProvider
+							value={ SIZE_VARIANT_CONTEXT[ '40px' ] }
+						>
+							<ToolsPanelContext.Provider value={ value }>
+								{ children }
+							</ToolsPanelContext.Provider>
+						</ContextSystemProvider>
 					);
 				} }
 			</Fill>
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 0c142746ab2af..bd835c1ab8ddf 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -55,6 +55,10 @@ export {
 	useCompositeState as __unstableUseCompositeState,
 } from './composite';
 export { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';
+export {
+	SIZE_VARIANT_CONTEXT as __experimentalSizeVariantContext,
+	ContextSystemProvider as __experimentalContextSystemProvider,
+} from './ui/context';
 export { default as CustomSelectControl } from './custom-select-control';
 export { default as Dashicon } from './dashicon';
 export { default as DateTimePicker, DatePicker, TimePicker } from './date-time';
diff --git a/packages/components/src/ui/context/constants.js b/packages/components/src/ui/context/constants.js
index b5bee35a35fba..970f212e76ed2 100644
--- a/packages/components/src/ui/context/constants.js
+++ b/packages/components/src/ui/context/constants.js
@@ -8,3 +8,11 @@ export const CONTEXT_COMPONENT_NAMESPACE = 'data-wp-c5tc8t';
  * This is attached to Context connected components as a static property.
  */
 export const CONNECT_STATIC_NAMESPACE = '__contextSystemKey__';
+
+export const SIZE_VARIANT_CONTEXT = {
+	'40px': {
+		InputControl: {
+			size: '__unstable-large',
+		},
+	},
+};
diff --git a/packages/components/src/ui/context/index.ts b/packages/components/src/ui/context/index.ts
index 54694e47304ff..66d4d2aeb65e6 100644
--- a/packages/components/src/ui/context/index.ts
+++ b/packages/components/src/ui/context/index.ts
@@ -1,3 +1,4 @@
+export { SIZE_VARIANT_CONTEXT } from './constants';
 export {
 	ContextSystemProvider,
 	useComponentsContext,
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 793b0939d9014..f132db0dca08a 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -2,8 +2,10 @@
  * WordPress dependencies
  */
 import {
+	__experimentalContextSystemProvider as ContextSystemProvider,
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
+	__experimentalSizeVariantContext as SIZE_VARIANT_CONTEXT,
 } from '@wordpress/components';
 import { getBlockTypes } from '@wordpress/blocks';
 
@@ -97,35 +99,37 @@ function GlobalStylesUI() {
 			className="edit-site-global-styles-sidebar__navigator-provider"
 			initialPath="/"
 		>
-			<GlobalStylesNavigationScreen path="/">
-				<ScreenRoot />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen path="/variations">
-				<ScreenStyleVariations />
-			</GlobalStylesNavigationScreen>
-
-			<GlobalStylesNavigationScreen path="/blocks">
-				<ScreenBlockList />
-			</GlobalStylesNavigationScreen>
+			<ContextSystemProvider value={ SIZE_VARIANT_CONTEXT[ '40px' ] }>
+				<GlobalStylesNavigationScreen path="/">
+					<ScreenRoot />
+				</GlobalStylesNavigationScreen>
 
-			{ blocks.map( ( block ) => (
-				<GlobalStylesNavigationScreen
-					key={ 'menu-block-' + block.name }
-					path={ '/blocks/' + block.name }
-				>
-					<ScreenBlock name={ block.name } />
+				<GlobalStylesNavigationScreen path="/variations">
+					<ScreenStyleVariations />
 				</GlobalStylesNavigationScreen>
-			) ) }
 
-			<ContextScreens />
+				<GlobalStylesNavigationScreen path="/blocks">
+					<ScreenBlockList />
+				</GlobalStylesNavigationScreen>
 
-			{ blocks.map( ( block ) => (
-				<ContextScreens
-					key={ 'screens-block-' + block.name }
-					name={ block.name }
-				/>
-			) ) }
+				{ blocks.map( ( block ) => (
+					<GlobalStylesNavigationScreen
+						key={ 'menu-block-' + block.name }
+						path={ '/blocks/' + block.name }
+					>
+						<ScreenBlock name={ block.name } />
+					</GlobalStylesNavigationScreen>
+				) ) }
+
+				<ContextScreens />
+
+				{ blocks.map( ( block ) => (
+					<ContextScreens
+						key={ 'screens-block-' + block.name }
+						name={ block.name }
+					/>
+				) ) }
+			</ContextSystemProvider>
 		</NavigatorProvider>
 	);
 }