devextreme-themebuilder 23.2.6 → 24.1.2-beta

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

@@ -6,11 +6,11 @@
 @use "../sizes" as *;
 @use "../../base/icons" as *;
 @use "../../base/checkBox";
+@use "../../base/checkBox/mixins" as *;
 
 // adduse
 
 $material-checkbox-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
-$icon-position: relative;
 
 .dx-checkbox {
   .dx-checkbox-container {
@@ -61,9 +61,12 @@ $icon-position: relative;
 }
 
 .dx-checkbox-icon {
-  width: $material-checkbox-size;
-  height: $material-checkbox-size;
-  border: 2px solid $checkbox-border-color;
+  width: $material-checkbox-arrow-icon-size;
+  height: $material-checkbox-arrow-icon-size;
+  font-size: $material-checkbox-icon-font-size;
+  border-width: $material-checkbox-border-width;
+  border-style: solid;
+  border-color: $checkbox-border-color;
   border-radius: $material-checkbox-border-radius;
 
   &::after {
@@ -92,26 +95,31 @@ $icon-position: relative;
     border: none;
 
     @include dx-icon(check);
-    @include dx-icon-font-centered-sizing($material-checkbox-arrow-icon-size, $icon-position);
 
-    font-size: $material-checkbox-arrow-font-size;
+    font-size: $material-checkbox-icon-font-size;
+
+    @include dx-checkbox-icon-centered($material-checkbox-arrow-icon-size, $material-checkbox-arrow-icon-size, $material-checkbox-arrow-font-size);
   }
 
   .dx-checkbox-indeterminate & {
     background-color: $checkbox-indeterminate-bg;
-    color: $checkbox-checked-color;
     border: none;
-
-    @include dx-font-icon("\f074");
-    @include dx-icon-font-centered-sizing($material-checkbox-indeterminate-icon-size, $icon-position);
-
-    font-size: $material-checkbox-indeterminate-font-size;
   }
 }
 
+@include dx-checkbox-icon-indeterminate(
+  $checkbox-indeterminate-bg,
+  $checkbox-checked-color,
+  $material-checkbox-indeterminate-icon-height,
+  $material-checkbox-indeterminate-icon-width,
+  $material-checkbox-indeterminate-icon-border-radius,
+);
+
 .dx-invalid {
   .dx-checkbox-icon {
-    border: 2px solid $checkbox-invalid-focused-border-color;
+    border-width: $material-checkbox-border-width;
+    border-style: solid;
+    border-color: $checkbox-invalid-focused-border-color;
   }
 
   &.dx-state-focused {

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

@@ -3,30 +3,37 @@
 
 // adduse
 
+$material-checkbox-icon-font-size: null !default;
 $material-checkbox-ripple-size: null !default;
-$material-checkbox-arrow-icon-size: null !default;
-$material-checkbox-arrow-font-size: null !default;
-$material-checkbox-indeterminate-icon-size: null !default;
-$material-checkbox-indeterminate-font-size: null !default;
+
+$material-checkbox-border-width: 2px !default;
 $material-checkbox-border-radius: null !default;
-$material-checkbox-size: null !default;
+
+$material-checkbox-arrow-icon-size: 1em !default;
+$material-checkbox-arrow-font-size: null !default;
+$material-checkbox-indeterminate-icon-border-radius: 0 !default;
+
+$material-checkbox-indeterminate-icon-height: null !default;
+$material-checkbox-indeterminate-icon-width: null !default;
 
 @if $size == "default" {
-  $material-checkbox-ripple-size: 2.5em !default;
-  $material-checkbox-arrow-icon-size: 1em !default;
-  $material-checkbox-arrow-font-size: 16px !default;
-  $material-checkbox-indeterminate-icon-size: 1em !default;
-  $material-checkbox-indeterminate-font-size: 20px !default;
-  $material-checkbox-border-radius: $checkbox-icon-border-radius !default;
-  $material-checkbox-size: 18px !default;
+  $material-checkbox-icon-font-size: 18px !default;
+  $material-checkbox-ripple-size: 2.222223em !default;
+
+  $material-checkbox-border-radius: $base-border-radius - 2px !default;
+
+  $material-checkbox-arrow-font-size: 0.888889em !default;
+  $material-checkbox-indeterminate-icon-height: 0.111112em !default;
+  $material-checkbox-indeterminate-icon-width: 0.666667em !default;
 }
 
 @else if $size == "compact" {
-  $material-checkbox-ripple-size: 2.14em !default;
-  $material-checkbox-arrow-icon-size: 1em !default;
-  $material-checkbox-arrow-font-size: 14px !default;
-  $material-checkbox-indeterminate-icon-size: 1em !default;
-  $material-checkbox-indeterminate-font-size: 18px !default;
-  $material-checkbox-border-radius: 2px !default;
-  $material-checkbox-size: 16px !default;
+  $material-checkbox-icon-font-size: 16px !default;
+  $material-checkbox-ripple-size: 2em !default;
+
+  $material-checkbox-border-radius: $base-border-radius !default;
+
+  $material-checkbox-arrow-font-size: 0.875em !default;
+  $material-checkbox-indeterminate-icon-height: 0.125em !default;
+  $material-checkbox-indeterminate-icon-width: 0.625em !default;
 }

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

@@ -79,7 +79,7 @@
       }
     }
 
-    @include dx-field-value-widget-position(dx-checkbox, $material-checkbox-size);
+    @include dx-field-value-widget-position(dx-checkbox, $material-checkbox-icon-font-size);
     @include dx-field-value-widget-position(dx-switch, $material-switch-height);
     @include dx-field-value-widget-position(dx-slider, $material-slider-height);
     @include dx-field-value-widget-position(dx-radiogroup, $material-radiogroup-min-height);

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

@@ -16,7 +16,6 @@ $filemanager-file-item-select-bg: color.change($base-accent, $alpha: 0.8) !defau
 $filemanager-file-item-select-focus-color: $base-bg !default;
 $filemanager-file-item-select-focus-bg: color.change($base-accent, $alpha: 0.7) !default;
 $filemanager-file-item-hover-bg: $base-hover-bg !default;
-$filemanager-file-item-focused-bg: $base-accent !default;
 $filemanager-file-item-focused-border: $base-accent !default;
 $filemanager-item-focused-color: $base-inverted-text-color !default;
 $filemanager-dirs-tree-item-focus-bg: null !default;

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

@@ -7,7 +7,7 @@
 @use "../../base/fileManager/mixins" as *;
 
 // adduse
-@use "../splitter";
+@use "../splitterBar";
 
 
 .dx-filemanager {

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

@@ -137,3 +137,12 @@
     @include dx-icon-margin(math.div($material-base-icon-size, 3));
   }
 }
