[style_var_gen] Integrate with Files App dialogs.

This CL adds the Chrome OS Semantic Colors to the Files App file
deletion dialog.

Button styles have been added for both light and dark mode which support
the system color scheme.

A try/catch has been added to progress_center_panel.js due to CORS
violations when iterating over all stylesheets since we now have a
cross-origin stylesheet.

Bug: 1018654, 1060060
Change-Id: Id8fe0f0bbfd3e1188b1d31575ff16d48601b6eb5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2086380
Commit-Queue: calamity <calamity@chromium.org>
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#752725}

ui/file_manager/file_manager/foreground/css/common.css

@@ -150,6 +150,7 @@ cr-menu.chrome-menu > [checked]::before {
 }
 
 .cr-dialog-buttons > button {
+  border-radius: 4px;
   font-weight: 500;
   margin-inline-end: 0;
   margin-inline-start: 5px;
@@ -161,24 +162,40 @@ cr-menu.chrome-menu > [checked]::before {
 
 .cr-dialog-buttons > button.cr-dialog-ok,
 .cr-dialog-buttons > button.cr-dialog-ok:hover {
-  background-color: rgb(51, 103, 214);
-  color: white;
+  background-color: var(--cros-default-button-background-color-primary);
+  color: var(--cros-default-button-label-color-primary);
   order: 1;
 }
 
+.cr-dialog-buttons > button.cr-dialog-ok:hover {
+  background:
+      linear-gradient(var(--cros-default-button-background-color-primary-hover-overlay),
+                      var(--cros-default-button-background-color-primary-hover-overlay)),
+              var(--cros-default-button-background-color-primary);
+}
+
+.cr-dialog-buttons > button.cr-dialog-ok[disabled],
+.cr-dialog-buttons > button.cr-dialog-ok[disabled]:hover {
+  background-color:
+      var(--cros-default-button-background-color-primary-disabled);
+  color: var(--cros-default-button-label-color-primary-disabled`);
+}
+
 .cr-dialog-buttons > button.cr-dialog-cancel {
-  color: rgb(100, 100, 100);
+  border: 1px solid var(--cros-default-button-stroke-color-secondary);
+  color: var(--cros-default-button-label-color-secondary);
   order: 0;
 }
 
 .cr-dialog-buttons > button.cr-dialog-cancel:hover {
-  color: rgb(51, 103, 214);
+  background: var(--cros-default-button-background-color-secondary-hover);
 }
 
-.cr-dialog-buttons > button[disabled],
-.cr-dialog-buttons > button[disabled]:hover {
-  background-color: rgb(234, 234, 234);
-  color: rgb(168, 168, 168);
+
+.cr-dialog-buttons > button.cr-dialog-cancel[disabled],
+.cr-dialog-buttons > button.cr-dialog-cancel[disabled]:hover  {
+  border: 1px solid var(--cros-default-button-stroke-color-secondary-disabled);
+  color: var(--cros-default-button-label-color-secondary-disabled);
 }
 
 .cr-dialog-buttons > button:focus:not(:active) {
@@ -230,11 +247,11 @@ html[dir='rtl'] .entry-name {
 }
 
 .cr-dialog-frame {
-  background-color: white;
+  background-color: var(--cros-default-bg-color);
   border-radius: 2px;
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
               0 2px 6px 0 rgba(0, 0, 0, 0.1);
-  color: rgb(34, 34, 34);
+  color: var(--cros-default-text-color);
   cursor: default;
   display: flex;
   flex-direction: column;
@@ -298,7 +315,7 @@ html[dir='rtl'] .entry-name {
 
 .cr-dialog-text,
 .cr-dialog-title {
-  color: black;
+  color: var(--cros-default-text-color);
   overflow: hidden;
   text-overflow: ellipsis;
 }

ui/file_manager/file_manager/foreground/js/ui/progress_center_panel.js

@@ -302,10 +302,24 @@ class ProgressCenterPanel {
   static getToggleAnimation_(document) {
     for (let i = 0; i < document.styleSheets.length; i++) {
       const styleSheet = document.styleSheets[i];
-      for (let j = 0; j < styleSheet.cssRules.length; j++) {
+      let rules = null;
+      // External stylesheets may not be accessible due to CORS restrictions.
+      // This try/catch is the only way avoid an exception when iterating over
+      // stylesheets that include chrome://resources.
+      // See https://crbug.com/775525/ for details.
+      try {
+        rules = styleSheet.cssRules;
+      } catch (err) {
+        if (err.name == 'SecurityError') {
+          continue;
+        }
+        throw err;
+      }
+
+      for (let j = 0; j < rules.length; j++) {
         // HACK: closure does not define experimental CSSRules.
         const keyFramesRule = CSSRule.KEYFRAMES_RULE || 7;
-        const rule = styleSheet.cssRules[j];
+        const rule = rules[j];
         if (rule.type === keyFramesRule &&
             rule.name === 'progress-center-toggle') {
           return rule;

ui/file_manager/file_manager/main.html

@@ -14,6 +14,7 @@
     <link rel="import" href="chrome://resources/html/polymer.html">
     <link rel="stylesheet" href="chrome://resources/css/action_link.css">
     <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
+    <link rel="stylesheet" href="chrome://resources/css/cros_colors.generated.css">
     <link rel="stylesheet" href="foreground/css/list.css">
     <link rel="stylesheet" href="foreground/css/table.css">
     <link rel="stylesheet" href="foreground/css/tree.css">
@@ -34,7 +35,7 @@
     <custom-style>
       <style>
         .dialog-footer cr-input {
-          --cr-input-border-bottom: 1px solid var(--paper-grey-800);
+          --cr-input-border-bottom: 1px solid var(--google-grey-800);
           --cr-input-border-radius: 0;
           --cr-input-error-display: none;
           --cr-input-padding-end: 0;

ui/file_manager/gallery/gallery.html

@@ -8,6 +8,7 @@
   <script src="chrome://resources/polymer/v1_0/html-imports/html-imports.min.js"></script>
   <link rel="import" href="chrome://resources/html/polymer.html">
   <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
+  <link rel="stylesheet" href="chrome://resources/css/cros_colors.generated.css">
   <link rel="stylesheet" href="../file_manager/foreground/css/list.css">
   <link rel="stylesheet" href="../file_manager/foreground/css/common.css">
   <link rel="stylesheet" href="../file_manager/foreground/css/file_types.css">
@@ -65,7 +66,7 @@
 
       cr-input {
         --cr-input-background-color: transparent;
-        --cr-input-border-bottom: 1px solid var(--paper-grey-800);
+        --cr-input-border-bottom: 1px solid var(--google-grey-800);
         --cr-input-border-radius: 0;
         --cr-input-color: white;
         --cr-input-padding-end: 0;

ui/webui/resources/css/cros_colors.json5

@@ -13,16 +13,28 @@
     /*
      * Recommended colors.
      */
-    cros_default_text_color: "$google_grey_900",
-    cros_default_text_color_secondary: "$google_grey_700",
+    cros_default_text_color: {
+      light: "$google_grey_900",
+      dark: "$google_grey_200",
+    },
+    cros_default_text_color_secondary: {
+      light: "$google_grey_700",
+      dark: "$google_grey_500",
+    },
 
-    cros_default_bg_color: "#ffffff",
+    cros_default_bg_color: {
+      light: "#ffffff",
+      dark: "$google_grey_900",
+    },
+
+    cros_default_button_color: {
+      light: "$google_blue_600",
+      dark: "$google_blue_300",
+    },
 
     cros_default_toolbar_bg_color: "#ffffff",
     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_100",
     cros_menu_button_outline_color_focused: "$google_blue_600",
@@ -42,6 +54,48 @@
 
     cros_link_color: "$google_blue_700",
 
+
+    /* button-primary */
+    cros_default_button_background_color_primary: "$cros_default_button_color",
+    cros_default_button_label_color_primary: {
+      light: "$google_grey_200",
+      dark: "$google_grey_900",
+    },
+    /* button-primary:hover */
+    /* TODO(calamity): Generate a linear-gradient() to use for compositing
+       backgrounds */
+    cros_default_button_background_color_primary_hover_overlay:
+        "rgba(0, 0, 0, 0.08)",
+    /* button-primary[disabled] */
+    cros_default_button_background_color_primary_disabled: {
+      light: "$google_grey_100",
+      dark: "$google_grey_800",
+    },
+    cros_default_button_label_color_primary_disabled: {
+      light: "$google_grey_600",
+      dark: "$google_grey_500",
+    },
+
+    /* button-secondary */
+    cros_default_button_label_color_secondary: "$cros_default_button_color",
+    cros_default_button_stroke_color_secondary: {
+      light: "$google_grey_300",
+      dark: "$google_grey_700",
+    },
+    /* button-secondary:hover */
+    cros_default_button_background_color_secondary_hover:
+        "rgba($cros_default_button_color_rgb, 0.04)",
+    /* button-secondary[disabled] */
+    cros_default_button_label_color_secondary_disabled: {
+      light: "$google_grey_600",
+      dark: "$google_grey_500",
+    },
+    cros_default_button_stroke_color_secondary_disabled: {
+      light: "$google_grey_100",
+      dark: "$google_grey_800",
+    },
+
+
     /*
      * One_offs.
      *