devextreme-themebuilder 23.2.2-beta → 23.2.3

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

@@ -12,7 +12,13 @@
 .dx-tabpanel {
   .dx-tabpanel-tab {
     min-width: 72px;
+    flex-basis: unset;
     flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  .dx-tabs-scrollable .dx-tab {
+    flex-basis: auto;
   }
 
   .dx-tabs-nav-button {

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

@@ -19,7 +19,6 @@
 .dx-tab {
   gap: $material-tabs-item-gap;
   padding: $material-tabs-item-padding;
-  min-width: $material-tab-min-width;
   background-color: $tabs-tab-background;
   color: $tabs-tab-color;
 
@@ -35,11 +34,6 @@
     }
   }
 
-  &.dx-state-focused {
-    background-color: $tabs-focused-tab-bg-color;
-  }
-
-
   &.dx-state-disabled {
     color: $tabs-tab-disabled-color;
 
@@ -55,9 +49,13 @@
 
   .dx-tab-text {
     column-gap: $material-base-icon-margin;
-    text-transform: uppercase;
     line-height: $material-tab-text-line-height;
     font-weight: 500;
+    text-transform: uppercase;
+
+    .dx-tab-text-span-pseudo {
+      display: none;
+    }
   }
 
   .dx-icon {
@@ -65,4 +63,14 @@
 
     @include dx-icon-sizing($material-tabs-icon-size);
   }
+
+  .dx-tabs-item-badge {
+    align-self: center;
+  }
+}
+
+.dx-tabs.dx-state-focused {
+  .dx-tab.dx-state-focused {
+    background-color: $tabs-focused-tab-bg-color;
+  }
 }

package/data/scss/widgets/material/tabs/layout/tab/styling-mode/_primary.scss

@@ -15,6 +15,11 @@
 
 
 .dx-tabs-styling-mode-primary {
+  &.dx-tabs:not(.dx-tabs-vertical) .dx-tabs-scrollable .dx-tab {
+    flex-basis: auto;
+    min-width: $material-tab-min-width;
+  }
+
   &.dx-tab-indicator-position-top {
     @include dx-tabs-indicator-primary-base(top);
   }

package/data/scss/widgets/material/tabs/layout/tab/styling-mode/_secondary.scss

@@ -15,10 +15,14 @@
 
 
 .dx-tabs-styling-mode-secondary {
+  &.dx-tabs-horizontal .dx-tabs-scrollable .dx-tab {
+    flex-basis: auto;
+  }
+
   .dx-tab {
     min-width: 0;
 
-    .dx-tab-text {
+    .dx-tab-text .dx-tab-text-span {
       text-transform: none;
     }
   }

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

@@ -9,7 +9,7 @@ $material-tabs-item-padding-vertical: null !default;
 $material-tab-height: null !default;
 $material-tab-min-width: null !default;
 
-$material-tab-text-line-height: null !default;
+$material-tab-text-line-height: 1.714286 !default;
 $material-base-icon-margin: null !default;
 
 $material-tab-nav-button-icon-width: null !default;
@@ -27,7 +27,7 @@ $material-indicator-length-secondary: 100% !default;
 
 $material-indicator-border-radius-secondary: 8px !default;
 
-$material-tabs-icon-size: null !default;
+$material-tabs-icon-size: $material-base-icon-size !default;
 
 @if $size == "default" {
   $material-tabs-item-padding-horizontal: 12px !default;
@@ -36,8 +36,6 @@ $material-tabs-icon-size: null !default;
   $material-tab-height: auto !default;
   $material-tab-min-width: 90px !default;
   $material-base-icon-margin: 8px !default;
-  $material-tabs-icon-size: 24px !default;
-  $material-tab-text-line-height: 24px !default;
   $material-tab-nav-button-icon-width: 24px !default;
   $material-tab-nav-button-icon-height: 24px !default;
   $material-tab-nav-button-icon-font-size: 24px !default;
@@ -51,9 +49,7 @@ $material-tabs-icon-size: null !default;
   $material-tabs-item-padding: $material-tabs-item-padding-horizontal $material-tabs-item-padding-vertical !default;
   $material-tab-height: auto !default;
   $material-tab-min-width: 82px !default;
-  $material-base-icon-margin: 8px !default;
-  $material-tab-text-line-height: 24px !default;
-  $material-tabs-icon-size: 24px !default;
+  $material-base-icon-margin: 7px !default;
   $material-tab-nav-button-icon-width: 24px !default;
   $material-tab-nav-button-icon-height: 24px !default;
   $material-tab-nav-button-icon-font-size: 24px !default;

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

@@ -356,7 +356,7 @@ $material-editor-custom-button-margin: 5px;
 @include dx-editor-outlined(
   $texteditor-input-border-radius,
   $material-texteditor-label-font-size,
-  1px,
+  $material-base-border-width,
   2px,
   solid,
   $material-texteditor-label-font-size + 2,

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

@@ -14,19 +14,16 @@ $treeview-item-hover-color: $base-hover-color !default;
 $treeview-border-color: $base-border-color !default;
 $treeview-item-selected-color: $treeview-color !default;
 $treeview-item-selected-bg: null !default;
-$treeview-item-selected-hover-bg: null !default;
 $treeview-spin-icon-color: $base-spin-icon-color !default;
 
 $checkbox-border-color-focused: $base-focus-bg !default;
 
 @if $mode == "light" {
   $treeview-item-selected-bg: color.change(#000, $alpha: 0.12) !default;
-  $treeview-item-selected-hover-bg: color.change(#000, $alpha: 0.14) !default;
 }
 
 @if $mode == "dark" {
   $treeview-item-selected-bg: color.change(#6e6e80, $alpha: 0.5) !default;
-  $treeview-item-selected-hover-bg: color.change(#6e6e80, $alpha: 0.4) !default;
 }
 $never-used: collector((
 "$treeview-focused-bg": $treeview-focused-bg,

package/modules/themes.js

@@ -121,5 +121,17 @@ const themes = [
     {
         themeId: 54, name: 'fluent', colorScheme: 'blue-dark-compact', text: 'Blue Dark Compact', group: 'Fluent Design (Compact)',
     },
+    {
+        themeId: 55, name: 'fluent', colorScheme: 'saas-light', text: 'SaaS Light', group: 'Fluent Design',
+    },
+    {
+        themeId: 56, name: 'fluent', colorScheme: 'saas-dark', text: 'SaaS Dark', group: 'Fluent Design',
+    },
+    {
+        themeId: 57, name: 'fluent', colorScheme: 'saas-light-compact', text: 'SaaS Light Compact', group: 'Fluent Design (Compact)',
+    },
+    {
+        themeId: 58, name: 'fluent', colorScheme: 'saas-dark-compact', text: 'SaaS Dark Compact', group: 'Fluent Design (Compact)',
+    },
 ];
 exports.default = themes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devextreme-themebuilder",
-  "version": "23.2.2-beta",
+  "version": "23.2.3",
   "description": "DevExtreme ThemeBuilder",
   "keywords": [
     "devextreme",