feat(theme): add provisional generic status error token

This commit is contained in:
DESKTOP-KPCP6AL\ㅅㅎ committed 2026-10-11 13:07:59 +09:00
1 parent 3ecc8c7402
commit 220973cf89
11 files changed
+69 -8

No files matched your search

+1 -1
View File
@@ -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는 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는 세트 전체를 제공해야 합니다.
- 전체 Runtime Contract는 84개 입력입니다(2026-10-11 기존 확정 브랜드 팔레트 8개 및 사용자 확정 Orange Dark 1·2 추가, 이전 81개 보존 및 Provisional Generic Status Error 1개 추가). 배포하는 Default JSON은 82개 컬러이며 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 편집기 설치는 이번 코드 변경을 적용하는 최초 빌드가 필요합니다. 설치 후 컬러 값을 바꾸는 운영에는 재빌드가 필요 없습니다.
+9 -2
View File
@@ -12,6 +12,7 @@
| `color.action.primary` | `--hm-sem-action-primary` | `#123328` | Strong / Primary ink | Yes | checkbox/radio hover, slider Hover/Drag halo, pagination current, badge default, button outline, navigation current ink |
| `color.action.cancel` | `--hm-sem-action-cancel` | `#6e6759` | 공개 취소 역할 | Yes | Button `variant="cancel"` + `appearance="outline"` |
| `color.action.destructive` | `--hm-sem-action-destructive` | `#d32f2f` | 오류/위험 역할 | Yes | checkbox, radio, badge, input, button |
| `color.status.error` | `--hm-sem-status-error` | `#b3261e` | Generic Status Error · 일반 상태 오류 · Provisional | Yes | Foundation Color / 선택적 Theme 입력; 기존 Component 자동 연결 없음 |
| `color.stroke.default` | `--hm-sem-stroke-default` | `#9a9284` | 기본 border | Yes | checkbox, radio, switch, badge |
| `color.stroke.input.default` | `--hm-sem-stroke-input-default` | `#dedbd2` | 입력/패널 divider border | Yes | table, input, select, GNB 콘텐츠 LNB divider |
| `color.stroke.input.focus` | `--hm-sem-stroke-input-focus` | `#266651` | 공통 Focus border/ring | Yes | input, select, button, checkbox, calendar, slider Keyboard Focus halo 등; GNB/LNB는 contextual 예외 |
@@ -89,14 +90,20 @@
| `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 |
총 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하지 않는다.
총 84개. 기존 25개 + 핵심 역할 6개 + 선택적 팔레트 52개(2026-10-11 ui_viz 확정 단계 8개 및 사용자 확정 Orange Dark 1·2 추가) + Provisional Generic Status Error 1개. 팔레트는 컴포넌트별 계약이 아니며 Primary / Active / Focus를 개별 지정하면 팔레트 alias보다 우선한다. Focus와 Active, Primary와 On Accent는 각각 sibling이며 서로 alias하지 않는다.
## Generic Status Error — Provisional · 2026-10-11
`color.status.error` → `--hm-sem-status-error` → Default `#B3261E`는 일반 상태 오류의 독립 Semantic Token이다. 사용 가능 상태만 승인되었으며 Confirmed 승격이나 Component 적용은 별도 사용자 결정이다. [Foundation Color](../../src/foundation/color.stories.tsx)는 기존 Semantic 카드와 Computed Property Hook으로 실제 Swatch·HEX·Canonical·CSS Variable·Provisional을 표시한다. [추가 및 선택 검증 기록](../reports/generic-status-error-token-2026-10-11.md).
Input Error와 Generic Status Error는 별도 역할이다. Input / Alert destructive / Toast Error / Badge destructive 및 `color.action.destructive`의 기존 `#D32F2F` 값·Alias 체인, Dashboard issue `#FF4D4F`는 유지한다. 새 Token을 기존 Component에 자동 연결하지 않는다.
`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개와 이전 팔레트 보강 이후 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`(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`로 분리한다.
Default 컬러의 운영 원본은 `themes/default.json`(82개 컬러)이다. `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 계약은 유지한다.
+2 -2
View File
@@ -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는 변수만 정의하며 83개 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는 변수만 정의하며 84개 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 83개 계약에도 포함하지 않는다.
- 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 84개 계약에도 포함하지 않는다.
기존 25개 allowlist의 JSON 이름과 validation을 유지하고 Active / on Active / Inverse Text / Subtle Surface / Accent / on Accent를 추가했다. 같은 CSS property로 향하는 중복 공개 key는 없다. Component 수백 개의 Token을 요구하는 대신 Theme 팔레트는 선택적 확장이다. 핵심 역할만 지정해도 사용할 수 있다. 팔레트 이름은 색상 계열을 유지하며, 역할 Token은 각각 독립적으로 override할 수 있다.
+2 -2
View File
@@ -12,7 +12,7 @@ HMDesignSystem/
│ ├─ ui/ # @hm-design/ui: logic, contract, mapping, runtime
│ └─ center-graphic/ # 독립 Graphic package
├─ themes/
│ ├─ default.json # 81개 public color 값의 공식 Default 원본
│ ├─ default.json # 82개 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은 없다. 83개 Runtime 입력 중 81개 컬러를 포함한다. 나머지 두 radius와 layout은 패키지 template에서 관리한다. 서비스 Theme는 같은 계약의 부분 컬러 override다.
`themes/default.json`은 기존 v1 `{schemaVersion:1,tokens:{...}}` 계약을 사용한다. Component Token은 없다. 84개 Runtime 입력 중 82개 컬러를 포함한다. 나머지 두 radius와 layout은 패키지 template에서 관리한다. 서비스 Theme는 같은 계약의 부분 컬러 override다.
## 단일 Default 원본과 package fallback
@@ -0,0 +1,46 @@
# Generic Status Error 독립 Semantic Token — 2026-10-11
RESULT: PARTIAL. 독립 Token과 Foundation Color 연결은 완료했다. Guard의 패키지 범위·동적 스타일 미검증은 원본대로 보존하며 별도 실행 증거와 구분한다.
## 기준과 범위
- 경로: `D:\디자인시스템\HMDesign-Gitea-Transfer`, `main`, 공식 origin `https://gitea.hmac.kr/b25027/HMDesign.git`.
- 시작 Local/Remote HEAD: `3ecc8c7402c9ce51011ebb584e06d13aebf80d64`. 시작 Working Tree는 깨끗했다.
- 범위: Theme 공개 입력 + 기존 Foundation Color Story / React. 신규 화면·Component·Pattern·Navigation 없음. 기존 `foundation-color--all` ID와 ReferencePage / ReferenceSection / SemanticColor / Swatch / Computed Property Hook을 유지했다.
- 읽기 전용 참고 `ui_viz` 및 GitHub 이전 원본은 수정하지 않았다. 이전 [Foundation Color 검증 기록](foundation-color-storybook-2026-10-11.md)은 당시 누락 상태를 기록한 이력으로 보존한다.
## Token과 생성 경로
| Name | Canonical | Default HEX | Web CSS Variable | Status | Role |
|---|---|---|---|---|---|
| Generic Status Error | `color.status.error` | `#B3261E` | `--hm-sem-status-error` | Provisional | 일반 상태 오류 |
[공개 계약](../../packages/ui/src/theme/contract.ts) + [Default JSON](../../themes/default.json) + [CSS 템플릿](../../scripts/theme-templates/default.css) → `npm run generate:theme-defaults` → [생성 CSS](../../packages/ui/src/theme/default.css) / [생성 기본값](../../packages/ui/src/theme/default-values.generated.ts). 생성 파일을 수동 수정하지 않았다. 84개 공개 입력 / 82개 Default 컬러 / 기존 radius 2개.
이 Token의 사용 가능 상태만 승인됐다. Confirmed 승격과 실제 Component 적용은 별도 사용자 결정이다. Input Error·Action Destructive와 병합하거나 기존 소비처를 자동 연결하지 않는다. [Runtime Token 계약](../guidelines/runtime-theme-contract.md#generic-status-error--provisional--2026-10-11).
## 보존과 선택 검증
- Default JSON의 기존 81개 컬러 값, default.css의 기존 140개 CSS 선언이 시작 HEAD와 동일하다. 새 Token 외 UI 소스 123개는 불변이다.
- Input Error / Alert destructive / Toast Error / Badge destructive의 `#D32F2F`, `color.action.destructive` 및 기존 Alias 체인, Dashboard issue `#FF4D4F` 유지.
- Input Disabled Label 60%, Green/Brown/Orange 8단계 및 모든 기존 Background / Button Gradient 유지. Component·Pattern·Theme의 다른 값과 대표 Story ID 변경 없음.
- 생성 stale 검사 + root/UI/CENTER typecheck 및 패키지 빌드 PASS. Theme-only artifact 빌드 PASS.
- Storybook static build PASS: 기존 `storybook-static` 출력의 폰트 쓰기 권한 오류 이후 `_local/generic-status-error-20261011/storybook` 별도 경로로 빌드 성공. 기존 500kB chunk / bundler 성능 경고는 남아 있으며 코드 오류는 없다.
- 공개 패키지 API에서 새 Token 기본값·유효 입력·invalid 거부·독립 override·reset 복구·기존 Destructive 값 보존 PASS. Runtime Contract MD의 모든 84개 key/property/default 연결 PASS.
- 브라우저 Foundation Color: 실제 Swatch `rgb(179, 38, 30)`, root 변수 `#b3261e`, 표시 HEX `#B3261E`, Canonical / CSS Variable / Provisional PASS. 기존 수집 Theme property 200개 계산값 변화 0.
- 최종 static Storybook에서도 동일 Swatch·HEX·변수 확인 PASS, 브라우저 console error 0. Input / Alert destructive / Toast Error / Badge destructive의 계산 변수 모두 `#d32f2f`. 390px에서 Canonical과 CSS Variable은 각각 한 줄 식별 가능, 카드·문서 가로 overflow 0.
- 390 / 768 / 1280 / 1440px에서 문서 가로 overflow 없음, 새 카드의 scrollWidth/clientWidth 및 scrollHeight/clientHeight 일치, 정상 줄바꿈과 Swatch 유지 확인. 기존 카드·CSS 레이아웃은 변경하지 않았다.
- MD 검사: 108개 문서 / 내부 링크 495개, 누락 경로·heading 0. Git diff whitespace 검사 PASS.
- 전체 Component/Storybook 회귀 검증은 반복하지 않았다. 신규 control·Label·keyboard/focus·Navigation 검증은 이번 변경에 해당하지 않는다. 실제 스크린리더·실기기 검증 NOT VERIFIED.
## Guard와 실행 증거 구분
`node scripts/ai-generation-guard.mjs --target . --scope PARTIAL --profile STORYBOOK --files src/foundation/color.stories.tsx,packages/ui/src/theme/contract.ts,packages/ui/src/theme/default.css,packages/ui/src/theme/default-values.generated.ts,scripts/theme-templates/default.css,themes/default.json --json`을 1회 실행했다. FAIL 0 / 원본 status 및 staticStatus는 NOT VERIFIED.
SCOPE-001: package 계약·생성값·CSS/template은 증명된 Storybook 소비 그래프 밖이며 별도 build/runtime API 검사로 확인했다. TOKEN-002: 기존 동적 style/property/template과 StoryPage className은 정적 해석의 한계다. Generic Status Error Swatch 위치(`color.stories.tsx:85`)의 실제 var 연결 및 계산색은 위 브라우저 증거로 확인했다. 이 근거는 다른 동적 위치 전체를 검증했다는 뜻이 아니다.
Guard CSS styleEvidence: STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT PASS / FINAL NOT VERIFIED. 원본 Guard를 덮어쓰거나 전체 PASS로 바꾸지 않았다. 이번 추가의 디자인 의도는 사용자 승인 범위인 독립 Provisional Token과 기존 카드 표시다. 로컬 원본 증거는 `_local/generic-status-error-20261011/`에 보관한다(배포/Clone 근거는 이 문서).
## Git
관련 변경만 Stage하고 staged diff 검토 후 `feat(theme): add provisional generic status error token`으로 Commit, 공식 Gitea main에 일반 Push한다. Commit/Push 직전 원격 main을 시작 SHA와 비교하고 변경 시 중단한다. Local/Remote SHA·Working Tree와 최종 실행 결과는 최종 응답에 기록한다.
+2
View File
@@ -10,6 +10,8 @@ export const runtimeThemeContract = {
"color.action.primary": { property: "--hm-sem-action-primary", defaultValue: runtimeThemeDefaults["--hm-sem-action-primary"], type: "color" },
"color.action.cancel": { property: "--hm-sem-action-cancel", defaultValue: runtimeThemeDefaults["--hm-sem-action-cancel"], type: "color" },
"color.action.destructive": { property: "--hm-sem-action-destructive", defaultValue: runtimeThemeDefaults["--hm-sem-action-destructive"], type: "color" },
// Provisional generic status role; existing component error/destructive mappings stay unchanged.
"color.status.error": { property: "--hm-sem-status-error", defaultValue: runtimeThemeDefaults["--hm-sem-status-error"], type: "color" },
"color.stroke.default": { property: "--hm-sem-stroke-default", defaultValue: runtimeThemeDefaults["--hm-sem-stroke-default"], type: "color" },
"color.stroke.input.default": { property: "--hm-sem-stroke-input-default", defaultValue: runtimeThemeDefaults["--hm-sem-stroke-input-default"], type: "color" },
"color.stroke.input.focus": { property: "--hm-sem-stroke-input-focus", defaultValue: runtimeThemeDefaults["--hm-sem-stroke-input-focus"], type: "color" },
@@ -9,6 +9,7 @@ export const runtimeThemeDefaults = {
"--hm-sem-action-primary": "#123328",
"--hm-sem-action-cancel": "#6e6759",
"--hm-sem-action-destructive": "#d32f2f",
"--hm-sem-status-error": "#b3261e",
"--hm-sem-stroke-default": "#9a9284",
"--hm-sem-stroke-input-default": "#dedbd2",
"--hm-sem-stroke-input-focus": "#266651",
+2
View File
@@ -41,6 +41,8 @@
--hm-sem-action-primary: var(--hm-color-primary);
--hm-sem-action-cancel: var(--hm-color-action-cancel);
--hm-sem-action-destructive: var(--hm-color-action-destructive);
/* Provisional generic status role, independent of component error/destructive aliases. */
--hm-sem-status-error: #b3261e;
--hm-sem-stroke-default: var(--hm-color-border-default);
--hm-sem-stroke-input-default: var(--hm-color-border-control);
--hm-sem-stroke-input-focus: var(--hm-color-border-focus);
+2
View File
@@ -40,6 +40,8 @@
--hm-sem-action-primary: {{color.action.primary|var(--hm-color-primary)}};
--hm-sem-action-cancel: {{color.action.cancel|var(--hm-color-action-cancel)}};
--hm-sem-action-destructive: {{color.action.destructive|var(--hm-color-action-destructive)}};
/* Provisional generic status role, independent of component error/destructive aliases. */
--hm-sem-status-error: {{color.status.error}};
--hm-sem-stroke-default: {{color.stroke.default|var(--hm-color-border-default)}};
--hm-sem-stroke-input-default: {{color.stroke.input.default|var(--hm-color-border-control)}};
--hm-sem-stroke-input-focus: {{color.stroke.input.focus|var(--hm-color-border-focus)}};
+1 -1
View File
@@ -17,7 +17,7 @@ const semanticGroups = [
{ name: "Input Error Outline", token: "color.action.destructive", property: "--hm-input-error-border-color", status: "Confirmed · 현행 mapping", legacy: "color.stroke.input.error", note: "현행 Input / Textarea / Select 오류 윤곽은 Action Destructive를 소비합니다. 독립 Input Error canonical은 공개 계약에 없습니다. Generic Status Error와 별도 역할입니다." },
] },
{ name: "Status", colors: [
{ name: "Generic Status Error", status: "Provisional · 미정의", legacy: "color.status.error", note: "현재 계약·Theme에 해당 역할이 없습니다. Alert destructive는 color.action.destructive를 소비하지만 Generic Status Error로 대체하지 않습니다." },
{ name: "Generic Status Error", token: "color.status.error", status: "Provisional", note: "일반 상태 오류를 위한 독립 Semantic Token입니다. 사용 가능 상태만 승인되었으며 기존 Input / Alert / Toast / Badge 오류색과 Action Destructive mapping은 유지합니다. 실제 Component 적용은 별도 사용자 결정이 필요합니다." },
] },
{ name: "Action", colors: [
{ name: "Primary Action", token: "color.action.primary", status: "Confirmed", note: "확인·저장 등 주요 행동. Gradient 배경과는 별도 역할입니다." },
+1
View File
@@ -9,6 +9,7 @@
"color.action.primary": "#123328",
"color.action.cancel": "#6e6759",
"color.action.destructive": "#d32f2f",
"color.status.error": "#b3261e",
"color.stroke.default": "#9a9284",
"color.stroke.input.default": "#dedbd2",
"color.stroke.input.focus": "#266651",