From c2bf6a9e7116b2179df4d78a79bb669b73e0d89a Mon Sep 17 00:00:00 2001
From: joneff <joneff@gmail.com>
Date: Wed, 21 Jul 2021 16:26:05 +0300
Subject: [PATCH] fix(button): flat buttons should have their own text color

---
 packages/default/scss/button/_layout.scss | 24 +++++++++++--------
 packages/default/scss/button/_theme.scss  | 28 ++++++++---------------
 packages/default/scss/window/_layout.scss | 11 +++++++++
 3 files changed, 35 insertions(+), 28 deletions(-)

diff --git a/packages/default/scss/button/_layout.scss b/packages/default/scss/button/_layout.scss
index 3283e5db1da..0e343e303cd 100644
--- a/packages/default/scss/button/_layout.scss
+++ b/packages/default/scss/button/_layout.scss
@@ -221,23 +221,29 @@
     // Flat button and bare
     .k-button-flat {
         border-color: transparent !important; // sass-lint:disable-line no-important
-        color: inherit;
         background: none !important; // sass-lint:disable-line no-important
         box-shadow: none !important; // sass-lint:disable-line no-important
         transition: color .2s ease-in-out;
 
-        &:hover,
-        &.k-state-hover,
-        &:active,
-        &.k-state-active,
-        &:focus,
-        &.k-state-focus {
-            color: inherit;
+        // Overlay background
+        &::before {
+            display: block;
         }
 
-        &::before {
+        // Focus ring
+        &::after {
+            box-shadow: inset 0 0 0 2px currentColor;
             display: block;
         }
+
+        &:focus,
+        &.k-state-focus,
+        &.k-state-focused {
+
+            &::after {
+                opacity: .12;
+            }
+        }
     }
     .k-button.k-flat,
     .k-button.k-bare {
diff --git a/packages/default/scss/button/_theme.scss b/packages/default/scss/button/_theme.scss
index 15a940f0f15..a83fb3ffe76 100644
--- a/packages/default/scss/button/_theme.scss
+++ b/packages/default/scss/button/_theme.scss
@@ -242,36 +242,26 @@
     // Flat button
     .k-button-flat {
 
-        // Explicitly exclude flat button from button group styling
         &,
-        .k-button-group & {
-            color: inherit;
-            background: none;
-        }
-
-        &::after {
-            display: block;
-        }
-
+        &:hover,
+        &.k-state-hover,
+        &:active,
+        &.k-state-active,
         &:focus,
-        &.k-state-focused,
         &.k-state-focus {
-
-            &::after {
-                box-shadow: inset 0 0 0 2px currentColor;
-                opacity: .12;
-            }
+            color: $body-text;
         }
     }
     .k-button-flat.k-primary {
 
-        // Explicitly exclude flat button from button group styling
         &,
         &:hover,
         &.k-state-hover,
-        .k-button-group & {
+        &:active,
+        &.k-state-active,
+        &:focus,
+        &.k-state-focus {
             color: $primary;
-            background: none;
         }
     }
 
diff --git a/packages/default/scss/window/_layout.scss b/packages/default/scss/window/_layout.scss
index be51ab20297..2afcf928a0e 100644
--- a/packages/default/scss/window/_layout.scss
+++ b/packages/default/scss/window/_layout.scss
@@ -84,6 +84,17 @@
         flex-shrink: 0;
         align-items: center;
         vertical-align: top;
+
+        .k-button-flat {
+            &,
+            &:hover,
+            &.k-state-hover,
+            &:focus,
+            &.k-state-focus,
+            &:active {
+                color: inherit;
+            }
+        }
     }
     .k-window-action {
         flex-shrink: 0;