Jake
aecb191705
Hard-coded rgba(214,132,80,X) shadows were tied to the dark-theme accent and stayed off-hue in light mode (where the accent is a darker #a3683a). Six tokens added to app.css @theme and mirrored in the light-theme block plus design-system/colors_and_type.css: --shadow-accent-sm 0 0 8px 0.25 alpha Toggle on-state --shadow-accent-md 0 4px 16px 0.3 ModelDownloader card --shadow-accent-lg 0 4px 20px 0.3 DictationPage record button --shadow-accent-glow 0 0 8px 0.4 progress-bar glow --shadow-accent-pill 0 1px 4px 0.3 SegmentedButton pill --shadow-accent-raised 0 2px 8px 0.2 FilesPage browse tile Migrated seven sites: Toggle, SegmentedButton, ModelDownloader (x2), FilesPage (x2), DictationPage record button, SettingsPage locale pill. Focus-ring shadows (0_0_0_3px_rgba(...,0.1)) left alone — handled in parallel via the --accent-shadow-focus token. @font-face: app.css and colors_and_type.css both declare the same five fonts. Duplication is unavoidable because preview/*.html loads the design-system file directly without Vite, so it cannot share the runtime declarations. font-weight ranges and font-style reconciled to match exactly (Atkinson 200-800 not 400-700, JetBrains gains font-style: normal); src URLs intentionally differ (root-absolute vs relative). Comments added to both copies explaining the contract.
20 lines
636 B
Svelte
20 lines
636 B
Svelte
<script>
|
|
let { options = [], value = $bindable(""), size = "default" } = $props();
|
|
</script>
|
|
|
|
<div class="inline-flex bg-bg-elevated rounded-[10px] p-[3px] gap-[2px]">
|
|
{#each options as option}
|
|
<button
|
|
class="rounded-lg font-medium
|
|
{size === 'small' ? 'px-2.5 py-1 text-[12px]' : 'px-3.5 py-[6px] text-[12px]'}
|
|
{value === option
|
|
? 'bg-accent text-bg shadow-[var(--shadow-accent-pill)]'
|
|
: 'text-text-secondary hover:text-text hover:bg-hover'}"
|
|
style="transition-duration: var(--duration-ui)"
|
|
onclick={() => value = option}
|
|
>
|
|
{option}
|
|
</button>
|
|
{/each}
|
|
</div>
|