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

Preview Give feedback

1. Mainquest: Move css-modules to plain css #1846
   33 of 33
   css react +2
   

   
2. CSS discrepancies #1952
   0 of 5
   +0
3. Preparations for CSS-package #2295
   38 of 38
   css ☂️ epic +2
4. Investigate CSS composition #2385
   css react 🕵️ investigate +3
   
5. Move box-sizing to each components css file #2498
   css +1
   
6. Create a Baseline CSS file #2454
   css +1
7. FormField components #2311
   15 of 16
   css react ☂️ epic +3
8. Font based sizing #2508
   6 of 6
   ☂️ epic 🕵️ investigate +2
   
9. Ensure consistent component token name vs. CSS prop token usage #2638
   css +1
   

[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.

[eirikbacker]

yeah, and we need to test this selector - does it work if using .tabs inside .tabs, because that would actually meet [role="tabpanel"] [role="tabpanel"] as well 🤔

[mrosvik]

Closing this as we have completed the first version. Further enhancements will be addressed in separate issues.