ThemeBuilder: it is not possible to change the background color of buttons with the 'Normal' type in the 'Outlined' and 'Text' styling modes (T1212068) (#28692)

Author: EugeniyKiyashko

packages/devextreme-scss/scss/widgets/fluent/button/_colors.scss

@@ -16,11 +16,23 @@ $button-shadow-color: null !default;
 $button-normal-color: $base-text-color !default;
 
 /**
-* $name 15. Background color
+* $name 15. Background color (contained)
 * $type color
 */
 $button-normal-bg: $base-element-bg !default;
 
+/**
+* $name 16. Background color (outlined)
+* $type color
+*/
+$button-normal-outlined-bg: transparent !default;
+
+/**
+* $name 17. Background color (text)
+* $type color
+*/
+$button-normal-text-bg: transparent !default;
+
 /**
 * $name 20. Selected state text color
 * $type color
@@ -50,7 +62,6 @@ $button-normal-active-bg: $base-active-bg !default;
 * $type color
 */
 $button-normal-selected-bg: $base-selected-bg !default;
-$button-normal-bg-inverted: null !default;
 
 /**
 * $name 10. Text color (contained)
@@ -100,6 +111,8 @@ $button-default-selected-bg: null !default;
 */
 $button-default-outlined-color: $base-accent !default;
 $button-default-outlined-border-color: $base-accent !default;
+
+$button-default-outlined-bg: transparent !default;
 $button-default-outlined-hover-bg: null !default;
 $button-default-outlined-focused-bg: null !default;
 $button-default-outlined-active-bg: null !default;
@@ -158,6 +171,7 @@ $button-danger-outlined-border-color: $base-danger !default;
 $button-danger-outlined-color-hover: null !default;
 $button-danger-outlined-color-active: null !default;
 $button-danger-outlined-selected-color: null !default;
+$button-danger-outlined-bg: transparent !default;
 $button-danger-outlined-hover-bg: null !default;
 $button-danger-outlined-focused-bg: null !default;
 $button-danger-outlined-active-bg: null !default;
@@ -210,6 +224,7 @@ $button-success-outlined-border-color: $base-success !default;
 $button-success-outlined-color-hover: null !default;
 $button-success-outlined-color-active: null !default;
 $button-success-outlined-selected-color: null !default;
+$button-success-outlined-bg: transparent !default;
 $button-success-outlined-hover-bg: null !default;
 $button-success-outlined-focused-bg: null !default;
 $button-success-outlined-active-bg: null !default;
@@ -268,9 +283,9 @@ $button-accent-foreground-color: null !default;
   $button-danger-outlined-color-active: $base-danger-active !default;
   $button-danger-outlined-selected-color: $base-danger-selected !default;
 
-  $button-success-outlined-color-hover: $button-success-selected-bg !default;
-  $button-success-outlined-color-active: $button-success-active-bg !default;
-  $button-success-outlined-selected-color: $button-success-selected-bg !default;
+  $button-success-outlined-color-hover: darken(desaturate($base-success, 0.22), 12.16) !default;
+  $button-success-outlined-color-active: darken(desaturate($base-success, 0.95), 19.22) !default;
+  $button-success-outlined-selected-color: $button-success-outlined-color-hover;
 
   $button-default-color: $base-inverted-text-color !default;
   $button-default-selected-color: $base-inverted-text-color !default;
@@ -279,7 +294,6 @@ $button-accent-foreground-color: null !default;
   $button-success-color: $base-inverted-text-color !default;
   $button-success-selected-color: $base-inverted-text-color !default;
   $button-shadow-color: color.change($base-shadow-color, $alpha: 0.24) !default;
-  $button-normal-bg-inverted: darken($button-normal-bg, 100%) !default;
 }
 
 @if $mode == "dark" {
@@ -309,9 +323,9 @@ $button-accent-foreground-color: null !default;
   $button-danger-outlined-active-bg: darken(desaturate($base-danger, 4.6), 22.9) !default;
   $button-danger-outlined-selected-bg: darken(desaturate($base-danger, 4.3), 40.4) !default;
 
-  $button-success-outlined-color-hover: $button-success-active-bg !default;
-  $button-success-outlined-color-active: $button-success-active-bg !default;
-  $button-success-outlined-selected-color: $button-success-active-bg !default;
+  $button-success-outlined-color-hover: lighten(saturate($base-success, 10.6), 45.3) !default;
+  $button-success-outlined-color-active: $button-success-outlined-color-hover !default;
+  $button-success-outlined-selected-color: $button-success-outlined-color-hover !default;
 
   $button-success-outlined-hover-bg: darken(saturate($base-success, 39.4), 42.7) !default;
   $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default;
@@ -325,7 +339,6 @@ $button-accent-foreground-color: null !default;
   $button-success-color: $base-typography-bg !default;
   $button-success-selected-color: $base-typography-bg !default;
   $button-shadow-color: color.change($base-shadow-color, $alpha: 0.4) !default;
-  $button-normal-bg-inverted: lighten($button-normal-bg, 100%) !default;
 }
 
 $button-default-icon-color: $button-default-color !default;
