shkim4/HMDesign
Private
Public Access
1
0 Fork 0
Code Activity

style(storybook): unify page hierarchy and compact layouts

Browse Source
This commit is contained in:
shkim4 committed 2026-11-11 11:28:58 +09:00
1 parent cda60840d8
commit ff55a805d5
21 files changed
+115 -85
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/story-page.css
+33 -14
View File
@@ -1,8 +1,15 @@
/* Storybook presentation only. Common page frame for representative Stories; all selectors stay inside .sb-page.
Inner (fluid; 16px each side up to 480px, growing to 60px at 768px; vertical gutter 16–40) and title (kicker 12 / title 28·36·700 / description, no divider below) reuse Foundation / Color.
Section reuses the Center Graphic / 교량 split: heading + description, a divider, then the specimen. */
2026-11-11 compact document rhythm, shared by Web / Chart / OrgChart (SW and CENTER pages use the same frame only):
H1 page title 28/36/700 (Page Header title) → description 14/20/400 secondary, 8px below (Page Header description)
→ 24px → H2 section title 16/24/700 (body-md) over a thin divider → 12px → specimen; sections 24px apart (Dashboard gap);
H3 specimen labels 14/20/500 secondary, no divider of their own (story-board.tsx). Top / bottom gutter 16–24px.
Side margins are unchanged (16px up to 480px, growing to 60px at 768px): the SW breakpoints 2040 / 1125 / 787 depend on them.
No design token is added; --sb-page-* only names existing component token values for this Storybook frame. */
.sb-page {
--sb-page-gutter: clamp(16px, 3vw, 40px);
--sb-page-gutter: clamp(16px, 2vw, 24px);
--sb-page-section-gap: 24px;
--sb-page-section-title-font-size: var(--hm-dialog-body-font-size);
--sb-page-section-title-line-height: var(--hm-dialog-body-line-height);
box-sizing: border-box;
width: 100%;
min-width: 0;
@@ -20,38 +27,46 @@
margin-inline: auto;
}
/* No bottom padding: the header's margin collapses with the next block's own top margin (a section's 24px), so the first
content sits 24px below the title whether it is a section, a section grid or a plain preview. */
.sb-page .sb-page-header {
padding-bottom: 24px;
margin-bottom: var(--sb-page-section-gap);
font-size: var(--hm-label-font-size);
line-height: var(--hm-label-line-height);
overflow-wrap: anywhere;
}
.sb-page .sb-page-header .sb-page-kicker {
margin: 0 0 12px;
margin: 0 0 4px;
color: var(--hm-sem-fg-secondary);
font-size: var(--hm-button-font-size-sm);
font-weight: var(--hm-font-weight-bold);
}
.sb-page .sb-page-header .sb-page-title {
margin: 8px 0 12px;
margin: 0;
font-size: var(--hm-page-header-title-font-size);
line-height: var(--hm-page-header-title-line-height);
font-weight: var(--hm-page-header-title-font-weight);
}
.sb-page .sb-page-header .sb-page-description { margin: 0 0 12px; font-weight: var(--hm-input-font-weight); }
.sb-page .sb-page-header .sb-page-description {
margin: var(--hm-page-header-description-gap) 0 0;
color: var(--hm-page-header-description-color);
font-size: var(--hm-page-header-description-font-size);
line-height: var(--hm-page-header-description-line-height);
font-weight: var(--hm-input-font-weight);
}
.sb-page .sb-page-section { margin-top: 32px; scroll-margin-top: 16px; }
.sb-page .sb-page-section { margin-top: var(--sb-page-section-gap); scroll-margin-top: 16px; }
.sb-page .sb-page-section-header {
padding-bottom: 12px;
margin-bottom: 16px;
padding-bottom: 8px;
margin-bottom: 12px;
border-bottom: 1px solid var(--hm-sem-stroke-input-default);
overflow-wrap: anywhere;
}
.sb-page .sb-page-section-header .sb-page-section-title {
margin: 0;
font-size: var(--hm-card-title-font-size);
line-height: var(--hm-card-title-line-height);
font-weight: var(--hm-card-title-font-weight);
font-size: var(--sb-page-section-title-font-size);
line-height: var(--sb-page-section-title-line-height);
font-weight: var(--hm-font-weight-bold);
}
.sb-page .sb-page-section-header .sb-page-section-description {
margin: 4px 0 0;
@@ -61,9 +76,13 @@
font-weight: var(--hm-input-font-weight);
}
.sb-page .sb-page-section-body { min-width: 0; }
/* Sections side by side (StorySectionGrid): grid items keep their margins, so the grid owns the row gap instead.
Columns and alignment stay with the Story (className): this unlayered rule would override Tailwind's layered grid-cols-*. */
.sb-page .sb-page-section-grid { display: grid; gap: var(--sb-page-section-gap) 24px; margin-top: var(--sb-page-section-gap); }
.sb-page .sb-page-section-grid > .sb-page-section { margin-top: 0; }
/* Notice above a page title (StoryNotice). Reuses .sb-page / .sb-page-inner (width and side margin are not redefined).
The frame drops its bottom gutter and pulls the next page up so the notice sits 24px above the title block's own top gutter. */
The frame drops its bottom gutter and pulls the next page up so the notice sits 24px above the page title. */
.sb-page.sb-page-notice {
padding-bottom: 0;
margin-bottom: calc(24px - var(--sb-page-gutter));