add custom storybook theme

.storybook/manager-head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="manager.css" />

.storybook/manager.js

@@ -0,0 +1,4 @@
+import { addons } from "@storybook/addons";
+import { light } from "./themes";
+
+addons.setConfig({ theme: light });

.storybook/manager.scss

@@ -0,0 +1,7 @@
+@use '../src/tokens.css';
+
+.sidebar-item {
+  svg {
+    color: inherit;
+  }
+}

.storybook/themes.js

@@ -0,0 +1,37 @@
+import { create, themes } from '@storybook/theming';
+
+export const light = create({
+  base: 'light',
+
+  colorPrimary: themes.light.colorPrimary,
+  colorSecondary: '#06566a',
+
+  // UI
+  appBg: '#eceff3',
+  appContentBg: themes.light.appContentBg,
+  appBorderColor: themes.light.appBorderColor,
+  appBorderRadius: themes.light.appBorderRadius,
+
+  // Typography
+  fontBase: '"Helvetica Neue","Helvetica","Arial",sans-serif',
+  fontCode: themes.light.fontCode,
+
+  // Text colors
+  textColor: '#444f52',
+  textInverseColor: themes.light.textInverseColor,
+
+  // Toolbar default and active colors
+  barTextColor: '#74b2c1',
+  barSelectedColor: '#06566a',
+  barBg: themes.light.barBg,
+
+  // Form colors
+  inputBg: themes.light.inputBg,
+  inputBorder: themes.light.inputBorder,
+  inputTextColor: themes.light.inputTextColor,
+  inputBorderRadius: themes.light.inputBorderRadius,
+
+  brandTitle: 'kickstartDS storybook',
+  brandUrl: 'https://kickstartds.com',
+  brandImage: '/logo.svg',
+});

package.json

@@ -9,7 +9,7 @@
     "dist"
   ],
   "scripts": {
-    "build-storybook": "run-p sass schema token && build-storybook -s static",
+    "build-storybook": "run-p sass sass-manager schema token && build-storybook -s static",
     "chromatic": "chromatic --project-token $CHROMATIC_PROJECT_TOKEN --build-script-name 'build-storybook' --skip '@(renovate/**|dependabot/**)' --exit-zero-on-changes --exit-once-uploaded",
     "dist:js": "esbuild index=src/dist.js --outdir=dist --format=esm --bundle --minify --splitting",
     "dist:sass": "sass --load-path=node_modules src/dist.scss dist/index.css",
@@ -19,8 +19,10 @@
     "dist:images": "cp -r static/img static/patterns static/logo.svg dist/",
     "prepublishOnly": "rm -rf dist && mkdir -p dist && run-p dist:*",
     "sass": "sass --load-path=node_modules src/index.scss static/index.css",
+    "sass-manager": "sass --load-path=node_modules .storybook/manager.scss static/manager.css",
     "token": "node scripts/customPropertyExtract.js",
-    "watch:sass": "yarn sass -- --watch",
+    "watch:sass": "yarn sass --watch",
+    "watch:sass-manager": "yarn sass-manager --watch",
     "watch:schema": "yarn schema && chokidar \"src/**/*.schema.json\" -c \"yarn schema {path}\"",
     "watch:token": "yarn token && chokidar \"src/**/*-tokens.scss\" -c \"yarn token {path}\"",
     "schema": "node scripts/schema.js",
@@ -41,10 +43,12 @@
     "@auto-it/released": "^10.29.3",
     "@babel/core": "^7.14.3",
     "@kickstartds/storybook-addon-component-tokens": "^0.1.4",
-    "@storybook/addon-actions": "^6.3.6",
-    "@storybook/addon-essentials": "^6.3.6",
-    "@storybook/addon-links": "^6.3.6",
-    "@storybook/react": "^6.3.6",
+    "@storybook/addon-actions": "^6.3.8",
+    "@storybook/addon-essentials": "^6.3.8",
+    "@storybook/addon-links": "^6.3.8",
+    "@storybook/addons": "^6.3.8",
+    "@storybook/react": "^6.3.8",
+    "@storybook/theming": "^6.3.8",
     "@whitespace/storybook-addon-html": "git+https://github.com/lmestel/storybook-addon-html.git#v5.2.0",
     "auto": "^10.29.3",
     "babel-loader": "^8.2.2",