chore(storybook): use custom themes and add dark mode support

3 files changed, 81 insertions, 0 deletions

diff --git a/.storybook/themes/common.js b/.storybook/themes/common.js
new file mode 100644
index 0000000..17619c2
--- /dev/null
+++ b/.storybook/themes/common.js
@@ -0,0 +1,8 @@
+export const brand = {
+  title: 'Design system',
+};
+
+export const fontFamilies = {
+  mono: '"Cousine", "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace',
+  primary: '"Inter", "Liberation Sans", Arial, sans-serif',
+};
diff --git a/.storybook/themes/dark.js b/.storybook/themes/dark.js
new file mode 100644
index 0000000..e23703b
--- /dev/null
+++ b/.storybook/themes/dark.js
@@ -0,0 +1,37 @@
+import { create } from '@storybook/theming';
+import { brand, fontFamilies } from './common';
+
+const colors = {
+  black: 'hsl(208, 25%, 11%)',
+  blackBright: 'hsl(208, 21%, 15%)',
+  blue: 'hsl(200, 50%, 68%)',
+  blueBright: 'hsl(200, 55%, 70%)',
+  grey: 'hsl(208, 10%, 70%)',
+  greyDark: 'hsl(208, 20%, 25%)',
+  greyDarker: 'hsl(208, 18%, 20%)',
+  white: 'hsl(208, 25%, 92%)',
+  whiteDark: 'hsl(206, 20%, 93%)',
+};
+
+export default create({
+  base: 'dark',
+  brandTitle: brand.title,
+  colorPrimary: colors.blue,
+  colorSecondary: colors.blueBright,
+  appBg: colors.black,
+  appContentBg: colors.black,
+  appBorderColor: colors.greyDark,
+  appBorderRadius: 3,
+  fontBase: fontFamilies.primary,
+  fontCode: fontFamilies.mono,
+  textColor: colors.white,
+  textInverseColor: colors.black,
+  textMutedColor: colors.grey,
+  barTextColor: colors.white,
+  barSelectedColor: colors.blueBright,
+  barBg: colors.blackBright,
+  inputBg: colors.greyDarker,
+  inputBorder: colors.greyDark,
+  inputTextColor: colors.white,
+  inputBorderRadius: 0,
+});
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,
+});