devextreme-themebuilder 23.2.2-beta → 23.2.3

package/data/scss/widgets/fluent/_sizes.scss

@@ -1,4 +1,3 @@
-$fluent-accordion-item-opened-margin: getCustomVar(("$fluent-accordion-item-opened-margin")) !default;
 $fluent-button-height: getCustomVar(("$fluent-button-height")) !default;
 $fluent-button-icon-size: getCustomVar(("$fluent-button-icon-size")) !default;
 $fluent-button-icon-margin: getCustomVar(("$fluent-button-icon-margin")) !default;
@@ -17,7 +16,6 @@ $fluent-base-icon-margin: 8px !default;
 $fluent-base-inline-horizontal-padding: null !default;
 $fluent-base-border-radius: null !default;
 $fluent-html-editor-add-image-dialog-base-padding: 5px !default;
-$fluent-accordion-item-opened-margin: null !default;
 $fluent-button-height: null !default;
 $fluent-button-icon-size: null !default;
 $fluent-button-icon-margin: null !default;
@@ -29,12 +27,11 @@ $fluent-button-icon-margin: null !default;
   $fluent-base-font-size: 14px !default;
 
   // Base sizes
-  $fluent-base-inline-widget-height: 32px !default; // 48px !default;
-  $fluent-base-inline-block-height: 20px !default; // 19px !default;
-  $fluent-base-icon-size: 20px !default; // 24px !default
-  $fluent-base-inline-horizontal-padding: 12px !default; // 10px !default;
+  $fluent-base-inline-widget-height: 32px !default;
+  $fluent-base-inline-block-height: 20px !default;
+  $fluent-base-icon-size: 20px !default;
+  $fluent-base-inline-horizontal-padding: 12px !default;
   $fluent-base-border-radius: 4px !default;
-  $fluent-accordion-item-opened-margin: 0 !default;
   $fluent-button-height: 32px !default;
   $fluent-button-icon-size: 20px !default;
   $fluent-button-icon-margin: 8px !default;
@@ -44,15 +41,14 @@ $fluent-button-icon-margin: null !default;
   $fluent-size-postfix: ".compact" !default;
 
   // Font sizes
-  $fluent-base-font-size: 12px !default; // 13px !default;
+  $fluent-base-font-size: 12px !default;
 
   // Base sizes
-  $fluent-base-inline-widget-height: 24px !default; // 32px !default;
-  $fluent-base-inline-block-height: 16px !default;// 15px !default;
-  $fluent-base-icon-size: 16px !default; // 18px !default;
+  $fluent-base-inline-widget-height: 24px !default;
+  $fluent-base-inline-block-height: 16px !default;
+  $fluent-base-icon-size: 16px !default;
   $fluent-base-inline-horizontal-padding: 8px !default;
-  $fluent-base-border-radius: 4px !default; // 2px !default;
-  $fluent-accordion-item-opened-margin: 8px !default;
+  $fluent-base-border-radius: 4px !default;
   $fluent-button-height: 24px !default;
   $fluent-button-icon-size: 16px !default;
   $fluent-button-icon-margin: 4px !default;
