WebUI: Update box-shadows to Material guideline shadows

This CL aims to update the elevation shadows on a few of the lingering
places where we are using paper's shadows. The added CSS variables
also will allow other WebUI to consume the variables [1].

https://imgur.com/a/8qlbMMn

[1] https://source.chromium.org/search?q=%220%204px%208px%203px%22%20filepath:html&ss=chromium&originalUrl=https:%2F%2Fcs.chromium.org%2F

Bug: 973674
Change-Id: I3eeff199526fc499c405edb39494b526c446f45e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2209634Reviewed-by: dpapad <dpapad@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#771958}

chrome/browser/resources/chromeos/emulator/device_emulator_pages.html

@@ -12,8 +12,8 @@
       }
 
       iron-pages > * {
-        @apply --shadow-elevation-2dp;
         background-color: white;
+        box-shadow: var(--cr-card-shadow);
         display: block;
         margin: 20px;
         padding: 0 20px 20px 20px;

chrome/browser/resources/pdf/elements/viewer-pdf-toolbar.html

@@ -54,8 +54,8 @@
       }
 
       #toolbar {
-        @apply --shadow-elevation-2dp;
         background-color: rgb(50, 54, 57);
+        box-shadow: var(--cr-elevation-2);
         position: relative;
       }
 

chrome/browser/resources/pdf/elements/viewer-toolbar-dropdown.html

@@ -35,7 +35,7 @@
 
       @media (prefers-color-scheme: light) {
         #dropdown {
-          @apply --shadow-elevation-2dp;
+          box-shadow: var(--cr-elevation-2);
         }
       }
 

chrome/browser/resources/pdf/elements/viewer-zoom-button.html

@@ -37,8 +37,8 @@
         --cr-icon-button-size: 36px;
         background-color: rgb(242, 242, 242);
         border-radius: 50%;
+        box-shadow: var(--cr-elevation-1);
         overflow: visible;
-        @apply --shadow-elevation-2dp;
       }
 
       cr-icon-button([disabled]) {
@@ -65,11 +65,11 @@
       }
 
       :host([keyboard-navigation-active]) cr-icon-button:focus {
-        @apply --shadow-elevation-6dp;
+        box-shadow: var(--cr-elevation-4);
       }
 
       cr-icon-button:active {
-        @apply --shadow-elevation-8dp;
+        box-shadow: var(--cr-elevation-5);
       }
     </style>
     <div id="wrapper">

chrome/browser/resources/settings/chromeos/device_page/display_layout.html

@@ -54,7 +54,7 @@
       }
 
       .display.elevate {
-        @apply --shadow-elevation-2dp;
+        box-shadow: var(--cr-elevation-3);
       }
     </style>
     <div id="displayArea" on-iron-resize="calculateVisualScale_">

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -67,8 +67,18 @@
     --cr-card-background-color: white;
     --cr-card-shadow-color-rgb: var(--google-grey-800-rgb);
 
-    --cr-card-shadow: rgba(var(--cr-card-shadow-color-rgb), .3) 0 1px 2px 0,
+    --cr-elevation-1: rgba(var(--cr-card-shadow-color-rgb), .3) 0 1px 2px 0,
                       rgba(var(--cr-card-shadow-color-rgb), .15) 0 1px 3px 1px;
+    --cr-elevation-2: rgba(var(--cr-card-shadow-color-rgb), .3) 0 1px 2px 0,
+                      rgba(var(--cr-card-shadow-color-rgb), .15) 0 2px 6px 2px;
+    --cr-elevation-3: rgba(var(--cr-card-shadow-color-rgb), .3) 0 1px 3px 0,
+                      rgba(var(--cr-card-shadow-color-rgb), .15) 0 4px 8px 3px;
+    --cr-elevation-4: rgba(var(--cr-card-shadow-color-rgb), .3) 0 2px 3px 0,
+                      rgba(var(--cr-card-shadow-color-rgb), .15) 0 6px 10px 4px;
+    --cr-elevation-5: rgba(var(--cr-card-shadow-color-rgb), .3) 0 4px 4px 0,
+                      rgba(var(--cr-card-shadow-color-rgb), .15) 0 8px 12px 6px;
+
+    --cr-card-shadow: var(--cr-elevation-1);
 
     --cr-checked-color: var(--google-blue-600);
     --cr-focused-item-color: var(--google-grey-300);