diff --git a/docs/guidelines/brand-color-steps.md b/docs/guidelines/brand-color-steps.md index d335bfa..9106a7e 100644 --- a/docs/guidelines/brand-color-steps.md +++ b/docs/guidelines/brand-color-steps.md @@ -1,6 +1,6 @@ # 브랜드 컬러 8단계 확인 -2026-10-11 v2 요청의 표시 이름은 한맥그린·한맥브라운·한맥오렌지, 단계 순서는 Light 4 → Light 3 → Light 2 → Light 1 → Default → Dark 1 → Dark 2 → Dark 3이다. 읽기 전용 `D:/디자인시스템/ui_viz/docs/brand/hanmac/foundation/color.md` §4.1, `implementations/web/src/tokens/primitives.css`, `docs/foundation/token-inventory.md`의 HEX·단계·승인 상태를 대조했다. 기존 [공개 계약](../../packages/ui/src/theme/contract.ts)과 [Default JSON](../../themes/default.json)의 동일 단계명·HEX는 원본과 일치한다. +2026-10-11 v2 요청의 표시 이름은 한맥그린·한맥브라운·한맥오렌지, 단계 순서는 Light 4 → Light 3 → Light 2 → Light 1 → Default → Dark 1 → Dark 2 → Dark 3이다. 읽기 전용 `D:/디자인시스템/ui_viz/docs/brand/hanmac/foundation/color.md` §4.1, `implementations/web/src/tokens/primitives.css`, `docs/foundation/token-inventory.md`를 대조한 기존 확정값을 유지한다. 한맥오렌지 Dark 1 `#BC4C00`·Dark 2 `#883700`·Dark 3 `#4F2000`은 2026-10-11 사용자가 직접 확정한 최신 기준이며 과거 Needs Review 및 ui_viz 상태보다 우선한다. [공개 계약](../../packages/ui/src/theme/contract.ts)과 [Default JSON](../../themes/default.json)은 이 최종 기준을 따른다. | 단계 | 한맥그린 | 한맥브라운 | 한맥오렌지 | |---|---|---|---| @@ -9,13 +9,13 @@ | Light 2 | #266651 | #897445 | #F87725 | | Light 1 | #205241 | #604F32 | #EB5F00 | | Default | #123328 | #3E3523 | #CC5200 | -| Dark 1 | #0A221D | #352D1D | Needs Review — 공개 Key 없음 | -| Dark 2 | #071E18 | #2F281C | Needs Review — 공개 Key 없음 | +| Dark 1 | #0A221D | #352D1D | #BC4C00 | +| Dark 2 | #071E18 | #2F281C | #883700 | | Dark 3 | #020A07 | #1D1810 | #4F2000 | -확정 칸의 Key는 `color.palette.{green|brown|orange}-{light-4|light-3|light-2|light-1|default|dark-1|dark-2|dark-3}` 중 실제 선언된 Key다. CSS는 동일 suffix의 `--hm-sem-palette-*` → `--hm-*` Primitive를 사용한다. 기존 Key·값을 보존하고 확정 누락분 8개만 추가했다. 전체 공개 입력은 73 → 81개(색상 71 → 79개, 기존 radius 2개)다. 미확정 칸에는 공개 Key·CSS 변수·HEX를 새로 만들지 않는다. +모든 칸의 Key는 `color.palette.{green|brown|orange}-{light-4|light-3|light-2|light-1|default|dark-1|dark-2|dark-3}`로 선언되어 있다. CSS는 동일 suffix의 `--hm-sem-palette-*` → `--hm-*` Primitive를 사용한다. 이전 확정 누락분 8개 추가 이후의 81개 입력을 보존하고 Orange Dark 1·2만 추가했다. 전체 공개 입력은 83개(색상 81개, 기존 radius 2개)다. Dark 3와 Light 4~Default 값은 변경하지 않았다. -## Legacy Key 보존과 미확정 항목 +## Legacy Key 보존과 확정 이력 | 기존 Key | 확인된 HEX | 확인 필요 사항 | |---|---|---| @@ -27,8 +27,8 @@ Button 원본 근거는 `ui_viz/docs/brand/hanmac/components/button.md`의 D-087 및 `implementations/web/src/components/Button/Button.css`다. 단순 단계 이름 변경으로 기존 Button의 색상을 바꾸지 않는다. Brown Highlight와 Orange Border 계열도 기존 Key·값·용도를 보존한다. -Orange Dark 1의 원본 후보 `hm-orange-dark-1: #BC4C00`, Dark 2 후보 `hm-orange-dark-2: #883700`은 위 Color §4.1·Primitive CSS·inventory 모두 **Needs Review**다. 원본 Figma 대조/디자인 승인 확인 후 반영해야 한다. 기존 `color.palette.orange-border: #BC4C00`은 Button border 범위 확정값으로 유지하지만 같은 HEX를 근거로 브랜드 Dark 1을 확정하지 않는다. 이미지 추출·보간·밝기 순서 추정은 하지 않는다. +Orange Dark 1·2의 원본 Needs Review 상태와 [이전 검수 보고서](../reports/v2-publisher-review-2026-10-11.md)는 과거 이력으로 보존한다. 현재 브랜드 단계는 위 사용자 확정값을 적용한다. 기존 `color.palette.orange-border: #BC4C00`은 Button border 용도를 유지하며 브랜드 Dark 1과 별도 Key다. Legacy gradient를 번호 단계로 alias/매핑하지 않는다. 이미지 추출·보간·밝기 순서 추정은 하지 않는다. ## 호환성과 Storybook -[Color 대표 Story](../../src/foundation/color.stories.tsx)는 브랜드별 8개 순서 슬롯을 제공한다. Green 8/8·Brown 8/8 확정, Orange 6/8 확정·Dark 1/2 미확정이다. Legacy Button 색상은 별도로 표시하고 동일 Key를 계속 사용한다. 추가 8개 팔레트는 Color Reference에서 소비하며 기존 Component mapping을 새 값에 연결하지 않는다. 기존 public Key·Property·type·Default·API·schemaVersion 1과 서비스 partial JSON 호환성을 유지한다. [Runtime Theme](runtime-theme.md)의 geometry/상태 권한과 Designer의 기존 17개 상위 역할 입력 UI는 확대하지 않는다. 3색 전체 HEX·단계 확정은 PARTIAL이다. +[Color 대표 Story](../../src/foundation/color.stories.tsx)는 브랜드별 8개 순서 슬롯을 제공한다. Green 8/8·Brown 8/8·Orange 8/8 확정이며 Default를 기본색으로 강조한다. Legacy Button 색상은 별도로 표시하고 동일 Key를 계속 사용한다. 이번 두 팔레트 입력은 Color Reference에서 소비하며 기존 Component mapping을 새 값에 연결하지 않는다. 기존 public Key·Property·type·Default·API·schemaVersion 1과 서비스 partial JSON 호환성을 유지한다. [Runtime Theme](runtime-theme.md)의 geometry/상태 권한과 Designer의 기존 17개 상위 역할 입력 UI는 확대하지 않는다. 한맥오렌지의 미확정 브랜드 단계는 없다. diff --git a/docs/guidelines/designer-theme-guide.md b/docs/guidelines/designer-theme-guide.md index dd2e180..bd6fd72 100644 --- a/docs/guidelines/designer-theme-guide.md +++ b/docs/guidelines/designer-theme-guide.md @@ -37,7 +37,7 @@ resetRuntimeTheme(document.documentElement) - 일반 새 탭은 독립 세션입니다. 탭 복제 또는 opener로 연 탭은 브라우저가 초기 sessionStorage를 복사할 수 있으며 이후 편집은 탭별로 독립적입니다. - 서버/DB/Publish 기능은 없습니다. 같은 브라우저 탭의 Storybook preview origin에 `sessionStorage`로 보관하며, 세션 저장을 사용할 수 없는 환경에서도 현재 화면의 편집/Export는 동작합니다. 장기 보관은 JSON Export를 사용하세요. - Global Theme는 `document.documentElement`에 적용하며 body Portal도 같은 Theme를 사용합니다. wrapper 밖으로 Portal된 popup은 Scoped Theme를 자동 전달받지 않습니다. 이 제한은 기존 FOLLOW_UP입니다. -- 전체 Runtime Contract는 81개 입력입니다(2026-10-11 확정 브랜드 팔레트 8개 추가, 기존 73개 보존). 배포하는 Default JSON은 79개 컬러이며 radius/geometry는 package에서 관리합니다. 편집 화면은 상위 컬러 역할 17개만 노출하며 Component Token, radius, palette/gradient 개별 입력 UI를 만들지 않습니다. 기존 컬러 계약의 palette/gradient는 유효 JSON으로 Import할 수 있으며 gradient는 세트 전체를 제공해야 합니다. +- 전체 Runtime Contract는 83개 입력입니다(2026-10-11 기존 확정 브랜드 팔레트 8개 및 사용자 확정 Orange Dark 1·2 추가, 이전 81개 보존). 배포하는 Default JSON은 81개 컬러이며 radius/geometry는 package에서 관리합니다. 편집 화면은 상위 컬러 역할 17개만 노출하며 Component Token, radius, palette/gradient 개별 입력 UI를 만들지 않습니다. 기존 컬러 계약의 palette/gradient는 유효 JSON으로 Import할 수 있으며 gradient는 세트 전체를 제공해야 합니다. - 명시적 `[data-hm-theme]` scope는 독립 HM preset이므로 Global Theme를 이어받지 않습니다. Production에서 같은 root는 한 owner가 Apply/Reset을 관리합니다. - Storybook 편집기 설치는 이번 코드 변경을 적용하는 최초 빌드가 필요합니다. 설치 후 컬러 값을 바꾸는 운영에는 재빌드가 필요 없습니다. diff --git a/docs/guidelines/runtime-theme-contract.md b/docs/guidelines/runtime-theme-contract.md index 6c639d8..0220c5e 100644 --- a/docs/guidelines/runtime-theme-contract.md +++ b/docs/guidelines/runtime-theme-contract.md @@ -85,16 +85,18 @@ | `color.palette.orange-light-3` | `--hm-sem-palette-orange-light-3` | `#ec8f53` | ui_viz 확정 브랜드 단계 | Yes | Color Reference / 선택적 Theme palette | | `color.palette.orange-light-2` | `--hm-sem-palette-orange-light-2` | `#f87725` | ui_viz 확정 브랜드 단계 | Yes | Color Reference / 선택적 Theme palette | | `color.palette.orange-light-1` | `--hm-sem-palette-orange-light-1` | `#eb5f00` | ui_viz 확정 브랜드 단계 | Yes | Color Reference / 선택적 Theme palette | -| `color.palette.orange-dark-3` | `--hm-sem-palette-orange-dark-3` | `#4f2000` | ui_viz 확정 브랜드 단계 | Yes | Color Reference / 선택적 Theme palette | +| `color.palette.orange-dark-1` | `--hm-sem-palette-orange-dark-1` | `#bc4c00` | 2026-10-11 사용자 확정 브랜드 단계 | Yes | Color Reference / 선택적 Theme palette | +| `color.palette.orange-dark-2` | `--hm-sem-palette-orange-dark-2` | `#883700` | 2026-10-11 사용자 확정 브랜드 단계 | Yes | Color Reference / 선택적 Theme palette | +| `color.palette.orange-dark-3` | `--hm-sem-palette-orange-dark-3` | `#4f2000` | 2026-10-11 사용자 재확정 브랜드 단계 | Yes | Color Reference / 선택적 Theme palette | -총 81개. 기존 25개 + 핵심 역할 6개 + 선택적 팔레트 50개(2026-10-11 ui_viz 확정 단계 8개 추가). 팔레트는 컴포넌트별 계약이 아니며 Primary / Active / Focus를 개별 지정하면 팔레트 alias보다 우선한다. Focus와 Active, Primary와 On Accent는 각각 sibling이며 서로 alias하지 않는다. +총 83개. 기존 25개 + 핵심 역할 6개 + 선택적 팔레트 52개(2026-10-11 ui_viz 확정 단계 8개 및 사용자 확정 Orange Dark 1·2 추가). 팔레트는 컴포넌트별 계약이 아니며 Primary / Active / Focus를 개별 지정하면 팔레트 alias보다 우선한다. Focus와 Active, Primary와 On Accent는 각각 sibling이며 서로 alias하지 않는다. `color.action.cancel`의 공개 key·기본값은 보존한다. 2026-10-10 Gray 통일 요청에 따라 기본 Outline 취소 ink는 기존 Gray palette `#767676`을 사용한다. 기본값과 다른 명시적 취소 컬러 override는 내부 Button mapping에 전달하고 Reset 시 복원한다. 전체 Default preset을 주입해도 기본 Gray와 동일하다. Solid 취소는 기존 Gray mapping을 유지한다. [Runtime Theme](runtime-theme.md). # 디자인팀 Runtime 운영 결정 — 2026-10-06, 팔레트 보강 2026-10-11 -기존 v1 입력 73개의 Key·CSS property·type·Default를 유지하고 확정 팔레트 8개만 추가한다. Orange Dark 1·2는 Needs Review라 공개 입력에 추가하지 않는다. 공개 API `isRuntimeTheme(unknown): value is RuntimeTheme`를 제공한다. 이 사전 검증은 DOM을 변경하지 않는다. 기존 `applyRuntimeTheme`의 invalid 입력 시 reset 정책은 유지한다. 편집기는 사전 검증으로 invalid Import를 차단해 마지막 유효 Theme를 보존한다. +기존 v1 입력 73개와 이전 팔레트 보강 이후 81개의 Key·CSS property·type·Default를 유지한다. Orange Dark 1·2는 최신 사용자 확정값으로 공개 입력에 추가하며 Dark 3는 기존 값을 유지한다. 과거 Needs Review 기록은 이력으로 보존하고 현재 기준은 [브랜드 컬러 단계](brand-color-steps.md)를 따른다. 공개 API `isRuntimeTheme(unknown): value is RuntimeTheme`를 제공한다. 이 사전 검증은 DOM을 변경하지 않는다. 기존 `applyRuntimeTheme`의 invalid 입력 시 reset 정책은 유지한다. 편집기는 사전 검증으로 invalid Import를 차단해 마지막 유효 Theme를 보존한다. -Default 컬러의 운영 원본은 `themes/default.json`(79개 컬러)이다. `scripts/theme-defaults.mjs`가 JSON과 컬러 literal 없는 alias/geometry template에서 package `primitives.css`, `default.css`, `default-values.generated.ts`를 생성한다. `contract.ts`의 defaultValue와 `defaultRuntimeTheme`는 생성 데이터를 읽는다. 2개 radius/geometry는 template에서 유지한다. CSS fallback/현재 색을 유지하고 세 가지 최종 명령의 pre hook에서 stale 생성 데이터를 검사한다. Theme-only 산출은 `npm run build:themes`로 분리한다. +Default 컬러의 운영 원본은 `themes/default.json`(81개 컬러)이다. `scripts/theme-defaults.mjs`가 JSON과 컬러 literal 없는 alias/geometry template에서 package `primitives.css`, `default.css`, `default-values.generated.ts`를 생성한다. `contract.ts`의 defaultValue와 `defaultRuntimeTheme`는 생성 데이터를 읽는다. 2개 radius/geometry는 template에서 유지한다. CSS fallback/현재 색을 유지하고 세 가지 최종 명령의 pre hook에서 stale 생성 데이터를 검사한다. Theme-only 산출은 `npm run build:themes`로 분리한다. Storybook `Theme/Designer Playground/Editor`는 17개 상위 컬러 역할과 JSON URL/파일 Preview를 제공하는 소비자다. Global decorator에서 `resolveRuntimeTheme(theme, defaultJson)` 후 Production `applyRuntimeTheme(document.documentElement, theme)` → CSS Custom Properties → 기존 Mapping으로 적용한다. JSON Export/Import는 동일 v1 계약이다. 컬러 artifact/편집기만 radius를 거부한다. Production API의 기존 radius/gradient 계약은 유지한다. diff --git a/docs/guidelines/runtime-theme.md b/docs/guidelines/runtime-theme.md index d86ac62..82fdb96 100644 --- a/docs/guidelines/runtime-theme.md +++ b/docs/guidelines/runtime-theme.md @@ -14,7 +14,7 @@ React 외 실행 형식으로 변환할 때도 이 문서의 Token·CSS Custom Properties·Runtime 적용 계약을 유지한다. Target Runtime, standalone asset, `file://` 검증 및 AI/도구 독립성 기준은 [Runtime Portability Policy](runtime-portability.md)를 따른다. -소비 CSS는 `tailwindcss` → `@hm-design/ui/tailwind.css` → `@hm-design/ui/theme.css` 순서로 앱 entry에서 로드한다. Dashboard 상태 표시가 있으면 그 뒤에 `@hm-design/ui/dashboard-status.css`와 소비 Badge mapping을 연결한다([상태 예제](../patterns/dashboard-layout.md#dashboard-업무-상태-공통-계약)). Status CSS는 변수만 정의하며 81개 Runtime Theme 계약에 새 상태 Token을 추가하지 않는다. [Tailwind 검색 범위](runtime-portability.md#21-tailwind-v4-소비자-검색-범위)와 [Noto Sans KR·Asset 경로](runtime-portability.md#41-noto-sans-kr-경로-실행-환경별-확인)는 실행 환경별 소비 가이드를 따른다. +소비 CSS는 `tailwindcss` → `@hm-design/ui/tailwind.css` → `@hm-design/ui/theme.css` 순서로 앱 entry에서 로드한다. Dashboard 상태 표시가 있으면 그 뒤에 `@hm-design/ui/dashboard-status.css`와 소비 Badge mapping을 연결한다([상태 예제](../patterns/dashboard-layout.md#dashboard-업무-상태-공통-계약)). Status CSS는 변수만 정의하며 83개 Runtime Theme 계약에 새 상태 Token을 추가하지 않는다. [Tailwind 검색 범위](runtime-portability.md#21-tailwind-v4-소비자-검색-범위)와 [Noto Sans KR·Asset 경로](runtime-portability.md#41-noto-sans-kr-경로-실행-환경별-확인)는 실행 환경별 소비 가이드를 따른다. Default는 특별한 컴포넌트 내부 상수가 아니라 이 계약을 만족하는 기본 제공 Theme Set이다. 주입이 없으면 패키지 CSS의 Default preset을 사용한다. `defaultRuntimeTheme`는 동일한 값을 가진 JSON 형태 preset이다. Story의 CSS fallback / Default preset 주입 비교와 계약 값 검사로 두 표현의 일치를 검증한다. @@ -24,7 +24,7 @@ Default는 특별한 컴포넌트 내부 상수가 아니라 이 계약을 만 - **내부 Derived**: `--hm-sem-surface-highlight`(Accent 45%), gradient 조합, shadow/overlay 조합, shadcn adapter(`--primary`, `--ring` 등). 외부 JSON은 이 변수를 직접 쓰지 않는다. - **내부 Component Mapping**: `--hm-checkbox-*`, `--hm-calendar-*`, `--hm-pagination-*` 등. 기존 이름을 유지한다. Runtime JSON으로 받지 않는다. - Typography, height, spacing, gradient geometry, shadow geometry, responsive layout은 코드 계약이다. 이번 컬러 구조 변경으로 Runtime 범위를 확대하지 않았다. -- Typography 현황(2026-10-08): 기존 크기와 ui_viz 승인 변경값을 유지한다. `packages/ui/src/theme/*.css`의 font-size는 px이고 shadcn 유래 Tailwind class(`text-sm` 등)는 rem 기반이라 단위가 혼재한다. 소비자가 Tailwind class나 `className`으로 크기를 덮어쓰면 Theme 값보다 우선할 수 있다. Typography Role(heading/body/label 등)은 아직 공통 Token으로 도입하지 않았고 Runtime JSON 81개 계약에도 포함하지 않는다. +- Typography 현황(2026-10-08): 기존 크기와 ui_viz 승인 변경값을 유지한다. `packages/ui/src/theme/*.css`의 font-size는 px이고 shadcn 유래 Tailwind class(`text-sm` 등)는 rem 기반이라 단위가 혼재한다. 소비자가 Tailwind class나 `className`으로 크기를 덮어쓰면 Theme 값보다 우선할 수 있다. Typography Role(heading/body/label 등)은 아직 공통 Token으로 도입하지 않았고 Runtime JSON 83개 계약에도 포함하지 않는다. 기존 25개 allowlist의 JSON 이름과 validation을 유지하고 Active / on Active / Inverse Text / Subtle Surface / Accent / on Accent를 추가했다. 같은 CSS property로 향하는 중복 공개 key는 없다. Component 수백 개의 Token을 요구하는 대신 Theme 팔레트는 선택적 확장이다. 핵심 역할만 지정해도 사용할 수 있다. 팔레트 이름은 색상 계열을 유지하며, 역할 Token은 각각 독립적으로 override할 수 있다. diff --git a/docs/guidelines/theme-delivery.md b/docs/guidelines/theme-delivery.md index b55e4c2..80d8a7c 100644 --- a/docs/guidelines/theme-delivery.md +++ b/docs/guidelines/theme-delivery.md @@ -12,7 +12,7 @@ HMDesignSystem/ │ ├─ ui/ # @hm-design/ui: logic, contract, mapping, runtime │ └─ center-graphic/ # 독립 Graphic package ├─ themes/ -│ ├─ default.json # 79개 public color 값의 공식 Default 원본 +│ ├─ default.json # 81개 public color 값의 공식 Default 원본 │ ├─ service-example.json # 5개 역할만 바꾸는 명시적 예제 │ └─ drafts/ # 과거 초안; Theme 산출 대상 아님 ├─ scripts/ @@ -23,7 +23,7 @@ HMDesignSystem/ └─ docs/guidelines/ ``` -`themes/default.json`은 기존 v1 `{schemaVersion:1,tokens:{...}}` 계약을 사용한다. Component Token은 없다. 81개 Runtime 입력 중 79개 컬러를 포함한다. 나머지 두 radius와 layout은 패키지 template에서 관리한다. 서비스 Theme는 같은 계약의 부분 컬러 override다. +`themes/default.json`은 기존 v1 `{schemaVersion:1,tokens:{...}}` 계약을 사용한다. Component Token은 없다. 83개 Runtime 입력 중 81개 컬러를 포함한다. 나머지 두 radius와 layout은 패키지 template에서 관리한다. 서비스 Theme는 같은 계약의 부분 컬러 override다. ## 단일 Default 원본과 package fallback diff --git a/docs/guidelines/개발-적용-가이드.md b/docs/guidelines/개발-적용-가이드.md index dd69600..520850f 100644 --- a/docs/guidelines/개발-적용-가이드.md +++ b/docs/guidelines/개발-적용-가이드.md @@ -32,7 +32,7 @@ AI 신규·수정 UI 작업은 사용자의 별도 요청 없이 기존 Componen | `.storybook/`, `src/components/*.stories.tsx` | 현재 시제품 → 계속 사용 | 실제 컴포넌트 검수. 패키지 산출물에는 Story를 넣지 않음 | | `packages/ui/src/patterns/`, `packages/ui/src/theme.css` | 현재 구현 | 업무/Layout composition과 기본 Theme CSS. Library 산출물은 `npm run build:packages`로 생성 | | `packages/center-graphic/` | 현재 구현 | `@hm-design/center-graphic` 독립 package 배포 경계. UI package와 필수 의존 없음 | -| `packages/ui/src/theme/contract.ts`, `runtime.ts` | 현재 구현 | 공개 81개 입력, 형식/범위 검증, atomic fallback·cleanup, Global/Scoped 적용. `@hm-design/ui/theme` export | +| `packages/ui/src/theme/contract.ts`, `runtime.ts` | 현재 구현 | 공개 83개 입력, 형식/범위 검증, atomic fallback·cleanup, Global/Scoped 적용. `@hm-design/ui/theme` export | | `themes/drafts/` | Runtime MVP 제안 | 디자인팀의 Theme 값 초안·검수 이력. Git 커밋만으로 운영 Theme이 바뀌지 않으며 패키지에도 넣지 않음 | | `themes/*.json` | 현재 구현 | `themes/default.json`은 공식 Default Color Source of Truth. 검증된 top-level JSON은 Theme CDN 배포 단위이며 Git push와 CDN publish는 별도 단계 | | 서비스 앱의 bootstrap | 개발팀 앱 | 패키지 버전 설치, themeId/mode 결정, API/CDN fetch·캐시·실패 처리, 검증된 값 적용 | diff --git a/docs/guidelines/프로젝트-지침.md b/docs/guidelines/프로젝트-지침.md index e73e3d0..dd5b04e 100644 --- a/docs/guidelines/프로젝트-지침.md +++ b/docs/guidelines/프로젝트-지침.md @@ -43,7 +43,7 @@ Primitive (설계·빌드 시 관리) → Semantic (컴포넌트 참조) → Com 컴포넌트는 `blue-600` 같은 Primitive나 `#2563eb`, `8px` 같은 실제 값을 직접 참조하지 않는다. Tailwind를 쓰는 경우에도 `bg-primary`의 `--color-primary` → `--primary` → `--hm-sem-action-primary` adapter 연결을 확인한다. **Runtime override는 공개 allowlist의 Semantic/Theme palette 값만** 허용한다. Primitive, 컴포넌트 전용 내부 변수, 임의 CSS selector/rule/JavaScript는 Publish 대상이 아니다. -현재 allowlist는 `packages/ui/src/theme/contract.ts`의 81개 입력이다(색상 Semantic/Theme palette와 input/container radius). 정확한 이름·타입·기본값·허용 범위는 이 계약과 `runtime-theme-contract.md`를 따른다. Shadow geometry는 현재 공개 입력이 아니다. Typography와 spacing은 실제 사용처와 레이아웃 영향 검토 후 개별 등록한다. 문서에 예시가 있다는 이유로 곧바로 Runtime 허용 Token이 되지 않는다. +현재 allowlist는 `packages/ui/src/theme/contract.ts`의 83개 입력이다(색상 Semantic/Theme palette와 input/container radius). 정확한 이름·타입·기본값·허용 범위는 이 계약과 `runtime-theme-contract.md`를 따른다. Shadow geometry는 현재 공개 입력이 아니다. Typography와 spacing은 실제 사용처와 레이아웃 영향 검토 후 개별 등록한다. 문서에 예시가 있다는 이유로 곧바로 Runtime 허용 Token이 되지 않는다. 기본 Theme은 `@company/ui`가 배포하는 CSS에 포함하고 앱이 초기 렌더 전에 로드한다. Runtime 값이 없거나 가져오기·검증에 실패해도 기본값으로 UI가 렌더링되어야 한다. 현재 Light/Dark 구분은 없으며 단일 HM Theme 값을 기준으로 한다([테마 토큰 가이드](테마-토큰-가이드.md) 참조). diff --git a/docs/reports/orange-final-confirmation-2026-10-11.md b/docs/reports/orange-final-confirmation-2026-10-11.md new file mode 100644 index 0000000..8c070f7 --- /dev/null +++ b/docs/reports/orange-final-confirmation-2026-10-11.md @@ -0,0 +1,51 @@ +# 한맥오렌지 최종 사용자 확정값 반영 — 2026-10-11 + +RESULT: PASS (요청한 Color 영역) + +## 작업 기준과 결과 + +공식 프로젝트 `D:/디자인시스템/HMDesign-Gitea-Transfer`, `main`, origin `https://gitea.hmac.kr/b25027/HMDesign.git`에서 작업했다. 시작 Local/Remote HEAD는 모두 `7b22fe88a1142c76ad77663610a9936a6e2b7dc0`이고 Working Tree는 CLEAN이었다. + +사용자가 직접 확정한 Dark 1 #BC4C00, Dark 2 #883700, Dark 3 #4F2000을 최신 기준으로 적용했다. Dark 1·2 공개 Key와 CSS 변수를 추가했다. Dark 3는 이미 일치해 값을 유지했다. Light 4~Default 및 기존 81개 입력의 Key·CSS property·type·기본값은 보존했다. 공개 입력 83개, JSON 컬러 81개다. 이전 Needs Review 검수 보고서는 수정하지 않았다. + +## 한맥오렌지 8단계 + +| 단계 | 공개 Token | HEX | 처리 | +|---|---|---|---| +| Light 4 | color.palette.orange-light-4 | #FEBA88 | 기존 확정값 유지 | +| Light 3 | color.palette.orange-light-3 | #EC8F53 | 기존 확정값 유지 | +| Light 2 | color.palette.orange-light-2 | #F87725 | 기존 확정값 유지 | +| Light 1 | color.palette.orange-light-1 | #EB5F00 | 기존 확정값 유지 | +| Default | color.palette.orange-default | #CC5200 | 기존 확정값·기본색 강조 유지 | +| Dark 1 | color.palette.orange-dark-1 | #BC4C00 | 사용자 확정·추가 | +| Dark 2 | color.palette.orange-dark-2 | #883700 | 사용자 확정·추가 | +| Dark 3 | color.palette.orange-dark-3 | #4F2000 | 사용자 재확정·기존값 유지 | + +CSS는 각 suffix의 `--hm-sem-palette-orange-*`와 `--hm-orange-*`를 연결한다. 전체 순서와 HEX는 [현재 컬러 가이드](../guidelines/brand-color-steps.md) 및 [Runtime Contract](../guidelines/runtime-theme-contract.md)에 일치한다. + +## 호환성과 변경 파일 + +- `themes/default.json`, `packages/ui/src/theme/contract.ts`: 두 팔레트 입력만 추가. +- `scripts/theme-templates/primitives.css`, `default.css`: Primitive 및 Semantic 연결 추가. 생성된 `packages/ui/src/theme/primitives.css`, `default.css`, `default-values.generated.ts` 동기화. +- `src/foundation/color.stories.tsx`: Orange 8/8 확정 연결 및 현재 설명 갱신. Story ID `foundation-color--all`과 기존 강조 CSS 유지. +- 현재 가이드 7개: brand-color-steps, runtime-theme-contract, runtime-theme, designer-theme-guide, theme-delivery, 개발-적용-가이드, 프로젝트-지침. 확정 기준·계약 수량 정합성 갱신. +- 이 보고서: 이번 확정 결과를 이전 보고서와 분리 기록. + +Legacy Orange Light #D35A00·Mid #CE5600·Dark #B44B00·Deep #783402와 Border #BC4C00을 유지했다. 실제 Button gradient 소비 CSS는 수정하지 않았고 기존 CSS 선언을 기준 커밋과 비교했다. Legacy gradient를 브랜드 번호 단계로 alias하지 않는다. 브랜드 단계의 미확정 값이나 대응 문제는 없다. + +## 실제 실행한 선택 검증 + +- `npm run check:theme-defaults`: PASS, 81 JSON colors / 83 defaults 일치. +- `npm run build:ui`: PASS, UI JS/types/CSS 산출 정상. +- `npm run typecheck -w @hm-design/ui`, `node node_modules/typescript/bin/tsc -b`: PASS. +- `npm run build-storybook --ignore-scripts`: PASS. 기존 큰 chunk 및 plugin timing 경고만 존재. +- 기준 커밋의 81개 입력·79개 JSON 컬러·기존 CSS 선언 비교: PASS. 신규 Key는 Orange Dark 1·2만 존재. 기존 JSON과 두 신규 Key partial JSON 검증 PASS. Theme export 8개 유지. +- 실제 정적 Storybook Color 브라우저 1440px: Orange 8개 순서·표시 HEX·Computed RGB·CSS variable·Token 모두 PASS. Default는 유일한 data-base, 2px border, font-weight 700. 다른 칩 1px/400. 문서 전체 가로 overflow 없음, 콘솔 오류 0. +- 수정한 MD만 기존 링크 검사 알고리즘으로 검사: MD 8개 / 내부 링크 63개 / 오류 0건 PASS. Git 없는 폴더 검사와 전체 문서 검사는 반복하지 않음. +- AGENTS의 Guard 1회 PARTIAL/STORYBOOK: 원본 status/staticStatus NOT VERIFIED. styleEvidence STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT PASS / FINAL NOT VERIFIED. Guard 자체 미검증은 실제 Color 브라우저 PASS와 별도로 보존한다. + +## 재사용·미검증 구분 + +이전 보고서의 정상 Component·Guard·Green·Brown·LNB·Data Table·Separator·Git 없는 문서 검사 결과는 해당 구현이 변경되지 않아 재사용했다. 전체 Component 테스트, CENTER 빌드, 다른 Story의 브라우저 검수, CDN loader/Designer 전체 검증은 반복하지 않았다. 이번 검증은 사용자 확정 Orange Token과 Color Story에 한정한다. 이전 보고서의 Needs Review는 당시 상태를 기록한 과거 이력이다. + +공식 Gitea 일반 Commit·Push의 최종 SHA와 Local/Remote 일치는 최종 제출 결과에 기록한다. GitHub 소스·ui_viz·기존 main 이력과 금지된 Git 작업은 건드리지 않는다. diff --git a/packages/ui/src/theme/contract.ts b/packages/ui/src/theme/contract.ts index 1b38e9b..245aa73 100644 --- a/packages/ui/src/theme/contract.ts +++ b/packages/ui/src/theme/contract.ts @@ -83,6 +83,8 @@ export const runtimeThemeContract = { "color.palette.orange-light-3": { property: "--hm-sem-palette-orange-light-3", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-light-3"], type: "color" }, "color.palette.orange-light-2": { property: "--hm-sem-palette-orange-light-2", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-light-2"], type: "color" }, "color.palette.orange-light-1": { property: "--hm-sem-palette-orange-light-1", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-light-1"], type: "color" }, + "color.palette.orange-dark-1": { property: "--hm-sem-palette-orange-dark-1", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-dark-1"], type: "color" }, + "color.palette.orange-dark-2": { property: "--hm-sem-palette-orange-dark-2", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-dark-2"], type: "color" }, "color.palette.orange-dark-3": { property: "--hm-sem-palette-orange-dark-3", defaultValue: runtimeThemeDefaults["--hm-sem-palette-orange-dark-3"], type: "color" }, } as const diff --git a/packages/ui/src/theme/default-values.generated.ts b/packages/ui/src/theme/default-values.generated.ts index 58b32f8..c8b7190 100644 --- a/packages/ui/src/theme/default-values.generated.ts +++ b/packages/ui/src/theme/default-values.generated.ts @@ -81,5 +81,7 @@ export const runtimeThemeDefaults = { "--hm-sem-palette-orange-light-3": "#ec8f53", "--hm-sem-palette-orange-light-2": "#f87725", "--hm-sem-palette-orange-light-1": "#eb5f00", + "--hm-sem-palette-orange-dark-1": "#bc4c00", + "--hm-sem-palette-orange-dark-2": "#883700", "--hm-sem-palette-orange-dark-3": "#4f2000" } as const diff --git a/packages/ui/src/theme/default.css b/packages/ui/src/theme/default.css index 8077fe4..290accc 100644 --- a/packages/ui/src/theme/default.css +++ b/packages/ui/src/theme/default.css @@ -211,5 +211,7 @@ --hm-sem-palette-orange-light-3: var(--hm-orange-light-3); --hm-sem-palette-orange-light-2: var(--hm-orange-light-2); --hm-sem-palette-orange-light-1: var(--hm-orange-light-1); + --hm-sem-palette-orange-dark-1: var(--hm-orange-dark-1); + --hm-sem-palette-orange-dark-2: var(--hm-orange-dark-2); --hm-sem-palette-orange-dark-3: var(--hm-orange-dark-3); } diff --git a/packages/ui/src/theme/primitives.css b/packages/ui/src/theme/primitives.css index 527bc1c..baeca6b 100644 --- a/packages/ui/src/theme/primitives.css +++ b/packages/ui/src/theme/primitives.css @@ -45,7 +45,7 @@ --hm-yellow-accent: #ffc600; } -/* Confirmed brand palette additions (ui_viz Color 4.1). */ +/* Confirmed brand palette additions (ui_viz Color 4.1; Orange Dark 1/2 confirmed by user 2026-10-11). */ :root { --hm-green-dark-3: #020a07; --hm-brown-light-3: #c1a770; @@ -54,5 +54,7 @@ --hm-orange-light-3: #ec8f53; --hm-orange-light-2: #f87725; --hm-orange-light-1: #eb5f00; + --hm-orange-dark-1: #bc4c00; + --hm-orange-dark-2: #883700; --hm-orange-dark-3: #4f2000; } diff --git a/scripts/theme-templates/default.css b/scripts/theme-templates/default.css index 90b5d6d..3e45857 100644 --- a/scripts/theme-templates/default.css +++ b/scripts/theme-templates/default.css @@ -210,5 +210,7 @@ --hm-sem-palette-orange-light-3: {{color.palette.orange-light-3|var(--hm-orange-light-3)}}; --hm-sem-palette-orange-light-2: {{color.palette.orange-light-2|var(--hm-orange-light-2)}}; --hm-sem-palette-orange-light-1: {{color.palette.orange-light-1|var(--hm-orange-light-1)}}; + --hm-sem-palette-orange-dark-1: {{color.palette.orange-dark-1|var(--hm-orange-dark-1)}}; + --hm-sem-palette-orange-dark-2: {{color.palette.orange-dark-2|var(--hm-orange-dark-2)}}; --hm-sem-palette-orange-dark-3: {{color.palette.orange-dark-3|var(--hm-orange-dark-3)}}; } diff --git a/scripts/theme-templates/primitives.css b/scripts/theme-templates/primitives.css index 6cb7151..5abd0dc 100644 --- a/scripts/theme-templates/primitives.css +++ b/scripts/theme-templates/primitives.css @@ -44,7 +44,7 @@ --hm-yellow-accent: {{color.palette.yellow-accent}}; } -/* Confirmed brand palette additions (ui_viz Color 4.1). */ +/* Confirmed brand palette additions (ui_viz Color 4.1; Orange Dark 1/2 confirmed by user 2026-10-11). */ :root { --hm-green-dark-3: {{color.palette.green-dark-3}}; --hm-brown-light-3: {{color.palette.brown-light-3}}; @@ -53,5 +53,7 @@ --hm-orange-light-3: {{color.palette.orange-light-3}}; --hm-orange-light-2: {{color.palette.orange-light-2}}; --hm-orange-light-1: {{color.palette.orange-light-1}}; + --hm-orange-dark-1: {{color.palette.orange-dark-1}}; + --hm-orange-dark-2: {{color.palette.orange-dark-2}}; --hm-orange-dark-3: {{color.palette.orange-dark-3}}; } diff --git a/src/foundation/color.stories.tsx b/src/foundation/color.stories.tsx index 2222d5c..33fcb54 100644 --- a/src/foundation/color.stories.tsx +++ b/src/foundation/color.stories.tsx @@ -2,12 +2,12 @@ import type { Meta, StoryObj } from "@storybook/react-vite" import { runtimeThemeContract, type RuntimeThemeToken } from "@hm-design/ui/theme" import { ReferencePage, ReferenceSection } from "./reference" -// ui_viz Color 4.1 confirmed stages only. Orange Dark 1/2 remain Needs Review. +// Orange Dark 1/2/3 use the latest user-confirmed values (2026-10-11). const stages = ["light-4", "light-3", "light-2", "light-1", "default", "dark-1", "dark-2", "dark-3"] as const const palettes = [ { name: "한맥그린", prefix: "green", confirmed: [...stages], legacy: [] }, { name: "한맥브라운", prefix: "brown", confirmed: [...stages], legacy: ["deep"] }, - { name: "한맥오렌지", prefix: "orange", confirmed: ["light-4", "light-3", "light-2", "light-1", "default", "dark-3"], legacy: ["light", "mid", "dark", "deep"] }, + { name: "한맥오렌지", prefix: "orange", confirmed: [...stages], legacy: ["light", "mid", "dark", "deep"] }, ] const stageLabel = (stage: string) => stage === "default" ? "Default · 기본색" : stage.replaceAll("-", " ").replace(/^./, letter => letter.toUpperCase()) function ColorChip({ prefix, stage, confirmed = true }: { prefix: string; stage: string; confirmed?: boolean }) { @@ -19,8 +19,8 @@ function ColorChip({ prefix, stage, confirmed = true }: { prefix: string; stage: } function ColorReferencePage() { - return - {palettes.map(palette => + return + {palettes.map(palette =>
{stages.map(stage => )}
{palette.legacy.length > 0 && <>

기존 버튼 그라데이션 색상 · 브랜드 단계와 별도 유지

diff --git a/themes/default.json b/themes/default.json index bf16d6b..658feb0 100644 --- a/themes/default.json +++ b/themes/default.json @@ -79,6 +79,8 @@ "color.palette.orange-light-3": "#ec8f53", "color.palette.orange-light-2": "#f87725", "color.palette.orange-light-1": "#eb5f00", + "color.palette.orange-dark-1": "#bc4c00", + "color.palette.orange-dark-2": "#883700", "color.palette.orange-dark-3": "#4f2000" } }