[OS Settings] Centralize all colors into cros_colors.css.

Bug: 1018654
Change-Id: I538746e3650bfb21a12092b8fb550c5d74eb7fad
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1913944Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: calamity <calamity@chromium.org>
Cr-Commit-Position: refs/heads/master@{#716088}

chrome/browser/resources/settings/chromeos/os_about_page/os_about_page.html

@@ -60,11 +60,11 @@
       }
 
       iron-icon[icon='settings:check-circle'] {
-        fill: var(--cr-checked-color);
+        fill: var(--cros-default-button-color);
       }
 
       iron-icon[icon='cr:error'] {
-        fill: var(--settings-error-color);
+        fill: var(--cros-error-color);
       }
 
       .settings-box .start {

chrome/browser/resources/settings/chromeos/os_apps_page/app_management_page/app_item.html

@@ -12,7 +12,7 @@
       :host {
         align-items: center;
         border-bottom: var(--card-separator);
-        color: var(--primary-text-color);
+        color: var(--cros-default-text-color);
         cursor: pointer;
         display: flex;
         flex-direction: row;

chrome/browser/resources/settings/chromeos/os_apps_page/app_management_page/shared_style.html

 <link rel="import" href="shared_vars.html">
-<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 
 <!-- Common styles for App Management. -->
 <dom-module id="app-management-shared-css">
@@ -8,7 +8,7 @@
     <style include="cr-shared-style">
       .card-container {
         @apply --cr-card-elevation;
-        background-color: #fff;
+        background-color: var(--cros-default-bg-color);
         border-radius: var(--cr-card-border-radius);
         display: flex;
         flex-direction: column;

chrome/browser/resources/settings/chromeos/os_apps_page/app_management_page/shared_vars.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
 
 <custom-style>
 <style>
@@ -10,18 +9,17 @@
     --app-management-line-height: 1.54; /* 20px */
     --card-max-width: 676px;
     --card-min-width: 550px;
-    --card-separator: 1px solid rgba(0, 0, 0, 0.12);
-    --control-separator-color: rgb(218, 220, 224);
+    --card-separator: 1px solid var(--cros-separator-color);
     --expanded-permission-row-height: 48px;
     --header-font-weight: 500;
-    --header-text-color: #5A5A5A;
-    --permission-icon-color: #757575;
+    --header-text-color: var(--cros-default-text-color-secondary);
+    --permission-icon-color: var(--cros-app-management-permission-icon-color);
     --permission-icon-padding: 20px;
     --permission-list-item-height: 48px;
-    --primary-text-color: rgba(0, 0, 0, 0.87);
+    --primary-text-color: var(--cros-default-text-color);
     --row-item-icon-padding: 12px;
     --secondary-font-weight: 400;
-    --secondary-text-color: rgba(0, 0, 0, 0.54);
+    --secondary-text-color: var(--cros-default-text-color-secondary);
     --text-permission-list-row-height: 40px;
   }
 </style>

chrome/browser/resources/settings/chromeos/os_languages_page/os_languages_page.html

@@ -36,17 +36,11 @@
       }
 
       .explain-selected {
-        color: var(--google-green-refresh-700);
+        color: var(--cros-success-color);
         font-weight: initial;
         margin-top: 4px;
       }
 
-      @media (prefers-color-scheme: dark) {
-        .explain-selected {
-          color: var(--google-green-refresh-300);
-        }
-      }
-
       cr-action-menu.complex .dropdown-item {
         min-height: 36px;
       }
@@ -93,20 +87,13 @@
       }
 
       .name-with-error-list div {
-        /* TODO(dbeam): does this need to differ from --settings-error-color? */
-        color: var(--google-red-500);
+        color: var(--cros-error-color);
         margin-top: 8px;
       }
 
-      @media (prefers-color-scheme: dark) {
-        .name-with-error-list div {
-          color: var(--settings-error-color);
-        }
-      }
-
       iron-icon[icon='cr:error'] {
         @apply --cr-icon-height-width;
-        --iron-icon-fill-color: var(--settings-error-color);
+        --iron-icon-fill-color: var(--cros-error-color);
         margin-inline-end: 8px;
       }
 

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

@@ -57,7 +57,7 @@
 
       #sync-setup {
         --cr-secondary-text: {
-          color: var(--settings-error-color);
+          color: var(--cros-error-color);
         }
       }
 

chrome/browser/resources/settings/chromeos/os_search_page/os_search_page.html

