From 3ed7f185e82c0cc87c63b75dc8cddfecc5c608ce Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Sun, 22 May 2022 17:39:39 +0200 Subject: chore(storybook): use custom themes and add dark mode support --- .storybook/themes/light.js | 36 ++++++++++++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 .storybook/themes/light.js (limited to '.storybook/themes/light.js') diff --git a/.storybook/themes/light.js b/.storybook/themes/light.js new file mode 100644 index 0000000..d445272 --- /dev/null +++ b/.storybook/themes/light.js @@ -0,0 +1,36 @@ +import { create } from '@storybook/theming'; +import { brand, fontFamilies } from './common'; + +const colors = { + black: 'hsl(207, 47%, 11%)', + blue: 'hsl(206, 75%, 31%)', + blueBright: 'hsl(206, 77%, 36%)', + grey: 'hsl(206, 15%, 80%)', + greyBright: 'hsl(206, 20%, 86%)', + greyDark: 'hsl(206, 30%, 30%)', + white: 'hsl(206, 15%, 97%)', + whiteDark: 'hsl(206, 20%, 93%)', +}; + +export default create({ + base: 'light', + brandTitle: brand.title, + colorPrimary: colors.blue, + colorSecondary: colors.blueBright, + appBg: colors.white, + appContentBg: colors.white, + appBorderColor: colors.grey, + appBorderRadius: 3, + fontBase: fontFamilies.primary, + fontCode: fontFamilies.mono, + textColor: colors.black, + textInverseColor: colors.white, + textMutedColor: colors.greyDark, + barTextColor: colors.black, + barSelectedColor: colors.blueBright, + barBg: colors.whiteDark, + inputBg: colors.greyBright, + inputBorder: colors.grey, + inputTextColor: colors.black, + inputBorderRadius: 0, +}); -- cgit v1.2.3