devextreme-themebuilder 23.2.2-beta → 23.2.3

package/data/scss/widgets/generic/menuBase/_index.scss

@@ -25,6 +25,10 @@ $generic-menu-popup-border: 1px solid $menu-popup-border-color;
     color: $typography-link-color;
   }
 
+  &.dx-state-disabled {
+    opacity: 0.5;
+  }
+
   &.dx-state-hover {
     color: $menu-item-hovered-color;
     background-color: $menu-item-hover-bg;
@@ -41,7 +45,7 @@ $generic-menu-popup-border: 1px solid $menu-popup-border-color;
 
   &.dx-menu-item-has-text {
     .dx-icon {
-      margin-right: -$generic-base-icon-size;
+      margin-inline-end: -$generic-base-icon-size;
     }
   }
 }
@@ -82,7 +86,10 @@ $generic-menu-popup-border: 1px solid $menu-popup-border-color;
     padding: $generic-menu-item-padding-reduced $generic-menu-item-padding-base $generic-menu-item-padding-increased;
 
     .dx-menu-item-text {
-      padding: $generic-menu-item-padding-top-base $generic-menu-padding-big $generic-menu-item-padding-base $generic-menu-item-padding-base + $generic-base-icon-size;
+      padding-top: $generic-menu-item-padding-top-base;
+      padding-inline-end: $generic-menu-padding-big;
+      padding-bottom: $generic-menu-item-padding-base;
+      padding-inline-start: $generic-menu-item-padding-base + $generic-base-icon-size;
     }
 
     .dx-menu-item-popout {
@@ -90,32 +97,4 @@ $generic-menu-popup-border: 1px solid $menu-popup-border-color;
       min-height: $generic-menu-arrow-image-size;
     }
   }
-
-  &.dx-rtl {
-    .dx-menu-item-content {
-      .dx-menu-item-text {
-        padding: $generic-menu-item-padding-top-base $generic-menu-item-padding-base + $generic-base-icon-size $generic-menu-item-padding-base $generic-menu-padding-big;
-      }
-
-      .dx-icon {
-        margin-left: auto;
-        margin-right: auto;
-      }
-
-      .dx-menu-item-popout-container {
-        margin-left: 0;
-        margin-right: auto;
-
-        .dx-menu-item-popout {
-          @include flip-horizontally();
-        }
-      }
-    }
-
-    .dx-menu-item-has-text {
-      .dx-icon {
-        margin-left: -$generic-base-icon-size;
-      }
-    }
-  }
 }

package/data/scss/widgets/generic/tabPanel/layout/tab/_base.scss

@@ -6,6 +6,7 @@
 @use "../../../tabs/variables/borders" as *;
 @use "../../../tabs/variables/sizes" as *;
 @use "../../../tabs/mixins" as *;
+@use "../../../tabs/layout/tab/base" as *;
 @use "../../../tabs" as *;
 @use "../../../../base/tabPanel";
 @use "../../variables/borders" as *;
@@ -27,13 +28,16 @@
   }
 }
 
