Might be challenging to make ripple have a different color between focused and pressed.

Should check with UX, and if aforementioned spec is not a must, I think the only thing we need to do here is confirm if existing size and color for icon-buttons across WebUI match the spec.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/c06c3fe4ea32e631027cce8d8318dbb93baff71f

commit c06c3fe4ea32e631027cce8d8318dbb93baff71f
Author: Esmael El-Moslimany <aee@chromium.org>
Date: Fri Jun 22 17:58:10 2018

WebUI: update colors for icons referenced by cr-icon

Bug:  850239 
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: Ica4416b091ca406cd99de47ce331ed6f45b492b1
Reviewed-on: https://chromium-review.googlesource.com/1108500
Reviewed-by: Scott Chen <scottchen@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#569690}
[modify] https://crrev.com/c06c3fe4ea32e631027cce8d8318dbb93baff71f/ui/webui/resources/images/arrow_right.svg
[modify] https://crrev.com/c06c3fe4ea32e631027cce8d8318dbb93baff71f/ui/webui/resources/images/icon_arrow_back.svg
[modify] https://crrev.com/c06c3fe4ea32e631027cce8d8318dbb93baff71f/ui/webui/resources/images/icon_arrow_dropdown.svg
[modify] https://crrev.com/c06c3fe4ea32e631027cce8d8318dbb93baff71f/ui/webui/resources/images/icon_cancel.svg
[modify] https://crrev.com/c06c3fe4ea32e631027cce8d8318dbb93baff71f/ui/webui/resources/images/icon_clear.svg
[modify] https://crrev.com/c06c3fe4ea32e631027cce8d8318dbb93baff71f/ui/webui/resources/images/icon_delete_gray.svg
[modify] https://crrev.com/c06c3fe4ea32e631027cce8d8318dbb93baff71f/ui/webui/resources/images/icon_expand_less.svg
[modify] https://crrev.com/c06c3fe4ea32e631027cce8d8318dbb93baff71f/ui/webui/resources/images/icon_expand_more.svg
[modify] https://crrev.com/c06c3fe4ea32e631027cce8d8318dbb93baff71f/ui/webui/resources/images/icon_more_vert.svg
[modify] https://crrev.com/c06c3fe4ea32e631027cce8d8318dbb93baff71f/ui/webui/resources/images/icon_refresh.svg
[modify] https://crrev.com/c06c3fe4ea32e631027cce8d8318dbb93baff71f/ui/webui/resources/images/icon_search.svg
[modify] https://crrev.com/c06c3fe4ea32e631027cce8d8318dbb93baff71f/ui/webui/resources/images/icon_settings.svg
[modify] https://crrev.com/c06c3fe4ea32e631027cce8d8318dbb93baff71f/ui/webui/resources/images/icon_visibility.svg
[modify] https://crrev.com/c06c3fe4ea32e631027cce8d8318dbb93baff71f/ui/webui/resources/images/icon_visibility_off.svg
[modify] https://crrev.com/c06c3fe4ea32e631027cce8d8318dbb93baff71f/ui/webui/resources/images/open_in_new.svg

https://docs.google.com/presentation/d/1kXbnGrFln4CapA0bavU5zjZLALqeD4aQikVVKSJ0zFg/edit#slide=id.g364d7f9db1_0_0

namratakannan@: the icon is incorrect because I confused a preexisting google-grey-700 defined in polymer for the google-grey-700 in the refresh. I'm proposing a CL to fix this for the icons as well as other places that also used google-grey-700. You mentioned that the color of the icons was too dark. Is this what you were referring to?

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/aab81999a4414752b652bc7889c172662c1822ed

commit aab81999a4414752b652bc7889c172662c1822ed
Author: Esmael El-Moslimany <aee@chromium.org>
Date: Fri Jun 29 21:53:56 2018

WebUI: correcting google-grey-700 for refresh

Bug:  850239 
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: I7c4807237b88ea8461c8835d6b5bd8f9bdb796f8
Reviewed-on: https://chromium-review.googlesource.com/1119634
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#571654}
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/chrome/browser/resources/md_bookmarks/shared_vars.html
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/chrome/browser/resources/md_history/shared_vars.html
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/chrome/browser/resources/settings/people_page/fingerprint_list.html
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/chrome/browser/resources/settings/settings_page/settings_subpage.html
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.html
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/ui/webui/resources/cr_elements/cr_input/cr_input.html
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/ui/webui/resources/cr_elements/shared_vars_css.html
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/ui/webui/resources/images/arrow_down.svg
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/ui/webui/resources/images/arrow_right.svg
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/ui/webui/resources/images/icon_arrow_back.svg
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/ui/webui/resources/images/icon_arrow_dropdown.svg
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/ui/webui/resources/images/icon_cancel.svg
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/ui/webui/resources/images/icon_clear.svg
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/ui/webui/resources/images/icon_delete_gray.svg
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/ui/webui/resources/images/icon_expand_less.svg
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/ui/webui/resources/images/icon_expand_more.svg
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/ui/webui/resources/images/icon_more_vert.svg
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/ui/webui/resources/images/icon_refresh.svg
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/ui/webui/resources/images/icon_search.svg
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/ui/webui/resources/images/icon_settings.svg
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/ui/webui/resources/images/icon_visibility.svg
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/ui/webui/resources/images/icon_visibility_off.svg
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/ui/webui/resources/images/info.svg
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/ui/webui/resources/images/menu.svg
[modify] https://crrev.com/aab81999a4414752b652bc7889c172662c1822ed/ui/webui/resources/images/open_in_new.svg