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

Initial commit: HMDesignSystem baseline

Browse Source
This commit is contained in:
shkim4 committed 2026-10-08 16:58:09 +09:00
commit b6a0a61103
486 files changed
+68432
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/ui/src/theme/card.css
+61
View File
@@ -0,0 +1,61 @@
/* Card mapping: ui_viz Content Card (Type B). HM spec: docs/components/card.md.
Source refs below (content-container.md §7, §10 and content-header.md §7, §9) are external ui_viz docs/patterns/ files, not in this repo.
ui_viz defines no Hover / Focus / Selected / Disabled, no shadow and no footer: those stay shadcn defaults or are absent. */
:root, [data-hm-theme] {
/* ui_viz: content-container.md §7.2 — container-radius 4px = radius.container.default — Confirmed. Not aliased to Input or Button. */
--hm-card-radius: var(--hm-radius-container);
/* ui_viz: content-container.md §7.2 — border 1px, body-padding 24px all sides — SOURCE_ADOPTED (Canonical pattern, Q6) */
--hm-card-border-width: 1px;
--hm-card-padding: 24px;
/* ui_viz: content-container.md §7.2, §10.2 — border colors were LOCAL_EXCEPTION component values (#DEDBD2 / #ECD4A2).
HM maps them to shared Semantic tokens: color.stroke.input.default and color.palette.brown-light-4 (see docs/components/card.md §6.1). */
--hm-card-border-color: var(--hm-sem-stroke-input-default);
--hm-card-border-color-on-content: var(--hm-sem-palette-brown-light-4);
/* ui_viz: content-container.md §7.2 — surface: color.bg.surface (White) or color.bg.content (Beige) — Confirmed */
--hm-card-surface: var(--hm-sem-bg-surface);
--hm-card-surface-content: var(--hm-sem-bg-content);
--hm-card-text: var(--hm-sem-fg-primary);
/* ui_viz: content-header.md §7.1, §9 — content profile: title <-> meta gap 20px, title heading-md 20/28/600 (CANONICAL_OVERRIDE of Source 19px) */
--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-color: var(--hm-sem-fg-primary);
}
/* Default size. size="sm" is a shadcn size that ui_viz does not define, so it keeps the shadcn spacing (12px) from the TSX classes. */
:where([data-slot="card"]:not([data-size="sm"])) {
--card-spacing: var(--hm-card-padding);
}
[data-slot="card"] {
border: var(--hm-card-border-width) solid var(--hm-card-border-color);
border-radius: var(--hm-card-radius);
background: var(--hm-card-surface);
color: var(--hm-card-text);
box-shadow: none;
}
[data-slot="card"][data-surface="content"] {
border-color: var(--hm-card-border-color-on-content);
background: var(--hm-card-surface-content);
}
/* Header: title group at the start, Action (Meta) at the end, centered on the cross axis. */
[data-slot="card-header"] {
column-gap: var(--hm-card-header-gap);
}
[data-slot="card-action"] {
align-self: center;
}
:where([data-slot="card"]:not([data-size="sm"])) [data-slot="card-title"] {
font-size: var(--hm-card-title-font-size);
line-height: var(--hm-card-title-line-height);
font-weight: var(--hm-card-title-font-weight);
color: var(--hm-card-title-color);
}
/* Footer is not defined by ui_viz (shadcn default). Its bottom corners follow the container radius inside the border. */
[data-slot="card-footer"] {
border-bottom-left-radius: calc(var(--hm-card-radius) - var(--hm-card-border-width));
border-bottom-right-radius: calc(var(--hm-card-radius) - var(--hm-card-border-width));
}