add ability to change themes (codesandbox#3308)

* add ability to change themes

* remove theme decorator

* move themesd

Author: SaraVieira

packages/components/.storybook/addons.ts

@@ -3,3 +3,4 @@ import '@storybook/addon-knobs/register';
 import '@storybook/addon-storysource/register';
 import '@storybook/addon-viewport/register';
 import '@storybook/addon-a11y/register';
+import 'storybook-addon-styled-component-theme/dist/register';

packages/components/.storybook/config.tsx

@@ -4,9 +4,11 @@ import { withKnobs } from '@storybook/addon-knobs';
 import { withA11y } from '@storybook/addon-a11y';
 import { addDecorator, addParameters, configure } from '@storybook/react';
 import { themes } from '@storybook/theming';
-import { ThemeDecorator } from './decorators';
 import { createGlobalStyle } from 'styled-components';
+// @ts-ignore
 import global from '@codesandbox/common/lib/global.css';
+import { makeTheme, getThemes } from '../src/components/ThemeProvider';
+import { withThemesProvider } from 'storybook-addon-styled-component-theme';
 
 const viewports = {
   mobile: {
@@ -33,31 +35,38 @@ const GlobalStyle = createGlobalStyle`
   ${global};
   html body {
     font-family: 'Inter', sans-serif;
+    margin: 0;
     background-color: ${props =>
       // @ts-ignore
       props.theme.colors.sideBar.background} !important;
     color: ${props =>
       // @ts-ignore
       props.theme.colors.sideBar.foreground} !important;
-    margin: 0;
-
     * {
       box-sizing: border-box;
     }
+
   }
 `;
 
-export const withGlobal = cb => (
+export const withGlobal = (cb: any) => (
   <>
     <GlobalStyle />
     {cb()}
   </>
 );
 
+const allThemes = getThemes();
+const vsCodeThemes = allThemes.map(b => makeTheme(b, b.name));
+const blackCodesandbox = vsCodeThemes.find(
+  theme => theme.name === 'CodeSandbox Black'
+);
+
+const rest = vsCodeThemes.filter(theme => theme.name !== 'CodeSandbox Black');
+addDecorator(withGlobal);
+addDecorator(withThemesProvider([blackCodesandbox, ...rest]));
 addDecorator(withA11y);
 addDecorator(withKnobs);
-addDecorator(withGlobal);
-addDecorator(ThemeDecorator);
 addParameters({ viewport: { viewports } });
 
 // Option defaults.

packages/components/.storybook/decorators/ThemeDecorator.tsx

@@ -1,2 +1 @@
-export * from './ThemeDecorator';
 export * from './LayoutDecorator';

packages/components/.storybook/decorators/index.ts

@@ -57,6 +57,7 @@
     "if-env": "^1.0.4",
     "np": "^5.2.1",
     "rimraf": "^3.0.0",
+    "storybook-addon-styled-component-theme": "^1.3.0",
     "storybook-chromatic": "^3.4.1",
     "typescript": "3.7.4",
     "yarn": "^1.21.1"

packages/components/package.json

@@ -5,24 +5,21 @@
  * vscode theme - color tokens
  * polyfill - color tokens missing from vscode
  */
-import React from 'react';
 import dot from 'dot-object';
 import deepmerge from 'deepmerge';
-import css from '@styled-system/css';
-import styled, { ThemeProvider as StyledProvider } from 'styled-components';
 import designLanguage from '@codesandbox/common/lib/design-language';
+import VSCodeThemes from '../../themes';
 import polyfillTheme from '../../utils/polyfill-theme';
 
-const ThemeBoundary = styled.div(
-  css({
-    fontFamily: 'Inter, sans-serif',
-    'input, textarea, button': {
-      fontFamily: 'Inter, sans-serif',
-    },
-  })
-);
+export const getThemes = () => {
+  const results = VSCodeThemes.map(theme => ({
+    name: theme.name,
+    ...theme.content,
+  }));
 
-export const ThemeProvider = ({ vsCodeTheme = { colors: {} }, children }) => {
+  return results.filter(a => a);
+};
+export const makeTheme = (vsCodeTheme = { colors: {} }, name: string) => {
   // black is the default, it would be helpful to use storybook-addon-themes
   // to test our components across multiple themes
   // convert vscode colors to dot notation so that we can use them in tokens
@@ -36,9 +33,8 @@ export const ThemeProvider = ({ vsCodeTheme = { colors: {} }, children }) => {
   // merge the design language and vscode theme
   const theme = deepmerge(designLanguage, { colors: polyfilledVSCodeColors });
 
-  return (
-    <StyledProvider theme={theme}>
-      <ThemeBoundary>{children}</ThemeBoundary>
-    </StyledProvider>
-  );
+  return {
+    name,
+    ...theme,
+  };
 };