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

src/foundation/foundation.css

@@ -26,3 +26,7 @@
 .hm-foundation-radius { width: 100%; height: 64px; margin-bottom: 16px; border: 1px solid var(--hm-sem-stroke-default); background: var(--hm-sem-bg-content); }
 .hm-foundation-layout-sample { display: grid; min-width: 0; background: var(--hm-sem-bg-content); border: 1px solid var(--hm-sem-stroke-input-default); }
 .hm-foundation-layout-card { min-width: 0; border: 1px solid var(--hm-card-border-color); border-radius: var(--hm-card-radius); background: var(--hm-card-surface); }
+.hm-brand-color-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
+.hm-brand-color-chip { flex: 1 0 110px; min-width: 0; padding: 8px; border: 1px solid var(--hm-sem-stroke-default); }
+.hm-brand-color-chip[data-base] { border: 2px solid var(--hm-sem-fg-primary); font-weight: var(--hm-font-weight-bold); }
+.hm-brand-color-chip h3, .hm-brand-color-chip p { margin: 8px 0 0; font-size: 13px; }

src/foundation/typography.stories.tsx

@@ -6,7 +6,7 @@ const weights = ["--hm-input-font-weight", "--hm-font-weight-medium", "--hm-card
 function TypographyReferencePage() {
   const values = useResolvedProperties(typographyProperties)
   return <ReferencePage title="Typography" intro="Current Typography Reference · 기존 HM 컴포넌트의 실제 구현 규격입니다. 새로운 Heading / Body / Caption token 체계를 정의하지 않습니다.">
-    <ReferenceSection title="Font Family" note="default.css의 실제 Font stack과 theme.css의 로컬 Font asset을 사용합니다."><div className="hm-foundation-panel"><code>--hm-font-family-base</code><p>{values["--hm-font-family-base"]}</p><p>Noto Sans KR · /fonts/NotoSansKR-variable.ttf · font-weight 100–900 asset</p><p className="hm-foundation-note">Asset의 지원 범위와 아래 컴포넌트의 실제 사용 굵기는 별도로 표시합니다.</p></div></ReferenceSection>
+    <ReferenceSection title="Font Family" note="기본 폰트는 Noto Sans KR입니다. 로딩 실패 시 맑은 고딕, 이후 시스템 sans-serif를 사용합니다."><div className="hm-foundation-panel"><p>Noto Sans KR → 맑은 고딕 → 시스템 sans-serif</p><details><summary>구현 참고 · 전체 CSS Font Stack</summary><code>--hm-font-family-base</code><p>{values["--hm-font-family-base"]}</p><p>/fonts/NotoSansKR-variable.ttf · font-weight 100–900 asset</p></details></div></ReferenceSection>
     <ReferenceSection title="Font Weight" note="400(Input) · 500(Medium / Standard Button) · 600(Card title) · 700(Bold). 같은 글자열로 현재 굵기를 비교합니다."><div className="hm-foundation-grid">{weights.map(property => <article className="hm-foundation-card" key={property}><code>{property}</code><p>{values[property]}</p><p style={{ fontWeight: `var(${property})` }}>한맥 프로젝트<br />Hanmac Project<br />0123456789</p></article>)}</div></ReferenceSection>
     <ReferenceSection title="Component Specimens" note="크기 / 행높이 / 굵기 / 자간은 specimen에서 computed style로 읽습니다. 자간을 별도 지정하지 않은 컴포넌트는 현재 normal을 유지합니다."><div className="hm-foundation-specimens">{typographyReferences.map(item => <article className="hm-foundation-panel" key={item.label}><h3>{item.label}</h3><p className="hm-foundation-note">packages/ui/src/theme/{item.source}</p><dl><dt>Size</dt><dd><code>{item.size}</code> · {values[item.size]}</dd><dt>Line Height</dt><dd><code>{item.line}</code> · {values[item.line]}</dd><dt>Weight</dt><dd>{item.weight ? <><code>{item.weight}</code> · {values[item.weight]}</> : "normal · 컴포넌트에서 별도 weight 지정 없음"}</dd></dl><Specimen {...item} /></article>)}</div></ReferenceSection>
   </ReferencePage>