Fluent: transfer pallet colors to the system for obtaining colors fro…

…m the base color values (#25917)

Signed-off-by: EugeniyKiyashko <[email protected]>

packages/devextreme/scss/widgets/fluent/badge/_colors.scss

@@ -14,10 +14,10 @@ $badge-color: null !default;
 * $name 140. Badge background color
 * $type color
 */
-$badge-bg: $base-brand-bg !default;
+$badge-bg: $base-accent-bg !default;
 
 $badge-text-color-disabled: $base-foreground-disabled !default;
-$badge-background-color-disabled: $base-neutral-background-disabled !default;
+$badge-background-color-disabled: $base-background-disabled !default;
 
 @if $mode == "light" {
   $badge-color: $base-inverted-text-color !default;

packages/devextreme/scss/widgets/fluent/calendar/_colors.scss

@@ -42,19 +42,21 @@ $calendar-cell-active-bg: null !default;
 $calendar-invalid-border-color: $base-invalid-color !default;
 $calendar-invalid-border-color-focused: $base-invalid-color-active !default;
 $calendar-week-number-cell-color: $base-neutral-foreground3 !default;
-$calendar-week-number-cell-bg: $base-neutral-border-color3 !default;
+$calendar-week-number-cell-bg: null !default;
 $calendar-week-number-border-radius: 0 !default;
 
 @if $mode == "light" {
-  $calendar-hover-bg: $base-brand2-bg-hover !default;
-  $calendar-cell-hover-border-color: $base-brand2-bg-hover !default;
-  $calendar-cell-active-bg: $base-brand2-bg-active !default;
-  $calendar-cell-contoured-border-color: $base-brand2-bg-active !default;
+  $calendar-hover-bg: $button-default-outlined-selected-bg !default;
+  $calendar-cell-hover-border-color: $calendar-hover-bg !default;
+  $calendar-cell-active-bg: $button-default-outlined-active-bg !default;
+  $calendar-cell-contoured-border-color: $calendar-cell-active-bg !default;
+  $calendar-week-number-cell-bg: $base-background-disabled !default;
 }
 
 @if $mode == "dark" {
-  $calendar-hover-bg: $base-foreground-inverted-hover !default;
-  $calendar-cell-hover-border-color: $base-foreground-inverted-hover !default;
-  $calendar-cell-active-bg: $base-foreground-inverted-focused !default;
+  $calendar-hover-bg: $base-accent-bg !default;
+  $calendar-cell-hover-border-color: $base-accent-bg !default;
+  $calendar-cell-active-bg: $base-accent-selected !default;
   $calendar-cell-contoured-border-color: $base-accent-active !default;
+  $calendar-week-number-cell-bg: $base-bg-hover !default;
 }

packages/devextreme/scss/widgets/fluent/checkBox/_colors.scss

@@ -18,5 +18,5 @@ $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-border-color-disabled: $base-border-color-disabled !default;
 $checkbox-foreground-disabled-color: $base-foreground-disabled !default;

packages/devextreme/scss/widgets/fluent/checkBox/_index.scss

@@ -46,7 +46,7 @@ $icon-position: relative;
 
   &.dx-state-readonly {
     .dx-checkbox-icon {
-      border-color: $checkbox-disabled-color;
+      border-color: $checkbox-border-color-disabled;
     }
   }
 
@@ -88,7 +88,7 @@ $icon-position: relative;
     opacity: 1; 
 
     .dx-checkbox-icon {
-      border-color: $checkbox-disabled-color;
+      border-color: $checkbox-border-color-disabled;
     }
   }
 }

packages/devextreme/scss/widgets/fluent/colorView/_colors.scss

@@ -14,7 +14,7 @@ $colorbox-palette-cell-bg: $colorbox-overlay-bg !default;
 $colorview-border-color: $base-border-color !default;
 $colorview-label-color: $base-label-color !default;
 $colorview-handle-color: $base-bg !default;
-$colorview-handle-border-color: color.change($base-inverted-bg, $alpha: 0.2) !default;
+$colorview-handle-border-color: $base-border-color !default;
 $colorbox-preview-empty-bg: null !default;
 
 

packages/devextreme/scss/widgets/fluent/dataGrid/_colors.scss

@@ -4,3 +4,12 @@
 
 // adduse
 
+$fluent-datagrid-grouppanel-item-bg: null !default;
+
+@if $mode == "light" {
+  $fluent-datagrid-grouppanel-item-bg: darken($base-bg, 5.88) !default;
+}
+
+@if $mode == "dark" {
+  $fluent-datagrid-grouppanel-item-bg: darken($base-bg, 12.16) !default;
+}

