+
+ Check out the source code for this story to see the differences
+ in how these are implemented.
+
+
+ The first group uses `styled` with the `safeTheme` function to
+ access the contextual theme without requiring a root level
+ ThemeProvider to provide the default theme
+
+
+ The second group uses our custom `useTheme` hook which wraps
+ Emotion's own `useTheme` with a simple conditional to
+ return the default theme if none was provided by a ThemeProvider
+
+
+ This is text without the custom theme
+
+ This is text with the custom theme
+
+
+
+ This is text without the custom theme using `css`
+
+
+
+ This is text with the custom theme using `css`
+
+
+
+ );
+};
diff --git a/packages/components/src/utils/hooks/theme/test/index.js b/packages/components/src/utils/hooks/theme/test/index.js
new file mode 100644
index 00000000000000..e53511901601d2
--- /dev/null
+++ b/packages/components/src/utils/hooks/theme/test/index.js
@@ -0,0 +1,93 @@
+/**
+ * External dependencies
+ */
+import { merge } from 'lodash';
+import { css, ThemeProvider } from '@emotion/react';
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { createTheme, safeTheme, useTheme } from '..';
+
+import { CONFIG, COLORS, useCx } from '../../..';
+
+describe( 'theme utils', () => {
+ describe( 'safeTheme', () => {
+ it( 'should return the default theme if a non-WP-theme object is supplied', () => {
+ expect( safeTheme( {} ) ).toMatchObject( {
+ config: CONFIG,
+ colors: COLORS,
+ } );
+ } );
+
+ it( 'should return the overridden theme if a WP theme object is supplied', () => {
+ const theme = createTheme( { colors: { black: 'white' } } );
+
+ expect( safeTheme( theme ) ).toBe( theme );
+ } );
+ } );
+
+ describe( 'createTheme', () => {
+ it( 'should return the merged theme', () => {
+ expect(
+ createTheme( { colors: { black: 'white' } } )
+ ).toMatchObject(
+ merge(
+ { colors: COLORS, config: CONFIG },
+ { colors: { black: 'white' } }
+ )
+ );
+ } );
+
+ it( 'should return a function that merges the ancestor theme', () => {
+ const themeGetter = createTheme(
+ { colors: { black: 'white' } },
+ { isStatic: false }
+ );
+
+ const expectedResult = merge(
+ { colors: COLORS, config: CONFIG },
+ { colors: { white: 'black', black: 'white' } }
+ );
+
+ expect(
+ themeGetter( { colors: { white: 'black' } } )
+ ).toMatchObject( expectedResult );
+ } );
+ } );
+
+ describe( 'useTheme', () => {
+ const Wrapper = () => {
+ const theme = useTheme();
+ const cx = useCx();
+
+ const style = css`
+ color: ${ theme.colors.alert.red };
+ `;
+
+ return