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/ScoreBadge.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/ScoreBadge.svelte')
| -rw-r--r-- | src/lib/components/ScoreBadge.svelte | 35 |
1 files changed, 27 insertions, 8 deletions
diff --git a/src/lib/components/ScoreBadge.svelte b/src/lib/components/ScoreBadge.svelte index 6384667..ae11918 100644 --- a/src/lib/components/ScoreBadge.svelte +++ b/src/lib/components/ScoreBadge.svelte @@ -1,13 +1,32 @@ <script lang="ts"> let { score }: { score: number } = $props(); - const className = $derived( - score >= 80 - ? 'score bg-success' - : score >= 50 - ? 'score bg-accent' - : 'score bg-danger', - ); + const level = $derived(score >= 80 ? 'high' : score >= 50 ? 'mid' : 'low'); </script> -<span class={className}>{score}</span> +<span class="score {level}">{score}</span> + +<style> + .score { + flex-shrink: 0; + min-width: 2.75rem; + padding: 0.25rem 0.5rem; + border-radius: 9999px; + text-align: center; + font-size: 0.875rem; + font-weight: 700; + color: var(--white); + } + + .high { + background: var(--success); + } + + .mid { + background: var(--accent); + } + + .low { + background: var(--danger); + } +</style> |