From db533faa091a828c1f21e0508cbef66dee3b3165 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <asmussen@gmail.com>
Date: Tue, 16 Jan 2018 11:12:39 +0100
Subject: [PATCH] Try new focus styles

---
 components/icon-button/style.scss      | 10 ++++++++++
 editor/assets/stylesheets/_mixins.scss | 22 +++++++++++++++++-----
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/components/icon-button/style.scss b/components/icon-button/style.scss
index 71b1f1f5851ba..66c13a02c53d4 100644
--- a/components/icon-button/style.scss
+++ b/components/icon-button/style.scss
@@ -22,4 +22,14 @@
 	&:not( :disabled ):hover {
 		@include button-style__hover;
 	}
+
+	&:not( :disabled ):active {
+		@include button-style__active;
+	}
+
+	&[aria-disabled=true]:focus,
+	&:disabled:focus {
+		box-shadow: none;
+	}
+
 }
diff --git a/editor/assets/stylesheets/_mixins.scss b/editor/assets/stylesheets/_mixins.scss
index 28c723bdc3140..7f64400544f4b 100644
--- a/editor/assets/stylesheets/_mixins.scss
+++ b/editor/assets/stylesheets/_mixins.scss
@@ -122,26 +122,38 @@ $float-margin: calc( 50% - #{ $visual-editor-max-width-padding / 2 } );
 
 @mixin button-style__hover {
 	color: $dark-gray-900;	// previously $blue-medium-500
+	box-shadow: inset 0 0 0 1px $light-gray-500, inset 0 0 0 2px $white;
 }
 
 @mixin button-style__focus-active() {
 	outline: none;
-	box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white;
 	color: $dark-gray-900;
-	background: $light-gray-300;
+	//box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white;
+	//background: $light-gray-300;
+	box-shadow: inset 0 0 0 1px $dark-gray-300, inset 0 0 0 2px $white;
+}
+
+@mixin button-style__active() {
+	outline: none;
+	color: $dark-gray-900;
+	//box-shadow: inset 0 0 0 1px $dark-gray-500, inset 0 0 0 2px $white;
+	//background: $light-gray-300;
+	box-shadow: inset 0 0 0 1px $dark-gray-400, inset 0 0 0 2px $white, 0 1px 1px rgba( $dark-gray-900, .2 );
 }
 
 @mixin tab-style__focus-active() {
 	outline: none;
-	box-shadow: 0 0 0 1px $dark-gray-500;
 	color: $dark-gray-900;
-	background: $light-gray-300;
+	//box-shadow: 0 0 0 1px $dark-gray-500;
+	//background: $light-gray-300;
+	box-shadow: inset 0 0 0 1px $dark-gray-300;
 }
 
 @mixin input-style__focus-active() {
 	outline: none;
-	box-shadow: 0 0 0 1px $dark-gray-500;
 	color: $dark-gray-900;
+	//box-shadow: 0 0 0 1px $dark-gray-500;
+	box-shadow: 0 0 0 1px $dark-gray-300;
 }
 
 /**