1916815 - Replace --in-content-accent-color variable with the --color-accent-primary token

Status: NEW

(Toolkit :: Themes, task)

Description

[Hanna Jones [:hjones]]

Our --in-content-accent-color variable serves the same purpose as our --color-accent-primary token, uses the same value for dark themes, and uses a frustratingly similar but slightly different value for dark themes (#0061e0 vs #0060df). Switching all usage of --in-content-accent-color to --color-accent-primary should help standardize things a bit, and make our lives slightly easier if we ever need to tweak our brand accent color down the line.

The replacement work should be very straightforward, but we may want to do some spot checking as we will be switching from SelectedItem to ButtonText in forced-colors mode. If that proves problematic we can loop design in to consider options.

Comment 1

[Becca]

Can you explain what you mean about switching from SelectedItem to ButtonText in forced-colors mode?

Update: I see the forced-colors media query in common-shared.css now, but I'm not sure how to interpret what I'm seeing or how to test the change

Comment 2

[Hanna Jones [:hjones]]

Hey Becca, thanks for picking this up! We have some thorough docs on HCM media queries that include info on how to activate the queries on different platforms.

The most common use and test case is Windows users who have a high contrast theme enabled. If you don't already have access to a Windows machine for testing you can get access to a virtual machine for running Windows on your Mac (feel free to shoot me a message on Slack if that appeals). I would recommend it as this kind of thing comes up a lot - but if it feels like a big lift just to test this bug then try getting into forced colors mode on Mac and just make a note on the patch that it should be verified/visually checked on Windows by one of the reviewers.

Comment 3

[Becca]

Attachment: Bug 1916815 - Replace --in-content-accent-color variable with the --color-accent-primary token r=#theme