1943692 - Consider adding a border-color-selected token, or similar

Status: NEW

(Toolkit :: Themes, task)

Description

[Hanna Jones [:hjones]]

In reviewing the code changes for bug 1861505 and bug 1936671 it became apparent that there are a number of places in the app where we're visually indicating a selected state with a blue border. Because we don't yet have a token for how this state should be styled people kind of have to reinvent the wheel every time. In a lot of cases they seem to use either --button-background-color-primary or --focus-outline-color (the latter is probably more correct, but not semantic). It's possible that something like --border-color-selected would just be an alias for one of those tokens, or else would use very similar values. In any case it's probably worth thinking through in order to standardize things.

There's likely some overlap with the selected button state needed for bug 1912985. It's possible that we're actually dealing with three distinct styles:

• selected styles default or ghost buttons (border/outline matches the background color for the selected state?)
• selected styles for primary buttons (border/outline matches the background color for the selected state?)
• selected styles for all other elements (either a blue or black border/outline?)