[Do not commit] MD History: Experimentally implement cr-toolbar using cr-search-field

ui/webui/resources/cr_elements/cr_search_field/cr_search_field.css

 /* Copyright 2015 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 :host {
   -webkit-padding-end: 10px;
   box-sizing: border-box;
   display: flex;
   justify-content: flex-end;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 :host paper-input-container {
   margin-top: 2px;
   max-width: 200px;
   padding: 2px 0;
   width: 100%;
+  @apply(--cr-search-field-container);
 }
 
-#search-term {
-  --paper-input-container-color: rgb(192, 199, 205);
-  --paper-input-container-focus-color: rgb(192, 199, 205);
+#searchTerm {
+  --paper-input-container-color: var(--cr-search-color, rgb(192, 199, 205));
+  --paper-input-container-focus-color: var(--cr-search-color, rgb(192, 199, 205));
   --paper-input-container-input: {
     color: inherit;
     font-family: inherit;
     font-size: inherit;
   };
-  --paper-input-container-input-color: rgb(192, 199, 205);
-  color: rgb(192, 199, 205);
+  --paper-input-container-input-color: var(--cr-search-color, rgb(192, 199, 205));
+  color: var(--cr-search-color, rgb(192, 199, 205));
   z-index: 0;
 }
 
-#search-term input[type='search']::-webkit-search-decoration,
-#search-term input[type='search']::-webkit-search-cancel-button,
-#search-term input[type='search']::-webkit-search-results-button {
+#searchTerm input[type='search']::-webkit-search-decoration,
+#searchTerm input[type='search']::-webkit-search-cancel-button,
+#searchTerm input[type='search']::-webkit-search-results-button {
   -webkit-appearance: none;
 }
 
-#search-term input[type='search']::-webkit-search-cancel-button {
+#searchTerm input[type='search']::-webkit-search-cancel-button {
   display: block;
   width: 20px;
 }
 
-paper-icon-button {
-  --iron-icon-height: 20px;
-  --iron-icon-width: 20px;
-  --paper-icon-button: {
-    height: 32px;
-    padding: 6px;
-    width: 32px;
-  };
+#searchButton {
+  height: 32px;
+  padding: 6px;
+  width: 32px;
+  @apply(--cr-search-field-search-button);
+  color: var(--cr-search-field-search-button-color, white);
 }
 
-#search-term paper-icon-button {
+#searchTerm paper-icon-button {
   --iron-icon-height: 16px;
   --iron-icon-width: 16px;
   --paper-icon-button: {
     -webkit-margin-end: -8px;
     height: 32px;
     padding: 8px;
     width: 32px;
   };
   position: absolute;
   right: 0;
   top: -4px;
   z-index: 1;
 }
 
-:host-context([dir='rtl']) #search-term paper-icon-button {
+:host-context([dir='rtl']) #searchTerm paper-icon-button {
   left: 0;
   right: auto;
 }