fix: align org chart hierarchy and typography weights
This commit is contained in:
1 parent
72d427fcd2
commit
d42466f5eb
33 files changed
+358
-85
No files matched your search
@@ -9,7 +9,7 @@
|
||||
| 항목 | 내용 |
|
||||
|---|---|
|
||||
| 구현 상태 | HM 스타일 적용 완료 (`<Card />`만으로 적용, `hm-card` class 없음) |
|
||||
| 기준일 | 2026-10-02 (문서·주석 정합성 정정 2026-10-08, 디자인 값 변경 없음) |
|
||||
| 기준일 | 2026-10-02 (2026-10-08 문서 정정, 2026-10-14 Font Weight 3단계 통합) |
|
||||
| 기반 | shadcn/ui Card (div 기반, Radix 없음) |
|
||||
| 대표 Story | `Components/Data & Display/Card` → `All` (이름 "Card") |
|
||||
| 보류 | Eyebrow, Divider, Footer·Media, 반응형, 폭 (§11) |
|
||||
@@ -20,7 +20,7 @@
|
||||
- **ui_viz 채택(SOURCE_ADOPTED, Canonical Pattern Q6 `YES`, 2026-09-28)**: border 1px, body-padding 24px 사방, header↔body 간격 24px(D-093 D-042/D-059), title↔action 간격 20px, 교차축 중앙 정렬, 상태 없음. 이 값들은 문서상 `Confirmed` 표기가 아니라 owner가 채택한 Canonical 값이다. HM Card는 이 채택 값을 적용한다.
|
||||
- **ui_viz LOCAL_EXCEPTION(컴포넌트 범위 값)**: border 색 `#DEDBD2`(전역 token 아님, Tabs·Search Field와 값만 같고 alias 금지), Beige border `#ECD4A2`(Primitive `hm-brown-light-4`와 같은 값). **현재 HM 구현은 이 두 값을 컴포넌트 전용 값으로 두지 않고 공유 Semantic Token에 연결한다.** 차이는 §6.1에 기록한다.
|
||||
- **ui_viz CANONICAL_OVERRIDE**: Title Source 19px/700 → `heading-md` 20/28/600.
|
||||
- **HM 사용자 결정**: 없음.
|
||||
- **HM 사용자 결정 (2026-10-14)**: Font Weight 400 / 500 / 700 통합. 카드 제목은 700이며 크기·행간·간격은 유지한다. 이전 ui_viz 600 근거와 과거 실측은 당시 기록이다.
|
||||
- **shadcn 유지**: 아래 §7.
|
||||
- **ui_viz 미정의**: Description, Footer, `size="sm"`, Media, Hover/Selected/Clickable, shadow.
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
| Padding | 24px 사방 (Card 위/아래, Header·Content 좌우) | 채택 |
|
||||
| Header ↔ Content 간격 | 24px | 채택 (D-093) |
|
||||
| 자식 clipping | 하지 않음 (`overflow: visible`) | 채택 (Type B) |
|
||||
| Title | 20px / 28px / 600, `--hm-sem-fg-primary` | CANONICAL_OVERRIDE |
|
||||
| Title | 20px / 28px / 700, `--hm-sem-fg-primary` | HM 사용자 결정 (2026-10-14) |
|
||||
| Header 안 Title ↔ Action 간격 | 20px (`column-gap`) | 채택 |
|
||||
| Action 정렬 | Title 반대쪽 끝, 교차축 중앙 | 채택 |
|
||||
| Description | shadcn 기본 (`text-sm text-muted-foreground`), HM Card CSS 미적용. 사용 범위는 §5.1 | ui_viz 미정의 |
|
||||
@@ -118,14 +118,14 @@ semantic HTML(`div`), React composition(Header/Title/Description/Action/Content/
|
||||
|
||||
- `rounded-xl`, `bg-card`, `ring-1 ring-foreground/10`, `overflow-hidden`, 기본 `--card-spacing: 16px`을 TSX에서 제거하고 theme CSS(border, radius 4px, surface, 24px)가 담당.
|
||||
- ring 대신 실제 1px border 사용, shadow 없음.
|
||||
- Title을 20/28/600으로 변경(`size="sm"` 제외).
|
||||
- 기본 Title은 20/28/700으로 통합(2026-10-14). `size="sm"`도 굵기 700을 사용하며 기존 14px 크기와 행간은 유지한다. 이전 20/28/600 도입·실측은 §13의 당시 검증 기록으로 보존한다.
|
||||
- Header 열 간격 20px, Action 교차축 중앙 정렬.
|
||||
- Footer 아래 모서리를 컨테이너 radius(border 안쪽 3px)에 맞춤. Footer 표면은 shadcn 그대로다.
|
||||
- `surface` prop 추가.
|
||||
|
||||
### 8.1 Demo `.hm-panel`과 운영 Card 구분
|
||||
|
||||
- **운영 Card**: `@hm-design/ui`의 `<Card />`와 `packages/ui/src/theme/card.css`. 이 문서 §3의 값(padding 24px, Title 20/28/600 등)과 대표 Story `All`이 기준이다. 소비 프로젝트는 `hm-panel*` class 없이 이 API만 쓴다.
|
||||
- **운영 Card**: `@hm-design/ui`의 `<Card />`와 `packages/ui/src/theme/card.css`. 이 문서 §3의 값(padding 24px, Title 20/28/700 등)과 대표 Story `All`이 기준이다. 소비 프로젝트는 `hm-panel*` class 없이 이 API만 쓴다.
|
||||
- **과거 Demo Panel**: 공식 이전 전 UI Demo의 `src/App.tsx`에 있던 4개 Card에 붙은 `hm-panel`, `hm-panel-header`, `hm-panel-icon`, `hm-panel-content` class와 `src/hm-theme.css` 규칙. 패키지(`packages/ui`)에 포함되지 않으며 Card 규격 Reference가 아니다.
|
||||
- `.hm-panel`은 Card 외형(border, radius, background, shadow)을 지정하지 않는다. 다만 Demo class 묶음은 운영 Card 값을 다음처럼 덮어쓴다.
|
||||
|
||||
@@ -133,7 +133,7 @@ semantic HTML(`div`), React composition(Header/Title/Description/Action/Content/
|
||||
|---|---|---|
|
||||
| `.hm-panel` | `gap: 0`, `--card-spacing: 16px` | gap·padding 24px |
|
||||
| `.hm-panel-header` | 아이콘 34px 열 grid, `column-gap: 11px`, `border-bottom: 1px solid #ede9df`, `padding: 22px 23px 17px` | Header 좌우 24px, column-gap 20px, divider 없음 |
|
||||
| `.hm-panel-header [data-slot="card-title"]` | 15px / 1.35 / 700, letter-spacing -.02em | 20 / 28 / 600 |
|
||||
| `.hm-panel-header [data-slot="card-title"]` | 15px / 1.35 / 700, letter-spacing -.02em | 20 / 28 / 700 |
|
||||
| `.hm-panel-header [data-slot="card-description"]` | 11px, `--hm-muted`, margin-top 2px | shadcn 기본 `text-sm text-muted-foreground` |
|
||||
| `.hm-panel-icon` | 34px 아이콘 박스 | 해당 요소 없음 |
|
||||
| `.hm-panel-content` | `padding: 23px` | 좌우 24px |
|
||||
@@ -150,7 +150,7 @@ semantic HTML(`div`), React composition(Header/Title/Description/Action/Content/
|
||||
|
||||
## 10. 사용자 확정 결정
|
||||
|
||||
추가 사용자 결정 없음.
|
||||
2026-10-14: 카드 제목 기본 굵기를 600에서 700으로 통합한다. `--hm-card-title-font-weight` 이름은 유지하며 `--hm-font-weight-bold`를 참조한다. `size="sm"` 제목도 700을 사용하며 크기와 행간은 기존 값을 유지한다.
|
||||
|
||||
## 11. 미확정 / 보류
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
## 2. 적용 근거
|
||||
|
||||
- **ui_viz Confirmed (Dialog-local)**: radius 8px(USER_DECISION 2026-09-17), shadow `0 0 12px rgba(0,0,0,.2)`(D-093 D-088), 내용 기준 크기와 최대 너비·높이 공식(D-088), Header `24/24/16`·Title↔Description 8·Body 24·Actions `0/24/24`·Action gap 8(D-093), Header 아래 inset divider 위치·두께와 Footer divider 없음, Body만 scroll, 긴 텍스트 줄바꿈, 표는 Body 안 가로 scroll, 표면 `color.bg.surface`·전경 `color.fg.primary`, Title/Description/Body 타이포.
|
||||
- **CANONICAL_OVERRIDE**: Title `heading-md` 20/28 중 weight **700**은 Dialog Title에만 적용(D-006, 600 대체). Foundation `heading-md`는 600 그대로.
|
||||
- **CANONICAL_OVERRIDE**: Title `heading-md` 20/28 중 weight **700**은 Dialog Title에만 적용(D-006, 600 대체). 이는 당시 ui_viz 근거다. 2026-10-14 HM 정책은 400 / 500 / 700이며 카드 제목도 700을 사용한다. Dialog Title의 700은 유지한다.
|
||||
- **현재 HM Actions**: Footer padding은 `16px 24px 24px`이며 divider는 없다. 위 ui_viz 도입 근거의 `0/24/24`와 구분한다.
|
||||
- **Temporary / TBD(적용했으나 확정값 아님)**: 외곽선·Header divider 색 `#DEDBD2`는 `Temporary`, Token relation TBD(DIALOG-10 FOLLOW_UP). 이전 확정 색(`#9A9284`/`#E0DACE`)은 대체됐고 D-093 실행 화면과 같은 값이라 현재 구현을 따랐다. 색 역할이 정해지기 전까지 Dialog 범위 값이다.
|
||||
- **PARTIAL / REFERENCE_ONLY(적용)**: Description 전경 `color.fg.secondary`(DIALOG-06 PARTIAL, 현재 style 보존). edge 16px(REVIEW).
|
||||
|
||||
Reference in new issue
Block a user