@@ -38,7 +38,7 @@
       }
 
       iron-icon {
-        --iron-icon-fill-color: var(--google-grey-refresh-500);
+        --iron-icon-fill-color: var(--cros-search-page-question-icon-color);
       }
 
       cr-policy-pref-indicator {

chrome/browser/resources/settings/chromeos/os_settings_menu/os_settings_menu.html

@@ -16,9 +16,9 @@
   <template>
     <style include="settings-shared">
       :host {
-        --menu-link-color: var(--google-blue-600);
-        --menu-text-color: var(--google-grey-refresh-700);
-        --menu-icon-color: var(--google-grey-refresh-700);
+        --menu-link-color: var(--cros-default-button-color);
+        --menu-text-color: var(--cros-default-text-color-secondary);
+        --menu-icon-color: var(--cros-default-text-color-secondary);
         /* The tap target extends slightly above each visible menu item. */
         --tap-target-padding: 3px;
         /* Width of the keyboard focus border. */
@@ -74,16 +74,16 @@
       }
 
       a.iron-selected > .item {
-        background-color: var(--google-blue-50);
+        background-color: var(--cros-menu-button-bg-color-active);
         color: var(--menu-link-color);
       }
 
       :host-context(.focus-outline-visible) a:focus > .item {
-        border-color: var(--google-blue-600);
+        border-color: var(--cros-menu-button-outline-color-focused);
       }
 
       a:hover:not(.iron-selected) > .item {
-        background-color: var(--google-grey-refresh-100);
+        background-color: var(--cros-menu-button-bg-color-hover);
       }
 
       iron-icon {

chrome/browser/resources/settings/chromeos/os_settings_page/os_settings_page.html

@@ -34,7 +34,7 @@
 
       .banner {
         align-items: center;
-        background-color: var(--cr-card-background-color);
+        background-color: var(--cros-default-bg-color);
         border: var(--cr-hairline);
         border-radius: var(--cr-card-border-radius);
         display: flex;
@@ -62,7 +62,7 @@
       }
 
       #browserSettingsBanner {
-        color: var(--cr-secondary-text-color);
+        color: var(--cros-default-text-color-secondary);
         font-weight: 500;
       }
 
@@ -71,14 +71,12 @@
       }
 
       #openInNewBrowserSettingsIcon {
-        fill: var(--cr-link-color);
+        fill: var(--cros-link-color);
         margin-inline-start: 0;
       }
 
       #secondaryUserIcon {
-        /* TODO(stevenjb): Replace this with the correct variable or color once
-         * established by UX, see crbug.com/687749. */
-        background-color : rgb(210, 210, 212);
+        background-color : var(--cros-user-icon-color-secondary);
         background-image: url(chrome://theme/IDR_SECONDARY_USER_SETTINGS);
         background-position: center;
         background-repeat: no-repeat;
@@ -89,7 +87,7 @@
 
       #toggleContainer {
         align-items: center;
-        color: var(--cr-primary-text-color);
+        color: var(--cros-default-text-color);
         display: flex;
         font: inherit;
         justify-content: center;

ui/webui/resources/css/cros_colors.css

@@ -2,7 +2,16 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
+/*
+Chrome OS semantic colors.
+
+All colors used in Chrome OS WebUIs and System Web Apps should be semantically
+represented here.
+*/
 html {
+  /**
+   * Recommended colors.
+   */
   --cros-default-text-color: var(--google-grey-900);
   --cros-default-text-color-secondary: var(--google-grey-refresh-700);
 
@@ -10,6 +19,35 @@ html {
 
   --cros-default-toolbar-bg-color: #fff;
   --cros-default-toolbar-search-bg-color: var(--google-grey-refresh-100);
+
+  --cros-default-button-color: var(--google-blue-600);
+
+  --cros-menu-button-bg-color-active: var(--google-blue-50);
+  --cros-menu-button-bg-color-hover: var(--google-grey-refresh-100);
+  --cros-menu-button-outline-color-focused: var(--google-blue-600);
+
+  --cros-separator-color: rgba(0, 0, 0, 0.12);
+
+  --cros-link-color: var(--google-blue-700);
+
+  /*
+   * One-offs.
+   *
+   * List your project's one-off colors below here. If a semantic color comes
+   * up repeatedly, consider speaking to UX about pulling out a common
+   * variable above.
+   */
+
+  /* OS Settings */
+  --cros-error-color: var(--google-red-700);
+  --cros-success-color: var(--google-green-refresh-700);
+
+  --cros-search-page-question-icon-color: var(--google-grey-refresh-500);
+  --cros-app-management-permission-icon-color: var(--paper-grey-600);
+
+  /* TODO(stevenjb): Replace this with the correct variable or color once
+   * established by UX, see crbug.com/687749. */
+  --cros-user-icon-color-secondary: rgb(210, 210, 212);
 }
 
 /* TODO(crbug.com/1018654): Implement dark mode overrides */