style(storybook): refine foundation color chips and typography layout

- Hanmac Color: continuous spectrum band (8/4/2 columns by width), 120px
  swatches with name, role and HEX inside, Default/Light 4 role lines
- Company Colors: separate 120px chips (12px padding, 4px radius),
  name top left and HEX bottom right; company layout and data unchanged
- Typography: Font Family/Weight in two columns with info | preview rows,
  vertically centered specimens grouped by component, Text Colors chips
  with 14px Medium names
- Shared colorHex/textTone helpers pick the first text tone reaching 4.5:1
- Update brand color guide and WORKING_CONTEXT
This commit is contained in:
shkim4 committed 2026-11-12 14:50:34 +09:00
1 parent 3ddacb19d5
commit 65cc256cfd
7 files changed
+223 -111

No files matched your search

+2 -2
View File
@@ -35,6 +35,6 @@ Orange Dark 1·2의 원본 Needs Review 상태와 [이전 검수 보고서](../r
페이지 제목은 `Hanmac Color`(메뉴 `Foundation > Hanmac Color`)이며 별도 소개 문구는 표시하지 않는다. 기존 Story ID `foundation-color--all`은 `meta.id`로 유지한다. 과거 `한맥 브랜드 컬러` 소개 문구는 당시 이력이다. 그룹 설명의 단계 순서 나열 문구는 제공하지 않으며, 개별 컬러칩의 단계명과 HEX는 유지한다.
[Hanmac Color 대표 Story](../../src/foundation/color.stories.tsx)는 한맥그린·한맥브라운·한맥오렌지 3개 그룹에 각 8개, 총 24개 컬러칩만 표시한다. Green 8/8·Brown 8/8·Orange 8/8 확정이며 단계명·현재 HEX와 Default 기본색 강조를 유지한다. 2026-10-11 최종 표시 요청에 따라 Brown Deep, Orange Light·Mid·Dark·Deep의 별도 표시, Accent·Semantic·Gradients 섹션과 개발용 Token·CSS Variable·Runtime Key 설명은 제거한다. Legacy Button 색상과 Accent·Semantic·Gradient의 실제 Key·값·소비처는 보존한다. 기존 Component mapping을 새 값에 연결하지 않으며 public Key·Property·type·Default·API·schemaVersion 1과 서비스 partial JSON 호환성을 유지한다. [Runtime Theme](runtime-theme.md)의 geometry/상태 권한과 Designer의 기존 17개 상위 역할 입력 UI는 확대하지 않는다. 한맥오렌지의 미확정 브랜드 단계는 없다. [표시 정리 검증 기록](../reports/foundation-color-display-cleanup-2026-10-11.md).
[Hanmac Color 대표 Story](../../src/foundation/color.stories.tsx)는 한맥그린·한맥브라운·한맥오렌지 3개 그룹에 각 8개, 총 24개 컬러칩만 표시한다. Green 8/8·Brown 8/8·Orange 8/8 확정이며 단계명·현재 HEX와 Default 기본색 표시를 유지한다. 2026-11-12 표시 정리로 세 그룹은 같은 Grid(팔레트 섹션 폭 1040px 이상 8열, 520px 이상 4열×2줄, 그 미만 2열×4줄, 콘텐츠 영역 전체 너비를 열 수만큼 균등 분할)를 쓰며 견본 사이 간격 없이 이어진 연속형 컬러 띠로 표시한다. 줄마다 첫 견본 왼쪽과 마지막 견본 오른쪽에만 `--hm-radius-control-md`를 적용하고 내부 경계는 직각이며 칩 외곽 박스·Default 테두리·구분선·그림자는 없다. 견본 높이는 120px이며 단계명(14px Bold)·용도 설명·HEX(12px)를 견본 내부(Padding 12px)에 표시한다. 단계명과 용도 설명은 왼쪽 상단, HEX는 오른쪽 하단이다. Default는 단계명 아래 `기본색`(12px Medium), Light 4는 `보더 하이라이트용`(12px Regular)을 표시하며 Badge·배경·테두리는 없다. 어두운 글자(`--hm-sem-fg-primary`·검정)를 쓰는 칩은 용도 설명과 HEX를 Medium(500)으로 표시해 채도 높은 중간 명도 배경에서 획이 흐려 보이지 않게 한다. 글자색은 `--hm-sem-fg-primary` → 흰색(`--hm-color-text-inverse`) → 검정(`--hm-sem-palette-black`) 순으로 견본 배경 대비 4.5:1을 처음 충족하는 토큰을 쓰며(검정은 한맥그린 Light 3·한맥오렌지 Default만 해당) 24색 모두 WCAG AA 4.5:1 이상이다(최저 브라운 Light 2 흰색 4.52:1). 2026-10-11 최종 표시 요청에 따라 Brown Deep, Orange Light·Mid·Dark·Deep의 별도 표시, Accent·Semantic·Gradients 섹션과 개발용 Token·CSS Variable·Runtime Key 설명은 제거한다. Legacy Button 색상과 Accent·Semantic·Gradient의 실제 Key·값·소비처는 보존한다. 기존 Component mapping을 새 값에 연결하지 않으며 public Key·Property·type·Default·API·schemaVersion 1과 서비스 partial JSON 호환성을 유지한다. [Runtime Theme](runtime-theme.md)의 geometry/상태 권한과 Designer의 기존 17개 상위 역할 입력 UI는 확대하지 않는다. 한맥오렌지의 미확정 브랜드 단계는 없다. [표시 정리 검증 기록](../reports/foundation-color-display-cleanup-2026-10-11.md).
[Company Colors Story](../../src/foundation/company-colors.stories.tsx)는 Foundation > Hanmac Color와 별도 메뉴(Hanmac Color 바로 아래)이며 7개 계열사·14개 컬러를 회사별로 표시한다(별도 소개 문구 없음). 데이터는 OrgChart의 기존 `companyColorPresets`를 그대로 읽고(메인 → 서브 순서, 메인은 Default 강조 재사용) HEX를 중복 정의하지 않는다. Theme 토큰·`themes/*.json`·공개 계약은 변경하지 않으며 Foundation > Hanmac Color의 3그룹 24칩은 그대로다.
[Company Colors Story](../../src/foundation/company-colors.stories.tsx)는 Foundation > Hanmac Color와 별도 메뉴(Hanmac Color 바로 아래)이며 7개 계열사·14개 컬러를 회사별로 표시한다(별도 소개 문구 없음). 데이터는 OrgChart의 기존 `companyColorPresets`를 그대로 읽고(메인 → 서브 순서) HEX를 중복 정의하지 않는다. 회사 그룹은 콘텐츠 폭에 따라 3열(2/2/3 줄 배치, 장헌·장헌산업은 1열 시작) → 2열 → 1열이며, 컬러칩은 회사마다 3칸 Grid(간격 12px)에 독립된 직사각형(`--hm-radius-control-md`, 높이 120px, Padding 12px)으로 놓여 컬러가 적은 회사도 칩 폭은 1/3이다. 칩 안에는 Hanmac Color와 같은 방식으로 이름(`메인`·`서브 1`·`서브 2`, 14px Bold)을 왼쪽 상단, HEX(12px)를 오른쪽 하단에 두고, 글자색도 같은 대비 계산(`--hm-sem-fg-primary` → 흰색 → 검정, 4.5:1 첫 충족)과 어두운 글자일 때 HEX Medium을 쓴다. 메인 외곽 테두리·Badge·배경 강조는 없으며 메인·서브는 이름으로만 구분한다. Theme 토큰·`themes/*.json`·공개 계약은 변경하지 않으며 Foundation > Hanmac Color의 3그룹 24칩은 그대로다.