Bug 1521340 - Simplify icon color CSS variables; r=ntim
authorFlorens Verschelde <florens@fvsch.com>
Mon, 21 Jan 2019 01:22:02 +0000
changeset 514614 d5962d1b5b32ae02d810a1cf74a484f6df8e90ec
parent 514613 14691f8af836bfb8858fe7a75b417f126cf52b52
child 514615 2b62559fb02b566aa10476ea77169df02cee7807
push id1953
push userffxbld-merge
push dateMon, 11 Mar 2019 12:10:20 +0000
treeherdermozilla-release@9c35dcbaa899 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersntim
bugs1521340
milestone66.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1521340 - Simplify icon color CSS variables; r=ntim - Remane --theme-toolbar-icon-color to just --theme-icon-color - Rename --theme-toolbar-checked-color to --theme-icon-checked-color - Introduce a --theme-icon-dimmed-color that is less contrasted (e.g. for Rules icon buttons) - Remove icon color duplication for twisties, console icons - Avoid partial opacity variants of Photon Grey as global variables in variables.css Differential Revision: https://phabricator.services.mozilla.com/D17075
devtools/client/accessibility/accessibility.css
devtools/client/jar.mn
devtools/client/responsive.html/index.css
devtools/client/shared/widgets/filter-widget.css
devtools/client/themes/animation.css
devtools/client/themes/common.css
devtools/client/themes/fonts.css
devtools/client/themes/images/filter.svg
devtools/client/themes/images/search.svg
devtools/client/themes/images/vview-edit.png
devtools/client/themes/images/vview-edit.svg
devtools/client/themes/images/vview-edit@2x.png
devtools/client/themes/rules.css
devtools/client/themes/shadereditor.css
devtools/client/themes/toolbars.css
devtools/client/themes/toolbox.css
devtools/client/themes/variables.css
devtools/client/themes/webconsole.css
devtools/client/themes/widgets.css
devtools/client/webconsole/components/ReverseSearchInput.css
--- a/devtools/client/accessibility/accessibility.css
+++ b/devtools/client/accessibility/accessibility.css
@@ -9,29 +9,29 @@
   --accessibility-toolbar-focus: var(--blue-50);
   --accessibility-toolbar-focus-alpha30: rgba(10, 132, 255, 0.3);
   --accessibility-full-length-minus-splitter: calc(100% - 1px);
   --accessibility-horizontal-padding: 5px;
   --accessibility-properties-item-width: calc(100% - var(--accessibility-horizontal-padding));
   --accessibility-arrow-horizontal-padding: 4px;
   --accessibility-tree-row-height: 21px;
   --accessibility-unfocused-tree-focused-node-background: var(--grey-20);
-  --accessibility-unfocused-tree-focused-node-twisty-fill: var(--theme-twisty-fill);
+  --accessibility-unfocused-tree-focused-node-twisty-fill: var(--theme-icon-dimmed-color);
   --accessibility-link-color: var(--blue-60);
   --accessibility-link-color-active: var(--blue-70);
   --accessible-role-active-background-color: var(--blue-50);
   --accessible-role-active-border-color: #FFFFFFB3;
   --accessible-role-background-color: white;
   --accessible-role-border-color: #CACAD1;
   --accessible-role-color: var(--grey-60);
 }
 
 :root.theme-dark {
   --accessibility-unfocused-tree-focused-node-background: var(--grey-70);
-  --accessibility-unfocused-tree-focused-node-twisty-fill: var(--theme-twisty-selected-fill);
+  --accessibility-unfocused-tree-focused-node-twisty-fill: var(--theme-selection-color);
   --accessibility-link-color: var(--theme-highlight-blue);
   --accessibility-link-color-active: var(--blue-40);
   --accessible-role-active-background-color: var(--blue-60);
   --accessible-role-active-border-color: #FFF6;
   --accessible-role-background-color: var(--grey-80);
   --accessible-role-border-color: var(--grey-50);
   --accessible-role-color: var(--grey-40);
 }
