CodingPhoenixx
80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
// components/ui-badge.ts
|
|
import { LitElement, html, css } from 'lit';
|
|
import { customElement, property } from 'lit/decorators.js';
|
|
|
|
export type BadgeVariant = 'accent' | 'success' | 'warning' | 'error' | 'muted';
|
|
|
|
@customElement('ui-badge')
|
|
export class UiBadge extends LitElement {
|
|
static styles = css`
|
|
:host {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
padding: 0.3rem 0.75rem;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.03em;
|
|
text-transform: uppercase;
|
|
border-radius: 2rem;
|
|
border: 1px solid transparent;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.icon ::slotted(svg) {
|
|
width: 0.85rem;
|
|
height: 0.85rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.badge.accent {
|
|
color: var(--color-accent);
|
|
background: color-mix(in srgb, var(--color-accent) 10%, transparent);
|
|
border-color: color-mix(in srgb, var(--color-accent) 25%, transparent);
|
|
}
|
|
|
|
.badge.success {
|
|
color: #30a46c;
|
|
background: color-mix(in srgb, #30a46c 10%, transparent);
|
|
border-color: color-mix(in srgb, #30a46c 25%, transparent);
|
|
}
|
|
|
|
.badge.warning {
|
|
color: #e79d13;
|
|
background: color-mix(in srgb, #e79d13 10%, transparent);
|
|
border-color: color-mix(in srgb, #e79d13 25%, transparent);
|
|
}
|
|
|
|
.badge.error {
|
|
color: #e5484d;
|
|
background: color-mix(in srgb, #e5484d 10%, transparent);
|
|
border-color: color-mix(in srgb, #e5484d 25%, transparent);
|
|
}
|
|
|
|
.badge.muted {
|
|
color: color-mix(in srgb, var(--color-text) 45%, transparent);
|
|
background: color-mix(in srgb, var(--color-text) 6%, transparent);
|
|
border-color: var(--color-border);
|
|
}
|
|
`;
|
|
|
|
@property() variant: BadgeVariant = 'accent';
|
|
|
|
render() {
|
|
return html`
|
|
<span class="badge ${this.variant}">
|
|
<span class="icon"><slot name="icon"></slot></span>
|
|
<slot></slot>
|
|
</span>
|
|
`;
|
|
}
|
|
} |