Initial commit: HMDesignSystem baseline

.storybook/manager.js

@@ -0,0 +1,55 @@
+import { createElement } from 'react'
+import { addons } from 'storybook/manager-api'
+import { create } from 'storybook/theming'
+import { decorateHanmacNavigation } from './manager-navigation.js'
+
+// Match the measured Manager content background via its existing CSS variable.
+// Keep mobile navigation, addon tabs,
+// portalled menus and the preview iframe outside this toolbar scope.
+const toolbarStyle = document.createElement('style')
+toolbarStyle.id = 'hm-manager-toolbar-style'
+toolbarStyle.textContent = `
+  .sb-bar[data-testid="sb-preview-toolbar"] {
+    background: var(--color-bg-content);
+    color: #000000;
+  }
+  .sb-bar[data-testid="sb-preview-toolbar"] :is(button, a, [role="tab"], label, span, p, svg) {
+    color: inherit;
+  }
+  .sb-bar[data-testid="sb-preview-toolbar"] :is(button, a, [role="tab"]):hover {
+    background: rgba(0, 0, 0, 0.10);
+  }
+  .sb-bar[data-testid="sb-preview-toolbar"] :is(button, a, [role="tab"]):is([aria-checked="true"], [aria-expanded="true"], [aria-selected="true"]) {
+    background: rgba(0, 0, 0, 0.20);
+  }
+  .sb-bar[data-testid="sb-preview-toolbar"] :is(button, a, [role="tab"]):focus-visible {
+    outline-color: currentColor;
+  }
+`
+document.head.appendChild(toolbarStyle)
+
+addons.setConfig({
+  layout: {
+    showPanel: false,
+  },
+  theme: create({
+    base: 'light',
+    brandTitle: 'HM Design System',
+    brandUrl: './',
+    brandTarget: '_self',
+    fontBase: "'Hanmac Manager Noto Sans KR', 'Noto Sans KR', 'Malgun Gothic', sans-serif",
+    colorPrimary: '#123328',
+    colorSecondary: '#123328',
+    appBg: '#F5F0E5',
+    appContentBg: '#FFFFFF',
+    appPreviewBg: '#FFFFFF',
+    textColor: '#123328',
+    textInverseColor: '#FFFFFF',
+    barSelectedColor: '#123328',
+  }),
+  sidebar: {
+    renderLabel: (item) => createElement('span', { className: 'hm-manager-label' }, item.name),
+  },
+})
+
+addons.register('hm/manager-navigation-style', decorateHanmacNavigation)