marcel/mealprep
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(staples): apply design-system button spec to StapleChip (13px, tracking, font-sans)

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel Raddatz
2026-04-03 09:28:50 +02:00
parent 8daaa0e21d
commit 73b33ee956
2 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/onboarding/StapleChip.svelte
View File

@@ -10,7 +10,7 @@
type="button" type="button"
aria-pressed={selected} aria-pressed={selected}
onclick={() => onToggle(!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)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--green-light)]
{selected {selected
? 'bg-[var(--green-tint)] border-[var(--green-light)] text-[var(--green-dark)]' ? 'bg-[var(--green-tint)] border-[var(--green-light)] text-[var(--green-dark)]'

8
frontend/src/lib/onboarding/StapleChip.test.ts
View File

@@ -42,4 +42,12 @@ describe('StapleChip', () => {
const btn = screen.getByRole('button', { name: 'Olivenöl' }); const btn = screen.getByRole('button', { name: 'Olivenöl' });
expect(btn.className).toContain('focus-visible:outline'); 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');
});
}); });