Theme Built CSS files not working with default designsystemet versions received by npm

[vaarvik]

Version number

No response

Description of the bug

CSS files generated when running npx @digdir/designsystemet tokens build on a theme exported from https://theme.designsystemet.no/ is not compatible with versions received when running npm i @digdir/designsystemet-react @digdir/designsystemet-theme @digdir/designsystemet-css (I'm using Node v22.9.0 and npm v10.8.3):

  "@digdir/designsystemet-css": "^0.10.0",
  "@digdir/designsystemet-react": "^0.63.0",
  "@digdir/designsystemet-theme": "^0.15.3"

The reason is that these versions is still using the fds-* classes and not the new ds-* classes.

In my case I solved this by installing the following versions manually instead:

  "@digdir/designsystemet-css": "^1.0.0-next.34",
  "@digdir/designsystemet-react": "^1.0.0-next.34",
  "@digdir/designsystemet-theme": "^1.0.0-next.34",

However, I also experienced a bug with the typography styles when adding my own theme. Basically the issue was that typography got the wrong font size. I had to add the following @layer styles to change the the priority for ds.theme.typography.* (in my generated theme.css) to be higher than the ds.base.typography (from designsystemet/css):

@layer ds.base, ds.theme;

Just a short comment that the documentation/guide for how to generate these CSS files feels a bit short or spread over several locations.

Other than that, fantastic job on the library.

Steps To Reproduce

1. Generate theme
2. npm i @digdir/designsystemet-react @digdir/designsystemet-theme @digdir/designsystemet-css
3. See that theme is not affected even with the correct styles added globally.
4. Fix the issue with bumping versions as shown
5. Add a Heading component with level 1
6. See that correct styles are not applied as the priority from the generated theme has lower priority with @layer than the base from designsystemet/css

Additional Information

No response