[CrOS Semantic Colors] Clean up color palette

gogoy@ has indicated that non-refresh Google colors are no longer to be
used for Chrome OS. As such, remove them from the palette, and OS Settings.

Also, add a PRESUBMIT to prevent them from getting added back to OS Settings.

Bug: 1062154
Change-Id: I73465f867b5916bdd234a2a7c292038cd805f2a8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2100556Reviewed-by: Giovanni Ortuño Urquidi <ortuno@chromium.org>
Reviewed-by: James Cook <jamescook@chromium.org>
Commit-Queue: calamity <calamity@chromium.org>
Cr-Commit-Position: refs/heads/master@{#751934}

chrome/browser/resources/settings/chromeos/PRESUBMIT.py

+# Copyright 2020 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.
+"""Presubmit script for OS Settings."""
+
+import re
+
+
+def _CheckSemanticColors(input_api, output_api):
+    problems = []
+    for f in input_api.AffectedFiles():
+        exts = ['html', 'css']
+        if not any(f.LocalPath().endswith(ext) for ext in exts):
+            continue
+
+        paper_color_re = re.compile(r'--paper-\w+-\d+')
+        google_refresh_color_re = re.compile(r'--google-\w+-refresh-\d+')
+
+        for line_num, line in f.ChangedContents():
+            # Search for paper-colors.
+            if paper_color_re.search(line):
+                problems.append(line.strip())
+
+            # Search for google-refresh-colors.
+            if google_refresh_color_re.search(line):
+                problems.append(line.strip())
+
+    if not problems:
+        return []
+    return [
+        output_api.PresubmitPromptWarning(
+            'Please avoid using paper-colors and google-refresh-colors on ' +
+            'Chrome OS.\n' + 'Allowed colors are listed in ' +
+            'ui/webui/resources/css/cros_palette.json5.\n' +
+            'See https://crbug.com/1062154 or contact calamity@chromium.org ' +
+            'or ortuno@chromium.org for more information.',
+            items=problems)
+    ]
+
+
+def _CommonChecks(input_api, output_api):
+    """Checks common to both upload and commit."""
+    results = []
+    results.extend(_CheckSemanticColors(input_api, output_api))
+    return results
+
+
+def CheckChangeOnUpload(input_api, output_api):
+    return _CommonChecks(input_api, output_api)
+
+
+def CheckChangeOnCommit(input_api, output_api):
+    return _CommonChecks(input_api, output_api)

chrome/browser/resources/settings/chromeos/device_page/display_layout.html

@@ -22,8 +22,8 @@
          in getDivStyle_ and getMirrorDivStyle_ */
       .display {
         align-items: center;
-        background: var(--paper-grey-100);
-        color: var(--paper-grey-700);
+        background: var(--google-grey-100);
+        color: var(--google-grey-700);
         cursor: default;
         display: flex;
         font-size: 100%;

chrome/browser/resources/settings/chromeos/device_page/display_overscan_dialog.html

@@ -16,7 +16,7 @@
      }
 
      .instructions {
-       color: var(--paper-grey-600);
+       color: var(--google-grey-600);
        margin-top: 4px;
      }
 

chrome/browser/resources/settings/chromeos/device_page/storage.html

@@ -141,7 +141,7 @@
       }
 
       button > iron-icon {
-        --iron-icon-fill-color: var(--paper-grey-400);
+        --iron-icon-fill-color: var(--google-grey-400);
         --iron-icon-height: 24px;
         --iron-icon-width: 24px;
       }

chrome/browser/resources/settings/chromeos/os_people_page/fingerprint_list.html

@@ -44,7 +44,7 @@
       }
 
       paper-ripple {
-        color: var(--google-grey-refresh-700);
+        color: var(--google-grey-700);
       }
     </style>
 

chrome/browser/resources/settings/chromeos/os_printing_page/cups_add_printer_dialog_elements.html

@@ -12,7 +12,7 @@
     <style include="settings-shared">
       #dialog {
         /* Force a bottom border regardless of scroll state. */
-        --cr-dialog-body-border-bottom: 1px solid var(--paper-grey-300);
+        --cr-dialog-body-border-bottom: 1px solid var(--google-grey-300);
       }
       #dialog [slot=body] {
         padding-inline-end: 0;

chrome/browser/resources/settings/chromeos/os_printing_page/cups_printer_shared_css.html

@@ -80,7 +80,7 @@
         background: none;
         border: none;
         box-sizing: border-box;
-        color: var(--paper-grey-800);
+        color: var(--google-grey-800);
         cursor: pointer;
         font: inherit;
         min-height: 32px;
@@ -90,7 +90,7 @@
       }
 
       .list-item:focus {
-        background-color: var(--paper-grey-300);
+        background-color: var(--google-grey-300);
         outline: none;
       }
 

chrome/browser/resources/settings/chromeos/personalization_page/change_picture.html

@@ -54,7 +54,7 @@
       }
 
       #authorCredit {
-        color: var(--paper-grey-500);
+        color: var(--google-grey-500);
         display: flex;
         flex-direction: column;
         margin-top: 20px;

ui/webui/resources/css/cros_colors.json5

@@ -14,17 +14,17 @@
      * Recommended colors.
      */
     cros_default_text_color: "$google_grey_900",
-    cros_default_text_color_secondary: "$google_grey_refresh_700",
+    cros_default_text_color_secondary: "$google_grey_700",
 
     cros_default_bg_color: "#ffffff",
 
     cros_default_toolbar_bg_color: "#ffffff",
-    cros_default_toolbar_search_bg_color: "$google_grey_refresh_100",
+    cros_default_toolbar_search_bg_color: "$google_grey_100",
 
     cros_default_button_color: "$google_blue_600",
 
     cros_menu_button_bg_color_active: "$google_blue_50",
-    cros_menu_button_bg_color_hover: "$google_grey_refresh_100",
+    cros_menu_button_bg_color_hover: "$google_grey_100",
     cros_menu_button_outline_color_focused: "$google_blue_600",
 
     cros_toggle_color: "$cros_default_button_color",
@@ -35,7 +35,7 @@
 
     cros_radio_button_color: "$cros_default_button_color",
     cros_radio_button_ripple_color: "rgba($cros_radio_button_color_rgb, .2)",
-    cros_radio_button_color_unchecked: "$google_grey_refresh_700",
+    cros_radio_button_color_unchecked: "$google_grey_700",
     cros_radio_button_ripple_color_unchecked: "rgba($google_grey_600_rgb, .15)",
 
     cros_separator_color: "rgba(0, 0, 0, 0.12)",
@@ -52,10 +52,10 @@
 
     /* OS Settings */
     cros_error_color: "$google_red_700",
-    cros_success_color: "$google_green_refresh_700",
+    cros_success_color: "$google_green_700",
 
-    cros_search_page_question_icon_color: "$google_grey_refresh_500",
-    cros_app_management_permission_icon_color: "$paper_grey_600",
+    cros_search_page_question_icon_color: "$google_grey_500",
+    cros_app_management_permission_icon_color: "$google_grey_600",
 
     cros_user_icon_color_secondary: "rgb(210, 210, 212)",
   },