[style_var_gen] Integrate into OS Settings.

This CL replaces cros_colors and cros_palette the new JSON5 generated color format. This CL also adds GN generation targets and plumbs the generated CSS file through to OS Settings. Bug: 1018654 Change-Id: I5ef6b3f76c48aa59eac54163b085cd555b18369a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2035483 Commit-Queue: calamity <calamity@chromium.org> Reviewed-by: Giovanni Ortuño Urquidi <ortuno@chromium.org> Cr-Commit-Position: refs/heads/master@{#746264}

[style_var_gen] Integrate into OS Settings.
This CL replaces cros_colors and cros_palette the new JSON5 generated color format. This CL also adds GN generation targets and plumbs the generated CSS file through to OS Settings. Bug: 1018654 Change-Id: I5ef6b3f76c48aa59eac54163b085cd555b18369a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2035483 Commit-Queue: calamity <calamity@chromium.org> Reviewed-by: Giovanni Ortuño Urquidi <ortuno@chromium.org> Cr-Commit-Position: refs/heads/master@{#746264}
a8b24c14 · Christopher Lam · Commit Bot · 39db88fd · a8b24c14 · a8b24c14
Commit a8b24c14 authored Mar 03, 2020 by Christopher Lam Committed by Commit Bot Mar 03, 2020
12 changed files
--- a/chrome/browser/resources/chromeos/crostini_upgrader/index.html
+++ b/chrome/browser/resources/chromeos/crostini_upgrader/index.html
@@ -8,7 +8,7 @@
    }
  </style>
  <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
-  <link rel="stylesheet" href="chrome://resources/css/cros_colors.css">
+  <link rel="stylesheet" href="chrome://resources/css/cros_colors.generated.css">
  <script type="module" src="app.js"></script>
 </head>
 <body>

--- a/chrome/browser/resources/settings/chromeos/BUILD.gn
+++ b/chrome/browser/resources/settings/chromeos/BUILD.gn
@@ -29,6 +29,8 @@ if (optimize_webui) {
      "lazy_load.crisper.js",
    ]
    excludes = [
+      # TODO(calamity): Update optimize_webui to handle generated files.
+      "chrome://resources/css/cros_colors.generated.css",
      "chrome://resources/mojo/chromeos/services/network_config/public/mojom/cros_network_config.mojom.html",
      "chrome://os-settings/app-management/app_management.mojom-lite.js",
      "chrome://os-settings/app-management/bitmap.mojom-lite.js",

--- a/chrome/browser/resources/settings/chromeos/os_settings.html
+++ b/chrome/browser/resources/settings/chromeos/os_settings.html
@@ -7,8 +7,7 @@
 <if expr="not optimize_webui">
  <base href="chrome://os-settings">
 </if>
-  <link rel="stylesheet" href="chrome://resources/css/cros_palette.css">
+  <link rel="stylesheet" href="chrome://resources/css/cros_colors.generated.css">
-  <link rel="stylesheet" href="chrome://resources/css/cros_colors.css">
  <style>
    html {
      background-color: var(--cros-default-bg-color);

--- a/tools/style_variable_generator/colors_test.json5
+++ b/tools/style_variable_generator/colors_test.json5
 {
-  "colors": {
+  colors: {
-    "google_grey_900": "#202124",
+    google_grey_900: "#202124",
-    "cros_default_text_color": {
+    cros_default_text_color: {
-      "light": "$google_grey_900",
+      light: "$google_grey_900",
-      "dark": "rgb(255, 255, 255)",
+      dark: "rgb(255, 255, 255)",
    },
-    "cros_toggle_color": {
+    cros_toggle_color: {
-      "light": "rgba($cros_default_text_color_rgb, 0.1)"
+      light: "rgba($cros_default_text_color_rgb, 0.1)"
    }
  },
 }
--- a/tools/style_variable_generator/style_variable_generator.gni
+++ b/tools/style_variable_generator/style_variable_generator.gni
+# 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.
+# Generates cross-language style definitions from json5 files. The output files
+# will go under the generated file directory tree with the same path as each
+# input file.
+#
+# For input format examples, see the *_test.json5 files which contain
+# illustrations of each feature, as well as expected outputs in the
+# corresponding *_test_expected.* files.
+#
+# Other targets should depend on one of these generated targets (where "foo"
+# is the target name):
+#
+#    foo_css
+#      CSS Variables
+template("style_variable_generator") {
+  original_target_name = target_name
+  action("${target_name}_css") {
+    script = "//tools/style_variable_generator/style_variable_generator.py"
+    forward_variables_from(invoker,
+                           [
+                             "deps",
+                             "sources",
+                           ])
+    inputs = [
+      "//tools/style_variable_generator/base_generator.py",
+      "//tools/style_variable_generator/css_generator.py",
+      "//tools/style_variable_generator/css_generator.tmpl",
+    ]
+    out_file = "$target_gen_dir/${original_target_name}.generated.css"
+    outputs = [ out_file ]
+    args = [
+             "--generator=CSS",
+             "--out-file",
+             rebase_path("$out_file", root_build_dir),
+           ] + rebase_path(sources, root_build_dir)
+  }
+}
--- a/ui/resources/BUILD.gn
+++ b/ui/resources/BUILD.gn
@@ -40,6 +40,9 @@ grit("webui_resources_grd") {
  source = "../webui/resources/webui_resources.grd"
  deps = [ "//ui/webui/resources:modulize" ]
+  if (is_chromeos) {
+    deps += [ "//ui/webui/resources/css:cros_colors_css" ]
+  }
  # The .grd contains references to generated files.
  source_is_generated = true

--- a/ui/webui/resources/css/BUILD.gn
+++ b/ui/webui/resources/css/BUILD.gn
+# 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.
+import("//tools/style_variable_generator/style_variable_generator.gni")
+style_variable_generator("cros_colors") {
+  sources = [
+    "cros_colors.json5",
+    "cros_palette.json5",
+  ]
+}
--- 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. */
-/*
- * 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);
-  --cros-default-bg-color: #fff;
-  --cros-default-toolbar-bg-color: #fff;
-  --cros-default-toolbar-search-bg-color: var(--google-grey-refresh-100);
-  --cros-default-button-color-rgb: var(--google-blue-600-rgb);
-  --cros-default-button-color: rgb(var(--cros-default-button-color-rgb));
-  --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);
-  /* TODO(crbug.com/1018654): Extract more unified 'inactive' colors */
-  --cros-toggle-color-rgb: var(--cros-default-button-color-rgb);
-  --cros-toggle-color: rgb(var(--cros-toggle-color-rgb));
-  --cros-toggle-bg-color-inactive: var(--google-grey-400);
-  --cros-toggle-button-color-inactive: #fff;
-  --cros-toggle-ripple-color: rgba(var(--cros-toggle-color-rgb), .2);
-  --cros-toggle-ripple-color-inactive: rgba(var(--google-grey-600-rgb), .15);
-  --cros-radio-button-color-rgb: var(--cros-default-button-color-rgb);
-  --cros-radio-button-color: rgb(var(--cros-radio-button-color-rgb));
-  --cros-radio-button-ripple-color:
-      rgba(var(--cros-radio-button-color-rgb), .2);
-  --cros-radio-button-color-unchecked: var(--google-grey-refresh-700);
-  --cros-radio-button-ripple-color-unchecked:
-      rgba(var(--google-grey-600-rgb), .15);
-  --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 */
--- a/ui/webui/resources/css/cros_colors.json5
+++ b/ui/webui/resources/css/cros_colors.json5
+/* 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. */
+/*
+ * Chrome OS semantic colors.
+ *
+ * All colors used in Chrome OS WebUIs and System Web Apps should be
+ * semantically represented here.
+ */
+{
+  colors: {
+    /*
+     * Recommended colors.
+     */
+    cros_default_text_color: "$google_grey_900",
+    cros_default_text_color_secondary: "$google_grey_refresh_700",
+    cros_default_bg_color: "#ffffff",
+    cros_default_toolbar_bg_color: "#ffffff",
+    cros_default_toolbar_search_bg_color: "$google_grey_refresh_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_outline_color_focused: "$google_blue_600",
+    cros_toggle_color: "$cros_default_button_color",
+    cros_toggle_bg_color_inactive: "$google_grey_400",
+    cros_toggle_button_color_inactive: "#ffffff",
+    cros_toggle_ripple_color: "rgba($cros_toggle_color_rgb, .2)",
+    cros_toggle_ripple_color_inactive: "rgba($google_grey_600_rgb, .15)",
+    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_ripple_color_unchecked: "rgba($google_grey_600_rgb, .15)",
+    cros_separator_color: "rgba(0, 0, 0, 0.12)",
+    cros_link_color: "$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: "$google_red_700",
+    cros_success_color: "$google_green_refresh_700",
+    cros_search_page_question_icon_color: "$google_grey_refresh_500",
+    cros_app_management_permission_icon_color: "$paper_grey_600",
+    cros_user_icon_color_secondary: "rgb(210, 210, 212)",
+  },
+}
--- a/ui/webui/resources/css/cros_palette.css
+++ b/ui/webui/resources/css/cros_palette.css
--- a/ui/webui/resources/css/cros_palette.json5
+++ b/ui/webui/resources/css/cros_palette.json5
--- a/ui/webui/resources/webui_resources.grd
+++ b/ui/webui/resources/webui_resources.grd
@@ -220,11 +220,8 @@ without changes to the corresponding grd file. -->
      <if expr="chromeos">
        <structure name="IDR_WEBUI_CSS_CROS_COLORS"
-                   file="css/cros_colors.css" type="chrome_html"
+                   file="${root_gen_dir}/ui/webui/resources/css/cros_colors.generated.css" type="chrome_html"
-                   compress="gzip" />
+                   use_base_dir="false" compress="gzip" />
-        <structure name="IDR_WEBUI_CSS_CROS_PALETTE"
-                   file="css/cros_palette.css" type="chrome_html"
-                   compress="gzip" />
      </if>
      <structure name="IDR_WEBUI_HTML_CR"