+
+.dx-form-group-custom-caption {
+  font-size: $material-form-group-caption-font-size;
+
+  .dx-icon {
+    @include dx-icon-sizing($material-base-icon-size);
+    @include dx-icon-margin(math.div($material-base-icon-size, 3));
+  }
+}

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

@@ -9,7 +9,7 @@
 @use "../form/sizes" as *;
 
 // adduse
-@use "../splitter";
+@use "../splitterBar";
 
 
 $gantt-successor-background-color: white;

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

@@ -32,7 +32,6 @@ $material-grid-base-border-color: $datagrid-border-color;
 $material-grid-base-drag-header-first-shadow: 0 0 1px $datagrid-drag-header-shadow-color;
 $material-grid-base-drag-header-second-shadow: 0 1px 3px $datagrid-drag-header-second-shadow-color;
 $material-grid-base-header-cell-vertical-padding: round(math.div($material-grid-base-header-height - $material-grid-base-header-line-height, 2));
-$material-grid-base-footer-font-size: $material-grid-base-header-cell-font-size;
 
 $material-grid-base-command-select-column-width: $material-grid-base-checkbox-size + 2 * $material-grid-base-cell-horizontal-padding;
 
@@ -270,6 +269,11 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
           width: $material-grid-base-command-edit-column-width;
           min-width: $material-grid-base-command-edit-column-width;
 
