refactor: use storybook and atomic design (#16)

BREAKING CHANGE: rewrite most of the Typescript types, so the content format (the meta in particular) needs to be updated.

1 files changed, 36 insertions, 0 deletions

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,
+});