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