From 6e67786a1f0ae551ab639f343cc95d7184864346 Mon Sep 17 00:00:00 2001
From: Emelie Segell <emelie.segell@seb.se>
Date: Fri, 27 Nov 2020 11:29:28 +0100
Subject: [PATCH] fix: change box-shadow style for focus state

---
 src/_mixins.scss                           |  4 ++--
 src/components/buttons/_button-mixins.scss | 16 ++++++++++++++++
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/_mixins.scss b/src/_mixins.scss
index 6f5d42dc..bc0d64ee 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -61,8 +61,8 @@
 /// Add focus outline to element
 ///
 /// @access public
-@mixin vanilla-focus-outline() {
-  box-shadow: 0 0 0 3px rgba($vanilla-color-component-selected, 0.2);
+@mixin vanilla-focus-outline($shadow-color: $vanilla-color-blue, $opacity: 1) {
+  box-shadow: 0 0 4px 1px rgba($shadow-color, $opacity);
   transition: box-shadow 250ms;
 }
 
diff --git a/src/components/buttons/_button-mixins.scss b/src/components/buttons/_button-mixins.scss
index 7394114c..1e3ecbae 100644
--- a/src/components/buttons/_button-mixins.scss
+++ b/src/components/buttons/_button-mixins.scss
@@ -176,6 +176,10 @@ $_ghost-button_disabled-opacity: 0.5;
   color: $vanilla-color-white;
   background-color: transparent;
 
+  &:focus {
+    @include vanilla-focus-outline($vanilla-color-white, 0.9);
+  }
+
   &:focus,
   &:hover,
   &:active {
@@ -199,6 +203,10 @@ $_ghost-button_disabled-opacity: 0.5;
   color: $vanilla-color-grey2;
   background-color: transparent;
 
+  &:focus {
+    @include vanilla-focus-outline($vanilla-color-grey700);
+  }
+
   &:focus,
   &:hover,
   &:active {
@@ -230,6 +238,10 @@ $_ghost-button_disabled-opacity: 0.5;
   background-color: transparent;
   border-color: transparent;
 
+  &:focus {
+    @include vanilla-focus-outline($vanilla-color-red);
+  }
+
   &:focus,
   &:hover,
   &:active {
@@ -253,6 +265,10 @@ $_ghost-button_disabled-opacity: 0.5;
   background-color: $vanilla-color-darkred1;
   border-color: $vanilla-color-darkred1;
 
+  &:focus {
+    @include vanilla-focus-outline($vanilla-color-red);
+  }
+
   &:focus,
   &:hover,
   &:active {