== Background/Goal
**[[ https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color | accent-color ]]** is a relative [[ https://caniuse.com/mdn-css_properties_accent-color | new CSS property ]] that is probably the most design-system-ey CSS property of all.
It enables branding simplification on native HTML form elements like checkboxes or progress bar.
Use case could be non-Codex-Vue environments or providing a better loading experience in an SSR environment, reducing flash of unstyled content.
Further examples:
https://codepen.io/web-dot-dev/pen/PomBZdy
=== Open questions
- Should `accent-color` be a token reference even in theme already, pointing back to another color there?
-- Do we rely just on color.accent in theme tokens?
-- Will there ever be two `accent-color` theme options. I would not think so, the accent color is the main brand color and should for example work in light and dark mode. Unsure if that's fully sufficient everywhere.
- ~~Or would only a decision token be better option~~ (see original proposal, problematic from theming perspective to Eric's concerns)?
=== Proposal
**theme options:**
`color.accent: { color.blue600 }` with reference to other base token color! That opens up themability.
**decisions**
`accent.color: { color.accent }`
== Design spec
| [[ https://www.figma.com/file/E6hxGwEOs9YFVF4fFRyqSv/Colors-Tokens---T296995?node-id=2038%3A52856&t=GAvYCAR4GXOG6hZw-11 | Figma design spec sheet ]] |
== Acceptance criteria for done
**Design**
[-] Create new version for Figma [[ https://www.figma.com/file/E6hxGwEOs9YFVF4fFRyqSv/Colors-Tokens---T296995?node-id=99%3A4351&t=oSwzseDokDKXQekv-11 | colors token's spec sheet ]] and link it in the task
[] Document the new tokens in the [[ https://www.figma.com/file/mRvSsFD2Kwh8AZNjlx7rIl/%E2%9C%A8-Design-Tokens-%5BWIP%5D?node-id=1%3A3481&t=2RYGTJGGLVWlnBoO-11 | Design Tokens library ]]
**Code**
[] Define `accent-color` option and decision tokens.
[] With default value `#36c` in WikimediaUI theme.
[] Apply in all supported components, probably as mixin.