+          .dx-link:not(.dx-link-icon) {
+            margin: 0 $material-command-edit-text-margin;
+            min-width: 20px;
+          }
+
           &.dx-command-edit-with-icons {
             width: $material-grid-base-command-edit-column-with-icons-width;
             min-width: $material-grid-base-command-edit-column-with-icons-width;
@@ -1102,7 +1106,6 @@ $material-grid-base-group-panel-message-line-height: $material-button-text-line-
         $button-danger-bg,
         $button-danger-bg,
         $button-danger-bg,
-        $button-disabled-background,
         $button-danger-color
       );
 

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

@@ -27,7 +27,8 @@ $material-grid-base-treeview-select-all-item-offset: null !default;
 $material-grid-base-header-line-height: 16px !default;
 $material-grid-base-header-icon-size: 15px !default;
 $material-grid-base-column-chooser-item-margin: 8px !default;
-$material-command-edit-icon-margin: 2px !default;
+$material-command-edit-icon-margin: 4px !default;
+$material-command-edit-text-margin: 2px !default;
 
 @if $size == "default" {
   $material-grid-base-cell-height: 48px !default;

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

@@ -10,10 +10,6 @@ $htmleditor-border-color: $base-border-color !default;
 $htmleditor-invalid-border-color: $base-invalid-color !default;
 $htmleditor-invalid-faded-border-color: $base-invalid-faded-border-color !default;
 $htmleditor-toolbar-border-color: $base-border-color !default;
-$htmleditor-normal-format-active-bg: darken($button-normal-bg, 10%) !default;
-$htmleditor-default-format-active-bg: darken($button-default-bg, 10%) !default;
-$htmleditor-danger-format-active-bg: darken($button-danger-bg, 10%) !default;
-$htmleditor-success-format-active-bg: darken($button-success-bg, 10%) !default;
 $htmleditor-variable-bg: color.change($base-accent, $alpha: 0.15) !default;
 $htmleditor-resize-frame-border-color: $base-accent !default;
 $htmleditor-resize-handle-bg: $base-accent !default;

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

@@ -4,7 +4,6 @@
 // adduse
 
 $material-toolbar-size-editor-width: null !default;
-$material-html-editor-horizontal-padding: 15px !default;
 $material-htmleditor-toolbar-padding: null !default;
 $material-html-editor-add-image-dialog-fileuploader-padding: null !default;
 

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

@@ -39,3 +39,8 @@ $material-list-select-all-margin-top: -1px !default;
   $material-list-select-all-label-line-height: 15px !default;
   $material-list-main-font-size: 13px !default;
 }
+
+:root { 
+  --dx-list-item-padding-inline: #{$material-list-item-horizontal-padding};
+  --dx-list-item-padding-block: #{$material-list-item-vertical-padding};
+} 

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

@@ -15,6 +15,7 @@ $menu-item-selected-bg: null !default;
 $menu-popup-border-color: $base-border-color !default;
 $menu-separator-bg: $base-border-color !default;
 $menu-item-selected-color: $base-text-color !default;
+$menu-item-link-color: $base-link-color !default;
 $menu-item-focused-selected-bg: color.change($base-focus-bg, $alpha: 0.7) !default;
 $menu-container-shadow-color: null !default;
 

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

