[MD settings] change paper-icon-button to *-light in cr_dialog

This CL changes the clear (X button) in the upper right of a cr_dialog
from a paper-icon-button to a paper-icon-button-light. It also moves
some of the paper-icon-button-light styling from settings to cr CSS so
that it can apply in cr_*.

Bug: 736891
Change-Id: Idc211b5dc42d18261d5e0906fea6f5d385421f0e
Reviewed-on: https://chromium-review.googlesource.com/567728Reviewed-by: Scott Chen <scottchen@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Commit-Queue: Dave Schuyler <dschuyler@chromium.org>
Cr-Commit-Position: refs/heads/master@{#487217}

ui/webui/resources/cr_elements/cr_dialog/cr_dialog.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
-<link rel="import" href="chrome://resources/cr_elements/icons.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
-<link rel="import" href="chrome://resources/html/polymer.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/default-theme.html">
 
 <dom-module id="cr-dialog">
   <template>
-    <style include="cr-hidden-style">
+    <style include="cr-hidden-style cr-icons">
       :host {
         --scroll-border: 1px solid var(--paper-grey-300);
         border: 0;
@@ -107,11 +108,6 @@
       }
 
       #close {
-        --paper-icon-button: {
-          height: 36px;
-          width: 36px;
-        };
-
         --layout-inline: {
           display: flex;
         };
@@ -126,10 +122,10 @@
       <div class="title-container" tabindex="-1">
         <content select=".title"></content>
       </div>
-      <paper-icon-button icon="cr:clear" on-tap="cancel" id="close"
-          aria-label$="[[closeText]]" on-keypress="onCloseKeypress_"
-          hidden$="[[noCancel]]">
-      </paper-icon-button>
+      <button is="paper-icon-button-light" class="icon-clear" id="close"
+          aria-label$="[[closeText]]" hidden$="[[noCancel]]" on-tap="cancel"
+          on-keypress="onCloseKeypress_">
+      </button>
     </div>
     <div class="body-container">
       <span id="bodyTopMarker"></span>

ui/webui/resources/cr_elements/cr_icons_css.html

@@ -4,6 +4,20 @@
 <dom-module id="cr-icons">
   <template>
     <style>
+      :host-context([dir=rtl]) button[is='paper-icon-button-light'] {
+        transform: scaleX(-1);  /* Flip on the X axis (aka mirror). */
+      }
+
+      button[is='paper-icon-button-light'] {
+        @apply(--cr-paper-icon-button-margin);
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: var(--cr-icon-size);
+        flex-shrink: 0;
+        height: var(--cr-icon-ripple-size);
+        width: var(--cr-icon-ripple-size);
+      }
+
       button[is='paper-icon-button-light'].icon-cancel {
         background-image: url(../images/icon_cancel.svg);
       }

ui/webui/resources/cr_elements/shared_style_css.html

@@ -8,10 +8,6 @@
 <dom-module id="cr-shared-style">
   <template>
     <style include="cr-hidden-style cr-icons">
-      :host-context([dir=rtl]) button[is='paper-icon-button-light'] {
-        transform: scaleX(-1);  /* Flip on the X axis (aka mirror). */
-      }
-
       /* Chrome spinners should be blue. */
       paper-spinner {
         --paper-spinner-layer-1-color: var(--google-blue-500);
@@ -51,16 +47,6 @@
         @apply(--cr-actionable);
       }
 
-      button[is='paper-icon-button-light'] {
-        @apply(--cr-paper-icon-button-margin);
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: var(--cr-icon-size);
-        flex-shrink: 0;
-        height: var(--cr-icon-ripple-size);
-        width: var(--cr-icon-ripple-size);
-      }
-
       .subpage-arrow,
       .icon-external {
         display: none;