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

docs(storybook): add admin text color swatches to typography

Browse Source
This commit is contained in:
shkim4 committed 2026-11-11 14:37:19 +09:00
1 parent 0486cecd5c
commit a71ecbe0b2
2 files changed
+75
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/foundation/foundation.css
Vendored
+8
View File
@@ -65,6 +65,14 @@
.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); }
@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; }