Feat: Tailwind to CSS Modules by anneke · Pull Request #174 · SURFnet/DesignSystem

anneke · 2026-09-14T16:25:25Z

Summary

Changes styling of components to using CSS Modules, instead of Tailwind. (For React components)

Type of change

Checklist

pnpm build, pnpm lint, and pnpm format pass
Storybook story added/updated to cover the change (variants, sizes, states)
Changeset added (pnpm changeset) — required for any change to @surfnet/curve-react or @surfnet/curve-angular; N/A for docs/CI-only changes
React and Angular kept in parity, if applicable (contract updated in @surfnet/curve-contracts)

github-actions · 2026-09-22T12:30:48Z

♿ Accessibility audit — WCAG 2.2 AA

✅ No violations across 424 stories / 11872 theme·mode combinations in @surfnet/curve-angular, @surfnet/curve-react.

Automated axe covers ~30–50% of WCAG 2.2 AA. Keyboard, screen-reader and reflow checks still need a manual pass. Full per-story JSON is in the run’s a11y-reports artifact.

github-actions · 2026-09-29T13:09:41Z

Deployed 466eecd to https://SURFnet.github.io/DesignSystem/pr-174/466eecd66ae5fbf93b6a818abc60c48ded8c0a9d
on branch gh-pages in SURFnet/DesignSystem

WDeenikSURF

Vind het allemaal een stuk leesbaarder worden zo, zeker de lines met tientallen Tailwind classnames ❤️

Heb obviously niet alle styles vergeleken, maar heb vertrouwen in de Playwright tests die je daarvoor hebt opgezet.

Flink wat comments, maar wat kan je verwachten met een PR als deze 😬 Niet alles relevant voor deze PR, maar heb ze maar neergepend, wel goed om een keer over te hebben. Wat wel relevant is is vaak ook relevant voor meerdere files, maar heb dingen niet herhaald als ik ze vaker zag.

WDeenikSURF · 2026-09-29T15:42:17Z

@@ -0,0 +1,404 @@
+/*! Reset based on tailwindcss v4.3.1 preflight | MIT License | https://tailwindcss.com */


Ik zie in de apps dat we daar de preflight juist skippen omdat onze design system packages reset includen via deze file.

Ik vraag me af of dat later tot problemen zou kunnen leiden, als onze resets en de preflight van een app z'n tailwind niet meer in sync zijn door een versieverschil (en de app's tailwind resets verwacht die wij niet gebruiken, of andersom). Dit kan ook met andere styling oplossingen voorkomen overigens. Allebei de resets gebruiken kan ook vervelende gevolgen hebben.

Geen idee of daar een goede oplossing voor is overigens 🤔 Dit moet bij meer design systems / component libraries spelen zou je zeggen.

Maar goed eigenlijk buiten scope van deze PR, aangezien dit ook speelde met Tailwind zelf. Zie dat op de Tailwind repo iemand precies deze vraag stelt maar zonder reacties.

WDeenikSURF · 2026-09-29T15:45:38Z

+ * Designer- and app-facing semantic color utilities (Tailwind-like names).
+ * Maps to Curve token CSS variables — not generated by Tailwind.
+ * Layout/spacing utilities belong in the app or Storybook Tailwind entry.


Kleine nitpick: ik zie nu in heel veels comments referenties naar dat we specifiek niet Tailwind gebruiken. Dat maakt sense in context van deze PR, maar voor de toekomst maakt het natuurlijk helemaal niet uit dat we eerst Tailwind gebruikten en nu niet meer.

WDeenikSURF · 2026-09-29T16:10:19Z

-        'border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/20 has-[[data-slot][data-matches-spartan-invalid=true]]:border-destructive dark:has-[[data-slot][data-matches-spartan-invalid=true]]:ring-destructive/40 h-9 rounded-md border shadow-xs transition-[color,box-shadow] in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][data-matches-spartan-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto',
-    );
+    // Styling lives in ./hlm-input-group.css; `group/input-group` stays as a hook for consumers' Tailwind.
+    classes(() => 'curve-input-group group/input-group');


Idealiter hoeven we geen rekening te houden met of consumers Tailwind gebruiken, toch zie ik overal deze "hook for consumers' Tailwind" classnames. Kunnen we zonder? Als een hook als deze echt nodig is zodat de consumer dit component goed kan gebruiken (liever vermijden w.m.b.), is het beter om ze zelf custom classnames toe te kunnen laten voegen IMO

Ik ben hier een beetje huiverig voor omdat dit een vraag is om aan de Angular-gebruikers te stellen. Ik stel voor om dit apart op te pakken

WDeenikSURF · 2026-09-30T08:42:50Z

+   * defining it here is the real source of truth and lets consumers override
+   * the base unit for their whole app.


and lets consumers override the base unit for their whole app

Willen we die flexibiliteit geven? "Dingen passen niet mooi op het scherm, maar als ik --spacing: 2px doe wel, let's go" lijkt me niet iets dat we willen?

Dat staat overigens los van of het überhaupt handig is om spacing aan rems te koppelen, maar dat is een hele andere discussie.

In zijn algemeenheid is het aanpassen van CSS variables al mogelijk toch, dus die flexibiliteit hebben ze? Dit lijkt me meer een stuk governance, hoe strak moet het Curve team controleren of het design systeem goed wordt gebruikt

