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

style(storybook): refine typography text color swatches

Browse Source 
Show the four admin text colors (Primary, Secondary, Placeholder, Readonly Placeholder) as Hanmac color chips with Korean usage names at the top of Foundation/폰트, replacing the comparison and gray palette tables. Font Family, Font Weight and Typography Specimens are unchanged.
This commit is contained in:
shkim4 committed 2026-11-11 15:50:27 +09:00
1 parent a71ecbe0b2
commit f22428548a
2 files changed
+20 -63
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/foundation/foundation.css
Vendored
+3 -8
View File
@@ -65,14 +65,9 @@
.hm-foundation .hm-typo-metrics span, .hm-foundation .hm-typo-metrics small { display: block; }
.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 / Foundation Gray: same comparison table, a 28px swatch in the first column. Colors come from the row's token. */
.hm-foundation .hm-text-color-table th, .hm-foundation .hm-text-color-table td { vertical-align: middle; }
.hm-foundation .hm-text-color-table tbody th { width: 20%; }
.hm-foundation .hm-text-color-table td:last-child { width: 30%; }
.hm-foundation .hm-text-color-table 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 .hm-text-color-role { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hm-foundation .hm-text-color-chip { flex: none; width: 28px; height: 28px; border: 1px solid var(--hm-sem-stroke-input-default); border-radius: var(--hm-radius-control-md); }
.hm-foundation .hm-text-color-sample { display: inline-block; max-width: 100%; padding: 2px 8px; border-radius: var(--hm-radius-control-md); }
/* 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. */
.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; }
@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; }