From d744a5f0d5ff9a2aa486e964c360ed114a018902 Mon Sep 17 00:00:00 2001
From: tinayuangao <yuan.gao.tina@gmail.com>
Date: Wed, 22 Feb 2017 16:39:13 -0800
Subject: [PATCH] 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
---
 src/lib/button-toggle/_button-toggle-theme.scss | 2 +-
 src/lib/button-toggle/button-toggle.scss        | 2 +-
 src/lib/core/theming/_palette.scss              | 6 ++++--
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/lib/button-toggle/_button-toggle-theme.scss b/src/lib/button-toggle/_button-toggle-theme.scss
index 4da2ad51bf19..912ade1b3428 100644
--- a/src/lib/button-toggle/_button-toggle-theme.scss
+++ b/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);
   }
 }
 
diff --git a/src/lib/button-toggle/button-toggle.scss b/src/lib/button-toggle/button-toggle.scss
index 98c04cb95c08..eea47e3edaab 100644
--- a/src/lib/button-toggle/button-toggle.scss
+++ b/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;
 }
 
diff --git a/src/lib/core/theming/_palette.scss b/src/lib/core/theming/_palette.scss
index 00c85649459b..e30ce6d2a9ad 100644
--- a/src/lib/core/theming/_palette.scss
+++ b/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.