From 3ebc84e32cf91298a2a4d8046753244c499fd719 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=88=98=ED=98=84?= Date: Sun, 11 Oct 2026 13:47:01 +0900 Subject: [PATCH] docs(storybook): remove button gradient previews from foundation color --- docs/guidelines/runtime-theme-contract.md | 2 +- src/foundation/color.stories.tsx | 9 ++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/docs/guidelines/runtime-theme-contract.md b/docs/guidelines/runtime-theme-contract.md index e811e2e..c3cad55 100644 --- a/docs/guidelines/runtime-theme-contract.md +++ b/docs/guidelines/runtime-theme-contract.md @@ -131,4 +131,4 @@ Dashboard의 `active / hold / done / issue` 업무 상태 계약은 `packages/ui 조합 변수 `--hm-sem-bg-brown` / `--hm-sem-bg-orange`는 내부 Derived CSS이며 전체 Gradient 문자열·방향·위치를 Runtime JSON 입력으로 받지 않는다. Runtime에서 한 stop을 바꾸려면 해당 브랜드의 5개 stop을 모두 전달한다. Brown·Orange 두 그룹은 서로 독립적이며 미지정 그룹은 기존 fallback을 따른다. 부분 그룹은 atomic validation으로 거부한다. Global / Scoped 적용과 Reset은 [Runtime Theme](runtime-theme.md)의 기존 계약을 사용한다. -공통 Background는 기존 Green·Brown/Orange Button·Dashboard 배경에 자동 연결하지 않는다. [Foundation Color](../../src/foundation/color.stories.tsx)의 기존 `foundation-color--all`에서 실제 Gradient, 각 stop Token/CSS 변수·위치·HEX, 미리보기 요소의 computed `background-image`를 표시한다. 기존 Button 전용 미리보기도 보존한다. 과거 미정의 검증 보고서는 당시 이력으로 유지한다. +공통 Background는 기존 Green·Brown/Orange Button·Dashboard 배경에 자동 연결하지 않는다. [Foundation Color](../../src/foundation/color.stories.tsx)의 기존 `foundation-color--all`에서 Green·Brown·Orange 공통 Background Gradient, 각 stop Token/CSS 변수·위치·HEX, 미리보기 요소의 computed `background-image`를 표시한다. Button 전용 Gradient 미리보기는 Foundation Color에서 제외하며, 실제 Button의 Gradient CSS·Theme·Token은 유지한다. 과거 미정의 검증 보고서는 당시 이력으로 유지한다. diff --git a/src/foundation/color.stories.tsx b/src/foundation/color.stories.tsx index 08ff352..5dcfa01 100644 --- a/src/foundation/color.stories.tsx +++ b/src/foundation/color.stories.tsx @@ -34,13 +34,13 @@ const semanticGroups = [ type ColorReference = { name: string; token?: RuntimeThemeToken; property?: string; status: string; note: string; legacy?: string; foreground?: boolean } const gradients = [ { name: "HM Green Background", property: "--hm-sem-bg-brand", stopPrefix: undefined, legacy: "gradient.green.background", note: "현행 공통 브랜드 배경 · Confirmed. 공개 stop 계약은 color.bg.brand.stop.*이며 방향·위치는 현행 CSS에서 읽습니다. Dashboard의 Header / Compact 배경은 별도 정의입니다." }, - { name: "HM Brown Background", property: "--hm-sem-bg-brown", stopPrefix: "color.bg.brown.stop", legacy: "gradient.brown.background", note: "공통 Brown Background · Confirmed. 확정 Brown Palette를 참조하는 독립 5-stop 배경입니다. Runtime JSON은 5개 stop 전체를 지정하며 Button·Dashboard와 별도 역할입니다.", componentProperty: "--hm-button-brand-brown-background" }, - { name: "Orange Background", property: "--hm-sem-bg-orange", stopPrefix: "color.bg.orange.stop", legacy: "gradient.orange.background", note: "공통 Orange Background · Confirmed. 확정 Orange Palette를 참조하는 독립 5-stop 배경입니다. Runtime JSON은 5개 stop 전체를 지정하며 Button·Dashboard와 별도 역할입니다.", componentProperty: "--hm-button-brand-orange-background" }, + { name: "HM Brown Background", property: "--hm-sem-bg-brown", stopPrefix: "color.bg.brown.stop", legacy: "gradient.brown.background", note: "공통 Brown Background · Confirmed. 확정 Brown Palette를 참조하는 독립 5-stop 배경입니다. Runtime JSON은 5개 stop 전체를 지정하며 Button·Dashboard와 별도 역할입니다." }, + { name: "Orange Background", property: "--hm-sem-bg-orange", stopPrefix: "color.bg.orange.stop", legacy: "gradient.orange.background", note: "공통 Orange Background · Confirmed. 확정 Orange Palette를 참조하는 독립 5-stop 배경입니다. Runtime JSON은 5개 stop 전체를 지정하며 Button·Dashboard와 별도 역할입니다." }, ] const colorProperties = [...new Set([ ...Object.values(runtimeThemeContract).filter(definition => definition.type === "color").map(definition => definition.property), "--hm-input-error-border-color", - ...gradients.flatMap(gradient => [gradient.property, gradient.componentProperty].filter((property): property is string => !!property)), + ...gradients.map(gradient => gradient.property), ])] // Read the current CSS value, never the legacy document HEX. Keep unsupported values visible. @@ -130,11 +130,10 @@ function ColorReferencePage() { {semanticGroups.map(group =>

{group.name}

{group.colors.map(item => )}
)} - +
{gradients.map(gradient =>

{gradient.name}

{gradient.note}

기존 참고 명칭: {gradient.legacy}

- {gradient.componentProperty &&

기존 Button 전용 Background · Confirmed

현행 Component CSS만 표시합니다. 공통 5-stop 배경과 독립적으로 유지합니다. 전체 Gradient canonical은 없으며 stop 색상은 공개 Palette를 소비합니다.

}
)}