Use data attribute to choose component colors

[mimarz]

TLDR; Lift semantic color definition to a higher level and have components only use a generic --ds-color-* variable. Which semantic color i used for a component is then defined by the user using data-attributes ([data-color="accent|neutral|my-color"]). Users are free to add any number of colors and name them accordingly to their semantic needs.

Example code

/** In generated theme file from design-tokens */
:root, [data-ds-color-mode="light"] {

/** We probably need some default colors here. Neutral? */
--ds-color-surface-default: var(--ds-color-neutral-3);

[data-color="accent"] {
--ds-color-surface-default: var(--ds-color-accent-3);
}

[data-color="neutral"] {
--ds-color-surface-default: var(--ds-color-neutral-3);

}

[data-color="my-color"] {
--ds-color-surface-default: var(--ds-color-my-color-3);

}
}

/** In Button CSS */

.ds-button {
  background-color: var(--ds-color-surface-default);
}

<Button data-color="my-color" >…</Button>
<Accordion data-color="my-color">…</Accordion>

WIP Notes

• Do we need neutral separaetly for things that are always neutral?
• Users can add (and name) up to 3 additional "color" in theme-builder.
  • This limitation is due to Figma's restriction of only 4 modes in variables (accent + 3 custom colors)
• Uses something like data-attributes (data-ds-color-scheme) to change which color scale the color variables are pointing to.
  • We current have --ds-color-accent-* which works like this, but might be hard to rename to --ds-color-* because of mapping to Figma variables.
  • We already have data-ds-color-mode, which users can use to switch between dark | light | auto

    
    ### Tasks

• [x] Make POC in tokens scripts
• [x] Figure out how to handle modes in Figma and design-tokens json for this

[mimarz]

This needs to be done after #2287

[unekinn]

@mimarz & @Febakke Here's my step-by-step plan to implement this, based on my existing proof of concept. If this seems okay, should I add these as separate issues and add them to the board, or is it enough to track it here?

• [x] cli: Refactor build script for easier extension with new modes

  2633

• [x] css/cli/themes: Output only global and semantic color variables

  2641

• [x] ~css/cli/themes: Output only semantic size/space/radius variables~ ~#2642~ Doing this the "easy way" (references: false) has some issues, and it is not necessary for the rest to work, so we leave it out for now

• [x] tokens: Add tokens and Tokens Studio themes for main-color and support-color, but without using them anywhere. The structure will be

  • main: [accent]
  • support: [brand1, brand2, brand3]

  Colors in semantic/colors.json remain the same, and CLI build output is unchanged.

  2643

• [x] cli: Implement data-color , which combines colors from main and support , and the individual neutral/success/warning/danger colors.

  2644

• [x] css/react:

  • Use variables from data-color in components that already had a color prop (no implicit color inheritance yet)
  • Find a way to configure the default color for components that currently default to "accent", since we won't require a color named "accent" in the future. This should be done without changing the default of components that currently default to "neutral" (or other built-in colors)
  • Use variables from data-color in components that currently use accent and don't have a color prop, so they can be changed.

    2703

• [ ] Figma: Replace color props in Figma component variants with the combination of color: main | support and setting the correct mode

• [x] cli/theme-builder: Implement support for specifying your own color names and number of colors per color category. This will require some changes in the theme builder under the hood, but the GUI will remain the same for now.

  Example: my-theme.json

  {
    "colors": {
      "main": {
        "dominant": "#303030",
        "complimentary": "#BED5E8",
        "accent": "#76C69D"
      },
      "support": {
        "alt1": "#B9D9C8",
        "alt2": "#BAC6D8",
        "alt3": "#E5CEAE"
      }
    }
  }

  CLI:

  npx @digdir/designsystemet tokens create --json my-theme.json

• [ ] theme-builder: Implement UI for configuring your own color names and number of colors per category

[mimarz]

After demo today we suggest the following.

• We need a minimum of 1 user-defined color and neutral color for this system to work.
• data-color does not override global colors such as info, warning, success and danger
• We need to figure out how opt-out color subtle variant should be used. Currently only Card & Accordion
• Some components have default neutral color instead of "default" color.
• React Portal can cause issues with use of data-color as the portal element is put outside somewhere else in the dom-tree (usually on body)

[Febakke]

Figma testing with @unekinn

Color scales that will be included as Figma variables

Two new modes

• Main
  • accent, primary and complimentary for example
  • Will reference color scales in the semantic/color collection
• Support
  • Replace brand1, brand2...
  • Will reference support scales in semantic/color collection

Obs We need to document that if users use the color scales from semantic that are used in main and support directly they might have issues if the change names later. For instance if you set background color to primary-background instead of main-background. We have experienced that Token Studio might not always be able to make Figma understand that they are the same scales. The consequence is dead token references in Figma

Figma tasks

• [ ] Export the new collections from Token Studio. They are in the next branch now
• [ ] Use Variables pro plug in to change from accent to main on all components. We might want to buy a pro lisence to do this.
  • We do not need to wait for sizing to do this as it is pretty quick
• [ ] Do the same with brand components
• [ ] Maybe wait for sizing to be complete Add all relevant new variants of components. Most will have a main and neutral version and some will have a support version.