From 8100b971f661d2b06b49f0667bcba212b1710e9b Mon Sep 17 00:00:00 2001
From: joneff <joneff@gmail.com>
Date: Mon, 10 Jan 2022 10:25:29 +0200
Subject: [PATCH] fix(button): add extra styles for outline button

---
 .../bootstrap/scss/button/_variables.scss     |  4 +
 packages/classic/scss/button/_variables.scss  |  4 +
 packages/default/scss/button/_layout.scss     |  3 +-
 packages/default/scss/button/_theme.scss      | 93 ++++++++++++++++---
 packages/default/scss/button/_variables.scss  |  4 +
 packages/material/scss/button/_theme.scss     | 22 +++++
 packages/material/scss/button/_variables.scss |  4 +
 7 files changed, 122 insertions(+), 12 deletions(-)

diff --git a/packages/bootstrap/scss/button/_variables.scss b/packages/bootstrap/scss/button/_variables.scss
index dd3d30c5086..a16a889f0a7 100644
--- a/packages/bootstrap/scss/button/_variables.scss
+++ b/packages/bootstrap/scss/button/_variables.scss
@@ -134,6 +134,10 @@ $primary-button-focused-shadow: 0 0 0 3px rgba( $primary-button-border, .5 ) !de
 
 $button-group-focus-shadow: null !default;
 
+$outline-button-shadow-blur: 0px !default;
+$outline-button-shadow-spread: 3px !default;
+$outline-button-shadow-opacity: .5 !default;
+
 $flat-button-hover-opacity: .08 !default;
 $flat-button-focus-opacity: null !default;
 $flat-button-active-opacity: .16 !default;
diff --git a/packages/classic/scss/button/_variables.scss b/packages/classic/scss/button/_variables.scss
index 4327d578745..d4987d89c7c 100644
--- a/packages/classic/scss/button/_variables.scss
+++ b/packages/classic/scss/button/_variables.scss
@@ -134,6 +134,10 @@ $primary-button-focused-shadow: 0 0 4px 0 rgba( $primary-button-border, .75 ) !d
 
 $button-group-focus-shadow: null !default;
 
+$outline-button-shadow-blur: 4px !default;
+$outline-button-shadow-spread: 0px !default;
+$outline-button-shadow-opacity: .75 !default;
+
 $flat-button-hover-opacity: .08 !default;
 $flat-button-focus-opacity: .12 !default;
 $flat-button-active-opacity: .16 !default;
diff --git a/packages/default/scss/button/_layout.scss b/packages/default/scss/button/_layout.scss
index 9241b76cd64..950bb24bd23 100644
--- a/packages/default/scss/button/_layout.scss
+++ b/packages/default/scss/button/_layout.scss
@@ -256,7 +256,8 @@
     .k-button-outline {
         @include box-shadow( none );
         color: inherit;
-        background: none;
+        background-color: transparent;
+        background-image: none !important; // sass-lint:disable-line no-important
     }
     .k-button.k-outline {
         @extend .k-button-outline;
diff --git a/packages/default/scss/button/_theme.scss b/packages/default/scss/button/_theme.scss
index 722a7c59a73..8b2b3a8193f 100644
--- a/packages/default/scss/button/_theme.scss
+++ b/packages/default/scss/button/_theme.scss
@@ -176,65 +176,136 @@
         @include box-shadow( none );
         border-color: currentColor;
         color: $button-text;
-        background: none;
+        background-color: transparent;
 
         // Hover state
         &:hover,
         &.k-state-hover {
-            @include fill( contrast-wcag( $button-text ), $button-text, $button-text, none );
+            @include fill(
+                contrast-wcag( $button-text ),
+                $button-text,
+                $button-text
+            );
         }
 
         // Focused state
         &:focus,
         &.k-state-focus,
         &.k-state-focused {
-            box-shadow: $button-focused-shadow;
+            box-shadow: 0 0 $outline-button-shadow-blur $outline-button-shadow-spread rgba( $button-text, $outline-button-shadow-opacity );
         }
 
         // Active state
         &:active,
         &.k-state-active {
-            @include fill( contrast-wcag( $button-text ), $button-text, $button-text, none );
+            @include fill(
+                contrast-wcag( $button-text ),
+                $button-text,
+                $button-text
+            );
         }
 
         // Selected state
         &.k-state-selected {
-            @include fill( contrast-wcag( $button-text ), $button-text, $button-text, none );
+            @include fill(
+                contrast-wcag( $button-text ),
+                $button-text,
+                $button-text
+            );
         }
     }
     .k-button-outline.k-primary {
         border-color: currentColor;
-        color: $primary-button-bg;
+        color: $primary;
         background: none;
         box-shadow: none;
 
         // Hover state
         &:hover,
         &.k-state-hover {
-            @include fill( contrast-wcag( $primary-button-bg ), $primary-button-bg, $primary-button-bg, none );
+            @include fill(
+                contrast-wcag( $primary ),
+                $primary,
+                $primary
+            );
         }
 
         // Focused state
         &:focus,
         &.k-state-focus,
         &.k-state-focused {
-            box-shadow: $primary-button-focused-shadow;
+            box-shadow: 0 0 $outline-button-shadow-blur $outline-button-shadow-spread rgba( $primary, $outline-button-shadow-opacity );
         }
 
-        // Actove state
+        // Active state
         &:active,
         &.k-state-active {
-            @include fill( contrast-wcag( $primary-button-bg ), $primary-button-bg, $primary-button-bg, none );
+            @include fill(
+                contrast-wcag( $primary ),
+                $primary,
+                $primary
+            );
             box-shadow: none;
         }
 
         // Selected state
         &.k-state-selected {
-            @include fill( contrast-wcag( $primary-button-bg ), $primary-button-bg, $primary-button-bg, none );
+            @include fill(
+                contrast-wcag( $primary ),
+                $primary,
+                $primary
+            );
             box-shadow: none;
         }
     }
 
