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

RESOLVED FIXED in Firefox 68

Status

defect
RESOLVED FIXED
3 months ago
3 months ago

People

(Reporter: fvsch, Assigned: fvsch)

Tracking

unspecified
Firefox 68

Firefox Tracking Flags

(firefox68 fixed)

Details

Attachments

(1 attachment)

Assignee

Description

3 months ago

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).

Assignee

Comment 1

3 months ago

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.

Flags: needinfo?(victoria)
Assignee

Updated

3 months ago
Summary: Remove --grey<x>-a<y> CSS variables in devtools/client/themes/variables.css → Replace --grey<x>-a<y> CSS variables with more semantic variables for button background colors
Assignee

Updated

3 months ago
Assignee: nobody → florens
Status: NEW → ASSIGNED

This sounds good.

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

Flags: needinfo?(victoria)
Assignee

Comment 4

3 months ago

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.

Oh I see - good to know!

Comment 6

3 months ago
Pushed by florens@fvsch.com:
https://hg.mozilla.org/integration/autoland/rev/6fa8c4b075bc
Create generic button background variables; r=rcaliman

Comment 7

3 months ago
bugherder
Status: ASSIGNED → RESOLVED
Closed: 3 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 68
You need to log in before you can comment on or make changes to this bug.