Use Material Design colors for UI icons.

This changes icons generated with use of SetImageFromVectorIcon or
DeriveDefaultIconColor to generate #757575 from a black related text
color. The use of alpha in SetImageFromVectorIcon is changed to result
in #9E9E9E for disabled icons when used to generate icons for black
text.

Some of the favicons are changed to have a MD-blue icon as part of
WebUI branding.

Bug: chromium:774563
Change-Id: I978b1cba4d33a06e834f0ff7d74d3dbc6a305b57
Reviewed-on: https://chromium-review.googlesource.com/752028
Commit-Queue: Peter Boström <pbos@chromium.org>
Reviewed-by: Colin Blundell <blundell@chromium.org>
Reviewed-by: Scott Violet <sky@chromium.org>
Reviewed-by: Evan Stade <estade@chromium.org>
Cr-Commit-Position: refs/heads/master@{#539743}

ash/message_center/message_center_style.h

@@ -6,6 +6,7 @@
 #define ASH_MESSAGE_CENTER_MESSAGE_CENTER_STYLE_H_
 
 #include "third_party/skia/include/core/SkColor.h"
+#include "ui/gfx/color_palette.h"
 #include "ui/gfx/font_list.h"
 #include "ui/gfx/geometry/insets.h"
 
@@ -16,8 +17,8 @@ namespace message_center_style {
 constexpr SkColor kBackgroundColor = SkColorSetRGB(0xFF, 0xFF, 0xFF);
 constexpr SkColor kEmptyViewColor = SkColorSetARGB(0x8A, 0x0, 0x0, 0x0);
 constexpr SkColor kScrollShadowColor = SkColorSetARGB(0x24, 0x0, 0x0, 0x0);
-constexpr SkColor kActiveButtonColor = SkColorSetARGB(0xFF, 0x5A, 0x5A, 0x5A);
-constexpr SkColor kInactiveButtonColor = SkColorSetARGB(0x8A, 0x5A, 0x5A, 0x5A);
+constexpr SkColor kActiveButtonColor = gfx::kChromeIconGrey;
+constexpr SkColor kInactiveButtonColor = SkColorSetA(kActiveButtonColor, 0xB3);
 
 constexpr int kActionIconSize = 20;
 constexpr int kEmptyIconSize = 24;

chrome/app/vector_icons/profile_switcher_outline.icon

@@ -5,7 +5,7 @@
 // This is a copy of account_circle.icon with an added path for an outline.
 // Outline:
 STROKE, 3,
-PATH_COLOR_ARGB, 0xff, 0x5a, 0x5a, 0x5a,
+PATH_COLOR_ARGB, 0xff, 0x75, 0x75, 0x75,
 MOVE_TO, 24, 4,
 CUBIC_TO, 12.95f, 4, 4, 12.95f, 4, 24,
 R_CUBIC_TO, 0, 11.05f, 8.95f, 20, 20, 20,

chrome/browser/ui/cocoa/profiles/avatar_button_controller.mm

@@ -31,7 +31,7 @@
 
 const SkColor kButtonHoverColor = SkColorSetARGB(20, 0, 0, 0);
 const SkColor kButtonPressedColor = SkColorSetARGB(31, 0, 0, 0);
-const SkColor kAvatarIconColor = SkColorSetRGB(0x5a, 0x5a, 0x5a);
+const SkColor kAvatarIconColor = SkColorSetRGB(0x75, 0x75, 0x75);
 
 const CGFloat kButtonHeight = 24;
 

chrome/browser/ui/cocoa/toolbar/toolbar_button_cocoa.mm

@@ -232,7 +232,7 @@ - (SkColor)vectorIconColor:(BOOL)themeIsDark {
   return themeIsDark ? SK_ColorWHITE
                      : (provider && provider->ShouldIncreaseContrast()
                             ? SK_ColorBLACK
-                            : SkColorSetRGB(0x5A, 0x5A, 0x5A));
+                            : SkColorSetRGB(0x75, 0x75, 0x75));
 }
 
 - (NSImage*)browserToolsIconForFillColor:(SkColor)fillColor {

chrome/browser/ui/views/tabs/tab.cc

@@ -1217,7 +1217,8 @@ void Tab::OnButtonColorMaybeChanged() {
   const SkColor title_color = theme_provider->GetColor(IsActive() ?
       ThemeProperties::COLOR_TAB_TEXT :
       ThemeProperties::COLOR_BACKGROUND_TAB_TEXT);
-  const SkColor new_button_color = SkColorSetA(title_color, 0xA0);
+  // Alpha here is chosen so that black on tab is 0x75 (kChromeIconGrey).
+  const SkColor new_button_color = SkColorSetA(title_color, 0x84);
   if (button_color_ != new_button_color) {
     button_color_ = new_button_color;
     title_->SetEnabledColor(title_color);

ui/gfx/color_palette.h

@@ -13,8 +13,6 @@ namespace gfx {
 // as a visual flag for misbehaving code.
 constexpr SkColor kPlaceholderColor = SK_ColorRED;
 
-constexpr SkColor kChromeIconGrey = SkColorSetRGB(0x5A, 0x5A, 0x5A);
-
 // The number refers to the shade of darkness. Each color in the MD
 // palette ranges from 100-900.
 constexpr SkColor kGoogleBlue300 = SkColorSetRGB(0x8A, 0xB4, 0xF8);
@@ -38,6 +36,13 @@ constexpr SkColor kGoogleGrey400 = SkColorSetRGB(0xBD, 0xC1, 0xC6);
 constexpr SkColor kGoogleGrey700 = SkColorSetRGB(0x5F, 0x63, 0x68);
 constexpr SkColor kGoogleGrey800 = SkColorSetRGB(0x3C, 0x40, 0x43);
 constexpr SkColor kGoogleGrey900 = SkColorSetRGB(0x20, 0x21, 0x24);
+constexpr SkColor kPaperGrey600 = SkColorSetRGB(0x75, 0x75, 0x75);
+
+// kChromeIconGrey is subject to change in the future, kPaperGrey600 is set in
+// stone. If you're semantically looking for "the icon color Chrome uses" then
+// use kChromeIconGrey, if you're looking for paper grey specifically, use the
+// paper-grey constant directly.
+constexpr SkColor kChromeIconGrey = kPaperGrey600;
 
 // An alpha value for designating a control's disabled state. In specs this is
 // sometimes listed as 0.38a.

ui/views/controls/button/image_button_factory.cc

@@ -32,7 +32,10 @@ void SetImageFromVectorIcon(ImageButton* button,
                             SkColor related_text_color) {
   const SkColor icon_color =
       color_utils::DeriveDefaultIconColor(related_text_color);
-  const SkColor disabled_color = SkColorSetA(icon_color, 0xff / 2);
+  // DeriveDefaultIconColor is set up to spit out #757575 from black. Applying
+  // 0xB3 as alpha results in the desired #9E9E9E disabled color when rendered
+  // against a white background.
+  const SkColor disabled_color = SkColorSetA(icon_color, 0xB3);
   button->SetImage(Button::STATE_NORMAL,
                    gfx::CreateVectorIcon(icon, icon_color));
   button->SetImage(Button::STATE_DISABLED,