feat: storybook theming exploration

.prettierrc

@@ -1,5 +1,4 @@
 {
-  "semi": false,
   "singleQuote": true,
   "arrowParens": "avoid",
   "trailingComma": "none"

.storybook/main.ts

@@ -1,5 +1,5 @@
-import * as path from 'path'
-import type { StorybookConfig } from '@storybook/react-vite'
+import * as path from 'path';
+import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
   stories: [
@@ -10,12 +10,13 @@ const config: StorybookConfig = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
-    'storybook-dark-mode'
+    '@storybook/addon-mdx-gfm'
   ],
   framework: {
     name: '@storybook/react-vite',
     options: {}
   },
+  staticDirs: ['../public/'],
   docs: {
     autodocs: 'tag'
   },
@@ -24,10 +25,10 @@ const config: StorybookConfig = {
       config.resolve.alias = {
         ...config.resolve.alias,
         '@': path.join(__dirname, '../src')
-      }
+      };
     }
 
-    return config
+    return config;
   }
-}
-export default config
+};
+export default config;

.storybook/manager-head.html

@@ -1,5 +1,10 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
+  rel="stylesheet" />
+<link href="/manager.css" rel="stylesheet" />
 <style>
   iframe#storybook-preview-iframe {
     background-color: transparent;
   }
-</style>
+</style>

.storybook/preview-head.html

@@ -1,6 +1,5 @@
 <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link
-  href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
-  rel="stylesheet"
-/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
+  rel="stylesheet" />
+<link href="/preview.css" rel="stylesheet" />

.storybook/preview.ts

@@ -1,15 +1,20 @@
-import { DocsContainer } from './DocsContainer'
-import { themes } from '@storybook/theming'
+import './global.css';
+import { Preview } from '@storybook/react';
+import theme from './theme';
 
-import './global.css'
-
-export const parameters = {
-  backgrounds: { disable: true },
-  darkMode: {
-    dark: { ...themes.dark },
-    light: { ...themes.normal }
-  },
-  docs: {
-    container: DocsContainer
+const preview: Preview = {
+  parameters: {
+    backgrounds: { disable: true },
+    docs: {
+      theme,
+      toc: true
+    },
+    options: {
+      storySort: {
+        order: ['Get Started']
+      }
+    }
   }
-}
+};
+
+export default preview;

.storybook/theme.ts

@@ -1,6 +1,37 @@
-import { create } from '@storybook/theming/create'
+import { create } from '@storybook/theming/create';
+import colors from '../src/colors';
 
 export default create({
   base: 'light',
-  brandTitle: 'NearForm Quantum'
-})
+  brandTitle: 'Quantum',
+  brandImage: '/quantum-logo-light.png',
+
+  fontBase: 'Inter',
+
+  appBg: colors.white.DEFAULT,
+
+  colorPrimary: '#000E38',
+  colorSecondary: '#0C3D60',
+
+  // UI
+  appContentBg: '#ffffff',
+  appPreviewBg: '#ffffff',
+  appBorderColor: '#D1D5DB',
+  appBorderRadius: 4,
+
+  // Text colors
+  textColor: '#111928',
+  textInverseColor: '#111928',
+
+  // Toolbar default and active colors
+  barTextColor: '#fff',
+  barHoverColor: '#7EDCE2',
+  barSelectedColor: '#7EDCE2',
+  barBg: '#000E38',
+
+  // Form colors
+  inputBg: '#ffffff',
+  inputBorder: '#97A1B8',
+  inputTextColor: '#111928',
+  inputBorderRadius: 2
+});