@@ -336,12 +349,12 @@ $button-success-icon-color: $button-success-color !default;
 $button-disabled-text-color: $base-foreground-disabled !default;
 
 $button-normal-outlined-hover-bg: $button-normal-hover-bg !default;
-$button-normal-outlined-focused-bg: $button-normal-hover-bg !default;
+$button-normal-outlined-focused-bg: $button-normal-focused-bg !default;
 $button-normal-outlined-active-bg: $button-normal-active-bg !default;
 $button-normal-outlined-selected-bg: $button-normal-selected-bg !default;
 
 $button-normal-text-hover-bg: $button-normal-hover-bg !default;
-$button-normal-text-focused-bg: $button-normal-hover-bg !default;
+$button-normal-text-focused-bg: $button-normal-focused-bg !default;
 $button-normal-text-active-bg: $button-normal-active-bg !default;
 $button-normal-text-selected-bg: $button-normal-selected-bg !default;
 
@@ -381,6 +394,7 @@ $button-default-text-color-active: $button-default-outlined-color-active !defaul
 */
 $button-default-text-selected-color: $button-accent-foreground-color !default;
 
+$button-default-text-bg: transparent !default;
 $button-default-text-hover-bg: $button-default-outlined-hover-bg !default;
 $button-default-text-focused-bg: $button-default-outlined-focused-bg !default;
 $button-default-text-active-bg: $button-default-outlined-active-bg !default;
@@ -391,6 +405,7 @@ $button-danger-text-color-hover: $button-danger-outlined-color-hover !default;
 $button-danger-text-color-active: $button-danger-outlined-color-active !default;
 $button-danger-text-selected-color: $button-danger-outlined-selected-color !default;
 
+$button-danger-text-bg: transparent !default;
 $button-danger-text-hover-bg: $button-danger-outlined-hover-bg !default;
 $button-danger-text-focused-bg: $button-danger-outlined-focused-bg !default;
 $button-danger-text-active-bg: $button-danger-outlined-active-bg !default;
@@ -401,6 +416,7 @@ $button-success-text-color-hover: $button-success-outlined-color-hover !default;
 $button-success-text-color-active: $button-success-outlined-color-active !default;
 $button-success-text-selected-color: $button-success-outlined-selected-color !default;
 
+$button-success-text-bg: transparent !default;
 $button-success-text-hover-bg: $button-success-outlined-hover-bg !default;
 $button-success-text-focused-bg: $button-success-outlined-hover-bg !default;
 $button-success-text-active-bg: $button-success-outlined-active-bg !default;

packages/devextreme-scss/scss/widgets/fluent/button/_index.scss

@@ -107,6 +107,7 @@
     $button-normal-color,
     $button-normal-color,
     $button-normal-color,
+    $button-normal-text-bg,
     $button-normal-text-hover-bg,
     $button-normal-text-focused-bg,
     $button-normal-text-active-bg,
@@ -119,6 +120,7 @@
       $button-default-text-color,
       $button-default-text-color-hover,
       $button-default-text-color-active,
+      $button-default-text-bg,
       $button-default-text-hover-bg,
       $button-default-text-focused-bg,
       $button-default-text-active-bg,
@@ -132,6 +134,7 @@
       $button-danger-text-color,
       $button-danger-text-color-hover,
       $button-danger-text-color-active,
+      $button-danger-text-bg,
       $button-danger-text-hover-bg,
       $button-danger-text-focused-bg,
       $button-danger-text-active-bg,
@@ -145,6 +148,7 @@
       $button-success-text-color,
       $button-success-text-color-hover,
       $button-success-text-color-active,
+      $button-success-text-bg,
       $button-success-text-hover-bg,
       $button-success-text-focused-bg,
       $button-success-text-active-bg,
@@ -160,6 +164,7 @@
     $button-normal-color,
     $button-normal-color,
     $base-border-color,
