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

[Barsnes]

Hi and thanks for the issue!
I apologize that our documentation is a bit like swiss cheese, we know about this and are working to fix it as best as we can going forward.

Since @digdir/designsystemets latest realease is 0.1.0-next.31, this is what you get without specifying a version when using it with npx. This version is meant to be used with a next release, and was an oversight on our part, I apologize for this.

You'll have to specify the version like this; npx @digdir/designsystemet@VERSION ...

As for the typography issue you are also experiencing, I'll open another issue for it, so we can keep issues focused on one thing.
If you wish to add anything else, please feel free to add it to this issue; #2586

[mrosvik]

We're closing this for now as we haven't received any feedback. Please feel free to reach out if there are any further thoughts or input.