fix: align v2 publisher review with HMDesign stories and tokens

src/foundation/color.stories.tsx

@@ -2,23 +2,30 @@ import type { Meta, StoryObj } from "@storybook/react-vite"
 import { runtimeThemeContract, type RuntimeThemeToken } from "@hm-design/ui/theme"
 import { ReferencePage, ReferenceSection } from "./reference"
 
-// Existing palette tokens only; values come from the public default contract.
+// ui_viz Color 4.1 confirmed stages only. Orange Dark 1/2 remain Needs Review.
+const stages = ["light-4", "light-3", "light-2", "light-1", "default", "dark-1", "dark-2", "dark-3"] as const
 const palettes = [
-  { name: "Green", prefix: "green", stages: ["light-4", "light-3", "light-2", "light-1", "default", "dark-1", "dark-2"] },
-  { name: "Brown", prefix: "brown", stages: ["light-4", "light-2", "light-1", "default", "dark-1", "deep"] },
-  { name: "Orange", prefix: "orange", stages: ["light-4", "light", "mid", "default", "dark", "deep"] },
+  { 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"] },
 ]
+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 }) {
+  const token = `color.palette.${prefix}-${stage}` as RuntimeThemeToken
+  const definition = confirmed ? runtimeThemeContract[token] : undefined
+  return <article className="hm-brand-color-chip" data-color-stage={stage} data-color-token={definition ? token : undefined} data-base={stage === "default" ? "" : undefined}>
+    <div className="hm-foundation-swatch" style={definition ? { background: `var(${definition.property})` } : undefined} />
+    <h3>{stageLabel(stage)}</h3><p>{definition ? definition.defaultValue.toUpperCase() : "미확정"}</p>
+  </article>
+}
 function ColorReferencePage() {
-  return <ReferencePage title="Color" intro="현재 HM 브랜드 컬러를 밝은색 → 기본색 → 어두운색 순서로 비교합니다. 기본색을 강조하며 컬러의 상세 의미와 적용 규칙은 추후 보완합니다.">
-    {palettes.map(palette => <ReferenceSection key={palette.name} title={palette.name} note="기존 컬러값을 유지합니다. 가로 컬러칩에서 단계명과 HEX를 확인합니다.">
-      <div className="hm-brand-color-row">{palette.stages.map(stage => {
-        const token = `color.palette.${palette.prefix}-${stage}` as RuntimeThemeToken
-        const definition = runtimeThemeContract[token]
-        return <article key={stage} className="hm-brand-color-chip" data-base={stage === "default" ? "" : undefined}>
-          <div className="hm-foundation-swatch" style={{ background: `var(${definition.property})` }} />
-          <h3>{stage === "default" ? "Default · 기본색" : stage.replaceAll("-", " ")}</h3><p>{definition.defaultValue.toUpperCase()}</p>
-        </article>
-      })}</div>
+  return <ReferencePage title="Color" intro="한맥 브랜드 컬러를 8단계로 비교합니다. 확정된 기존 색상만 표시하며, 미확정 단계는 색상을 지정하지 않습니다. 기본색을 강조합니다.">
+    {palettes.map(palette => <ReferenceSection key={palette.name} title={palette.name} note="Light 4 → Light 3 → Light 2 → Light 1 → Default → Dark 1 → Dark 2 → Dark 3. 미확정 단계는 추가 확인이 필요합니다.">
+      <div className="hm-brand-color-row">{stages.map(stage => <ColorChip key={stage} prefix={palette.prefix} stage={stage} confirmed={palette.confirmed.includes(stage)} />)}</div>
+      {palette.legacy.length > 0 && <>
+        <p>기존 버튼 그라데이션 색상 · 브랜드 단계와 별도 유지</p>
+        <div className="hm-brand-color-row">{palette.legacy.map(stage => <ColorChip key={stage} prefix={palette.prefix} stage={stage} />)}</div>
+      </>}
     </ReferenceSection>)}
   </ReferencePage>
 }