From c1cbe3224af334c96a699da9bfb8b508d10a98e4 Mon Sep 17 00:00:00 2001
From: EugeniyKiyashko <EugeniyKiyashko@users.noreply.github.com>
Date: Mon, 18 Sep 2023 17:39:23 +0400
Subject: [PATCH] Fluent: radiogroup & checkbox redesign (#25601)

---
 .../widgets/base/radioButton/_mixins.scss     |  53 ++--
 .../scss/widgets/base/switch/_mixins.scss     |  26 +-
 .../scss/widgets/fluent/_colors.scss          | 109 ++++++--
 .../scss/widgets/fluent/button/_colors.scss   | 137 +++++-----
 .../widgets/fluent/buttonGroup/_index.scss    |   4 +
 .../scss/widgets/fluent/checkBox/_colors.scss |  23 +-
 .../scss/widgets/fluent/checkBox/_index.scss  | 233 +++++++++++++-----
 .../scss/widgets/fluent/checkBox/_sizes.scss  |  17 +-
 .../widgets/fluent/dropDownButton/_index.scss |   6 +
 .../scss/widgets/fluent/list/_index.scss      |   6 +-
 .../widgets/fluent/progressBar/_colors.scss   |   6 +-
 .../widgets/fluent/progressBar/_index.scss    |   4 +
 .../widgets/fluent/radioButton/_index.scss    | 141 ++++++++++-
 .../widgets/fluent/radioButton/_sizes.scss    |  13 +-
 .../widgets/fluent/radioGroup/_colors.scss    |  17 +-
 .../widgets/fluent/radioGroup/_index.scss     |  12 +
 .../widgets/fluent/radioGroup/_sizes.scss     |   3 +
 .../scss/widgets/fluent/slider/_colors.scss   |  13 +-
 .../scss/widgets/fluent/slider/_index.scss    |  35 ++-
 .../scss/widgets/fluent/switch/_colors.scss   |  20 +-
 .../scss/widgets/fluent/switch/_index.scss    |  17 +-
 .../scss/widgets/fluent/tagBox/_colors.scss   |  15 +-
 .../scss/widgets/fluent/tagBox/_index.scss    |  17 +-
 .../scss/widgets/fluent/tagBox/_sizes.scss    |  29 ++-
 .../widgets/fluent/textEditor/_colors.scss    |   4 +-
 .../widgets/generic/radioButton/_index.scss   |   4 +-
 .../widgets/material/radioButton/_index.scss  |   4 +-
 27 files changed, 673 insertions(+), 295 deletions(-)

diff --git a/packages/devextreme/scss/widgets/base/radioButton/_mixins.scss b/packages/devextreme/scss/widgets/base/radioButton/_mixins.scss
index cfd232349f8c..0081edf94f26 100644
--- a/packages/devextreme/scss/widgets/base/radioButton/_mixins.scss
+++ b/packages/devextreme/scss/widgets/base/radioButton/_mixins.scss
@@ -3,9 +3,6 @@
 @mixin dx-radiobutton-icon-mixin(
   $icon-size,
   $border-width,
-  $border-color,
-  $radiogroup-bg,
-  $checked-color,
   $dot-size,
   $useRipple: false,
   $ripple-size: 0,
@@ -20,8 +17,6 @@
     height: $icon-size;
     border-width: $border-width;
     border-style: solid;
-    border-color: $border-color;
-    background-color: $radiogroup-bg;
     border-radius: 50%;
 
     @if $useRipple {
@@ -34,7 +29,6 @@
       border-radius: 50%;
       border-width: 0;
       border-style: solid;
-      border-color: $radiogroup-bg;
 
       @if $useRipple {
         transform: scale(0);
@@ -61,12 +55,7 @@
   }
 
   .dx-radiobutton-icon-checked {
-    @if $useRipple {
-      border-color: $checked-color;
-    }
-
     .dx-radiobutton-icon-dot {
-      background-color: $checked-color;
       border-width: $dot-icon-border-width;
 
       @if $useRipple {
@@ -77,20 +66,40 @@
 }
 
 @mixin dx-radiobutton-states-mixin(
+  $foreground-color,
   $border-color,
   $readonly-border-color,
   $hover-border-color,
   $active-bg,
   $focused-border-color,
   $checked-color,
-  $invalid-faded-border-color,
-  $invalid-hover-border-color,
-  $invalid-focused-border-color,
+  $invalid-color,
+  $invalid-color-hover,
+  $invalid-color-focused,
   $disabled-opacity,
   $useRipple: false,
   $focused-ripple-bg: transparent,
   $invalid-focused-ripple-bg: transparent,
 ) {
+  .dx-radiobutton-icon {
+    border-color: $border-color;
+    background-color: $foreground-color;
+
+    .dx-radiobutton-icon-dot {
+      border-color: $foreground-color;
+    }
+  }
+
+  .dx-radiobutton-icon-checked {
+    @if $useRipple {
+      border-color: $checked-color;
+    }
+
+    .dx-radiobutton-icon-dot {
+      background-color: $checked-color;
+    }
+  }
+
   .dx-radiobutton {
     &.dx-state-disabled {
       opacity: $disabled-opacity;
@@ -142,23 +151,25 @@
 
   .dx-invalid {
     .dx-radiobutton-icon {
-      border-color: $invalid-faded-border-color;
+      border-color: $invalid-color;
     }
 
     @if $useRipple {
-      .dx-radiobutton-icon-dot {
-        background-color: $invalid-faded-border-color;
+      .dx-radiobutton-icon-checked {
+        .dx-radiobutton-icon-dot {
+          background-color: $invalid-color;
+        }
       }
 
       .dx-state-active,
       .dx-state-focused {
         &.dx-radiobutton {
           .dx-radiobutton-icon {
-            border-color: $invalid-focused-border-color;
+            border-color: $invalid-color-focused;
           }
 
           .dx-radiobutton-icon-dot {
-            background-color: $invalid-focused-border-color;
+            background-color: $invalid-color-focused;
           }
 
           .dx-radiobutton-icon::after {
@@ -170,14 +181,14 @@
     } @else {
       .dx-state-hover {
         &.dx-radiobutton .dx-radiobutton-icon {
-          border-color: $invalid-hover-border-color;
+          border-color: $invalid-color-hover;
         }
       }
 
       .dx-state-focused {
         &.dx-radiobutton {
           .dx-radiobutton-icon {
-            border-color: $invalid-focused-border-color;
+            border-color: $invalid-color-focused;
           }
         }
       }
diff --git a/packages/devextreme/scss/widgets/base/switch/_mixins.scss b/packages/devextreme/scss/widgets/base/switch/_mixins.scss
index 28cbc87c95dc..ec369bdd7a83 100644
--- a/packages/devextreme/scss/widgets/base/switch/_mixins.scss
+++ b/packages/devextreme/scss/widgets/base/switch/_mixins.scss
@@ -187,7 +187,9 @@
   $switch-off-border-hover-color,
   $switch-off-border-active-color,
   $switch-on-border-color,
-  $switch-invalid-container-bg,
+  $switch-invalid-color,
+  $switch-invalid-color-hover,
+  $switch-invalid-color-focused,
   $base-disabled-border-color,
 ) {
   .dx-switch-container {
@@ -209,7 +211,7 @@
   .dx-switch {
     &.dx-state-hover {
       .dx-switch-container::before {
-        border-color:  $switch-off-border-hover-color;
+        border-color: $switch-off-border-hover-color;
       }
     
       .dx-switch-handle::before {
@@ -224,7 +226,7 @@
 
       &.dx-invalid {
         .dx-switch-container::before {
-          border-color: $switch-invalid-container-bg;
+          border-color: $switch-invalid-color-hover;
         }
       }
     }
@@ -247,14 +249,14 @@
 
       &.dx-invalid {
         .dx-switch-container::before {
-          border-color: $switch-invalid-container-bg;
+          border-color: $switch-invalid-color-focused;
         }
       }
     }
 
     &.dx-invalid {
       .dx-switch-container::before {
-        border-color: $switch-invalid-container-bg;
+        border-color: $switch-invalid-color;
       }
     }
 
@@ -292,6 +294,12 @@
       .dx-switch-handle::before {
         background-color: $switch-handle-on-bg;
       }
+
+      &.dx-invalid {
+        .dx-switch-container::before {
+          background-color: $switch-invalid-color-hover;
+        }
+      }
     }
 
     &.dx-state-active,
@@ -304,11 +312,17 @@
       .dx-switch-handle::before {
         background-color: $switch-handle-on-bg;
       }
+
+      &.dx-invalid {
+        .dx-switch-container::before {
+          background-color: $switch-invalid-color-focused;
+        }
+      }
     }
 
     &.dx-invalid {
       .dx-switch-container::before {
-        background-color: $switch-invalid-container-bg;
+        background-color: $switch-invalid-color;
       }
     }
 
diff --git a/packages/devextreme/scss/widgets/fluent/_colors.scss b/packages/devextreme/scss/widgets/fluent/_colors.scss
index bf2d1d9bcf65..1a98ac934597 100644
--- a/packages/devextreme/scss/widgets/fluent/_colors.scss
+++ b/packages/devextreme/scss/widgets/fluent/_colors.scss
@@ -13,6 +13,12 @@ $fluent-color-accent-modificator: null !default;
 $base-accent: null !default;
 $base-accent-hover: null !default;
 $base-accent-active: null !default;
+$base-accent-selected: null !default;
+
+$base-compound-accent: null !default;
+$base-compound-accent-hover: null !default;
+$base-compound-accent-active: null !default;
+
 $fluent-color-theme-modificator: null !default;
 
 /**
@@ -51,9 +57,28 @@ $base-spin-icon-color: null !default;
 */
 $base-bg: null !default;
 $base-bg-hover: null !default;
+$base-bg-active: null !default;
+$base-bg-selected: null !default;
+
+$base-brand-bg: null !default;
+$base-brand2-bg-hover: null !default;
+$base-brand2-bg-active: null !default;
+
+$base-accent-foreground: null !default;
+$base-accent-foreground2: null !default;
+$base-accent-foreground2-hover: null !default;
+$base-accent-foreground2-active: null !default;
+
+$base-bg-inverted: rgba(255, 255, 255, 1) !default; // #ffffff;
+$base-bg-inverted-hover: rgba(235, 243, 252, 1) !default; // #ebf3fc
+$base-bg-inverted-active: rgba(180, 214, 250, 1) !default; // #bdd6fa
+$base-bg-inverted-selected: rgba(207, 228, 250, 1) !default; // #cfe4fa
+
 $base-neutral-background: null !default;
 $base-neutral-background6: null !default;
-$base-neutral-foreground: null !default;
+$base-neutral-foreground1: null !default;
+$base-neutral-foreground2: null !default;
+$base-neutral-foreground3: null !default;
 $base-neutral-background-hover: null !default;
 
 /**
@@ -77,7 +102,10 @@ $base-neutral-background-disabled: null !default;
 * $name 50. Success color
 * $type color
 */
-$base-success: #107c10 !default;
+$base-success: rgba(16, 124, 16, 1) !default; // #107c10
+$base-success-hover: rgba(14, 112, 14, 1) !default; // #0e700e
+$base-success-active: rgba(9, 69, 9, 1) !default; // #094509
+$base-success-selected: darken(desaturate(adjust-hue($base-success, -1), 4.65), 9.61) !default; // #0e4e0d
 
 /**
 * $name 60. Warning color
@@ -89,7 +117,10 @@ $base-warning: #fde300 !default;
 * $name 70. Danger color
 * $type color
 */
-$base-danger: #d13438 !default;
+$base-danger: rgba(209, 52, 56, 1) !default; // #d13438
+$base-danger-hover: rgba(177, 40, 44, 1) !default; // #b1282c
+$base-danger-active: rgba(132, 30, 32, 1) !default; // #841e20
+$base-danger-selected: darken(desaturate(adjust-hue($base-danger, -1), 4.65), 9.61) !default; // #a82c31
 
 /**
 * $name 80. Hovered state text color
@@ -120,10 +151,8 @@ $typography-color: null !default;
 $base-inverted-icon-color: null !default;
 $base-disabled-opacity: 0.38 !default;
 $base-disabled-color: null !default;
-$base-disabled-border-color: null !default;
+$base-border-color-disabled: null !default;
 $base-dropdown-shadow-color: null !default;
-$base-invalid-color: $base-danger !default;
-$base-invalid-faded-border-color: color.change($base-invalid-color, $alpha: 0.4) !default;
 $scrollview-pulldown-path: null !default;
 
 
@@ -132,21 +161,38 @@ $scrollview-pulldown-path: null !default;
 }
 
 @if $mode == "light" {
-  $base-accent: #0f6cbd !default;
-  $base-accent-hover: #115ea3 !default;
-  $base-accent-active: #0f548c !default;
+  $base-accent: rgba(15, 108, 189, 1) !default; // #0f6cbd
+  $base-accent-hover: rgba(17, 94, 163, 1) !default; // #115ea3
+  $base-accent-active: rgba(12, 59, 94, 1) !default; // #0c3b5e
+  $base-accent-selected: rgba(15, 84, 140, 1) !default; // #0f548c
+
+  $base-compound-accent: rgba(15, 108, 189, 1) !default; // #0f6cbd
+  $base-compound-accent-hover: rgba(17, 94, 163, 1) !default; // #115ea3
+  $base-compound-accent-active: rgba(15, 84, 140, 1) !default; // #0f548c
+
+  $base-accent-foreground: #0F6CBD !default;
+  $base-accent-foreground2: #115EA3 !default;
+  $base-accent-foreground2-hover: #0F548C !default;
+  $base-accent-foreground2-active: #0A2E4A !default;
+
   $fluent-color-theme-modificator: "light" !default;
   $base-text-color: rgba(36, 36, 36, 1) !default;
   $base-label-color: rgba(0, 0, 0, 0.6) !default;
   $base-disabled-color: rgba(224, 224, 224, 1) !default; // e0e0e0 // rgba(0, 0, 0, $base-disabled-opacity) !default;
-  $base-disabled-border-color: rgba(224, 224, 224, 1) !default; // e0e0e0
+  $base-border-color-disabled: rgba(224, 224, 224, 1) !default; // e0e0e0
   $base-neutral-background-disabled: rgb(240, 240, 240) !default; // f0f0f0
   $base-foreground-disabled: rgba(189, 189, 189, 1) !default; // bdbdbd
-  $base-neutral-foreground: rgba(97, 97, 97, 1) !default; // #616161;
-  $base-icon-color: $base-neutral-foreground !default; // color.change($base-text-color, $alpha: 0.54) !default;
-  $base-spin-icon-color: $base-neutral-foreground !default; // color.change($base-text-color, $alpha: 0.54) !default;
+  $base-neutral-foreground1: rgba(36, 36, 36, 1) !default; // #242424;
+  $base-neutral-foreground2: rgba(66, 66, 66, 1) !default; // #424242;
+  $base-neutral-foreground3: rgba(97, 97, 97, 1) !default; // #616161;
+  $base-icon-color: $base-neutral-foreground3 !default; // color.change($base-text-color, $alpha: 0.54) !default;
+  $base-spin-icon-color: $base-neutral-foreground3 !default; // color.change($base-text-color, $alpha: 0.54) !default;
   $base-bg: rgba(255, 255, 255, 1) !default; // #ffffff
   $base-bg-hover: rgba(245, 245, 245, 1) !default; // #f5f5f5
+  $base-bg-selected: rgba(235, 235, 235, 1) !default;// #ebebeb 
+  $base-bg-active: rgba(224, 224, 224, 1) !default; // e0e0e0
+  $base-brand2-bg-hover: rgba(207, 228, 250, 1) !default; // #CFE4FA
+  $base-brand2-bg-active: rgba(150, 198, 250, 1) !default; // #96C6FA
   $base-neutral-background: rgba(245, 245, 245, 1) !default; // #f5f5f5
   $base-neutral-background6: rgba(230, 230, 230, 1) !default; // #e6e6e6
   $base-neutral-background-hover: rgba(235, 235, 235, 1) !default; // #ebebeb
@@ -173,21 +219,38 @@ $scrollview-pulldown-path: null !default;
 }
 
 @if $mode == "dark" {
-  $base-accent: #479ef5 !default;
-  $base-accent-hover: #2886de !default;
-  $base-accent-active: #479ef5 !default;
+  $base-accent: rgba(17, 94, 163, 1) !default; // #115ea3
+  $base-accent-hover: rgba(15, 108, 189, 1) !default; // #0f6cbd
+  $base-accent-active: rgba(12, 59, 94, 1) !default; // #0c3b5e
+  $base-accent-selected: rgba(15, 84, 140, 1) !default; // #0f548c
+
+  $base-accent-foreground: #479EF5 !default;
+  $base-accent-foreground2: #62ABF5 !default;
+  $base-accent-foreground2-hover: #96C6FA !default;
+  $base-accent-foreground2-active: #EBF3FC !default;
+
+  $base-compound-accent: rgba(71, 158, 245, 1) !default; // #479EF5
+  $base-compound-accent-hover: rgba(98, 171, 245, 1) !default; // #62ABF5
+  $base-compound-accent-active: rgba(40, 134, 222, 1) !default; // #2886DE
+
   $fluent-color-theme-modificator: "dark" !default;
   $base-text-color: #fff !default;
   $base-label-color: rgba(255, 255, 255, 0.6) !default;
   $base-disabled-color: rgba(66, 66, 66, 1) !default; // #424242 // rgba(255, 255, 255, $base-disabled-opacity) !default;
-  $base-disabled-border-color: rgba(66, 66, 66, 1) !default; // #424242
+  $base-border-color-disabled: rgba(66, 66, 66, 1) !default; // #424242
   $base-neutral-background-disabled: rgba(20, 20, 20, 1) !default; // #141414
   $base-foreground-disabled: rgba(92, 92, 92, 1) !default; // #5c5c5c
-  $base-neutral-foreground: rgba(173, 173, 173, 1) !default; // #adadad;
-  $base-icon-color: $base-neutral-foreground !default; // color.change($base-text-color, $alpha: 0.54) !default;
-  $base-spin-icon-color: $base-neutral-foreground !default; // color.change($base-text-color, $alpha: 0.54) !default;
+  $base-neutral-foreground1: rgba(255, 255, 255, 1) !default; // #ffffff;
+  $base-neutral-foreground2: rgba(214, 214, 214, 1) !default; // #d6d6d6;
+  $base-neutral-foreground3: rgba(173, 173, 173, 1) !default; // #adadad;
+  $base-icon-color: $base-neutral-foreground3 !default; // color.change($base-text-color, $alpha: 0.54) !default;
+  $base-spin-icon-color: $base-neutral-foreground3 !default; // color.change($base-text-color, $alpha: 0.54) !default;
   $base-bg: rgba(41, 41, 41, 1) !default; // #292929
   $base-bg-hover: rgba(61, 61, 61, 1) !default; // #3d3d3d
+  $base-bg-selected: rgba(56, 56, 56, 1) !default;// #383838
+  $base-bg-active: rgba(31, 31, 31, 1) !default; // #1f1f1f
+  $base-brand2-bg-hover: rgba(12, 59, 94, 1) !default; // #0C3B5E
+  $base-brand2-bg-active: rgba(6, 23, 36, 1) !default; // #061724 
   $base-neutral-background: rgba(20, 20, 20, 1) !default; // #f5f5f5
   $base-neutral-background6: rgba(51, 51, 51, 1) !default; // #e6e6e6
   $base-neutral-background-hover: rgba(41, 41, 41, 1) !default; // #292929
@@ -219,3 +282,9 @@ $scrollview-pulldown-path: null !default;
 */
 $base-link-color: $base-accent !default;
 $typography-link-color: $base-link-color !default;
+
+$base-invalid-color: $base-danger !default;
+$base-invalid-color-hover: $base-danger-hover !default;
+$base-invalid-color-active: $base-danger-active !default;
+$base-invalid-color-selected: $base-danger-selected !default;
+$base-invalid-faded-border-color: color.change($base-invalid-color, $alpha: 0.4) !default;
diff --git a/packages/devextreme/scss/widgets/fluent/button/_colors.scss b/packages/devextreme/scss/widgets/fluent/button/_colors.scss
index 68c90cfc519a..84acb45c7d91 100644
--- a/packages/devextreme/scss/widgets/fluent/button/_colors.scss
+++ b/packages/devextreme/scss/widgets/fluent/button/_colors.scss
@@ -4,9 +4,8 @@
 
 // adduse
 
-$button-inverted-icon-color: $base-inverted-icon-color !default;
 $button-border-radius: $base-border-radius !default;
-$button-disabled-background: null !default;
+$button-disabled-background: $base-neutral-background-disabled !default;
 $button-disabled-icon-opacity: 0.6 !default;
 $button-disabled-text-opacity: 0.6 !default;
 $button-shadow-color: null !default;
@@ -33,39 +32,38 @@ $button-normal-bg: $base-element-bg !default;
 * $name 30. Hovered state background color
 * $type color
 */
-$button-normal-hover-bg: null !default;
+$button-normal-hover-bg: $base-bg-hover !default;
 
 /**
 * $name 40. Focused state background color
 * $type color
 */
-$button-normal-focused-bg: null !default;
+$button-normal-focused-bg: $base-bg-hover !default;
 
 /**
 * $name 50. Active state background color
 * $type color
 */
-$button-normal-active-bg: null !default;
+$button-normal-active-bg: $base-bg-active !default;
 
 /**
 * $name 20. Selected item background color
 * $type color
 */
-$button-normal-selected-bg: null !default;
-$button-normal-icon-color: $button-normal-color !default;
+$button-normal-selected-bg: $base-bg-selected !default;
 $button-normal-bg-inverted: null !default;
 
 /**
 * $name 10. Text color
 * $type color
 */
-$button-default-color: $base-inverted-text-color !default;
+$button-default-color: null !default;
 
 /**
 * $name 10. Selected item text color
 * $type color
 */
-$button-default-selected-color: $base-inverted-text-color !default;
+$button-default-selected-color: null !default;
 
 /**
 * $name 20. Background color
@@ -77,49 +75,49 @@ $button-default-bg: $base-accent !default;
 * $name 30. Hovered state background color
 * $type color
 */
-$button-default-hover-bg: null !default;
+$button-default-hover-bg: $base-accent-hover !default;
 
 /**
 * $name 40. Focused state background color
 * $type color
 */
-$button-default-focused-bg: null !default;
+$button-default-focused-bg: $base-accent-hover !default;
 
 /**
 * $name 50. Active state background color
 * $type color
 */
-$button-default-active-bg: null !default;
+$button-default-active-bg: $base-accent-active !default;
 
 /**
 * $name 20. Selected item background color
 * $type color
 */
-$button-default-selected-bg: null !default;
-$button-default-icon-color: $button-default-color !default;
-$button-default-outlined-hover-bg: color.change($button-default-bg, $alpha: 0.08) !default;
-$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;
+$button-default-selected-bg: $base-accent-selected !default;
+
+$button-default-outlined-hover-bg: $base-brand2-bg-hover !default;
+$button-default-outlined-focused-bg: $base-brand2-bg-hover !default;
+$button-default-outlined-active-bg: $base-brand2-bg-active !default;
+$button-default-outlined-selected-bg: $base-brand2-bg-active !default;
 $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;
+$button-default-text-hover-bg: $base-brand2-bg-hover !default;
+$button-default-text-focused-bg: $base-brand2-bg-hover !default;
+$button-default-text-active-bg: $base-brand2-bg-active !default;
+$button-default-text-selected-bg: $base-brand2-bg-active !default;
 $button-default-text-selected-color: $button-default-bg !default;
 
 /**
 * $name 10. Text color
 * $type color
 */
-$button-danger-color: $base-inverted-text-color !default;
+$button-danger-color: null !default;
 
 /**
 * $name 10. Selected item text color
 * $type color
 */
-$button-danger-selected-color: $base-inverted-text-color !default;
+$button-danger-selected-color: null !default;
 
 /**
 * $name 20. Background color
@@ -131,26 +129,25 @@ $button-danger-bg: $base-danger !default;
 * $name 30. Hovered state background color
 * $type color
 */
-$button-danger-hover-bg: null !default;
+$button-danger-hover-bg: $base-danger-hover !default;
 
 /**
 * $name 40. Focused state background color
 * $type color
 */
-$button-danger-focused-bg: null !default;
+$button-danger-focused-bg: $base-danger-hover !default;
 
 /**
 * $name 50. Active state background color
 * $type color
 */
-$button-danger-active-bg: null !default;
+$button-danger-active-bg: $base-danger-active !default;
 
 /**
 * $name 20. Selected item background color
 * $type color
 */
-$button-danger-selected-bg: null !default;
-$button-danger-icon-color: $button-danger-color !default;
+$button-danger-selected-bg: $base-danger-selected !default;
 $button-danger-outlined-hover-bg: color.change($button-danger-bg, $alpha: 0.08) !default;
 $button-danger-outlined-focused-bg: color.change($button-danger-bg, $alpha: 0.08) !default;
 $button-danger-outlined-active-bg: color.change($button-danger-bg, $alpha: 0.36) !default;
@@ -167,13 +164,13 @@ $button-danger-text-selected-color: $button-danger-bg !default;
 * $name 10. Text color
 * $type color
 */
-$button-success-color: $base-inverted-text-color !default;
+$button-success-color: null !default;
 
 /**
 * $name 10. Selected item text color
 * $type color
 */
-$button-success-selected-color: $base-inverted-text-color !default;
+$button-success-selected-color: null !default;
 
 /**
 * $name 20. Background color
@@ -185,26 +182,25 @@ $button-success-bg: $base-success !default;
 * $name 30. Hovered state background color
 * $type color
 */
-$button-success-hover-bg: null !default;
+$button-success-hover-bg: $base-success-hover !default;
 
 /**
 * $name 40. Focused state background color
 * $type color
 */
-$button-success-focused-bg: null !default;
+$button-success-focused-bg: $base-success-hover !default;
 
 /**
 * $name 50. Active state background color
 * $type color
 */
-$button-success-active-bg: null !default;
+$button-success-active-bg: $base-success-active !default;
 
 /**
 * $name 20. Selected item background color
 * $type color
 */
-$button-success-selected-bg: null !default;
-$button-success-icon-color: $button-success-color !default;
+$button-success-selected-bg: $base-success-selected !default;
 $button-success-outlined-hover-bg: color.change($button-success-bg, $alpha: 0.08) !default;
 $button-success-outlined-focused-bg: color.change($button-success-bg, $alpha: 0.08) !default;
 $button-success-outlined-active-bg: color.change($button-success-bg, $alpha: 0.36) !default;
@@ -218,58 +214,41 @@ $button-success-text-selected-bg: color.change($button-success-bg, $alpha: 0.36)
 $button-success-text-selected-color: $button-success-bg !default;
 
 @if $mode == "light" {
-  $button-disabled-background: rgba(0, 0, 0, 0.1) !default;
+  $button-default-color: $base-inverted-text-color !default;
+  $button-default-selected-color: $base-inverted-text-color !default;
+  $button-danger-color: $base-inverted-text-color !default;
+  $button-danger-selected-color: $base-inverted-text-color !default;
+  $button-success-color: $base-inverted-text-color !default;
+  $button-success-selected-color: $base-inverted-text-color !default;
   $button-shadow-color: rgba(0, 0, 0, 0.24) !default;
-  $button-normal-hover-bg: darken($button-normal-bg, 8%) !default;
-  $button-normal-focused-bg: darken($button-normal-bg, 8%) !default;
-  $button-normal-active-bg: darken($button-normal-bg, 30%) !default;
-  $button-normal-selected-bg: darken($button-normal-bg, 18%) !default;
   $button-normal-bg-inverted: darken($button-normal-bg, 100%) !default;
-  $button-default-hover-bg: darken($button-default-bg, 8.5%) !default;
-  $button-default-focused-bg: darken($button-default-bg, 8.5%) !default;
-  $button-default-active-bg: darken($button-default-bg, 19.5%) !default;
-  $button-default-selected-bg: darken($button-default-bg, 19.5%) !default;
-  $button-danger-hover-bg: darken($button-danger-bg, 8.5%) !default;
-  $button-danger-focused-bg: darken($button-danger-bg, 8.5%) !default;
-  $button-danger-active-bg: darken($button-danger-bg, 19.5%) !default;
-  $button-danger-selected-bg: darken($button-danger-bg, 19.5%) !default;
-  $button-success-hover-bg: darken($button-success-bg, 8.5%) !default;
-  $button-success-focused-bg: darken($button-success-bg, 8.5%) !default;
-  $button-success-active-bg: darken($button-success-bg, 19.5%) !default;
-  $button-success-selected-bg: darken($button-success-bg, 19.5%) !default;
 }
 
 @if $mode == "dark" {
-  $button-disabled-background: rgba(255, 255, 255, 0.1) !default;
+  $button-default-color: $base-text-color !default;
+  $button-default-selected-color: $base-text-color !default;
+  $button-danger-color: $base-text-color !default;
+  $button-danger-selected-color: $base-text-color !default;
+  $button-success-color: $base-text-color !default;
+  $button-success-selected-color: $base-text-color !default;
   $button-shadow-color: rgba(0, 0, 0, 0.4) !default;
-  $button-normal-hover-bg: lighten($button-normal-bg, 8%) !default;
-  $button-normal-focused-bg: lighten($button-normal-bg, 8%) !default;
-  $button-normal-active-bg: lighten($button-normal-bg, 30%) !default;
-  $button-normal-selected-bg: lighten($button-normal-bg, 18%) !default;
   $button-normal-bg-inverted: lighten($button-normal-bg, 100%) !default;
-  $button-default-hover-bg: lighten($button-default-bg, 8.5%) !default;
-  $button-default-focused-bg: lighten($button-default-bg, 8.5%) !default;
-  $button-default-active-bg: lighten($button-default-focused-bg, 19.5%) !default;
-  $button-default-selected-bg: lighten($button-default-focused-bg, 19.5%) !default;
-  $button-danger-hover-bg: lighten($button-danger-bg, 8.5%) !default;
-  $button-danger-focused-bg: lighten($button-danger-bg, 8.5%) !default;
-  $button-danger-active-bg: lighten($button-danger-bg, 19.5%) !default;
-  $button-danger-selected-bg: lighten($button-danger-bg, 19.5%) !default;
-  $button-success-hover-bg: lighten($button-success-bg, 8.5%) !default;
-  $button-success-focused-bg: lighten($button-success-bg, 8.5%) !default;
-  $button-success-active-bg: lighten($button-success-bg, 19.5%) !default;
-  $button-success-selected-bg: lighten($button-success-bg, 19.5%) !default;
 }
 
-$button-disabled-text-color: $button-disabled-background !default;
+$button-default-icon-color: $button-default-color !default;
+$button-normal-icon-color: $button-normal-color !default;
+$button-danger-icon-color: $button-danger-color !default;
+$button-success-icon-color: $button-success-color !default;
+
+$button-disabled-text-color: $base-foreground-disabled !default;
 $button-hover-shadow-color: $button-shadow-color !default;
 $button-focused-shadow-color: color.adjust($button-shadow-color, $alpha: 0.08) !default;
 $button-active-shadow-color: color.adjust($button-shadow-color, $alpha: 0.08) !default;
-$button-normal-outlined-hover-bg: color.change($button-normal-bg-inverted, $alpha: 0.08) !default;
-$button-normal-outlined-focused-bg: color.change($button-normal-bg-inverted, $alpha: 0.08) !default;
-$button-normal-outlined-active-bg: color.change($button-normal-bg-inverted, $alpha: 0.3) !default;
-$button-normal-outlined-selected-bg: color.change($button-normal-bg-inverted, $alpha: 0.18) !default;
-$button-normal-text-hover-bg: color.change($button-normal-bg-inverted, $alpha: 0.08) !default;
-$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;
+$button-normal-outlined-hover-bg: $button-normal-hover-bg !default;
+$button-normal-outlined-focused-bg: $button-normal-hover-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-active-bg: $button-normal-active-bg !default;
+$button-normal-text-selected-bg: $button-normal-selected-bg !default;
diff --git a/packages/devextreme/scss/widgets/fluent/buttonGroup/_index.scss b/packages/devextreme/scss/widgets/fluent/buttonGroup/_index.scss
index b96897f9cc3a..6320ebdc7474 100644
--- a/packages/devextreme/scss/widgets/fluent/buttonGroup/_index.scss
+++ b/packages/devextreme/scss/widgets/fluent/buttonGroup/_index.scss
@@ -36,4 +36,8 @@
       border-inline-end-width: 0;
     }
   }
+
+  &.dx-state-disabled {
+    box-shadow: none;
+  }
 }
diff --git a/packages/devextreme/scss/widgets/fluent/checkBox/_colors.scss b/packages/devextreme/scss/widgets/fluent/checkBox/_colors.scss
index 0c867a477488..398e1593e072 100644
--- a/packages/devextreme/scss/widgets/fluent/checkBox/_colors.scss
+++ b/packages/devextreme/scss/widgets/fluent/checkBox/_colors.scss
@@ -4,10 +4,19 @@
 
 // adduse
 
-$checkbox-border-color: color.change($base-text-color, $alpha: 0.54) !default;
-$checkbox-checked-color: $base-element-bg !default;
-$checkbox-indeterminate-bg: $base-accent !default;
-$checkbox-bg: $base-accent !default;
-$checkbox-hover-border-color: darken($base-accent, 12%) !default;
-$checkbox-invalid-focused-border-color: $base-invalid-color !default;
-$checkbox-icon-border-radius: $base-border-radius - 2 !default;
+$checkbox-border-color: $base-border-color-accessible !default;
+$checkbox-border-color-hover: $base-border-color-accessible-hover !default;
+$checkbox-border-color-active: $base-border-color-accessible-focused !default;
+
+$checkbox-foreground-color: $base-element-bg !default;
+
+$checkbox-accent-color: $base-compound-accent !default;
+$checkbox-accent-color-hover: $base-compound-accent-hover !default;
+$checkbox-accent-color-focused: $base-compound-accent-active !default;
+
+$checkbox-invalid-color: $base-invalid-color !default;
+$checkbox-invalid-color-hover: $base-invalid-color-hover !default;
+$checkbox-invalid-color-focused: $base-invalid-color-selected !default;
+
+$checkbox-disabled-color: $base-disabled-color !default;
+$checkbox-foreground-disabled-color: $base-foreground-disabled !default;
diff --git a/packages/devextreme/scss/widgets/fluent/checkBox/_index.scss b/packages/devextreme/scss/widgets/fluent/checkBox/_index.scss
index 1383bc476aea..a2a6ea592c80 100644
--- a/packages/devextreme/scss/widgets/fluent/checkBox/_index.scss
+++ b/packages/devextreme/scss/widgets/fluent/checkBox/_index.scss
@@ -12,6 +12,25 @@
 $fluent-checkbox-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
 $icon-position: relative;
 
+.dx-checkbox-icon {
+  width: $fluent-checkbox-size;
+  height: $fluent-checkbox-size;
+  border-width: $fluent-checkbox-border-width;
+  border-style: solid;
+  border-color: $checkbox-border-color;
+  border-radius: $fluent-checkbox-border-radius;
+  background-color: $checkbox-foreground-color;
+
+  &::before {
+    z-index: 2;
+  }
+}
+
+.dx-checkbox-text {
+  padding-inline-start: $fluent-checkbox-text-padding-start;
+  padding-inline-end: $fluent-checkbox-text-padding-end;
+}
+
 .dx-checkbox {
   line-height: 0;
 
@@ -19,79 +38,65 @@ $icon-position: relative;
     overflow: visible;
   }
 
-  &.dx-state-readonly,
-  &.dx-state-disabled {
-    border-color: color.change($checkbox-border-color, $alpha: 0.26);
+  &.dx-invalid {
+    .dx-checkbox-icon {
+      border-color: $checkbox-invalid-color;
+    }
   }
 
-  &.dx-state-focused,
-  &.dx-state-active {
-    .dx-checkbox-icon::after {
-      background-color: color.change($checkbox-border-color, $alpha: 0.1);
-      transform: scale(1);
+  &.dx-state-readonly {
+    .dx-checkbox-icon {
+      border-color: $checkbox-disabled-color;
     }
   }
 
-  &.dx-checkbox-checked,
-  &.dx-checkbox-indeterminate {
-    &.dx-state-focused,
-    &.dx-state-active {
-      .dx-checkbox-icon::after {
-        background-color: color.change($checkbox-bg, $alpha: 0.1);
-        transform: scale(1);
-      }
+  &.dx-state-hover {
+    .dx-checkbox-icon {
+      border-color: $checkbox-border-color-hover;
     }
 
-    &.dx-state-readonly,
-    &.dx-state-disabled {
+    &.dx-invalid {
       .dx-checkbox-icon {
-        background-color: color.change($checkbox-border-color, $alpha: 0.26);
+        border-color: $checkbox-invalid-color-hover;
       }
     }
   }
-}
 
-.dx-checkbox,
-.dx-checkbox-indeterminate,
-.dx-checkbox-checked {
-  &.dx-state-readonly.dx-state-focused {
-    .dx-checkbox-icon::after {
-      background-color: color.change($checkbox-border-color, $alpha: 0.1);
-      transform: scale(1);
+  &.dx-state-active {
+    .dx-checkbox-icon {
+      border-color: $checkbox-border-color-active;
     }
   }
-}
 
-.dx-checkbox-icon {
-  width: $fluent-checkbox-size;
-  height: $fluent-checkbox-size;
-  border: 2px solid $checkbox-border-color;
-  border-radius: $fluent-checkbox-border-radius;
+  &.dx-state-focused {
+    .dx-checkbox-icon {
+      border-color: $checkbox-accent-color-focused;
+    }
+  }
 
-  &::after {
-    content: "";
-    width: $fluent-checkbox-ripple-size;
-    height: $fluent-checkbox-ripple-size;
-    top: 50%;
-    left: 50%;
-    margin-top: math.div(-$fluent-checkbox-ripple-size, 2);
-    margin-left: math.div(-$fluent-checkbox-ripple-size, 2);
-    border-radius: 50%;
-    display: block;
-    position: absolute;
-    z-index: 1;
-    transform: scale(0.5);
-    transition: $fluent-checkbox-ripple-transition;
+  &.dx-state-active,
+  &.dx-state-focused {
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: $checkbox-invalid-color-focused;
+      }
+    }
   }
 
-  &::before {
-    z-index: 2;
+  &.dx-state-disabled {
+    opacity: 1; 
+
+    .dx-checkbox-icon {
+      border-color: $checkbox-disabled-color;
+    }
   }
+}
 
-  .dx-checkbox-checked & {
-    color: $checkbox-checked-color;
-    background-color: $checkbox-bg;
-    border: none;
+.dx-checkbox-checked {
+  .dx-checkbox-icon {
+    color: $checkbox-foreground-color;
+    border: 1px solid $checkbox-accent-color;
+    background-color: $checkbox-accent-color;
 
     @include dx-icon(check);
     @include dx-icon-font-centered-sizing($fluent-checkbox-arrow-icon-size, $icon-position);
@@ -99,27 +104,125 @@ $icon-position: relative;
     font-size: $fluent-checkbox-arrow-font-size;
   }
 
-  .dx-checkbox-indeterminate & {
-    background-color: $checkbox-indeterminate-bg;
-    color: $checkbox-checked-color;
-    border: none;
+  &.dx-state-hover {
+    .dx-checkbox-icon {
+      border-color: $checkbox-accent-color-hover;
+      background-color: $checkbox-accent-color-hover;
+    }
+
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: $checkbox-invalid-color-hover;
+        background-color: $checkbox-invalid-color-hover;
+      }
+    }
+  }
+
+  &.dx-state-active,
+  &.dx-state-focused {
+    .dx-checkbox-icon {
+      border-color: $checkbox-accent-color-focused;
+      background-color: $checkbox-accent-color-focused;
+    }
 
-    @include dx-font-icon("\f074");
-    @include dx-icon-font-centered-sizing($fluent-checkbox-indeterminate-icon-size, $icon-position);
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: $checkbox-invalid-color-focused;
+        background-color: $checkbox-invalid-color-focused;
+      }
+    }
+  }
 
-    font-size: $fluent-checkbox-indeterminate-font-size;
+  &.dx-invalid {
+    .dx-checkbox-icon {
+      background-color: $checkbox-invalid-color;
+    }
+  }
+
+  &.dx-state-readonly,
+  &.dx-state-disabled,
+  &.dx-state-readonly.dx-invalid {
+    .dx-checkbox-icon {
+      color: $checkbox-foreground-disabled-color;
+      background-color: $checkbox-foreground-color;
+    }
   }
 }
 
-.dx-invalid {
+.dx-checkbox-indeterminate {
   .dx-checkbox-icon {
-    border: 2px solid $checkbox-invalid-focused-border-color;
+    background-color: $checkbox-foreground-color;
+    border: 1px solid $checkbox-accent-color;
+
+    &::before {
+      content: '';
+      display: block;
+      width: 100%;
+      height: 100%;
+      border-radius: 4px;
+      background-color: $checkbox-accent-color;
+      border: 3px solid $base-element-bg;
+    }
+
+    font-size: $fluent-checkbox-indeterminate-font-size;
+  }
+
+  &.dx-invalid {
+    .dx-checkbox-icon {
+      &::before {
+        background-color: $checkbox-invalid-color;
+      }
+    }
   }
 
+  &.dx-state-hover {
+    .dx-checkbox-icon {
+      border-color: $checkbox-accent-color-hover;
+
+      &::before {
+        background-color: $checkbox-accent-color-hover;
+      }
+    }
+
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: $checkbox-invalid-color-hover;
+
+        &::before {
+          background-color: $checkbox-invalid-color-hover;
+        }
+      }
+    }
+  }
+
+  &.dx-state-active,
   &.dx-state-focused {
-    .dx-checkbox-icon::after {
-      background-color: color.change($checkbox-invalid-focused-border-color, $alpha: 0.1);
-      transform: scale(1);
+    .dx-checkbox-icon {
+      border-color: $checkbox-accent-color-focused;
+
+      &::before {
+        background-color: $checkbox-accent-color-focused;
+      }
+    }
+
+    &.dx-invalid {
+      .dx-checkbox-icon {
+        border-color: $checkbox-invalid-color-focused;
+
+        &::before {
+          background-color: $checkbox-invalid-color-focused;
+        }
+      }
+    }
+  }
+
+  &.dx-state-readonly,
+  &.dx-state-disabled,
+  &.dx-state-readonly.dx-invalid {
+    .dx-checkbox-icon {
+      &::before {
+        background-color: $checkbox-foreground-disabled-color;
+      }
     }
   }
 }
diff --git a/packages/devextreme/scss/widgets/fluent/checkBox/_sizes.scss b/packages/devextreme/scss/widgets/fluent/checkBox/_sizes.scss
index 0f7c83c5f8e0..c7a70586b28f 100644
--- a/packages/devextreme/scss/widgets/fluent/checkBox/_sizes.scss
+++ b/packages/devextreme/scss/widgets/fluent/checkBox/_sizes.scss
@@ -3,28 +3,33 @@
 
 // adduse
 
-$fluent-checkbox-ripple-size: null !default;
 $fluent-checkbox-arrow-icon-size: null !default;
 $fluent-checkbox-arrow-font-size: null !default;
 $fluent-checkbox-indeterminate-icon-size: null !default;
 $fluent-checkbox-indeterminate-font-size: null !default;
+$fluent-checkbox-border-width: 1px !default;
+$checkbox-icon-border-radius: 2px !default;
 $fluent-checkbox-border-radius: null !default;
 $fluent-checkbox-size: null !default;
+$fluent-checkbox-text-padding-start: null !default;
+$fluent-checkbox-text-padding-end: null !default;
 
 @if $size == "default" {
-  $fluent-checkbox-ripple-size: 2.5em !default;
+  $fluent-checkbox-text-padding-start: 12px !default;
+  $fluent-checkbox-text-padding-end: 8px !default;
   $fluent-checkbox-arrow-icon-size: 1em !default;
-  $fluent-checkbox-arrow-font-size: 16px !default;
+  $fluent-checkbox-arrow-font-size: 12px !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: 18px !default;
+  $fluent-checkbox-size: 16px !default; // 18px !default;
 }
 
 @else if $size == "compact" {
-  $fluent-checkbox-ripple-size: 2.14em !default;
+  $fluent-checkbox-text-padding-start: 8px !default;
+  $fluent-checkbox-text-padding-end: 6px !default;
   $fluent-checkbox-arrow-icon-size: 1em !default;
-  $fluent-checkbox-arrow-font-size: 14px !default;
+  $fluent-checkbox-arrow-font-size: 12px !default;
   $fluent-checkbox-indeterminate-icon-size: 1em !default;
   $fluent-checkbox-indeterminate-font-size: 18px !default;
   $fluent-checkbox-border-radius: 2px !default;
diff --git a/packages/devextreme/scss/widgets/fluent/dropDownButton/_index.scss b/packages/devextreme/scss/widgets/fluent/dropDownButton/_index.scss
index 9742e8ef542a..0457496f7229 100644
--- a/packages/devextreme/scss/widgets/fluent/dropDownButton/_index.scss
+++ b/packages/devextreme/scss/widgets/fluent/dropDownButton/_index.scss
@@ -21,3 +21,9 @@
 .dx-dropdownbutton-popup-wrapper {
   @include dx-dropdownlist-list-appearance();
 }
+
+.dx-dropdownbutton {
+  &.dx-state-disabled {
+    opacity: 1;
+  }
+}
diff --git a/packages/devextreme/scss/widgets/fluent/list/_index.scss b/packages/devextreme/scss/widgets/fluent/list/_index.scss
index a0a2e024c632..a512c95d7837 100644
--- a/packages/devextreme/scss/widgets/fluent/list/_index.scss
+++ b/packages/devextreme/scss/widgets/fluent/list/_index.scss
@@ -126,7 +126,7 @@ $fluent-list-searchbox-padding-top: $fluent-list-searchbox-vertical-padding - 2p
       .dx-list-item {
         &.dx-state-hover {
           .dx-radiobutton-icon {
-            border-color: $checkbox-hover-border-color;
+            border-color: $checkbox-border-color-hover;
           }
         }
 
@@ -139,7 +139,7 @@ $fluent-list-searchbox-padding-top: $fluent-list-searchbox-vertical-padding - 2p
 
             &.dx-radiobutton-checked {
               .dx-radiobutton-icon::after {
-                background-color: color.change($radiogroup-checked-bg, $alpha: 0.1);
+                background-color: color.change($radiogroup-accent-color, $alpha: 0.1);
                 transform: scale(1);
               }
             }
@@ -154,7 +154,7 @@ $fluent-list-searchbox-padding-top: $fluent-list-searchbox-vertical-padding - 2p
             &.dx-checkbox-checked,
             &.dx-checkbox-indeterminate {
               .dx-checkbox-icon::after {
-                background-color: color.change($checkbox-bg, $alpha: 0.1);
+                background-color: color.change($checkbox-accent-color, $alpha: 0.1);
                 transform: scale(1);
               }
             }
diff --git a/packages/devextreme/scss/widgets/fluent/progressBar/_colors.scss b/packages/devextreme/scss/widgets/fluent/progressBar/_colors.scss
index 1eef27f6c641..71fb5a0bfa05 100644
--- a/packages/devextreme/scss/widgets/fluent/progressBar/_colors.scss
+++ b/packages/devextreme/scss/widgets/fluent/progressBar/_colors.scss
@@ -15,10 +15,10 @@ $progressbar-bg: $base-neutral-background6 !default;
 * $name 20. Selected range background color
 * $type color
 */
-$progressbar-range-bg: $base-accent !default;
+$progressbar-range-bg: $base-compound-accent !default;
 $progressbar-container-disabled-bg: $base-neutral-background-disabled !default;
 $progressbar-range-disabled-bg: $base-foreground-disabled !default;
-$progressbar-range-indeterminate-color: $base-accent !default;
+$progressbar-range-indeterminate-color: $base-compound-accent !default;
 $progressbar-range-invalid-color: $base-invalid-color !default;
 
 $progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95%;
@@ -29,4 +29,4 @@ $progressbar-invalid-interdeterminate-state-gradient: -90deg, transparent 5%, $p
 * $name 30. Label color
 * $type color
 */
-$progressbar-label-color: $base-accent !default;
+$progressbar-label-color: $base-compound-accent !default;
diff --git a/packages/devextreme/scss/widgets/fluent/progressBar/_index.scss b/packages/devextreme/scss/widgets/fluent/progressBar/_index.scss
index 57161321a2ef..8f18328053af 100644
--- a/packages/devextreme/scss/widgets/fluent/progressBar/_index.scss
+++ b/packages/devextreme/scss/widgets/fluent/progressBar/_index.scss
@@ -59,6 +59,10 @@
     background-color: $progressbar-range-disabled-bg;
   }
 
+  .dx-progressbar-status {
+    color: $base-foreground-disabled;
+  }
+
   .dx-progressbar-animating-container {
     animation: none;
 
diff --git a/packages/devextreme/scss/widgets/fluent/radioButton/_index.scss b/packages/devextreme/scss/widgets/fluent/radioButton/_index.scss
index 669b5b4aeb7e..8ec9b89969e4 100644
--- a/packages/devextreme/scss/widgets/fluent/radioButton/_index.scss
+++ b/packages/devextreme/scss/widgets/fluent/radioButton/_index.scss
@@ -15,26 +15,151 @@ $fluent-radiobutton-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
 @include dx-radiobutton-icon-mixin(
   $fluent-radiobutton-size,
   $fluent-radiobutton-border-width,
-  $radiogroup-border-color,
-  $radiogroup-bg,
-  $radiogroup-checked-bg,
   $fluent-radiobutton-dot-size,
   true,
   $fluent-radiobutton-ripple-size,
   $fluent-radiobutton-ripple-transition,
 );
 @include dx-radiobutton-states-mixin(
+  $radiogroup-bg,
   $radiogroup-border-color,
   $radiogroup-readonly-border-color,
   null,
   null,
   $radiobutton-focused-bg,
-  $radiogroup-checked-bg,
-  $radiobutton-invalid-faded-border-color,
-  null,
-  $radiobutton-invalid-focused-border-color,
-  $base-disabled-opacity,
+  $radiogroup-accent-color,
+  $radiobutton-invalid-color,
+  $radiobutton-invalid-color-hover,
+  $radiobutton-invalid-color-focused,
+  1,
   true,
   $radiobutton-focused-ripple-bg,
   $radiobutton-invalid-focused-ripple-bg,
 );
+
+.dx-radio-value-container {
+  padding-inline-end: $fluent-radio-value-container-padding;
+}
+
+.dx-state-readonly {
+  .dx-radiobutton-icon-dot {
+    background-color: $base-foreground-disabled;
+  }
+
+  .dx-radiobutton-icon {
+    border-color: $base-foreground-disabled;
+  }
+
+  .dx-radiobutton-checked {
+    &.dx-state-hover,
+    &.dx-state-focused,
+    &.dx-state-active {
+      .dx-radiobutton-icon-dot {
+        background-color: $base-foreground-disabled;
+      }
+    }
+  }
+}
+
+.dx-radiobutton {
+  &.dx-state-hover {
+    .dx-radiobutton-icon {
+      border-color: $radiogroup-border-color-hover;
+    }
+  }
+
+  &.dx-state-active {
+    .dx-radiobutton-icon {
+      border-color: $radiogroup-border-color-active;
+    }
+  }
+
+  &.dx-state-focused {
+    .dx-radiobutton-icon {
+      border-color: $radiogroup-accent-color-active;
+    }
+  }
+}
+
+.dx-radiobutton-checked {
+  &.dx-state-hover {
+    .dx-radiobutton-icon {
+      border-color: $radiogroup-accent-color-hover;
+    }
+
+    .dx-radiobutton-icon-dot {
+      background-color: $radiogroup-accent-color-hover;
+    }
+  }
+
+  &.dx-state-active,
+  &.dx-state-focused {
+    .dx-radiobutton-icon {
+      border-color: $radiogroup-accent-color-active;
+    }
+
+    .dx-radiobutton-icon-dot {
+      background-color: $radiogroup-accent-color-active;
+    }
+  }
+}
+
+.dx-invalid {
+  .dx-state-hover {
+    &.dx-radiobutton {
+      .dx-radiobutton-icon {
+        border-color: $radiobutton-invalid-color-focused;
+      }
+
+      .dx-radiobutton-icon-dot {
+        background-color: $radiobutton-invalid-color-focused;
+      }
+    }
+  }
+
+  .dx-state-focused {
+    &.dx-radiobutton {
+      .dx-radiobutton-icon {
+        border-color: $radiobutton-invalid-color-focused;
+      }
+
+      .dx-radiobutton-icon-dot {
+        background-color: $radiobutton-invalid-color-focused;
+      }
+    }
+  }
+
+  .dx-state-active {
+    &.dx-radiobutton {
+      .dx-radiobutton-icon {
+        border-color: $radiobutton-invalid-color-active;
+      }
+
+      .dx-radiobutton-icon-dot {
+        background-color: $radiobutton-invalid-color-active;
+      }
+    }
+  }
+
+  &.dx-state-readonly {
+    .dx-radiobutton {
+      .dx-radiobutton-icon-dot {
+        background-color: $base-foreground-disabled;
+      }
+    }
+  }
+}
+
+.dx-state-disabled {
+  color: $base-foreground-disabled;
+  
+  .dx-radiobutton {
+    .dx-radiobutton-icon {
+      border-color: $base-foreground-disabled;
+    }
+
+    .dx-radiobutton-icon-dot {
+      background-color: $base-foreground-disabled;
+    }
+  }
+}
diff --git a/packages/devextreme/scss/widgets/fluent/radioButton/_sizes.scss b/packages/devextreme/scss/widgets/fluent/radioButton/_sizes.scss
index c8fb28083418..ca9458a80ff6 100644
--- a/packages/devextreme/scss/widgets/fluent/radioButton/_sizes.scss
+++ b/packages/devextreme/scss/widgets/fluent/radioButton/_sizes.scss
@@ -6,16 +6,19 @@ $fluent-radiobutton-size: null !default;
 $fluent-radiobutton-dot-size: null !default;
 $fluent-radiobutton-ripple-size: null !default;
 
-$fluent-radiobutton-border-width: 2px !default;
+$fluent-radiobutton-border-width: 1px !default;
+$fluent-radio-value-container-padding: null !default;
 
 @if $size == "default" {
-  $fluent-radiobutton-size: 20px !default;
+  $fluent-radio-value-container-padding: 12px !default;
+  $fluent-radiobutton-size: 16px !default;
   $fluent-radiobutton-dot-size: 10px !default;
-  $fluent-radiobutton-ripple-size: 40px !default;
+  $fluent-radiobutton-ripple-size: 0 !default;
 }
 
 @else if $size == "compact" {
+  $fluent-radio-value-container-padding: 8px !default;
   $fluent-radiobutton-size: 16px !default;
-  $fluent-radiobutton-dot-size: 8px !default;
-  $fluent-radiobutton-ripple-size: 32px !default;
+  $fluent-radiobutton-dot-size: 10px !default;
+  $fluent-radiobutton-ripple-size: 0 !default;
 }
diff --git a/packages/devextreme/scss/widgets/fluent/radioGroup/_colors.scss b/packages/devextreme/scss/widgets/fluent/radioGroup/_colors.scss
index 8d7921fbb897..3a02379dfc8d 100644
--- a/packages/devextreme/scss/widgets/fluent/radioGroup/_colors.scss
+++ b/packages/devextreme/scss/widgets/fluent/radioGroup/_colors.scss
@@ -4,15 +4,22 @@
 
 // adduse
 
-$radiogroup-checked-bg: $base-accent !default;
-$radiogroup-border-color: $base-icon-color !default;
+$radiogroup-accent-color: $base-compound-accent !default;
+$radiogroup-accent-color-hover: $base-compound-accent-hover !default;
+$radiogroup-accent-color-active: $base-compound-accent-active !default;
+
+$radiogroup-border-color: $base-border-color-accessible !default;
+$radiogroup-border-color-hover: $base-border-color-accessible-hover !default;
+$radiogroup-border-color-active: $base-border-color-accessible-focused !default;
 $radiogroup-bg: $base-element-bg !default;
 
-$radiobutton-invalid-focused-border-color: $base-invalid-color !default;
-$radiobutton-invalid-faded-border-color: $base-invalid-faded-border-color !default;
+$radiobutton-invalid-color: $base-invalid-color !default;
+$radiobutton-invalid-color-hover: $base-invalid-color-hover !default;
+$radiobutton-invalid-color-active: $base-invalid-color-active !default;
+$radiobutton-invalid-color-focused: $base-invalid-color-selected !default;
 
 $radiogroup-readonly-border-color: $radiogroup-border-color !default;
 
 $radiobutton-focused-bg: color.change($base-text-color, $alpha: 0.1) !default;
-$radiobutton-focused-ripple-bg: color.change($radiogroup-checked-bg, $alpha: 0.1) !default;
+$radiobutton-focused-ripple-bg: color.change($radiogroup-accent-color, $alpha: 0.1) !default;
 $radiobutton-invalid-focused-ripple-bg: color.change($base-invalid-color, $alpha: 0.1) !default;
diff --git a/packages/devextreme/scss/widgets/fluent/radioGroup/_index.scss b/packages/devextreme/scss/widgets/fluent/radioGroup/_index.scss
index cfe56f5ac0e6..61c3887126e9 100644
--- a/packages/devextreme/scss/widgets/fluent/radioGroup/_index.scss
+++ b/packages/devextreme/scss/widgets/fluent/radioGroup/_index.scss
@@ -12,3 +12,15 @@
   $fluent-radio-button-vertical-margin,
   0,
 );
+
+.dx-radiogroup {
+  &.dx-state-disabled {
+    opacity: 1;
+  }
+}
+
+.dx-radiogroup-horizontal {
+  .dx-collection {
+    column-gap: 16px;
+  }
+}
diff --git a/packages/devextreme/scss/widgets/fluent/radioGroup/_sizes.scss b/packages/devextreme/scss/widgets/fluent/radioGroup/_sizes.scss
index 1bff7ab2b601..68d4e89dac25 100644
--- a/packages/devextreme/scss/widgets/fluent/radioGroup/_sizes.scss
+++ b/packages/devextreme/scss/widgets/fluent/radioGroup/_sizes.scss
@@ -3,12 +3,15 @@
 // adduse
 
 $fluent-radio-button-vertical-margin: null !default;
+$fluent-radio-group-horizontal-gap: null !default;
 
 @if $size == "default" {
+  $fluent-radio-group-horizontal-gap: 16px !default;
   $fluent-radio-button-vertical-margin: 12px !default;
 }
 
 @else if $size == "compact" {
+  $fluent-radio-group-horizontal-gap: 12px !default;
   $fluent-radio-button-vertical-margin: 6px !default;
 }
 
diff --git a/packages/devextreme/scss/widgets/fluent/slider/_colors.scss b/packages/devextreme/scss/widgets/fluent/slider/_colors.scss
index 738485a23bb7..b0d740391edb 100644
--- a/packages/devextreme/scss/widgets/fluent/slider/_colors.scss
+++ b/packages/devextreme/scss/widgets/fluent/slider/_colors.scss
@@ -9,15 +9,20 @@
 * $name 10. Slider bar background color
 * $type color
 */
-$fluent-slider-bar-bg: $base-neutral-foreground !default; // color.change($base-accent, $alpha: 0.24) !default;
+$fluent-slider-bar-bg: $base-neutral-foreground3 !default;
 
 /**
 * $name 20. Selected range background color
 * $type color
 */
-$fluent-slider-bg: $base-accent !default;
-$fluent-slider-bg-hover: $base-accent-hover !default;
-$fluent-slider-bg-focused: $base-accent-active !default;
+$slider-accent-color: $base-compound-accent !default;
+$slider-accent-color-hover: $base-compound-accent-hover !default;
+$slider-accent-color-focused: $base-compound-accent-active !default;
+
+$slider-invalid-color: $base-invalid-color !default;
+$slider-invalid-color-hover: $base-invalid-color-hover !default;
+$slider-invalid-color-focused: $base-invalid-color-selected !default;
+
 $fluent-slider-disabled-bg: $base-foreground-disabled !default;
 $fluent-slider-bar-disabled-bg: $base-neutral-background-disabled !default;
 $fluent-slider-tooltip-bg: $base-accent !default;
diff --git a/packages/devextreme/scss/widgets/fluent/slider/_index.scss b/packages/devextreme/scss/widgets/fluent/slider/_index.scss
index 5b7df4be57de..35aea008bcb9 100644
--- a/packages/devextreme/scss/widgets/fluent/slider/_index.scss
+++ b/packages/devextreme/scss/widgets/fluent/slider/_index.scss
@@ -31,7 +31,7 @@ $fluent-slider-disabled-tooltip-top-margin: 5px;
   border-radius: $fluent-slider-track-border-radius;
 
   &.dx-slider-range-visible {
-    background: $fluent-slider-bg;
+    background: $slider-accent-color;
   }
 }
 
@@ -50,7 +50,7 @@ $fluent-slider-disabled-tooltip-top-margin: 5px;
     position: absolute;
     display: block;
     inset: 0;
-    background: $fluent-slider-bg;
+    background: $slider-accent-color;
     content: "";
     border-radius: $fluent-slider-radius;
     border-width: 3px;
@@ -60,16 +60,15 @@ $fluent-slider-disabled-tooltip-top-margin: 5px;
 
   &.dx-state-hover {
     &::after {
-      background: $fluent-slider-bg-hover;
+      background: $slider-accent-color-hover;
     }
   }
 
-  &.dx-state-active,
   &.dx-state-focused {
-    border-color: $fluent-slider-bg-focused;
+    border-color: $slider-accent-color-focused;
 
     &::after {
-      background: $fluent-slider-bg-focused;
+      background: $slider-accent-color-focused;
     }
   }
 
@@ -156,22 +155,32 @@ $fluent-slider-disabled-tooltip-top-margin: 5px;
 
 .dx-invalid {
   .dx-slider-handle {
-    &.dx-state-focused {
-      border-color: $base-invalid-color;
-    }
-
     &::after {
       background-color: $base-invalid-color;
     }
+
+    &.dx-state-hover {
+      &::after {
+        background-color: $slider-invalid-color-hover;
+      }
+    }
+
+    &.dx-state-focused {
+      border-color: $slider-invalid-color-focused;
+
+      &::after {
+        background-color: $slider-invalid-color-focused;
+      }
+    }
   }
 
   .dx-slider-range-visible {
-    background-color: $base-invalid-color;
-    border-color: $base-invalid-color;
+    background-color: $slider-invalid-color;
+    border-color: $slider-invalid-color;
   }
 
   .dx-slider-bar {
-    background-color: color.change($base-invalid-color, $alpha: 0.4);
+    background-color: $base-neutral-background-disabled;
   }
 }
 
diff --git a/packages/devextreme/scss/widgets/fluent/switch/_colors.scss b/packages/devextreme/scss/widgets/fluent/switch/_colors.scss
index 1effd966a4fd..649581859b3b 100644
--- a/packages/devextreme/scss/widgets/fluent/switch/_colors.scss
+++ b/packages/devextreme/scss/widgets/fluent/switch/_colors.scss
@@ -4,6 +4,10 @@
 
 // adduse
 
+$switch-accent-color: $base-compound-accent !default;
+$switch-accent-color-hover: $base-compound-accent-hover !default;
+$switch-accent-color-focused: $base-compound-accent-active !default;
+
 /**
 * $name 20. Track 'OFF' background color
 * $type color
@@ -20,29 +24,31 @@ $switch-handle-off-bg: $base-border-color-accessible !default;
 * $name 40. Track 'ON' background color
 * $type color
 */
-$switch-on-bg: $base-accent !default; // color.change($base-accent, $alpha: 0.5) !default;
+$switch-on-bg: $base-compound-accent !default;
 
 /**
 * $name 50. Handle 'ON' background color
 * $type color
 */
-$switch-handle-on-bg: $base-bg !default; // $base-accent !default;
+$switch-handle-on-bg: $base-bg !default;
 $switch-handle-border-radius: 50% !default;
 $switch-hover-bg: transparent !default;
 $switch-on-disabled-bg: $base-neutral-background-disabled !default;
 $switch-handle-disabled-bg: $base-foreground-disabled !default;
+$switch-border-color-disabled: $base-border-color-disabled !default;
 $switch-off-border-color: $base-border-color-accessible !default;
 $switch-off-border-hover-color: $base-border-color-accessible-hover !default;
 $switch-off-border-active-color: $base-border-color-accessible-focused !default;
-$switch-on-border-color: $base-accent !default;
-$switch-invalid-handle-bg: $base-invalid-color !default;
-$switch-invalid-container-bg: $base-invalid-color !default;
+
+$switch-invalid-color: $base-invalid-color !default;
+$switch-invalid-color-hover: $base-invalid-color-hover !default;
+$switch-invalid-color-focused: $base-invalid-color-selected !default;
 
 @if $mode == "light" {
-  $switch-bg: transparent !default; // darken($base-element-bg, 38%) !default;
+  $switch-bg: transparent !default;
 }
 
 @if $mode == "dark" {
-  $switch-bg: transparent !default; // lighten($base-element-bg, 38%) !default;
+  $switch-bg: transparent !default;
 }
 
diff --git a/packages/devextreme/scss/widgets/fluent/switch/_index.scss b/packages/devextreme/scss/widgets/fluent/switch/_index.scss
index 3585903def75..6c85de952e61 100644
--- a/packages/devextreme/scss/widgets/fluent/switch/_index.scss
+++ b/packages/devextreme/scss/widgets/fluent/switch/_index.scss
@@ -9,10 +9,9 @@
 
 // adduse
 
-$fluent-switch-transition: all 0.2s cubic-bezier(0.33,0,0.67,1); // all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+$fluent-switch-transition: all 0.2s cubic-bezier(0.33,0,0.67,1);
 $fluent-switch-handle-on-shadow: 0 0 0 $fluent-switch-shadow-blur-radius color.change($switch-handle-on-bg, $alpha: 0.1);
-$fluent-switch-shadow: none; // 0 0 0 $fluent-switch-shadow-blur-radius color.change($base-text-color, $alpha: 0.1);
-$fluent-invalid-switch-shadow: 0 0 0 $fluent-switch-shadow-blur-radius color.change($switch-invalid-handle-bg, $alpha: 0.1);
+$fluent-switch-shadow: none;
 
 @include dx-switch(
   $fluent-switch-width,
@@ -32,8 +31,8 @@ $fluent-invalid-switch-shadow: 0 0 0 $fluent-switch-shadow-blur-radius color.cha
   $fluent-switch-shadow,
   $switch-bg,
   $switch-on-bg,
-  $base-accent-hover,
-  $base-accent-active,
+  $switch-accent-color-hover,
+  $switch-accent-color-focused,
   $fluent-switch-handle-on-shadow,
   $switch-handle-off-bg,
   $switch-handle-on-bg,
@@ -41,9 +40,11 @@ $fluent-invalid-switch-shadow: 0 0 0 $fluent-switch-shadow-blur-radius color.cha
   $switch-off-border-color,
   $switch-off-border-hover-color,
   $switch-off-border-active-color,
-  $switch-on-border-color,
-  $switch-invalid-container-bg,
-  $base-disabled-border-color,
+  $switch-accent-color,
+  $switch-invalid-color,
+  $switch-invalid-color-hover,
+  $switch-invalid-color-focused,
+  $switch-border-color-disabled,
 );
 @include dx-switch-rtl(
   $switch-handle-height - $switch-handle-margin,
diff --git a/packages/devextreme/scss/widgets/fluent/tagBox/_colors.scss b/packages/devextreme/scss/widgets/fluent/tagBox/_colors.scss
index 412a0e3d96ab..5b57d77a0b83 100644
--- a/packages/devextreme/scss/widgets/fluent/tagBox/_colors.scss
+++ b/packages/devextreme/scss/widgets/fluent/tagBox/_colors.scss
@@ -2,6 +2,7 @@
 @use "../sizes" as *;
 @use "../colors" as *;
 @use "../color" as extcolor;
+@use "../textEditor/colors" as *;
 
 // adduse
 
@@ -9,7 +10,7 @@
 * $name 10. Tag text color
 * $type color
 */
-$tagbox-tag-color: color.change($base-text-color, $alpha: 0.6) !default;
+$tagbox-tag-color: $base-text-color !default;
 
 /**
 * $name 20. Tag background color
@@ -34,17 +35,17 @@ $tagbox-tag-focused-bg: null !default;
 $tagbox-select-all-border-color: $base-border-color !default;
 
 @if $mode == "light" {
-  $tagbox-tag-bg: darken($base-bg, 12%) !default;
-  $tagbox-tag-hover-bg: darken($base-bg, 15%) !default;
+  $tagbox-tag-bg: $base-bg !default;
+  $tagbox-tag-hover-bg: $base-bg-hover !default;
   $tagbox-tag-button-remove-color: $tagbox-tag-bg !default;
-  $tagbox-tag-focused-bg: darken($base-bg, 32%) !default;
+  $tagbox-tag-focused-bg: $base-bg !default;
 }
 
 @if $mode == "dark" {
-  $tagbox-tag-bg: lighten($base-bg, 12%) !default;
-  $tagbox-tag-hover-bg: lighten($base-bg, 15%) !default;
+  $tagbox-tag-bg: $base-bg !default;
+  $tagbox-tag-hover-bg: $base-bg-hover !default;
   $tagbox-tag-button-remove-color: lighten($base-bg, 22%) !default;
-  $tagbox-tag-focused-bg: lighten($base-bg, 32%) !default;
+  $tagbox-tag-focused-bg: $base-bg !default;
 }
 
 $tagbox-tag-disabled-bg: $tagbox-tag-focused-bg !default;
diff --git a/packages/devextreme/scss/widgets/fluent/tagBox/_index.scss b/packages/devextreme/scss/widgets/fluent/tagBox/_index.scss
index 302aefaed56b..1a3a539ed985 100644
--- a/packages/devextreme/scss/widgets/fluent/tagBox/_index.scss
+++ b/packages/devextreme/scss/widgets/fluent/tagBox/_index.scss
@@ -16,7 +16,7 @@
     height: 100%;
     padding-top: $fluent-tagbox-tag-container-vertical-padding;
     padding-bottom: $fluent-tagbox-tag-container-vertical-padding;
-    gap: 4px;
+    gap: $fluent-tagbox-tag-container-gap;
 
     .dx-texteditor-input {
       padding: 0;
@@ -97,7 +97,7 @@
   display: inline-flex;
   align-items: center;
   font-size: $fluent-tagbox-tag-content-font-size;
-  line-height: normal;
+  line-height: $fluent-tagbox-tag-content-line-height;
   margin: 0;
   padding-top: $fluent-tagbox-tag-content-vertical-padding;
   padding-bottom: $fluent-tagbox-tag-content-vertical-padding;
@@ -107,6 +107,9 @@
   background-color: $tagbox-tag-bg;
   color: $tagbox-tag-color;
   border-radius: $tagbox-tag-border-radius;
+  border-width: 1px;
+  border-style: solid;
+  border-color: $base-border-color-disabled;
 }
 
 .dx-tag-remove-button {
@@ -136,12 +139,12 @@
       color: $tagbox-tag-active-color;
     }
   }
-}
 
-.dx-tag.dx-state-focused {
-  .dx-tag-content {
-    background-color: $tagbox-tag-focused-bg;
-    color: $tagbox-tag-active-color;
+  &.dx-state-focused {
+    .dx-tag-content {
+      color: $tagbox-tag-active-color;
+      border-color: $base-accent-active;
+    }
   }
 }
 
diff --git a/packages/devextreme/scss/widgets/fluent/tagBox/_sizes.scss b/packages/devextreme/scss/widgets/fluent/tagBox/_sizes.scss
index f82dde353f26..ccace4683bd1 100644
--- a/packages/devextreme/scss/widgets/fluent/tagBox/_sizes.scss
+++ b/packages/devextreme/scss/widgets/fluent/tagBox/_sizes.scss
@@ -6,39 +6,42 @@ $fluent-tagbox-tag-content-padding-left: null !default;
 $fluent-tagbox-tag-content-padding-right: null !default;
 $fluent-tagbox-tag-content-vertical-padding: null !default;
 $fluent-tagbox-tag-content-font-size: null !default;
-$fluent-tagbox-tag-container-padding: null !default;
 $fluent-tagbox-tag-container-padding-left: null !default;
 $fluent-tagbox-tag-container-vertical-padding: null !default;
 $fluent-tagbox-tag-height: null !default;
 $fluent-tagbox-select-all-padding-bottom: 12px !default;
 $fluent-tagbox-select-all-margin-bottom: 3px !default;
-$tagbox-tag-border-radius: 2em !default;
+$tagbox-tag-border-radius: $base-border-radius !default;
 $fluent-tagbox-outlined-with-label-top-padding: null !default;
 $fluent-tagbox-filled-with-label-top-padding: null !default;
 $fluent-tagbox-filled-with-label-bottom-padding: null !default;
+$fluent-tagbox-tag-content-line-height: null !default;
+$fluent-tagbox-tag-container-gap: null !default;
 
 @if $size == "default" {
   $fluent-tagbox-tag-content-padding-left: 6px !default; // 8px !default;
   $fluent-tagbox-tag-content-padding-right: 20px !default; // 30px !default;
   $fluent-tagbox-tag-content-vertical-padding: 2px !default; // 4px !default;
   $fluent-tagbox-tag-content-font-size: 12px !default; // 14px !default;
-  $fluent-tagbox-tag-container-padding: 0 12px 3px 16px !default; // 0 12px 11px 16px !default;
   $fluent-tagbox-tag-container-padding-left: 12px !default; // 16px !default;
-  $fluent-tagbox-tag-container-vertical-padding: 6px !default; // 11px !default;
-  $fluent-tagbox-tag-height: 18px !default; // 26px !default; 
-  $fluent-tagbox-filled-with-label-top-padding: 10px !default; // 18px !default; 
-  $fluent-tagbox-filled-with-label-bottom-padding: 2px !default; // 4px !default;
+  $fluent-tagbox-tag-container-vertical-padding: 5px !default; // 11px !default;
+  $fluent-tagbox-tag-container-gap: 4px !default;
+  $fluent-tagbox-tag-height: 20px !default; // 26px !default;
+  $fluent-tagbox-tag-content-line-height: normal !default;
+  $fluent-tagbox-filled-with-label-top-padding: 9px !default; // 18px !default; 
+  $fluent-tagbox-filled-with-label-bottom-padding: 1px !default; // 4px !default;
 }
 
 @else if $size == "compact" {
   $fluent-tagbox-tag-content-padding-left: 4px !default;
   $fluent-tagbox-tag-content-padding-right: 20px !default;
-  $fluent-tagbox-tag-content-vertical-padding: 2px !default;
+  $fluent-tagbox-tag-content-vertical-padding: 0 !default;
   $fluent-tagbox-tag-content-font-size: 10px !default;
-  $fluent-tagbox-tag-container-padding: 0 8px 3px 11px !default;
-  $fluent-tagbox-tag-container-padding-left: 12px !default;
+  $fluent-tagbox-tag-container-padding-left: 8px !default;
   $fluent-tagbox-tag-container-vertical-padding: 3px !default;
-  $fluent-tagbox-tag-height: 16px !default;
-  $fluent-tagbox-filled-with-label-top-padding: 5px !default;
-  $fluent-tagbox-filled-with-label-bottom-padding: 1px !default;
+  $fluent-tagbox-tag-container-gap: 2px !default;
+  $fluent-tagbox-tag-height: 14px !default;
+  $fluent-tagbox-tag-content-line-height: 1.2em !default;
+  $fluent-tagbox-filled-with-label-top-padding: 6px !default;
+  $fluent-tagbox-filled-with-label-bottom-padding: 0 !default;
 }
diff --git a/packages/devextreme/scss/widgets/fluent/textEditor/_colors.scss b/packages/devextreme/scss/widgets/fluent/textEditor/_colors.scss
index d906e1f8f146..8abbc8a81c30 100644
--- a/packages/devextreme/scss/widgets/fluent/textEditor/_colors.scss
+++ b/packages/devextreme/scss/widgets/fluent/textEditor/_colors.scss
@@ -21,7 +21,7 @@ $texteditor-label-color: $texteditor-placeholder-color;
 * $name 30. Background color
 * $type color
 */
-$texteditor-bg: $base-neutral-background !default; // color.change($base-text-color, $alpha: 0.04) !default;
+$texteditor-bg: $base-neutral-background !default;
 $texteditor-bg-hover: $base-neutral-background-hover !default;
 
 /**
@@ -55,7 +55,7 @@ $texteditor-focused-border-color: $base-accent !default;
 * $type color
 */
 $texteditor-hover-bg: null !default; // color.change($base-text-color, $alpha: 0.07) !default;
-$texteditor-button-clear-icon-color: $base-neutral-foreground !default;
+$texteditor-button-clear-icon-color: $base-neutral-foreground3 !default;
 $texteditor-invalid-focused-border-color: $base-invalid-color !default;
 $texteditor-invalid-faded-border-color: $base-invalid-faded-border-color !default;
 $texteditor-disabled-color: $base-disabled-color !default;
diff --git a/packages/devextreme/scss/widgets/generic/radioButton/_index.scss b/packages/devextreme/scss/widgets/generic/radioButton/_index.scss
index 92887d2e38dd..09d78770ac6f 100644
--- a/packages/devextreme/scss/widgets/generic/radioButton/_index.scss
+++ b/packages/devextreme/scss/widgets/generic/radioButton/_index.scss
@@ -13,12 +13,10 @@
 @include dx-radiobutton-icon-mixin(
   $generic-radiobutton-size,
   $generic-radiobutton-border-width,
-  $radiogroup-border-color,
-  $radiogroup-bg,
-  $radiogroup-checked-bg,
   $generic-radiobutton-dot-size,
 );
 @include dx-radiobutton-states-mixin(
+  $radiogroup-bg,
   $radiogroup-border-color,
   $radiogroup-readonly-border-color,
   $radiogroup-hover-border-color,
diff --git a/packages/devextreme/scss/widgets/material/radioButton/_index.scss b/packages/devextreme/scss/widgets/material/radioButton/_index.scss
index cb8922582d36..cb9e02bf19d9 100644
--- a/packages/devextreme/scss/widgets/material/radioButton/_index.scss
+++ b/packages/devextreme/scss/widgets/material/radioButton/_index.scss
@@ -15,15 +15,13 @@ $material-radiobutton-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1)
 @include dx-radiobutton-icon-mixin(
   $material-radiobutton-size,
   $material-radiobutton-border-width,
-  $radiogroup-border-color,
-  $radiogroup-bg,
-  $radiogroup-checked-bg,
   $material-radiobutton-dot-size,
   true,
   $material-radiobutton-ripple-size,
   $material-radiobutton-ripple-transition,
 );
 @include dx-radiobutton-states-mixin(
+  $radiogroup-bg,
   $radiogroup-border-color,
   $radiogroup-readonly-border-color,
   null,