CSS Component Library

[mimarz]

In the future want to provide our components and utilities as pure css classes for people to use with plain html or other technologies.

Suggested package name: @digdir/designsystemet-css

Notes

• This will also require changes in the React Component Library to use new CSS Component Library.
• Proper visual testing needs to be solved for starting this to reduce accidental breaking changes for our users and components Test Chromatic for visual testing #963
• https://www.makeuseof.com/css-class-and-id-best-naming-practices/
• https://tailwindcss.com/

### Tasks
- [ ] https://github.com/digdir/designsystemet/issues/1846
- [ ] https://github.com/digdir/designsystemet/issues/1952
- [ ] https://github.com/digdir/designsystemet/issues/2295
- [ ] https://github.com/digdir/designsystemet/issues/2385
- [ ] https://github.com/digdir/designsystemet/issues/2498
- [ ] https://github.com/digdir/designsystemet/issues/2454
- [ ] https://github.com/digdir/designsystemet/issues/2311
- [ ] https://github.com/digdir/designsystemet/issues/2508
- [ ] https://github.com/digdir/designsystemet/issues/2638

[Barsnes]

We need to ensure our selectors work in a consisten way.
Sometimes the DOM does not need to follow explicit rules. Tabs, for example, can have a wrapper around the panels.
Our current selectors would break this.

A suggestion from @eirikbacker is to run selectors like

& [role="tabpanel"]:not([role="tabpanel"] [role="tabpanel"])

However, places where we want the consumers to keep a specific DOM structure, we should use CSS in a way that would "break" doing other DOM setups.