DevTools: border and toolbar colors from Max's mocks.

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 28 matching lines @@
 .toolbar-item {
     position: relative;
     display: flex;
     background-color: transparent;
     flex: none;
     align-items: center;
     justify-content: center;
     padding: 0;
     height: 26px;
     border: none;
+    color: #5a5a5a;
 }
 
 .toolbar-text {
     white-space: nowrap;
     overflow: hidden;
     margin-left: 6px;
     -webkit-user-select: text;
 }
 
 .toolbar-item:active {
     position: relative;
     z-index: 200;
 }
 
 .toolbar-item:hover .toolbar-button-text {
-    opacity: 1;
+    color: #333;
 }
 
 .toolbar-item .toolbar-button-text {
     font-weight: bold;
-    color: rgba(0, 0, 0, 0.75);
-    opacity: 0.8;
+    color: #5a5a5a;
 }
 
 .long-click-glyph {
     background-color: #595959;
     -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);
     -webkit-mask-position: -288px -48px;
     -webkit-mask-size: 352px 144px;
     z-index: 1;
     width: 32px;
     height: 26px;
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.5) {
 .long-click-glyph {
     -webkit-mask-image: url(Images/toolbarButtonGlyphs_2x.png);
 }
 } /* media */
 
 button.toolbar-item {
     width: 26px;
 }
 
-button.toolbar-item:enabled:hover,
-.toolbar-item.checkbox:hover,
-.toolbar-counter:hover {
-    background-color: rgba(110, 110, 110, 0.1);
-    transition: background-color 150ms cubic-bezier(0, 0, 0.2, 1);

[dgozman, 2015/06/12 18:56:17]

Transition was nice!

[pfeldman, 2015/06/12 19:35:29]

I tend to agree with Max that it was too much for a toolbar button.

-}
-
 button.toolbar-item.toggled-on .glyph {
     background-color: rgb(66, 129, 235) !important;
 }
 
-button.toolbar-item:hover .glyph {
-    opacity: 1;
+button.toolbar-item:enabled:hover .glyph {
+    background-color: #333;
+}
+
+.toolbar-counter:hover,
+.toolbar-item.checkbox:hover {
+    color: #333;
 }
 
 button.toolbar-item:active .glyph {
-    opacity: 0.8;
+    background-color: #5a5a5a;
 }
 
 button.toolbar-item:disabled {
     background-position: 0 0 !important;
 }
 
 button.toolbar-item:disabled .glyph {
     opacity: 0.5 !important;
 }
 
@@ skipping 52 matching lines @@
     line-height: 22px;
 }
 
 .toolbar-item.checkbox {
     padding: 0 5px 0 2px;
 }
 
 .toolbar-item > .glyph {
     -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);
     -webkit-mask-size: 352px 144px;
-    opacity: 0.9;
-    background-color: #595959;
+    background-color: #5a5a5a;
     z-index: 1;
     width: 32px;
     height: 24px;
 }
 
 .toolbar-item > .glyph {
     position: relative;
     left: -3px;
 }
 
@@ skipping 29 matching lines @@
     margin-left: 0;
 }
 
 .toolbar-counter-item > div {
     margin-right: 2px;
 }
 
 .toolbar-divider {
     background-color: #ccc;
     width: 1px;
-    margin: 2px 2px;
+    margin: 2px 4px;
     height: 17px;
 }
 
 .toolbar-group-label {
     margin-left: 5px;
     margin-right: 3px;
     color: #888;
 }
 
 /* Predefined items */
@@ skipping 245 matching lines @@
 }
 
 .playback-rate-button.toggled-on > .toolbar-button-text {
     color: rgb(66, 129, 235);
 }
 
 button.playback-rate-button {
     width: auto;
     margin-right: 10px;
 }