[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)",
   },

ui/webui/resources/css/cros_palette.json5

@@ -11,333 +11,58 @@
 {
   colors: {
     google_blue_50: "#e8f0fe",
+    google_blue_100: "#d2e3fc",
+    google_blue_200: "#aecbfa",
+    google_blue_300: "#8ab4f8",
+    google_blue_400: "#669df6",
+    google_blue_500: "#4285f4",
     google_blue_600: "#1a73e8",
-
+    google_blue_700: "#1967d2",
+    google_blue_800: "#185abc",
+    google_blue_900: "#174ea6",
+
+    google_green_50: "#e6f4ea",
+    google_green_100: "#ceead6",
+    google_green_200: "#a8dab5",
+    google_green_300: "#81c995",
+    google_green_400: "#5bb974",
+    google_green_500: "#34a853",
+    google_green_600: "#1e8e3e",
+    google_green_700: "#188038",
+    google_green_800: "#137333",
+    google_green_900: "#0d652d",
+
+    google_grey_50: "#f8f9fa",
+    google_grey_100: "#f1f3f4",
     google_grey_200: "#e8eaed",
+    google_grey_300: "#dadce0",
     google_grey_400: "#bdc1c6",
+    google_grey_500: "#9aa0a6",
     google_grey_600: "#80868b",
+    google_grey_700: "#5f6368",
     google_grey_800: "#3c4043",
     google_grey_900: "#202124",
 
+    google_red_50: "#fce8e6",
+    google_red_100: "#fad2cf",
+    google_red_200: "#f6aea9",
+    google_red_300: "#f28b82",
+    google_red_400: "#ee675c",
+    google_red_500: "#ea4335",
     google_red_600: "#d93025",
-
-    /* _refresh differentiate from polymer's color.html. */
-    google_blue_refresh_100: "#d2e3fc",
-    google_blue_refresh_300: "#8ab4f8",
-    google_blue_refresh_500: "#4285f4",
-
-    google_green_refresh_300: "#81c995",
-    google_green_refresh_700: "#188038",
-
-    google_grey_refresh_100: "#f1f3f4",
-    google_grey_refresh_300: "#dadce0",
-    google_grey_refresh_500: "#9aa0a6",
-    google_grey_refresh_700: "#5f6368",
-
-    google_red_refresh_300: "#f28b82",
-
-    google_yellow_refresh_300: "#fdd633",
-
-    /* Material Design color palette for Google products */
-
-    google_red_100: "#f4c7c3",
-    google_red_300: "#e67c73",
-    google_red_500: "#db4437",
-    google_red_700: "#c53929",
-
-    google_blue_100: "#c6dafc",
-    google_blue_300: "#7baaf7",
-    google_blue_500: "#4285f4",
-    google_blue_700: "#3367d6",
-
-    google_green_100: "#b7e1cd",
-    google_green_300: "#57bb8a",
-    google_green_500: "#0f9d58",
-    google_green_700: "#0b8043",
-
-    google_yellow_100: "#fce8b2",
-    google_yellow_300: "#f7cb4d",
-    google_yellow_500: "#f4b400",
-    google_yellow_700: "#f09300",
-
-    google_grey_100: "#f5f5f5",
-    google_grey_300: "#e0e0e0",
-    google_grey_500: "#9e9e9e",
-    google_grey_700: "#616161",
-
-    /* Material Design color palette from online spec document */
-
-    paper_red_50: "#ffebee",
-    paper_red_100: "#ffcdd2",
-    paper_red_200: "#ef9a9a",
-    paper_red_300: "#e57373",
-    paper_red_400: "#ef5350",
-    paper_red_500: "#f44336",
-    paper_red_600: "#e53935",
-    paper_red_700: "#d32f2f",
-    paper_red_800: "#c62828",
-    paper_red_900: "#b71c1c",
-    paper_red_a100: "#ff8a80",
-    paper_red_a200: "#ff5252",
-    paper_red_a400: "#ff1744",
-    paper_red_a700: "#d50000",
-
-    paper_pink_50: "#fce4ec",
-    paper_pink_100: "#f8bbd0",
-    paper_pink_200: "#f48fb1",
-    paper_pink_300: "#f06292",
-    paper_pink_400: "#ec407a",
-    paper_pink_500: "#e91e63",
-    paper_pink_600: "#d81b60",
-    paper_pink_700: "#c2185b",
-    paper_pink_800: "#ad1457",
-    paper_pink_900: "#880e4f",
-    paper_pink_a100: "#ff80ab",
-    paper_pink_a200: "#ff4081",
-    paper_pink_a400: "#f50057",
-    paper_pink_a700: "#c51162",
-
-    paper_purple_50: "#f3e5f5",
-    paper_purple_100: "#e1bee7",
-    paper_purple_200: "#ce93d8",
-    paper_purple_300: "#ba68c8",
-    paper_purple_400: "#ab47bc",
-    paper_purple_500: "#9c27b0",
-    paper_purple_600: "#8e24aa",
-    paper_purple_700: "#7b1fa2",
-    paper_purple_800: "#6a1b9a",
-    paper_purple_900: "#4a148c",
-    paper_purple_a100: "#ea80fc",
-    paper_purple_a200: "#e040fb",
-    paper_purple_a400: "#d500f9",
-    paper_purple_a700: "#aa00ff",
-
-    paper_deep_purple_50: "#ede7f6",
-    paper_deep_purple_100: "#d1c4e9",
-    paper_deep_purple_200: "#b39ddb",
-    paper_deep_purple_300: "#9575cd",
-    paper_deep_purple_400: "#7e57c2",
-    paper_deep_purple_500: "#673ab7",
-    paper_deep_purple_600: "#5e35b1",
-    paper_deep_purple_700: "#512da8",
-    paper_deep_purple_800: "#4527a0",
-    paper_deep_purple_900: "#311b92",
-    paper_deep_purple_a100: "#b388ff",
-    paper_deep_purple_a200: "#7c4dff",
-    paper_deep_purple_a400: "#651fff",
-    paper_deep_purple_a700: "#6200ea",
-
-    paper_indigo_50: "#e8eaf6",
-    paper_indigo_100: "#c5cae9",
-    paper_indigo_200: "#9fa8da",
-    paper_indigo_300: "#7986cb",
-    paper_indigo_400: "#5c6bc0",
-    paper_indigo_500: "#3f51b5",
-    paper_indigo_600: "#3949ab",
-    paper_indigo_700: "#303f9f",
-    paper_indigo_800: "#283593",
-    paper_indigo_900: "#1a237e",
-    paper_indigo_a100: "#8c9eff",
-    paper_indigo_a200: "#536dfe",
-    paper_indigo_a400: "#3d5afe",
-    paper_indigo_a700: "#304ffe",
-
-    paper_blue_50: "#e3f2fd",
-    paper_blue_100: "#bbdefb",
-    paper_blue_200: "#90caf9",
-    paper_blue_300: "#64b5f6",
-    paper_blue_400: "#42a5f5",
-    paper_blue_500: "#2196f3",
-    paper_blue_600: "#1e88e5",
-    paper_blue_700: "#1976d2",
-    paper_blue_800: "#1565c0",
-    paper_blue_900: "#0d47a1",
-    paper_blue_a100: "#82b1ff",
-    paper_blue_a200: "#448aff",
-    paper_blue_a400: "#2979ff",
-    paper_blue_a700: "#2962ff",
-
-    paper_light_blue_50: "#e1f5fe",
-    paper_light_blue_100: "#b3e5fc",
-    paper_light_blue_200: "#81d4fa",
-    paper_light_blue_300: "#4fc3f7",
-    paper_light_blue_400: "#29b6f6",
-    paper_light_blue_500: "#03a9f4",
-    paper_light_blue_600: "#039be5",
-    paper_light_blue_700: "#0288d1",
-    paper_light_blue_800: "#0277bd",
-    paper_light_blue_900: "#01579b",
-    paper_light_blue_a100: "#80d8ff",
-    paper_light_blue_a200: "#40c4ff",
-    paper_light_blue_a400: "#00b0ff",
-    paper_light_blue_a700: "#0091ea",
-
-    paper_cyan_50: "#e0f7fa",
-    paper_cyan_100: "#b2ebf2",
-    paper_cyan_200: "#80deea",
-    paper_cyan_300: "#4dd0e1",
-    paper_cyan_400: "#26c6da",
-    paper_cyan_500: "#00bcd4",
-    paper_cyan_600: "#00acc1",
-    paper_cyan_700: "#0097a7",
-    paper_cyan_800: "#00838f",
-    paper_cyan_900: "#006064",
-    paper_cyan_a100: "#84ffff",
-    paper_cyan_a200: "#18ffff",
-    paper_cyan_a400: "#00e5ff",
-    paper_cyan_a700: "#00b8d4",
-
-    paper_teal_50: "#e0f2f1",
-    paper_teal_100: "#b2dfdb",
-    paper_teal_200: "#80cbc4",
-    paper_teal_300: "#4db6ac",
-    paper_teal_400: "#26a69a",
-    paper_teal_500: "#009688",
-    paper_teal_600: "#00897b",
-    paper_teal_700: "#00796b",
-    paper_teal_800: "#00695c",
-    paper_teal_900: "#004d40",
-    paper_teal_a100: "#a7ffeb",
-    paper_teal_a200: "#64ffda",
-    paper_teal_a400: "#1de9b6",
-    paper_teal_a700: "#00bfa5",
-
-    paper_green_50: "#e8f5e9",
-    paper_green_100: "#c8e6c9",
-    paper_green_200: "#a5d6a7",
-    paper_green_300: "#81c784",
-    paper_green_400: "#66bb6a",
-    paper_green_500: "#4caf50",
-    paper_green_600: "#43a047",
-    paper_green_700: "#388e3c",
-    paper_green_800: "#2e7d32",
-    paper_green_900: "#1b5e20",
-    paper_green_a100: "#b9f6ca",
-    paper_green_a200: "#69f0ae",
-    paper_green_a400: "#00e676",
-    paper_green_a700: "#00c853",
-
-    paper_light_green_50: "#f1f8e9",
-    paper_light_green_100: "#dcedc8",
-    paper_light_green_200: "#c5e1a5",
-    paper_light_green_300: "#aed581",
-    paper_light_green_400: "#9ccc65",
-    paper_light_green_500: "#8bc34a",
-    paper_light_green_600: "#7cb342",
-    paper_light_green_700: "#689f38",
-    paper_light_green_800: "#558b2f",
-    paper_light_green_900: "#33691e",
-    paper_light_green_a100: "#ccff90",
-    paper_light_green_a200: "#b2ff59",
-    paper_light_green_a400: "#76ff03",
-    paper_light_green_a700: "#64dd17",
-
-    paper_lime_50: "#f9fbe7",
-    paper_lime_100: "#f0f4c3",
-    paper_lime_200: "#e6ee9c",
-    paper_lime_300: "#dce775",
-    paper_lime_400: "#d4e157",
-    paper_lime_500: "#cddc39",
-    paper_lime_600: "#c0ca33",
-    paper_lime_700: "#afb42b",
-    paper_lime_800: "#9e9d24",
-    paper_lime_900: "#827717",
-    paper_lime_a100: "#f4ff81",
-    paper_lime_a200: "#eeff41",
-    paper_lime_a400: "#c6ff00",
-    paper_lime_a700: "#aeea00",
-
-    paper_yellow_50: "#fffde7",
-    paper_yellow_100: "#fff9c4",
-    paper_yellow_200: "#fff59d",
-    paper_yellow_300: "#fff176",
-    paper_yellow_400: "#ffee58",
-    paper_yellow_500: "#ffeb3b",
-    paper_yellow_600: "#fdd835",
-    paper_yellow_700: "#fbc02d",
-    paper_yellow_800: "#f9a825",
-    paper_yellow_900: "#f57f17",
-    paper_yellow_a100: "#ffff8d",
-    paper_yellow_a200: "#ffff00",
-    paper_yellow_a400: "#ffea00",
-    paper_yellow_a700: "#ffd600",
-
-    paper_amber_50: "#fff8e1",
-    paper_amber_100: "#ffecb3",
-    paper_amber_200: "#ffe082",
-    paper_amber_300: "#ffd54f",
-    paper_amber_400: "#ffca28",
-    paper_amber_500: "#ffc107",
-    paper_amber_600: "#ffb300",
-    paper_amber_700: "#ffa000",
-    paper_amber_800: "#ff8f00",
-    paper_amber_900: "#ff6f00",
-    paper_amber_a100: "#ffe57f",
-    paper_amber_a200: "#ffd740",
-    paper_amber_a400: "#ffc400",
-    paper_amber_a700: "#ffab00",
-
-    paper_orange_50: "#fff3e0",
-    paper_orange_100: "#ffe0b2",
-    paper_orange_200: "#ffcc80",
-    paper_orange_300: "#ffb74d",
-    paper_orange_400: "#ffa726",
-    paper_orange_500: "#ff9800",
-    paper_orange_600: "#fb8c00",
-    paper_orange_700: "#f57c00",
-    paper_orange_800: "#ef6c00",
-    paper_orange_900: "#e65100",
-    paper_orange_a100: "#ffd180",
-    paper_orange_a200: "#ffab40",
-    paper_orange_a400: "#ff9100",
-    paper_orange_a700: "#ff6500",
-
-    paper_deep_orange_50: "#fbe9e7",
-    paper_deep_orange_100: "#ffccbc",
-    paper_deep_orange_200: "#ffab91",
-    paper_deep_orange_300: "#ff8a65",
-    paper_deep_orange_400: "#ff7043",
-    paper_deep_orange_500: "#ff5722",
-    paper_deep_orange_600: "#f4511e",
-    paper_deep_orange_700: "#e64a19",
-    paper_deep_orange_800: "#d84315",
-    paper_deep_orange_900: "#bf360c",
-    paper_deep_orange_a100: "#ff9e80",
-    paper_deep_orange_a200: "#ff6e40",
-    paper_deep_orange_a400: "#ff3d00",
-    paper_deep_orange_a700: "#dd2c00",
-
-    paper_brown_50: "#efebe9",
-    paper_brown_100: "#d7ccc8",
-    paper_brown_200: "#bcaaa4",
-    paper_brown_300: "#a1887f",
-    paper_brown_400: "#8d6e63",
-    paper_brown_500: "#795548",
-    paper_brown_600: "#6d4c41",
-    paper_brown_700: "#5d4037",
-    paper_brown_800: "#4e342e",
-    paper_brown_900: "#3e2723",
-
-    paper_grey_50: "#fafafa",
-    paper_grey_100: "#f5f5f5",
-    paper_grey_200: "#eeeeee",
-    paper_grey_300: "#e0e0e0",
-    paper_grey_400: "#bdbdbd",
-    paper_grey_500: "#9e9e9e",
-    paper_grey_600: "#757575",
-    paper_grey_700: "#616161",
-    paper_grey_800: "#424242",
-    paper_grey_900: "#212121",
-
-    paper_blue_grey_50: "#eceff1",
-    paper_blue_grey_100: "#cfd8dc",
-    paper_blue_grey_200: "#b0bec5",
-    paper_blue_grey_300: "#90a4ae",
-    paper_blue_grey_400: "#78909c",
-    paper_blue_grey_500: "#607d8b",
-    paper_blue_grey_600: "#546e7a",
-    paper_blue_grey_700: "#455a64",
-    paper_blue_grey_800: "#37474f",
-    paper_blue_grey_900: "#263238",
+    google_red_700: "#c5221f",
+    google_red_800: "#b31412",
+    google_red_900: "#a50e0e",
+
+    google_yellow_50: "#fef7e0",
+    google_yellow_100: "#feefc3",
+    google_yellow_200: "#fde293",
+    google_yellow_300: "#fdd663",
+    google_yellow_400: "#fcc934",
+    google_yellow_500: "#fbbc04",
+    google_yellow_600: "#f9ab00",
+    google_yellow_700: "#f29900",
+    google_yellow_800: "#ea8600",
+    google_yellow_900: "#e37400",
   }
 }