Page MenuHomePhabricator

Define `accent-color` tokens
Closed, DuplicatePublic

Description

Background/Goal

accent-color is a relative new CSS property that is probably the most design-system-ey CSS property of all.
Use case could be non-Codex-Vue environments or providing a better loading experience in an SSR environment, reducing flash of unstyled content.

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 }

Goal

  • Define accent-color option and decision tokens.
    • With default value #36c in WikimediaUI theme.