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

feat: integrate latest HMDesign design system updates

Browse Source
This commit is contained in:
DESKTOP-KPCP6AL\ㅅㅎ committed 2026-10-11 11:09:03 +09:00
1 parent 99faec189e
commit 1c4e0bb9a1
209 files changed
+8845 -552
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/ui/src/theme/accordion.css
+1 -1
View File
@@ -45,7 +45,7 @@
cursor: pointer;
}
[data-slot="accordion-trigger"]:hover:not(:disabled) {
background: transparent;
background: color-mix(in srgb, var(--hm-sem-palette-black) 5%, transparent);
}
[data-slot="accordion-trigger"]:disabled {
opacity: var(--hm-accordion-disabled-opacity);
packages/ui/src/theme/button.css
+5 -1
View File
@@ -43,6 +43,8 @@
--hm-button-solid-orange-border: var(--hm-sem-palette-orange-default);
--hm-button-solid-gray-background: var(--hm-sem-palette-gray);
--hm-button-solid-gray-border: var(--hm-sem-palette-gray-dark);
--hm-button-solid-red-background: var(--hm-sem-action-destructive);
--hm-button-solid-red-border: var(--hm-sem-action-destructive);
/* ui_viz: docs/components/button.md §28 Standard Outline (ink) and D-087 Red Outline Hover/Pressed — Confirmed */
--hm-button-outline-green-ink: var(--hm-sem-action-primary);
@@ -79,9 +81,11 @@
[data-slot="button"][data-variant="cancel"] {
--hm-button-solid-background: var(--hm-button-solid-gray-background);
--hm-button-solid-border: var(--hm-button-solid-gray-border);
--hm-button-outline-ink: var(--hm-sem-action-cancel);
--hm-button-outline-ink: var(--hm-button-cancel-runtime-ink, var(--hm-sem-palette-gray));
}
[data-slot="button"][data-variant="destructive"] {
--hm-button-solid-background: var(--hm-button-solid-red-background);
--hm-button-solid-border: var(--hm-button-solid-red-border);
--hm-button-outline-ink: var(--hm-button-outline-red-ink);
}
packages/ui/src/theme/combobox.css
+2 -1
View File
@@ -19,7 +19,8 @@
--hm-combobox-background: var(--hm-sem-bg-surface);
--hm-combobox-text: var(--hm-sem-fg-primary);
--hm-combobox-placeholder: var(--hm-sem-fg-placeholder);
/* Readable empty-value guidance on the white trigger; preserve shared tokens. */
--hm-combobox-placeholder: var(--hm-sem-fg-secondary);
--hm-combobox-border-color: var(--hm-sem-stroke-input-default);
--hm-combobox-focus-border-color: var(--hm-sem-stroke-input-focus);
--hm-combobox-seam-color: var(--hm-sem-stroke-input-default);
packages/ui/src/theme/dashboard-layout.css
+1
View File
@@ -135,6 +135,7 @@
[data-slot="dashboard-layout"] [data-slot="filter-bar"] {
flex-wrap: nowrap;
}
[data-slot="dashboard-layout"] [data-slot="filter-bar"][data-layout] { flex-wrap: wrap; }
[data-slot="dashboard-layout"] [data-slot="filter-bar-search"] {
flex: 0 0 var(--hm-filter-bar-search-width);
}
packages/ui/src/theme/date-picker.css
+2 -1
View File
@@ -19,7 +19,8 @@
--hm-date-picker-background: var(--hm-sem-bg-surface);
--hm-date-picker-text: var(--hm-sem-fg-primary);
--hm-date-picker-placeholder: var(--hm-sem-fg-placeholder);
/* Readable empty-value guidance on the white trigger; preserve shared tokens. */
--hm-date-picker-placeholder: var(--hm-sem-fg-secondary);
--hm-date-picker-border-color: var(--hm-sem-stroke-input-default);
--hm-date-picker-focus-border-color: var(--hm-sem-stroke-input-focus);
--hm-date-picker-icon-size: 18px;
packages/ui/src/theme/drawer.css
+7 -1
View File
@@ -101,9 +101,15 @@
padding: 0 var(--hm-drawer-padding);
}
/* Footer: actions stack full width (touch targets on a narrow screen), the primary action first as in shadcn. */
/* DOM order: Cancel → Execute. Mobile reverses the visual stack. */
[data-slot="drawer-footer"] {
flex: none;
flex-direction: row;
justify-content: flex-end;
gap: var(--hm-drawer-footer-gap);
padding: 16px var(--hm-drawer-padding) var(--hm-drawer-padding);
}
@media (max-width: 640px) {
[data-slot="drawer-footer"] { flex-direction: column-reverse; align-items: stretch; }
[data-slot="drawer-footer"] > * { width: 100%; }
}
packages/ui/src/theme/filter-bar.css
+6
View File
@@ -76,6 +76,12 @@
margin-left: auto;
}
/* Explicit publisher list composition; default consumers keep the original layout. */
[data-slot="filter-bar"][data-layout="list-basic"] { justify-content: center; }
[data-slot="filter-bar"][data-layout="list-extended"] { justify-content: flex-start; }
[data-slot="filter-bar"][data-layout] { flex-wrap: wrap; }
[data-slot="filter-bar"][data-layout] > [data-slot="filter-bar-actions"] { margin-left: 0; }
/* Narrow screen: search takes a full row, the controls share rows, the actions take their own row. */
@media (max-width: 640px) {
[data-slot="filter-bar-search"] {
packages/ui/src/theme/gnb.css
+25 -3
View File
@@ -547,12 +547,34 @@
grid-template-columns: var(--hm-lnb-width) minmax(0, 1fr);
min-width: 0;
min-height: 0;
background: var(--hm-sem-palette-green-light-2);
background: var(--hm-sem-bg-content);
border-radius: var(--hm-gnb-join) var(--hm-gnb-join) 0 0;
}
[data-hm-gnb-layout="sidebar"] > [data-hm-gnb-body] > [data-slot="lnb"][data-hm-gnb-sidebar] {
--hm-lnb-background: var(--hm-sem-palette-green-light-2);
--hm-gnb-content-menu-color: var(--hm-sem-action-primary);
--hm-lnb-background: var(--hm-sem-bg-content);
--hm-lnb-background-end: var(--hm-sem-bg-content);
--hm-lnb-text: var(--hm-gnb-content-menu-color);
--hm-lnb-text-secondary: var(--hm-gnb-content-menu-color);
--hm-lnb-item-text-stroke-width: 0px;
--hm-lnb-item-text-shadow: none;
--hm-lnb-hover-background: color-mix(in srgb, var(--hm-gnb-content-menu-color) 8%, transparent);
--hm-lnb-current-background: color-mix(in srgb, var(--hm-gnb-content-menu-color) 20%, transparent);
--hm-lnb-current-text: var(--hm-gnb-content-menu-color);
--hm-lnb-current-depth: none;
--hm-lnb-group-current-text: var(--hm-gnb-content-menu-color);
--hm-lnb-group-open-background: transparent;
--hm-lnb-group-open-line: 0;
--hm-lnb-focus-outline: 2px solid var(--hm-gnb-content-menu-color);
border-right: 1px solid var(--hm-sem-stroke-default);
}
[data-hm-gnb-layout="sidebar"][data-hm-color="brown"] > [data-hm-gnb-body] > [data-hm-gnb-sidebar] {
--hm-gnb-content-menu-color: var(--hm-sem-palette-brown-default);
}
/* Content navigation uses one straight divider, without the green LNB join. */
[data-hm-gnb-layout="sidebar"] [data-hm-gnb-sidebar]::after,
[data-hm-gnb-layout="sidebar"] [data-hm-gnb-sidebar] [data-slot="lnb-item"][aria-current="page"]::before,
[data-hm-gnb-layout="sidebar"] [data-hm-gnb-sidebar] [data-slot="lnb-item"][aria-current="page"]::after { content: none; }
[data-hm-gnb-layout="sidebar"] > [data-hm-gnb-body] > [data-hm-gnb-main] {
position: relative;
grid-column: 2;
@@ -560,7 +582,7 @@
min-height: 0;
overflow: auto;
background: var(--hm-sem-bg-content);
border-radius: var(--hm-lnb-join) var(--hm-gnb-join) 0 var(--hm-lnb-join);
border-radius: 0 var(--hm-gnb-join) 0 0;
}
@media (max-width: 1023px) {
[data-hm-gnb-layout="sidebar"] > [data-hm-gnb-body] {
packages/ui/src/theme/lnb.css
+2 -2
View File
@@ -1,7 +1,7 @@
/* LNB pattern (layout visual reference: D:\컴포넌트\ui-viz Patterns/LNB, implementation: HM Collapsible + plain elements).
A 272px green column: horizontal 5-stop surface, brand on top, menu in the middle, text-only profile at the bottom. The current
item is a Beige face (left corners rounded) that runs to the content edge and joins it through two concave corners; hover is
Black 10% to the same edge; an open group is a Black 20% face with a 1px green line. Spacing values are pattern-local. */
Black 10% to the same edge; an open group is a Black 8% face with a 1px green line. Spacing values are pattern-local. */
:root, [data-hm-theme] {
/* Exposed for the layout: grid column width and the surface that continues behind the content's rounded corners. */
--hm-lnb-width: 272px;
@@ -52,7 +52,7 @@
linear-gradient(to bottom, color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent), transparent 3px) 0 0 / 75% 100% no-repeat,
linear-gradient(to top, color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent), transparent 3px) 0 0 / 75% 100% no-repeat;
--hm-lnb-group-open-background: color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent);
--hm-lnb-group-open-background: color-mix(in srgb, var(--hm-sem-palette-black) 8%, transparent);
--hm-lnb-group-open-line: 1px solid var(--hm-sem-palette-green-light-2);
--hm-lnb-group-radius: 8px 0 0 8px;
--hm-lnb-group-current-text: var(--hm-sem-palette-yellow-accent);
packages/ui/src/theme/progress.css
+4
View File
@@ -15,5 +15,9 @@
background: var(--hm-progress-track-background);
}
[data-slot="progress-indicator"] {
/* Consumer children in an asChild root must not displace the filled bar. */
position: absolute;
inset: 0;
border-radius: var(--hm-progress-radius);
background: var(--hm-progress-indicator-background);
}
packages/ui/src/theme/runtime.ts
+6 -1
View File
@@ -42,8 +42,13 @@ export function isRuntimeTheme(theme: unknown): theme is import("./contract").Ru
/** Atomic validation. Invalid documents release the previous override to host/default. */
export function applyRuntimeTheme(root: HTMLElement, theme: unknown): boolean {
if (!isRuntimeTheme(theme)) { resetRuntimeTheme(root); return false }
const values = Object.entries(theme.tokens).map(([key, value]) =>
const values: (readonly [string, string])[] = Object.entries(theme.tokens).map(([key, value]) =>
[runtimeThemeContract[key as RuntimeThemeToken].property, value!] as const)
// Reviewed Gray default comes from the existing palette. Retain custom cancel
// overrides without changing the public token or the full Default preset.
const cancel = theme.tokens["color.action.cancel"]
if (cancel && cancel.toLowerCase() !== runtimeThemeContract["color.action.cancel"].defaultValue)
values.push(["--hm-button-cancel-runtime-ink", cancel])
resetRuntimeTheme(root)
const scope = root.getAttribute("data-hm-theme")
const properties = values.map(([property]) => ({
packages/ui/src/theme/sheet.css
+6
View File
@@ -4,6 +4,8 @@
meaning only: no --hm-dialog-* token is referenced. */
:root, [data-hm-theme] {
--hm-sheet-background: var(--hm-sem-bg-surface);
/* Existing control token reused provisionally; no new approved radius value. */
--hm-sheet-radius: var(--hm-radius-control-md);
--hm-sheet-text: var(--hm-sem-fg-primary);
--hm-sheet-border-width: 1px;
--hm-sheet-border-color: var(--hm-sem-stroke-input-default);
@@ -53,6 +55,10 @@
[data-slot="sheet-content"][data-side="left"] { border-right: var(--hm-sheet-border-width) solid var(--hm-sheet-border-color); }
[data-slot="sheet-content"][data-side="top"] { border-bottom: var(--hm-sheet-border-width) solid var(--hm-sheet-border-color); }
[data-slot="sheet-content"][data-side="bottom"] { border-top: var(--hm-sheet-border-width) solid var(--hm-sheet-border-color); }
[data-slot="sheet-content"][data-side="right"] { border-radius: var(--hm-sheet-radius) 0 0 var(--hm-sheet-radius); }
[data-slot="sheet-content"][data-side="left"] { border-radius: 0 var(--hm-sheet-radius) var(--hm-sheet-radius) 0; }
[data-slot="sheet-content"][data-side="top"] { border-radius: 0 0 var(--hm-sheet-radius) var(--hm-sheet-radius); }
[data-slot="sheet-content"][data-side="bottom"] { border-radius: var(--hm-sheet-radius) var(--hm-sheet-radius) 0 0; }
[data-slot="sheet-header"] {
flex: none;
packages/ui/src/theme/table.css
+3 -3
View File
@@ -22,9 +22,9 @@
--hm-table-header-border-top: var(--hm-sem-palette-green-light-2);
--hm-table-header-border-bottom: color-mix(in srgb, var(--hm-sem-palette-green-light-2) 20%, transparent);
/* Rows are a wide soft surface: hover, selected and selected + hover all use Accent 45% (not the Active State Semantic). */
--hm-table-row-hover-background: var(--hm-sem-surface-highlight);
--hm-table-row-selected-background: var(--hm-sem-surface-highlight);
/* Publisher review: table-only Accent 20%; other highlight mappings stay unchanged. */
--hm-table-row-hover-background: color-mix(in srgb, var(--hm-sem-accent) 20%, transparent);
--hm-table-row-selected-background: var(--hm-table-row-hover-background);
--hm-table-footer-background: var(--hm-sem-bg-subtle);
--hm-table-footer-font-weight: 500;
packages/ui/src/theme/tabs.css
+2 -2
View File
@@ -147,8 +147,8 @@
}
[data-slot="tabs-frame"][data-fill="true"][data-panel-surface="content"] {
--hm-tab-fill-panel: var(--hm-sem-bg-content);
/* Non-white panel: the Selected face runs from White (top) to the panel color (bottom); the panel itself gets no gradient. */
--hm-tab-fill-face: linear-gradient(to bottom, var(--hm-sem-palette-white) 0%, var(--hm-sem-bg-content) 100%);
/* D-02 (2026-10-09): only Primary's selected face starts at White alpha .8; the content stop, direction and geometry stay unchanged. */
--hm-tab-fill-face: linear-gradient(to bottom, color-mix(in srgb, var(--hm-sem-palette-white) 80%, transparent) 0%, var(--hm-sem-bg-content) 100%);
}
[data-slot="tabs-frame"][data-fill="true"] > [data-slot="tabs-list"] {
flex: 1 1 auto;