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 (Remove inverted use in Button #1826 and Replace border-top: ..border-on_inverted.. with gap in Accordion #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 (feat(tokens): rename dark and light tokens to subtle and strong #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 Darkmode switcher #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

Preview Give feedback

1. Easier to theme tokens directly in css #1036
   $ tokens ⚙️ technical +2
   
2. Remove inverted use in Button #1826
   css react +2
   
3. Replace border-top: ..border-on_inverted.. with gap in Accordion #1827
   css react +2
   
4. Remove inverted tokens that should not exist anymore #1830
   $ tokens +1
   
5. Rename dark tokens to strong and light tokens to subtle #1836
   $ tokens +1
6. Colors: Concider a blue secondary color palette #606
   🎨 figma +1
   
7. Create sketch of new token setup #1842
   +0
   
8. Test and land new color scales #1843
   🕵️ investigate +1
   
9. Tokens: Update action secondary to use new blue-secondary palette #736
   $ tokens 🎨 figma +2
   
10. Color system with accessible color pairings #1609
    🕵️ investigate +1
    
11. Overview of which tokens should change to what #1964
    $ tokens documentation/code +2
    
12. Tokens: Replace some global colors with colors from Brreg #735
    $ tokens 🎨 figma +2
    
13. accent and neutral color for the Button Component #1868
    react +1
14. How to handle inverted colors on components #1303
    🕵️ investigate +1
    

    
15. Figma variables setup with support for (1)brand, (2)dark mode and (3)contrast mode #1825
    $ tokens 🎨 figma +2
16. Remove Brreg-set from tokens #1228
    5 of 5
    $ tokens +1
    
17. Add support "Soft white" as alternative to white background
18. Test color system on public websites #1976
    🕵️ investigate +1
    
19. Support exporting new token structure #1991
    $ tokens +1
    
20. Create migration script for tokens v2 #2035
    $ tokens +1
    
21. Test for externals overriding tokens v2 to fit their brand #2037
    $ tokens +1
22. Migrate CSS to tokens v2 #2038
    $ tokens css +2
23. Migrate Figma to tokens v2 #2041
    39 of 39
    $ tokens 🎨 figma +2
    

    

[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

[mrosvik]

This was solved in #2130