@synergy-design-system/components
Version:
This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define
67 lines (58 loc) • 1.59 kB
JavaScript
// src/components/badge/badge.custom.styles.ts
import { css } from "lit";
var badge_custom_styles_default = css`
.badge {
border: none;
border-radius: var(--syn-border-radius-pill);
font: var(--syn-body-medium-bold);
height: var(--syn-spacing-large);
line-height: var(--syn-spacing-large);
min-width: var(--syn-spacing-large);
padding: 0 var(--syn-spacing-x-small);
}
/* Variant modifiers */
.badge--primary {
background-color: var(--syn-color-primary-600);
color: var(--syn-typography-color-text-inverted);
}
.badge--success {
background-color: var(--syn-color-success-500);
color: var(--syn-typography-color-text);
}
.badge--neutral {
background-color: var(--syn-color-neutral-800);
color: var(--syn-typography-color-text-inverted);
}
.badge--warning {
background-color: var(--syn-color-warning-400);
color: var(--syn-typography-color-text);
}
.badge--danger {
background-color: var(--syn-color-error-600);
color: var(--syn-typography-color-text-inverted);
}
/**
* Special treatment: If the badge is empty, show it as a dot only
*/
:host(:empty) .badge {
height: var(--syn-spacing-x-small);
min-width: initial;
padding: 0;
width: var(--syn-spacing-x-small);
}
.visually-hidden {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
`;
export {
badge_custom_styles_default
};
//# sourceMappingURL=chunk.J6CGTLVH.js.map