designsystemet Prepare for theming and mode support

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?

✅~~Update button and accordion with correct tokens (#1826 and #1827) @Barsnes~~
✅~~Remove inverted tokens that should not exist anymore (see list below) (In a separate branch) @mrosvik @Febakke~~
✅~~Rename dark tokens to strong (In a separate branch) @mrosvik @Febakke (#1834)~~ 3.1 ~~Update CSS to use the new strong tokens @Barsnes~~
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~~
~~Rename action color to accent.~~
~~Rename first, second, third to brand1, brand2, brand3~~
~~Button should come with accent and neutral color. ~~
~~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
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.
Delete branding sets. Move semantic colors into "Semantic". Move brand colors into "Theme" (In a separate branch) @mrosvik @Febakke
Create a folder inside the Mono Repo that contains all different Brand sets, including Digdir, Altinn, Tilsynet, Brreg.
Optimize the colors in Light and Dark mode
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

Mar 21 '24 10:03 Febakke

Meeting 16.04

[ ] Create a sketch on new semantic tokens structure
- [ ] All categories have same values
[ ] Create new color scales
- [ ] Test with linear scale
- [ ] Radixlike overview of colors and uses
[ ] Create new tokens
- [ ] Rename action to accent
- [ ] Define semantic rules on when to use accent colors
[ ] Remove action second variant of button
[ ] Change tokens on button and other components to use accent/action from semantic
[ ] Remove first and second action tokens

Form components

Default: Grey color (not changed by accent color)
Hover: light version of accent color
Active/selected: Accent color
Pressed (button only?)
[ ] Define system for how to set this up. For example when you have a dark accent color where hover will be harder to see if it is a darker version.

Link

Link should use accent colors

Focus

[ ] Test with accent color or text color

Spinner

Use accent color

Helptext

Use accent color

Accordion

Use accent on default open

Darkmode

[ ] Test switching between light and dark mode on different accent colors

Apr 16 '24 09:04 Febakke

This was solved in #2130

Jun 25 '24 11:06 mrosvik