62 lines
3.1 KiB
CSS
62 lines
3.1 KiB
CSS
/* 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));
|
|
}
|