From db6a141bd16c90babbf563e33a3212eed2ab24e4 Mon Sep 17 00:00:00 2001
From: EugeniyKiyashko <EugeniyKiyashko@users.noreply.github.com>
Date: Thu, 26 Dec 2024 14:06:33 +0400
Subject: [PATCH] ThemeBuilder - Text Color parameter is not applied to
 Outlined and Text buttons (T1212078) (#28636)

---
 .../scss/widgets/fluent/button/_colors.scss   | 42 +++++++++-
 .../scss/widgets/fluent/button/_mixins.scss   | 11 ++-
 .../scss/widgets/generic/button/_colors.scss  | 78 +++++++++++++------
 .../scss/widgets/generic/button/_mixins.scss  |  4 +-
 .../scss/widgets/material/button/_colors.scss | 26 ++++++-
 .../scss/widgets/material/button/_index.scss  |  6 +-
 .../scss/widgets/material/button/_mixins.scss | 19 ++++-
 7 files changed, 148 insertions(+), 38 deletions(-)

diff --git a/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss b/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss
index 6c14cb587ad1..fca2088edfce 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss
@@ -53,7 +53,7 @@ $button-normal-selected-bg: $base-selected-bg !default;
 $button-normal-bg-inverted: null !default;
 
 /**
-* $name 10. Text color
+* $name 10. Text color (contained)
 * $type color
 */
 $button-default-color: null !default;
@@ -94,6 +94,10 @@ $button-default-active-bg: null !default;
 */
 $button-default-selected-bg: null !default;
 
+/**
+* $name 11. Text color (outlined)
+* $type color
+*/
 $button-default-outlined-color: $base-accent !default;
 $button-default-outlined-border-color: $base-accent !default;
 $button-default-outlined-hover-bg: null !default;
@@ -101,6 +105,10 @@ $button-default-outlined-focused-bg: null !default;
 $button-default-outlined-active-bg: null !default;
 $button-default-outlined-selected-bg: null !default;
 
+/**
+* $name 11. Text color (text)
+* $type color
+*/
 $button-default-text-color: $base-accent !default;
 
 /**
@@ -337,13 +345,41 @@ $button-normal-text-focused-bg: $button-normal-hover-bg !default;
 $button-normal-text-active-bg: $button-normal-active-bg !default;
 $button-normal-text-selected-bg: $button-normal-selected-bg !default;
 
+/**
+* $name 12. Hover state text color (outlined)
+* $type color
+*/
 $button-default-outlined-color-hover: $button-accent-foreground-color !default;
+
+/**
+* $name 13. Active state text color (outlined)
+* $type color
+*/
 $button-default-outlined-color-active: $button-accent-foreground-color !default;
+
+/**
+* $name 21. Selected state text color (outlined)
+* $type color
+*/
 $button-default-outlined-selected-color: $button-accent-foreground-color !default;
 
-$button-default-text-color-hover: $button-default-outlined-color-hover !default;
+/**
+* $name 12. Hover state text color (text)
+* $type color
+*/
+$button-default-text-color-hover: $button-accent-foreground-color !default;
+
+/**
+* $name 13. Active state text color (text)
+* $type color
+*/
 $button-default-text-color-active: $button-default-outlined-color-active !default;
-$button-default-text-selected-color: $button-default-outlined-selected-color !default;
+
+/**
+* $name 21. Selected state text color (text)
+* $type color
+*/
+$button-default-text-selected-color: $button-accent-foreground-color !default;
 
 $button-default-text-hover-bg: $button-default-outlined-hover-bg !default;
 $button-default-text-focused-bg: $button-default-outlined-focused-bg !default;
diff --git a/packages/devextreme-scss/scss/widgets/fluent/button/_mixins.scss b/packages/devextreme-scss/scss/widgets/fluent/button/_mixins.scss
index 92c0edf17a87..2181fff621f4 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/button/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/button/_mixins.scss
@@ -145,7 +145,16 @@
   }
 }
 
