59 lines
1.2 KiB
SCSS
59 lines
1.2 KiB
SCSS
@use "../../styles/tokens/typography" as *;
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--nds-spacing-2xs);
|
|
padding: 3px var(--nds-spacing-xs);
|
|
border-radius: var(--nds-radius-full);
|
|
@include text-sm;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
width: fit-content;
|
|
white-space: nowrap;
|
|
&__primary {
|
|
--c: var(--nds-primary);
|
|
--on: var(--nds-on-primary);
|
|
--soft: var(--nds-primary-soft);
|
|
}
|
|
&__neutral {
|
|
--c: var(--nds-neutral);
|
|
--on: var(--nds-surface);
|
|
--soft: color-mix(in srgb, var(--nds-neutral) 16%, transparent);
|
|
}
|
|
&__success {
|
|
--c: var(--nds-success-medium);
|
|
--on: #fff;
|
|
--soft: var(--nds-success-low);
|
|
}
|
|
&__warning {
|
|
--c: var(--nds-warning-medium);
|
|
--on: #fff;
|
|
--soft: var(--nds-warning-low);
|
|
}
|
|
&__error {
|
|
--c: var(--nds-error-medium);
|
|
--on: #fff;
|
|
--soft: var(--nds-error-low);
|
|
}
|
|
&__info {
|
|
--c: var(--nds-info-medium);
|
|
--on: #fff;
|
|
--soft: var(--nds-info-low);
|
|
}
|
|
&--soft {
|
|
background-color: var(--soft);
|
|
color: var(--c);
|
|
}
|
|
&--solid {
|
|
background-color: var(--c);
|
|
color: var(--on);
|
|
}
|
|
&__dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: var(--nds-radius-full);
|
|
background-color: currentColor;
|
|
}
|
|
}
|