Storybook: Add theme switcher tool (#44715)

* Storybook: Add theme switcher

* Add comments

storybook/decorators/with-theme.js

@@ -0,0 +1,28 @@
+/**
+ * Internal dependencies
+ */
+import Theme from '../../packages/components/src/theme';
+
+/**
+ *  A Storybook decorator to show a div before and after the story to check for unwanted margins.
+ */
+
+export const WithTheme = ( Story, context ) => {
+	const themes = {
+		default: {},
+		modern: {
+			accent: '#3858e9',
+		},
+		sunrise: {
+			// This color was chosen intentionally, because for sufficient contrast,
+			// the foreground text should be black when this orange is used as a background color.
+			accent: '#dd823b',
+		},
+	};
+
+	return (
+		<Theme { ...themes[ context.globals.componentsTheme ] }>
+			<Story { ...context } />
+		</Theme>
+	);
+};

storybook/preview.js

@@ -4,6 +4,7 @@
 import { WithGlobalCSS } from './decorators/with-global-css';
 import { WithMarginChecker } from './decorators/with-margin-checker';
 import { WithRTL } from './decorators/with-rtl';
+import { WithTheme } from './decorators/with-theme';
 import './style.scss';
 
 export const globalTypes = {
@@ -19,6 +20,19 @@ export const globalTypes = {
 			],
 		},
 	},
+	componentsTheme: {
+		name: 'Theme',
+		description: 'Change the components theme. (Work in progress)',
+		defaultValue: 'default',
+		toolbar: {
+			icon: 'paintbrush',
+			items: [
+				{ value: 'default', title: 'Default' },
+				{ value: 'modern', title: 'Modern' },
+				{ value: 'sunrise', title: 'Sunrise' },
+			],
+		},
+	},
 	css: {
 		name: 'Global CSS',
 		description:
@@ -51,7 +65,12 @@ export const globalTypes = {
 	},
 };
 
-export const decorators = [ WithGlobalCSS, WithMarginChecker, WithRTL ];
+export const decorators = [
+	WithTheme,
+	WithGlobalCSS,
+	WithMarginChecker,
+	WithRTL,
+];
 
 export const parameters = {
 	controls: {