diff --git a/package.json b/package.json
index 0a4f004fa4d..b7ed35ed00c 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
"node": ">=v16.13.1"
},
"scripts": {
- "storybook": "start-storybook -p 6006 -c storybook",
+ "storybook": "IS_DEV=true start-storybook -p 6006 -c storybook",
"storybook:build": "build-storybook -c storybook -o storybook/public --no-manager-cache",
"eslint": "eslint . -c .eslintrc.js --ext .ts,.tsx",
"prettier": "prettier --check '**/*'",
diff --git a/storybook/assets/kaizen-badge.svg b/storybook/assets/kaizen-badge.svg
new file mode 100644
index 00000000000..7276bf0544d
--- /dev/null
+++ b/storybook/assets/kaizen-badge.svg
@@ -0,0 +1,3 @@
+
diff --git a/storybook/constants.ts b/storybook/constants.ts
index e5468259051..e0f2174bf6b 100644
--- a/storybook/constants.ts
+++ b/storybook/constants.ts
@@ -6,6 +6,17 @@ export const CATEGORIES = {
deprecated: "Deprecated",
tailwind: "Systems/Tailwind",
systems: "Systems",
+ aio: "AIO",
+}
+
+export const CATEGORIES_ICON = {
+ [CATEGORIES.introduction]: "👋",
+ [CATEGORIES.components]: "⚙️",
+ [CATEGORIES.helpers]: "🤝",
+ [CATEGORIES.designTokens]: "🎨",
+ [CATEGORIES.deprecated]: "💣",
+ [CATEGORIES.systems]: "🤖",
+ [CATEGORIES.aio]: "📦",
}
export const SUB_CATEGORIES = {
diff --git a/storybook/main.ts b/storybook/main.ts
index aa0b58154e1..b1e96a99026 100644
--- a/storybook/main.ts
+++ b/storybook/main.ts
@@ -47,4 +47,5 @@ module.exports = {
"storybook-addon-designs",
],
presets: [path.resolve("./storybook/header-preset/preset")],
+ staticDirs: [{ from: "./assets", to: "/static/media" }],
}
diff --git a/storybook/manager-head.html b/storybook/manager-head.html
new file mode 100644
index 00000000000..f71b4d0d516
--- /dev/null
+++ b/storybook/manager-head.html
@@ -0,0 +1,20 @@
+
+
+
+
+
diff --git a/storybook/manager.ts b/storybook/manager.ts
deleted file mode 100644
index d94bed3f5e5..00000000000
--- a/storybook/manager.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// This file is used by storybook to register installed addons.
-// See: https://storybook.js.org/docs/addons/using-addons/
-import { addons } from "@storybook/addons"
-import KaizenTheme from "./theme"
-
-addons.setConfig({
- theme: KaizenTheme,
- analyticsGTM: {
- gtmId: "GTM-KS4VWLT",
- },
-})
diff --git a/storybook/manager.tsx b/storybook/manager.tsx
new file mode 100644
index 00000000000..e1ff2dd4e07
--- /dev/null
+++ b/storybook/manager.tsx
@@ -0,0 +1,37 @@
+// This file is used by storybook to register installed addons.
+// See: https://storybook.js.org/docs/addons/using-addons/
+import React from "react"
+import { addons } from "@storybook/addons"
+import { defaultTheme } from "@kaizen/design-tokens"
+import { CATEGORIES_ICON } from "./constants"
+import KaizenTheme from "./theme"
+
+const colors = defaultTheme.color
+
+addons.setConfig({
+ theme: KaizenTheme,
+ analyticsGTM: {
+ gtmId: "GTM-KS4VWLT",
+ },
+ sidebar: {
+ renderLabel: item =>
+ item.type === "root" ? (
+
+
+ {CATEGORIES_ICON[item.name]}
+
+ {item.name}
+
+ ) : (
+ item.name
+ ),
+ },
+})
diff --git a/storybook/theme.ts b/storybook/theme.ts
index 77ece855c5c..677d2f1121d 100644
--- a/storybook/theme.ts
+++ b/storybook/theme.ts
@@ -1,17 +1,38 @@
/* eslint import/no-extraneous-dependencies: 0 */
-
-import { create } from "@storybook/theming/create"
+import { ThemeVars, create } from "@storybook/theming"
import { defaultTheme } from "@kaizen/design-tokens"
+const logo = require("./assets/kaizen-badge.svg")
+const colors = defaultTheme.color
-export default create({
+// For styles that cannot be achieved through the folowing config, see
+// storybook/manager-head.html or storybook/manager.tsx
+const theme: ThemeVars = create({
base: "light",
- brandTitle: "🌱 Storybook",
-
+ colorSecondary: colors.purple["600"],
+ // UI
+ appBg: colors.purple["100"],
+ appContentBg: colors.white,
+ appBorderColor: colors.gray["300"],
+ appBorderRadius: 7,
// Typography
fontBase: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
fontCode: "monospace",
-
// Text colors
- // Doesn't seem to like CSS Variables wah
- textColor: defaultTheme.color.purple["800"],
+ textColor: colors.purple["800"],
+ textInverseColor: colors.white,
+ textMutedColor: "rgba(85, 75, 95)",
+ // Toolbar default and active colors
+ barTextColor: colors.gray["600"],
+ barSelectedColor: colors.purple["600"],
+ barBg: colors.white,
+ // Form colors
+ inputBg: colors.white,
+ inputBorder: colors.gray["500"],
+ inputTextColor: colors.gray["600"],
+ inputBorderRadius: 20,
+ brandTitle: "Kaizen Storybook",
+ brandImage:
+ process.env.IS_DEV === "true" ? logo : "./static/media/kaizen-badge.svg",
})
+
+export default theme