+    @each $name, $color in $button-theme-colors {
+        .k-button-outline.k-button-outline-#{$name} {
+            @include box-shadow( none );
+            border-color: currentColor;
+            color: $color;
+            background-color: transparent;
+
+            // Hover state
+            &:hover,
+            &.k-state-hover {
+                @include fill(
+                    contrast-wcag( $color ),
+                    $color,
+                    $color
+                );
+            }
+
+            // Focused state
+            &:focus,
+            &.k-state-focus,
+            &.k-state-focused {
+                box-shadow: 0 0 $outline-button-shadow-blur $outline-button-shadow-spread rgba( $color, $outline-button-shadow-opacity );
+            }
+
+            // Active state
+            &:active,
+            &.k-state-active {
+                @include fill(
+                    contrast-wcag( $color ),
+                    $color,
+                    $color
+                );
+                box-shadow: none;
+            }
+
+            // Selected state
+            &.k-state-selected {
+                @include fill(
+                    contrast-wcag( $color ),
+                    $color,
+                    $color
+                );
+                box-shadow: none;
+            }
+        }
+    }
+
 }
 
 
diff --git a/packages/default/scss/button/_variables.scss b/packages/default/scss/button/_variables.scss
index 1dafaf0d2b5..8b20f7510ef 100644
--- a/packages/default/scss/button/_variables.scss
+++ b/packages/default/scss/button/_variables.scss
@@ -134,6 +134,10 @@ $primary-button-focused-shadow: 0 0 0 2px rgba( $primary-button-border, .3 ) !de
 
 $button-group-focus-shadow: inset 0 0 0 2px rgba( $button-border, opacity( $button-border ) * 2 ) !default;
 
+$outline-button-shadow-blur: 0px !default;
+$outline-button-shadow-spread: 2px !default;
+$outline-button-shadow-opacity: .3 !default;
+
 $flat-button-hover-opacity: .04 !default;
 $flat-button-focus-opacity: null !default;
 $flat-button-active-opacity: .16 !default;
diff --git a/packages/material/scss/button/_theme.scss b/packages/material/scss/button/_theme.scss
index 606c8cf55a3..1059e68fea1 100644
--- a/packages/material/scss/button/_theme.scss
+++ b/packages/material/scss/button/_theme.scss
@@ -59,6 +59,28 @@
         }
     }
 
+    @each $name, $color in $button-theme-colors {
+        .k-button-outline.k-button-outline-#{$name} {
+            @include box-shadow( none );
+            color: $color;
+
+            &:hover,
+            &.k-state-hover,
+            &:active,
+            &.k-state-active,
+            &.k-state-selected,
+            &:focus,
+            &.k-state-focus {
+                color: $color;
+            }
+
+            &:disabled,
+            &.k-state-disabled {
+                color: $button-disabled-text;
+            }
+        }
+    }
+
 
     // Clear button
     .k-button-clear,
diff --git a/packages/material/scss/button/_variables.scss b/packages/material/scss/button/_variables.scss
index 94b117f4511..83c1da64d01 100644
--- a/packages/material/scss/button/_variables.scss
+++ b/packages/material/scss/button/_variables.scss
@@ -134,6 +134,10 @@ $primary-button-focused-shadow: null !default;
 
 $button-group-focus-shadow: null !default;
 
+$outline-button-shadow-blur: 0px !default;
+$outline-button-shadow-spread: 0px !default;
+$outline-button-shadow-opacity: 0 !default;
+
 $flat-button-hover-opacity: .08 !default;
 $flat-button-focus-opacity: .12 !default;
 $flat-button-active-opacity: .16 !default;