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/alert-dialog.css
+60
View File
@@ -0,0 +1,60 @@
/* Alert Dialog mapping. ui-viz has no Alert Dialog spec (its Dialog doc lists it as a follow-up), so these are current HM values built
from the HM Semantic tokens. A compact confirmation: Header (Title + Description) and Actions, no Close (X), no Body region.
Radix AlertDialog keeps Portal, focus trap, initial focus on Cancel, Escape, no outside dismiss and focus return. Action and
Cancel are the HM Button (composed in the TSX), so no button style is set here. The Overlay keeps the shadcn default.
Values repeat Dialog's look in meaning only: no --hm-dialog-* token is referenced. */
:root, [data-hm-theme] {
--hm-alert-dialog-background: var(--hm-sem-bg-surface);
--hm-alert-dialog-text: var(--hm-sem-fg-primary);
--hm-alert-dialog-border-width: 1px;
--hm-alert-dialog-border-color: var(--hm-sem-stroke-input-default);
--hm-alert-dialog-radius: 8px;
--hm-alert-dialog-shadow: 0 0 12px color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent);
--hm-alert-dialog-width: 400px;
--hm-alert-dialog-edge: 16px;
--hm-alert-dialog-padding: 24px;
--hm-alert-dialog-header-gap: 8px;
--hm-alert-dialog-actions-gap: 8px;
--hm-alert-dialog-actions-margin-top: 24px;
--hm-alert-dialog-title-font-size: 18px;
--hm-alert-dialog-title-line-height: 28px;
--hm-alert-dialog-title-font-weight: 700;
--hm-alert-dialog-description-font-size: 14px;
--hm-alert-dialog-description-line-height: 20px;
--hm-alert-dialog-description-color: var(--hm-sem-fg-secondary);
}
[data-slot="alert-dialog-content"] {
box-sizing: border-box;
width: min(var(--hm-alert-dialog-width), calc(100vw - 2 * var(--hm-alert-dialog-edge)));
max-height: calc(100dvh - 2 * var(--hm-alert-dialog-edge));
overflow: auto;
padding: var(--hm-alert-dialog-padding);
border: var(--hm-alert-dialog-border-width) solid var(--hm-alert-dialog-border-color);
border-radius: var(--hm-alert-dialog-radius);
background: var(--hm-alert-dialog-background);
color: var(--hm-alert-dialog-text);
box-shadow: var(--hm-alert-dialog-shadow);
overflow-wrap: anywhere;
}
[data-slot="alert-dialog-header"] {
gap: var(--hm-alert-dialog-header-gap);
}
[data-slot="alert-dialog-title"] {
font-size: var(--hm-alert-dialog-title-font-size);
line-height: var(--hm-alert-dialog-title-line-height);
font-weight: var(--hm-alert-dialog-title-font-weight);
color: var(--hm-alert-dialog-text);
}
[data-slot="alert-dialog-description"] {
font-size: var(--hm-alert-dialog-description-font-size);
line-height: var(--hm-alert-dialog-description-line-height);
font-weight: 400;
color: var(--hm-alert-dialog-description-color);
}
[data-slot="alert-dialog-footer"] {
gap: var(--hm-alert-dialog-actions-gap);
margin-top: var(--hm-alert-dialog-actions-margin-top);
}