Initial commit: HMDesignSystem baseline

src/foundation/color.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { allColorProperties, componentColors, primitiveColors, semanticColors, type ColorReference } from "./reference-data"
+import { ReferencePage, ReferenceSection, useResolvedProperties } 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>
+}
+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>
+  </ReferencePage>
+}
+const meta = { title: "Foundation/Color", parameters: { layout: "fullscreen" } } satisfies Meta
+export default meta
+export const All: StoryObj<typeof meta> = { name: "Color", render: () => <ColorReferencePage /> }