WDeenikSURF · 2026-09-30T09:01:48Z

+.sbdocs-content > ul,
+.sbdocs-content > ol {


Ik zie deze styles ook langskomen in packages/storybook-config. Waarom gebruiken we die niet in de react/angular packages?

Dit is styling voor Storybook zelf alleen, en daarmee niet een onderdeel van de packages :)

WDeenikSURF · 2026-09-30T09:05:34Z

+- React and Angular each have a `*.spec.ts` that `toHaveScreenshot`s every story (light + dark).
+  Baselines live in separate folders: `tests/visual/__screenshots__/react/` and
+  `.../angular/` (same story ids, different PNGs — never share one flat directory).
+- Refresh baselines with `pnpm test:visual:update`. Optional parity: `pnpm test:visual:parity`.


Misschien goed om erbij te zetten dat baselines pas moeten worden bijgewerkt als zeker is dat de nieuw look intended is? Niet dat een AI agent de test als een probleem ziet en ipv de regressie te fixen de visuals update.

Ik denk dat we die baseline sowieso zelf moeten refreshen handmatig.

Signed-off-by: Anneke Sinnema <mail@annekesinnema.nl>

anneke marked this pull request as draft September 14, 2026 16:25

anneke force-pushed the feat/tailwind-to-css branch 6 times, most recently from da8d2a8 to ff9cd1d Compare September 21, 2026 07:56

anneke force-pushed the feat/tailwind-to-css branch from ff9cd1d to 333c4e8 Compare September 22, 2026 12:29

github-actions Bot added a commit that referenced this pull request Sep 22, 2026

a11y screenshots for PR #174

19c2068

github-actions Bot added a commit that referenced this pull request Sep 22, 2026

a11y screenshots for PR #174

aa23f5d

anneke changed the title ~~Feat/tailwind to css~~ Feat: Tailwind to CSS Modules Sep 28, 2026

anneke linked an issue Sep 28, 2026 that may be closed by this pull request

Onderzoek: Gebruik CSS in plaats van Tailwind voor component styling #198

Open

anneke added this pull request to stack #203 September 28, 2026 15:09

anneke marked this pull request as ready for review September 28, 2026 15:19

anneke removed this pull request from stack #203 September 28, 2026 15:41

anneke added 14 commits September 29, 2026 15:05

fix: docs ul styling bleeding into components

419085d

Added visual regression testing

8ed0e38

Added visual regression baseline

17e0068

Change visual regression baseline folders

0c16e2c

fix issue in styling of documentation

67ad175

Added visual regression baseline

e6ed879

feat: change styling from tailwind to css modules

4a955b7

chore: formatting

3371bad

chore: remove visual testing from CI

806f5c4

chore: add preview-pages to github actions

ff01555

fix(react): Return reset and animations, use @layer

3c93d1c

docs: Update storybook styling

e2c30c2

feat(angular): change styling from tailwind to css

bf653bc

docs: update agent, skills, docs

4afa152

anneke added 2 commits September 29, 2026 15:06

chore: remove accidentally added elements that are not ready yet

c47206c

Remove obsolete comment

74bad31

anneke force-pushed the feat/tailwind-to-css branch from 1641137 to 74bad31 Compare September 29, 2026 13:07

WDeenikSURF reviewed Sep 30, 2026

View reviewed changes

anneke added 6 commits September 30, 2026 11:41

Remove obsolete comments

4c3ebcf

Signed-off-by: Anneke Sinnema <mail@annekesinnema.nl>

Remove tailwind-merge

128cbc5

Signed-off-by: Anneke Sinnema <mail@annekesinnema.nl>

Remove obsolete comments/code

a2f35c7

Signed-off-by: Anneke Sinnema <mail@annekesinnema.nl>

chore: remove preview-pages CI script (not working)

cd0641d

Signed-off-by: Anneke Sinnema <mail@annekesinnema.nl>

Remove obsolete (duplicate) definition

a62723c

Signed-off-by: Anneke Sinnema <mail@annekesinnema.nl>

Add intention for refreshing baseline visuals

ab4180f

Signed-off-by: Anneke Sinnema <mail@annekesinnema.nl>

SURFnet deleted a comment from github-actions Bot Sep 30, 2026

anneke added 3 commits September 30, 2026 16:14

Simplify Angular CSS build script

4755dbc

Signed-off-by: Anneke Sinnema <mail@annekesinnema.nl>

Clean up css

2e255e1

Signed-off-by: Anneke Sinnema <mail@annekesinnema.nl>

Add images to baseline

07c3dce

Signed-off-by: Anneke Sinnema <mail@annekesinnema.nl>

		@@ -0,0 +1,404 @@
		/! Reset based on tailwindcss v4.3.1 preflight \| MIT License \| https://tailwindcss.com /

		* defining it here is the real source of truth and lets consumers override
		* the base unit for their whole app.

		.sbdocs-content > ul,
		.sbdocs-content > ol {

Conversation

anneke commented Sep 14, 2026

Summary

Type of change

Checklist

Uh oh!

github-actions Bot commented Sep 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

♿ Accessibility audit — WCAG 2.2 AA

Uh oh!

github-actions Bot commented Sep 29, 2026

Uh oh!

WDeenikSURF left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions Bot commented Sep 22, 2026 •

edited

Loading