shkim4
65cc256cfd
- 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
162 lines
17 KiB
CSS
162 lines
17 KiB
CSS
/* Storybook presentation only. All selectors stay inside the Foundation page.
|
|
Page inner, title and sections come from the common Story page (src/components/story-page.css); these rules style the reference content. */
|
|
.hm-foundation {
|
|
font-size: var(--hm-label-font-size); line-height: var(--hm-label-line-height);
|
|
font-weight: var(--hm-input-font-weight); overflow-wrap: anywhere;
|
|
}
|
|
.hm-foundation *, .hm-foundation *::before, .hm-foundation *::after { box-sizing: border-box; }
|
|
.hm-foundation h3 { margin: 0 0 8px; font-size: var(--hm-label-font-size); font-weight: var(--hm-font-weight-bold); }
|
|
.hm-foundation p { margin: 0 0 12px; }
|
|
.hm-foundation-note { color: var(--hm-sem-fg-secondary); }
|
|
.hm-foundation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 16px; }
|
|
.hm-foundation-card, .hm-foundation-panel { min-width: 0; padding: 16px; border: 1px solid var(--hm-sem-stroke-input-default); border-radius: var(--hm-radius-container); background: var(--hm-sem-bg-surface); }
|
|
.hm-foundation-swatch { height: 64px; margin-bottom: 16px; border: 1px solid var(--hm-sem-stroke-input-default); border-radius: var(--hm-radius-control-md); }
|
|
.hm-foundation dl { margin: 16px 0 0; }
|
|
.hm-foundation dt { margin-top: 8px; color: var(--hm-sem-fg-secondary); font-size: var(--hm-button-font-size-sm); }
|
|
.hm-foundation dd { margin: 2px 0 0; min-width: 0; }
|
|
.hm-foundation code { font-family: inherit; font-size: inherit; white-space: normal; overflow-wrap: anywhere; }
|
|
.hm-foundation-links { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 16px; }
|
|
.hm-foundation-links a { color: var(--hm-sem-action-primary); text-decoration: underline; }
|
|
.hm-foundation-details { margin-top: 24px; }
|
|
.hm-foundation-details summary { cursor: pointer; padding-block: 12px; font-weight: var(--hm-font-weight-bold); }
|
|
.hm-foundation-specimens { display: grid; gap: 16px; }
|
|
.hm-foundation-specimen { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hm-sem-stroke-input-default); }
|
|
.hm-foundation-specimen small { display: block; font-size: var(--hm-button-font-size-sm); line-height: var(--hm-button-line-height-sm); font-weight: var(--hm-input-font-weight); }
|
|
.hm-foundation-spacing { max-width: 100%; height: 24px; margin-block: 12px; background: var(--hm-sem-state-active); }
|
|
.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 h3, .hm-brand-color-chip p { margin: 8px 0 0; font-size: 13px; }
|
|
|
|
/* 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; }
|
|
/* New common background stop IDs stay on one line at the supported widths. */
|
|
.hm-foundation .hm-color-gradient-stops .hm-brand-color-chip[data-gradient-stop-token] { flex-basis: 220px; }
|
|
.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 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: 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: 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. */
|
|
.hm-foundation .hm-layout-ref { display: grid; gap: var(--sb-page-section-gap); word-break: keep-all; }
|
|
.hm-foundation .hm-layout-ref .sb-page-section { margin-top: 0; }
|
|
.hm-foundation .hm-layout-ref p, .hm-foundation .hm-layout-ref h3 { margin: 0; }
|
|
.hm-foundation .hm-layout-ref .hm-foundation-card, .hm-foundation .hm-layout-ref .hm-foundation-panel { padding: 8px 16px; }
|
|
.hm-foundation .hm-layout-ref code { font-size: var(--hm-button-font-size-sm); color: var(--hm-sem-fg-secondary); }
|
|
.hm-foundation .hm-layout-ref .hm-layout-value { font-weight: var(--hm-font-weight-bold); }
|
|
.hm-foundation .hm-layout-list { display: grid; gap: 8px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); align-content: center; }
|
|
.hm-foundation .hm-layout-spacing-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
|
|
.hm-foundation .hm-layout-spacing-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
|
|
.hm-foundation .hm-layout-spacing-foot { display: flex; align-items: center; gap: 12px; margin-top: 4px; min-height: 14px; }
|
|
.hm-foundation .hm-layout-spacing-foot .hm-foundation-spacing { flex: none; height: 6px; margin: 0; }
|
|
.hm-foundation .hm-layout-spacing-foot .hm-foundation-note { min-width: 0; font-size: var(--hm-button-font-size-sm); }
|
|
.hm-foundation .hm-layout-radius-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
|
|
.hm-foundation .hm-layout-ref .hm-layout-radius .hm-foundation-radius { height: 24px; margin: 0 0 6px; }
|
|
.hm-foundation .hm-layout-radius .hm-layout-value { display: block; }
|
|
.hm-foundation .hm-layout-radius .hm-layout-spacing-head { margin-top: 0; }
|
|
@media (min-width: 480px) { .hm-foundation .hm-layout-spacing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
|
@media (min-width: 640px) { .hm-foundation .hm-layout-spacing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
|