Make `color` great again

[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
- [ ] Make POC in tokens scripts
- [ ] Figure out how to handle modes in Figma and design-tokens json for this