59 lines
2.4 KiB
CSS
59 lines
2.4 KiB
CSS
/* Badge mapping — current HM values from the shared Semantic tokens (ui-viz has no Badge spec; it was on hold there, so it is reference only).
|
|
Variants use data-variant. Only roles that exist in the HM Theme: primary, neutral, destructive, outline. */
|
|
:root, [data-hm-theme] {
|
|
--hm-badge-radius: var(--hm-radius-control-md);
|
|
--hm-badge-padding-x: 8px;
|
|
--hm-badge-padding-y: 2px;
|
|
--hm-badge-border-width: 1px;
|
|
--hm-badge-font-size: 12px;
|
|
--hm-badge-line-height: 18px;
|
|
--hm-badge-font-weight: 500;
|
|
|
|
/* Default is the Strong Brand / Primary color (Primary Green), not the Active State Semantic. */
|
|
--hm-badge-default-background: var(--hm-sem-action-primary);
|
|
--hm-badge-default-text: var(--hm-sem-on-action-primary);
|
|
--hm-badge-default-border-color: var(--hm-sem-action-primary);
|
|
|
|
--hm-badge-secondary-background: var(--hm-sem-bg-subtle);
|
|
--hm-badge-secondary-text: var(--hm-sem-fg-secondary);
|
|
--hm-badge-secondary-border-color: var(--hm-sem-bg-subtle);
|
|
|
|
--hm-badge-destructive-background: var(--hm-sem-action-destructive);
|
|
--hm-badge-destructive-text: var(--hm-sem-on-action-primary);
|
|
--hm-badge-destructive-border-color: var(--hm-sem-action-destructive);
|
|
|
|
--hm-badge-outline-background: var(--hm-sem-bg-surface);
|
|
--hm-badge-outline-text: var(--hm-sem-fg-primary);
|
|
--hm-badge-outline-border-color: var(--hm-sem-stroke-default);
|
|
}
|
|
|
|
[data-slot="badge"] {
|
|
box-sizing: border-box;
|
|
padding: var(--hm-badge-padding-y) var(--hm-badge-padding-x);
|
|
border: var(--hm-badge-border-width) solid transparent;
|
|
border-radius: var(--hm-badge-radius);
|
|
font-size: var(--hm-badge-font-size);
|
|
line-height: var(--hm-badge-line-height);
|
|
font-weight: var(--hm-badge-font-weight);
|
|
}
|
|
[data-slot="badge"][data-variant="default"] {
|
|
background: var(--hm-badge-default-background);
|
|
color: var(--hm-badge-default-text);
|
|
border-color: var(--hm-badge-default-border-color);
|
|
}
|
|
[data-slot="badge"][data-variant="secondary"] {
|
|
background: var(--hm-badge-secondary-background);
|
|
color: var(--hm-badge-secondary-text);
|
|
border-color: var(--hm-badge-secondary-border-color);
|
|
}
|
|
[data-slot="badge"][data-variant="destructive"] {
|
|
background: var(--hm-badge-destructive-background);
|
|
color: var(--hm-badge-destructive-text);
|
|
border-color: var(--hm-badge-destructive-border-color);
|
|
}
|
|
[data-slot="badge"][data-variant="outline"] {
|
|
background: var(--hm-badge-outline-background);
|
|
color: var(--hm-badge-outline-text);
|
|
border-color: var(--hm-badge-outline-border-color);
|
|
}
|