1543348 - Replace --grey<x>-a<y> CSS variables with more semantic variables for button background colors

Status: RESOLVED FIXED

(DevTools :: General, defect)

Description

[Florens Verschelde :fvsch]

As discussed on DevTools slack: we should probably consider variables.css as a kind of public API that we don't want to grow too much. If we had variables there, they should be:

• Photon colors, with as few custom variants as possible (avoid creating --grey-43 or very arbitrary variants; limit custom variants such as --blue-30 and --grey-45, etc.)
• Variables with a specific type of use case intended, and reflected in the variable name, e.g. --theme-splitter-color.

Proposed change:

   --grey-10: #f9f9fa;
-  --grey-10-a10: rgba(249, 249, 250, 0.1);
-  --grey-10-a15: rgba(249, 249, 250, 0.15);
   --grey-20: #ededf0;
   --grey-25: #e0e0e2;
   --grey-30: #d7d7db;
   --grey-40: #b1b1b3;
   --grey-45: #939395;
   --grey-50: #737373;
   --grey-55: #5c5c5f;
   --grey-60: #4a4a4f;
   --grey-70: #38383d;
   --grey-80: #2a2a2e;
   --grey-85: #1b1b1d;
   --grey-90: #0c0c0d;
-  --grey-90-a05: rgba(12, 12, 13, 0.05);
-  --grey-90-a10: rgba(12, 12, 13, 0.1);

and move those colors to tool-specific variables (mostly in Changes here).

Comment 1

[Florens Verschelde :fvsch]

Victoria, it looks like the intent was to have two background colors for buttons. For instance, in the light theme:

• "Step 1": Grey 90 at 0.05 opacity
• "Step 2": Grey 90 at 0.10 opacity

And two button styles:

• Buttons with transparent backgrounds: use "step 1" on hover and "step 2" when pressed.
• Buttons with a visible background: use "step 1" in the default state (no change on hover), and "step 2" when pressed.

We can probably express that as two variables:

.theme-light {
  --theme-button-background: rgba(12, 12, 13, 0.05);
  --theme-button-active-background: rgba(12, 12, 13, 0.1);
}

.theme-dark {
  --theme-button-background: rgba(249, 249, 250, 0.1);
  --theme-button-active-background: rgba(249, 249, 250, 0.15);
}

And start using those colors in the Changes pane, but also for the generic .devtools-button and .devtools-toolbarbutton components.

Comment 2

[Florens Verschelde :fvsch]

Attachment: Bug 1543348 - Create generic button background variables; r=rcaliman

Comment 3

[Victoria Wang [:victoria]]

This sounds good.

Re: Gray 43 :), I'm totally happy to get that as a one-off --inactive-attr-color or whatever :).

Comment 4

[Florens Verschelde :fvsch]

Re: Gray 43 :), I'm totally happy to get that as a one-off --inactive-attr-color or whatever :)

I think all the code syntax colors and DOM tree colors are defined separately anyway (not in variables.css, though they may consume photon colors defined there), in the Inspector/Markup styles and in the CodeMirror styles.

Comment 5

[Victoria Wang [:victoria]]

Oh I see - good to know!

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/6fa8c4b075bc
Create generic button background variables; r=rcaliman

Comment 7

[Stefan Hindli [:stefan_hindli]]

https://hg.mozilla.org/mozilla-central/rev/6fa8c4b075bc