-.dx-tabs:not(.dx-tabs-vertical) .dx-tabpanel-tab {
-  max-width: 140px;
+.dx-tabpanel-tabs .dx-tabs:not(.dx-tabs-vertical) {
+  .dx-tabpanel-tab {
+    max-width: $generic-tabpanel-tabs-item-width;
+  }
 }
 
 .dx-tabs-nav-buttons:not(.dx-tabs-vertical) {
   .dx-tabpanel-tab {
-    min-width: 140px;
+    width: $generic-tabpanel-tabs-item-width;
+    max-width: unset;
 
     &:last-child {
       &.dx-tab-selected::after {

package/data/scss/widgets/generic/tabPanel/variables/_sizes.scss

@@ -3,6 +3,7 @@
 // adduse
 
 $generic-tabpanel-tabs-item-padding: null !default;
+$generic-tabpanel-tabs-item-width: 140px !default;
 
 @if $size == "default" {
   $generic-tabpanel-tabs-item-padding: 9px !default;

package/data/scss/widgets/generic/tabs/layout/tab/_base.scss

@@ -74,15 +74,6 @@
     }
   }
 
-  &.dx-state-focused {
-    @include dx-tabs-border-mixin(
-      $generic-tabs-border-focused-top,
-      $generic-tabs-border-focused-right,
-      $generic-tabs-border-focused-bottom,
-      $generic-tabs-border-focused-left,
-    );
-  }
-
   &.dx-state-disabled .dx-tab-content {
     opacity: 0.32;
   }
@@ -91,19 +82,17 @@
     &::after {
       z-index: 2;
     }
-
-    @include dx-tabs-border-mixin(
-      $generic-tabs-border-focused-disabled-top,
-      $generic-tabs-border-focused-disabled-right,
-      $generic-tabs-border-focused-disabled-bottom,
-      $generic-tabs-border-focused-disabled-left,
-    );
   }
 
   .dx-tab-text {
     column-gap: $generic-tabs-icon-margin;
+    row-gap: $generic-tabs-item-gap;
     color: $tabs-tab-color;
     line-height: $generic-tab-text-line-height;
+
+    .dx-tab-text-span-pseudo {
+      display: none;
+    }
   }
 
   .dx-icon {
@@ -113,6 +102,7 @@
   }
 
   .dx-tabs-item-badge {
+    align-self: center;
     min-width: $generic-badge-min-size;
     min-height: $generic-badge-min-size;
   }
@@ -120,6 +110,24 @@
 
 .dx-tabs.dx-state-focused {
   .dx-tab {
+    &.dx-state-focused {
+      @include dx-tabs-border-mixin(
+        $generic-tabs-border-focused-top,
+        $generic-tabs-border-focused-right,
+        $generic-tabs-border-focused-bottom,
+        $generic-tabs-border-focused-left,
+      );
+    }
+
+    &.dx-state-focused.dx-state-disabled {
+      @include dx-tabs-border-mixin(
+        $generic-tabs-border-focused-disabled-top,
+        $generic-tabs-border-focused-disabled-right,
+        $generic-tabs-border-focused-disabled-bottom,
+        $generic-tabs-border-focused-disabled-left,
+      );
+    }
+
     &.dx-focused-disabled-next-tab {
       &::after {
         border-inline-end: none;

package/data/scss/widgets/generic/tabs/layout/tab/_vertical.scss

@@ -47,15 +47,6 @@
       );
     }
 
-    &.dx-state-focused {
-      @include dx-tabs-border-mixin(
-        $generic-tabs-vertical-border-focused-top,
-        $generic-tabs-vertical-border-focused-right,
-        $generic-tabs-vertical-border-focused-bottom,
-        $generic-tabs-vertical-border-focused-left,
-      );
-    }
-
     &.dx-state-focused.dx-state-disabled {
       @include dx-tabs-border-mixin(
         $generic-tabs-vertical-border-focused-disabled-top,
@@ -68,6 +59,15 @@
 
   &.dx-state-focused {
     .dx-tab {
+      &.dx-state-focused {
+        @include dx-tabs-border-mixin(
+          $generic-tabs-vertical-border-focused-top,
+          $generic-tabs-vertical-border-focused-right,
+          $generic-tabs-vertical-border-focused-bottom,
+          $generic-tabs-vertical-border-focused-left,
+        );
+      }
+
       &.dx-focused-disabled-next-tab {
         &::after {
           border-inline-end: $generic-tabs-border;

package/data/scss/widgets/generic/tabs/variables/_sizes.scss

@@ -4,7 +4,7 @@
 
 // adduse
 
-$generic-tabs-item-gap: 4px !default;
+$generic-tabs-item-gap: null !default;
 $generic-tabs-item-padding: null !default;
 $generic-tabs-item-padding-disabled-focused: null !default;
 $generic-tabs-border-width: $generic-base-border-width !default;
@@ -13,28 +13,27 @@ $generic-tabs-nav-button-height: null !default;
 $generic-tabs-nav-button-width: null !default;
 $generic-tab-text-line-height: null !default;
 $generic-tabs-icon-margin: null !default;
-$generic-tabs-icon-size: null !default;
-
+$generic-tabs-icon-size: $generic-base-icon-size !default;
 $generic-badge-min-size: null !default;
 
 @if $size == "default" {
+  $generic-tabs-item-gap: 4px !default;
   $generic-tabs-item-padding: 10px 9px !default;
   $generic-tabs-item-padding-disabled-focused: 10px !default;
   $generic-tabs-nav-button-width: 25px !default;
-  $generic-tab-text-line-height: 18px !default;
+  $generic-tab-text-line-height: 1.285715 !default;
   $generic-tabs-nav-button-height: 38px !default;
   $generic-tabs-icon-margin: 8px !default;
-  $generic-tabs-icon-size: 18px !default;
   $generic-badge-min-size: 18px !default;
 }
 
 @else if $size == "compact" {
+  $generic-tabs-item-gap: 2px !default;
   $generic-tabs-item-padding: 5px 4px !default;
   $generic-tabs-item-padding-disabled-focused: 5px !default;
   $generic-tabs-nav-button-width: 25px !default;
-  $generic-tab-text-line-height: 21px !default;
+  $generic-tab-text-line-height: 1.75 !default;
   $generic-tabs-nav-button-height: 38px !default;
-  $generic-tabs-icon-margin: 8px !default;
-  $generic-tabs-icon-size: 21px !default;
+  $generic-tabs-icon-margin: 7px !default;
   $generic-badge-min-size: 21px !default;
 }

package/data/scss/widgets/generic/textEditor/_index.scss

@@ -239,8 +239,8 @@ $generic-texteditor-invalid-badge-size: $generic-invalid-badge-size + 2 * $gener
 @include dx-editor-outlined(
   $texteditor-input-border-radius,
   $generic-texteditor-label-size,
-  1px,
-  1px,
+  $generic-base-border-width,
+  $generic-base-border-width,
   dashed,
   $generic-base-inline-block-height,
   $generic-base-inline-block-height,

package/data/scss/widgets/material/_sizes.scss

@@ -1,4 +1,3 @@
-$material-accordion-item-opened-margin: getCustomVar(("$material-accordion-item-opened-margin")) !default;
 $material-button-height: getCustomVar(("$material-button-height")) !default;
 $material-button-icon-size: getCustomVar(("$material-button-icon-size")) !default;
 $material-button-icon-margin: getCustomVar(("$material-button-icon-margin")) !default;
@@ -18,7 +17,6 @@ $material-base-inline-horizontal-padding: null !default;
 $material-base-border-radius: null !default;
 $material-base-dropdown-widgets-shadow: null !default;
 $material-html-editor-add-image-dialog-base-padding: 5px !default;
-$material-accordion-item-opened-margin: null !default;
 $material-button-height: null !default;
 $material-button-icon-size: null !default;
 $material-button-icon-margin: null !default;
@@ -36,7 +34,6 @@ $material-button-icon-margin: null !default;
   $material-base-inline-horizontal-padding: 10px !default;
   $material-base-border-radius: 4px !default;
   $material-base-dropdown-widgets-shadow: 0 2px 7px $base-dropdown-shadow-color !default;
-  $material-accordion-item-opened-margin: 16px !default;
   $material-button-height: 36px !default;
   $material-button-icon-size: 18px !default;
   $material-button-icon-margin: 8px !default;
@@ -55,7 +52,6 @@ $material-button-icon-margin: null !default;
   $material-base-inline-horizontal-padding: 8px !default;
   $material-base-border-radius: 2px !default;
   $material-base-dropdown-widgets-shadow: 0 2px 4px $base-dropdown-shadow-color !default;
-  $material-accordion-item-opened-margin: 8px !default;
   $material-button-height: 28px !default;
   $material-button-icon-size: 16px !default;
   $material-button-icon-margin: 4px !default;
@@ -67,7 +63,6 @@ $base-border-radius: $material-base-border-radius !default;
 
 $material-base-standard-texteditor-input-horizontal-padding: 0 !default;
 $never-used: collector((
-"$material-accordion-item-opened-margin": $material-accordion-item-opened-margin,
 "$material-button-height": $material-button-height,
 "$material-button-icon-size": $material-button-icon-size,
 "$material-button-icon-margin": $material-button-icon-margin,

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

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

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

@@ -42,6 +42,10 @@
   fill: $base-bg !important;
 }
 
+.dx-theme-typography-background-color {
+  background-color: $typography-bg !important;
+}
+
 .dx-theme-border-color-as-background-color {
   background-color: $base-border-color !important;
   fill: $base-border-color !important;

package/data/scss/widgets/material/filterBuilder/_colors.scss

@@ -34,7 +34,7 @@ $filterbuilder-item-operator-focus-color: color.adjust($filterbuilder-item-opera
 $filterbuilder-item-value-color: color.change($base-border-color, $alpha: 0.5) !default;
 $filterbuilder-item-value-hover-color: $filterbuilder-item-value-color !default;
 $filterbuilder-item-value-focus-color: color.adjust($filterbuilder-item-value-color, $alpha: 0.7) !default;
-$filterbuilder-menu-icon-color: lighten($base-icon-color, 33.7%) !default;
+$filterbuilder-menu-icon-color: $base-text-color !default;
 $never-used: collector((
 "$filterbuilder-text-color": $filterbuilder-text-color,
 "$filterbuilder-text-focus-color": $filterbuilder-text-focus-color,

package/data/scss/widgets/material/filterBuilder/_index.scss

@@ -83,14 +83,6 @@
   }
 
   .dx-treeview-node {
-    > .dx-treeview-item {
-      padding-left: $material-filterbuilder-treeview-item-left-padding * 2;
-    }
-
-    &.dx-treeview-node-is-leaf > .dx-treeview-item {
-      padding-left: $material-filterbuilder-treeview-item-left-padding;
-    }
-
     .dx-treeview-node-container-opened {
       margin-left: $material-filterbuilder-treeview-item-left-padding;
     }
@@ -106,7 +98,6 @@
   }
 
   .dx-treeview-toggle-item-visibility {
-    height: $material-filterbuilder-treeview-item-min-heigth;
     left: $material-filterbuilder-treeview-toggle-left;
   }
 

package/data/scss/widgets/material/filterBuilder/_sizes.scss

@@ -12,8 +12,8 @@ $material-filterbuilder-treeview-item-min-heigth: null !default;
 @if $size == "default" {
   $material-filterbuilder-icon-padding: 8px !default;
   $material-filterbuilder-filled-editor-padding: 13px 12px !default;
-  $material-filterbuilder-treeview-item-left-padding: 24px !default;
-  $material-filterbuilder-treeview-item-padding: 8px $material-filterbuilder-treeview-item-left-padding 10px !default;
+  $material-filterbuilder-treeview-item-left-padding: 8px !default;
+  $material-filterbuilder-treeview-item-padding: 8px 24px 8px $material-filterbuilder-treeview-item-left-padding !default;
   $material-filterbuilder-treeview-toggle-left: 16px !default;
   $material-filterbuilder-treeview-item-min-heigth: 36px !default;
 }
@@ -21,8 +21,8 @@ $material-filterbuilder-treeview-item-min-heigth: null !default;
 @else if $size == "compact" {
   $material-filterbuilder-icon-padding: 4px !default;
   $material-filterbuilder-filled-editor-padding: 8px 8px !default;
-  $material-filterbuilder-treeview-item-left-padding: 8px !default;
-  $material-filterbuilder-treeview-item-padding: 4px $material-filterbuilder-treeview-item-left-padding 5px !default;
+  $material-filterbuilder-treeview-item-left-padding: 4px !default;
+  $material-filterbuilder-treeview-item-padding: 4px 12px 4px $material-filterbuilder-treeview-item-left-padding !default;
   $material-filterbuilder-treeview-toggle-left: 0 !default;
   $material-filterbuilder-treeview-item-min-heigth: 26px !default;
 }

package/data/scss/widgets/material/form/_index.scss

@@ -29,7 +29,7 @@
   > .dx-scrollable-wrapper {
     > .dx-scrollable-container {
       margin-left: -10px;
-      padding-left: 10px;
+      padding-left: $material-form-default-padding;
     }
   }
 }
@@ -48,10 +48,9 @@
       padding-inline-start: 20px;
     }
 
-    padding-bottom: 10px;
+    padding-bottom: $material-form-default-padding;
     font-size: $material-form-label-font-size;
 
-
     .dx-field-item {
       &.dx-last-row {
         padding-bottom: 0;
@@ -63,7 +62,15 @@
 .dx-form > .dx-layout-manager.dx-layout-manager-one-col {
   .dx-field-item {
     .dx-field-item.dx-last-row:not(.dx-last-col) {
-      padding-bottom: 10px;
+      padding-bottom: $material-form-default-padding;
+    }
+
+    .dx-form-group .dx-single-column-item-content > .dx-first-row.dx-col-0.dx-field-item {
+      padding-top: 0;
+    }
+
+    .dx-box-item:not(:first-child) .dx-single-column-item-content > .dx-field-item {
+      padding-top: $material-form-default-padding;
     }
   }
 }
@@ -77,13 +84,6 @@
     vertical-align: middle;
   }
 
-  &.dx-label-v-align {
-    .dx-invalid-message > .dx-overlay-wrapper,
-    .dx-invalid-message > .dx-overlay-content {
-      transform: translate(0, 0) !important; // stylelint-disable-line declaration-no-important
-    }
-  }
-
   .dx-toggle-controls-paddings {
     padding-inline-start: $material-filled-texteditor-input-horizontal-padding;
   }

package/data/scss/widgets/material/form/_sizes.scss

@@ -11,6 +11,7 @@ $material-form-default-top-padding: null !default;
 
 $material-form-label-font-size: null !default;
 $material-form-label-icon-size: 14px !default;
+$material-form-default-padding: 10px !default;
 
 @if $size == "default" {
   $material-form-label-font-size: 14px !default;

package/data/scss/widgets/material/gallery/_index.scss

@@ -103,16 +103,9 @@
   margin: 5px - math.div($material-gallery-indicator-selected-size, 2) 6px;
 }
 
-
 .dx-state-focused.dx-gallery {
-  border-width: 1px;
-  border-style: solid;
   border-color: $base-accent;
 
-  &.dx-gallery-indicator-visible {
-    border-width: 0;
-  }
-
   .dx-gallery-indicator-item-selected {
     background: $gallery-indicator-focused-bg;
   }

package/data/scss/widgets/material/gridBase/_colors.scss

@@ -46,7 +46,7 @@ $datagrid-selection-bg: null !default;
 $datagrid-row-selected-border-color: $datagrid-border-color !default;
 $datagrid-row-selected-color: $datagrid-base-color !default;
 $datagrid-row-focused-color: $base-text-color !default;
-$datagrid-row-focused-bg: color.change($base-accent, $alpha: 0.2) !default;
+$datagrid-row-focused-bg: mix($base-accent, $base-bg, 20%) !default;
 $datagrid-hover-bg: $base-hover-bg !default;
 $datagrid-row-hovered-color: $base-hover-color !default;
 $datagrid-menu-icon-color: lighten($base-icon-color, 33.7%) !default;

package/data/scss/widgets/material/gridBase/_index.scss

@@ -959,7 +959,7 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
 
     .dx-row-focused {
       &.dx-data-row {
-        & > td:not(.dx-focused):not(.dx-cell-modified),
+        & > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-#{$widget-name}-invalid),
         & .dx-command-edit .dx-link {
           background-color: $datagrid-row-focused-bg;
           color: $datagrid-row-focused-color;
@@ -985,8 +985,8 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
       }
 
       &.dx-data-row.dx-edit-row {
-        & > td.dx-editor-cell:not(.dx-command-select),
-        & > tr > td.dx-editor-cell:not(.dx-command-select) {
+        & > td.dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-invalid),
+        & > tr > td.dx-editor-cell:not(.dx-command-select):not(.dx-#{$widget-name}-invalid) {
           background-color: $datagrid-base-background-color;
           color: $datagrid-base-color;
         }

package/data/scss/widgets/material/list/_index.scss

@@ -209,18 +209,22 @@ $material-list-searchbox-padding-top: $material-list-searchbox-vertical-padding
     background: $list-group-header-bg;
     color: $list-expanded-group-color;
     border-top: $material-list-item-border;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     border-top-color: transparent;
     font-size: $material-list-main-font-size;
 
     .dx-list-group-header-indicator {
       color: $list-header-indicator-color;
+      order: 1;
+      position: absolute;
+      inset-inline-end: $material-list-item-horizontal-padding;
 
       .dx-list-collapsible-groups & {
         @include dx-icon(chevronup);
 
         font-size: $material-base-icon-size;
-        float: right;
-        margin-top: -2px;
       }
     }
 

package/data/scss/widgets/material/lookup/_colors.scss

@@ -1,7 +1,9 @@
 @use "sass:color";
 @use "../sizes" as *;
 @use "../colors" as *;
+@use "../dropDownEditor/colors" as *;
 
 // adduse
 
-$lookup-icon-color: $base-icon-color !default;
+$lookup-icon-color: $dropdowneditor-icon-color !default;
+$lookup-icon-color-active: $dropdowneditor-icon-active-color !default;

package/data/scss/widgets/material/lookup/_index.scss

@@ -111,13 +111,10 @@
   "\f001",
   $material-base-icon-size,
   $lookup-icon-color,
+  $lookup-icon-color-active,
   $material-base-icon-size,
 );
 
-.dx-state-readonly .dx-lookup-field::before {
-  opacity: 0.5;
-}
-
 .dx-lookup-popup-wrapper {
   .dx-list-item {
     border-top: none;

package/data/scss/widgets/material/menuBase/_index.scss

@@ -21,6 +21,10 @@ $material-menu-arrow-image-size: 7px;
     color: $typography-link-color;
   }
 
+  &.dx-state-disabled {
+    opacity: 0.5;
+  }
+
   &.dx-state-hover {
     background-color: $menu-item-hover-bg;
   }
@@ -67,22 +71,4 @@ $material-menu-arrow-image-size: 7px;
       }
     }
   }
-
-  &.dx-rtl {
-    .dx-menu-item-content {
-      .dx-icon {
-        margin-left: auto;
-        margin-right: auto;
-      }
-
-      .dx-menu-item-popout-container {
-        margin-left: 0;
-        margin-right: auto;
-
-        .dx-menu-item-popout {
-          @include flip-horizontally();
-        }
-      }
-    }
-  }
 }

package/data/scss/widgets/material/scheduler/_index.scss

@@ -125,6 +125,18 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
   }
 }
 
+.dx-scheduler-appointment-recurrence {
+  .dx-scheduler-appointment-content {
+    padding: baseScheduler.$scheduler-appointment-recurrence-content-padding;
+  }
+}
+
+.dx-rtl .dx-scheduler-appointment-recurrence {
+  .dx-scheduler-appointment-content {
+    padding: baseScheduler.$scheduler-appointment-recurrence-content-padding-rtl;
+  }
+}
+
 .dx-scheduler-appointment-content { // stylelint-disable-line no-duplicate-selectors
   padding: $material-scheduler-appointment-content-padding;
 }

package/data/scss/widgets/material/slider/_colors.scss

@@ -13,7 +13,6 @@ $material-slider-bg: $base-accent !default;
 $material-slider-active: color.change($base-accent, $alpha: 0.24) !default;
 $material-slider-disabled-bg: color.change($base-text-color, $alpha: 0.24) !default;
 $material-slider-bar-disabled-bg: color.change($base-text-color, $alpha: 0.24) !default;
-$material-slider-tooltip-bg: $base-accent !default;
 $material-slider-tooltip-color: $base-inverted-text-color !default;
 $never-used: collector((
 "$material-slider-bar-bg": $material-slider-bar-bg,

package/data/scss/widgets/material/slider/_index.scss

@@ -75,11 +75,13 @@ $material-slider-tooltip-width-without-paddings: $material-slider-tooltip-width
     }
 
     .dx-overlay-content {
-      border: none;
+      border: 1px solid transparent;
       opacity: 0.6;
 
       .dx-popup-content {
         line-height: normal;
+        color: $material-slider-tooltip-color;
+        padding: $material-slider-tooltip-popup-content-padding;
 
         .dx-slider-tooltip-position-top & {
           padding-top: 6px;

package/data/scss/widgets/material/slider/_sizes.scss

@@ -6,6 +6,7 @@ $material-slider-handle-size: null !default;
 $material-slider-wrapper-height: null !default;
 $material-slider-tooltip-width: null !default;
 $material-slider-top-tooltip-margin: null !default;
+$material-slider-tooltip-popup-content-padding: null !default;
 
 $material-slider-track-height: 2px !default;
 $material-slider-height: 28px !default;
@@ -15,6 +16,7 @@ $material-slider-height: 28px !default;
   $material-slider-wrapper-height: 32px !default;
   $material-slider-tooltip-width: 34px !default;
   $material-slider-top-tooltip-margin: -5px !default;
+  $material-slider-tooltip-popup-content-padding: 5px 7px !default;
 }
 
 @else if $size == "compact" {
@@ -22,4 +24,5 @@ $material-slider-height: 28px !default;
   $material-slider-wrapper-height: 26px !default;
   $material-slider-tooltip-width: 28px !default;
   $material-slider-top-tooltip-margin: -2px !default;
+  $material-slider-tooltip-popup-content-padding: 3px 5px !default;
 }