style(admin): unify text color hierarchy with foundation gray
This commit is contained in:
shkim4 committed
1 parent
5ffe56a9aa
commit
0486cecd5c
26 files changed
+186
-52
No files matched your search
@@ -1,6 +1,6 @@
|
||||
# Combobox
|
||||
|
||||
> 현재 접근성 보완(2026-10-10): 흰 Trigger의 빈 값 안내는 기존 `--hm-sem-fg-secondary`를 사용한다. 기본 Theme에서 #6e6759/흰색이며 공통 placeholder Token과 Disabled opacity는 보존한다. 아래 과거 검증의 #999 실측은 당시 기록이다.
|
||||
> 현재 기준(2026-11-11 Admin 텍스트 위계): 흰 Trigger의 빈 값 안내는 공통 `--hm-sem-fg-placeholder`(#757575, 흰색 대비 4.61:1)를 사용한다. 2026-10-10 접근성 보완의 `--hm-sem-fg-secondary`(#6e6759) 적용은 당시 Placeholder #999 대비 부족 때문이었고, Placeholder 기본값이 4.5:1을 넘으면서 공통 Token으로 되돌렸다. Disabled opacity는 보존한다. 아래 과거 검증의 #999 실측은 당시 기록이다.
|
||||
|
||||
> 2026-10-10 추가 수정 요청 기준: 현재 구현의 연결형 Popup을 기준으로 문서를 통일. 팝업 dialog 이름은 aria-label → aria-labelledby → 고유 trigger ID 순으로 연결. Command 검색·listbox 이름과 인스턴스 ID는 독립. 과거 검증 기록은 당시 결과이며 현재 검증은 [추가 수정 보고서](../guidelines/publisher-additional-review-2026-10-10.md)를 따릅니다.
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
|---|---|
|
||||
| Size | `large`(기본, 44px, 16 / 24), `medium`(34px, 14 / 20) — Select와 같은 두 크기 |
|
||||
| Trigger | 폭 100%(부모 폭), padding-x 12px, 1px `--hm-sem-stroke-input-default`, radius 4px, 흰 면, 오른쪽 chevron 18px |
|
||||
| 값 / placeholder | 선택된 option의 label, 없으면 placeholder("선택", `--hm-sem-fg-secondary`), 길면 말줄임 |
|
||||
| 값 / placeholder | 선택된 option의 label, 없으면 placeholder("선택", `--hm-sem-fg-placeholder`), 길면 말줄임 |
|
||||
| Popup | padding 0, 폭 = trigger 폭(`--radix-popover-trigger-width`), sideOffset=-1로 1px 연결 경계 공유. Focus border, 안쪽 두 모서리 radius는 기존 Input token, shadow `0 2px 24px black 12%` |
|
||||
| 검색 | Command Input(placeholder 기본 "검색...") |
|
||||
| 목록 | Command List(최대 280px), Item 높이 36px·padding-x 12px·radius 0·weight 400. Large 16/24, Medium 14/20. 선택 check 16px, 긴 label은 말줄임 |
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Date Picker
|
||||
|
||||
> 현재 접근성 보완(2026-10-10): 흰 Trigger의 빈 값 안내는 기존 `--hm-sem-fg-secondary`를 사용한다. 기본 Theme에서 #6e6759/흰색이며 공통 placeholder Token과 Disabled opacity는 보존한다. 아래 과거 검증의 #999 실측은 당시 기록이다.
|
||||
> 현재 기준(2026-11-11 Admin 텍스트 위계): 흰 Trigger의 빈 값 안내는 공통 `--hm-sem-fg-placeholder`(#757575, 흰색 대비 4.61:1)를 사용한다. 2026-10-10 접근성 보완의 `--hm-sem-fg-secondary`(#6e6759) 적용은 당시 Placeholder #999 대비 부족 때문이었고, Placeholder 기본값이 4.5:1을 넘으면서 공통 Token으로 되돌렸다. Disabled opacity는 보존한다. 아래 과거 검증의 #999 실측은 당시 기록이다.
|
||||
|
||||
현재 HM 구현의 기준 문서. 공통 원칙은 `docs/guidelines/프로젝트-지침.md`(§6, §7), Token 구조 원칙은 `테마-토큰-가이드.md`를 따른다. 이 문서는 Date Picker 고유의 API·Token·상태·결정만 기록한다.
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
|---|---|
|
||||
| Size | `large`(기본, 안쪽 42px + 1px border = 44px, 16 / 24), `medium`(안쪽 32px = 34px, 14 / 20) — Select와 같은 두 크기 |
|
||||
| Trigger | 폭 100%(부모 폭), padding-x 12px, 1px `--hm-sem-stroke-input-default`, radius 4px, 흰 면, 오른쪽 달력 아이콘 18px `--hm-sem-fg-secondary` |
|
||||
| 값 / placeholder | 선택값은 `--hm-sem-fg-primary`, placeholder("날짜 선택")는 `--hm-sem-fg-secondary`, 길면 말줄임 |
|
||||
| 값 / placeholder | 선택값은 `--hm-sem-fg-primary`, placeholder("날짜 선택")는 `--hm-sem-fg-placeholder`, 길면 말줄임 |
|
||||
| 날짜 표시 | 로컬 `Date`의 연·월·일 → `YYYY.MM.DD` (예: `2026.01.09`, `2026.10.06`). `format` prop으로 교체 |
|
||||
| Popup | Popover 면(흰 면, 1px pale border, 4px radius, 그림자)에 Popover padding 0, 폭 `auto`로 Calendar에 맞춤 |
|
||||
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
|
||||
- 높이는 `min-height`, 한 줄 텍스트는 가운데.
|
||||
- Border 1px(`--hm-sem-stroke-input-default`), radius `--hm-radius-input`, face `--hm-sem-bg-surface`, 글자색 `--hm-sem-fg-primary`, weight 400.
|
||||
- Placeholder: `--hm-sem-fg-placeholder`, `opacity: 1`.
|
||||
- Placeholder: `--hm-sem-fg-placeholder`(#757575), `opacity: 1`. readonly는 면이 투명해 베이지 콘텐츠 면에서 4.5:1 미만이 되므로 `--hm-sem-fg-secondary`(#616161)를 쓴다(2026-11-11).
|
||||
|
||||
## 4. 상태 규격
|
||||
|
||||
@@ -93,9 +93,9 @@ native `<input>` 동작 전체(`type`, `file:` 스타일 class, `placeholder`),
|
||||
|
||||
**2026-10-11 최종 사용자 결정 — Disabled Input Label**
|
||||
|
||||
- Input Story 소비 조합(`src/components/input.stories.tsx`의 `Specimen`)의 Disabled Label은 기존 `text-muted-foreground` → `--muted-foreground` → `--hm-sem-fg-secondary` 색(`#6E6759`)을 유지하고, `input.disabled`일 때만 `opacity-60`을 적용한다. HEX·Semantic Token·공개 Input API는 변경하지 않는다.
|
||||
- Input Story 소비 조합(`src/components/input.stories.tsx`의 `Specimen`)의 Disabled Label은 기존 `text-muted-foreground` → `--muted-foreground` → `--hm-sem-fg-secondary` 색(2026-11-11부터 `#616161`, 당시 `#6E6759`)을 유지하고, `input.disabled`일 때만 `opacity-60`을 적용한다. HEX·Semantic Token·공개 Input API는 변경하지 않는다.
|
||||
- Disabled Input 컨트롤 `0.6`, 소비 Label `0.6`, 부모 Field `1`이다. 형제 요소에 각각 적용하여 중첩 opacity를 만들지 않는다. 기본·readOnly·Error Label은 기존 `1`을 유지한다(Disabled가 아닌 경우).
|
||||
- 공통 [Label Component](label.md#4-상태-규격)의 Disabled `0.5`는 유지한다. Helper Text(`#6E6759`)와 Error Message(`#D32F2F`)도 기존 구현을 유지하며 이번 변경 대상이 아니다.
|
||||
- 공통 [Label Component](label.md#4-상태-규격)의 Disabled `0.5`는 유지한다. Helper Text(`--hm-sem-fg-secondary`, 2026-11-11부터 `#616161`)와 Error Message(`#D32F2F`)도 기존 구현을 유지하며 이번 변경 대상이 아니다.
|
||||
- 이전 검토의 “Label 100% 유지”는 당시 선택이며 현재 최종 결정은 Disabled Input Story Label `60%`다. 아래 2026-10-02 승인과 2026-10-06 검증은 당시 기록으로 보존하며, 이번 Label 정책의 현재 검증을 대신하지 않는다.
|
||||
- 실제 소비 화면은 자동으로 확대 수정하지 않는다. 신규 화면의 공개 Label 재사용·control 연결 계약은 유지하며, 공통 Label의 Disabled 정책을 이 Story 결정으로 대체하지 않는다.
|
||||
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
| 항목 | 값 |
|
||||
|---|---|
|
||||
| Typography | 14 / 20 / 500 |
|
||||
| 색 | `--hm-sem-fg-secondary` (`#6E6759`) |
|
||||
| 색 | `--hm-sem-fg-secondary` (`#616161`, 2026-11-11 Admin 텍스트 위계 전 `#6E6759`) |
|
||||
| 배치 | `flex w-fit items-center gap-2` (shadcn 기본, 부모 grid에서 시작 정렬) |
|
||||
|
||||
Label ↔ Control 간격 8px(`input.field.gap`)은 Field 조합의 값이며 Label이 소유하지 않는다.
|
||||
|
||||
Reference in new issue
Block a user