1520257 - Create --theme variables for icon colors and replace improper uses of other vars

Status: RESOLVED DUPLICATE of bug 1521340

(DevTools :: Framework, enhancement)

Description

[Florens Verschelde :fvsch]

For button icons, we have roughly 3 possible colors all over DevTools:

• Normal color (Light theme: should be Photon Grey 90 at 80% opacity)
• Disabled state (same as normal color, at 50% opacity; not sure if that means Photon Grey at 50% or at 40% opacity, but 40% seems more likely); often implemented as opacity: 0.5 on the button itself
• "Enabled" or "Pressed" state (ideally aria-pressed="true", but often it's a checked or active class): we are using some shades of blue for that.

If we limit our scope to the base color and the "active" color, we could have 2 variables defined in devtools/client/themes/variables.css, e.g.:

--theme-icon-color: ...;
--theme-icon-checked-color: ...;

Currently, we are either hardcoding values in different stylesheets, using the text color (fill: currentColor which is a decent but not ideal solution), or abusing more or less related variables:

• --theme-toolbar-icon-color (could perhaps be renamed to --theme-icon-color)
• --theme-toolbar-checked-color (could perhaps be renamed to --theme-icon-checked-color, but we need to check if it's used for other things)
• --theme-highlight-blue
• --object-color (in console/reps)
• --theme-textbox-box-shadow (in Debugger Editor and SourceIcon components)
• --toolbarbutton-focus-color

In particular, it would be nice to fix the uses of --theme-textbox-box-shadow in Debugger because if we change or refactor that code in bug 1502098 and related bugs we may end up regressing Debugger styles.

Comment 1

[Florens Verschelde :fvsch]

:ntim:

--toolbarbutton-focus-{color/background} -> could just be replaced by the value it's being set to
Related: bug 1519791

Comment 2

[Florens Verschelde :fvsch]

Have I reported the same issue twice, 5 days apart?
Well yes I have.