WebUI: Replace --cr-card-elevation mixin with CSS variable

Bug: 973674
Change-Id: I9827d8849edf8b6ae8ac42ed6547e81af9f5b17f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2107793Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#751489}

chrome/browser/resources/bookmarks/list.html

@@ -11,9 +11,9 @@
   }
 
   #list {
-    @apply --cr-card-elevation;
     background-color: var(--cr-card-background-color);
     border-radius: var(--cr-card-border-radius);
+    box-shadow: var(--cr-card-shadow);
     margin: 0 auto;
     max-width: var(--card-max-width);
     padding: 8px 0;

chrome/browser/resources/browser_switch/app.html

 <style>
   :host {
-    @apply --cr-card-elevation;
     background-color: var(--cr-card-background-color);
     border-radius: var(--cr-card-border-radius);
+    box-shadow: var(--cr-card-shadow);
     color: var(--cr-primary-text-color);
     display: block;
     margin: 16px;

chrome/browser/resources/downloads/item.html

@@ -47,7 +47,7 @@
   }
 
   #content.is-active {
-    @apply --cr-card-elevation;
+    box-shadow: var(--cr-card-shadow);
   }
 
   @media (prefers-color-scheme: light) {

chrome/browser/resources/extensions/checkup.html

@@ -6,9 +6,9 @@
   }
 
   #card {
-    @apply --cr-card-elevation;
     background-color: var(--cr-card-background-color);
     border-radius: var(--cr-card-border-radius);
+    box-shadow: var(--cr-card-shadow);
     overflow: hidden;
     padding: var(--checkup-card-margin);
     transition: height var(--drawer-transition);

chrome/browser/resources/extensions/item.html

@@ -34,9 +34,9 @@
   }
 
   #card {
-    @apply --cr-card-elevation;
     background-color: var(--cr-card-background-color);
     border-radius: var(--cr-card-border-radius);
+    box-shadow: var(--cr-card-shadow);
     display: flex;
     flex-direction: column;
     height: var(--extensions-card-height);

chrome/browser/resources/extensions/keyboard_shortcuts.html

@@ -4,9 +4,9 @@
   }
 
   .shortcut-card {
-    @apply --cr-card-elevation;
     background-color: var(--cr-card-background-color);
     border-radius: var(--cr-card-border-radius);
+    box-shadow: var(--cr-card-shadow);
     color: var(--cr-primary-text-color);
     margin: 0 auto 16px auto;
     padding-bottom: 8px;

chrome/browser/resources/extensions/shared_style.html

@@ -41,8 +41,8 @@
     }
 
     .page-content {
-      @apply --cr-card-elevation;
       background-color: var(--cr-card-background-color);
+      box-shadow: var(--cr-card-shadow);
       box-sizing: border-box;
       margin: auto;
       min-height: 100%;

chrome/browser/resources/history/history_item.html

@@ -124,9 +124,9 @@
       }
 
       #background {
-        @apply --cr-card-elevation;
         background-color: var(--cr-card-background-color);
         bottom: 0;
+        box-shadow: var(--cr-card-shadow);
         left: 0;
         position: absolute;
         right: 0;

chrome/browser/resources/history/synced_device_card.html

@@ -41,9 +41,9 @@
       }
 
       #history-item-container {
-        @apply --cr-card-elevation;
         background-color: var(--cr-card-background-color);
         border-radius: var(--cr-card-border-radius);
+        box-shadow: var(--cr-card-shadow);
       }
 
       .item-container {

chrome/browser/resources/management/management_ui.html

@@ -28,8 +28,8 @@
       }
 
       .card {
-        @apply --cr-card-elevation;
         background-color: var(--cr-card-background-color);
+        box-shadow: var(--cr-card-shadow);
         margin: 0 3px;
         min-height: 100%;
       }

chrome/browser/resources/settings/basic_page/basic_page.html

@@ -62,10 +62,10 @@
       }
 
       #osSettingsBanner {
-        @apply --cr-card-elevation;
         align-items: center;
         background-color: white;
         border-radius: 2px;
+        box-shadow: var(--cr-card-shadow);
         display: flex;
         margin-top: 21px;
       }

chrome/browser/resources/settings/chromeos/os_apps_page/app_management_page/shared_style.html

@@ -8,9 +8,9 @@
   <template>
     <style include="cr-shared-style cros-color-overrides">
       .card-container {
-        @apply --cr-card-elevation;
         background-color: var(--cros-default-bg-color);
         border-radius: var(--cr-card-border-radius);
+        box-shadow: var(--cr-card-shadow);
         display: flex;
         flex-direction: column;
         margin: 24px auto;

chrome/browser/resources/settings/settings_page/settings_section.html

@@ -25,9 +25,9 @@
       }
 
       :host(:not(.expanded)) #card {
-        @apply --cr-card-elevation;
         background-color: var(--cr-card-background-color);
         border-radius: var(--cr-card-border-radius);
+        box-shadow: var(--cr-card-shadow);
         flex: 1;
       }
 

chrome/browser/resources/settings/settings_page/settings_subpage.html

@@ -19,6 +19,7 @@
     <style include="cr-shared-style settings-shared">
       :host {
         background-color: var(--cr-card-background-color);
+        box-shadow: var(--cr-card-shadow);
         box-sizing: border-box;
         display: block;
         left: 0;
@@ -27,7 +28,6 @@
         position: absolute;
         right: 0;
         top: 0;
-        @apply --cr-card-elevation;
       }
 
       #headerLine {

chrome/browser/resources/user_manager/user_manager.html

@@ -88,9 +88,9 @@
       }
 
       .pod {
-        @apply --cr-card-elevation;
         background-color: var(--cr-card-background-color);
         border-radius: var(--cr-card-border-radius);
+        box-shadow: var(--cr-card-shadow);
         color: var(--cr-primary-text-color);
         cursor: default;
         height: auto;

chrome/browser/resources/user_manager/user_manager_tutorial.html

@@ -9,11 +9,11 @@
   <template>
     <style include="shared-styles">
       .tutorial-slide {
-        @apply --cr-card-elevation;
         -webkit-transition: opacity 200ms ease-in-out;
         background-color: var(--cr-card-background-color);
         border-radius: var(--cr-card-border-radius);
         bottom: 0;
+        box-shadow: var(--cr-card-shadow);
         height: 408px;
         left: 0;
         margin: auto;

ui/webui/resources/cr_elements/shared_vars_css.html

@@ -70,12 +70,6 @@
     --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);
-    }
-
     --cr-checked-color: var(--google-blue-600);
     --cr-focused-item-color: var(--google-grey-300);
     --cr-form-field-label-color: var(--google-grey-refresh-700);