From cb8668f91949fa21c7f45200cf7e205dd6b87930 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Johan=20=C3=96brink?= Date: Wed, 25 Aug 2021 11:44:37 +0200 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Theming=20for=20Stor?= =?UTF-8?q?ybooks?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/preview.js | 10 ++++++ .storybook/scss-loader.scss | 2 ++ .storybook/themes.js | 32 ++++++++++++++++++++ libs/chlorophyll/.storybook/preview.js | 7 +++-- libs/chlorophyll/.storybook/scss-loader.scss | 2 -- package.json | 11 ++++--- yarn.lock | 12 ++++---- 7 files changed, 61 insertions(+), 15 deletions(-) create mode 100644 .storybook/preview.js create mode 100644 .storybook/scss-loader.scss create mode 100644 .storybook/themes.js delete mode 100644 libs/chlorophyll/.storybook/scss-loader.scss diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 0000000000..03bca22009 --- /dev/null +++ b/.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, + } +} diff --git a/.storybook/scss-loader.scss b/.storybook/scss-loader.scss new file mode 100644 index 0000000000..32491825e1 --- /dev/null +++ b/.storybook/scss-loader.scss @@ -0,0 +1,2 @@ +// load global styles used by storybook +@use '../libs/chlorophyll/src/lib/index.scss'; diff --git a/.storybook/themes.js b/.storybook/themes.js new file mode 100644 index 0000000000..90fa8ea6f5 --- /dev/null +++ b/.storybook/themes.js @@ -0,0 +1,32 @@ +import { create } from '@storybook/theming' + +export const light = create({ + base: 'light', + appBg: '#fab', + appBorderColor: 'green', + appBorderRadius: 5, + appContentBg: 'blue', + barBg: 'grey', + barSelectedColor: 'darkgrey', + barTextColor: 'white', + brandImage: 'https://seb.se/Static/Images/SebLogo.svg', + brandTitle: 'Green', + brandUrl: 'https://seb.se', + colorPrimary: 'blue', + colorSecondary: 'cyan', + fontBase: 'SEBSansSerif', + fontCode: 'monospace', + gridCellSize: 10, + inputBg: 'yellow', + inputBorder: 'solid black 10px', + inputBorderRadius: 7, + inputTextColor: 'magenta', + textColor: '#ff0000', + textInverseColor: '#00ffff', + textMutedColor: '#999999', +}) + + +export const dark = create({ + base: 'dark', +}) diff --git a/libs/chlorophyll/.storybook/preview.js b/libs/chlorophyll/.storybook/preview.js index 135ef2b4c9..8052d26c46 100644 --- a/libs/chlorophyll/.storybook/preview.js +++ b/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, +} diff --git a/libs/chlorophyll/.storybook/scss-loader.scss b/libs/chlorophyll/.storybook/scss-loader.scss deleted file mode 100644 index 6e6091f054..0000000000 --- a/libs/chlorophyll/.storybook/scss-loader.scss +++ /dev/null @@ -1,2 +0,0 @@ -// load global styles used by storybook -@use '../src/lib'; diff --git a/package.json b/package.json index 68f3f1b977..bfd1c7211e 100644 --- a/package.json +++ b/package.json @@ -75,14 +75,15 @@ "@nrwl/web": "12.7.0", "@nrwl/workspace": "^12.7.0", "@storybook/addon-docs": "^6.3.7", - "@storybook/addon-essentials": "~6.3.0", + "@storybook/addon-essentials": "~6.3.7", "@storybook/addon-links": "^6.3.7", "@storybook/addon-postcss": "^2.0.0", - "@storybook/angular": "~6.3.0", - "@storybook/builder-webpack5": "~6.3.0", + "@storybook/angular": "~6.3.7", + "@storybook/builder-webpack5": "~6.3.7", "@storybook/html": "^6.3.7", - "@storybook/manager-webpack5": "~6.3.0", - "@storybook/react": "~6.3.0", + "@storybook/manager-webpack5": "~6.3.7", + "@storybook/react": "~6.3.7", + "@storybook/theming": "^6.3.7", "@svgr/webpack": "^5.4.0", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "11.2.6", diff --git a/yarn.lock b/yarn.lock index bd56dd8449..8fd96b2476 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2893,7 +2893,7 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/addon-essentials@~6.3.0": +"@storybook/addon-essentials@~6.3.7": version "6.3.7" resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-6.3.7.tgz#5af605ab705e938c5b25a7e19daa26e5924fd4e4" integrity sha512-ZWAW3qMFrrpfSekmCZibp/ivnohFLJdJweiIA0CLnuCNuuK9kQdpFahWdvyBy5NlCj3UJwB7epTZYZyHqYW7UQ== @@ -2992,7 +2992,7 @@ global "^4.4.0" regenerator-runtime "^0.13.7" -"@storybook/angular@~6.3.0": +"@storybook/angular@~6.3.7": version "6.3.7" resolved "https://registry.yarnpkg.com/@storybook/angular/-/angular-6.3.7.tgz#1057171897b350f08deca13a229adfbcf9a52739" integrity sha512-BTtZLlmmsIEpExVIvJ7u9aPnUI7uuBlQpiN5t6xKpiP/Ba2k74vinW0FnJq7KX0Z0bxM4A8fr2B/KJHjxHnfxg== @@ -3126,7 +3126,7 @@ webpack-hot-middleware "^2.25.0" webpack-virtual-modules "^0.2.2" -"@storybook/builder-webpack5@~6.3.0": +"@storybook/builder-webpack5@~6.3.7": version "6.3.7" resolved "https://registry.yarnpkg.com/@storybook/builder-webpack5/-/builder-webpack5-6.3.7.tgz#7db89160e91fe988b724340e6999ff453799744d" integrity sha512-nenxN9uLnZs4mLjK5RsaduVau8Sb6EO74Sly2xpfTxridRtt3Viw81J1HWr/4vj/FgnN/UONQ9kgstIE6s5MIw== @@ -3492,7 +3492,7 @@ webpack-dev-middleware "^3.7.3" webpack-virtual-modules "^0.2.2" -"@storybook/manager-webpack5@~6.3.0": +"@storybook/manager-webpack5@~6.3.7": version "6.3.7" resolved "https://registry.yarnpkg.com/@storybook/manager-webpack5/-/manager-webpack5-6.3.7.tgz#2375010625008a3912664f6877bedb75e40fb7f8" integrity sha512-ikibiIco9X6r2BpAnumJSGEJCwCwPtH4XsDFKRMM/GkrilNR8k6UXv8EB/eSIGjLF5FG3yHs6AX0YcQQ760xfA== @@ -3575,7 +3575,7 @@ react-docgen-typescript "^2.0.0" tslib "^2.0.0" -"@storybook/react@~6.3.0": +"@storybook/react@~6.3.7": version "6.3.7" resolved "https://registry.yarnpkg.com/@storybook/react/-/react-6.3.7.tgz#b15259aeb4cdeef99cc7f09d21db42e3ecd7a01a" integrity sha512-4S0iCQIzgi6PdAtV2sYw4uL57yIwbMInNFSux9CxPnVdlxOxCJ+U8IgTxD4tjkTvR4boYSEvEle46ns/bwg5iQ== @@ -3644,7 +3644,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== From 5db99d845e3c90bf13bd70c2b9b9811631ea21f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Johan=20=C3=96brink?= Date: Sun, 29 Aug 2021 15:33:34 +0200 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Reasonable=20theming?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/themes.js | 54 ++++++++++++++++++++++++++++---------------- 1 file changed, 34 insertions(+), 20 deletions(-) diff --git a/.storybook/themes.js b/.storybook/themes.js index 90fa8ea6f5..5398bf2308 100644 --- a/.storybook/themes.js +++ b/.storybook/themes.js @@ -1,32 +1,46 @@ import { create } from '@storybook/theming' -export const light = create({ - base: 'light', - appBg: '#fab', - appBorderColor: 'green', - appBorderRadius: 5, - appContentBg: 'blue', - barBg: 'grey', - barSelectedColor: 'darkgrey', - barTextColor: 'white', - brandImage: 'https://seb.se/Static/Images/SebLogo.svg', +const common = { + appBorderRadius: 3, + brandImage: 'https://user-images.githubusercontent.com/11420341/121186039-f6eeda00-c866-11eb-9d80-21d01d065f0a.png', brandTitle: 'Green', - brandUrl: 'https://seb.se', - colorPrimary: 'blue', - colorSecondary: 'cyan', - fontBase: 'SEBSansSerif', + brandUrl: 'https://github.com/sebgroup/green', fontCode: 'monospace', gridCellSize: 10, - inputBg: 'yellow', - inputBorder: 'solid black 10px', inputBorderRadius: 7, - inputTextColor: 'magenta', - textColor: '#ff0000', - textInverseColor: '#00ffff', - textMutedColor: '#999999', +} + +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)',*/ })