packages/devextreme/scss/widgets/fluent/dataGrid/_index.scss

@@ -46,7 +46,7 @@
     font-weight: $fluent-datagrid-grouppanel-item-font-weight;
     font-size: $fluent-grid-base-header-cell-font-size;
     line-height: $fluent-grid-base-header-line-height;
-    background: $base-neutral-background4;
+    background: $fluent-datagrid-grouppanel-item-bg;
     border-radius: 16px;
     padding: 8px 10px;
     border-width: 1px;

packages/devextreme/scss/widgets/fluent/fileUploader/_colors.scss

@@ -10,7 +10,7 @@
 */
 $fileuploader-filename-color: $base-text-color !default;
 $fileuploader-progressbar-status-color: $base-text-color !default;
-$fluent-fileuploader-files-container-bg-color: $base-neutral-background1 !default;
+$fluent-fileuploader-files-container-bg-color: $base-bg !default;
 
 /**
 * $name 20. File status text color

packages/devextreme/scss/widgets/fluent/fileUploader/_index.scss

@@ -10,7 +10,7 @@
 // adduse
 
 $fluent-fileuploader-file-wrapper-border-size: 3px;
-$fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+$fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 color.change($base-shadow-color, $alpha: 0.1);
 
 .dx-fileuploader-wrapper {
   padding: $fluent-fileuploader-vertical-padding;

packages/devextreme/scss/widgets/fluent/gallery/_colors.scss

@@ -25,7 +25,7 @@ $gallery-indicator-focused-bg: $base-accent !default;
 $gallery-indicator-item-border-color: color.change(#000, $alpha: 0.2) !default;
 $gallery-indicator-selected-border-color: color.change($gallery-indicator-bg, $alpha: 0.8) !default;
 $gallery-navbutton-color: color.change($base-text-color, $alpha: 0.54) !default;
-$gallery-nav-arrow-color: $base-inverted-icon-color !default;
+$gallery-nav-arrow-color: $base-inverted-text-color !default;
 
 /**
 * $name 40. Hovered navigation button color

packages/devextreme/scss/widgets/fluent/gridBase/_colors.scss

@@ -12,7 +12,7 @@ $datagrid-base-color: $base-text-color !default;
 * $type color
 */
 $datagrid-base-background-color: $base-bg !default;
-$datagrid-border-color: $base-neutral-border-color3 !default;
+$datagrid-border-color: null !default;
 $datagrid-border: 1px solid $datagrid-border-color !default;
 
 /**
@@ -173,6 +173,7 @@ $datagrid-text-link-disabled-opacity: $base-disabled-opacity;
 $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
 
 @if $mode == "light" {
+  $datagrid-border-color: lighten($base-border-color, 6.27) !default;
   $datagrid-columnchooser-item-color: $datagrid-base-color !default;
   $datagrid-group-row-color: $datagrid-columnchooser-item-color !default;
   $datagrid-block-separator-bg: darken($datagrid-base-background-color, 12%) !default;
@@ -189,6 +190,7 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
 }
 
 @if $mode == "dark" {
+  $datagrid-border-color: darken($base-border-color, 14.12) !default;
   $datagrid-columnchooser-item-color: color.change($datagrid-base-color, $alpha: 0.6) !default;
   $datagrid-group-row-color: $datagrid-columnchooser-item-color !default;
   $datagrid-block-separator-bg: lighten($datagrid-base-background-color, 12%) !default;

packages/devextreme/scss/widgets/fluent/htmlEditor/_colors.scss

@@ -13,5 +13,5 @@ $htmleditor-resize-frame-border-color: $base-accent !default;
 $htmleditor-resize-handle-bg: $base-accent !default;
 $htmleditor-mention-bg: $base-bg-selected !default;
 $htmleditor-table-border-color: $base-border-color !default;
-$htmleditor-fileuploader-input-wrapper-border-color: $base-neutral-border-color4 !default;
-$htmleditor-fileuploader-input-wrapper-bg-color: $base-neutral-background2 !default;
+$htmleditor-fileuploader-input-wrapper-border-color: $base-border-color !default;
+$htmleditor-fileuploader-input-wrapper-bg-color: $typography-bg !default;

packages/devextreme/scss/widgets/fluent/list/_colors.scss

@@ -39,15 +39,15 @@ $list-expanded-group-color: $base-text-color !default;
 * $name 30. Hovered item background color
 * $type color
 */