+    $button-normal-outlined-bg,
     $button-normal-outlined-hover-bg,
     $button-normal-outlined-focused-bg,
     $button-normal-outlined-active-bg,
@@ -173,6 +178,7 @@
       $button-default-outlined-color-hover,
       $button-default-outlined-color-active,
       $button-default-outlined-border-color,
+      $button-default-outlined-bg,
       $button-default-outlined-hover-bg,
       $button-default-outlined-focused-bg,
       $button-default-outlined-active-bg,
@@ -187,6 +193,7 @@
       $button-danger-outlined-color-hover,
       $button-danger-outlined-color-active,
       $button-danger-outlined-border-color,
+      $button-danger-outlined-bg,
       $button-danger-outlined-hover-bg,
       $button-danger-outlined-focused-bg,
       $button-danger-outlined-active-bg,
@@ -201,6 +208,7 @@
       $button-success-outlined-color-hover,
       $button-success-outlined-color-active,
       $button-success-outlined-border-color,
+      $button-success-outlined-bg,
       $button-success-outlined-hover-bg,
       $button-success-outlined-focused-bg,
       $button-success-outlined-active-bg,

packages/devextreme-scss/scss/widgets/fluent/button/_mixins.scss

@@ -149,23 +149,24 @@
   $button-color,
   $button-color-hover,
   $button-color-active,
-  $hover-bg,
-  $focused-bg,
-  $active-bg,
-  $selected-bg: $active-bg,
-  $selected-color: $button-color
+  $button-bg,
+  $button-hover-bg,
+  $button-focused-bg,
+  $button-active-bg,
+  $button-selected-bg: $button-active-bg,
+  $button-selected-color: $button-color
 ) {
   @include dx-button-styling-variant(
-    transparent,
+    $button-bg,
     $button-color,
     $button-color-hover,
     $button-color-active,
-    $hover-bg,
-    $focused-bg,
-    $active-bg,
+    $button-hover-bg,
+    $button-focused-bg,
+    $button-active-bg,
     $button-color,
-    $selected-bg,
-    $selected-color,
+    $button-selected-bg,
+    $button-selected-color,
   );
 }
 
@@ -174,26 +175,27 @@
   $button-color-hover,
   $button-color-active,
   $border-color,
-  $hover-bg,
-  $focused-bg,
-  $active-bg,
-  $selected-bg,
-  $selected-color: $button-color-active,
+  $button-bg,
+  $button-hover-bg,
+  $button-focused-bg,
+  $button-active-bg,
+  $button-selected-bg,
+  $button-selected-color: $button-color-active,
 ) {
   border-width: 1px;
   border-style: solid;
   border-color: $border-color;
 
   @include dx-button-styling-variant(
-    transparent,
+    $button-bg,
     $button-color,
     $button-color-hover,
     $button-color-active,
-    $hover-bg,
-    $focused-bg,
-    $active-bg,
+    $button-hover-bg,
+    $button-focused-bg,
+    $button-active-bg,
     $button-color,
-    $selected-bg,
-    $selected-color,
+    $button-selected-bg,
+    $button-selected-color,
   );
 }

packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss

@@ -777,6 +777,7 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
       $button-default-text-color,
       $button-default-text-color-hover,
       $button-default-text-color-active,
+      $button-default-text-bg,
       $button-default-text-hover-bg,
       $button-default-text-focused-bg,
       $button-default-text-active-bg

packages/devextreme-scss/scss/widgets/fluent/toolbar/_index.scss

@@ -100,6 +100,7 @@
         $button-normal-color,
         $button-normal-color,
         $button-normal-color,
+        $button-normal-text-bg,
         $button-normal-text-hover-bg,
         $button-normal-text-focused-bg,
         $button-normal-text-active-bg
@@ -111,6 +112,7 @@
         $button-default-text-color,
         $button-default-text-color-hover,
         $button-default-text-color-active,
+        $button-default-text-bg,
         $button-default-text-hover-bg,
         $button-default-text-focused-bg,
         $button-default-text-active-bg
@@ -122,6 +124,7 @@
         $button-danger-bg,
         $button-danger-bg,
         $button-danger-bg,
+        $button-danger-text-bg,
         $button-danger-text-hover-bg,
         $button-danger-text-focused-bg,
         $button-danger-text-active-bg
@@ -133,6 +136,7 @@
         $button-success-bg,
         $button-success-bg,
         $button-success-bg,
+        $button-success-text-bg,
         $button-success-text-hover-bg,
         $button-success-text-focused-bg,
         $button-success-text-active-bg