Add color customizations to CrOS printer status icon

The status badge can be red, green, grey depending on the status of the
printer. The default status color is grey.

Bug: 1059607
Change-Id: Ie91112e7d7230d052a793cff71983d2b0e722f16
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2234544
Commit-Queue: Gavin Williams <gavinwill@chromium.org>
Reviewed-by: Bailey Berro <baileyberro@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#779501}

chrome/browser/resources/print_preview/ui/printer_status_icon_cros.html

@@ -19,25 +19,43 @@
   }
 
   #status-badge {
-    background-color: var(--google-grey-500);
     height: var(--status-badge-radius);
     left: calc(var(--background-badge-left) + (var(--background-badge-radius) - var(--status-badge-radius))/2);
     top: calc(var(--background-badge-top) + (var(--background-badge-radius) - var(--status-badge-radius))/2);
     width: var(--status-badge-radius);
   }
 
+  :host-context([status='green']) #status-badge {
+    background-color: var(--google-green-700);
+  }
+
+  :host-context([status='grey']) #status-badge {
+    background-color: var(--google-grey-500);
+  }
+
+  :host-context([status='red']) #status-badge {
+    background-color: var(--google-red-600);
+  }
+
   :host-context([dir='rtl']) #status-badge {
     right: calc(var(--background-badge-left) + (var(--background-badge-radius) - var(--status-badge-radius))/2);
   }
 
   #background-badge {
-    background-color: var(--google-grey-refresh-100);
     height: var(--background-badge-radius);
     left: var(--background-badge-left);
     top: var(--background-badge-top);
     width: var(--background-badge-radius);
   }
 
+  :host-context([background='grey']) #background-badge {
+    background-color: var(--google-grey-refresh-100);
+  }
+
+  :host-context([background='white']) #background-badge {
+    background-color: white;
+  }
+
   :host-context([dir='rtl']) #background-badge {
     right: var(--background-badge-left);
   }

chrome/browser/resources/print_preview/ui/printer_status_icon_cros.js

@@ -10,6 +10,14 @@ import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bun
 Polymer({
   is: 'printer-status-icon-cros',
 
+  properties: {
+    /** Determines color of the background badge. */
+    background: String,
+
+    /** Determines color of the status badge. */
+    status: String,
+  },
+
   _template: html`{__html_template__}`,
 
 });