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/page-header.css
+52
View File
@@ -0,0 +1,52 @@
/* Page Header pattern (layout visual reference: ui-viz page heading, dashboard-composition.md §8): space-between row, aligned to the
bottom, 24px gap, 20px to the first card. The Breadcrumb is the HM Breadcrumb (its own 14px look, ui-viz had static 12px text).
Spacing values are pattern-local. */
:root, [data-hm-theme] {
--hm-page-header-gap: 24px;
--hm-page-header-margin-bottom: 20px;
--hm-page-header-breadcrumb-gap: 10px;
--hm-page-header-title-font-size: 28px;
--hm-page-header-title-line-height: 36px;
--hm-page-header-title-font-weight: 700;
--hm-page-header-title-color: var(--hm-sem-fg-primary);
--hm-page-header-description-gap: 8px;
--hm-page-header-description-font-size: 14px;
--hm-page-header-description-line-height: 20px;
--hm-page-header-description-color: var(--hm-sem-fg-secondary);
--hm-page-header-actions-gap: 8px;
}
[data-slot="page-header"] {
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--hm-page-header-gap);
min-width: 0;
margin-bottom: var(--hm-page-header-margin-bottom);
}
[data-slot="page-header-content"] {
flex: 1 1 320px;
min-width: 0;
}
[data-slot="page-header-content"] > [data-slot="breadcrumb"] {
margin-bottom: var(--hm-page-header-breadcrumb-gap);
}
[data-slot="page-header-title"] {
margin: 0;
color: var(--hm-page-header-title-color);
font-size: var(--hm-page-header-title-font-size);
line-height: var(--hm-page-header-title-line-height);
font-weight: var(--hm-page-header-title-font-weight);
overflow-wrap: anywhere;
}
[data-slot="page-header-description"] {
margin: var(--hm-page-header-description-gap) 0 0;
color: var(--hm-page-header-description-color);
font-size: var(--hm-page-header-description-font-size);
line-height: var(--hm-page-header-description-line-height);
overflow-wrap: anywhere;
}
[data-slot="page-header-actions"] {
gap: var(--hm-page-header-actions-gap);
margin-left: auto;
}