56 lines
1.9 KiB
JavaScript
56 lines
1.9 KiB
JavaScript
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)
|