diff options
| author | Martin Kagamino Lehoux <martin@lehoux.net> | 2026-09-12 22:26:09 +0200 |
|---|---|---|
| committer | Martin Kagamino Lehoux <martin@lehoux.net> | 2026-09-12 22:26:09 +0200 |
| commit | 2a7c4f969874b850e30170f3aef5b578677220b0 (patch) | |
| tree | 7fafc0aaf017d4f045cedd92a6fa2d55024fb63d /src/lib/components/StatusBadge.svelte | |
| parent | 5f0a73920034741236034ed7a721c68eceb8ab82 (diff) | |
Scope badges, titles, and one-off styles; add Button outline
ScoreBadge/StatusBadge carry their own color scales, no
bg-*/text-* globals. SectionTitle unifies category-name and
section-title dupes (h2/h3 via level prop). Grocery add-bar
buttons use Button, new outline variant for the secondary
action. save-status moves into its only page. Delete dead
globals and page overrides.
Diffstat (limited to 'src/lib/components/StatusBadge.svelte')
| -rw-r--r-- | src/lib/components/StatusBadge.svelte | 48 |
1 files changed, 37 insertions, 11 deletions
diff --git a/src/lib/components/StatusBadge.svelte b/src/lib/components/StatusBadge.svelte index 4c149d2..2bbdf5a 100644 --- a/src/lib/components/StatusBadge.svelte +++ b/src/lib/components/StatusBadge.svelte @@ -9,16 +9,6 @@ overdueDays = 0, }: { status: RoutineStatus; overdueDays?: number } = $props(); - const className = $derived( - status === 'ok' - ? 'status bg-success text-white' - : status === 'due' - ? 'status bg-accent-soft text-accent' - : status === 'late' - ? 'status bg-accent text-white' - : 'status bg-danger text-white', - ); - const icon = $derived( status === 'ok' ? '✓' @@ -36,5 +26,41 @@ ); </script> -<span class={className} role="img" aria-label={label} title={label}>{icon}</span +<span class="status {status}" role="img" aria-label={label} title={label} + >{icon}</span > + +<style> + .status { + flex-shrink: 0; + display: inline-flex; + align-items: center; + justify-content: center; + width: 1.5rem; + height: 1.5rem; + border-radius: 0.375rem; + font-size: 0.875rem; + font-weight: 700; + line-height: 1; + } + + .ok { + background: var(--success); + color: var(--white); + } + + .due { + background: var(--shadow-accent); + color: var(--accent); + } + + .late { + background: var(--accent); + color: var(--white); + } + + .veryLate { + background: var(--danger); + color: var(--white); + } +</style> |