vince/dimensionlab-website
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

feat: build dashboard design system

Browse source
This commit is contained in:
vince 2026-06-18 18:27:54 +02:00
parent 171cb05305
commit fb266cf17a
23 changed files with 1449 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/lib/ui/components/StatusBadge.svelte Normal file
View file

@ -0,0 +1,52 @@
<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>