WebUI: use --google-grey-900-white-4-percent CSS variable where

possible

In the code, we were using to similar colors for the same blended
color. This CL makes use of a defined opaque hex code representation
of the color in places were either the colors were blended or
where the hex code is used directly.

Change-Id: If1f4989b595df4441a9407161388efc64d40a45d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1921335
Commit-Queue: Esmael Elmoslimany <aee@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#716406}

components/flags_ui/resources/flags.css

@@ -28,6 +28,8 @@ html {
   --google-grey-500: rgb(154, 160, 166);
   --google-grey-700: rgb(95, 99, 104);
   --google-grey-900: rgb(32, 33, 36);
+  /* --google-grey-900 + 4% white blended together. */
+  --google-grey-900-white-4-percent: #292a2d;
   --google-red-300: rgb(242, 139, 130);
   --google-red-700: rgb(197, 34, 31);
 
@@ -57,7 +59,7 @@ html {
     --keyboard-focus-ring: rgba(var(--google-blue-300-rgb), 0.4);
     --link-color: var(--google-blue-300);
     --separator-color: rgba(255, 255, 255, .1);
-    --toolbar-color: #28292c;
+    --toolbar-color: var(--google-grey-900-white-4-percent);
 
     background: var(--google-grey-900);
   }

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

@@ -40,8 +40,8 @@
               rgba(var(--google-grey-600-rgb), .48);
           /* --cr-slider-disabled-color is the same in dark mode (GG600). */
           --cr-slider-knob-color: var(--google-blue-refresh-300);
-          /* --google-grey-900 + 4% white blended together. */
-          --cr-slider-knob-disabled-color: #28292c;
+          --cr-slider-knob-disabled-color:
+              var(--google-grey-900-white-4-percent);
           --cr-slider-marker-active-color: var(--google-blue-refresh-300);
           --cr-slider-marker-color: var(--google-blue-refresh-300);
           --cr-slider-marker-disabled-color: rgba(255, 255, 255, .54);

ui/webui/resources/cr_elements/md_select_css.html

@@ -43,10 +43,7 @@
           --md-select-bg-color: rgba(0, 0, 0, .3);
           --md-select-focus-shadow-color:
               rgba(var(--google-blue-refresh-300-rgb), .5);
-          /* --google-grey-900 + 4% white. This is typically implemented with
-           * background-{color,image} for e.g. menus, but it's not currently
-           * possible to style background-image on <option>. */
-          --md-select-option-bg-color: #28292c;
+          --md-select-option-bg-color: var(--google-grey-900-white-4-percent);
           --md-select-text-color: var(--cr-primary-text-color);
           background-image: url(chrome://resources/images/dark/arrow_down.svg);
         }

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -64,6 +64,8 @@
     --cr-card-shadow: rgba(var(--cr-card-shadow-color-rgb), .3) 0 1px 2px 0,
                       rgba(var(--cr-card-shadow-color-rgb), .15) 0 1px 3px 1px;
 
+    /* TODO(aee): rename --cr-card-shadow  to --cr-card-elevation-box-shadow and
+     * use directly in place of mixin. */
     --cr-card-elevation: {
       box-shadow: var(--cr-card-shadow);
     }
@@ -87,17 +89,9 @@
       --cr-primary-text-color: var(--google-grey-200);
       --cr-secondary-text-color: var(--google-grey-refresh-500);
 
-      --cr-card-background-color: var(--google-grey-900);
+      --cr-card-background-color: var(--google-grey-900-white-4-percent);
       --cr-card-shadow-color-rgb: 0, 0, 0;
 
-      --cr-card-elevation: {
-        /* This gradient intentionally uses the same from/to colors to add 4%
-         * white on top of an opaque background-color. */
-        background-image: linear-gradient(rgba(255, 255, 255, .04),
-                                          rgba(255, 255, 255, .04));
-        box-shadow: var(--cr-card-shadow);  /* Uses --cr-card-shadow-color-rgb. */
-      }
-
       --cr-checked-color: var(--google-blue-refresh-300);
       --cr-form-field-label-color: var(--dark-secondary-color);
       --cr-hairline-rgb: 255, 255, 255;