@@ -64,7 +60,6 @@ $base-border-radius: $fluent-base-border-radius !default;
 
 $fluent-base-standard-texteditor-input-horizontal-padding: 0 !default;
 $never-used: collector((
-"$fluent-accordion-item-opened-margin": $fluent-accordion-item-opened-margin,
 "$fluent-button-height": $fluent-button-height,
 "$fluent-button-icon-size": $fluent-button-icon-size,
 "$fluent-button-icon-margin": $fluent-button-icon-margin,

package/data/scss/widgets/fluent/accordion/_colors.scss

@@ -1,6 +1,5 @@
 $accordion-title-color: getCustomVar(("$accordion-title-color")) !default;
 $fluent-accordion-title-font-size: getCustomVar(("$fluent-accordion-title-font-size")) !default;
-$accordion-item-border-color: getCustomVar(("$accordion-item-border-color")) !default;
 
 @use "sass:color";
 @use "../sizes" as *;
@@ -11,17 +10,13 @@ $accordion-item-border-color: getCustomVar(("$accordion-item-border-color")) !de
 $accordion-color: $base-text-color !default;
 $accordion-title-color: inherit !default;
 $fluent-accordion-title-font-size: $fluent-base-font-size !default;
-$accordion-item-border-color: transparent !default;
 
-$accordion-item-shadow: none !default;
 $accordion-background-color: transparent !default;
 $accordion-title-active-color: $accordion-color !default;
-$accordion-title-bg-hover: $base-bg-hover !default;
-$accordion-title-bg-active: $base-bg-hover !default;
-$accordion-title-hover-border-color: transparent !default;
+$accordion-title-bg-hover: $base-hover-bg !default;
+$accordion-title-bg-active: $base-hover-bg !default;
 $accordion-disabled-color: $base-foreground-disabled !default;
 $never-used: collector((
 "$accordion-title-color": $accordion-title-color,
 "$fluent-accordion-title-font-size": $fluent-accordion-title-font-size,
-"$accordion-item-border-color": $accordion-item-border-color,
 ));

package/data/scss/widgets/fluent/accordion/_index.scss

@@ -15,7 +15,6 @@
 }
 
 .dx-accordion-item {
-  box-shadow: $accordion-item-shadow;
   transition: margin 200ms cubic-bezier(0.4, 0, 0.2, 1);
   will-change: margin, height;
 
@@ -35,6 +34,8 @@
 }
 
 .dx-accordion-item-opened {
+  margin-block: $fluent-accordion-item-opened-margin;
+
   & > .dx-accordion-item-title {
     &::before {
       content: "\f014";

package/data/scss/widgets/fluent/accordion/_sizes.scss

@@ -1,3 +1,5 @@
+$fluent-accordion-item-opened-margin: getCustomVar(("$fluent-accordion-item-opened-margin")) !default;
+
 @use "../sizes" as *;
 
 // adduse
@@ -11,13 +13,15 @@ $fluent-accordion-shadow: null !default;
 $accordion-title-icon-margin: null !default;
 $accordion-title-icon-size: null !default;
 $accordion-item-border-radius: $fluent-base-border-radius !default;
+$fluent-accordion-item-opened-margin: null !default;
 
 @if $size == "default" {
   $fluent-accordion-title-horizontal-padding: 12px !default;
   $fluent-accordion-body-padding: 12px !default;
-  $fluent-accordion-title-height: 44px !default; // 48px !default;
+  $fluent-accordion-title-height: 44px !default;
   $accordion-title-icon-margin: 8px !default;
   $accordion-title-icon-size: 20px !default;
+  $fluent-accordion-item-opened-margin: 0 !default;
 }
 
 @else if $size == "compact" {
@@ -26,4 +30,8 @@ $accordion-item-border-radius: $fluent-base-border-radius !default;
   $fluent-accordion-title-height: 32px !default;
   $accordion-title-icon-margin: 6px !default;
   $accordion-title-icon-size: 16px !default;
+  $fluent-accordion-item-opened-margin: 0 !default;
 }
+$never-used: collector((
+"$fluent-accordion-item-opened-margin": $fluent-accordion-item-opened-margin,
+));

package/data/scss/widgets/fluent/badge/_colors.scss

@@ -7,16 +7,18 @@ $badge-bg: getCustomVar(("$badge-bg")) !default;
 
 // adduse
 $badge-color: null !default;
-$badge-bg: $base-accent-bg !default;
+$badge-bg: null !default;
 
 $badge-text-color-disabled: $base-foreground-disabled !default;
 $badge-background-color-disabled: $base-background-disabled !default;
 
 @if $mode == "light" {
+  $badge-bg: $base-accent !default;
   $badge-color: $base-inverted-text-color !default;
 }
 
 @if $mode == "dark" {
+  $badge-bg: darken(desaturate(adjust-hue($base-accent, 358.4), 8.6), 26.7) !default;
   $badge-color: $base-text-color !default;
 }
 $never-used: collector((

package/data/scss/widgets/fluent/button/_colors.scss

@@ -1,27 +1,27 @@
 $button-normal-color: getCustomVar(("$button-normal-color")) !default;
-$button-normal-selected-color: getCustomVar(("$button-normal-selected-color")) !default;
 $button-normal-bg: getCustomVar(("$button-normal-bg")) !default;
+$button-normal-selected-color: getCustomVar(("$button-normal-selected-color")) !default;
 $button-normal-hover-bg: getCustomVar(("$button-normal-hover-bg")) !default;
 $button-normal-focused-bg: getCustomVar(("$button-normal-focused-bg")) !default;
 $button-normal-active-bg: getCustomVar(("$button-normal-active-bg")) !default;
 $button-normal-selected-bg: getCustomVar(("$button-normal-selected-bg")) !default;
 $button-default-color: getCustomVar(("$button-default-color")) !default;
-$button-default-selected-color: getCustomVar(("$button-default-selected-color")) !default;
 $button-default-bg: getCustomVar(("$button-default-bg")) !default;
+$button-default-selected-color: getCustomVar(("$button-default-selected-color")) !default;
 $button-default-hover-bg: getCustomVar(("$button-default-hover-bg")) !default;
 $button-default-focused-bg: getCustomVar(("$button-default-focused-bg")) !default;
 $button-default-active-bg: getCustomVar(("$button-default-active-bg")) !default;
 $button-default-selected-bg: getCustomVar(("$button-default-selected-bg")) !default;
 $button-danger-color: getCustomVar(("$button-danger-color")) !default;
-$button-danger-selected-color: getCustomVar(("$button-danger-selected-color")) !default;
 $button-danger-bg: getCustomVar(("$button-danger-bg")) !default;
+$button-danger-selected-color: getCustomVar(("$button-danger-selected-color")) !default;
 $button-danger-hover-bg: getCustomVar(("$button-danger-hover-bg")) !default;
 $button-danger-focused-bg: getCustomVar(("$button-danger-focused-bg")) !default;
 $button-danger-active-bg: getCustomVar(("$button-danger-active-bg")) !default;
 $button-danger-selected-bg: getCustomVar(("$button-danger-selected-bg")) !default;
 $button-success-color: getCustomVar(("$button-success-color")) !default;
-$button-success-selected-color: getCustomVar(("$button-success-selected-color")) !default;
 $button-success-bg: getCustomVar(("$button-success-bg")) !default;
+$button-success-selected-color: getCustomVar(("$button-success-selected-color")) !default;
 $button-success-hover-bg: getCustomVar(("$button-success-hover-bg")) !default;
 $button-success-focused-bg: getCustomVar(("$button-success-focused-bg")) !default;
 $button-success-active-bg: getCustomVar(("$button-success-active-bg")) !default;
@@ -39,22 +39,23 @@ $button-disabled-icon-opacity: 0.6 !default;
 $button-disabled-text-opacity: 0.6 !default;
 $button-shadow-color: null !default;
 $button-normal-color: $base-text-color !default;
+$button-normal-bg: $base-element-bg !default;
 $button-normal-selected-color: $base-text-color !default;
-$button-normal-bg: $base-bg !default;
-$button-normal-hover-bg: $base-bg-hover !default;
-$button-normal-focused-bg: $base-bg-hover !default;
-$button-normal-active-bg: $base-bg-active !default;
-$button-normal-selected-bg: $base-bg-selected !default;
+$button-normal-hover-bg: $base-hover-bg !default;
+$button-normal-focused-bg: $base-focus-bg !default;
+$button-normal-active-bg: $base-active-bg !default;
+$button-normal-selected-bg: $base-selected-bg !default;
 $button-normal-bg-inverted: null !default;
 $button-default-color: null !default;
+$button-default-bg: $base-accent !default;
 $button-default-selected-color: null !default;
-$button-default-bg: null !default;
 $button-default-hover-bg: null !default;
 $button-default-focused-bg: null !default;
 $button-default-active-bg: null !default;
 $button-default-selected-bg: null !default;
 
 $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;
@@ -62,14 +63,15 @@ $button-default-outlined-selected-bg: null !default;
 
 $button-default-text-color: $base-accent !default;
 $button-danger-color: null !default;
-$button-danger-selected-color: null !default;
 $button-danger-bg: $base-danger !default;
+$button-danger-selected-color: null !default;
 $button-danger-hover-bg: $base-danger-hover !default;
 $button-danger-focused-bg: $base-danger-hover !default;
 $button-danger-active-bg: $base-danger-active !default;
 $button-danger-selected-bg: $base-danger-selected !default;
 
-$button-danger-outlined-color: null !default;
+$button-danger-outlined-color: $base-danger !default;
+$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;
@@ -78,14 +80,15 @@ $button-danger-outlined-focused-bg: null !default;
 $button-danger-outlined-active-bg: null !default;
 $button-danger-outlined-selected-bg: null !default;
 $button-success-color: null !default;
-$button-success-selected-color: null !default;
 $button-success-bg: $base-success !default;
-$button-success-hover-bg: $base-success-hover !default;
-$button-success-focused-bg: $base-success-hover !default;
-$button-success-active-bg: $base-success-active !default;
-$button-success-selected-bg: $base-success-selected !default;
+$button-success-selected-color: null !default;
+$button-success-hover-bg: null !default;
+$button-success-focused-bg: null !default;
+$button-success-active-bg: null !default;
+$button-success-selected-bg: null !default;
 
-$button-success-outlined-color: null !default;
+$button-success-outlined-color: $base-success !default;
+$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;
@@ -97,38 +100,59 @@ $button-success-outlined-selected-bg: null !default;
 $button-accent-foreground-color: null !default;
 
 @if $mode == "light" {
-  $button-accent-foreground-color: darken(desaturate(adjust-hue($base-accent, -2), 9.10), 23.53) !default; // #0a2e4a
+  $button-accent-foreground-color: darken(desaturate(adjust-hue($base-accent, -2), 9.10), 23.53) !default;
 
-  $button-default-bg: $base-accent !default;
   $button-default-hover-bg: $base-accent-hover !default;
   $button-default-focused-bg: $base-accent-hover !default;
   $button-default-active-bg: $base-accent-active !default;
   $button-default-selected-bg: $base-accent-selected !default;
 
-  $button-default-outlined-hover-bg: lighten(desaturate(adjust-hue($base-accent, 3.8), 11.4), 55.5) !default; // #EBF3FC
+  $button-success-hover-bg: darken(saturate($base-success, 0.63), 2.75) !default;
+  $button-success-focused-bg: $button-success-hover-bg !default;
+  $button-success-active-bg: darken(desaturate($base-success, 0.95), 19.22) !default;
+  $button-success-selected-bg: darken(desaturate($base-success, 0.22), 12.16) !default;
+
+  @if $color == "blue" {
+    $button-default-outlined-hover-bg: lighten(desaturate(adjust-hue($base-accent, 3.8), 11.4), 55.5) !default;
+    $button-default-outlined-selected-bg: darken(saturate(adjust-hue($button-default-outlined-hover-bg, -1), 10.40), 5.49) !default;
+    $button-default-outlined-active-bg: darken(saturate(adjust-hue($button-default-outlined-hover-bg, -1), 17.00), 17.06) !default;
+
+    $button-danger-outlined-hover-bg: lighten(saturate(adjust-hue($base-danger, 1.5), 0.6), 46.7) !default;
+    $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default;
+    $button-danger-outlined-active-bg: darken(saturate(adjust-hue($button-danger-outlined-hover-bg, 358.9), 2.2), 13.9) !default;
+    $button-danger-outlined-selected-bg: lighten(desaturate(adjust-hue($button-danger-outlined-active-bg, 359.1), 0.6), 7.1) !default;
+
+    $button-success-outlined-hover-bg: lighten(desaturate($base-success, 29.8), 68.8) !default;
+    $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default;
+    $button-success-outlined-active-bg: lighten(desaturate($base-success, 34.9), 46.1) !default;
+    $button-success-outlined-selected-bg: lighten(desaturate($base-success, 35), 57.6) !default;
+  }
+
+  @if $color == "saas" {
+    $button-default-outlined-hover-bg: mix($base-bg, $base-accent, 90%) !default;
+    $button-default-outlined-selected-bg: darken($button-default-outlined-hover-bg, 4) !default;
+    $button-default-outlined-active-bg: darken($button-default-outlined-hover-bg, 4) !default;
+
+    $button-danger-outlined-hover-bg: mix($base-bg, $base-danger, 90%) !default;
+    $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default;
+    $button-danger-outlined-active-bg: darken($button-danger-outlined-hover-bg, 4) !default;
+    $button-danger-outlined-selected-bg: darken($button-danger-outlined-hover-bg, 4) !default;
+  
+    $button-success-outlined-hover-bg: mix($base-bg, $base-success, 90%) !default;
+    $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default;
+    $button-success-outlined-active-bg: darken($button-success-outlined-hover-bg, 4) !default;
+    $button-success-outlined-selected-bg: darken($button-success-outlined-hover-bg, 4) !default;
+  }
+
   $button-default-outlined-focused-bg: $button-default-outlined-hover-bg !default;
-  $button-default-outlined-active-bg: darken(saturate(adjust-hue($button-default-outlined-hover-bg, -1), 17.00), 17.06) !default;
-  $button-default-outlined-selected-bg: darken(saturate(adjust-hue($button-default-outlined-hover-bg, -1), 10.40), 5.49) !default;
 
-  $button-danger-outlined-color: $base-danger !default;
   $button-danger-outlined-color-hover: $base-danger-selected !default;
   $button-danger-outlined-color-active: $base-danger-active !default;
   $button-danger-outlined-selected-color: $base-danger-selected !default;
 
-  $button-danger-outlined-hover-bg: lighten(saturate(adjust-hue($base-danger, 1.5), 0.6), 46.7) !default; // #FDF6F6
-  $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default;
-  $button-danger-outlined-active-bg: darken(saturate(adjust-hue($button-danger-outlined-hover-bg, 358.9), 2.2), 13.9) !default; // #F1BBBC
-  $button-danger-outlined-selected-bg: lighten(desaturate(adjust-hue($button-danger-outlined-active-bg, 359.1), 0.6), 7.1) !default; // #F7D9DA
-
-  $button-success-outlined-color: $base-success !default;
-  $button-success-outlined-color-hover: $base-success-selected !default;
-  $button-success-outlined-color-active: $base-success-active !default;
-  $button-success-outlined-selected-color: $base-success-selected !default;
-
-  $button-success-outlined-hover-bg: lighten(desaturate($base-success, 29.8), 68.8) !default; // #F1FAF1
-  $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default;
-  $button-success-outlined-active-bg: lighten(desaturate($base-success, 34.9), 46.1) !default; // #9FD89F
-  $button-success-outlined-selected-bg: lighten(desaturate($base-success, 35), 57.6) !default; // #C9E9C9
+  $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-default-color: $base-inverted-text-color !default;
   $button-default-selected-color: $base-inverted-text-color !default;
@@ -141,45 +165,47 @@ $button-accent-foreground-color: null !default;
 }
 
 @if $mode == "dark" {
-  $button-accent-foreground-color: lighten(desaturate(adjust-hue($base-accent, 0.9), 2.2), 22.4) !default; // #B4D6FA
+  $button-accent-foreground-color: lighten(desaturate(adjust-hue($base-accent, 0.9), 2.2), 22.4) !default;
 
-  $button-default-bg: $base-accent !default;
   $button-default-hover-bg: $base-accent-hover !default;
   $button-default-focused-bg: $base-accent-hover !default;
   $button-default-active-bg: $button-accent-foreground-color !default;
-  $button-default-selected-bg: lighten(desaturate($button-default-active-bg, 6.4), 5.3) !default; // #CFE4FA
+  $button-default-selected-bg: lighten(desaturate($button-default-active-bg, 6.4), 5.3) !default;
 
-  $button-default-outlined-hover-bg: darken(desaturate(adjust-hue($base-accent, 356.3), 14.7), 49.4) !default; // #082338
+  $button-success-hover-bg: lighten(saturate($base-success, 5.4), 22.5) !default;
+  $button-success-focused-bg: $button-success-hover-bg !default;
+  $button-success-active-bg: lighten(saturate($base-success, 10.6), 45.3) !default;
+  $button-success-selected-bg: lighten(saturate($base-success, 5.3), 34.1) !default;
+
+  $button-default-outlined-hover-bg: darken(desaturate(adjust-hue($base-accent, 356.3), 14.7), 49.4) !default;
   $button-default-outlined-focused-bg: $button-default-outlined-hover-bg !default;
   $button-default-outlined-active-bg: $base-accent-selected !default;
-  $button-default-outlined-selected-bg: darken(desaturate(adjust-hue($base-accent-bg, -3), 3.75), 14.51) !default; // #0C3B5E
+  $button-default-outlined-selected-bg: darken(desaturate(adjust-hue($base-accent, -4), 12.33), 41.18) !default;
 
-  $button-danger-outlined-color: $base-danger !default;
   $button-danger-outlined-color-hover: $base-danger-active !default;
   $button-danger-outlined-color-active: $base-danger-active !default;
   $button-danger-outlined-selected-color: $base-danger-active !default;
 
-  $button-danger-outlined-hover-bg: darken(desaturate($base-danger, 5.1), 53.5) !default; // #3F1011
-  $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !default; // #3F1011
-  $button-danger-outlined-active-bg: darken(desaturate($base-danger, 4.6), 22.9) !default; // #BC2F32
-  $button-danger-outlined-selected-bg: darken(desaturate($base-danger, 4.3), 40.4) !default; // #751D1F
-
-  $button-success-outlined-color: $base-success !default;
-  $button-success-outlined-color-hover: $base-success-active !default;
-  $button-success-outlined-color-active: $base-success-active !default;
-  $button-success-outlined-selected-color: $base-success-active !default;
-
-  $button-success-outlined-hover-bg: darken(saturate($base-success, 39.4), 42.7) !default; // #052505
-  $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default; // #052505
-  $button-success-outlined-active-bg: darken(saturate($base-success, 39), 33.1) !default; // #0B500B
-  $button-success-outlined-selected-bg: darken(saturate($base-success, 40.1), 35.7) !default; // #094509
-
-  $button-default-color: $typography-bg !default;
-  $button-default-selected-color: $typography-bg !default;
-  $button-danger-color: $typography-bg !default;
-  $button-danger-selected-color: $typography-bg !default;
-  $button-success-color: $typography-bg !default;
-  $button-success-selected-color: $typography-bg !default;
+  $button-danger-outlined-hover-bg: darken(desaturate($base-danger, 5.1), 53.5) !default;
+  $button-danger-outlined-focused-bg: $button-danger-outlined-hover-bg !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-hover-bg: darken(saturate($base-success, 39.4), 42.7) !default;
+  $button-success-outlined-focused-bg: $button-success-outlined-hover-bg !default;
+  $button-success-outlined-active-bg: darken(saturate($base-success, 39), 33.1) !default;
+  $button-success-outlined-selected-bg: darken(saturate($base-success, 40.1), 35.7) !default;
+
+  $button-default-color: $base-typography-bg !default;
+  $button-default-selected-color: $base-typography-bg !default;
+  $button-danger-color: $base-typography-bg !default;
+  $button-danger-selected-color: $base-typography-bg !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;
 }
@@ -235,29 +261,29 @@ $button-success-text-active-bg: $button-success-outlined-active-bg !default;
 $button-success-text-selected-bg: $button-success-outlined-selected-bg !default;
 $never-used: collector((
 "$button-normal-color": $button-normal-color,
-"$button-normal-selected-color": $button-normal-selected-color,
 "$button-normal-bg": $button-normal-bg,
+"$button-normal-selected-color": $button-normal-selected-color,
 "$button-normal-hover-bg": $button-normal-hover-bg,
 "$button-normal-focused-bg": $button-normal-focused-bg,
 "$button-normal-active-bg": $button-normal-active-bg,
 "$button-normal-selected-bg": $button-normal-selected-bg,
 "$button-default-color": $button-default-color,
-"$button-default-selected-color": $button-default-selected-color,
 "$button-default-bg": $button-default-bg,
+"$button-default-selected-color": $button-default-selected-color,
 "$button-default-hover-bg": $button-default-hover-bg,
 "$button-default-focused-bg": $button-default-focused-bg,
 "$button-default-active-bg": $button-default-active-bg,
 "$button-default-selected-bg": $button-default-selected-bg,
 "$button-danger-color": $button-danger-color,
-"$button-danger-selected-color": $button-danger-selected-color,
 "$button-danger-bg": $button-danger-bg,
+"$button-danger-selected-color": $button-danger-selected-color,
 "$button-danger-hover-bg": $button-danger-hover-bg,
 "$button-danger-focused-bg": $button-danger-focused-bg,
 "$button-danger-active-bg": $button-danger-active-bg,
 "$button-danger-selected-bg": $button-danger-selected-bg,
 "$button-success-color": $button-success-color,
-"$button-success-selected-color": $button-success-selected-color,
 "$button-success-bg": $button-success-bg,
+"$button-success-selected-color": $button-success-selected-color,
 "$button-success-hover-bg": $button-success-hover-bg,
 "$button-success-focused-bg": $button-success-focused-bg,
 "$button-success-active-bg": $button-success-active-bg,

package/data/scss/widgets/fluent/button/_index.scss

@@ -49,11 +49,6 @@
 
   .dx-button-content {
     position: relative;
-
-    .dx-inkripple {
-      overflow: hidden;
-      display: block;
-    }
   }
 
   @include dx-button-styling(
@@ -177,7 +172,7 @@
       $button-default-outlined-color,
       $button-default-outlined-color-hover,
       $button-default-outlined-color-active,
-      $button-default-bg,
+      $button-default-outlined-border-color,
       $button-default-outlined-hover-bg,
       $button-default-outlined-focused-bg,
       $button-default-outlined-active-bg,
@@ -191,7 +186,7 @@
       $button-danger-outlined-color,
       $button-danger-outlined-color-hover,
       $button-danger-outlined-color-active,
-      $button-danger-bg,
+      $button-danger-outlined-border-color,
       $button-danger-outlined-hover-bg,
       $button-danger-outlined-focused-bg,
       $button-danger-outlined-active-bg,
@@ -205,7 +200,7 @@
       $button-success-outlined-color,
       $button-success-outlined-color-hover,
       $button-success-outlined-color-active,
-      $button-success-bg,
+      $button-success-outlined-border-color,
       $button-success-outlined-hover-bg,
       $button-success-outlined-focused-bg,
       $button-success-outlined-active-bg,

package/data/scss/widgets/fluent/button/_mixins.scss

@@ -99,10 +99,6 @@ $fluent-button-padding: $fluent-button-vertical-padding $fluent-button-horizonta
       color: $text-color-active;
     }
   }
-
-  .dx-inkripple-wave {
-    background-color: color.change($text-color, $alpha: 0.2);
-  }
 }
 
 @mixin dx-button-styling(

package/data/scss/widgets/fluent/calendar/_colors.scss

@@ -13,8 +13,7 @@ $calendar-cell-selected-bg: getCustomVar(("$calendar-cell-selected-bg")) !defaul
 $calendar-color: $base-text-color !default;
 $calendar-navigator-text-color: $button-normal-color !default;
 $calendar-header-color: $calendar-color !default;
-$calendar-cell-other-color: $base-neutral-foreground3 !default;
-$calendar-cell-other-hover-color: $base-neutral-foreground3 !default;
+$calendar-cell-other-color: null !default;
 $calendar-bg: transparent !default;
 $calendar-hover-bg: null !default;
 $calendar-cell-hover-border-color: null !default;
@@ -26,7 +25,7 @@ $calendar-cell-contoured-border-color: null !default;
 $calendar-cell-active-bg: null !default;
 $calendar-invalid-border-color: $base-invalid-color !default;
 $calendar-invalid-border-color-focused: $base-invalid-color-active !default;
-$calendar-week-number-cell-color: $base-neutral-foreground3 !default;
+$calendar-week-number-cell-color: null !default;
 $calendar-week-number-cell-bg: null !default;
 $calendar-week-number-border-radius: 0 !default;
 
@@ -34,17 +33,23 @@ $calendar-week-number-border-radius: 0 !default;
   $calendar-hover-bg: $button-default-outlined-selected-bg !default;
   $calendar-cell-hover-border-color: $calendar-hover-bg !default;
   $calendar-cell-active-bg: $button-default-outlined-active-bg !default;
+  $calendar-cell-other-color: lighten($calendar-color, 23.92) !default;
+  $calendar-week-number-cell-color: lighten($calendar-color, 23.92) !default;
   $calendar-cell-contoured-border-color: $calendar-cell-active-bg !default;
   $calendar-week-number-cell-bg: $base-background-disabled !default;
 }
 
 @if $mode == "dark" {
-  $calendar-hover-bg: $base-accent-bg !default;
-  $calendar-cell-hover-border-color: $base-accent-bg !default;
+  $calendar-hover-bg: darken(desaturate(adjust-hue($base-accent, 358.4), 8.6), 26.7) !default;
+  $calendar-cell-hover-border-color: $calendar-hover-bg !default;
   $calendar-cell-active-bg: $base-accent-selected !default;
+  $calendar-cell-other-color: darken($calendar-color, 32.16) !default;
+  $calendar-week-number-cell-color: darken($calendar-color, 32.16) !default;
   $calendar-cell-contoured-border-color: $base-accent-active !default;
-  $calendar-week-number-cell-bg: $base-bg-hover !default;
+  $calendar-week-number-cell-bg: $base-hover-bg !default;
 }
+
+$calendar-cell-other-hover-color: $calendar-cell-other-color !default;
 $never-used: collector((
 "$calendar-navigator-text-color": $calendar-navigator-text-color,
 "$calendar-header-color": $calendar-header-color,

package/data/scss/widgets/fluent/card/_index.scss

@@ -8,7 +8,7 @@
 // adduse
 
 .dx-card {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  box-shadow: 0 1px 3px color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px color.change($base-shadow-color, $alpha: 0.24);
   border-radius: $base-border-radius;
   background-color: $base-bg;
   margin: 2px 2px 3px;

package/data/scss/widgets/fluent/checkBox/_index.scss

@@ -9,7 +9,6 @@
 
 // adduse
 
-$fluent-checkbox-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
 $icon-position: relative;
 
 .dx-checkbox-icon {

package/data/scss/widgets/fluent/checkBox/_sizes.scss

@@ -22,7 +22,7 @@ $fluent-checkbox-text-padding-end: null !default;
   $fluent-checkbox-indeterminate-icon-size: 1em !default;
   $fluent-checkbox-indeterminate-font-size: 20px !default;
   $fluent-checkbox-border-radius: $checkbox-icon-border-radius !default;
-  $fluent-checkbox-size: 16px !default; // 18px !default;
+  $fluent-checkbox-size: 16px !default;
 }
 
 @else if $size == "compact" {

package/data/scss/widgets/fluent/common/_index.scss

@@ -42,6 +42,10 @@
   fill: $base-bg !important;
 }
 
+.dx-theme-typography-background-color {
+  background-color: $base-typography-bg !important;
+}
+
 .dx-theme-border-color-as-background-color {
   background-color: $base-border-color !important;
   fill: $base-border-color !important;
@@ -62,35 +66,3 @@
 .dx-theme-border-color {
   border-color: $base-border-color !important;
 }
-
-// stylelint-enable declaration-no-important
-
-.dx-inkripple {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
-  pointer-events: none;
-}
-
-.dx-inkripple-wave {
-  position: absolute;
-  background-color: rgba(0, 0, 0, 0.16);
-  border-radius: 50%;
-  opacity: 0;
-  transform: scale(0);
-  pointer-events: none;
-}
-
-.dx-inkripple-showing {
-  transition: transform 0.1s linear;
-  opacity: 1;
-  transform: scale(1);
-}
-
-.dx-inkripple-hiding {
-  transition: transform 0.1s linear, opacity 0.1s linear;
-  transform: scale(1.01);
-  opacity: 0;
-}

package/data/scss/widgets/fluent/common/_mixins.scss

@@ -11,7 +11,7 @@ $badge-invalid-bg: $base-invalid-color;
 
 @mixin dx-base-typography() {
   @include dx-base-typography-mixin(
-      $typography-color,
+      $base-text-color,
       $fluent-base-font-size,
       $base-font-family,
       $fluent-line-height