Dark Mode: add a better way of creating opacity variants of colors

Previously, there were things like:

  --some-color: #010203;
  --some-color-opacity-X: rgba(1, 2, 3, X);

Which is a bit inflexible and leads to a bit of redundancy. Instead,
let's use this syntax, which allows minting an arbitrary number of
colors with var() + rgba() syntax:

  --some-color-rgb: 1, 2, 3;
  --some-color: rgb(var(--some-color));
  /* later ... */
  color: rgba(var(--some-color-rgb), X /* any opacity */);

Bug: 883049
Change-Id: If730a1123294e43f2ea04b433c6c5a46933cc08e
Reviewed-on: https://chromium-review.googlesource.com/c/1393442Reviewed-by: Esmael El-Moslimany <aee@chromium.org>
Commit-Queue: Dan Beam <dbeam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#619532}

chrome/browser/resources/settings/device_page/night_light_slider.html

@@ -23,7 +23,7 @@
       }
 
       #sliderBar {
-        background-color: var(--google-blue-600-opacity-24);
+        background-color: rgba(var(--google-blue-600-rgb), .24);
         background-size: 100%;
         display: inline-block;
         height: 2px;

ui/webui/resources/cr_elements/cr_slider/cr_slider.html

@@ -39,7 +39,7 @@
 
       #barContainer {
         border-top-color: var(--cr-slider-container-color,
-            var(--google-blue-600-opacity-24));
+            rgba(var(--google-blue-600-rgb), .24));
         height: var(--cr-slider-bar-height);
         margin: 0 16px;
         position: absolute;
@@ -169,7 +169,7 @@
       }
 
       :host([disabled_]) #barContainer {
-        border-top-color: var(--google-grey-600-opacity-24);
+        border-top-color: rgba(var(--google-grey-600-rgb), .24);
       }
 
       :host([disabled_]) #bar {

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html

@@ -3,6 +3,7 @@
 <link rel="import" href="../cr_icons_css.html">
 <link rel="import" href="../cr_toolbar/cr_toolbar_search_field.html">
 <link rel="import" href="../hidden_style_css.html">
+<link rel="import" href="../shared_vars_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-media-query/iron-media-query.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 

ui/webui/resources/cr_elements/paper_button_style_css.html

@@ -13,7 +13,7 @@
         /* Blue-ish color used either as a background or as a text color,
            depending on the type of button. */
         --paper-button-ink-color: var(--google-blue-600);
-        --paper-ripple-opacity: 0.1;
+        --paper-ripple-opacity: .1;
         --text-or-bg-color: var(--google-blue-600);
 
         border: 1px solid rgb(218, 220, 224);
