52 lines
1.2 KiB
Svelte
52 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import type { UiSeverity } from "../types";
|
|
|
|
let {
|
|
label,
|
|
severity = "neutral",
|
|
}: {
|
|
label: string;
|
|
severity?: UiSeverity;
|
|
} = $props();
|
|
</script>
|
|
|
|
<span class="status-badge" data-severity={severity}>{label}</span>
|
|
|
|
<style>
|
|
.status-badge {
|
|
display: inline-grid;
|
|
min-height: 1.6rem;
|
|
align-items: center;
|
|
border: var(--ui-border);
|
|
padding: 0 var(--ui-space-2);
|
|
color: var(--ui-color-muted);
|
|
font-size: 0.72rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.status-badge[data-severity="ok"] {
|
|
border-color: color-mix(in srgb, var(--ui-color-ok), transparent 42%);
|
|
color: var(--ui-color-ok);
|
|
}
|
|
|
|
.status-badge[data-severity="warning"] {
|
|
border-color: color-mix(in srgb, var(--ui-color-warning), transparent 35%);
|
|
color: var(--ui-color-warning);
|
|
}
|
|
|
|
.status-badge[data-severity="danger"] {
|
|
border-color: color-mix(in srgb, var(--ui-color-danger), transparent 30%);
|
|
color: var(--ui-color-danger);
|
|
}
|
|
|
|
.status-badge[data-severity="stale"],
|
|
.status-badge[data-severity="unavailable"] {
|
|
color: var(--ui-color-stale);
|
|
}
|
|
|
|
.status-badge[data-severity="loading"] {
|
|
color: var(--ui-color-accent);
|
|
}
|
|
</style>
|