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

style(storybook): unify content hierarchy and section spacing

Browse Source 
- Story page frame: H2 16/24/700 -> 12px -> divider -> 16px -> content, sections 28px apart;
  StorySectionGrid keeps its 24px column gap
- Content indent (--sb-page-indent 16px, 12px at 640px and below): .sb-page-indent for information
  blocks; group boards (StateBoard / CardBoard, data-sb-board) indented once per section block so
  per-column boards keep their 24px gap
- Input / Select / Toggle Sizes grids take the same indent; field Labels unchanged
- Full-width Pattern previews (GNB, LNB, Loading Screen, Page Header) opt out with indent={false}
- Foundation/폰트: Text Colors name / usage / HEX levels, Font Family and Font Weight token lines,
  Specimens row spacing and indent; specimen values unchanged
- Guideline and WORKING_CONTEXT updated
This commit is contained in:
shkim4 committed 2026-11-11 17:39:02 +09:00
1 parent 15c64b0003
commit 3e97cd0b2d
14 files changed
+89 -30
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/foundation/foundation.css
Vendored
+24 -9
View File
@@ -49,29 +49,44 @@
.hm-foundation .hm-company-grid > #company-jangheon-industry { grid-column-start: 1; }
.hm-foundation .hm-brand-color-row[data-company-id] { display: grid; gap: 8px; overflow: visible; padding-bottom: 0; grid-template-columns: repeat(auto-fill, minmax(max(100px, (100% - 16px) / 3), 1fr)); }
/* Typography: compact specification page. Font Family one line, Font Weight as three plain columns (no card box; the
section divider already frames them), Specimens as comparison tables (two columns on wide screens, stacked rows on narrow screens). */
.hm-foundation .hm-typo-family { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0; }
/* Typography: compact specification page. Font Family as family + fallback over the CSS variable, Font Weight as three plain columns (no card box;
the section divider already frames them), Specimens as comparison tables (two columns on wide screens, stacked rows on narrow screens).
Document text levels (presentation only, existing tokens): item name 14/700 primary, description 14/400 secondary,
token / HEX / extra info 12/18/400 secondary (.hm-typo-token). Section titles stay on the common Story page H2 (16/24/700). */
/* Section rhythm (title → 12px → divider → 16px → content, sections 28px apart) and the content indent (.sb-page-indent on Font Family,
Font Weight and Specimens; Text Colors chips stay on the edge) come from the common Story page (story-page.css). */
.hm-foundation .hm-typo-family { display: grid; gap: 4px; margin: 0; }
.hm-foundation .hm-typo-family p { margin: 0; }
.hm-foundation .hm-typo-family strong { font-weight: var(--hm-font-weight-bold); }
.hm-foundation .hm-typo-token { font-size: var(--hm-button-font-size-sm); line-height: var(--hm-button-line-height-sm); }
.hm-foundation .hm-typo-weights { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px 24px; }
.hm-foundation .hm-typo-weight { min-width: 0; }
.hm-foundation .hm-typo-weight p { margin: 0; }
.hm-foundation .hm-typo-weight-preview { margin: 4px 0 !important; font-size: var(--hm-card-title-font-size); line-height: var(--hm-card-title-line-height); }
.hm-foundation .hm-typo-weight-preview { margin: 6px 0 4px !important; font-size: var(--hm-card-title-font-size); line-height: var(--hm-card-title-line-height); }
.hm-foundation .hm-typo-tables { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 32px; align-items: start; }
.hm-foundation .hm-typo-table { width: 100%; border-collapse: collapse; }
.hm-foundation .hm-typo-table th, .hm-foundation .hm-typo-table td { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--hm-sem-stroke-input-default); text-align: left; vertical-align: baseline; font-weight: var(--hm-input-font-weight); }
.hm-foundation .hm-typo-table th, .hm-foundation .hm-typo-table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--hm-sem-stroke-input-default); text-align: left; vertical-align: baseline; font-weight: var(--hm-input-font-weight); }
.hm-foundation .hm-typo-table thead th { color: var(--hm-sem-fg-secondary); font-size: var(--hm-button-font-size-sm); line-height: var(--hm-button-line-height-sm); }
.hm-foundation .hm-typo-table tbody th { width: 27%; font-weight: var(--hm-font-weight-bold); }
.hm-foundation .hm-typo-table td:last-child { width: 26%; padding-right: 0; }
.hm-foundation .hm-typo-metrics span, .hm-foundation .hm-typo-metrics small { display: block; }
.hm-foundation .hm-typo-metrics span, .hm-foundation .hm-typo-metrics small { display: block; font-variant-numeric: tabular-nums; }
.hm-foundation .hm-typo-metrics small { font-size: var(--hm-button-font-size-sm); line-height: var(--hm-button-line-height-sm); }
@media (min-width: 1100px) { .hm-foundation .hm-typo-tables { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Typography Text Colors reuse the Hanmac color chips (.hm-brand-color-chip). Four equal tracks keep "name · 설명" on one line on wide screens;
narrow screens fall back to 150px tracks (2 columns at 390px) and wrap the label inside the chip instead of scrolling. */
/* Typography Text Colors reuse the Hanmac color chips (.hm-brand-color-chip). Four equal tracks on wide screens;
narrow screens fall back to 150px tracks (2 columns at 390px) and wrap the text inside the chip instead of scrolling. */
.hm-foundation .hm-text-color-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(150px, (100% - 24px) / 4), 1fr)); overflow: visible; padding-bottom: 0; }
/* Text Colors chip content only (the shared 13px chip text of the color pages is untouched): role name → usage → HEX as three levels.
Grid rows stretch, so the four chips keep one height; keep-all wraps the long Readonly usage between words. */
.hm-foundation .hm-text-color-row { grid-auto-rows: 1fr; }
.hm-foundation .hm-text-color-row .hm-brand-color-chip { padding: 12px; word-break: keep-all; }
.hm-foundation .hm-text-color-row .hm-foundation-swatch { margin-bottom: 12px; }
.hm-foundation .hm-text-color-row h3 { margin: 0; font-size: var(--hm-label-font-size); line-height: var(--hm-label-line-height); font-weight: var(--hm-font-weight-bold); color: var(--hm-sem-fg-primary); }
.hm-foundation .hm-text-color-row p { margin: 4px 0 0; font-size: var(--hm-label-font-size); line-height: var(--hm-label-line-height); color: var(--hm-sem-fg-secondary); }
.hm-foundation .hm-text-color-row p[data-color-value] { margin-top: 4px; font-size: var(--hm-button-font-size-sm); line-height: var(--hm-button-line-height-sm); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
.hm-foundation .hm-typo-table thead { display: none; }
.hm-foundation .hm-typo-table, .hm-foundation .hm-typo-table tbody, .hm-foundation .hm-typo-table tr, .hm-foundation .hm-typo-table th, .hm-foundation .hm-typo-table td { display: block; width: auto !important; }
.hm-foundation .hm-typo-table tr { padding: 8px 0; border-bottom: 1px solid var(--hm-sem-stroke-input-default); }
.hm-foundation .hm-typo-table tr { padding: 12px 0; border-bottom: 1px solid var(--hm-sem-stroke-input-default); }
.hm-foundation .hm-typo-table th, .hm-foundation .hm-typo-table td { padding: 2px 0; border-bottom: 0; }
}