Change Details

== Background The [[ https://caniuse.com/?search=accent-color | relative new ]] CSS property [[ https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color | `accent-color` ]] enables branding simplification on native HTML form elements like checkboxes or progress bar. Further examples: https://codepen.io/web-dot-dev/pen/PomBZdy == Goal We should evaluate it's usefulness (for example in regards to SSR and rendering FOUC) If agreed, it should be added as option (color-accent) and decision token (accent-color). == Criteria for done [] Evaluate use of `accent-color [] If 'go', add as design tokens [] Apply in all supported components, probably as mixin.

== 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 proposal, that's clear, but problematic from theming perspective to Eric's concerns)? === Proposal **theme options:** Already covered by theme options. **decisions** `color.accent: { color.blue600 }` == Criteria for done [] Define `accent-color` (option and?) decision tokens. [] With default value `#36c` in WikimediaUI theme. [] Apply in all supported components, probably as mixin.

== Background/Goal The [[ https://caniuse.com/?search=accent-color | relative new ]] CSS property [[ https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color | `accent-color` ]]**[[ 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 == Goal === 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. We should evaluate it's usefulness (for example in regards to SSR and rendering FOUC)- Or would only a decision token be better option (see proposal, that's clear, but problematic from theming perspective to Eric's concerns)? If agreed, it should be added as option (color-accent) and === Proposal **theme options:** Already covered by theme options. **decision token (s** `color.accent-: { color)..blue600 }` == Criteria for done [] Evaluate use of `accent-colorDefine `accent-color` (option and?) decision tokens. [] If 'go', add as design tokensWith default value `#36c` in WikimediaUI theme. [] Apply in all supported components, probably as mixin.