Fluent: radiogroup & checkbox redesign (#25601)

DevExpress · Sep 18, 2023 · c1cbe32 · c1cbe32
1 parent 4ecd6b7
commit c1cbe32
Show file tree

Hide file tree

Showing 27 changed files with 673 additions and 295 deletions.
diff --git 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
@@ -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
@@ -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;