[MD settings] keyboard focus color for buttons

chrome/browser/resources/settings/settings_shared_css.html

 <link rel="import" href="/settings_root_css.html">
 
 <!-- Common styles for Material Design settings. -->
 <dom-module id="settings-shared">
   <template>
     <style>
       h2 {
         @apply(--layout-center);
         display: flex;
         font-size: 100%;
         font-weight: 500;
         margin: 0;
         min-height: var(--settings-row-min-height);
       }
 
       iron-icon[icon='cr:check'],
       iron-icon[icon='settings:done'] {
-       --iron-icon-fill-color: var(--google-green-500);
+       --iron-icon-fill-color: var(--paper-green-500);
       }
 
       paper-button {
         margin: 0;
       }
 
       paper-button[toggles][active] {
         background-color: var(--paper-grey-300);
       }
 
       span ~ a {
         -webkit-margin-start: 4px;
       }
 
       [is='action-link'],
       [is='action-link']:active,
       [is='action-link']:hover,
       [is='action-link']:visited,
       paper-button.primary-button,
       paper-button.tertiary-button {
-        color: var(--google-blue-700);
+        color: var(--paper-blue-700);
+      }
+
+      paper-button.primary-button,
+      paper-button.tertiary-button {
+        --paper-button-flat-keyboard-focus: {
+          background-color: rgba(51, 103, 214, .12);  /* --paper-blue-700 */
+        };
       }
 
       [is='action-link']:hover {
         /* TODO(dbeam): check with bettes@ on this one, but I'm pretty sure we
          * shouldn't be showing much :hover stuff on Polymer pages. */
         text-decoration: none;
       }
 
       paper-button.primary-button {
         --paper-button: {
           font-weight: 500;
           text-align: start;
         };
       }
 
       paper-button.secondary-button {
         --paper-button: {
           color: var(--paper-grey-600);
           text-decoration: none;
           font-weight: 500;
         };
+        --paper-button-flat-keyboard-focus: {
+          background-color: rgba(0, 0, 0, .12);
+        };
       }
 
       paper-button.tertiary-button {
         --paper-button: {
           font-weight: 400;
           text-decoration: none;
         };
       }
 
       .settings-box paper-button.primary-button,
       .settings-box paper-button.secondary-button,
       .settings-box paper-button.secondary-button {
         margin-left: -12px;
         margin-right: -12px;
         padding-left: 12px;
         padding-right: 12px;
       }
 
       paper-checkbox {
-        --paper-checkbox-checked-color: var(--google-blue-500);
+        --paper-checkbox-checked-color: var(--paper-blue-500);
         --paper-checkbox-label-spacing: var(--checkbox-spacing);
         --paper-checkbox-size: var(--checkbox-size);
         --paper-checkbox-unchecked-color: var(--paper-grey-600);
         -webkit-margin-start: var(--checkbox-margin-start);
       }
 
       paper-radio-button {
         @apply(--layout-center);
-        --paper-radio-button-checked-color: var(--google-blue-500);
+        --paper-radio-button-checked-color: var(--paper-blue-500);
         --paper-radio-button-label-spacing: 18px;
         --paper-radio-button-unchecked-color: var(--paper-grey-600);
         -webkit-margin-start: 2px;
         display: flex;
         min-height: var(--settings-row-min-height);
       }
 
       paper-radio-group {
         width: 100%;
       }
 
       .text-elide {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
 
       .button-strip {
         text-align: end;
       }
 
       .action-button {
-        background: var(--google-blue-500);
+        background: var(--paper-blue-500);
         color: white;
+        --paper-button-flat-keyboard-focus: {
+          background-color: rgb(58, 117, 215);  /* 88% of --paper-blue-500) */
+        };
       }
 
       .action-button[disabled] {
         opacity: .25;  /* TODO(dbeam): check this value with bettes. */
       }
 
+      .cancel-button {
+        --paper-button-flat-keyboard-focus: {
+          background-color: rgba(0, 0, 0, .12);
+        };
+      }
+
       .action-button,
       .cancel-button {
         font-weight: 500;
       }
 
       .list-frame {
         @apply(--layout-center);
         -webkit-padding-end: 20px;
         -webkit-padding-start: 56px;
         display: block;
@@ skipping 38 matching lines @@
         white-space: nowrap;
       }
 
       .list-item > paper-icon-item {
         padding: 0;
       }
 
       /* This button has no ink ripple. */
       .list-item.list-button {
         @apply(--layout-center);
-        color: rgb(66, 133, 244);
+        color: var(--paper-blue-500);
         font-weight: 500;
       }
 
       .settings-box {
         @apply(--layout-center);
         border-top: var(--settings-separator-line);
         display: flex;
         min-height: var(--settings-row-min-height);
         padding: 0 20px;
       }
@@ skipping 52 matching lines @@
 
       .settings-checkbox-spacer {
         -webkit-margin-start: calc(
             var(--checkbox-margin-start) +
             var(--checkbox-size) +
             var(--checkbox-spacing));
       }
 
       /* Keep the slider color consistent throughout the range. */
       paper-slider.always-on {
-        --paper-slider-knob-start-border-color: var(--google-blue-700);
-        --paper-slider-knob-start-color: var(--google-blue-700);
-        --paper-slider-pin-start-color: var(--google-blue-700);
+        --paper-slider-knob-start-border-color: var(--paper-blue-700);
+        --paper-slider-knob-start-color: var(--paper-blue-700);
+        --paper-slider-pin-start-color: var(--paper-blue-700);
       }
 
       .favicon-image {
         background-repeat: no-repeat;
         background-size: contain;
         height: 16px;
         width: 16px;
       }
     </style>
   </template>
 </dom-module>