shkim4/HMDesign
Private
Public Access
1
0 Fork 0
Code Activity

fix: align org chart hierarchy and typography weights

Browse Source
This commit is contained in:
shkim4 committed 2026-10-14 13:33:59 +09:00
1 parent 72d427fcd2
commit d42466f5eb
33 files changed
+358 -85
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/center/center-stories.css
+1 -1
View File
@@ -26,7 +26,7 @@
.sb-center-note { max-width: 880px; margin: 0; color: var(--hm-sem-fg-secondary); font-size: var(--hm-button-font-size-sm); line-height: var(--hm-button-line-height-sm); overflow-wrap: anywhere; }
.sb-center-status { width: 100%; border-collapse: collapse; font-size: var(--hm-button-font-size-sm); line-height: var(--hm-button-line-height-sm); }
.sb-center-status th, .sb-center-status td { border: 1px solid #e0dace; padding: 6px 10px; text-align: left; vertical-align: top; }
.sb-center-status th { background: #f4f1ea; font-weight: 600; }
.sb-center-status th { background: #f4f1ea; font-weight: 700; }
.sb-center-status code { font-size: inherit; }
.sb-center-scroll { min-width: 0; max-width: 100%; overflow-x: auto; }
.sb-center-information { min-width: 0; width: 100%; }
src/components/button.stories.tsx
+1 -1
View File
@@ -68,7 +68,7 @@ type Story = StoryObj<typeof meta>
const row = "flex flex-wrap items-center gap-4"
const stack = "grid gap-6"
const heading = "text-base font-semibold"
const heading = "text-base font-bold"
const note = "text-sm text-muted-foreground"
function RolesBoard() {
src/components/carousel.stories.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ const svg = (n: number) =>
function SlideCard({ n }: { n: number }) {
return (
<Card>
<CardContent className="grid h-24 place-items-center text-2xl font-semibold">{n + 1}</CardContent>
<CardContent className="grid h-24 place-items-center text-2xl font-bold">{n + 1}</CardContent>
</Card>
)
}
src/components/select.stories.tsx
+3 -3
View File
@@ -108,11 +108,11 @@ function DisabledStates() {
return (
<div className="grid max-w-[480px] gap-6">
<section className="grid gap-2">
<h3 className="text-base font-semibold">Selected Value</h3>
<h3 className="text-base font-bold">Selected Value</h3>
<SelectSpecimen size="medium" label="Status" defaultValue="active" disabled />
</section>
<section className="grid gap-2">
<h3 className="text-base font-semibold">Placeholder</h3>
<h3 className="text-base font-bold">Placeholder</h3>
<SelectSpecimen size="medium" label="Status" placeholder="Choose a status" disabled />
</section>
</div>
@@ -274,7 +274,7 @@ export const OpenTopLong: Story = {
function ListSizeColumn({ title, listSize, width }: { title: string; listSize: SelectSize; width: number }) {
return (
<section className="grid min-w-0 content-start gap-2" style={{ width, maxWidth: "100%" }} data-list-size={listSize}>
<h3 className="m-0 text-sm font-semibold">{title}</h3>
<h3 className="m-0 text-sm font-bold">{title}</h3>
<div className="min-h-56">
<SelectSpecimen size="medium" listSize={listSize} defaultOpen defaultValue="long" options={longOpenOptions} label={"Trigger medium · 최대 " + width + "px"} />
</div>
src/foundation/typography.stories.tsx
+6 -2
View File
@@ -2,12 +2,16 @@ import type { Meta, StoryObj } from "@storybook/react-vite"
import { typographyProperties, typographyReferences } from "./reference-data"
import { ReferencePage, ReferenceSection, Specimen, useResolvedProperties } from "./reference"
const weights = ["--hm-input-font-weight", "--hm-font-weight-medium", "--hm-card-title-font-weight", "--hm-font-weight-bold"]
const weights = [
{ property: "--hm-input-font-weight", label: "Regular" },
{ property: "--hm-font-weight-medium", label: "Medium" },
{ property: "--hm-font-weight-bold", label: "Bold" },
]
function TypographyReferencePage() {
const values = useResolvedProperties(typographyProperties)
return <ReferencePage title="Typography" intro="Current Typography Reference · 기존 HM 컴포넌트의 실제 구현 규격입니다. 새로운 Heading / Body / Caption token 체계를 정의하지 않습니다.">
<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="Font Weight" note="400(Regular) · 500(Medium) · 700(Bold). 동일한 문자열로 3단계 글자 굵기를 비교합니다."><div className="hm-foundation-grid">{weights.map(({ property, label }) => <article className="hm-foundation-card" key={property}><code>{property}</code><p>{values[property]} — {label}</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>
}
src/hm-theme.css
+6 -6
View File
@@ -19,13 +19,13 @@ body { margin: 0; }
.hm-app { min-width: 320px; }
.hm-container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.hm-topbar { background: var(--hm-sem-bg-brand); color: #fff; border-bottom: 1px solid #31594c; padding: 15px 0; }
.hm-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #80b6a3; border-radius: 4px; background: #174b3a; font-size: 16px; font-weight: 800; letter-spacing: -.08em; }
.hm-mark { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #80b6a3; border-radius: 4px; background: #174b3a; font-size: 16px; font-weight: 700; letter-spacing: -.08em; }
.hm-brand-name { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.02em; }
.hm-brand-caption { margin: 2px 0 0; color: #bddfd4; font-size: 11px; }
.hm-topbar-status { display: inline-flex; align-items: center; gap: 7px; color: #c6d8d1; font-size: 12px; white-space: nowrap; }
.hm-topbar-status span { width: 7px; height: 7px; border-radius: 50%; background: #67d6ac; box-shadow: 0 0 0 4px #67d6ac22; }
.hm-breadcrumb { color: #827b70; }
.hm-breadcrumb strong { color: var(--hm-green); font-weight: 600; }
.hm-breadcrumb strong { color: var(--hm-green); font-weight: 500; }
.hm-hero { position: relative; overflow: hidden; min-height: 330px; border: 1px solid #254d40; border-radius: 4px; background: var(--hm-sem-bg-brand); color: #fff; }
.hm-hero::after { content: ""; position: absolute; width: 590px; height: 590px; right: -240px; top: -175px; border: 1px solid #ffffff24; border-radius: 50%; box-shadow: 0 0 0 72px #ffffff09,0 0 0 145px #ffffff06; }
.hm-eyebrow { display: inline-flex; align-items: center; gap: 7px; color: #c3e6d7; font-size: 11px; font-weight: 700; letter-spacing: .13em; }
@@ -41,7 +41,7 @@ body { margin: 0; }
.hm-hero-art-pill span { width: 7px; height: 7px; border-radius: 50%; background: #c8e4d5; }
.hm-hero-art-pill span:nth-child(2) { background: #74bd98; }
.hm-hero-art-pill span:nth-child(3) { background: #477b5a; }
.hm-section-kicker { margin: 0 0 6px; color: #6b715f; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.hm-section-kicker { margin: 0 0 6px; color: #6b715f; font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.hm-section-heading h2 { margin: 0; color: var(--hm-ink); font-size: 26px; font-weight: 700; letter-spacing: -.04em; }
.hm-section-heading p:not(.hm-section-kicker) { margin: 7px 0 0; color: var(--hm-muted); font-size: 13px; }
.hm-count { border: 1px solid #d4cfc2; border-radius: 20px; padding: 6px 10px; color: #6e6759; font-size: 11px; white-space: nowrap; }
@@ -57,10 +57,10 @@ body { margin: 0; }
.hm-swatch { min-width: 0; }
.hm-swatch-color { display: block; height: 65px; border: 1px solid #d5cfc3; border-radius: 4px; }
.hm-swatch-color--dark { border-color: #1e3b31; }
.hm-swatch-name { display: block; margin-top: 8px; color: var(--hm-ink); font-size: 11px; font-weight: 600; overflow-wrap: anywhere; }
.hm-swatch-name { display: block; margin-top: 8px; color: var(--hm-ink); font-size: 11px; font-weight: 500; overflow-wrap: anywhere; }
.hm-swatch-value { color: #8b857a; font-size: 10px; }
.hm-field { display: grid; gap: 8px; }
.hm-field label { font-size: 12px; font-weight: 600; }
.hm-field label { font-size: 12px; font-weight: 500; }
.hm-form-footer { border-top: 1px solid #eee9e0; padding-top: 18px; }
.hm-form-footer p { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--hm-muted); font-size: 11px; }
.hm-form-footer p svg { color: #1a7551; }
@@ -70,7 +70,7 @@ body { margin: 0; }
.hm-inner-card p { max-width: 340px; margin: 0 0 19px; color: var(--hm-muted); font-size: 12px; line-height: 1.7; word-break: keep-all; }
.hm-dialog-summary { display: grid; grid-template-columns: 110px 1fr; gap: 10px; margin: 8px 0 14px; border-top: 1px solid #dedbd2; border-bottom: 1px solid #dedbd2; padding: 16px 0; font-size: 13px; }
.hm-dialog-summary span { color: var(--hm-muted); }
.hm-dialog-summary strong { font-weight: 600; }
.hm-dialog-summary strong { font-weight: 500; }
.hm-footer { border-top: 1px solid #d7d1c5; padding-top: 19px; color: #7b7468; }
@media (max-width: 700px) {
src/theme/designer-theme.css
+1 -1
View File
@@ -6,7 +6,7 @@
.hm-designer-layout { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 24px; }
.hm-designer-editor, .hm-designer-preview { min-width: 0; padding: 20px; background: var(--hm-sem-bg-surface); border: 1px solid var(--hm-sem-stroke-input-default); border-radius: 4px; }
.hm-designer-field { padding: 14px 0; border-bottom: 1px solid var(--hm-sem-stroke-input-default); }
.hm-designer-field label { display: block; font-weight: 600; }
.hm-designer-field label { display: block; font-weight: 500; }
.hm-designer-field small { display: block; font-size: 12px; font-weight: 400; margin: 3px 0 8px; }
.hm-designer-inputs { display: flex; gap: 8px; }
.hm-designer-inputs input[type=color] { width: 42px; height: 34px; padding: 2px; cursor: pointer; }
src/theme/verification-baseline.json
+1 -1
View File
@@ -174,7 +174,7 @@
"--hm-card-header-gap": "20px",
"--hm-card-title-font-size": "20px",
"--hm-card-title-line-height": "28px",
"--hm-card-title-font-weight": "600",
"--hm-card-title-font-weight": "var(--hm-font-weight-bold)",
"--hm-card-title-color": "var(--hm-sem-fg-primary)",
"--hm-carousel-gap": "16px",
"--hm-carousel-control-size": "32px",
src/work-dashboard/work-dashboard.css
+2 -2
View File
@@ -6,7 +6,7 @@
.work-status-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.work-status-filters > span { margin-right: 8px; }
#work-results, #project-overview, #work-deadlines { scroll-margin-top: var(--hm-card-padding); }
.work-kicker { margin: 0; color: var(--hm-sem-fg-secondary); font-size: 12px; font-weight: 600; letter-spacing: .12em; }
.work-kicker { margin: 0; color: var(--hm-sem-fg-secondary); font-size: 12px; font-weight: 500; letter-spacing: .12em; }
.work-date { display: flex; align-items: center; gap: 8px; margin-right: 8px; color: var(--hm-sem-fg-secondary); font-size: 13px; white-space: nowrap; }
.work-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hm-card-padding); }
.work-summary-icon { color: var(--hm-sem-action-primary); }
@@ -28,7 +28,7 @@
.work-issue-item { display: grid; gap: 8px; }
.work-deadline-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.work-deadline-item { display: flex; align-items: center; gap: 16px; }
.work-deadline-date { display: grid; justify-items: center; gap: 4px; flex: none; color: var(--hm-sem-action-primary); font-size: 14px; font-weight: 600; }
.work-deadline-date { display: grid; justify-items: center; gap: 4px; flex: none; color: var(--hm-sem-action-primary); font-size: 14px; font-weight: 500; }
.work-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-bottom: 8px; color: var(--hm-sem-fg-secondary); font-size: 12px; }
.work-editor { width: min(560px, calc(100vw - 32px)); }
.work-editor-form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }