style(storybook): refine foundation color chips and typography layout
- Hanmac Color: continuous spectrum band (8/4/2 columns by width), 120px swatches with name, role and HEX inside, Default/Light 4 role lines - Company Colors: separate 120px chips (12px padding, 4px radius), name top left and HEX bottom right; company layout and data unchanged - Typography: Font Family/Weight in two columns with info | preview rows, vertically centered specimens grouped by component, Text Colors chips with 14px Medium names - Shared colorHex/textTone helpers pick the first text tone reaching 4.5:1 - Update brand color guide and WORKING_CONTEXT
This commit is contained in:
shkim4 committed
1 parent
3ddacb19d5
commit
65cc256cfd
7 files changed
+223
-111
No files matched your search
Vendored
+95
-46
@@ -26,13 +26,45 @@
|
||||
.hm-foundation-radius { width: 100%; height: 64px; margin-bottom: 16px; border: 1px solid var(--hm-sem-stroke-default); background: var(--hm-sem-bg-content); }
|
||||
.hm-brand-color-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
|
||||
.hm-brand-color-chip { flex: 1 0 110px; min-width: 0; padding: 8px; border: 1px solid var(--hm-sem-stroke-default); }
|
||||
.hm-brand-color-chip[data-base] { border: 2px solid var(--hm-sem-fg-primary); font-weight: var(--hm-font-weight-bold); }
|
||||
/* Hanmac Color only (data-color-stage): wider gap (8px + 16px extra = 24px) between Light 4 and Light 3 with a divider centered in it. */
|
||||
.hm-brand-color-chip[data-color-stage="light-3"] { --hm-color-divider-extra: 16px; position: relative; margin-left: var(--hm-color-divider-extra); }
|
||||
.hm-brand-color-chip[data-color-stage="light-3"]::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1px - 0.5px - (8px + var(--hm-color-divider-extra)) / 2); width: 1px; background: var(--hm-sem-stroke-default); pointer-events: none; }
|
||||
.hm-brand-color-chip h3, .hm-brand-color-chip p { margin: 8px 0 0; font-size: 13px; }
|
||||
|
||||
/* Color reference additions only; preserve the existing palette row and Default emphasis. */
|
||||
/* Hanmac Color (rows with data-palette). The swatch content rules (chip reset, swatch text, text tone) are shared with Company Colors
|
||||
(data-company-id) and Typography Text Colors (data-text-colors).
|
||||
Continuous spectrum: the swatches touch (column gap 0) across the full section width and only each line's first/last swatch
|
||||
gets the outer radius. Columns follow the section width (container query): 8 from 1040px, 4 x 2 rows from 520px, otherwise
|
||||
2 x 4 rows, so a chip stays at least ~130px wide and every text line fits inside the 120px swatch. Each line is its own band. */
|
||||
.hm-foundation .sb-page-section-body:has(> .hm-brand-color-row[data-palette]) { container-type: inline-size; }
|
||||
.hm-foundation .hm-brand-color-row[data-palette] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; overflow: visible; padding-bottom: 0; }
|
||||
.hm-foundation .hm-brand-color-row:is([data-palette], [data-company-id], [data-text-colors]) .hm-brand-color-chip { min-width: 0; padding: 0; border: 0; border-radius: 0; font-weight: inherit; word-break: keep-all; }
|
||||
/* Name and role line at the top left, HEX at the bottom right, all inside the swatch. Text tone comes from the Story
|
||||
(data-text-tone: fg-primary first, then white, then black, whichever first reaches 4.5:1); no shadows or backing plates. */
|
||||
.hm-foundation .hm-brand-color-row:is([data-palette], [data-company-id], [data-text-colors]) .hm-foundation-swatch { display: flex; flex-direction: column; justify-content: space-between; height: 120px; margin: 0; padding: 12px; border: 0; border-radius: 0; color: var(--hm-color-text-inverse); }
|
||||
.hm-foundation .hm-brand-color-row:is([data-palette], [data-company-id], [data-text-colors]) .hm-brand-color-chip[data-text-tone="primary"] .hm-foundation-swatch { color: var(--hm-sem-fg-primary); }
|
||||
.hm-foundation .hm-brand-color-row:is([data-palette], [data-company-id], [data-text-colors]) .hm-brand-color-chip[data-text-tone="black"] .hm-foundation-swatch { color: var(--hm-sem-palette-black); }
|
||||
.hm-foundation .hm-brand-color-row[data-palette] .hm-brand-color-chip:nth-child(2n+1) .hm-foundation-swatch { border-radius: var(--hm-radius-control-md) 0 0 var(--hm-radius-control-md); }
|
||||
.hm-foundation .hm-brand-color-row[data-palette] .hm-brand-color-chip:nth-child(2n) .hm-foundation-swatch { border-radius: 0 var(--hm-radius-control-md) var(--hm-radius-control-md) 0; }
|
||||
@container (min-width: 520px) {
|
||||
.hm-foundation .hm-brand-color-row[data-palette] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.hm-foundation .hm-brand-color-row[data-palette] .hm-brand-color-chip:nth-child(n) .hm-foundation-swatch { border-radius: 0; }
|
||||
.hm-foundation .hm-brand-color-row[data-palette] .hm-brand-color-chip:nth-child(4n+1) .hm-foundation-swatch { border-radius: var(--hm-radius-control-md) 0 0 var(--hm-radius-control-md); }
|
||||
.hm-foundation .hm-brand-color-row[data-palette] .hm-brand-color-chip:nth-child(4n) .hm-foundation-swatch { border-radius: 0 var(--hm-radius-control-md) var(--hm-radius-control-md) 0; }
|
||||
}
|
||||
@container (min-width: 1040px) {
|
||||
.hm-foundation .hm-brand-color-row[data-palette] { grid-template-columns: repeat(8, minmax(0, 1fr)); }
|
||||
.hm-foundation .hm-brand-color-row[data-palette] .hm-brand-color-chip:nth-child(4n+1) .hm-foundation-swatch,
|
||||
.hm-foundation .hm-brand-color-row[data-palette] .hm-brand-color-chip:nth-child(4n) .hm-foundation-swatch { border-radius: 0; }
|
||||
.hm-foundation .hm-brand-color-row[data-palette] .hm-brand-color-chip:first-child .hm-foundation-swatch { border-radius: var(--hm-radius-control-md) 0 0 var(--hm-radius-control-md); }
|
||||
.hm-foundation .hm-brand-color-row[data-palette] .hm-brand-color-chip:last-child .hm-foundation-swatch { border-radius: 0 var(--hm-radius-control-md) var(--hm-radius-control-md) 0; }
|
||||
}
|
||||
/* Name 14 Bold; role line 12 Regular (Default "기본색" 12 Medium); HEX 12. Dark text on a swatch reads thinner than white,
|
||||
so its role line and HEX use Medium. */
|
||||
.hm-foundation .hm-brand-color-row:is([data-palette], [data-company-id], [data-text-colors]) 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: inherit; }
|
||||
.hm-foundation .hm-brand-color-row:is([data-palette], [data-text-colors]) .hm-color-note { margin: 0; font-size: var(--hm-button-font-size-sm); line-height: var(--hm-button-line-height-sm); font-weight: var(--hm-input-font-weight); color: inherit; }
|
||||
.hm-foundation .hm-brand-color-row[data-palette] .hm-brand-color-chip[data-color-stage="default"] .hm-color-note,
|
||||
.hm-foundation .hm-brand-color-row:is([data-palette], [data-company-id], [data-text-colors]) .hm-brand-color-chip:is([data-text-tone="primary"], [data-text-tone="black"]) :is(.hm-color-note, p[data-color-value]) { font-weight: var(--hm-font-weight-medium); }
|
||||
.hm-foundation .hm-brand-color-row:is([data-palette], [data-company-id], [data-text-colors]) p[data-color-value] { align-self: flex-end; margin: 0; font-size: var(--hm-button-font-size-sm); line-height: var(--hm-button-line-height-sm); color: inherit; font-variant-numeric: tabular-nums; }
|
||||
|
||||
/* Color reference additions only; preserve the existing palette row. */
|
||||
.hm-foundation .hm-color-gradient-preview { height: 112px; }
|
||||
.hm-foundation .hm-color-gradient-stops { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
|
||||
.hm-foundation .hm-color-gradient-stops .hm-brand-color-chip { flex: 1 1 110px; }
|
||||
@@ -41,54 +73,71 @@
|
||||
.hm-foundation .hm-color-foreground-sample { padding: 16px; background: var(--hm-sem-bg-surface); }
|
||||
|
||||
/* Company Colors: two-level grid. Columns follow the Story content width (not the viewport): companies 3 -> 2 -> 1 (min 316px each),
|
||||
chips up to 3 per row (min 100px each, 3 -> 2 -> 1). Chip size stays at one third even when a company has fewer chips. */
|
||||
chips always in three equal tracks 12px apart, so a chip stays one third wide even when a company has fewer chips (min ~97px).
|
||||
Swatch content comes from the shared Hanmac rules; each chip is a separate rectangle with the outer radius and no border. */
|
||||
.hm-foundation .hm-company-grid { display: grid; gap: 48px 32px; grid-template-columns: repeat(auto-fill, minmax(max(316px, (100% - 64px) / 3), 1fr)); }
|
||||
.hm-foundation .hm-company-grid > .sb-page-section { min-width: 0; margin-top: 0; }
|
||||
/* Row starts for the 2 / 2 / 3 company layout (한맥·삼안 / 장헌·피티씨 / 장헌산업·한라산업개발·바론컨설턴트). */
|
||||
.hm-foundation .hm-company-grid > #company-jangheon,
|
||||
.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)); }
|
||||
.hm-foundation .hm-brand-color-row[data-company-id] { display: grid; gap: 12px; overflow: visible; padding-bottom: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.hm-foundation .hm-brand-color-row:is([data-company-id], [data-text-colors]) .hm-foundation-swatch { border-radius: var(--hm-radius-control-md); }
|
||||
|
||||
/* 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: 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: 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; 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 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: 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; }
|
||||
/* Typography: minimal type specimen page (presentation only, existing tokens; no card box, outer border or shadow).
|
||||
Section titles, 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).
|
||||
Text levels: label / token 12/18/400 secondary, family and weight names 14/700 primary, specimen name and metrics 12/18 secondary;
|
||||
previews and samples carry the largest type. */
|
||||
/* Font Family and Font Weight side by side (StorySectionGrid) from 720px, stacked below. */
|
||||
.hm-foundation .hm-typo-type-grid { grid-template-columns: minmax(0, 1fr); }
|
||||
@media (min-width: 720px) { .hm-foundation .hm-typo-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
/* Shared row (Font Family, each Font Weight item, each Specimen): information on the left, preview on the right, both vertically
|
||||
centered. The row follows the width of its own column (container query on the Family / Weight content and on each Specimen
|
||||
group), not the viewport: from 440px the information column is min(240px, 40%), so it never squeezes the preview; below that
|
||||
the row is one column with the preview first. */
|
||||
.hm-foundation :is(.hm-typo-rows, .hm-typo-group) { container-type: inline-size; }
|
||||
.hm-foundation .hm-typo-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 24px; align-items: center; }
|
||||
.hm-foundation .hm-typo-row :is(p, code) { margin: 0; }
|
||||
.hm-foundation :is(.hm-typo-row-meta, .hm-typo-row-preview) { display: grid; gap: 2px; min-width: 0; }
|
||||
.hm-foundation .hm-typo-row-preview { order: -1; }
|
||||
.hm-foundation .hm-typo-token, .hm-foundation .hm-typo-kicker { font-size: var(--hm-button-font-size-sm); line-height: var(--hm-button-line-height-sm); }
|
||||
@container (min-width: 440px) {
|
||||
.hm-foundation .hm-typo-row { grid-template-columns: min(240px, 40%) minmax(0, 1fr); row-gap: 4px; }
|
||||
.hm-foundation .hm-typo-row-preview { order: 0; }
|
||||
}
|
||||
/* Font Family: Primary Typeface · family name | preview in --hm-font-family-base → CSS variable (its value lists the fallbacks). */
|
||||
.hm-foundation .hm-typo-kicker { color: var(--hm-sem-fg-secondary); }
|
||||
.hm-foundation .hm-typo-family-name { font-weight: var(--hm-font-weight-bold); }
|
||||
.hm-foundation .hm-typo-row .hm-typo-family-preview { margin-bottom: 4px; font-size: var(--hm-page-header-title-font-size); line-height: var(--hm-page-header-title-line-height); }
|
||||
/* Font Weight: one row per weight (name + value · token | preview), 12px above and below with a thin rule between rows only
|
||||
(the section divider sits above the first row). */
|
||||
.hm-foundation .hm-typo-weight { padding-block: 12px; }
|
||||
.hm-foundation .hm-typo-weight:first-child { padding-top: 0; }
|
||||
.hm-foundation .hm-typo-weight:last-child { padding-bottom: 0; }
|
||||
.hm-foundation .hm-typo-weight + .hm-typo-weight { border-top: 1px solid var(--hm-sem-stroke-input-default); }
|
||||
.hm-foundation .hm-typo-weight-preview { font-size: var(--hm-card-title-font-size); line-height: var(--hm-card-title-line-height); }
|
||||
/* Specimens: text styles and form controls as two columns from 1100px, groups 24px apart. The 40px column gap makes both columns
|
||||
exactly as wide as the Font Family / Font Weight content (section gap 24px + indent 16px), so the previews line up across sections.
|
||||
Each group is its title, then rows that each carry one thin top rule (the first one doubles as the title underline; no rule after
|
||||
the last row). Row: item name / computed Size / Line / Weight · letter-spacing (both secondary) | the sample at its real size. */
|
||||
.hm-foundation .hm-typo-specimens { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 40px; align-items: start; }
|
||||
@media (min-width: 1100px) { .hm-foundation .hm-typo-specimens { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
||||
.hm-foundation .hm-typo-groups { display: grid; gap: 24px; }
|
||||
.hm-foundation .hm-typo-group h3 { margin: 0 0 8px; }
|
||||
.hm-foundation .hm-typo-group ul { margin: 0; padding: 0; list-style: none; }
|
||||
.hm-foundation .hm-typo-specimen { padding-block: 12px; border-top: 1px solid var(--hm-sem-stroke-input-default); }
|
||||
.hm-foundation .hm-typo-specimen-meta { gap: 0; 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-specimen-name { font-weight: var(--hm-font-weight-medium); }
|
||||
.hm-foundation .hm-typo-metrics { display: flex; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
|
||||
.hm-foundation .hm-typo-metrics > span + span::before { content: "\00a0·\00a0"; }
|
||||
.hm-foundation .hm-typo-sample { color: var(--hm-sem-fg-primary); }
|
||||
/* Typography Text Colors (data-text-colors): separate chips like Company Colors (shared swatch rules above: 120px, 12px padding,
|
||||
radius, name and usage top left, HEX bottom right, text tone by contrast). Four equal tracks 12px apart on wide screens;
|
||||
narrow screens fall back to 150px tracks (2 columns at 375px) and wrap the text inside the chip instead of scrolling. */
|
||||
.hm-foundation .hm-text-color-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(max(150px, (100% - 36px) / 4), 1fr)); overflow: visible; padding-bottom: 0; }
|
||||
/* The four text colors are dark grays, so every chip uses white text; white Bold reads spread out on them, so the name uses Medium
|
||||
(user decision 2026-11-12; Hanmac and Company names stay Bold). */
|
||||
.hm-foundation .hm-brand-color-row[data-text-colors] h3 { font-weight: var(--hm-font-weight-medium); }
|
||||
|
||||
/* Layout: compact specification page (PC: three bands; narrow screens stack and scroll naturally).
|
||||
Section header spacing and the section gap come from the common Story page; the bands only own their grid. No fixed heights or clipping. */
|
||||
|
||||
Reference in new issue
Block a user