From 73b33ee956d9e2bb8e69b45629b5cdcb33d86d93 Mon Sep 17 00:00:00 2001 From: Marcel Raddatz Date: Fri, 3 Apr 2026 09:28:50 +0200 Subject: [PATCH] fix(staples): apply design-system button spec to StapleChip (13px, tracking, font-sans) Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/lib/onboarding/StapleChip.svelte | 2 +- frontend/src/lib/onboarding/StapleChip.test.ts | 8 ++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/frontend/src/lib/onboarding/StapleChip.svelte b/frontend/src/lib/onboarding/StapleChip.svelte index 00d5848..71ddb85 100644 --- a/frontend/src/lib/onboarding/StapleChip.svelte +++ b/frontend/src/lib/onboarding/StapleChip.svelte @@ -10,7 +10,7 @@ type="button" aria-pressed={selected} onclick={() => onToggle(!selected)} - class="inline-flex text-[12px] font-medium px-[12px] py-[6px] rounded-full border cursor-pointer + class="inline-flex font-sans text-[13px] font-medium tracking-[0.04em] px-[12px] py-[6px] rounded-full border cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--green-light)] {selected ? 'bg-[var(--green-tint)] border-[var(--green-light)] text-[var(--green-dark)]' diff --git a/frontend/src/lib/onboarding/StapleChip.test.ts b/frontend/src/lib/onboarding/StapleChip.test.ts index cc47d93..f9e6939 100644 --- a/frontend/src/lib/onboarding/StapleChip.test.ts +++ b/frontend/src/lib/onboarding/StapleChip.test.ts @@ -42,4 +42,12 @@ describe('StapleChip', () => { const btn = screen.getByRole('button', { name: 'Olivenöl' }); expect(btn.className).toContain('focus-visible:outline'); }); + + it('uses design-system button text spec: 13px, tracking, font-sans', () => { + render(StapleChip, { props: { name: 'Olivenöl', selected: false, onToggle: vi.fn() } }); + const btn = screen.getByRole('button', { name: 'Olivenöl' }); + expect(btn.className).toContain('text-[13px]'); + expect(btn.className).toContain('tracking-[0.04em]'); + expect(btn.className).toContain('font-sans'); + }); });