Remove ::shadow and /deep/ combinator from Files app.

::shadow and /deep/ combinator are deprecated.
We need to use CSS variables instead.

BUG=498405
TEST=manually confirmed that color/opacity doesn't change.

Review-Url: https://codereview.chromium.org/2317113002
Cr-Commit-Position: refs/heads/master@{#417143}

ui/file_manager/audio_player/elements/control_panel.css

@@ -32,6 +32,9 @@
 /* Customized scrollbar for the playlist. */
 
 .media-button {
+  --files-toggle-ripple-activated: {
+    opacity: 0.1;
+  };
   background-color: transparent;
   border: 0;
   flex: none;

ui/file_manager/file_manager/foreground/css/file_manager.css

@@ -817,26 +817,10 @@ body.check-select #search-box {
   margin-top: -4px;
 }
 
-#search-box paper-input-container /deep/ ::-webkit-input-placeholder {
+#search-box paper-input-container input::-webkit-input-placeholder {
   color: rgba(255, 255, 255, 0.5);
 }
 
-#search-box paper-input-container /deep/ .unfocused-line {
-  background-color: rgba(255, 255, 255, 0.3);
-}
-
-#search-box paper-input-container /deep/ .focused-line {
-  background-color: white;
-  height: 1px;
-}
-
-#search-box paper-input-container /deep/ .input-content ::content input {
-  color: inherit;
-  font: inherit;
-  margin: 0.5em 0 0.25em;
-  padding: 0;
-}
-
 #search-box.has-cursor,
 #search-box.has-text {
   -webkit-margin-end: 12px;
@@ -1000,18 +984,6 @@ html[dir='rtl'] #search-box .clear {
   width: 100%;
 }
 
-.dialog-footer paper-input-container /deep/ .unfocused-line {
-  background-color: rgb(207, 207, 207);
-}
-
-.dialog-footer paper-input-container /deep/ .focused-line {
-  background-color: rgb(33, 150, 243);
-}
-
-.dialog-footer paper-input-container /deep/ .input-content ::content input {
-  font: inherit;
-}
-
 .dialog-footer select {
   -webkit-appearance: none;
   background: -webkit-image-set(
@@ -1217,10 +1189,6 @@ html[dir='rtl'] .breadcrumbs .separator {
   top: 0;
 }
 
-.loading-indicator::shadow #activeProgress {
-  background-color: rgb(26, 194, 34);
-}
-
 .downloads-warning {
   align-items: center;
   background-color: rgb(49, 102, 212);

ui/file_manager/file_manager/foreground/elements/files_icon_button.html

@@ -46,11 +46,6 @@
         top: 2px;
         width: 28px;
       }
-
-      files-toggle-ripple::shadow .ripple {
-        opacity: 0.1;
-        @apply(--files-icon-button-activated-theme);
-      }
     </style>
 
     <files-ripple hidden="[[toggles]]"></files-ripple>

ui/file_manager/file_manager/foreground/elements/files_quick_view.css

@@ -110,8 +110,10 @@ paper-button:focus:not(:active) {
 }
 
 #metadata-button {
-  --files-icon-button-activated-theme: {
-    background: white;
+  --files-toggle-ripple: {
+    background-color: white;
+  };
+  --files-toggle-ripple-activated: {
     opacity: 0.3;
   };
 }

ui/file_manager/file_manager/foreground/elements/files_toggle_ripple.html

@@ -31,6 +31,7 @@
       margin: 0 auto;
       opacity: 0;
       width: 0;
+      @apply(--files-toggle-ripple);
     }
 
     .ripple.activated {
@@ -38,6 +39,7 @@
       height: 50%;
       opacity: 0.2;
       width: 50%;
+      @apply(--files-toggle-ripple-activated);
     }
   </style>
   <template>

ui/file_manager/file_manager/foreground/elements/files_toggle_ripple.js

@@ -5,10 +5,12 @@
 /**
  * Toggle Ripple.
  *
- * You can change ripple color by the following CSS selector.
+ * You can change ripple color by the following CSS variable.
  *
- * files-toggle-ripple#my-button::shadow .ripple {
- *   background-color: black;
+ * files-toggle-ripple#my-button {
+ *   --files-toggle-ripple: {
+ *     background-color: black;
+ *   }
  * }
  *
  * Ripple size of the activated state is same with the size of this element.

ui/file_manager/file_manager/main.html

@@ -27,6 +27,40 @@
     <link rel="stylesheet" href="foreground/css/common.css">
     <link rel="stylesheet" href="chrome-extension://fbjakikfhfdajcamjleinfciajelkpek/cws_widget/cws_widget_container.css">
 
+    <style is="custom-style">
+      #search-box paper-input-container {
+        --paper-input-container-input: {
+          color: inherit;
+          font: inherit;
+          margin: 0.5em 0 0.25em;
+          padding: 0;
+        };
+        --paper-input-container-underline: {
+          background-color: rgba(255, 255, 0, 0.3);
+        };
+        --paper-input-container-underline-focus: {
+          background-color: white;
+          height: 1px;
+        };
+      }
+
+      .dialog-footer paper-input-container {
+        --paper-input-container-input: {
+          font: inherit;
+        };
+        --paper-input-container-underline: {
+          background-color: rgb(207, 207, 207);
+        };
+        --paper-input-container-underline-focus: {
+          background-color: rgb(33, 150, 243);
+        };
+      }
+
+      paper-progress {
+        --paper-progress-active-color: rgb(26, 194, 34);
+      }
+    </style>
+
     <script src="foreground/js/elements_importer.js"></script>
     <script src="foreground/js/main_scripts.js" defer></script>
   </head>

ui/file_manager/gallery/css/gallery.css

@@ -76,15 +76,10 @@ html[dir='rtl'] .bubble .close-x {
   opacity: 0.7;
 }
 
-paper-ripple,
-paper-button::shadow paper-ripple {
+paper-ripple {
   color: black;
 }
 
-files-toggle-ripple::shadow .ripple.activated {
-  opacity: 0.4;
-}
-
 .gallery,
 .gallery > .content {
   bottom: 0;
@@ -556,8 +551,7 @@ html[dir='rtl'] .gallery .toolbar .bubble {
   -webkit-margin-start: 16px;
 }
 
-.edit-mode-toolbar .overwrite-original[disabled]::shadow #checkbox,
-.edit-mode-toolbar .overwrite-original[disabled]::shadow #checkboxLabel {
+.edit-mode-toolbar .overwrite-original[disabled] {
   opacity: 0.2;
 }
 
@@ -915,10 +909,6 @@ paper-slider {
   width: 172px;
 }
 
-paper-slider::shadow paper-progress::shadow #progressContainer {
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
 .edit-modal .range.brightness > .icon {
   background-image: -webkit-image-set(
       url(../images/100/brightness.png) 1x,

ui/file_manager/gallery/gallery.html

@@ -47,6 +47,7 @@
     }
     paper-slider {
       --paper-slider-active-color: white;
+      --paper-slider-container-color: rgba(255, 255, 255, 0.2);
       --paper-slider-knob-color: white;
       --paper-slider-secondary-color: transparent;
     }
@@ -54,6 +55,14 @@
       --paper-progress-container-color: rgba(0, 0, 0, 0.3);
       --paper-progress-active-color: #1AC222;
     }
+    paper-button {
+      --paper-button-ink-color: black;
+    }
+    files-toggle-ripple {
+      --files-toggle-ripple-activated: {
+        opacity: 0.4;
+      };
+    }
   </style>
 </head>
 <body>