@@ -36,43 +36,38 @@
 
       paper-button:not([raised]).keyboard-focus,
       paper-button:not([raised]).action-button.keyboard-focus {
-        /* Google Blue 900 with 40% opacity. */
-        box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.4);
+        box-shadow: 0 0 0 2px rgba(var(--google-blue-900-rgb), .4);
         /* Override default paper-button's internal font-weight style. */
         font-weight: 500;
       }
 
       paper-button:not(.action-button):hover {
-        background-color: rgba(66, 133, 244, 0.04);
+        background-color: rgba(66, 133, 244, .04);
         border-color: rgb(210, 227, 252);
       }
 
       paper-button:not(.action-button):active {
-        /* google-grey-800 with opacity */
         box-shadow:
-            0 1px 2px 0 rgba(60, 64, 67, 0.30),
-            0 3px 6px 2px rgba(60, 64, 67, 0.15);
+            0 1px 2px 0 rgba(var(--google-grey-800-rgb), .3),
+            0 3px 6px 2px rgba(var(--google-grey-800-rgb), .15);
       }
 
       paper-button.action-button:hover {
-        /* google-blue-600 with opacity. */
-        background-color: rgba(26, 115, 232, 0.9);
+        background-color: rgba(var(--google-blue-600-rgb), .9);
         box-shadow:
-            0 1px 2px 0 var(--google-blue-500-opacity-30),
-            0 1px 3px 1px var(--google-blue-500-opacity-15);
+            0 1px 2px 0 rgba(var(--google-blue-500-rgb), .3),
+            0 1px 3px 1px rgba(var(--google-blue-500-rgb), .15);
       }
 
       paper-button.action-button:active {
         box-shadow:
-            0 1px 2px 0 var(--google-blue-500-opacity-30),
-            0 3px 6px 2px var(--google-blue-500-opacity-15);
+            0 1px 2px 0 rgba(var(--google-blue-500-rgb), .3),
+            0 3px 6px 2px rgba(var(--google-blue-500-rgb), .15);
       }
 
       paper-button:not([raised]).action-button {
-        --paper-ripple-opacity: 0.32;
+        --paper-ripple-opacity: .32;
         --paper-button-ink-color: white;
-        --google-blue-500-opacity-30: rgba(66, 133, 244, 0.3);
-        --google-blue-500-opacity-15: rgba(66, 133, 244, 0.15);
         background-color: var(--text-or-bg-color);
         border: none;
         color: white;

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -7,19 +7,22 @@
 <style is="custom-style">
   html {
     --google-blue-50: #E8F0FE;
-    --google-blue-600: #1A73E8;
+    --google-blue-500-rgb: 66, 133, 244;
+    --google-blue-600-rgb: 26, 115, 232;
+    --google-blue-600: rgb(var(--google-blue-600-rgb));
+    --google-blue-900-rgb: 13, 71, 161;
     /* -refresh differentiates from google-green-700 in polymer's color.html. */
     --google-green-refresh-700: #188038;
-    --google-blue-600-opacity-24: rgba(26, 115, 232, 0.24);
     /* -refresh differentiates from google-grey-100 in polymer's color.html. */
     --google-grey-refresh-100: #F1F3F4;
     --google-grey-200: #E8EAED;
     --google-grey-400: #BDC1C6;
-    --google-grey-600: #80868B;
-    --google-grey-600-opacity-24: rgba(128, 134, 139, 0.24);
+    --google-grey-600-rgb: 128, 134, 139;
+    --google-grey-600: rgb(var(--google-grey-600-rgb));
     /* -refresh differentiates from google-grey-700 in polymer's color.html. */
     --google-grey-refresh-700: #5F6368;
-    --google-grey-800: #3C4043;
+    --google-grey-800-rgb: 60, 64, 67;
+    --google-grey-800: rgb(var(--google-grey-800-rgb));
     --google-grey-900: #202124;
     --google-red-600: #D93025;
 
@@ -28,9 +31,8 @@
 
     --cr-card-background-color: white;
     --cr-card-elevation: {
-      /* google-grey-800 with opacity */
-      box-shadow: rgba(60, 64, 67, .3) 0 1px 2px 0,
-                  rgba(60, 64, 67, .15) 0 1px 3px 1px;
+      box-shadow: rgba(var(--google-grey-800-rgb), .3) 0 1px 2px 0,
+                  rgba(var(--google-grey-800-rgb), .15) 0 1px 3px 1px;
     }
 
     --cr-focused-item-color: var(--google-grey-300);
@@ -40,7 +42,7 @@
     --cr-menu-background-focus-color: var(--google-grey-200);
     --cr-menu-shadow: 0 2px 6px var(--paper-grey-500);
     --cr-section-text-color: var(--google-grey-refresh-700);
-    --cr-separator-color: rgba(0, 0, 0, 0.06);
+    --cr-separator-color: rgba(0, 0, 0, .06);
     --cr-title-text-color: rgb(90, 90, 90);
     --cr-toggle-color: var(--google-blue-500);
   }
@@ -181,7 +183,7 @@
     --cr-toolbar-overlay-animation-duration: 150ms;
 
     --cr-container-shadow: {
-      box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.4);
+      box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, .4);
       height: 6px;
       left: 0;
       margin-bottom: -6px;
@@ -198,9 +200,9 @@
 
     /** MD Refresh Styles */
     --cr-card-border-radius: 4px;
-    --cr-disabled-opacity: 0.38;
+    --cr-disabled-opacity: .38;
     --cr-form-field-bottom-spacing: 16px;
-    --cr-form-field-label-font-size: 0.625rem;
+    --cr-form-field-label-font-size: .625rem;
     --cr-form-field-label-height: 1em;
     --cr-form-field-label-line-height: 1em;
     --cr-form-field-label: {
@@ -208,7 +210,7 @@
       display: block;
       font-size: var(--cr-form-field-label-font-size);
       font-weight: 500;
-      letter-spacing: 0.4px;
+      letter-spacing: .4px;
       line-height: var(--cr-form-field-label-line-height);
       margin-bottom: 8px;
     }