DevTools: cleanup button styles

third_party/WebKit/Source/devtools/front_end/ui/toolbar.css

 /*
  * Copyright (c) 2014 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 :host {
     flex: none;
     padding: 0 2px;
 }
@@ skipping 119 matching lines @@
     background-color: #333;
 }
 
 :not(.toolbar-render-as-links) .toolbar-button:enabled.hover:not(:active) .toolbar-text {
     color: #333;
 }
 
 .toolbar-button.toolbar-state-on .toolbar-glyph,
 .toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled.hover:not(:active),
 .-theme-selection-color {
-    background-color: hsl(218, 81%, 59%);

[pfeldman, 2017/05/30 21:18:17]

This was kind-of nice, hinting us at the fact that the hue and saturation were
the same with just the lightness changing. Why is this changing?

[luoe, 2017/05/30 22:39:45]

The only reason is to be more consistent and use fewer shades of 'blue'.  I
think a better solution would involve CSS variables, say --devtools-blue and
--devtools-lighter-blue.  But that seems out of scope for this CL.

I'll revert these changes.

+    background-color: #4285F4;
 }
 
 .toolbar-button.toolbar-state-on .toolbar-text,
 .-theme-selection-color {
-    color: hsl(218, 81%, 59%);
+    color: #4285F4;
 }
 
 .toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled.hover .toolbar-glyph {
     background-color: white;
 }
 
 .toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled.hover .toolbar-text {
     color: white;
 }
 
 .toolbar-button.toolbar-state-on:enabled.hover:not(:active) .toolbar-glyph,
 .toolbar-blue-on-hover .toolbar-button:not(.toolbar-state-on):enabled:active.hover,
 .-theme-selection-color {
-    background-color: hsl(218, 96%, 54%);
+    background-color: rgb(56, 121, 217);
 }
 
 .toolbar-button.toolbar-state-on:enabled.hover:not(:active) .toolbar-text,
 .-theme-selection-color {
-    color: hsl(218, 96%, 54%);
+    color: rgb(56, 121, 217);
 }
 
 .toolbar-toggled-gray .toolbar-button.toolbar-state-on {
     background-color: #f3f3f3 !important;
 }
 
 .toolbar-button.toolbar-state-on.toolbar-toggle-with-red-color .toolbar-glyph,
 .toolbar-button.toolbar-state-off.toolbar-default-with-red-color .toolbar-glyph {
     background-color: rgb(216, 0, 0) !important;
 }
@@ skipping 120 matching lines @@
 
 .toolbar-shadow.floating {
     flex-direction: column;
     height: auto;
     background-color: white;
     border: 1px solid #ccc;
     margin-top: -1px;
     width: 28px;
     left: -2px;
 }