-$list-item-hover-bg: $base-neutral-background1-hover !default;
+$list-item-hover-bg: $base-bg-hover !default;
 
 /**
 * $name 30. Selected item state background color
 * $type color
 */
-$list-item-selected-bg: $base-neutral-background1-selected !default;
-$list-item-selected-hover-bg: $base-neutral-background1-hover !default;
-$list-item-focused-selected-bg: $base-neutral-background1-active !default;
+$list-item-selected-bg: $base-bg-selected !default;
+$list-item-selected-hover-bg: $base-bg-hover !default;
+$list-item-focused-selected-bg: $base-bg-active !default;
 $list-item-hover-color: $base-hover-color !default;
 $list-item-selected-color: $base-neutral-foreground2 !default;
 $list-header-indicator-color: $base-icon-color !default;
@@ -56,7 +56,7 @@ $list-header-indicator-color: $base-icon-color !default;
 * $name 40. Active state item background color
 * $type color
 */
-$list-item-active-bg: $base-neutral-background1-active !default;
+$list-item-active-bg: $base-bg-active !default;
 $list-holdmenu-bg: $base-bg !default;
 $list-holdmenu-border-color: $list-border-color !default;
 $list-holdmenu-shadow-color: color.change($base-shadow-color, $alpha: 0.12) !default;

packages/devextreme/scss/widgets/fluent/list/_index.scss

