fix(button-toggle): only show focus style when focused via keyboard (#3232)

* Use a lighter color for focused layer in button-toggle

* .

* Only show focus layer when keyboard focus

Author: tinayuangao

src/lib/button-toggle/_button-toggle-theme.scss

@@ -6,7 +6,7 @@
   $background: map-get($theme, background);
 
   .mat-button-toggle-focus-overlay {
-    background-color: mat-color($background, dark-overlay);
+    background-color: mat-color($background, focused-button);
   }
 }
 

src/lib/button-toggle/button-toggle.scss

@@ -39,7 +39,7 @@ $mat-button-toggle-border-radius: 2px !default;
   position: relative;
 }
 
-.mat-button-toggle.cdk-focused .mat-button-toggle-focus-overlay {
+.mat-button-toggle.cdk-keyboard-focused .mat-button-toggle-focus-overlay {
   opacity: 1;
 }
 

src/lib/core/theming/_palette.scss

@@ -10,6 +10,8 @@ $black-87-opacity: rgba(black, 0.87);
 $white-87-opacity: rgba(white, 0.87);
 $black-12-opacity: rgba(black, 0.12);
 $white-12-opacity: rgba(white, 0.12);
+$black-6-opacity: rgba(black, 0.06);
+$white-6-opacity: rgba(white, 0.06);
 
 $mat-red: (
   50: #ffebee,
@@ -653,7 +655,7 @@ $mat-light-theme-background: (
   dialog:     white,
   disabled-button: $black-12-opacity,
   raised-button: white,
-  dark-overlay: $black-12-opacity,
+  focused-button: $black-6-opacity,
 );
 
 // Background palette for dark themes.
@@ -666,7 +668,7 @@ $mat-dark-theme-background: (
   dialog:     map_get($mat-grey, 800),
   disabled-button: $white-12-opacity,
   raised-button: map-get($mat-grey, 800),
-  dark-overlay: $white-12-opacity,
+  focused-button: $white-6-opacity,
 );
 
 // Foreground palette for light themes.