diff options
Diffstat (limited to 'src/lib')
| -rw-r--r-- | src/lib/components/Button.svelte | 23 | ||||
| -rw-r--r-- | src/lib/components/ScoreBadge.svelte | 35 | ||||
| -rw-r--r-- | src/lib/components/SectionTitle.svelte | 23 | ||||
| -rw-r--r-- | src/lib/components/StatusBadge.svelte | 48 |
4 files changed, 109 insertions, 20 deletions
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte index 30e9fc2..27b9b7f 100644 --- a/src/lib/components/Button.svelte +++ b/src/lib/components/Button.svelte @@ -15,7 +15,7 @@ onclick, children, }: { - variant?: 'primary' | 'accent' | 'ghost' | 'done'; + variant?: 'primary' | 'accent' | 'ghost' | 'done' | 'outline'; type?: 'button' | 'submit' | 'reset'; disabled?: boolean; name?: string; @@ -143,6 +143,27 @@ font-size: 0.9375rem; } + .outline { + width: 3rem; + height: 3rem; + flex-shrink: 0; + padding: 0; + border-radius: 0.75rem; + background: var(--surface); + color: var(--text-secondary); + border: 1.5px solid var(--border); + font-size: 1.25rem; + font-weight: 500; + display: flex; + align-items: center; + justify-content: center; + } + + .outline:hover:not(:disabled) { + border-color: var(--accent); + color: var(--text); + } + .block { align-self: stretch; width: 100%; 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> diff --git a/src/lib/components/SectionTitle.svelte b/src/lib/components/SectionTitle.svelte new file mode 100644 index 0000000..be77a46 --- /dev/null +++ b/src/lib/components/SectionTitle.svelte @@ -0,0 +1,23 @@ +<script lang="ts"> + import type { Snippet } from 'svelte'; + + let { level = 2, children }: { level?: 2 | 3; children: Snippet } = $props(); +</script> + +<svelte:element this={level === 2 ? 'h2' : 'h3'}> + {@render children()} +</svelte:element> + +<style> + h2, + h3 { + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--accent); + margin: 1.25rem 0 0.5rem; + padding-left: 0.5rem; + border-left: 3px solid var(--accent); + } +</style> 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> |