ThemeBuilder - Text Color parameter is not applied to Outlined and Te…

…xt buttons (T1212078) (DevExpress#28636)

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,13 +94,21 @@ $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;
 $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;

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,

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,

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;
-

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,

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;