Initial commit: HMDesignSystem baseline
This commit is contained in:
shkim4 committed
commit
b6a0a61103
486 files changed
+68432
No files matched your search
@@ -0,0 +1,107 @@
|
||||
/* Toast (Sonner) mapping. Notification surface, not an anchored floating panel, so it does NOT use --hm-sem-floating-*; its values are
|
||||
its own (the visual values currently equal the floating surface and are a Notification Semantic candidate, see docs/components/sonner.md).
|
||||
ui-viz has no Toast spec and its success / warning / information status colors are TBD, so no status palette is invented:
|
||||
Default, Success, Info, Warning and Loading share the neutral surface (the icon tells the type) and only Error uses the destructive color,
|
||||
the same stance as Alert. Sonner's own data attributes ([data-sonner-toast], [data-type], [data-button] ...) are the state hooks. */
|
||||
:root, [data-hm-theme] {
|
||||
--hm-toast-width: 356px;
|
||||
--hm-toast-background: var(--hm-sem-bg-surface);
|
||||
--hm-toast-text: var(--hm-sem-fg-primary);
|
||||
--hm-toast-border-width: 1px;
|
||||
--hm-toast-border-color: var(--hm-sem-stroke-input-default);
|
||||
--hm-toast-radius: var(--hm-radius-container);
|
||||
--hm-toast-shadow: 0 0 12px color-mix(in srgb, var(--hm-sem-palette-black) 20%, transparent);
|
||||
--hm-toast-padding: 16px;
|
||||
--hm-toast-gap: 12px;
|
||||
--hm-toast-font-family: var(--hm-font-family-base);
|
||||
--hm-toast-title-font-size: 14px;
|
||||
--hm-toast-title-line-height: 20px;
|
||||
--hm-toast-title-font-weight: 500;
|
||||
--hm-toast-description-color: var(--hm-sem-fg-secondary);
|
||||
--hm-toast-description-font-size: 13px;
|
||||
--hm-toast-description-line-height: 18px;
|
||||
--hm-toast-description-font-weight: 400;
|
||||
--hm-toast-icon-size: 16px;
|
||||
--hm-toast-icon-color: var(--hm-sem-fg-primary);
|
||||
|
||||
--hm-toast-error-border-color: var(--hm-sem-action-destructive);
|
||||
--hm-toast-error-text: var(--hm-sem-action-destructive);
|
||||
|
||||
--hm-toast-action-height: 28px;
|
||||
--hm-toast-action-padding-x: 12px;
|
||||
--hm-toast-action-radius: var(--hm-radius-control-md);
|
||||
--hm-toast-action-font-size: 12px;
|
||||
--hm-toast-action-font-weight: 500;
|
||||
--hm-toast-action-background: var(--hm-sem-action-primary);
|
||||
--hm-toast-action-text: var(--hm-sem-on-action-primary);
|
||||
--hm-toast-cancel-background: var(--hm-sem-bg-subtle);
|
||||
--hm-toast-cancel-text: var(--hm-sem-fg-secondary);
|
||||
|
||||
--hm-toast-close-background: var(--hm-toast-background);
|
||||
--hm-toast-close-text: var(--hm-sem-fg-secondary);
|
||||
--hm-toast-close-border-color: var(--hm-toast-border-color);
|
||||
}
|
||||
|
||||
/* Sonner's own rules use up to three attributes, so the Toaster root repeats [dir] (always set) to win regardless of injection order. */
|
||||
[data-sonner-toaster][data-sonner-theme][dir] {
|
||||
--width: var(--hm-toast-width);
|
||||
--border-radius: var(--hm-toast-radius);
|
||||
--normal-bg: var(--hm-toast-background);
|
||||
--normal-border: var(--hm-toast-border-color);
|
||||
--normal-text: var(--hm-toast-text);
|
||||
font-family: var(--hm-toast-font-family);
|
||||
}
|
||||
|
||||
[data-sonner-toaster] [data-sonner-toast][data-styled="true"] {
|
||||
box-sizing: border-box;
|
||||
gap: var(--hm-toast-gap);
|
||||
padding: var(--hm-toast-padding);
|
||||
border-width: var(--hm-toast-border-width);
|
||||
box-shadow: var(--hm-toast-shadow);
|
||||
font-size: var(--hm-toast-description-font-size);
|
||||
line-height: var(--hm-toast-description-line-height);
|
||||
}
|
||||
[data-sonner-toaster] [data-sonner-toast][data-styled="true"] [data-title] {
|
||||
font-size: var(--hm-toast-title-font-size);
|
||||
line-height: var(--hm-toast-title-line-height);
|
||||
font-weight: var(--hm-toast-title-font-weight);
|
||||
}
|
||||
[data-sonner-toaster] [data-sonner-toast][data-styled="true"] [data-description] {
|
||||
color: var(--hm-toast-description-color);
|
||||
font-size: var(--hm-toast-description-font-size);
|
||||
line-height: var(--hm-toast-description-line-height);
|
||||
font-weight: var(--hm-toast-description-font-weight);
|
||||
}
|
||||
[data-sonner-toaster] [data-sonner-toast][data-styled="true"] [data-icon] {
|
||||
width: var(--hm-toast-icon-size);
|
||||
height: var(--hm-toast-icon-size);
|
||||
color: var(--hm-toast-icon-color);
|
||||
}
|
||||
|
||||
/* Error is the only status with its own color (destructive); other types stay neutral. */
|
||||
[data-sonner-toaster] [data-sonner-toast][data-type="error"] {
|
||||
border-color: var(--hm-toast-error-border-color);
|
||||
}
|
||||
[data-sonner-toaster] [data-sonner-toast][data-type="error"] [data-icon],
|
||||
[data-sonner-toaster] [data-sonner-toast][data-type="error"] [data-title] {
|
||||
color: var(--hm-toast-error-text);
|
||||
}
|
||||
|
||||
[data-sonner-toaster] [data-sonner-toast][data-styled="true"] [data-button] {
|
||||
height: var(--hm-toast-action-height);
|
||||
padding: 0 var(--hm-toast-action-padding-x);
|
||||
border-radius: var(--hm-toast-action-radius);
|
||||
background: var(--hm-toast-action-background);
|
||||
color: var(--hm-toast-action-text);
|
||||
font-size: var(--hm-toast-action-font-size);
|
||||
font-weight: var(--hm-toast-action-font-weight);
|
||||
}
|
||||
[data-sonner-toaster] [data-sonner-toast][data-styled="true"] [data-cancel] {
|
||||
background: var(--hm-toast-cancel-background);
|
||||
color: var(--hm-toast-cancel-text);
|
||||
}
|
||||
[data-sonner-toaster] [data-sonner-toast][data-styled="true"] [data-close-button] {
|
||||
background: var(--hm-toast-close-background);
|
||||
color: var(--hm-toast-close-text);
|
||||
border-color: var(--hm-toast-close-border-color);
|
||||
}
|
||||
Reference in new issue
Block a user