341 lines
13 KiB
CSS
341 lines
13 KiB
CSS
/* Initial Storybook manager mapping from ui_viz. Manager-only; not runtime theme tokens. */
|
|
:root {
|
|
--font-family-base: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
|
|
--hm-green-default: #123328;
|
|
--hm-green-light-1: #205241;
|
|
--hm-green-light-2: #266651;
|
|
--hm-green-light-3: #249473;
|
|
--hm-fg-on-green-secondary: #BDDFD4;
|
|
--color-fg-on-green-primary: #FFFFFF;
|
|
--color-action-primary: #123328;
|
|
--color-action-accent-on-green: #FFC600;
|
|
--color-bg-content: #F5F0E5;
|
|
--color-bg-surface: #FFFFFF;
|
|
--effect-text-border-color: rgba(0, 0, 0, .3);
|
|
--overlay-black-20: rgba(0, 0, 0, .2);
|
|
--overlay-black-30: rgba(0, 0, 0, .3);
|
|
}
|
|
/* Storybook 10.6 manager only. Source: docs/patterns/dashboard-composition.md §6.
|
|
The 18px join / inset geometry follows the current LNB specimen, not a new token. */
|
|
@font-face {
|
|
font-family: 'Hanmac Manager Noto Sans KR';
|
|
src: url('/fonts/NotoSansKR-variable.ttf') format('truetype');
|
|
font-weight: 100 900;
|
|
font-display: swap;
|
|
}
|
|
/* Manager-only alias of the bundled Noto Sans KR asset, followed by the
|
|
Foundation fallback chain (typography.css) instead of a bare sans-serif. */
|
|
:root {
|
|
--hm-manager-font: 'Hanmac Manager Noto Sans KR', var(--font-family-base);
|
|
}
|
|
|
|
/* The Storybook layout panel, outside the sidebar landmark, has a separate
|
|
border. Removing only the landmark's border leaves a one-device-pixel seam. */
|
|
#root div:has(> div > #storybook-sidebar-region) {
|
|
border-right: 0;
|
|
}
|
|
|
|
#storybook-sidebar-region {
|
|
--hm-manager-join: 18px;
|
|
color: var(--color-fg-on-green-primary);
|
|
background: linear-gradient(90deg,
|
|
var(--hm-green-default) 0%, var(--hm-green-light-1) 30%,
|
|
var(--hm-green-light-2) 50%, var(--hm-green-light-3) 90%,
|
|
var(--hm-green-light-2) 100%);
|
|
border-right: 0;
|
|
font-family: var(--hm-manager-font);
|
|
}
|
|
#storybook-sidebar-region [data-radix-scroll-area-content] > div {
|
|
padding: 28px 0 28px 20px;
|
|
}
|
|
/* Keep the native draggable scrollbar in the unused left gutter. The selected
|
|
item must reach the content edge without a scroll thumb crossing its curves.
|
|
Radix supplies left/right inline, so only those two positions need priority. */
|
|
#storybook-sidebar-region > [scrollbarsize] > [data-orientation='vertical'] {
|
|
left: 4px !important;
|
|
right: auto !important;
|
|
width: 6px;
|
|
padding: 0;
|
|
}
|
|
#storybook-sidebar-region > [scrollbarsize] > [data-orientation='vertical'] > div {
|
|
background: var(--hm-fg-on-green-secondary);
|
|
}
|
|
#storybook-sidebar-region .sidebar-header {
|
|
margin: 0 20px 0px 0;
|
|
padding: 0;
|
|
color: var(--color-fg-on-green-primary);
|
|
}
|
|
/* The Settings button is hidden, so the title uses the full header width. */
|
|
#storybook-sidebar-region .sidebar-header > div { margin-right: 0; }
|
|
#storybook-sidebar-region .sidebar-header > div a {
|
|
color: var(--color-fg-on-green-primary);
|
|
font: 700 16px/30px var(--hm-manager-font);
|
|
white-space: normal;
|
|
/* §6 Text Border: brand title keeps the original 1px (no shadow). */
|
|
-webkit-text-stroke: 1px var(--effect-text-border-color);
|
|
paint-order: stroke fill;
|
|
}
|
|
#storybook-sidebar-region .sidebar-header button {
|
|
color: inherit;
|
|
}
|
|
#storybook-sidebar-region [role='search'] {
|
|
margin-right: 20px;
|
|
}
|
|
#storybook-sidebar-region .search-field {
|
|
min-height: 44px;
|
|
border: 1px solid var(--hm-fg-on-green-secondary);
|
|
border-radius: 4px;
|
|
background: var(--color-bg-surface);
|
|
color: var(--color-action-primary);
|
|
}
|
|
#storybook-explorer-searchfield {
|
|
color: var(--color-action-primary);
|
|
font-family: inherit;
|
|
font-size: 14px;
|
|
}
|
|
#storybook-sidebar-region [role='search'] > button {
|
|
color: var(--color-fg-on-green-primary);
|
|
background: transparent;
|
|
border-color: var(--hm-fg-on-green-secondary);
|
|
min-width: 32px;
|
|
height: 44px;
|
|
}
|
|
#storybook-sidebar-region [role='search'] > button:hover {
|
|
background: rgba(0, 0, 0, .10);
|
|
}
|
|
/* Storybook's named creation action only; search/filter remain available. */
|
|
#storybook-sidebar-region button[aria-label='Create a new story'] { display: none; }
|
|
/* Storybook Settings menu trigger only; sidebar search, tag filter and expand/collapse remain. */
|
|
#storybook-sidebar-region .sidebar-header button[aria-label='Settings'] { display: none; }
|
|
/* Storybook sidebar search landmark (input, icon, shortcut hint, tag filter); the tree and header remain. */
|
|
#storybook-sidebar-region [role='search'] { display: none; }
|
|
|
|
#storybook-explorer-tree .sidebar-subheading {
|
|
position: relative;
|
|
margin: 0;
|
|
padding: 0 20px 0 0;
|
|
min-height: 48px;
|
|
color: var(--hm-fg-on-green-secondary);
|
|
}
|
|
#storybook-explorer-tree .sidebar-subheading[data-hm-section]:not([data-hm-section='0']) {
|
|
margin-top: 24px;
|
|
}
|
|
#storybook-explorer-tree .sidebar-subheading[data-hm-section]:not([data-hm-section='0'])::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -12px;
|
|
left: 0;
|
|
right: 20px;
|
|
height: 2px;
|
|
background: linear-gradient(var(--overlay-black-30) 0 50%, rgba(255,255,255,.4) 50% 100%);
|
|
mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
|
|
}
|
|
#storybook-explorer-tree .sidebar-subheading > button {
|
|
min-height: 48px;
|
|
color: inherit;
|
|
font: 700 14px/28px var(--hm-manager-font);
|
|
letter-spacing: 0;
|
|
text-transform: none;
|
|
}
|
|
#storybook-explorer-tree .sidebar-item {
|
|
position: relative;
|
|
margin: 0;
|
|
padding: 0;
|
|
min-height: 48px;
|
|
overflow: visible;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
color: var(--color-fg-on-green-primary);
|
|
}
|
|
/* Manager-only expanded 2-depth branch face: Black 8%, independent of HM LNB CSS.
|
|
The separate Black 20% mapping remains reserved for the selected item's inset depth. */
|
|
#storybook-explorer-tree .sidebar-item[data-hm-group='true'] {
|
|
background: rgba(0, 0, 0, .08);
|
|
box-shadow: inset 1px 0 var(--hm-green-light-2);
|
|
}
|
|
#storybook-explorer-tree .sidebar-item[data-hm-group-start='true'] {
|
|
border-radius: 8px 0 0 0;
|
|
box-shadow: inset 1px 1px var(--hm-green-light-2);
|
|
}
|
|
#storybook-explorer-tree .sidebar-item[data-hm-group-end='true'] {
|
|
border-radius: 0 0 0 8px;
|
|
padding-bottom: 8px;
|
|
box-shadow: inset 1px -1px var(--hm-green-light-2);
|
|
}
|
|
#storybook-explorer-tree .sidebar-item > :is(a[id], button[id]:not([data-testid])) {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
min-height: 48px;
|
|
height: auto;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 10px 32px 10px 18px;
|
|
border: 0;
|
|
border-radius: 4px 0 0 4px;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: 700 14px/28px var(--hm-manager-font);
|
|
text-align: left;
|
|
text-decoration: none;
|
|
white-space: normal;
|
|
overflow: visible;
|
|
text-overflow: clip;
|
|
}
|
|
/* Sub rows (depth 2+): 42px (7px + 28px line + 7px), shorter than the 48px top-level rows. */
|
|
#storybook-explorer-tree .sidebar-item:is([data-hm-depth='2'], [data-hm-depth='3'], [data-hm-depth='4']) {
|
|
min-height: 42px;
|
|
}
|
|
#storybook-explorer-tree .sidebar-item:is([data-hm-depth='2'], [data-hm-depth='3'], [data-hm-depth='4']) > :is(a[id], button[id]:not([data-testid])) {
|
|
min-height: 42px;
|
|
padding-block: 7px;
|
|
}
|
|
#storybook-explorer-tree .sidebar-item[data-hm-depth='2'] > :is(a[id], button[id]:not([data-testid])) {
|
|
margin-left: 32px;
|
|
width: calc(100% - 32px);
|
|
}
|
|
#storybook-explorer-tree .sidebar-item[data-hm-depth='3'] > :is(a[id], button[id]:not([data-testid])),
|
|
#storybook-explorer-tree .sidebar-item[data-hm-depth='4'] > :is(a[id], button[id]:not([data-testid])) {
|
|
margin-left: 44px;
|
|
width: calc(100% - 44px);
|
|
}
|
|
/* Menu item labels and section heading labels (.sidebar-subheading) are both 14px / 700. */
|
|
#storybook-explorer-tree .sidebar-item .hm-manager-label {
|
|
font-size: 14px;
|
|
}
|
|
#storybook-explorer-tree .hm-manager-label {
|
|
min-width: 0;
|
|
white-space: normal;
|
|
word-break: keep-all;
|
|
overflow-wrap: anywhere;
|
|
overflow: visible;
|
|
text-overflow: clip;
|
|
}
|
|
/* D-093 D-014 (§6 Text Border): non-selected labels, including hover and the
|
|
yellow current parent, use the specimen's 1.5px border plus lower shadow.
|
|
Thickness and offset are REVIEW VALUEs. Selected labels carry no effect.
|
|
Section heading labels (Foundation, Components, ...) share this exact rule. */
|
|
#storybook-explorer-tree .sidebar-item[data-selected='false'] .hm-manager-label,
|
|
#storybook-explorer-tree .sidebar-subheading .hm-manager-label {
|
|
-webkit-text-stroke: 1.5px var(--effect-text-border-color);
|
|
paint-order: stroke fill;
|
|
text-shadow: 1px 2px 1px var(--effect-text-border-color);
|
|
}
|
|
/* The group chevron carries the same lower shadow (specimen .ref-sidebar-chevron). */
|
|
#storybook-explorer-tree .sidebar-item[data-selected='false'] > button[id]:not([data-testid]) > div:first-child > div > svg {
|
|
filter: drop-shadow(1px 2px 1px var(--effect-text-border-color));
|
|
}
|
|
#storybook-explorer-tree .sidebar-item > :is(a[id], button[id]:not([data-testid])) > div:first-child {
|
|
position: static;
|
|
flex: 0 0 auto;
|
|
margin: 0;
|
|
gap: 8px;
|
|
}
|
|
/* Storybook 10.6.1: the leading wrapper has a direct svg[type] for every
|
|
menu type (group/component/story/docs), plus a nested untyped chevron
|
|
only on expandable rows. Remove type glyphs at every depth. */
|
|
#storybook-explorer-tree .sidebar-item > :is(a[id], button[id]:not([data-testid])) > div:first-child > svg[type] {
|
|
display: none;
|
|
}
|
|
/* Leaves have no chevron. Remove the now-empty wrapper as a flex item so
|
|
neither its width nor the row's flex gap reserves an icon slot.
|
|
The existing depth margins and row padding still supply hierarchy indent. */
|
|
#storybook-explorer-tree .sidebar-item > :is(a[id], button[id]:not([data-testid])) > div:first-child:has(> svg[type]):not(:has(> div > svg)) {
|
|
display: none;
|
|
}
|
|
/* First-depth leaves still sit inside their root label after losing the icon
|
|
slot. Deeper rows retain their existing 32px / 44px depth margins. */
|
|
#storybook-explorer-tree .sidebar-item[data-hm-depth='1'] > :is(a[id], button[id]:not([data-testid])):has(> div:first-child > svg[type]):not(:has(> div:first-child > div > svg)) {
|
|
padding-left: 32px;
|
|
}
|
|
#storybook-explorer-tree .sidebar-item[data-hm-current-parent='true'],
|
|
#storybook-explorer-tree .sidebar-subheading[data-hm-current-parent='true'] {
|
|
color: var(--color-action-accent-on-green);
|
|
}
|
|
#storybook-explorer-tree .sidebar-item[data-selected='false'] > :is(a[id], button[id]:not([data-testid])):hover {
|
|
background: rgba(0, 0, 0, .10);
|
|
}
|
|
#storybook-explorer-tree .sidebar-item[data-selected='true'] > a[id] {
|
|
z-index: 1;
|
|
background: var(--color-bg-content);
|
|
color: var(--color-action-primary);
|
|
border-radius: 8px 0 0 8px;
|
|
}
|
|
/* Keep the keyboard skip link without reserving a 1px flex column.
|
|
That column exposed the green branch background at the selected item's end. */
|
|
#storybook-explorer-tree .sidebar-item > a[href='#storybook-preview-wrapper'] {
|
|
position: absolute;
|
|
right: 0;
|
|
z-index: 4;
|
|
}
|
|
#storybook-explorer-tree .sidebar-item[data-selected='true'] > a[id]::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
pointer-events: none;
|
|
box-shadow: inset 6px 0 8px -5px var(--overlay-black-30),
|
|
inset 0 3px 5px -3px var(--overlay-black-20),
|
|
inset 0 -2px 4px -3px var(--overlay-black-20);
|
|
mask-image: linear-gradient(90deg, #000 75%, transparent 100%);
|
|
}
|
|
#storybook-explorer-tree .sidebar-item[data-selected='true']::before,
|
|
#storybook-explorer-tree .sidebar-item[data-selected='true']::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 0;
|
|
width: var(--hm-manager-join);
|
|
height: var(--hm-manager-join);
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
#storybook-explorer-tree .sidebar-item[data-selected='true']::before {
|
|
bottom: 100%;
|
|
background: radial-gradient(circle at top left, transparent calc(var(--hm-manager-join) - .5px), var(--color-bg-content) var(--hm-manager-join));
|
|
}
|
|
#storybook-explorer-tree .sidebar-item[data-selected='true']::after {
|
|
top: 100%;
|
|
background: radial-gradient(circle at bottom left, transparent calc(var(--hm-manager-join) - .5px), var(--color-bg-content) var(--hm-manager-join));
|
|
}
|
|
#storybook-explorer-tree .sidebar-item[data-selected='true'][data-hm-group-end='true']::after {
|
|
top: calc(100% - 8px);
|
|
}
|
|
/* Auxiliary status/create actions are separate from selected row geometry.
|
|
Hide only these controls; the Story link and native group toggles stay intact. */
|
|
#storybook-explorer-tree .sidebar-item[data-selected='true'] > :is([data-testid='tree-change-status-button'], [data-testid='context-menu']) {
|
|
display: none;
|
|
}
|
|
#storybook-explorer-tree [data-testid='context-menu'] {
|
|
color: inherit;
|
|
right: 4px;
|
|
}
|
|
/* Storybook gives utility buttons an opaque background and a 5px halo.
|
|
Keep their native behavior, with the same transparent / black-10% LNB states. */
|
|
#storybook-explorer-tree :is([data-testid='context-menu'], .sidebar-subheading-action) {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
#storybook-explorer-tree :is([data-testid='context-menu'], .sidebar-subheading-action):is(:hover, [aria-expanded='true']) {
|
|
background: rgba(0, 0, 0, .10);
|
|
box-shadow: none;
|
|
}
|
|
#storybook-explorer-tree .sidebar-item[data-selected='true'] > [data-testid='context-menu'] {
|
|
z-index: 3;
|
|
color: var(--color-action-primary);
|
|
}
|
|
#storybook-explorer-tree .sidebar-item[data-selected='true'] > [data-testid='context-menu'] svg {
|
|
color: var(--color-action-primary);
|
|
}
|
|
/* Keep the manager preview frame flush without consuming iframe width. */
|
|
main:has(#storybook-preview-wrapper) {
|
|
border-left: 0;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
#storybook-sidebar-region * { scroll-behavior: auto; }
|
|
}
|
|
|
|
|