@@ -52,17 +52,17 @@ body {
 @keyframes flash-out {
   from {
     background: var(--theme-contrast-background);
   }
 }
 
 .accessible .tree .node.focused .theme-twisty,
 .treeTable .treeRow.selected .theme-twisty {
-  fill: var(--theme-twisty-selected-fill);
+  fill: var(--theme-selection-color);
 }
 
 .mainFrame .main-panel {
   flex: 1 1 auto;
   overflow: auto;
 }
 
 .mainFrame {
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -209,18 +209,17 @@ devtools.jar:
     skin/images/tool-dom.svg (themes/images/tool-dom.svg)
     skin/images/tool-accessibility.svg (themes/images/tool-accessibility.svg)
     skin/images/tool-application.svg (themes/images/tool-application.svg)
     skin/images/close.svg (themes/images/close.svg)
     skin/images/clear.svg (themes/images/clear.svg)
     skin/images/close-3-pane.svg (themes/images/close-3-pane.svg)
     skin/images/open-3-pane.svg (themes/images/open-3-pane.svg)
     skin/images/vview-delete.svg (themes/images/vview-delete.svg)
-    skin/images/vview-edit.png (themes/images/vview-edit.png)
-    skin/images/vview-edit@2x.png (themes/images/vview-edit@2x.png)
+    skin/images/vview-edit.svg (themes/images/vview-edit.svg)
     skin/images/vview-lock.png (themes/images/vview-lock.png)
     skin/images/vview-lock@2x.png (themes/images/vview-lock@2x.png)
     skin/images/sort-ascending-arrow.svg (themes/images/sort-ascending-arrow.svg)
     skin/images/sort-descending-arrow.svg (themes/images/sort-descending-arrow.svg)
     skin/images/cubic-bezier-swatch.svg (themes/images/cubic-bezier-swatch.svg)
     skin/fonts.css (themes/fonts.css)
     skin/changes.css (themes/changes.css)
     skin/computed.css (themes/computed.css)
--- a/devtools/client/responsive.html/index.css
+++ b/devtools/client/responsive.html/index.css
@@ -147,17 +147,17 @@ body,
 }
 
 /* Briefly animate screenshot button when clicked */
 #screenshot-button:disabled {
   opacity: 1 !important;
 }
 
 #screenshot-button:disabled::before {
-  fill: var(--theme-toolbar-checked-color);
+  fill: var(--theme-icon-checked-color);
 }
 
 #device-selector {
   margin-inline-start: 4px;
 }
 
 #viewports-container {
   display: flex;
--- a/devtools/client/shared/widgets/filter-widget.css
+++ b/devtools/client/shared/widgets/filter-widget.css
@@ -227,14 +227,14 @@
 #toggle-presets {
   background: url(chrome://devtools/skin/images/pseudo-class.svg);
 }
 
 #filter-container .add,
 #filter-container .remove-button,
 #toggle-presets {
   -moz-context-properties: fill;
-  fill: var(--theme-toolbar-color);
+  fill: var(--theme-icon-color);
 }
 
 .show-presets #toggle-presets {
-  fill: var(--theme-toolbar-checked-color);
+  fill: var(--theme-icon-checked-color);
 }
