Fluent: new design for editors (#25553)

DevExpress · Sep 10, 2023 · 7f267db · 7f267db
1 parent 1dba654
commit 7f267db
Show file tree

Hide file tree

Showing 152 changed files with 480 additions and 536 deletions.
diff --git a/...me/scss/widgets/base/_dropDownEditor.scss → ...s/widgets/base/dropDownEditor/_index.scss b/...me/scss/widgets/base/_dropDownEditor.scss → ...s/widgets/base/dropDownEditor/_index.scss
@@ -1,9 +1,9 @@
+@use "../mixins" as *;
 @use "./mixins" as *;
-@use "./textEditor/mixins" as *;
+@use "../textEditor/mixins" as *;
 
 // adduse
 
-
 .dx-dropdowneditor {
   position: relative;
 
@@ -93,8 +93,4 @@
   .dx-dropdowneditor-button {
     cursor: inherit;
   }
-
-  .dx-dropdowneditor-icon {
-    opacity: 0.2;
-  }
 }
diff --git a/packages/devextreme/scss/widgets/base/dropDownEditor/_mixins.scss b/packages/devextreme/scss/widgets/base/dropDownEditor/_mixins.scss
@@ -0,0 +1,34 @@
+@use "../icons" as *;
+
+@mixin invalid-dropdowneditor-input-padding(
+  $invalid-badge-size,
+  $texteditor-underlined-input-horizontal-padding,
+  $texteditor-filled-input-horizontal-padding,
+) {
+  &.dx-dropdowneditor-button-visible {
+    &.dx-editor-underlined {
+      .dx-texteditor-input {
+        padding-inline-end: $invalid-badge-size + $texteditor-underlined-input-horizontal-padding;
+      }
+
+      .dx-start-datebox {
+        .dx-texteditor-input {
+          padding-inline-end: $texteditor-underlined-input-horizontal-padding;
+        }
+      }
+    }
+
+    &.dx-editor-filled,
+    &.dx-editor-outlined {
+      .dx-texteditor-input {
+        padding-inline-end: $invalid-badge-size + $texteditor-filled-input-horizontal-padding;
+      }
+
+      .dx-start-datebox {
+        .dx-texteditor-input {
+          padding-inline-end: $texteditor-filled-input-horizontal-padding;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/devextreme/scss/widgets/base/switch/_mixins.scss b/packages/devextreme/scss/widgets/base/switch/_mixins.scss
@@ -172,8 +172,8 @@
 }
 
 @mixin dx-switch-states-fluent(
+  $switch-on-disabled-bg,
   $switch-handle-disabled-bg,
-  $switch-disabled-bg,
   $switch-shadow,
   $switch-bg,
   $switch-on-bg,
@@ -315,11 +315,8 @@
     &.dx-state-disabled,
     &.dx-state-readonly {
       .dx-switch-container::before {
-        background-color: $base-disabled-border-color;
-      }
-
-      .dx-switch-handle::before {
-        background-color: $switch-handle-disabled-bg;
+        border-color: $switch-on-disabled-bg;
+        background-color: $switch-on-disabled-bg;
       }
     }
   }

diff --git a/packages/devextreme/scss/widgets/base/textArea/_mixins.scss b/packages/devextreme/scss/widgets/base/textArea/_mixins.scss
@@ -19,9 +19,13 @@
 
     &.dx-texteditor-with-label,
     &.dx-texteditor-with-floating-label {
-      .dx-placeholder::before,
-      .dx-texteditor-input {
-        padding-top: 0;
+      &.dx-editor-outlined,
+      &.dx-editor-filled,
+      &.dx-editor-underlined {
+        .dx-placeholder::before,
+        .dx-texteditor-input {
+          padding-top: 0;
+        }
       }
 
       &.dx-editor-outlined {

diff --git a/packages/devextreme/scss/widgets/base/textEditor/_mixins.scss b/packages/devextreme/scss/widgets/base/textEditor/_mixins.scss
@@ -95,17 +95,20 @@
   }
 }
 
-@mixin dx-state-border-color($borderColor) {
+@mixin dx-state-border-color($borderColor, $border-bottom-color) {
   .dx-label {
     border-color: $borderColor;
+    border-bottom-color: $border-bottom-color;
   }
 
   .dx-label-before {
     border-color: $borderColor;
+    border-bottom-color: $border-bottom-color;
   }
 
   .dx-label-after {
     border-color: $borderColor;
+    border-bottom-color: $border-bottom-color;
   }
 }
 
@@ -124,7 +127,6 @@
 }
 
 @mixin dx-editor-outlined(
-  $texteditor-border-color,
   $texteditor-input-border-radius,
   $texteditor-label-font-size,
   $label-border-width,
@@ -137,9 +139,14 @@
   $label-before-min-width,
   $label-after-min-width,
   $base-bg,
+  $texteditor-border,
+  $texteditor-border-color,
+  $texteditor-border-bottom-color,
   $texteditor-disabled-color,
   $texteditor-hover-border-color,
+  $texteditor-hover-border-bottom-color,
   $texteditor-focused-border-color,
+  $texteditor-focused-border-bottom-color,
   $texteditor-invalid-faded-border-color,
   $texteditor-invalid-focused-border-color,
   $texteditor-label-transition,
@@ -158,7 +165,8 @@
       border-bottom-width: $label-border-width;
       border-inline-width: 0;
       border-style: solid;
-      border-color: $texteditor-border-color;
+      border-top-color: $texteditor-border-color;
+      border-bottom-color: $texteditor-border-bottom-color;
       margin-left: -2px;
       margin-right: -2px;
       border-radius: 1px;
@@ -180,7 +188,9 @@
       border-inline-start-width: $label-border-width;
       border-inline-end-width: 0;
       border-style: solid;
-      border-color: $texteditor-border-color;
+      border-top-color: $texteditor-border-color;
+      border-bottom-color: $texteditor-border-bottom-color;
+      border-inline-start-color: $texteditor-border-color;
       border-start-start-radius: $texteditor-input-border-radius;
       border-end-start-radius: $texteditor-input-border-radius;
       min-width: $label-before-min-width;
@@ -194,7 +204,9 @@
       border-inline-end-width: $label-border-width;
       border-inline-start-width: 0;
       border-style: solid;
-      border-color: $texteditor-border-color;
+      border-top-color: $texteditor-border-color;
+      border-bottom-color: $texteditor-border-bottom-color;
+      border-inline-end-color: $texteditor-border-color;
       border-start-end-radius: $texteditor-input-border-radius;
       border-end-end-radius: $texteditor-input-border-radius;
       clip-path: inset(-1px -1px -1px 1px);
@@ -238,38 +250,35 @@
       }
 
       &.dx-texteditor:not(.dx-daterangebox) {
-        border: none;
+        border: $texteditor-border;
         box-shadow: none;
       }
 
       &.dx-state-readonly {
         @include dx-state-border-style($label-readonly-border-style);
-        @include dx-state-border-color($texteditor-disabled-color);
+        @include dx-state-border-color($texteditor-disabled-color, $texteditor-disabled-color);
       }
 
       &.dx-state-disabled {
-        @include dx-state-border-color($texteditor-disabled-color);
+        @include dx-state-border-color($texteditor-disabled-color, $texteditor-disabled-color);
       }
 
       &.dx-invalid {
-        @include dx-state-border-color($texteditor-invalid-faded-border-color);
+        @include dx-state-border-color($texteditor-invalid-faded-border-color, $texteditor-invalid-faded-border-color);
+
+        &.dx-state-hover,
+        &.dx-state-focused {
+          @include dx-state-border-color($texteditor-invalid-focused-border-color, $texteditor-invalid-focused-border-color);
+        }
       }
 
       &.dx-state-hover {
-        @include dx-state-border-color($texteditor-hover-border-color);
-
-        &.dx-invalid {
-          @include dx-state-border-color($texteditor-invalid-focused-border-color);
-        }
+        @include dx-state-border-color($texteditor-hover-border-color, $texteditor-hover-border-bottom-color);
       }
 
       &.dx-state-focused {
-        @include dx-state-border-color($texteditor-focused-border-color);
+        @include dx-state-border-color($texteditor-focused-border-color, $texteditor-focused-border-bottom-color);
         @include dx-state-border-width($label-active-border-width);
-
-        &.dx-invalid {
-          @include dx-state-border-color($texteditor-invalid-focused-border-color);
-        }
       }
     }
 
@@ -380,7 +389,7 @@
           height: $texteditor-empty-label-height;
           line-height: $texteditor-empty-label-line-height;
           top: 50%;
-          margin-top: math.div(-$texteditor-label-height, 2);
+          margin-top: math.div(-$texteditor-empty-label-height, 2);
         }
 
         &.dx-textarea {
@@ -461,7 +470,7 @@
           height: $texteditor-empty-label-height;
           line-height: $texteditor-empty-label-line-height;
           top: 50%;
-          margin-top: math.div(-$texteditor-label-height, 2);
+          margin-top: math.div(-$texteditor-empty-label-height, 2);
         }
 
         &.dx-textarea {
@@ -605,13 +614,13 @@
         }
 
         > .dx-dropdowneditor-button:last-child,
-        > .dx-numberbox-spin-container:last-child {
+        > .dx-numberbox-spin-container:last-child,
+        > .dx-clear-button-area {
           margin-inline-end: $material-filled-texteditor-spin-button-horizontal-padding;
         }
 
-        > .dx-clear-button-area:last-child,
-        > .dx-clear-button-area + div:empty:last-child {
-          margin-inline-end: $material-filled-texteditor-input-button-horizontal-padding;
+        > div:empty:last-child {
+          display: none;
         }
       }
     }

diff --git a/packages/devextreme/scss/widgets/fluent/_colors.scss b/packages/devextreme/scss/widgets/fluent/_colors.scss
@@ -19,7 +19,7 @@ $fluent-color-theme-modificator: null !default;
 * $name 10. Font family
 * $type text
 */
-$base-font-family: Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif !default; // stylelint-disable-line value-keyword-case
+$base-font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif !default; // stylelint-disable-line value-keyword-case
 
 /**
 * $name 20. Text color
@@ -50,18 +50,28 @@ $base-spin-icon-color: null !default;
 * $type color
 */
 $base-bg: null !default;
+$base-bg-hover: null !default;
+$base-neutral-background: null !default;
+$base-neutral-foreground: null !default;
+$base-neutral-background-hover: null !default;
 
 /**
 * $name 40. Border color
 * $type color
 */
 $base-border-color: null !default;
-$base-border-hover-color: null !default;
-$base-border-active-color: null !default;
+$base-border-color-hover: null !default;
+$base-border-color-focused: null !default;
+$base-border-color-accessible: null !default;
+$base-border-color-accessible-hover: null !default;
+$base-border-color-accessible-focused: null !default;
 $base-inverted-bg: null !default;
 $base-element-bg: null !default;
 $base-shadow-color: null !default;
 
+$base-foreground-disabled: null !default;
+$base-neutral-background-disabled: null !default;
+
 /**
 * $name 50. Success color
 * $type color
@@ -127,14 +137,23 @@ $scrollview-pulldown-path: null !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(0, 0, 0, $base-disabled-opacity) !default;
-  $base-disabled-border-color: rgba(240, 240, 240, 1) !default; // F0F0F0
-  $base-icon-color: color.change($base-text-color, $alpha: 0.54) !default;
-  $base-spin-icon-color: color.change($base-text-color, $alpha: 0.54) !default;
-  $base-bg: #fff !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-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-bg: rgba(255, 255, 255, 1) !default; // #ffffff
+  $base-bg-hover: rgba(245, 245, 245, 1) !default; // #f5f5f5
+  $base-neutral-background: rgba(245, 245, 245, 1) !default; // #f5f5f5
+  $base-neutral-background-hover: rgba(235, 235, 235, 1) !default; // #ebebeb
   $base-border-color: rgba(209, 209, 209, 1) !default; // d1d1d1
-  $base-border-hover-color: darken($base-border-color, 3.92) !default; // c7c7c7
-  $base-border-active-color: darken($base-border-color, 11.76) !default; // b3b3b3
+  $base-border-color-hover: darken($base-border-color, 3.92) !default; // c7c7c7
+  $base-border-color-focused: darken($base-border-color, 11.76) !default; // b3b3b3
+  $base-border-color-accessible: rgba(97, 97, 97, 1) !default; // #616161
+  $base-border-color-accessible-hover: rgba(87, 87, 87, 1) !default; // #575757
+  $base-border-color-accessible-focused: rgba(77, 77, 77, 1) !default; // #4d4d4d
   $base-inverted-bg: darken($base-bg, 100%) !default;
   $base-element-bg: $base-bg !default;
   $base-shadow-color: $base-inverted-bg !default;
@@ -158,14 +177,23 @@ $scrollview-pulldown-path: null !default;
   $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(255, 255, 255, $base-disabled-opacity) !default;
-  $base-disabled-border-color: rgba(61, 61, 61, 1) !default; // 3d3d3d
-  $base-icon-color: color.change($base-text-color, $alpha: 0.54) !default;
-  $base-spin-icon-color: color.change($base-text-color, $alpha: 0.54) !default;
-  $base-bg: #363640 !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-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-bg: rgba(41, 41, 41, 1) !default; // #292929
+  $base-bg-hover: rgba(61, 61, 61, 1) !default; // #3d3d3d
+  $base-neutral-background: rgba(20, 20, 20, 1) !default; // #f5f5f5
+  $base-neutral-background-hover: rgba(41, 41, 41, 1) !default; // #292929
   $base-border-color: rgba(102, 102, 102, 1) !default; // #666666
-  $base-border-hover-color: lighten( $base-border-color, 5.88) !default; // #757575
-  $base-border-active-color: lighten( $base-border-color, 1.96) !default; // #6b6b6b
+  $base-border-color-hover: lighten( $base-border-color, 5.88) !default; // #757575
+  $base-border-color-focused: lighten( $base-border-color, 1.96) !default; // #6b6b6b
+  $base-border-color-accessible: rgba(173, 173, 173, 1) !default; // #adadad
+  $base-border-color-accessible-hover: rgba(189, 189, 189, 1) !default; // #bdbdbd
+  $base-border-color-accessible-focused: rgba(179, 179, 179, 1) !default; // #b3b3b3
   $base-inverted-bg: lighten($base-bg, 100%) !default;
   $base-element-bg: $base-bg !default;
   $base-shadow-color: #000 !default;

diff --git a/packages/devextreme/scss/widgets/fluent/_sizes.scss b/packages/devextreme/scss/widgets/fluent/_sizes.scss
@@ -47,7 +47,7 @@ $fluent-button-icon-margin: null !default;
   $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: 10px !default;
+  $fluent-base-inline-horizontal-padding: 12px !default; // 10px !default;
   $fluent-base-border-radius: 4px !default;
   $fluent-base-dropdown-widgets-shadow: 0 2px 7px $base-dropdown-shadow-color !default;
   $fluent-accordion-item-opened-margin: 16px !default;
@@ -60,14 +60,14 @@ $fluent-button-icon-margin: null !default;
   $fluent-size-postfix: ".compact" !default;
 
   // Font sizes
-  $fluent-base-font-size: 13px !default;
+  $fluent-base-font-size: 12px !default; // 13px !default;
 
   // Base sizes
-  $fluent-base-inline-widget-height: 32px !default;
-  $fluent-base-inline-block-height: 15px !default;
+  $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-horizontal-padding: 8px !default;
-  $fluent-base-border-radius: 2px !default;
+  $fluent-base-border-radius: 4px !default; // 2px !default;
   $fluent-base-dropdown-widgets-shadow: 0 2px 4px $base-dropdown-shadow-color !default;
   $fluent-accordion-item-opened-margin: 8px !default;
   $fluent-button-height: 24px !default;