-@mixin dx-button-flat-color-styling($button-color, $button-color-hover, $button-color-active, $hover-bg, $focused-bg, $active-bg, $selected-bg: $active-bg, $selected-color: $button-color) {
+@mixin dx-button-flat-color-styling(
+  $button-color,
+  $button-color-hover,
+  $button-color-active,
+  $hover-bg,
+  $focused-bg,
+  $active-bg,
+  $selected-bg: $active-bg,
+  $selected-color: $button-color
+) {
   @include dx-button-styling-variant(
     transparent,
     $button-color,
diff --git a/packages/devextreme-scss/scss/widgets/generic/button/_colors.scss b/packages/devextreme-scss/scss/widgets/generic/button/_colors.scss
index a1ccb2f0a1f2..0777a07ecbac 100644
--- a/packages/devextreme-scss/scss/widgets/generic/button/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/button/_colors.scss
@@ -53,7 +53,7 @@ $button-normal-text-bg-active: null !default;
 $button-normal-text-bg-selected: null !default;
 
 /**
-* $name 10. Text color
+* $name 10. Text color (contained)
 * $type color
 */
 $button-default-color: $base-inverted-text-color !default;
@@ -78,6 +78,12 @@ $button-default-contained-bg-active: null !default;
 * $type color
 */
 $button-default-contained-bg-selected: null !default;
+
+/**
+* $name 11. Text color (outlined)
+* $type color
+*/
+$button-default-outlined-color: null !default;
 $button-default-outlined-bg-hover: null !default;
 $button-default-outlined-bg-focused: null !default;
 $button-default-outlined-bg-active: null !default;
@@ -87,6 +93,12 @@ $button-default-outlined-bg-active: null !default;
 * $type color
 */
 $button-default-outlined-bg-selected: null !default;
+
+/**
+* $name 11. Text color (text)
+* $type color
+*/
+$button-default-text-color: null !default;
 $button-default-text-bg-hover: null !default;
 $button-default-text-bg-focused: null !default;
 $button-default-text-bg-active: null !default;
@@ -189,7 +201,7 @@ $button-success-text-bg-selected: null !default;
 
 @if $color == "carmine" {
   $button-normal-bg: $base-element-bg !default;
-  $button-normal-border-color: darken($base-border-color, 17%) !default; // #dee1e3 => #b1b7bd
+  $button-normal-border-color: darken($base-border-color, 17%) !default;
   $button-normal-bg-inverted: darken($button-normal-bg, 100%) !default;
   $button-normal-contained-bg-hover: darken($button-normal-bg, 4%) !default;
   $button-normal-contained-bg-focused: darken($button-normal-bg, 8%) !default;
@@ -204,20 +216,22 @@ $button-success-text-bg-selected: null !default;
   $button-normal-text-bg-active: color.change($button-normal-bg-inverted, $alpha: 0.24) !default;
   $button-normal-text-bg-selected: color.change($button-normal-bg-inverted, $alpha: 0.17) !default;
   $button-default-bg: $base-accent !default;
-  $button-default-border-color: darken($base-accent, 5%) !default;
+  $button-default-border-color: darken($button-default-bg, 5%) !default;
   $button-default-contained-bg-hover: darken($button-default-bg, 9%) !default;
   $button-default-contained-bg-focused: darken($button-default-bg, 12%) !default;
   $button-default-contained-bg-active: darken($button-default-bg, 23%) !default;
   $button-default-contained-bg-selected: darken($button-default-bg, 17%) !default;
+  $button-default-outlined-color: darken($button-default-bg, 5%) !default;
   $button-default-outlined-bg-hover: color.change($button-default-border-color, $alpha: 0.1) !default;
   $button-default-outlined-bg-focused: color.change($button-default-border-color, $alpha: 0.1) !default;
   $button-default-outlined-bg-active: color.change($button-default-border-color, $alpha: 0.4) !default;
   $button-default-outlined-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
+  $button-default-text-color: darken($button-default-bg, 5%) !default;
   $button-default-text-bg-hover: $button-default-outlined-bg-hover !default;
   $button-default-text-bg-focused: $button-default-outlined-bg-focused !default;
   $button-default-text-bg-active: $button-default-outlined-bg-active !default;
   $button-default-text-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
-  $button-danger-border-color: darken($base-danger, 5%) !default;
+  $button-danger-border-color: darken($button-danger-bg, 5%) !default;
   $button-danger-contained-bg-hover: darken($button-danger-bg, 9%) !default;
   $button-danger-contained-bg-focused: darken($button-danger-bg, 12%) !default;
   $button-danger-contained-bg-active: darken($button-danger-bg, 23%) !default;
@@ -230,7 +244,7 @@ $button-success-text-bg-selected: null !default;
   $button-danger-text-bg-focused: $button-danger-outlined-bg-focused !default;
   $button-danger-text-bg-active: $button-danger-outlined-bg-active !default;
   $button-danger-text-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default;
-  $button-success-border-color: darken($base-success, 5%) !default;
+  $button-success-border-color: darken($button-success-bg, 5%) !default;
   $button-success-contained-bg-hover: darken($button-success-bg, 9%) !default;
   $button-success-contained-bg-focused: darken($button-success-bg, 12%) !default;
   $button-success-contained-bg-active: darken($button-success-bg, 23%) !default;
@@ -266,15 +280,17 @@ $button-success-text-bg-selected: null !default;
   $button-default-contained-bg-focused: $base-inverted-bg !default;
   $button-default-contained-bg-active: $button-default-bg !default;
   $button-default-contained-bg-selected: $base-inverted-bg !default;
+  $button-default-outlined-color: $base-default !default;
   $button-default-outlined-bg-hover: $base-inverted-bg !default;
   $button-default-outlined-bg-focused: $base-inverted-bg !default;
   $button-default-outlined-bg-active: $base-bg !default;
   $button-default-outlined-bg-selected: $base-inverted-bg !default;
+  $button-default-text-color: $base-default !default;
   $button-default-text-bg-hover: $base-inverted-bg !default;
   $button-default-text-bg-focused: $base-inverted-bg !default;
   $button-default-text-bg-active: $base-bg !default;
   $button-default-text-bg-selected: $base-inverted-bg !default;
-  $button-danger-border-color: $base-danger !default;
+  $button-danger-border-color: $button-danger-bg !default;
   $button-danger-contained-bg-hover: $base-inverted-bg !default;
   $button-danger-contained-bg-focused: $base-inverted-bg !default;
   $button-danger-contained-bg-active: $button-danger-bg !default;
@@ -287,7 +303,7 @@ $button-success-text-bg-selected: null !default;
   $button-danger-text-bg-focused: $base-inverted-bg !default;
   $button-danger-text-bg-active: $base-bg !default;
   $button-danger-text-bg-selected: $base-inverted-bg !default;
-  $button-success-border-color: $base-success !default;
+  $button-success-border-color: $button-success-bg !default;
   $button-success-contained-bg-hover: $base-inverted-bg !default;
   $button-success-contained-bg-focused: $base-inverted-bg !default;
   $button-success-contained-bg-active: $button-success-bg !default;
@@ -319,20 +335,22 @@ $button-success-text-bg-selected: null !default;
   $button-normal-text-bg-active: color.change($button-normal-bg-inverted, $alpha: 0.24) !default;
   $button-normal-text-bg-selected: color.change($button-normal-bg-inverted, $alpha: 0.17) !default;
   $button-default-bg: $base-accent !default;
-  $button-default-border-color: darken($base-accent, 5%) !default;
+  $button-default-border-color: darken($button-default-bg, 5%) !default;
   $button-default-contained-bg-hover: lighten($button-default-bg, 9%) !default;
   $button-default-contained-bg-focused: lighten($button-default-bg, 12%) !default;
   $button-default-contained-bg-active: lighten($button-default-bg, 23%) !default;
   $button-default-contained-bg-selected: lighten($button-default-bg, 17%) !default;
+  $button-default-outlined-color: darken($button-default-bg, 5%) !default;
   $button-default-outlined-bg-hover: color.change($button-default-border-color, $alpha: 0.1) !default;
   $button-default-outlined-bg-focused: color.change($button-default-border-color, $alpha: 0.1) !default;
   $button-default-outlined-bg-active: color.change($button-default-border-color, $alpha: 0.4) !default;
   $button-default-outlined-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
+  $button-default-text-color: darken($button-default-bg, 5%) !default;
   $button-default-text-bg-hover: $button-default-outlined-bg-hover !default;
   $button-default-text-bg-focused: $button-default-outlined-bg-focused !default;
   $button-default-text-bg-active: $button-default-outlined-bg-active !default;
   $button-default-text-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
-  $button-danger-border-color: darken($base-danger, 5%) !default;
+  $button-danger-border-color: darken($button-danger-bg, 5%) !default;
   $button-danger-contained-bg-hover: lighten($button-danger-bg, 9%) !default;
   $button-danger-contained-bg-focused: lighten($button-danger-bg, 12%) !default;
   $button-danger-contained-bg-active: lighten($button-danger-bg, 23%) !default;
@@ -345,7 +363,7 @@ $button-success-text-bg-selected: null !default;
   $button-danger-text-bg-focused: $button-danger-outlined-bg-focused !default;
   $button-danger-text-bg-active: $button-danger-outlined-bg-active !default;
   $button-danger-text-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default;
-  $button-success-border-color: darken($base-success, 5%) !default;
+  $button-success-border-color: darken($button-success-bg, 5%) !default;
   $button-success-contained-bg-hover: lighten($button-success-bg, 9%) !default;
   $button-success-contained-bg-focused: lighten($button-success-bg, 12%) !default;
   $button-success-contained-bg-active: lighten($button-success-bg, 23%) !default;
@@ -377,20 +395,22 @@ $button-success-text-bg-selected: null !default;
   $button-normal-text-bg-active: color.change($button-normal-bg-inverted, $alpha: 0.24) !default;
   $button-normal-text-bg-selected: color.change($button-normal-bg-inverted, $alpha: 0.17) !default;
   $button-default-bg: $base-accent !default;
-  $button-default-border-color: darken($base-accent, 5%) !default;
+  $button-default-border-color: darken($button-default-bg, 5%) !default;
   $button-default-contained-bg-hover: lighten($button-default-bg, 9%) !default;
   $button-default-contained-bg-focused: lighten($button-default-bg, 12%) !default;
   $button-default-contained-bg-active: lighten($button-default-bg, 23%) !default;
   $button-default-contained-bg-selected: lighten($button-default-bg, 17%) !default;
+  $button-default-outlined-color: darken($button-default-bg, 5%) !default;
   $button-default-outlined-bg-hover: color.change($button-default-border-color, $alpha: 0.1) !default;
   $button-default-outlined-bg-focused: color.change($button-default-border-color, $alpha: 0.1) !default;
   $button-default-outlined-bg-active: color.change($button-default-border-color, $alpha: 0.4) !default;
   $button-default-outlined-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
+  $button-default-text-color: darken($button-default-bg, 5%) !default;
   $button-default-text-bg-hover: $button-default-outlined-bg-hover !default;
   $button-default-text-bg-focused: $button-default-outlined-bg-focused !default;
   $button-default-text-bg-active: $button-default-outlined-bg-active !default;
   $button-default-text-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
-  $button-danger-border-color: darken($base-danger, 5%) !default;
+  $button-danger-border-color: darken($button-danger-bg, 5%) !default;
   $button-danger-contained-bg-hover: lighten($button-danger-bg, 9%) !default;
   $button-danger-contained-bg-focused: lighten($button-danger-bg, 12%) !default;
   $button-danger-contained-bg-active: lighten($button-danger-bg, 23%) !default;
@@ -403,7 +423,7 @@ $button-success-text-bg-selected: null !default;
   $button-danger-text-bg-focused: $button-danger-outlined-bg-focused !default;
   $button-danger-text-bg-active: $button-danger-outlined-bg-active !default;
   $button-danger-text-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default;
-  $button-success-border-color: darken($base-success, 5%) !default;
+  $button-success-border-color: darken($button-success-bg, 5%) !default;
   $button-success-contained-bg-hover: lighten($button-success-bg, 9%) !default;
   $button-success-contained-bg-focused: lighten($button-success-bg, 12%) !default;
   $button-success-contained-bg-active: lighten($button-success-bg, 23%) !default;
@@ -435,20 +455,22 @@ $button-success-text-bg-selected: null !default;
   $button-normal-text-bg-active: color.change($button-normal-bg-inverted, $alpha: 0.24) !default;
   $button-normal-text-bg-selected: color.change($button-normal-bg-inverted, $alpha: 0.17) !default;
   $button-default-bg: $base-accent !default;
-  $button-default-border-color: darken($base-accent, 5%) !default;
+  $button-default-border-color: darken($button-default-bg, 5%) !default;
   $button-default-contained-bg-hover: lighten($button-default-bg, 9%) !default;
   $button-default-contained-bg-focused: lighten($button-default-bg, 12%) !default;
   $button-default-contained-bg-active: lighten($button-default-bg, 23%) !default;
   $button-default-contained-bg-selected: lighten($button-default-bg, 17%) !default;
+  $button-default-outlined-color: darken($button-default-bg, 5%) !default;
   $button-default-outlined-bg-hover: color.change($button-default-border-color, $alpha: 0.1) !default;
   $button-default-outlined-bg-focused: color.change($button-default-border-color, $alpha: 0.1) !default;
   $button-default-outlined-bg-active: color.change($button-default-border-color, $alpha: 0.4) !default;
   $button-default-outlined-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
+  $button-default-text-color: darken($button-default-bg, 5%) !default;
   $button-default-text-bg-hover: $button-default-outlined-bg-hover !default;
   $button-default-text-bg-focused: $button-default-outlined-bg-focused !default;
   $button-default-text-bg-active: $button-default-outlined-bg-active !default;
   $button-default-text-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
-  $button-danger-border-color: darken($base-danger, 5%) !default;
+  $button-danger-border-color: darken($button-danger-bg, 5%) !default;
   $button-danger-contained-bg-hover: lighten($button-danger-bg, 9%) !default;
   $button-danger-contained-bg-focused: lighten($button-danger-bg, 12%) !default;
   $button-danger-contained-bg-active: lighten($button-danger-bg, 23%) !default;
@@ -461,7 +483,7 @@ $button-success-text-bg-selected: null !default;
   $button-danger-text-bg-focused: $button-danger-outlined-bg-focused !default;
   $button-danger-text-bg-active: $button-danger-outlined-bg-active !default;
   $button-danger-text-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default;
-  $button-success-border-color: darken($base-success, 5%) !default;
+  $button-success-border-color: darken($button-success-bg, 5%) !default;
   $button-success-contained-bg-hover: lighten($button-success-bg, 9%) !default;
   $button-success-contained-bg-focused: lighten($button-success-bg, 12%) !default;
   $button-success-contained-bg-active: lighten($button-success-bg, 23%) !default;
@@ -493,20 +515,22 @@ $button-success-text-bg-selected: null !default;
   $button-normal-text-bg-active: color.change($button-normal-bg-inverted, $alpha: 0.24) !default;
   $button-normal-text-bg-selected: color.change($button-normal-bg-inverted, $alpha: 0.17) !default;
   $button-default-bg: $base-accent !default;
-  $button-default-border-color: darken($base-accent, 5%) !default;
+  $button-default-border-color: darken($button-default-bg, 5%) !default;
   $button-default-contained-bg-hover: darken($button-default-bg, 9%) !default;
   $button-default-contained-bg-focused: darken($button-default-bg, 12%) !default;
   $button-default-contained-bg-active: darken($button-default-bg, 23%) !default;
   $button-default-contained-bg-selected: darken($button-default-bg, 17%) !default;
+  $button-default-outlined-color: darken($button-default-bg, 5%) !default;
   $button-default-outlined-bg-hover: color.change($button-default-border-color, $alpha: 0.1) !default;
   $button-default-outlined-bg-focused: color.change($button-default-border-color, $alpha: 0.1) !default;
   $button-default-outlined-bg-active: color.change($button-default-border-color, $alpha: 0.4) !default;
   $button-default-outlined-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
+  $button-default-text-color: darken($button-default-bg, 5%) !default;
   $button-default-text-bg-hover: $button-default-outlined-bg-hover !default;
   $button-default-text-bg-focused: $button-default-outlined-bg-focused !default;
   $button-default-text-bg-active: $button-default-outlined-bg-active !default;
   $button-default-text-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
-  $button-danger-border-color: darken($base-danger, 5%) !default;
+  $button-danger-border-color: darken($button-danger-bg, 5%) !default;
   $button-danger-contained-bg-hover: darken($button-danger-bg, 9%) !default;
   $button-danger-contained-bg-focused: darken($button-danger-bg, 12%) !default;
   $button-danger-contained-bg-active: darken($button-danger-bg, 23%) !default;
@@ -519,7 +543,7 @@ $button-success-text-bg-selected: null !default;
   $button-danger-text-bg-focused: $button-danger-outlined-bg-focused !default;
   $button-danger-text-bg-active: $button-danger-outlined-bg-active !default;
   $button-danger-text-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default;
-  $button-success-border-color: darken($base-success, 5%) !default;
+  $button-success-border-color: darken($button-success-bg, 5%) !default;
   $button-success-contained-bg-hover: darken($button-success-bg, 9%) !default;
   $button-success-contained-bg-focused: darken($button-success-bg, 12%) !default;
   $button-success-contained-bg-active: darken($button-success-bg, 23%) !default;
@@ -551,20 +575,22 @@ $button-success-text-bg-selected: null !default;
   $button-normal-text-bg-active: color.change($button-normal-bg-inverted, $alpha: 0.24) !default;
   $button-normal-text-bg-selected: color.change($button-normal-bg-inverted, $alpha: 0.17) !default;
   $button-default-bg: $base-accent !default;
-  $button-default-border-color: darken($base-accent, 5%) !default;
+  $button-default-border-color: darken($button-default-bg, 5%) !default;
   $button-default-contained-bg-hover: darken($button-default-bg, 9%) !default;
   $button-default-contained-bg-focused: darken($button-default-bg, 12%) !default;
   $button-default-contained-bg-active: darken($button-default-bg, 23%) !default;
   $button-default-contained-bg-selected: darken($button-default-bg, 17%) !default;
+  $button-default-outlined-color: darken($button-default-bg, 5%) !default;
   $button-default-outlined-bg-hover: color.change($button-default-border-color, $alpha: 0.1) !default;
   $button-default-outlined-bg-focused: color.change($button-default-border-color, $alpha: 0.1) !default;
   $button-default-outlined-bg-active: color.change($button-default-border-color, $alpha: 0.4) !default;
   $button-default-outlined-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
+  $button-default-text-color: darken($button-default-bg, 5%) !default;
   $button-default-text-bg-hover: $button-default-outlined-bg-hover !default;
   $button-default-text-bg-focused: $button-default-outlined-bg-focused !default;
   $button-default-text-bg-active: $button-default-outlined-bg-active !default;
   $button-default-text-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
-  $button-danger-border-color: darken($base-danger, 5%) !default;
+  $button-danger-border-color: darken($button-danger-bg, 5%) !default;
   $button-danger-contained-bg-hover: darken($button-danger-bg, 9%) !default;
   $button-danger-contained-bg-focused: darken($button-danger-bg, 12%) !default;
   $button-danger-contained-bg-active: darken($button-danger-bg, 23%) !default;
@@ -577,7 +603,7 @@ $button-success-text-bg-selected: null !default;
   $button-danger-text-bg-focused: $button-danger-outlined-bg-focused !default;
   $button-danger-text-bg-active: $button-danger-outlined-bg-active !default;
   $button-danger-text-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default;
-  $button-success-border-color: darken($base-success, 5%) !default;
+  $button-success-border-color: darken($button-success-bg, 5%) !default;
   $button-success-contained-bg-hover: darken($button-success-bg, 9%) !default;
   $button-success-contained-bg-focused: darken($button-success-bg, 12%) !default;
   $button-success-contained-bg-active: darken($button-success-bg, 23%) !default;
@@ -609,20 +635,22 @@ $button-success-text-bg-selected: null !default;
   $button-normal-text-bg-active: color.change($button-normal-bg-inverted, $alpha: 0.24) !default;
   $button-normal-text-bg-selected: color.change($button-normal-bg-inverted, $alpha: 0.17) !default;
   $button-default-bg: $base-accent !default;
-  $button-default-border-color: darken($base-accent, 5%) !default;
+  $button-default-border-color: darken($button-default-bg, 5%) !default;
   $button-default-contained-bg-hover: darken($button-default-bg, 9%) !default;
   $button-default-contained-bg-focused: darken($button-default-bg, 12%) !default;
   $button-default-contained-bg-active: darken($button-default-bg, 23%) !default;
   $button-default-contained-bg-selected: darken($button-default-bg, 17%) !default;
+  $button-default-outlined-color: darken($button-default-bg, 5%) !default;
   $button-default-outlined-bg-hover: color.change($button-default-border-color, $alpha: 0.1) !default;
   $button-default-outlined-bg-focused: color.change($button-default-border-color, $alpha: 0.1) !default;
   $button-default-outlined-bg-active: color.change($button-default-border-color, $alpha: 0.4) !default;
   $button-default-outlined-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
+  $button-default-text-color: darken($button-default-bg, 5%) !default;
   $button-default-text-bg-hover: $button-default-outlined-bg-hover !default;
   $button-default-text-bg-focused: $button-default-outlined-bg-focused !default;
   $button-default-text-bg-active: $button-default-outlined-bg-active !default;
   $button-default-text-bg-selected: color.change($button-default-bg, $alpha: 0.3) !default;
-  $button-danger-border-color: darken($base-danger, 5%) !default;
+  $button-danger-border-color: darken($button-danger-bg, 5%) !default;
   $button-danger-contained-bg-hover: darken($button-danger-bg, 9%) !default;
   $button-danger-contained-bg-focused: darken($button-danger-bg, 12%) !default;
   $button-danger-contained-bg-active: darken($button-danger-bg, 23%) !default;
@@ -635,7 +663,7 @@ $button-success-text-bg-selected: null !default;
   $button-danger-text-bg-focused: $button-danger-outlined-bg-focused !default;
   $button-danger-text-bg-active: $button-danger-outlined-bg-active !default;
   $button-danger-text-bg-selected: color.change($button-danger-bg, $alpha: 0.3) !default;
-  $button-success-border-color: darken($base-success, 5%) !default;
+  $button-success-border-color: darken($button-success-bg, 5%) !default;
   $button-success-contained-bg-hover: darken($button-success-bg, 9%) !default;
   $button-success-contained-bg-focused: darken($button-success-bg, 12%) !default;
   $button-success-contained-bg-active: darken($button-success-bg, 23%) !default;
diff --git a/packages/devextreme-scss/scss/widgets/generic/button/_mixins.scss b/packages/devextreme-scss/scss/widgets/generic/button/_mixins.scss
index c0a3c3aae0d7..0dffc1478218 100644
--- a/packages/devextreme-scss/scss/widgets/generic/button/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/button/_mixins.scss
@@ -171,7 +171,7 @@
     @include dx-button-styling-variant(
       transparent,
       $button-default-border-color,
-      $button-default-border-color,
+      $button-default-outlined-color,
       $button-default-outlined-bg-hover,
       $button-default-outlined-bg-focused,
       $button-default-outlined-bg-active,
@@ -227,7 +227,7 @@
     @include dx-button-styling-variant(
       transparent,
       transparent,
-      $button-default-border-color,
+      $button-default-text-color,
       $button-default-text-bg-hover,
       $button-default-text-bg-focused,
       $button-default-text-bg-active,
diff --git a/packages/devextreme-scss/scss/widgets/material/button/_colors.scss b/packages/devextreme-scss/scss/widgets/material/button/_colors.scss
index e62e59502352..de5cd6670894 100644
--- a/packages/devextreme-scss/scss/widgets/material/button/_colors.scss
+++ b/packages/devextreme-scss/scss/widgets/material/button/_colors.scss
@@ -60,7 +60,7 @@ $button-normal-bg-inverted: null !default;
 $button-default-color: $base-inverted-text-color !default;
 
 /**
-* $name 20. Selected state text color
+* $name 20. Selected state text color (contained)
 * $type color
 */
 $button-default-selected-color: $base-inverted-text-color !default;
@@ -99,12 +99,35 @@ $button-default-outlined-hover-bg: color.change($button-default-bg, $alpha: 0.08
 $button-default-outlined-focused-bg: color.change($button-default-bg, $alpha: 0.08) !default;
 $button-default-outlined-active-bg: color.change($button-default-bg, $alpha: 0.36) !default;
 $button-default-outlined-selected-bg: color.change($button-default-bg, $alpha: 0.36) !default;
+
+/**
+* $name 11. Text color (outlined)
+* $type color
+*/
+$button-default-outlined-color: $button-default-bg !default;
+$button-default-outlined-border-color: $button-default-bg !default;
+
+/**
+* $name 21. Selected state text color (outlined)
+* $type color
+*/
 $button-default-outlined-selected-color: $button-default-bg !default;
 
 $button-default-text-hover-bg: color.change($button-default-bg, $alpha: 0.08) !default;
 $button-default-text-focused-bg: color.change($button-default-bg, $alpha: 0.08) !default;
 $button-default-text-active-bg: color.change($button-default-bg, $alpha: 0.36) !default;
 $button-default-text-selected-bg: color.change($button-default-bg, $alpha: 0.36) !default;
+
+/**
+* $name 11. Text color (text)
+* $type color
+*/
+$button-default-text-color: $button-default-bg !default;
+
+/**
+* $name 21. Selected state text color (text)
+* $type color
+*/
 $button-default-text-selected-color: $button-default-bg !default;
 
 /**
@@ -271,4 +294,3 @@ $button-normal-text-hover-bg: color.change($button-normal-bg-inverted, $alpha: 0
 $button-normal-text-focused-bg: color.change($button-normal-bg-inverted, $alpha: 0.08) !default;
 $button-normal-text-active-bg: color.change($button-normal-bg-inverted, $alpha: 0.3) !default;
 $button-normal-text-selected-bg: color.change($button-normal-bg-inverted, $alpha: 0.18) !default;
-
diff --git a/packages/devextreme-scss/scss/widgets/material/button/_index.scss b/packages/devextreme-scss/scss/widgets/material/button/_index.scss
index c422110c613a..deb9f042057a 100644
--- a/packages/devextreme-scss/scss/widgets/material/button/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/button/_index.scss
@@ -139,7 +139,7 @@
 
   &.dx-button-default {
     @include dx-button-flat-color-styling(
-      $button-default-bg,
+      $button-default-text-color,
       $button-default-text-hover-bg,
       $button-default-text-focused-bg,
       $button-default-text-active-bg,
@@ -184,8 +184,8 @@
 
   &.dx-button-default {
     @include dx-button-outlined-color-styling(
-      $button-default-bg,
-      $button-default-bg,
+      $button-default-outlined-color,
+      $button-default-outlined-border-color,
       $button-default-outlined-hover-bg,
       $button-default-outlined-focused-bg,
       $button-default-outlined-active-bg,
diff --git a/packages/devextreme-scss/scss/widgets/material/button/_mixins.scss b/packages/devextreme-scss/scss/widgets/material/button/_mixins.scss
index cc02e3a408eb..c641e75cd348 100644
--- a/packages/devextreme-scss/scss/widgets/material/button/_mixins.scss
+++ b/packages/devextreme-scss/scss/widgets/material/button/_mixins.scss
@@ -130,7 +130,14 @@
   }
 }
 
-@mixin dx-button-flat-color-styling($button-color, $hover-bg, $focused-bg, $active-bg, $selected-bg: $active-bg, $selected-color: $button-color) {
+@mixin dx-button-flat-color-styling(
+  $button-color,
+  $hover-bg,
+  $focused-bg,
+  $active-bg,
+  $selected-bg: $active-bg,
+  $selected-color: $button-color
+) {
   @include dx-button-styling-variant(
     transparent,
     $button-color,
@@ -143,7 +150,15 @@
   );
 }
 
-@mixin dx-button-outlined-color-styling($button-color, $border-color, $hover-bg, $focused-bg, $active-bg, $selected-bg, $selected-color) {
+@mixin dx-button-outlined-color-styling(
+  $button-color,
+  $border-color,
+  $hover-bg,
+  $focused-bg,
+  $active-bg,
+  $selected-bg,
+  $selected-color
+) {
   border-width: 1px;
   border-style: solid;
   border-color: $border-color;