Skip to content

fix(storybook): sb-unstyled op PreviewFrame — font-size override opgelost#120

Merged
jeffreylauwers merged 1 commit intomainfrom
fix/preview-frame-sb-unstyled
Mar 25, 2026
Merged

fix(storybook): sb-unstyled op PreviewFrame — font-size override opgelost#120
jeffreylauwers merged 1 commit intomainfrom
fix/preview-frame-sb-unstyled

Conversation

@jeffreylauwers
Copy link
Copy Markdown
Owner

Samenvatting

  • PreviewFrame krijgt sb-unstyled class naast de bestaande dsn-body class
  • Hiermee worden de wrapper én al zijn kind-divs uitgesloten van Storybook's docs-pagina CSS-reset die anders font-size: 16px oplegde en var(--dsn-text-font-size-md) overschreef
  • Losse stories werkten al correct; alleen het visuele voorbeeld op Docs-pagina's (Card, Details, etc.) toonde een verkeerde font-size

Oorzaak

Storybook's docs-pagina CSS bevat:

.css-qa4clq :where(div:not(.sb-anchor, .sb-unstyled, .sb-unstyled div)) {
  font-size: 16px;
}

Doordat :where() de specificiteit op 0 houdt maar de selector zelf nog één klasse telt (0,1,0), stond dit gelijk aan .dsn-body. Storybook laadt zijn stylesheet ná de onze → Storybook won altijd.

Testplan

  • Card Docs-pagina: visueel voorbeeld toont correcte font-size (token-waarde, niet altijd 16px)
  • Details Docs-pagina: zelfde controle
  • Losse stories (Card, Details): ongewijzigd correct
  • Dark mode / theme switching: PreviewFrame reageert nog steeds op tokens

🤖 Generated with Claude Code

…verride op te lossen

Storybook's docs-pagina CSS bevat een regel
'.css-qa4clq :where(div:not(.sb-anchor, .sb-unstyled, .sb-unstyled div))'
die font-size: 16px instelde op alle divs in de docs-pagina. Doordat deze
selector dezelfde specificiteit had als .dsn-body en later geladen werd,
overschreef die de token-waarde var(--dsn-text-font-size-md). Componenten
als Card en Details toonden daardoor een verkeerde font-size in het visuele
voorbeeld op Docs-pagina's — ondanks dat losse stories wél correct werkten.

De 'sb-unstyled' class sluit de wrapper én al zijn kind-divs expliciet uit
van die Storybook-reset.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@jeffreylauwers jeffreylauwers merged commit 2a518f8 into main Mar 25, 2026
3 checks passed
@jeffreylauwers jeffreylauwers deleted the fix/preview-frame-sb-unstyled branch March 27, 2026 06:57
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.

1 participant