@@ -18,7 +18,7 @@ $material-menu-arrow-image-size: 7px;
   color: $menu-color;
 
   a {
-    color: $typography-link-color;
+    color: $menu-item-link-color;
   }
 
   &.dx-state-disabled {

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

@@ -9,10 +9,6 @@ $material-pager-page-line-height: 12px !default;
 $material-pager-page-font-size: 12px !default;
 $material-pager-navbutton-paddings: $material-pager-page-padding !default;
 $material-pager-navbutton-height: 12px !default;
-$material-pager-pagesize-padding-top: 7px !default;
-$material-pager-pagesize-padding-bottom: 8px !default;
-$material-pager-pagesize-padding-left: 10px !default;
-$material-pager-pagesize-padding-right: 9px !default;
 $material-pager-light-pagesizes-min-width: null !default;
 $material-pager-light-pageindex-min-width: null !default;
 

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

@@ -35,3 +35,7 @@ $material-popup-focused-content-shadow: 0 8px 40px 6px color.change($base-shadow
   $material-popup-bottom-toolbar-height: 44px !default;
   $material-popup-toolbar-height: 42px !default;
 }
+
+:root {
+  --dx-popup-toolbar-item-padding-inline: #{$material-popup-toolbar-item-spacing};
+}

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

@@ -48,6 +48,9 @@
 @use "../recurrenceEditor" as *;
 @use "../scrollable";
 
+$scheduler-appointment-recurrence-content-padding: 5px 25px 5px 7px;
+$scheduler-appointment-recurrence-content-padding-rtl: 5px 7px 5px 25px;
+
 $material-scheduler-all-day-table-cell-height: $material-scheduler-workspace-date-table-cell-height * 1.5;
 $material-scheduler-collapsed-all-day-table-cell-height: $material-scheduler-workspace-date-table-cell-height * 0.5;
 
@@ -127,13 +130,13 @@ $material-scheduler-agenda-time-panel-cell-padding: 8px;
 
 .dx-scheduler-appointment-recurrence {
   .dx-scheduler-appointment-content {
-    padding: baseScheduler.$scheduler-appointment-recurrence-content-padding;
+    padding: $scheduler-appointment-recurrence-content-padding;
   }
 }
 
 .dx-rtl .dx-scheduler-appointment-recurrence {
   .dx-scheduler-appointment-content {
-    padding: baseScheduler.$scheduler-appointment-recurrence-content-padding-rtl;
+    padding: $scheduler-appointment-recurrence-content-padding-rtl;
   }
 }
 

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

@@ -24,8 +24,6 @@ $material-scheduler-appointment-tooltip-remove-padding-top: null !default;
 
 $scheduler-left-column-width: 65px !default;
 $material-scheduler-timeline-date-table-cell-height: 50px !default;
-$material-scheduler-navigator-border-radius: $button-border-radius !default;
-$material-scheduler-navigation-buttons-padding: 6px !default;
 $material-scheduler-navigator-icon-font-size: $material-base-icon-size;
 $material-scheduler-appointment-month-text-size: 12px !default;
 $material-scheduler-workspace-info-text-size: 16px !default;
@@ -37,7 +35,6 @@ $material-scheduler-group-header-font-size: 14px !default;
 $material-scheduler-group-header-table-cell-width: 100px !default;
 $material-scheduler-appointment-transparent-left-border: 1px solid transparent !default;
 $material-scheduler-appointment-transparent-right-border: 1px solid transparent !default;
-$material-scheduler-appointment-tooltip-width: 300px !default;
 $material-scheduler-workspace-month-header-height: 22px !default;
 $material-scheduler-workspace-month-timeline--time-height: 34px !default;
 

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

@@ -16,9 +16,6 @@ $material-slider-handle-inner-size: 12px;
 $material-slider-handle-inner-border-width: 1px;
 $material-slider-handle-inner-disabled-size: 2px;
 
-$material-slider-tooltip-popup-content-horizontal-padding: 3px;
-$material-slider-tooltip-width-without-paddings: $material-slider-tooltip-width - 2 * $material-slider-tooltip-popup-content-horizontal-padding;
-
 .dx-slider-wrapper {
   height: $material-slider-wrapper-height;
 }

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

@@ -1,8 +1,40 @@
+$splitter-resize-handle-color: getCustomVar(("$splitter-resize-handle-color")) !default;
+$splitter-resize-handle-bg: getCustomVar(("$splitter-resize-handle-bg")) !default;
+$splitter-resize-handle-bg-hover: getCustomVar(("$splitter-resize-handle-bg-hover")) !default;
+$splitter-resize-handle-bg-focused: getCustomVar(("$splitter-resize-handle-bg-focused")) !default;
+$splitter-resize-handle-color-hover: getCustomVar(("$splitter-resize-handle-color-hover")) !default;
+$splitter-resize-handle-color-focused: getCustomVar(("$splitter-resize-handle-color-focused")) !default;
+
 @use "sass:color";
 @use "../sizes" as *;
 @use "../colors" as *;
 
 // adduse
+$splitter-resize-handle-color: null !default;
+$splitter-resize-handle-bg: null !default;
+$splitter-resize-handle-bg-hover: null !default;
+$splitter-resize-handle-bg-focused: $base-accent !default;
+
+@if $mode == 'light' {
+  $splitter-resize-handle-color: $base-text-color !default;
+
+  $splitter-resize-handle-bg: $base-hover-bg !default;
+  $splitter-resize-handle-bg-hover: color.change($base-inverted-bg, $alpha: 0.12) !default;
+}
+
+@if $mode == 'dark' {
+  $splitter-resize-handle-color: color.change($base-text-color, $alpha: 0.87) !default;
 
-$splitter-inactive-color: $base-border-color !default;
-$splitter-bg: color.change($base-accent, $alpha: 0.5) !default;
+  $splitter-resize-handle-bg: color.change($base-text-color, $alpha: 0.04) !default;
+  $splitter-resize-handle-bg-hover: color.change($base-text-color, $alpha: 0.12) !default;
+}
+$splitter-resize-handle-color-hover: $splitter-resize-handle-color !default;
+$splitter-resize-handle-color-focused: $base-inverted-text-color !default;
+$never-used: collector((
+"$splitter-resize-handle-color": $splitter-resize-handle-color,
+"$splitter-resize-handle-bg": $splitter-resize-handle-bg,
+"$splitter-resize-handle-bg-hover": $splitter-resize-handle-bg-hover,
+"$splitter-resize-handle-bg-focused": $splitter-resize-handle-bg-focused,
+"$splitter-resize-handle-color-hover": $splitter-resize-handle-color-hover,
+"$splitter-resize-handle-color-focused": $splitter-resize-handle-color-focused,
+));

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

@@ -3,17 +3,25 @@
 @use "../colors" as *;
 @use "sizes" as *;
 @use "../sizes" as *;
+@use "../../base/icons" as *;
 @use "../../base/splitter";
+@use "../../base/splitter/mixins" as *;
 
 // adduse
-.dx-splitter {
-  background-color: $splitter-bg;
 
-  &.dx-splitter-inactive {
-    background-color: $splitter-inactive-color;
-  }
+.dx-splitter {
+  @include resize-handle-states(
+    $splitter-resize-handle-color,
+    $splitter-resize-handle-bg,
+    $splitter-resize-handle-color-hover,
+    $splitter-resize-handle-bg-hover,
+    $splitter-resize-handle-color-focused,
+    $splitter-resize-handle-bg-focused,
+  );
 }
 
-.dx-splitter-border {
-  background-color: transparent;
+.dx-resize-handle {
+  .dx-icon {
+    @include dx-icon-sizing($splitter-resize-handle-icon-size);
+  }
 }

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

@@ -2,3 +2,4 @@
 
 // adduse
 
+$splitter-resize-handle-icon-size: 24px;

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

@@ -0,0 +1,8 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse
+
+$splitter-inactive-color: $base-border-color !default;
+$splitter-bg: color.change($base-accent, $alpha: 0.5) !default;

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

@@ -0,0 +1,19 @@
+@use "sass:color";
+@use "colors" as *;
+@use "../colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/splitterBar";
+
+// adduse
+.dx-splitter-bar {
+  background-color: $splitter-bg;
+
+  &.dx-splitter-inactive {
+    background-color: $splitter-inactive-color;
+  }
+}
+
+.dx-splitter-border {
+  background-color: transparent;
+}

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

@@ -0,0 +1,4 @@
+@use "../sizes" as *;
+
+// adduse
+

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

@@ -13,7 +13,6 @@ $switch-handle-off-bg: null !default;
 $switch-on-bg: color.change($base-accent, $alpha: 0.5) !default;
 $switch-handle-on-bg: $base-accent !default;
 $switch-handle-border-radius: 50% !default;
-$switch-hover-bg: transparent !default;
 $switch-handle-disabled-bg: null !default;
 $switch-invalid-handle-bg: $base-invalid-color !default;
 $switch-invalid-container-bg: color.change($base-invalid-color, $alpha: 0.5) !default;

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

@@ -11,14 +11,11 @@ $material-tagbox-tag-container-padding-left: null !default;
 $material-tagbox-tag-container-vertical-padding: null !default;
 $material-tagbox-tag-height: null !default;
 
-
-// $material-tagbox-remove-button-right: 4px !default;
 $material-tagbox-remove-button-width: null !default;
 $material-tagbox-remove-button-icon-size: null !default;
 $material-tagbox-select-all-padding-bottom: 12px !default;
 $material-tagbox-select-all-margin-bottom: 3px !default;
 $tagbox-tag-border-radius: 2em !default;
-$material-tagbox-outlined-with-label-top-padding: null !default;
 $material-tagbox-filled-with-label-top-padding: null !default;
 $material-tagbox-filled-with-label-bottom-padding: null !default;
 

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

@@ -42,6 +42,11 @@ $texteditor-label-transition:
   $texteditor-button-clear-icon-color-bg: darken($texteditor-color, 34%) !default;
 }
 
+:root {
+  --dx-texteditor-color-text: #{$texteditor-color}; 
+  --dx-texteditor-color-label: #{$texteditor-label-color};
+}
+
 $never-used: collector((
 "$texteditor-color": $texteditor-color,
 "$texteditor-placeholder-color": $texteditor-placeholder-color,

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

@@ -401,7 +401,7 @@ $material-editor-custom-button-margin: 5px;
   $material-filled-texteditor-input-with-label-bottom-padding,
   $material-texteditor-label-outside-font-size,
   $material-texteditor-label-outside-height,
-); 
+);
 @include dx-editor-underlined(
   $texteditor-label-transition,
   $material-texteditor-label-font-size,
@@ -438,8 +438,7 @@ $material-editor-custom-button-margin: 5px;
   $material-underlined-editor-button-height,
   $material-editor-custom-button-margin,
   $material-editor-custom-button-margin * 2,
-  $material-filled-texteditor-input-button-horizontal-padding,
-  $material-filled-texteditor-spin-button-horizontal-padding, 
+  $material-filled-texteditor-spin-button-horizontal-padding,
   $material-filled-texteditor-spin-button-horizontal-padding,
   $material-button-vertical-padding,
 );

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

@@ -23,3 +23,7 @@ $material-toolbar-section-padding: 15px !default;
   $material-toolbar-height: 38px !default;
   $material-toolbar-menu-vertical-padding: 5px !default;
 }
+
+:root {
+  --dx-toolbar-height: #{$material-toolbar-height};
+}

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

@@ -7,4 +7,3 @@
 
 $treelist-chevron-icon-color: lighten($base-spin-icon-color, 38.5%) !default;
 $treelist-selection-chevron-icon-color: $treelist-chevron-icon-color !default;
-$treelist-row-alternation-bg: $datagrid-row-alternation-bg !default;

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

@@ -44,3 +44,17 @@ $material-h6-font-size: null !default;
   $material-h6-font-size: 14px !default;
 }
 
