feat: 🎸 Theming for Storybooks

.storybook/preview.js

@@ -0,0 +1,10 @@
+// import scss using scss-loader file
+import '!style-loader!css-loader!postcss-loader!sass-loader!./scss-loader.scss'
+import { dark, light } from './themes'
+
+export const parameters = {
+  darkMode: {
+    dark,
+    light,
+  }
+}

.storybook/scss-loader.scss

@@ -0,0 +1,2 @@
+// load global styles used by storybook
+@use '../libs/chlorophyll/src/lib/index.scss';

.storybook/themes.js

@@ -0,0 +1,46 @@
+import { create } from '@storybook/theming'
+
+const common = {
+  appBorderRadius: 3,
+  brandImage: 'https://user-images.githubusercontent.com/11420341/121186039-f6eeda00-c866-11eb-9d80-21d01d065f0a.png',
+  brandTitle: 'Green',
+  brandUrl: 'https://github.com/sebgroup/green',
+  fontCode: 'monospace',
+  gridCellSize: 10,
+  inputBorderRadius: 7,
+}
+
+export const light = create({
+  ...common,
+  base: 'light',
+  appBg: 'rgb(238, 238, 238)',
+  appBorderColor: 'rgb(70, 70, 70)',
+  appContentBg: '#ffffff',
+  barBg: 'rgb(26, 26, 26)',
+  barSelectedColor: '#8fd668',
+  barTextColor: '#ffffff',
+  colorSecondary: 'rgb(75, 136, 37)',
+  inputBg: '#ffffff',
+  inputBorder: 'solid black 10px',
+  inputTextColor: 'rgb(41, 41, 41)',
+  textColor: 'rgb(41, 41, 41)',
+  textMutedColor: 'rgb(52, 52, 52)',
+})
+
+
+export const dark = create({
+  ...common,
+  base: 'dark',
+  appBg: '#222222',
+  appBorderColor: '#121212',
+  appContentBg: '#272727',
+  barBg: '#121212',
+  barSelectedColor: '#8fd668',
+  // barTextColor: '#ffffff',
+  colorSecondary: 'rgb(48, 134, 2)',
+  // inputBg: '#ffffff',
+  // inputBorder: 'solid black 10px',
+  // inputTextColor: 'rgb(41, 41, 41)',
+  textColor: '#dedede',
+  // textMutedColor: 'rgb(52, 52, 52)',*/
+})

libs/chlorophyll/.storybook/preview.js

@@ -1,2 +1,5 @@
-// import scss using scss-loader file
-import '!style-loader!css-loader!postcss-loader!sass-loader!./scss-loader.scss';
+import { parameters as baseParameters } from '../../../.storybook/preview'
+
+export const parameters = {
+  ...baseParameters,
+}

package.json

@@ -83,6 +83,7 @@
     "@storybook/html": "^6.3.7",
     "@storybook/manager-webpack5": "^6.3.7",
     "@storybook/react": "^6.3.7",
+    "@storybook/theming": "^6.3.7",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",

yarn.lock

@@ -3445,7 +3445,7 @@
     prettier "~2.2.1"
     regenerator-runtime "^0.13.7"
 
-"@storybook/theming@6.3.7":
+"@storybook/theming@6.3.7", "@storybook/theming@^6.3.7":
   version "6.3.7"
   resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.3.7.tgz#6daf9a21b26ed607f3c28a82acd90c0248e76d8b"
   integrity sha512-GXBdw18JJd5jLLcRonAZWvGGdwEXByxF1IFNDSOYCcpHWsMgTk4XoLjceu9MpXET04pVX51LbVPLCvMdggoohg==