Background/Goal

accent-color is a relative 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

Acceptance criteria for done

Design

• Create new version for Figma colors token's spec sheet and link it in the task
• Document the new tokens in the 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. Not part as acceptance criteria for initial task any longer