Automatic CSS Variable fallbacks (Components CSS)

packages/components/package.json

@@ -27,6 +27,7 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.11.2",
+		"@emotion/cache": "^10.0.22",
 		"@emotion/core": "^10.0.22",
 		"@emotion/css": "^10.0.22",
 		"@emotion/native": "^10.0.22",
@@ -60,6 +61,7 @@
 		"react-use-gesture": "^7.0.15",
 		"reakit": "^1.1.0",
 		"rememo": "^3.0.0",
+		"stylis-plugin-css-variables": "^1.0.6",
 		"tinycolor2": "^1.4.1",
 		"uuid": "^8.3.0"
 	},

packages/components/src/box-control/styles/box-control-visualizer-styles.js

@@ -31,7 +31,6 @@ export const Container = styled.div`
 
 export const Side = styled.div`
 	box-sizing: border-box;
-	background: ${ color( 'blue.wordpress.700' ) };
 	background: ${ color( 'ui.theme' ) };
 	filter: brightness( 1 );
 	opacity: 0;

packages/components/src/focal-point-picker/styles/focal-point-style.js

@@ -45,6 +45,5 @@ export const PointerIconPathOutline = styled( Path )`
 `;
 
 export const PointerIconPathFill = styled( Path )`
-	fill: ${ color( 'blue.wordpress.700' ) };
 	fill: ${ color( 'ui.theme' ) };
 `;

packages/components/src/index.js

@@ -98,6 +98,7 @@ export { default as SelectControl } from './select-control';
 export { default as Snackbar } from './snackbar';
 export { default as SnackbarList } from './snackbar/list';
 export { default as Spinner } from './spinner';
+export { default as __experimentalStyledProvider } from './styled-provider';
 export { default as TabPanel } from './tab-panel';
 export { default as __experimentalText } from './text';
 export { default as TextControl } from './text-control';

packages/components/src/index.native.js

@@ -37,6 +37,7 @@ export { default as ExternalLink } from './external-link';
 export { default as TextControl } from './text-control';
 export { default as ToggleControl } from './toggle-control';
 export { default as SelectControl } from './select-control';
+export { default as __experimentalStyledProvider } from './styled-provider';
 export { default as RangeControl } from './range-control';
 export { default as ResizableBox } from './resizable-box';
 export { default as FooterMessageControl } from './footer-message-control';

packages/components/src/range-control/styles/range-control-styles.js

@@ -33,7 +33,6 @@ const wrapperMargin = ( { marks } ) =>
 
 export const Wrapper = styled.span`
 	box-sizing: border-box;
-	color: ${ color( 'blue.medium.focus' ) };
 	display: block;
 	flex: 1;
 	padding-top: 15px;

packages/components/src/styled-provider/index.js

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import createEmotionCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/core';
+import stylisPluginCssVariables from 'stylis-plugin-css-variables';
+import memoize from 'memize';
+
+const createCustomCache = memoize( () => {
+	return createEmotionCache( {
+		stylisPlugins: [ stylisPluginCssVariables() ],
+	} );
+} );
+
+function StyledProvider( { children, ...props } ) {
+	return (
+		<CacheProvider { ...props } value={ createCustomCache() }>
+			{ children }
+		</CacheProvider>
+	);
+}
+
+export default StyledProvider;

packages/components/src/styled-provider/index.native.js

@@ -0,0 +1,6 @@
+/*
+ * Implementation not required (at the moment) for react-native style rendering.
+ */
+export default function StyledProvider( { children } ) {
+	return children;
+}

packages/edit-site/src/components/editor/index.js

@@ -9,6 +9,7 @@ import {
 	Popover,
 	FocusReturnProvider,
 	Button,
+	__experimentalStyledProvider as StyledProvider,
 } from '@wordpress/components';
 import { EntityProvider } from '@wordpress/core-data';
 import {
@@ -165,7 +166,7 @@ function Editor() {
 	}, [ isNavigationOpen ] );
 
 	return (
-		<>
+		<StyledProvider>
 			<EditorStyles styles={ settings.styles } />
 			<FullscreenMode isActive={ isFullscreenActive } />
 			<UnsavedChangesWarning />
@@ -293,7 +294,7 @@ function Editor() {
 					</EntityProvider>
 				</DropZoneProvider>
 			</SlotFillProvider>
-		</>
+		</StyledProvider>
 	);
 }
 export default Editor;

packages/editor/src/components/provider/index.js

@@ -7,6 +7,7 @@ import memize from 'memize';
 /**
  * WordPress dependencies
  */
+import { __experimentalStyledProvider as StyledProvider } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { Component } from '@wordpress/element';
 import { withDispatch, withSelect } from '@wordpress/data';
@@ -271,7 +272,7 @@ class EditorProvider extends Component {
 		);
 
 		return (
-			<>
+			<StyledProvider>
 				<EditorStyles styles={ settings.styles } />
 				<EntityProvider kind="root" type="site">
 					<EntityProvider
@@ -296,7 +297,7 @@ class EditorProvider extends Component {
 						</BlockContextProvider>
 					</EntityProvider>
 				</EntityProvider>
-			</>
+			</StyledProvider>
 		);
 	}
 }

storybook/decorators/index.js

@@ -0,0 +1 @@
+export { default as withStyledProvider } from './with-styled-provider';

storybook/decorators/with-styled-provider.js

@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import { __experimentalStyledProvider as StyledProvider } from '../../packages/components/src/index';
+
+function withStyledProvider( storyFn ) {
+	return <StyledProvider>{ storyFn() }</StyledProvider>;
+}
+
+export default withStyledProvider;

storybook/preview.js

@@ -15,7 +15,9 @@ import '@wordpress/components/build-style/style.css';
 /**
  * Internal dependencies
  */
+import { withStyledProvider } from './decorators';
 import './style.scss';
 
 addDecorator( withA11y );
 addDecorator( withKnobs );
+addDecorator( withStyledProvider );