+:root {
+  --dx-font-size-heading-1: #{$material-h1-font-size}; 
+  --dx-font-size-heading-2: #{$material-h2-font-size}; 
+  --dx-font-size-heading-3: #{$material-h3-font-size}; 
+  --dx-font-size-heading-4: #{$material-h4-font-size}; 
+  --dx-font-size-heading-5: #{$material-h5-font-size}; 
+  --dx-font-size-heading-6: #{$material-h6-font-size};
+  --dx-font-size-xl: #{$material-xl-font-size}; 
+  --dx-font-size-lg: #{$material-l-font-size}; 
+  --dx-font-size-md: #{$material-m-font-size}; 
+  --dx-font-size-sm: #{$material-s-font-size}; 
+  --dx-font-size-xs: #{$material-xs-font-size}; 
+}
+

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

@@ -10,11 +10,10 @@
 @use "../overlay";
 @include dx-base-validation($validation-summary-color, $validation-message-color, $validation-message-background-color, $material-validation-overlay-border-radius);
 @include dx-modern-styles-validation(
-  $material-validation-message-font-size, 
+  $material-validation-message-font-size,
   $material-validation-message-line-height,
   $material-filled-texteditor-input-horizontal-padding,
-  $material-validation-message-padding,
   $material-validationsummary-item-margin,
-  $material-validation-message-vertical-padding, 
+  $material-validation-message-vertical-padding,
   $material-validation-message-horizontal-padding,
 );

package/modules/base-parameters.js

@@ -1,2 +1,2 @@
-"use strict";
-module.exports = ['@base-accent', '@base-text-color', '@base-bg', '@base-border-color', '@base-border-radius'];
+"use strict";
+module.exports = ['@base-accent', '@base-text-color', '@base-bg', '@base-border-color', '@base-border-radius'];