@@ -27,12 +27,12 @@ $fluent-list-item-border: $fluent-list-item-border-width solid $list-border-colo
 
     .dx-list-item {
       opacity: 1;
-      color: $base-disabled-color;
+      color: $base-foreground-disabled;
     }
   }
 
   .dx-list-select-all-label {
-    color: $base-disabled-color;
+    color: $base-foreground-disabled;
 
     &::after {
       color: $base-border-color-disabled;

packages/devextreme/scss/widgets/fluent/menu/_colors.scss

@@ -4,7 +4,7 @@
 
 // adduse
 
-$menu-popup-bg: $base-neutral-background1 !default;
+$menu-popup-bg: $base-bg !default;
 $menu-item-hover-bg: null !default;
 $menu-item-bg-active: null !default;
 
@@ -20,7 +20,7 @@ $menu-item-expanded-color: $menu-color !default;
 * $name 20. Selected item background color
 * $type color
 */
-$menu-item-selected-bg: $base-neutral-background1-selected !default;
+$menu-item-selected-bg: $base-bg-selected !default;
 $menu-popup-border-color: $base-border-color !default;
 $menu-separator-bg: $base-border-color !default;
 $menu-item-selected-color: $base-text-color !default;
@@ -29,8 +29,8 @@ $menu-container-shadow-color: null !default;
 
 @if $mode == "light" {
   $menu-container-shadow-color: color.change($base-shadow-color, $alpha: 0.1) !default;
-  $menu-item-hover-bg: $base-neutral-background1-hover !default;
-  $menu-item-bg-active: $base-neutral-background1-active !default;
+  $menu-item-hover-bg: $base-bg-hover !default;
+  $menu-item-bg-active: $base-bg-active !default;
 }
 
 @if $mode == "dark" {

packages/devextreme/scss/widgets/fluent/numberBox/_colors.scss

@@ -7,5 +7,5 @@
 // adduse
 
 $numberbox-spin-icon-color: $base-spin-icon-color !default;
-$numberbox-spin-icon-background-hover: $base-neutral-background1-hover !default;
-$numberbox-spin-icon-background-active: $base-neutral-background1-active !default;
+$numberbox-spin-icon-background-hover: $base-bg-hover !default;
+$numberbox-spin-icon-background-active: $base-bg-active !default;

packages/devextreme/scss/widgets/fluent/overlay/_colors.scss

@@ -10,7 +10,7 @@ $overlay-border-color: $base-border-color !default;
 * $name 10. Content background color
 * $type color
 */
-$overlay-content-bg: $base-neutral-background1 !default;
+$overlay-content-bg: $base-bg !default;
 
 /**
 * $name 20. Shader background color

packages/devextreme/scss/widgets/fluent/pivotGrid/_colors.scss

@@ -13,15 +13,15 @@ $pivotgrid-border-color: $base-border-color !default;
 */
 $pivotgrid-area-color: $base-text-color !default;
 $pivotgrid-field-area-box-text-color: $pivotgrid-area-color !default;
-$pivotgrid-field-area-box-background-color: $base-neutral-background4 !default;
+$pivotgrid-field-area-box-background-color: null !default;
 $pivotgrid-field-area-box-font-weight: 400 !default;
 $pivotgrid-data-area-color: $base-text-color !default;
 
 /**
 * $name 20. Totals background color
 * $type color
 */
-$pivotgrid-totalcolor: $base-neutral-background1 !default;
+$pivotgrid-totalcolor: $base-bg !default;
 
 /**
 * $name 30. Grand totals background color
@@ -40,3 +40,11 @@ $pivotgrid-drag-header-first-shadow-color: color.change($base-shadow-color, $alp
 $pivotgrid-drag-header-second-shadow-color: color.change($base-shadow-color, $alpha: 0.2) !default;
 $pivotgrid-position-indicator-color: gray !default;
 $pivotgrid-chevron-icon-color: $pivotgrid-area-color !default;
+
+@if $mode == "light" {
+  $pivotgrid-field-area-box-background-color: darken($base-bg, 5.88) !default;
+}
+
+@if $mode == "dark" {
+  $pivotgrid-field-area-box-background-color: darken($base-bg, 12.16) !default;
+}

packages/devextreme/scss/widgets/fluent/progressBar/_colors.scss

@@ -9,14 +9,14 @@
 * $name 10. Bar background color
 * $type color
 */
-$progressbar-bg: $base-neutral-background6 !default;
+$progressbar-bg: null !default;
 
 /**
 * $name 20. Selected range background color
 * $type color
 */
 $progressbar-range-bg: $base-accent !default;
-$progressbar-container-disabled-bg: $base-neutral-background-disabled !default;
+$progressbar-container-disabled-bg: $base-background-disabled !default;
 $progressbar-range-disabled-bg: $base-foreground-disabled !default;
 $progressbar-range-indeterminate-color: $base-accent !default;
 $progressbar-range-invalid-color: $base-invalid-color !default;
@@ -30,3 +30,11 @@ $progressbar-invalid-interdeterminate-state-gradient: -90deg, transparent 5%, $p
 * $type color
 */
 $progressbar-label-color: $base-text-color !default;
+
+@if $mode == "light" {
+  $progressbar-bg: darken($base-bg, 9.80) !default;
+}
+
+@if $mode == "dark" {
+  $progressbar-bg: lighten($base-bg, 3.92) !default;
+}

packages/devextreme/scss/widgets/fluent/scheduler/_colors.scss

@@ -1,6 +1,7 @@
 @use "sass:color";
 @use "../sizes" as *;
 @use "../colors" as *;
+@use "../button/colors" as *;
 @use "../color" as extcolor;
 
 // adduse
@@ -38,7 +39,7 @@ $scheduler-appointment-base-color: null !default;
 * $type color
 */
 $scheduler-appointment-start-color: color.change($base-shadow-color, $alpha: 0.3) !default;
-$scheduler-appointment-active-color: $base-brand2-bg-active;
+$scheduler-appointment-active-color: $button-default-outlined-active-bg;
 
 /**
 * $name 60. Focused cell color

packages/devextreme/scss/widgets/fluent/selectBox/_colors.scss

@@ -8,4 +8,4 @@
 * $name 10. Item background color
 * $type color
 */
-$selectbox-list-bg: $base-neutral-background1 !default;
+$selectbox-list-bg: $base-bg !default;

packages/devextreme/scss/widgets/fluent/slider/_colors.scss

@@ -24,7 +24,7 @@ $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-bar-disabled-bg: $base-background-disabled !default;
 $fluent-slider-tooltip-bg: $base-accent !default;
 
 /**

packages/devextreme/scss/widgets/fluent/switch/_colors.scss

@@ -12,7 +12,7 @@ $switch-accent-color-focused: $base-accent-active !default;
 * $name 20. Track 'OFF' background color
 * $type color
 */
-$switch-bg: null !default;
+$switch-bg: transparent !default;
 
 /**
 * $name 30. Handle 'OFF' background color
@@ -33,7 +33,7 @@ $switch-on-bg: $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-on-disabled-bg: $base-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;
@@ -44,11 +44,3 @@ $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;
-}
-
-@if $mode == "dark" {
-  $switch-bg: transparent !default;
-}
-

packages/devextreme/scss/widgets/fluent/switch/_sizes.scss

@@ -12,7 +12,7 @@ $switch-handle-height: null !default;
 $switch-container-height: null !default;
 
 $fluent-switch-shadow-blur-radius: 0 !default;
-$fluent-switch-handle-shadow: none !default; // 0 1px 4px 0 rgba(0, 0, 0, 0.2) !default;
+$fluent-switch-handle-shadow: none !default;
 $fluent-switch-container-adjustment: 6px !default;
 
 @if $size == "default" {