1014629 - DevTools themes: deal with .theme-bg-contrast color

Status: NEW

(DevTools :: Shared Components, defect, P3)

Description

[Brian Grinstead [:bgrins]]

We should either add a variable for the bg contrast color (and probably rename it to something like --theme-background-attention), or just use the light orange color from https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors.

Comment 1

[Victoria Wang [:victoria]]

Is this the same color as the DOM-changing orange that briefly appears?

Comment 2

[Brian Grinstead [:bgrins]]

(In reply to Victoria Wang [:victoria] from comment #1)
> Is this the same color as the DOM-changing orange that briefly appears?

Yep, and looks like that's really the only thing this class is used for. It looks like we are now using `var(--theme-contrast-background)` for this class, which is also used for a number of different things in the UI.

https://searchfox.org/mozilla-central/rev/1410bb760a5e77236b74999807f5500bd285a57d/devtools/client/themes/light-theme.css#38
https://searchfox.org/mozilla-central/search?q=theme-contrast-background&path=

So I think this can be resolved now, unless if you want to use it to make a change to the color or where we use it.

Comment 3

[Victoria Wang [:victoria]]

Ah thanks! 

I believe the DOM changing also affects the variable --rule-highlight-background-color?

I'm interested in changing this color in both themes (for better contrast and to match design system). Yellow-70 should work for selected rows, and I think the current work on unifying all yellow highlights in this issue will help us determine the color for non-selected rows:

https://github.com/devtools-html/ux/issues/14

Once design discussion in that issue is complete, I can file a new bug for (good first bug) implementation or we can reuse this bug.

Comment 4

[Belén [:ladybenko]]

Please let's reuse this bug for the implementation once the design discussion is done. Thanks!