docs(storybook): remove button gradient previews from foundation color
This commit is contained in:
1 parent
3220b753dd
commit
3ebc84e32c
2 files changed
+5
-6
No files matched your search
@@ -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() {
|
||||
<ReferenceSection title="Semantic Colors" note="역할별 현행 공개 계약·Component mapping을 표시합니다. 같은 HEX라도 별도 역할을 임의로 합치지 않습니다.">
|
||||
{semanticGroups.map(group => <div className="hm-foundation-specimen" key={group.name}><h3>{group.name}</h3><div className="hm-foundation-grid">{group.colors.map(item => <SemanticColor key={item.name} item={item} values={values} />)}</div></div>)}
|
||||
</ReferenceSection>
|
||||
<ReferenceSection title="Gradients" note="실제 CSS Gradient를 가로형 카드에서 비교합니다. Stop과 방향은 현재 선언의 적용값에서 읽습니다. 공통 배경과 Button 전용 배경은 별도 역할입니다.">
|
||||
<ReferenceSection title="Gradients" note="공통 Background Gradient를 가로형 카드에서 비교합니다. Stop과 방향은 현재 선언의 적용값에서 읽습니다.">
|
||||
<div className="hm-foundation-specimens">{gradients.map(gradient => <article className="hm-foundation-panel" key={gradient.name}>
|
||||
<h3>{gradient.name}</h3><p className="hm-foundation-note">{gradient.note}</p><p>기존 참고 명칭: <code>{gradient.legacy}</code></p>
|
||||
<GradientPreview name={gradient.name} property={gradient.property} stopPrefix={gradient.stopPrefix} values={values} />
|
||||
{gradient.componentProperty && <div className="hm-foundation-specimen"><h3>기존 Button 전용 Background · Confirmed</h3><p>현행 Component CSS만 표시합니다. 공통 5-stop 배경과 독립적으로 유지합니다. 전체 Gradient canonical은 없으며 stop 색상은 공개 Palette를 소비합니다.</p><GradientPreview name={`${gradient.name} Button`} property={gradient.componentProperty} values={values} /></div>}
|
||||
</article>)}</div>
|
||||
</ReferenceSection>
|
||||
</ReferencePage>
|
||||
|
||||
Reference in new issue
Block a user