Prepare for theming and mode support

[Febakke]

Prepare for theming and mode support

To support dark mode and contrast mode we should prepare our tokens structure before the V1 release, since this will change the underlying tokens structure and generate some breaking changes. Colors should be rearranged into "Light", "Dark", "Contrast" sets. Also, tokens should not have names containing "light" or "dark". We have to investigate which inverted colors that still has meaning, and which will be replace by dark mode support.

In what order should we do this?

1. ✅~~Update button and accordion with correct tokens (#1826 and #1827) @Barsnes~~
2. ✅~~Remove inverted tokens that should not exist anymore (see list below) (In a separate branch) @mrosvik @Febakke~~
3. ✅~~Rename dark tokens to strong (In a separate branch) @mrosvik @Febakke (#1834)~~ 3.1 ~~Update CSS to use the new strong tokens @Barsnes~~
4. Create and test token structure and color system. 4.1 ~~Create success, warning, danger, accent and neutral(grey) scale. How many tokens should we include to cover our needs? @Febakke @Thuneer The solid colors will not be linear, will reference to brand colors. Use Digdir, Mattilsynet, Brreg, Arbeidstilsynet as test cases.~~ 4.3 ~~The new color system should include everything in the same set. Example: "Success" should include background, surface, border, text on the same level.~~ 4.1 ~~Test token structure~~
5. ~~Rename action color to accent.~~
6. ~~Rename first, second, third to brand1, brand2, brand3~~
7. ~~Button should come with accent and neutral color. ~~
8. ~~Move base colors into two new sets "Light" and "Dark" in opposite directions. @mrosvik @Febakke (In a separate branch)~~ 4.1 ~~Test with flipping or if we need specific colors for Light and Dark. @mrosvik @Febakke~~ 4.2 Create test frames i Figma for dark and light modes with different component combinations. @Thuneer 4.3 Update the script that generates CSS @Barsnes @mimarz
9. Check if the components works as intended with the new colors and flipping between dark/light. 5.1 Update existing tokens or add missing tokens.
10. Delete branding sets. Move semantic colors into "Semantic". Move brand colors into "Theme" (In a separate branch) @mrosvik @Febakke
11. Create a folder inside the Mono Repo that contains all different Brand sets, including Digdir, Altinn, Tilsynet, Brreg.
12. Optimize the colors in Light and Dark mode
13. Implement theme in React, decide how this should be done #755

How we should handle naming that includes "dark"

Following tokens with "dark" will be renamed:

• surface-neutral-dark --> surface-neutral-strong
• surface-neutral-dark-hover --> surface-neutral-strong-hover

---

• border-action-dark --> border-action-strong
• border-action-dark-hover --> border-action-strong-hover

---

• surface-first/second/third-light --> surface-first/second/third-subtle
• surface-first/second/third-light-hover --> surface-first/second/third-subtle-hover
• surface-first/second/third-light-active --> surface-first/second/third-subtle-active
• surface-first/second/third-dark --> surface-first/second/third-strong

---

How we should handle naming that includes "inverted"

Following inverted color tokens will be kept:

• surface-neutral-inverted (used in tooltip)
• text-on_inverted (used in tooltip)

---

Following inverted colors will be deleted as they are not in use, and will be replaced by dark-mode.

• surface-on_inverted
• surface-on_inverted-hover
• surface-on_inverted-active
• surface-on_inverted-no_fill
• surface-on_inverted-no_fill-hover
• surface-on_inverted-no_fill-active

---

Following inverted colors will be deleted as it is only in use to solve a Figma issue (white border between accordion items)

• border-on_inverted-default

---

### Tasks
- [ ] https://github.com/digdir/designsystemet/issues/1036
- [ ] https://github.com/digdir/designsystemet/issues/1826
- [ ] https://github.com/digdir/designsystemet/issues/1827
- [ ] https://github.com/digdir/designsystemet/issues/1830
- [ ] https://github.com/digdir/designsystemet/issues/1836
- [ ] https://github.com/digdir/designsystemet/issues/606
- [ ] https://github.com/digdir/designsystemet/issues/1842
- [ ] https://github.com/digdir/designsystemet/issues/1843
- [ ] https://github.com/digdir/designsystemet/issues/736
- [ ] https://github.com/digdir/designsystemet/issues/1609
- [ ] https://github.com/digdir/designsystemet/issues/1964
- [ ] https://github.com/digdir/designsystemet/issues/735
- [ ] https://github.com/digdir/designsystemet/issues/1868
- [ ] https://github.com/digdir/designsystemet/issues/1303
- [ ] https://github.com/digdir/designsystemet/issues/1825
- [ ] https://github.com/digdir/designsystemet/issues/1228
- [ ] Add support "Soft white" as alternative to white background
- [ ] https://github.com/digdir/designsystemet/issues/1886
- [ ] https://github.com/digdir/designsystemet/issues/1976
- [ ] https://github.com/digdir/designsystemet/issues/1991