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

style(admin): unify text color hierarchy with foundation gray

Browse Source
This commit is contained in:
shkim4 committed 2026-11-11 14:33:58 +09:00
1 parent 5ffe56a9aa
commit 0486cecd5c
26 files changed
+186 -52
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/org-chart/ai/DESIGN_RULES.md
+2
View File
@@ -18,6 +18,8 @@
| Fixed readOnly / Full Composition 배경 | `#F5F8FB`(`bg-content` 기본) |
| 회사 메인 컬러(Auto 그룹 제목·카드 강조) | `hanmac` 한맥기술 `#CB2E28`, `saman` 삼안 `#F08300`, `jangheon-industry` 장헌산업 `#4580A6`, `jangheon` (주)장헌 `#1D418D`, `ptc` 피티씨 `#84338E`, `halla` 한라산업개발 `#0068B7`, `baron` 바론컨설턴트 `#0C367F` |
| 그룹 제목 글자 | 흰색 |
| 기본 글자 / 보조 글자 | `#212121` / `#616161`(`fg-primary` / `fg-secondary` 기본, 2026-11-11 Admin 텍스트 위계) |
| 카드 직위 / 대표자 직위 | `#616161`(`fg-secondary`) / `#224387`(브랜드 블루) |
| Auto 연결선 | `#738399`(`expanded-line-color` 기본) |
| Fixed 부서 Gradient | 6종(`business-management`, `business-planning`, `talent-growth`, `integrated-system`, `design-planning`, `solution-sales`). 회사색과 별개 — 서로 대체하지 않음 |
| 글꼴 | Noto Sans KR(`--hm-orgchart-font-family`로 override 가능). 호스트가 font-face 등록 |
packages/org-chart/src/styles/design-tokens.css
+3 -2
View File
@@ -9,8 +9,9 @@
--hm-orgchart-resolved-bg-content: var(--hm-orgchart-bg-content, #f4f7fb);
--hm-orgchart-resolved-bg-subtle: var(--hm-orgchart-bg-subtle, #e9edf3);
--hm-orgchart-resolved-bg-brand: var(--hm-orgchart-bg-brand, linear-gradient(180deg, #45639f 0%, #809dd7 100%));
--hm-orgchart-resolved-fg-primary: var(--hm-orgchart-fg-primary, #10243b);
--hm-orgchart-resolved-fg-secondary: var(--hm-orgchart-fg-secondary, #596575);
/* Text defaults follow the Admin Foundation Gray hierarchy (2026-11-11): Gray 900 / Gray 700. Was #10243b / #596575. */
--hm-orgchart-resolved-fg-primary: var(--hm-orgchart-fg-primary, #212121);
--hm-orgchart-resolved-fg-secondary: var(--hm-orgchart-fg-secondary, #616161);
--hm-orgchart-resolved-stroke-default: var(--hm-orgchart-stroke-default, #bac7d7);
--hm-orgchart-resolved-stroke-input-default: var(--hm-orgchart-stroke-input-default, #d3dce8);
--hm-orgchart-resolved-stroke-input-focus: var(--hm-orgchart-stroke-input-focus, #45639f);
packages/org-chart/src/styles/employee-card.css
+5 -4
View File
@@ -203,7 +203,8 @@
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="leader"] .hm-orgchart-avatar { flex-basis: 32px; width: 32px; height: 32px; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"])[data-card-asset-size="representative"] .hm-orgchart-avatar { flex-basis: 36px; width: 36px; height: 36px; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) {
--hm-orgchart-person-position-color: #797979;
/* Secondary text on the light card artwork; #797979 was 3.48:1 on #E0E6F4. */
--hm-orgchart-person-position-color: var(--hm-orgchart-resolved-fg-secondary);
--hm-orgchart-person-position-size: 15px;
--hm-orgchart-person-position-line-height: 18px;
--hm-orgchart-person-position-letter-spacing: -0.6px;
@@ -246,7 +247,7 @@
letter-spacing: var(--hm-orgchart-person-position-letter-spacing);
}
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-name {
color: var(--hm-orgchart-card-color, #071D3A);
color: var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary));
font-size: var(--hm-orgchart-person-name-size);
font-weight: 700;
line-height: var(--hm-orgchart-person-name-line-height);
@@ -255,7 +256,7 @@
text-overflow: clip;
}
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-name[data-name-overflow="true"] { text-overflow: ellipsis; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]):is([data-card-asset-size="employee"], [data-card-layout="compact"]) .hm-orgchart-person-name { color: var(--hm-orgchart-card-color, #323232); }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]):is([data-card-asset-size="employee"], [data-card-layout="compact"]) .hm-orgchart-person-name { color: var(--hm-orgchart-card-color, var(--hm-orgchart-resolved-fg-primary)); }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-person-name:focus-visible { outline: 2px solid var(--hm-orgchart-resolved-stroke-input-focus); outline-offset: 1px; }
.hm-orgchart-employee[data-card-asset-size="employee"] .hm-orgchart-affiliation-mark { top: 2px; right: 1px; width: 20px; height: 20px; min-height: 20px; }
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]):is([data-card-asset-size="employee"], [data-card-layout="compact"]) .hm-orgchart-affiliation-fallback { font-size: 6px; white-space: nowrap; }
@@ -331,5 +332,5 @@
/* Status is retained for assistive reading; the specified two-line card
composition has no third status row. Supplementary status cards are intact. */
.hm-orgchart-employee:is([data-card-asset], [data-card-layout="compact"]) .hm-orgchart-status-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hm-orgchart-person-name-tooltip { position: fixed; z-index: 10; box-sizing: border-box; max-width: min(320px, calc(100vw - 16px)); padding: 6px 8px; border: 1px solid #224387; border-radius: 4px; background: #ffffff; color: #071D3A; font-family: var(--hm-orgchart-resolved-font-family); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; pointer-events: auto; }
.hm-orgchart-person-name-tooltip { position: fixed; z-index: 10; box-sizing: border-box; max-width: min(320px, calc(100vw - 16px)); padding: 6px 8px; border: 1px solid #224387; border-radius: 4px; background: #ffffff; color: var(--hm-orgchart-resolved-fg-primary); font-family: var(--hm-orgchart-resolved-font-family); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; pointer-events: auto; }
.hm-orgchart-person-name-tooltip[hidden] { display: none; }
packages/org-chart/src/styles/employee-info-dialog.css
+1 -1
View File
@@ -35,7 +35,7 @@
.hm-orgchart-employee-dialog-close {
/* Match HM Dialog's ghost / icon-sm Button without a React or theme dependency.
Fallbacks are the declared HM defaults (theme/default.css and primitives.css). */
--hm-orgchart-dialog-close-ink: var(--hm-orgchart-dialog-close-color, var(--foreground, var(--hm-sem-fg-primary, #0a221d)));
--hm-orgchart-dialog-close-ink: var(--hm-orgchart-dialog-close-color, var(--foreground, var(--hm-sem-fg-primary, #212121)));
--hm-orgchart-dialog-close-hover: var(--hm-orgchart-dialog-close-hover-background, var(--muted, var(--hm-sem-bg-subtle, #f4f1ea)));
--hm-orgchart-dialog-close-ring: var(--hm-orgchart-dialog-focus-color, var(--ring, var(--hm-sem-stroke-input-focus, #266651)));
position: absolute;
packages/org-chart/src/styles/org-chart-p3-summary.css
+5 -5
View File
@@ -10,7 +10,7 @@
border: 0;
border-radius: 0;
background: none;
color: #18253a;
color: var(--hm-orgchart-resolved-fg-primary);
font-size: 14px;
}
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-organization-totals-title {
@@ -38,7 +38,7 @@
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
color: #18253a;
color: var(--hm-orgchart-resolved-fg-primary);
font-size: 14px;
line-height: 1.15;
text-align: center;
@@ -61,7 +61,7 @@
}
.hm-orgchart-workdesk-position-table th:first-child { padding: 0 7px; }
.hm-orgchart-workdesk-position-table :is(th, td) + :is(th, td) { border-left: 0.8px solid #d7e1ea; }
.hm-orgchart-workdesk-position-table thead { color: #223149; }
.hm-orgchart-workdesk-position-table thead { color: var(--hm-orgchart-resolved-fg-primary); }
.hm-orgchart-workdesk-position-table thead th,
.hm-orgchart-workdesk-position-table tfoot :is(th, td) { background: #f2f6fa; }
.hm-orgchart-workdesk-position-table tfoot :is(th, td) { height: 20px; }
@@ -79,7 +79,7 @@
border-radius: 10.7px;
background: rgba(255, 255, 255, 0.82);
box-shadow: 0 5.4px 14.3px rgba(44, 68, 96, 0.08);
color: #1c2534;
color: var(--hm-orgchart-resolved-fg-primary);
}
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-affiliation-bar-list {
flex-wrap: nowrap;
@@ -114,7 +114,7 @@
}
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-affiliation-bar .hm-orgchart-affiliation-mark img { object-fit: cover; }
:is(.hm-orgchart-composition[data-display-mode="readOnly"], .hm-orgchart-summary-preview) .hm-orgchart-affiliation-bar-total {
color: #071d3a;
color: var(--hm-orgchart-resolved-fg-primary);
font-weight: 700;
}