[CrOS WebUI] Add cros_colors.css and use for os-settings-ui.

This CL adds a semantic color file which will be used across all ChromeOS WebUIs such as System Web Apps and System Dialogs. As a strawman, some top-level OS Settings styles have been replaced. Bug: 1018654 Change-Id: Id06fe0a1ae6366e6e990c10f4ee004b330829b7e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1880358Reviewed-by: Kyle Horimoto <khorimoto@chromium.org> Reviewed-by: Dan Beam <dbeam@chromium.org> Commit-Queue: calamity <calamity@chromium.org> Cr-Commit-Position: refs/heads/master@{#713346}

[CrOS WebUI] Add cros_colors.css and use for os-settings-ui.
This CL adds a semantic color file which will be used across all ChromeOS WebUIs such as System Web Apps and System Dialogs. As a strawman, some top-level OS Settings styles have been replaced. Bug: 1018654 Change-Id: Id06fe0a1ae6366e6e990c10f4ee004b330829b7e Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1880358Reviewed-by: Kyle Horimoto <khorimoto@chromium.org> Reviewed-by: Dan Beam <dbeam@chromium.org> Commit-Queue: calamity <calamity@chromium.org> Cr-Commit-Position: refs/heads/master@{#713346}
8e7f4fc5 · Christopher Lam · Commit Bot · e98b447c · 8e7f4fc5 · 8e7f4fc5
Commit 8e7f4fc5 authored Nov 07, 2019 by Christopher Lam Committed by Commit Bot Nov 07, 2019
5 changed files
--- a/chrome/browser/resources/settings/chromeos/os_settings.html
+++ b/chrome/browser/resources/settings/chromeos/os_settings.html
@@ -7,24 +7,14 @@
 <if expr="not optimize_webui">
  <base href="chrome://os-settings">
 </if>
-  <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
+  <link rel="stylesheet" href="chrome://resources/css/cros_colors.css">
  <style>
    html {
-      background-color: #fff;
+      background-color: var(--cros-default-bg-color);
      overflow: hidden;
      /* Remove 300ms delay for 'click' event, when using touch interface. */
      touch-action: manipulation;
    }
-
-    html.loading::before {
-      /* TODO(hsuregan): update for dark mode when needed. */
-      background-color: #fff;
-      border-bottom: var(--md-toolbar-border);
-      box-sizing: border-box;
-      content: '';
-      display: block;
-      height: var(--md-toolbar-height);
-    }
  </style>
 </head>
 <body>

--- a/chrome/browser/resources/settings/chromeos/os_settings_ui/os_settings_ui.html
+++ b/chrome/browser/resources/settings/chromeos/os_settings_ui/os_settings_ui.html
@@ -40,18 +40,13 @@
      os-toolbar {
        @apply --layout-center;
        /* TODO(hsuregan): update for dark mode when needed. */
-        background-color: white;
-        color: var(--cr-secondary-text-color);
        min-height: 56px;
        z-index: 2;
-        --cr-toolbar-search-field-background: var(--google-grey-refresh-100);
-        --cr-toolbar-search-field-border-radius: 4px;
-        --cr-toolbar-search-field-input-color: var(--google-grey-refresh-700);
      }

      cr-drawer {
        --cr-separator-line: none;
-        --cr-drawer-header-color: var(--google-grey-refresh-700);
+        --cr-drawer-header-color: var(--cros-default-text-color-secondary);
        --cr-drawer-header-font-weight: 500;
        --cr-drawer-header-padding: 20px;
      }

--- a/chrome/browser/resources/settings/chromeos/os_toolbar/os_toolbar.html
+++ b/chrome/browser/resources/settings/chromeos/os_toolbar/os_toolbar.html
@@ -12,9 +12,14 @@
  <template>
    <style include="cr-icons cr-hidden-style">
      :host {
+        --cr-toolbar-search-field-background:
+            var(--cros-default-toolbar-search-bg-color);
+        --cr-toolbar-search-field-border-radius: 4px;
+        --cr-toolbar-search-field-input-color:
+            var(--cros-default-text-color-secondary);
        align-items: center;
-        background-color: var(--google-blue-700);
-        color: #fff;
+        background-color: var(--cros-default-toolbar-bg-color);
+        color: var(--cros-default-text-color-secondary);
        display: flex;
        height: var(--cr-toolbar-height);
      }

--- a/ui/webui/resources/css/cros_colors.css
+++ b/ui/webui/resources/css/cros_colors.css
+/* Copyright 2019 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. */
+
+html {
+  --cros-default-text-color: var(--google-grey-900);
+  --cros-default-text-color-secondary: var(--google-grey-refresh-700);
+
+  --cros-default-bg-color: #fff;
+
+  --cros-default-toolbar-bg-color: #fff;
+  --cros-default-toolbar-search-bg-color: var(--google-grey-refresh-100);
+}
+
+/* TODO(crbug.com/1018654): Implement dark mode overrides */
--- a/ui/webui/resources/webui_resources.grd
+++ b/ui/webui/resources/webui_resources.grd
@@ -207,6 +207,9 @@ without changes to the corresponding grd file. -->
                 compress="gzip" />

      <if expr="chromeos">
+        <structure name="IDR_WEBUI_CSS_CROS_COLORS"
+                   file="css/cros_colors.css" type="chrome_html"
+                   compress="gzip" />
        <structure name="IDR_WEBUI_HTML_CHROMEOS_ONC_MOJO"
                   file="html/chromeos/onc_mojo.html" type="chrome_html"
                   compress="gzip" />