--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -1,17 +1,17 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* Animation-inspector specific theme variables */
 
 :root {
-  --animation-item-hover-color: var(--grey-30-a40);
-  --animation-item-selected-color: var(--grey-30-a90);
+  --animation-item-hover-color: rgba(215, 215, 219, 0.4);
+  --animation-item-selected-color: rgba(215, 215, 219, 0.9);
   --cssanimation-color: var(--purple-50);
   --csstransition-color: var(--blue-55);
   --devtools-toolbar-height: 24px;
   --fast-track-image: url("images/animation-fast-track.svg");
   --graph-height: 30px;
   --graph-right-offset: 10px;
   --keyframe-marker-shadow-color: #c4c4c4;
   --pause-image: url(chrome://devtools/skin/images/pause.svg);
@@ -20,17 +20,17 @@
   --rewind-image: url(chrome://devtools/skin/images/rewind.svg);
   --scriptanimation-color: var(--green-60);
   --scrubber-color: var(--magenta-65);
   --sidebar-width: 200px;
   --tick-line-style: 0.5px solid var(--theme-splitter-color);
 }
 
 :root.theme-dark {
-  --animation-item-hover-color: var(--grey-60-a50);
+  --animation-item-hover-color: rgba(74, 74, 79, 0.5);
   --animation-item-selected-color: var(--grey-60);
   --csstransition-color: var(--blue-50);
   --keyframe-marker-shadow-color: #818181;
   --progress-bar-color: var(--grey-50);
   --scrubber-color: var(--magenta-50);
 }
 
 /* Root element of animation inspector */
--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -302,32 +302,32 @@ checkbox:-moz-focusring {
 .devtools-toolbarbutton:not([label]) > .toolbarbutton-icon,
 .devtools-button:empty::before {
   width: 16px;
   height: 16px;
   margin: 0 3px;
   transition: opacity 0.05s ease-in-out;
   -moz-context-properties: fill;
   fill: currentColor;
-  color: var(--theme-toolbar-icon-color);
+  color: var(--theme-icon-color);
   direction: ltr;
   font-size: 11px;
 }
 
 .devtools-button:empty::before {
   content: "";
   display: inline-block;
   background-repeat: no-repeat;
   vertical-align: middle;
 }
 
 .devtools-toolbarbutton:not([label])[checked=true] > .toolbarbutton-icon,
 .devtools-toolbarbutton:not([label])[open=true] > .toolbarbutton-icon,
 .devtools-button.checked:empty::before {
-  color: var(--theme-toolbar-checked-color);
+  color: var(--theme-icon-checked-color);
 }
 
 /* Standalone buttons */
 .devtools-button[standalone],
 .devtools-button[data-standalone],
 .devtools-toolbarbutton[standalone],
 .devtools-toolbarbutton[data-standalone] {
   border-color: rgba(138,161,180,0.2) !important;
@@ -471,19 +471,21 @@ checkbox:-moz-focusring {
 }
 
 .devtools-searchinput,
 .devtools-filterinput {
   padding: 0;
   padding-inline-start: 22px;
   padding-inline-end: 4px;
   background-position: 8px center;
-  background-size: 11px 11px;
+  background-size: 11px;
   background-repeat: no-repeat;
   font-size: inherit;
+  -moz-context-properties: fill;
+  fill: var(--theme-icon-dimmed-color);
 }
 
 /*
  * @TODO : has-clear-btn class was added for bug 1296187 and we should remove it
  *  once we have a standardized search and filter input across the toolboxes.
  */
 .has-clear-btn > .devtools-searchinput,
 .has-clear-btn > .devtools-filterinput {
@@ -497,17 +499,17 @@ checkbox:-moz-focusring {
 .devtools-filterinput {
   background-image: url(chrome://devtools/skin/images/filter.svg);
 }
 
 .devtools-searchinput:-moz-locale-dir(rtl),
 .devtools-searchinput:dir(rtl),
 .devtools-filterinput:-moz-locale-dir(rtl),
 .devtools-filterinput:dir(rtl) {
-  background-position: calc(100% - 8px) center;
+  background-position-x: right 8px;
 }
 
 .devtools-searchinput .textbox-input::placeholder,
 .devtools-filterinput .textbox-input::placeholder {
   font-style: normal;
 }
 
 .devtools-plaininput {
@@ -613,17 +615,17 @@ checkbox:-moz-focusring {
   inset-inline-end: 7px;
   padding: 0;
   border: 0;
   width: 16px;
   height: 16px;
   background-color: transparent;
   background-image: url("chrome://devtools/skin/images/search-clear.svg");
   -moz-context-properties: fill, fill-opacity;
-  fill: var(--theme-toolbar-icon-color);
+  fill: var(--theme-icon-color);
   fill-opacity: 0.8;
 }
 
 .devtools-style-searchbox-no-match + .devtools-searchinput-clear {
   fill: var(--searchbox-no-match-stroke-color);
 }
 
 .devtools-searchinput-clear:hover {
@@ -636,28 +638,28 @@ checkbox:-moz-focusring {
   width: 14px;
   height: 14px;
   cursor: pointer;
   background-image: url("chrome://devtools/skin/images/arrow.svg");
   background-position: center;
   background-repeat: no-repeat;
   background-size: 10px;
   -moz-context-properties: fill;
-  fill: var(--theme-twisty-fill);
+  fill: var(--theme-icon-dimmed-color);
   transform: rotate(-90deg);
 }
 
 /* Mirror the twisty for rtl direction */
 .theme-twisty:dir(rtl),
 .theme-twisty:-moz-locale-dir(rtl) {
   transform: rotate(90deg);
 }
 
 .theme-selected ~ .theme-twisty {
-  fill: var(--theme-twisty-selected-fill);
+  fill: var(--theme-selection-color);
 }
 
 .theme-twisty:-moz-focusring {
   outline-style: none;
 }
 
 .theme-twisty[open],
 .theme-twisty.open {
@@ -736,17 +738,17 @@ checkbox:-moz-focusring {
   border: none;
   border-inline-start: 1px solid var(--theme-splitter-color);
 
   background: var(--theme-tab-toolbar-background);
   background-image: url("chrome://devtools/skin/images/dropmarker.svg");
   background-repeat: no-repeat;
   background-position: center;
   -moz-context-properties: fill;
-  fill: var(--theme-toolbar-icon-color);
+  fill: var(--theme-icon-color);
 }
 
 .all-tabs-menu:hover {
   background-color: var(--theme-toolbar-hover);
 }
 
 .all-tabs-menu:hover:active {
   background-color: var(--theme-toolbar-hover-active);
--- a/devtools/client/themes/fonts.css
+++ b/devtools/client/themes/fonts.css
@@ -288,17 +288,17 @@
   margin-left: 2px;
 }
 
 /* Custom styles for <select> elements within the font editor. */
 .font-value-select {
   background-image: url(chrome://devtools/skin/images/select-arrow.svg);
   background-repeat: no-repeat;
   background-position: right 4px center;
-  fill: var(--theme-toolbar-icon-color);
+  fill: var(--theme-icon-color);
   -moz-context-properties: fill;
   -moz-appearance: none;
   box-shadow: none;
   padding: 1px 10px 1px 2px;
   min-width: 3.8em;
 }
 
 .font-value-select:-moz-focusring {
--- a/devtools/client/themes/images/filter.svg
+++ b/devtools/client/themes/images/filter.svg
@@ -1,7 +1,7 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill #aaa">
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="context-fill">
   <path fill-opacity=".3" d="M6.6 8.4c0-.6-1.7.3-1.7-.3 0-.4-1.7-2.7-1.7-2.7H13s-1.8 2-1.8 2.7c0 .3-2.1-.1-2.1.3v6.1H7s-.4-4.1-.4-6.1z"/>
   <path d="M2 2v2.3L4.7 9H6v5.4l2.1 1 1.8-.9V9h1.3L14 4.3V2H2zm11 2l-2.2 4H9v5.8l-.9.4-1.1-.5V8H5.2L3 4V3h10v1z"/>
 </svg>
--- a/devtools/client/themes/images/search.svg
+++ b/devtools/client/themes/images/search.svg
@@ -1,6 +1,6 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - License, v. 2.0. If a copy of the MPL was not distributed with this
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill #aaa">
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="context-fill">
   <path d="M10.716 10.032C11.516 9.077 12 7.845 12 6.5 12 3.462 9.538 1 6.5 1S1 3.462 1 6.5 3.462 12 6.5 12c1.345 0 2.577-.483 3.532-1.284l4.143 4.142c.19.19.495.19.683 0 .19-.188.19-.494 0-.683l-4.142-4.143zM6.5 11C8.985 11 11 8.985 11 6.5S8.985 2 6.5 2 2 4.015 2 6.5 4.015 11 6.5 11z" fill-rule="evenodd"/>
 </svg>
deleted file mode 100644
index b3009981f9b1649d93f1b10de03d6fa4e0a9d74e..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/images/vview-edit.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
+  <path fill="context-fill #d7d7d7" d="M12.2 5.2L9.8 2.8l.8-.8L13 4.4l-.8.8zM3.4 9.2l6-6 2.4 2.4-6 6-2.4-2.4zM5.4 12L3 9.6V12h2.4z"/>
+</svg>
deleted file mode 100644
index d0923fd0a477d6155036c1a9aa2197fa5e2e8ee2..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -2,28 +2,22 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* CSS Variables specific to this panel that aren't defined by the themes */
 :root {
   --rule-highlight-background-color: var(--theme-highlight-yellow);
   --rule-overridden-item-border-color: var(--theme-content-color3);
   --rule-header-background-color: var(--theme-toolbar-background);
-  --rule-target-button-color: var(--grey-40);
-  --rule-target-button-hover-color: var(--grey-50);
-  --rule-target-button-active-color: var(--blue-50);
 }
 
 :root.theme-dark {
   --rule-highlight-background-color: #521C76;
   --rule-overridden-item-border-color: var(--theme-content-color1);
   --rule-header-background-color: #222225;
-  --rule-target-button-color: var(--grey-45);
-  --rule-target-button-hover-color: var(--grey-30);
-  --rule-target-button-active-color: var(--blue-30);
 }
 
 /* Rule View Tabpanel */
 
 #sidebar-panel-ruleview {
   margin: 0;
   display: flex;
   flex-direction: column;
@@ -430,24 +424,23 @@
 }
 
 /* Icon swatches not using the .ruleview-swatch class (flex, grid, shape) */
 
 .ruleview-flex,
 .ruleview-grid,
 .ruleview-shapeswatch {
   -moz-context-properties: stroke;
-  stroke: var(--theme-toolbar-icon-color);
+  stroke: var(--theme-icon-color);
 }
 
 .ruleview-flex.active,
 .ruleview-grid.active,
 .ruleview-shapeswatch.active {
-  stroke: var(--theme-toolbar-checked-color);
-  filter: brightness(0.9);
+  stroke: var(--theme-icon-checked-color);
 }
 
 .ruleview-flex {
   background-image: url("chrome://devtools/skin/images/flexbox-swatch.svg");
   background-size: 13px 11px;
   width: 13px;
   height: 11px;
 }
@@ -599,26 +592,26 @@
   vertical-align: top;
   width: 15px;
   height: 15px;
   margin-left: 5px;
   background: url("chrome://devtools/skin/images/open-inspector.svg") no-repeat 0 0;
   background-size: contain;
   cursor: pointer;
   -moz-context-properties: fill;
-  fill: var(--rule-target-button-color);
+  fill: var(--theme-icon-dimmed-color);
 }
 
 .ruleview-selectorhighlighter:hover {
-  fill: var(--rule-target-button-hover-color);
+  fill: var(--theme-icon-color);
 }
 
 .ruleview-selectorhighlighter:active,
 .ruleview-selectorhighlighter.highlighted {
-  fill: var(--rule-target-button-active-color);
+  fill: var(--theme-icon-checked-color);
 }
 
 #ruleview-add-rule-button::before {
   background-image: url("chrome://devtools/skin/images/add.svg");
 }
 
 #pseudo-class-panel-toggle::before {
   background-image: url("chrome://devtools/skin/images/pseudo-class.svg");
--- a/devtools/client/themes/shadereditor.css
+++ b/devtools/client/themes/shadereditor.css
@@ -53,22 +53,22 @@
 }
 
 .side-menu-widget-item-checkbox:not([checked]) .checkbox-check,
 .side-menu-widget-item-checkbox:not([checked]) + vbox {
   opacity: 0.3;
 }
 
 .side-menu-widget-item:not(.selected) .checkbox-check {
-  fill: var(--theme-toolbar-color);
+  fill: var(--theme-icon-color);
 }
 
 /* Make sure icon is white when the item is selected */
 .side-menu-widget-item.selected .checkbox-check {
-  fill: var(--theme-toolbar-selected-color);
+  fill: var(--theme-selection-color);
 }
 
 /* Shader source editors */
 
 .editor-label {
   padding: 1px 12px;
   border-top: 1px solid;
 }
--- a/devtools/client/themes/toolbars.css
+++ b/devtools/client/themes/toolbars.css
@@ -171,17 +171,17 @@
 }
 
 /*
  * Apply the default fill color to toolbar icons
  */
 #canvas-debugging-empty-notice-button .button-icon,
 .event-tooltip-debugger-icon {
   -moz-context-properties: fill;
-  fill: var(--theme-toolbar-icon-color);
+  fill: var(--theme-icon-color);
 }
 
 .hidden-labels-box:not(.visible) > label,
 .hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
   display: none;
 }
 
 .devtools-invisible-splitter {
@@ -198,17 +198,17 @@ splitter.devtools-horizontal-splitter,
 .devtools-dropdown-button {
   background-image: url("chrome://devtools/skin/images/select-arrow.svg") !important;
   background-position: right center !important;
   background-repeat: no-repeat !important;
   text-overflow: ellipsis;
   overflow: hidden;
   padding-inline-start: 2px !important;
   padding-inline-end: 10px !important;
-  fill: var(--theme-toolbar-icon-color);
+  fill: var(--theme-icon-color);
   -moz-context-properties: fill;
 }
 
 html[dir="rtl"] .devtools-dropdown-button {
   background-position: left center !important;
 }
 
 .devtools-dropdown-button:not(:hover) {
--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -160,17 +160,17 @@
   margin: 0;
   margin-inline-start: 8px;
   margin-inline-end: 6px;
   height: 16px;
   width: 16px;
   vertical-align: text-top;
   flex-shrink: 0;
   -moz-context-properties: fill;
-  fill: var(--theme-toolbar-icon-color);
+  fill: var(--theme-icon-color);
 }
 
 .devtools-tab.selected > img {
   fill: var(--theme-toolbar-selected-color);
 }
 
 .devtools-tab.highlighted > img {
   fill: var(--theme-toolbar-highlighted-color);
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -18,19 +18,17 @@
   --theme-body-background: white;
   --theme-sidebar-background: white;
   --theme-contrast-background: #e6b064;
 
   /* Toolbar */
   --theme-tab-toolbar-background: var(--grey-10);
   --theme-toolbar-background: var(--grey-10);
   --theme-toolbar-color: var(--grey-90);
-  --theme-toolbar-icon-color: var(--grey-90-a80);
   --theme-toolbar-selected-color: var(--blue-60);
-  --theme-toolbar-checked-color: var(--blue-60);
   --theme-toolbar-highlighted-color: var(--green-60);
   --theme-toolbar-background-hover: rgba(221, 225, 228, 0.66);
   --theme-toolbar-background-alt: #f5f5f5;
   --theme-toolbar-hover: var(--grey-20);
   --theme-toolbar-hover-active: var(--grey-20);
 
   /* Selection */
   --theme-selection-background: var(--blue-55);
@@ -39,16 +37,21 @@
   --theme-selection-focus-color: var(--grey-70);
   --theme-selection-color: #ffffff;
 
   /* Border color that splits the toolbars/panels/headers. */
   --theme-splitter-color: var(--grey-25);
   --theme-emphasized-splitter-color: var(--grey-30);
   --theme-emphasized-splitter-color-hover: var(--grey-40);
 
+  /* Icon colors */
+  --theme-icon-color: rgba(12, 12, 13, 0.8);
+  --theme-icon-dimmed-color: rgba(135, 135, 137, 0.9);
+  --theme-icon-checked-color: var(--blue-60);
+
   /* Text color */
   --theme-comment: var(--grey-50);
   --theme-comment-alt: var(--grey-40);
   --theme-body-color: var(--grey-60);
   --theme-body-color-alt: var(--grey-50);
   --theme-body-color-inactive: var(--grey-40);
   --theme-content-color1: var(--grey-80);
   --theme-content-color2: var(--grey-60);
@@ -62,20 +65,16 @@
 
   /* These theme-highlight color variables have not been photonized. */
   --theme-highlight-bluegrey: #0072ab;
   --theme-highlight-lightorange: #d97e00;
   --theme-highlight-orange: #f13c00;
   --theme-highlight-pink: #b82ee5;
   --theme-highlight-gray: #dde1e4;
 
-  /* Twisty (expand) icon colors */
-  --theme-twisty-fill: hsla(0,0%,50%,.70);
-  --theme-twisty-selected-fill: white;
-
   /* For accessibility purposes we want to enhance the focus styling. This
    * should improve keyboard navigation usability. */
   --theme-focus-outline-color: #000000;
 
   /* Colors used in Graphs, like performance tools. Similar colors to Chrome's timeline. */
   --theme-graphs-green: #85d175;
   --theme-graphs-blue: #83b7f6;
   --theme-graphs-bluegrey: #0072ab;
@@ -108,19 +107,17 @@
   --theme-body-background: var(--grey-80);
   --theme-sidebar-background: var(--grey-85);
   --theme-contrast-background: #ffb35b;
 
   /* Toolbar */
   --theme-tab-toolbar-background: var(--grey-90);
   --theme-toolbar-background: var(--grey-85);
   --theme-toolbar-color: var(--grey-40);
-  --theme-toolbar-icon-color: var(--grey-40);
   --theme-toolbar-selected-color: white;
-  --theme-toolbar-checked-color: #75BFFF;
   --theme-toolbar-highlighted-color: var(--green-50);
   --theme-toolbar-background-hover: #20232B;
   --theme-toolbar-background-alt: var(--grey-85);
   --theme-toolbar-hover: #252526;
   --theme-toolbar-hover-active: #252526;
 
   /* Selection */
   --theme-selection-background: #204E8A;
@@ -129,16 +126,21 @@
   --theme-selection-focus-color: var(--grey-30);
   --theme-selection-color: #ffffff;
 
   /* Border color that splits the toolbars/panels/headers. */
   --theme-splitter-color: #3c3c3d;
   --theme-emphasized-splitter-color: var(--grey-60);
   --theme-emphasized-splitter-color-hover: var(--grey-50);
 
+  /* Icon colors */
+  --theme-icon-color: rgba(249, 249, 250, 0.7);
+  --theme-icon-dimmed-color: rgba(147, 147, 149, 0.9);
+  --theme-icon-checked-color: var(--blue-30);
+
   /* Text color */
   --theme-comment: var(--grey-45);
   --theme-comment-alt: var(--grey-50);
   --theme-body-color: var(--grey-40);
   --theme-body-color-alt: var(--grey-45);
   --theme-body-color-inactive: var(--grey-50);
   --theme-content-color1: var(--grey-30);
   --theme-content-color2: var(--grey-40);
@@ -152,20 +154,16 @@
 
   /* These theme-highlight color variables have not been photonized. */
   --theme-highlight-bluegrey: #5e88b0;
   --theme-highlight-lightorange: #d99b28;
   --theme-highlight-orange: #d96629;
   --theme-highlight-pink: #df80ff;
   --theme-highlight-gray: #e9f4fe;
 
-  /* Twisty (expand) icon colors */
-  --theme-twisty-fill: var(--grey-45);
-  --theme-twisty-selected-fill: white;
-
   /* For accessibility purposes we want to enhance the focus styling. This
    * should improve keyboard navigation usability. */
   --theme-focus-outline-color: #ced3d9;
 
   /* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */
   --theme-graphs-green: #70bf53;
   --theme-graphs-blue: #46afe3;
   --theme-graphs-bluegrey: #5e88b0;
@@ -246,22 +244,18 @@
   --yellow-60: #d7b600;
   --yellow-65: #be9b00;
   --yellow-80: #715100;
 
   --grey-10: #f9f9fa;
   --grey-20: #ededf0;
   --grey-25: #e0e0e2;
   --grey-30: #d7d7db;
-  --grey-30-a40: rgba(215, 215, 219, 0.4);
-  --grey-30-a90: rgba(215, 215, 219, 0.9);
   --grey-40: #b1b1b3;
   --grey-45: #939395;
   --grey-50: #737373;
   --grey-55: #5c5c5f;
   --grey-60: #4a4a4f;
-  --grey-60-a50: rgba(74, 74, 79, 0.5);
   --grey-70: #38383d;
   --grey-80: #2a2a2e;
   --grey-85: #1b1b1d;
   --grey-90: #0c0c0d;
-  --grey-90-a80: rgba(12, 12, 13, 0.8);
 }
--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -13,36 +13,28 @@
   /* Width of the left gutter where icons appear */
   --console-inline-start-gutter: 32px;
   /* Icons perfectly centered in the left gutter "feel" closer to the window
    * edge than to message text. This value pushes them slightly to the right. */
   --console-icon-horizontal-offset: 1px;
 }
 
 .theme-dark {
-  --console-input-icon-color: rgba(249, 249, 250, 0.4);
-  --console-input-icon-focused: var(--blue-30);
-  --console-output-icon-medium-color: var(--grey-50);
-  --console-output-icon-strong-color: var(--grey-30);
   --console-output-icon-error-color: var(--red-40);
   --console-output-icon-warning-color: var(--yellow-60);
   --console-output-indent-border-color: var(--theme-highlight-blue);
   --error-color: var(--red-20);
   --error-background-color: hsl(345, 23%, 24%);
   --warning-color: hsl(43, 94%, 81%);
   --warning-background-color: hsl(42, 37%, 19%);
   --console-output-color: white;
   --repeat-bubble-background-color: var(--blue-60);
 }
 
 .theme-light {
-  --console-input-icon-color: rgb(12, 12, 13, 0.4);
-  --console-input-icon-focused: var(--blue-55);
-  --console-output-icon-medium-color: var(--grey-40);
-  --console-output-icon-strong-color: var(--grey-60);
   --console-output-icon-error-color: var(--red-60);
   --console-output-icon-warning-color: var(--yellow-65);
   --console-output-indent-border-color: var(--theme-highlight-blue);
   --error-color: var(--red-70);
   --error-background-color: hsl(344, 73%, 97%);
   --warning-color: var(--yellow-80);
   --warning-background-color: hsl(54, 100%, 92%);
   --console-output-color: var(--grey-90);
@@ -186,27 +178,27 @@ a {
 /* Icon on unindented row should be centered within the left gutter */
 .message > .indent[data-indent="0"] + .icon {
   width: 24px;
   margin-inline-start: var(--console-icon-horizontal-offset);
   margin-inline-end: calc(4px - var(--console-icon-horizontal-offset));
 }
 
 .message.command > .icon {
-  color: var(--console-output-icon-strong-color);
+  color: var(--theme-icon-color);
   background-image: url(chrome://devtools/skin/images/webconsole/input.svg);
 }
 
 .message.result > .icon {
-  color: var(--console-output-icon-medium-color);
+  color: var(--theme-icon-dimmed-color);
   background-image: url(chrome://devtools/skin/images/webconsole/return.svg);
 }
 
 .message.info > .icon {
-  color: var(--console-output-icon-strong-color);
+  color: var(--theme-icon-color);
   background-image: url(chrome://devtools/skin/images/webconsole/info.svg);
 }
 
 .message.error > .icon {
   color: var(--console-output-icon-error-color);
   background-image: url(chrome://devtools/skin/images/webconsole/error.svg);
 }
 
@@ -396,17 +388,17 @@ html #webconsole-notificationbox {
   color: var(--theme-content-color1);
   /* input icon */
   background-image: url(chrome://devtools/skin/images/webconsole/input.svg);
   background-position-x: calc(10px + var(--console-icon-horizontal-offset));
   background-position-y: 7px;
   background-repeat: no-repeat;
   background-size: 12px 12px;
   -moz-context-properties: fill;
-  fill: var(--console-input-icon-color);
+  fill: var(--theme-icon-dimmed-color);
 }
 
 .jsterm-complete-node {
   color: var(--theme-comment);
 }
 
 .theme-light .jsterm-input-container {
   /* For light theme use a white background for the input - it looks better
@@ -433,17 +425,17 @@ textarea.jsterm-complete-node {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   pointer-events: none;
 }
 
 textarea.jsterm-input-node:focus {
-  fill: var(--console-input-icon-focused);
+  fill: var(--theme-icon-checked-color);
   box-shadow: none;
   outline: none;
 }
 
 /* CodeMirror-powered JsTerm */
 .jsterm-cm .jsterm-input-container > .CodeMirror {
   font-size: var(--console-output-font-size);
   line-height: var(--console-output-line-height);
@@ -451,21 +443,21 @@ textarea.jsterm-input-node:focus {
   padding-inline-start: calc(var(--console-inline-start-gutter) - 4px);
   /* input icon */
   background-image: url(chrome://devtools/skin/images/webconsole/input.svg);
   background-position-x: calc(10px + var(--console-icon-horizontal-offset));
   background-position-y: 5px;
   background-repeat: no-repeat;
   background-size: 12px 12px;
   -moz-context-properties: fill;
-  fill: var(--console-input-icon-color);
+  fill: var(--theme-icon-dimmed-color);
 }
 
 .jsterm-cm .jsterm-input-container > .CodeMirror-focused {
-  fill: var(--console-input-icon-focused);
+  fill: var(--theme-icon-checked-color);
 }
 
 .jsterm-cm .cm-auto-complete-shadow-text::after {
   content: attr(title);
   color: var(--theme-comment);
 }
 
 /* Security styles */
@@ -910,17 +902,17 @@ body {
  */
 .collapse-button {
   flex: none;
   align-self: flex-start;
   margin-block-start: calc(var(--console-output-vertical-padding) - 1px);
   margin-inline-start: -2px;
   padding: 3px;
   border: none;
-  color: var(--theme-twisty-fill);
+  color: var(--theme-icon-dimmed-color);
   background: transparent;
 }
 
 .collapse-button::before {
   content: "";
   display: block;
   width: 10px;
   height: 10px;
@@ -957,30 +949,30 @@ body {
 }
 
 /* Use a bigger arrow that is visually similar to other icons (10px) */
 .message.network > .collapse-button::before,
 .message.startGroup > .indent[data-indent="0"] ~ .collapse-button::before,
 .message.startGroupCollapsed > .indent[data-indent="0"] ~ .collapse-button::before {
   width: 100%;
   background-image: url("chrome://devtools/skin/images/arrow-big.svg");
-  fill: var(--console-output-icon-medium-color);
+  fill: var(--theme-icon-dimmed-color);
 }
 
 /* Apply a style similar to collapse-button for the object tree arrows */
 .webconsole-output-wrapper .tree .arrow,
 .webconsole-output-wrapper .object-inspector .tree-node .arrow {
   width: 10px;
   height: 10px;
   background: url("chrome://devtools/skin/images/arrow.svg") no-repeat center;
   background-size: 10px;
   /* Needed for alignment */
   margin-top: -1px;
   -moz-context-properties: fill;
-  fill: var(--theme-twisty-fill);
+  fill: var(--theme-icon-dimmed-color);
 }
 
 /* Sidebar */
 .sidebar {
   display: flex;
   grid-row: 1 / -1;
   grid-column: -1 / -2;
   background-color: var(--theme-sidebar-background);
--- a/devtools/client/themes/widgets.css
+++ b/devtools/client/themes/widgets.css
@@ -468,50 +468,37 @@
   background-size: cover;
   cursor: pointer;
 }
 
 .variables-view-open-inspector {
   background-size: 15px;
   background-repeat: no-repeat;
   -moz-context-properties: fill;
-  fill: #d7d7d7;
+  fill: var(--theme-icon-dimmed-color);
 }
 
 .variables-view-delete:hover,
 .variables-view-edit:hover,
 .variables-view-open-inspector:hover {
-  fill: var(--theme-toolbar-checked-color);
+  fill: var(--theme-icon-color);
 }
 
 .variables-view-delete:active,
 .variables-view-edit:active,
 .variables-view-open-inspector:active {
-  fill: var(--theme-toolbar-checked-color);
-  filter: brightness(0.9);
-}
-
-.variable-or-property:focus > .title > .variables-view-delete,
-.variable-or-property:focus > .title > .variables-view-edit,
-.variable-or-property:focus > .title > .variables-view-open-inspector {
-  filter: none;
+  fill: var(--theme-icon-checked-color);
 }
 
 .variables-view-delete {
   background-image: url("chrome://devtools/skin/images/vview-delete.svg");
 }
 
 .variables-view-edit {
-  background-image: url("chrome://devtools/skin/images/vview-edit.png");
-}
-
-@media (min-resolution: 1.1dppx) {
-  .variables-view-edit {
-    background-image: url("chrome://devtools/skin/images/vview-edit@2x.png");
-  }
+  background-image: url("chrome://devtools/skin/images/vview-edit.svg");
 }
 
 .variables-view-open-inspector {
   background-image: url("chrome://devtools/skin/images/open-inspector.svg");
 }
 
 /* Variables and properties input boxes */
 
@@ -947,17 +934,17 @@
   height: 16px;
   float: inline-start;
   margin: 0 1px;
   background-image: url("chrome://devtools/skin/images/arrow.svg");
   background-position: 50% 50%;
   background-repeat: no-repeat;
   background-size: 10px;
   -moz-context-properties: fill;
-  fill: var(--theme-twisty-fill);
+  fill: var(--theme-icon-dimmed-color);
   cursor: pointer;
   transition: transform 125ms ease;
   transform: rotate(-90deg);
 }
 
 .tree-widget-item:-moz-locale-dir(rtl)::before {
   transform: rotate(90deg);
 }
--- a/devtools/client/webconsole/components/ReverseSearchInput.css
+++ b/devtools/client/webconsole/components/ReverseSearchInput.css
@@ -27,25 +27,26 @@
   padding-inline-start: var(--console-inline-start-gutter);
   background: transparent;
   color: currentColor;
   background-image: url(chrome://devtools/skin/images/search.svg);
   background-repeat: no-repeat;
   background-size: 12px 12px;
   background-position: 10px 2px;
   -moz-context-properties: fill;
+  fill: var(--theme-icon-dimmed-color);
 }
 
 .reverse-search input:focus {
   border: none;
   outline: none;
 }
 
 .reverse-search:not(.no-result) input:focus {
-  fill: var(--console-input-icon-focused);
+  fill: var(--theme-icon-checked-color);
 }
 
 .reverse-search-info {
   flex-shrink: 0;
   padding: 0 8px;
   color: var(--comment-node-color);
 }