64 lines
2.6 KiB
CSS
64 lines
2.6 KiB
CSS
/* Alert mapping — current HM values from the shared Semantic tokens. ui-viz has no Alert spec (and its success / warning / information
|
|
status colors are undecided), so only a neutral default and a destructive variant exist. Variants use data-variant. */
|
|
:root, [data-hm-theme] {
|
|
--hm-alert-radius: var(--hm-radius-control-md);
|
|
--hm-alert-padding-x: 16px;
|
|
--hm-alert-padding-y: 12px;
|
|
--hm-alert-border-width: 1px;
|
|
--hm-alert-icon-size: 16px;
|
|
--hm-alert-title-font-size: 14px;
|
|
--hm-alert-title-line-height: 20px;
|
|
--hm-alert-title-font-weight: 500;
|
|
--hm-alert-description-font-size: 14px;
|
|
--hm-alert-description-line-height: 20px;
|
|
--hm-alert-description-font-weight: 400;
|
|
|
|
--hm-alert-default-background: var(--hm-sem-bg-surface);
|
|
--hm-alert-default-border-color: var(--hm-sem-stroke-default);
|
|
--hm-alert-default-title-color: var(--hm-sem-fg-primary);
|
|
--hm-alert-default-description-color: var(--hm-sem-fg-secondary);
|
|
|
|
--hm-alert-destructive-background: var(--hm-sem-bg-surface);
|
|
--hm-alert-destructive-border-color: var(--hm-sem-action-destructive);
|
|
--hm-alert-destructive-title-color: var(--hm-sem-action-destructive);
|
|
--hm-alert-destructive-description-color: var(--hm-sem-fg-secondary);
|
|
}
|
|
|
|
[data-slot="alert"] {
|
|
box-sizing: border-box;
|
|
padding: var(--hm-alert-padding-y) var(--hm-alert-padding-x);
|
|
border: var(--hm-alert-border-width) solid var(--hm-alert-default-border-color);
|
|
border-radius: var(--hm-alert-radius);
|
|
background: var(--hm-alert-default-background);
|
|
font-size: var(--hm-alert-description-font-size);
|
|
line-height: var(--hm-alert-description-line-height);
|
|
}
|
|
[data-slot="alert"][data-variant="default"] {
|
|
color: var(--hm-alert-default-title-color);
|
|
}
|
|
[data-slot="alert"][data-variant="destructive"] {
|
|
border-color: var(--hm-alert-destructive-border-color);
|
|
background: var(--hm-alert-destructive-background);
|
|
color: var(--hm-alert-destructive-title-color);
|
|
}
|
|
[data-slot="alert-title"] {
|
|
font-size: var(--hm-alert-title-font-size);
|
|
line-height: var(--hm-alert-title-line-height);
|
|
font-weight: var(--hm-alert-title-font-weight);
|
|
}
|
|
[data-slot="alert-description"] {
|
|
font-size: var(--hm-alert-description-font-size);
|
|
line-height: var(--hm-alert-description-line-height);
|
|
font-weight: var(--hm-alert-description-font-weight);
|
|
}
|
|
[data-slot="alert"][data-variant="default"] [data-slot="alert-description"] {
|
|
color: var(--hm-alert-default-description-color);
|
|
}
|
|
[data-slot="alert"][data-variant="destructive"] [data-slot="alert-description"] {
|
|
color: var(--hm-alert-destructive-description-color);
|
|
}
|
|
[data-slot="alert"] > svg {
|
|
width: var(--hm-alert-icon-size);
|
|
height: var(--hm-alert-icon-size);
|
|
}
|