feat: integrate latest HMDesign design system updates

src/foundation/color.stories.tsx

@@ -1,26 +1,25 @@
 import type { Meta, StoryObj } from "@storybook/react-vite"
-import { allColorProperties, componentColors, primitiveColors, semanticColors, type ColorReference } from "./reference-data"
-import { ReferencePage, ReferenceSection, useResolvedProperties } from "./reference"
+import { runtimeThemeContract, type RuntimeThemeToken } from "@hm-design/ui/theme"
+import { ReferencePage, ReferenceSection } from "./reference"
 
-function ColorCards({ items, values }: { items: ColorReference[]; values: Record<string, string> }) {
-  return <div className="hm-foundation-grid">{items.map(item => <article className="hm-foundation-card" key={item.property} data-color-property={item.property}>
-    <div className="hm-foundation-swatch" data-color-swatch style={{ background: `var(${item.property})` }} />
-    <h3>{item.label}</h3><p>{item.usage}</p>
-    <dl><dt>CSS Variable</dt><dd><code>{item.property}</code></dd>
-      {item.runtimeKey && <><dt>Runtime Key</dt><dd><code>{item.runtimeKey}</code></dd></>}
-      <dt>Current Value</dt><dd data-current-value>{values[item.property] || "CSS 값을 읽는 중"}</dd>
-      <dt>{item.defaultValue ? "HM Default Value" : "Source Declaration"}</dt><dd><code>{item.defaultValue ?? item.declared}</code></dd>
-      {item.defaultValue && <><dt>Source Declaration</dt><dd><code>{item.declared}</code></dd></>}
-      <dt>Source</dt><dd>{item.source}</dd></dl>
-  </article>)}</div>
-}
+// Existing palette tokens only; values come from the public default contract.
+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"] },
+]
 function ColorReferencePage() {
-  const values = useResolvedProperties(allColorProperties)
-  return <ReferencePage title="Color" intro="Primitive → Semantic → Component Mapping. 같은 색이라도 역할을 구분합니다. Swatch는 현재 CSS Variable을 사용하며 Theme Designer의 저장된 preview를 반영합니다.">
-    <nav className="hm-foundation-links" aria-label="Color sections"><a href="#primitive">Primitive</a><a href="#semantic">Semantic</a><a href="#component-mapping">Component Mapping</a></nav>
-    <ReferenceSection id="primitive" title="Primitive Palette" note="현재 primitives.css에 실제 정의된 색만 표시합니다. Primitive에는 공개 Runtime Key를 부여하지 않습니다."><ColorCards items={primitiveColors} values={values} /></ReferenceSection>
-    <ReferenceSection id="semantic" title="Semantic Role" note="공개 Runtime Key는 contract.ts에서 읽습니다. 내부 파생 CSS 값은 Runtime Key 없이 표시합니다. Gradient도 기존 HM CSS를 직접 사용합니다."><ColorCards items={semanticColors.filter(item => !item.runtimeKey?.startsWith("color.palette."))} values={values} /><details className="hm-foundation-details"><summary>Runtime Palette Aliases ({semanticColors.filter(item => item.runtimeKey?.startsWith("color.palette.")).length})</summary><ColorCards items={semanticColors.filter(item => item.runtimeKey?.startsWith("color.palette."))} values={values} /></details></ReferenceSection>
-    <ReferenceSection id="component-mapping" title="Component Mapping" note="대표 소비 관계입니다. 아래 변수는 내부 Component Mapping이며 공개 Runtime Key가 아닙니다. Source Declaration에서 연결된 Semantic 역할을 확인하세요."><ColorCards items={componentColors} values={values} /></ReferenceSection>
+  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>
+    </ReferenceSection>)}
   </ReferencePage>
 }
 const meta = { title: "Foundation/Color", parameters: { layout: "fullscreen" } } satisfies Meta