Closed Bug 1508404 Opened 6 years ago Closed 6 years ago

Flexbox Item pane: Dark mode colors

Categories

(DevTools :: Inspector, defect, P2)

Product:
DevTools
Component:
Inspector
Type:
defect

Tracking

(firefox65 fixed)

Status:
RESOLVED FIXED
Milestone:
Firefox 65
Tracking Flags:
Tracking Status
firefox65 --- fixed

People

(Reporter: victoria, Assigned: mtigley)

References

Details

Attachments

(1 file)

Bug 1508404 - Style flex outline to match new colour scheme. r=gl
47 bytes, text/x-phabricator-request
Details | Review 
Dark mode diagram and sizing table colors

Mockup: https://mozilla.invisionapp.com/share/MZNA228P5WB#/328646784_flexbox_Item_Examples
Inspect (needs login) https://mozilla.invisionapp.com/d/#/console/14988591/328646784/inspect

Let me know if you see any issues with these colors!
All colors used are existing in variables.css, but there are new opacity values.
Blocks: 1503206, 1478396
The colors are:

Basis bg: rgba(10,132,255,0.3)
Basis outline: rgba(10,132,255,0.85)

Grow: rgba(255,26,217,0.25)
Shrink (whoops, tbd on Monday)

Final outline: #939395

Magenta arrow, text - syntax red color
Blue text - syntax blue

All the gray text is Gray 40 or Gray 50, except h1 which is #939395
Assignee: nobody → mtigley
Status: NEW → ASSIGNED
Priority: -- → P2
Updated mockup with dark shrink example. The color is rgba(133,77,255,0.25)
Pushed by mtigley@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/88f8e61c7b04
Style flex outline to match new colour scheme. r=gl
https://hg.mozilla.org/mozilla-central/rev/88f8e61c7b04
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
status-firefox65: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 65
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: