Skip to content

fix(tokens): focus outline in reset.css ontkoppelen van hardcoded waarden#89

Merged
jeffreylauwers merged 1 commit intomainfrom
fix/focus-outline-tokens-reset-css
Mar 19, 2026
Merged

fix(tokens): focus outline in reset.css ontkoppelen van hardcoded waarden#89
jeffreylauwers merged 1 commit intomainfrom
fix/focus-outline-tokens-reset-css

Conversation

@jeffreylauwers
Copy link
Owner

@jeffreylauwers jeffreylauwers commented Mar 19, 2026

Summary

  • Vervangt hardcoded 2px solid currentColor / outline-offset: 2px in reset.css door de design token variabelen --dsn-focus-outline-width, --dsn-focus-outline-style, --dsn-focus-outline-color en --dsn-focus-outline-offset
  • Tokens definiëren dashed, 0px offset en de correcte token-kleur — de reset volgt nu dezelfde bron van waarheid als de componenten zelf

Opmerking: Probleem 2 uit het issue (dark mode focus-tokens ontbreken) was al opgelost — colors-dark.json bevat al een expliciete focus-sectie met eigen dark mode waarden (#f4f4f4 outline, inverse #0b0c0c).

Closes #87

Test plan

  • pnpm test — 1008 tests groen
  • pnpm --filter storybook exec tsc --noEmit — 0 fouten
  • pnpm lint — 0 fouten
  • Visuele regressie via Chromatic (CI)

🤖 Generated with Claude Code

…rden

Vervang de hardcoded outline-waarden in :focus-visible door de design token
variabelen. Dit zorgt ervoor dat de reset consistent is met de focus-tokens
en dat componenten zonder eigen focus-styling het correcte design system
patroon volgen (dashed, 0px offset, token-kleur).

Probleem 2 uit issue #87 (dark mode focus-tokens) was al opgelost in een
eerdere sessie — colors-dark.json bevat al een expliciete focus-sectie
met afwijkende waarden voor dark mode.

Closes #87

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@jeffreylauwers jeffreylauwers merged commit 9b072ba into main Mar 19, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

fix(tokens): focus outline tokens consistenter maken en reset.css ontkoppelen van hardcoded waarden

1 participant