Bug 1049012 - DevTools: replace #5a6169 color with a color from the palette;r=bgrins

--HG--
extra : commitid : LVm2bOdjcWO

browser/themes/shared/devtools/toolbars.inc.css

@@ -3,11 +3,6 @@
  * 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/. */
 %endif
-%filter substitution
-%define smallSeparatorDark linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%)
-%define smallSeparatorLight linear-gradient(transparent 15%, #aaa 15%, #aaa 85%, transparent 85%)
-%define solidSeparatorDark linear-gradient(#2d5b7d, #2d5b7d)
-%define solidSeparatorLight linear-gradient(#aaa, #aaa)
 
 /* CSS Variables specific to the devtools toolbar that aren't defined by the themes */
 .theme-light {
@@ -554,73 +549,57 @@
   text-shadow: none;
 }
 
+.devtools-sidebar-tabs tabs > tab {
+  border-image: linear-gradient(transparent 15%, var(--theme-splitter-color) 15%, var(--theme-splitter-color) 85%, transparent 85%) 1 1;
+}
+
+.devtools-sidebar-tabs tabs > tab[selected],
+.devtools-sidebar-tabs tabs > tab[selected] + tab {
+  border-image: linear-gradient(var(--theme-splitter-color), var(--theme-splitter-color)) 1 1;
+}
+
 .devtools-sidebar-tabs tabs > tab:first-child {
   -moz-border-start-width: 0;
 }
 
-.theme-dark .devtools-sidebar-tabs tabs > tab {
-  border-image: @smallSeparatorDark@ 1 1;
-}
-
 .theme-dark .devtools-sidebar-tabs tabs > tab:hover {
   background: hsla(206,37%,4%,.2);
-  border-image: @smallSeparatorDark@ 1 1;
 }
 
 .theme-dark .devtools-sidebar-tabs tabs > tab:hover:active {
   background: hsla(206,37%,4%,.4);
-  border-image: @smallSeparatorDark@ 1 1;
-}
-
-.theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab {
-  border-image: @solidSeparatorDark@ 1 1;
 }
 
 .theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover {
   background: hsla(206,37%,4%,.2);
-  border-image: @solidSeparatorDark@ 1 1;
 }
 
 .theme-dark .devtools-sidebar-tabs tabs > tab[selected] + tab:hover:active {
   background: hsla(206,37%,4%,.4);
-  border-image: @solidSeparatorDark@ 1 1;
 }
 
 .theme-dark .devtools-sidebar-tabs tabs > tab[selected],
 .theme-dark .devtools-sidebar-tabs tabs > tab[selected]:hover:active {
   color: var(--theme-selection-color);
   background: #1d4f73;
-  border-image: @solidSeparatorDark@ 1 1;
-}
-
-.theme-light .devtools-sidebar-tabs tabs > tab {
-  border-image: @smallSeparatorLight@ 1 1;
 }
 
 .theme-light .devtools-sidebar-tabs tabs > tab:hover {
   background: #ddd;
-  border-image: @smallSeparatorLight@ 1 1;
 }
 
 .theme-light .devtools-sidebar-tabs tabs > tab:hover:active {
   background: #ddd;
-  border-image: @smallSeparatorLight@ 1 1;
-}
-
-.theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab {
-  border-image: @solidSeparatorLight@;
 }
 
 .theme-light .devtools-sidebar-tabs tabs > tab[selected] + tab:hover {
   background: #ddd;
-  border-image: @solidSeparatorLight@;
 }
 
 .theme-light .devtools-sidebar-tabs tabs > tab[selected],
 .theme-light .devtools-sidebar-tabs tabs > tab[selected]:hover:active {
   color: var(--theme-selection-color);
   background: #4c9ed9;
-  border-image: @solidSeparatorLight@;
 }
 
 /* Toolbox - moved from toolbox.css.