devextreme-themebuilder 23.2.6 → 24.1.2-beta

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

@@ -16,12 +16,14 @@ $fluent-form-layout-manager-tabpanel-content-padding: null !default;
 
 $fluent-form-label-font-size: $fluent-base-font-size !default;
 $fluent-form-label-icon-size: $fluent-base-icon-size !default;
+$fluent-form-group-custom-caption-icon-margin: null !default;
 
 @if $size == "default" {
   $fluent-form-group-caption-bottom-margin: 4px !default;
   $fluent-form-group-caption-top-padding: 16px !default;
   $fluent-form-group-content-bottom-padding: 16px !default;
   $fluent-form-group-caption-font-size: 20px !default;
+  $fluent-form-group-custom-caption-icon-margin: 6px !default;
   $fluent-form-default-top-padding: 16px !default;
   $fluent-form-top-label-bottom-margin: 4px !default;
   $fluent-form-layout-manager-horizontal-padding: 12px !default;
@@ -34,6 +36,7 @@ $fluent-form-label-icon-size: $fluent-base-icon-size !default;
   $fluent-form-group-caption-top-padding: 12px !default;
   $fluent-form-group-content-bottom-padding: 12px !default;
   $fluent-form-group-caption-font-size: 16px !default;
+  $fluent-form-group-custom-caption-icon-margin: 4px !default;
   $fluent-form-default-top-padding: 8px !default;
   $fluent-form-top-label-bottom-margin: 2px !default;
   $fluent-form-layout-manager-horizontal-padding: 8px !default;

package/data/scss/widgets/fluent/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/fluent/gridBase/_colors.scss

@@ -7,7 +7,6 @@ $datagrid-row-selected-border-color: getCustomVar(("$datagrid-row-selected-borde
 $datagrid-row-selected-color: getCustomVar(("$datagrid-row-selected-color")) !default;
 $datagrid-row-focused-color: getCustomVar(("$datagrid-row-focused-color")) !default;
 $datagrid-row-focused-bg: getCustomVar(("$datagrid-row-focused-bg")) !default;
-$datagrid-menu-icon-color: getCustomVar(("$datagrid-menu-icon-color")) !default;
 $datagrid-cell-modified-border-color: getCustomVar(("$datagrid-cell-modified-border-color")) !default;
 $datagrid-row-invalid-faded-border-color: getCustomVar(("$datagrid-row-invalid-faded-border-color")) !default;
 $datagrid-group-row-color: getCustomVar(("$datagrid-group-row-color")) !default;
@@ -32,7 +31,6 @@ $datagrid-base-color: $base-text-color !default;
 $datagrid-base-background-color: $base-bg !default;
 $datagrid-border-color: $base-border-color !default;
 $datagrid-columnchooser-item-color: null !default;
-$datagrid-columnchooser-hover-icon-color: color.change($datagrid-base-color, $alpha: 0.38) !default;
 $datagrid-block-separator-bg: null !default;
 $datagrid-columnchooser-font-weight: 600 !default;
 $datagrid-drag-header-border-color: color.change($base-accent, $alpha: 0.5) !default;
@@ -48,7 +46,6 @@ $datagrid-row-focused-color: $base-text-color !default;
 $datagrid-row-focused-bg: null !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;
 $datagrid-cell-modified-border-color: $button-success-text-hover-bg !default;
 $datagrid-cell-removed-border-color: $datagrid-border-color !default;
 $datagrid-row-removed-bg: $datagrid-hover-bg !default;
@@ -88,11 +85,11 @@ $datagrid-icon-link-disabled-opacity: $button-disabled-icon-opacity;
     $datagrid-row-focused-bg: lighten(desaturate(adjust-hue($base-accent, 3), 0.98), 50.00) !default; // #d0e5fb
     $datagrid-filter-row-background-color: darken($datagrid-base-background-color, 2%) !default;
   }
-  
+
   @if $color == "saas" {
     $datagrid-row-focused-bg: lighten(adjust-hue($base-accent, -1), 26.47) !default; // #dbe6ff
     $datagrid-filter-row-background-color: $base-typography-bg !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;
@@ -135,7 +132,6 @@ $never-used: collector((
 "$datagrid-row-selected-color": $datagrid-row-selected-color,
 "$datagrid-row-focused-color": $datagrid-row-focused-color,
 "$datagrid-row-focused-bg": $datagrid-row-focused-bg,
-"$datagrid-menu-icon-color": $datagrid-menu-icon-color,
 "$datagrid-cell-modified-border-color": $datagrid-cell-modified-border-color,
 "$datagrid-row-invalid-faded-border-color": $datagrid-row-invalid-faded-border-color,
 "$datagrid-group-row-color": $datagrid-group-row-color,

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

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

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

@@ -30,7 +30,8 @@ $fluent-grid-base-header-line-height: 18px !default;
 $fluent-grid-base-header-icon-size: null !default;
 $fluent-grid-base-header-icon-container-size: 20px !default;
 $fluent-grid-base-column-chooser-item-margin: 8px !default;
-$fluent-command-edit-icon-margin: 2px !default;
+$fluent-command-edit-icon-margin: 4px !default;
+$fluent-command-edit-text-margin: 2px !default;
 
 $fluent-command-edit-icon-size: null !default;
 $fluent-filter-panel-icon-size: null !default;

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

@@ -27,3 +27,8 @@ $fluent-list-next-button-horizontal-padding: null !default;
   $fluent-list-group-header-vertical-padding: 8px !default;
   $fluent-list-next-button-horizontal-padding: 24px !default;
 }
+
+:root {
+  --dx-list-item-padding-inline: #{$fluent-list-item-horizontal-padding}; 
+  --dx-list-item-padding-block: #{$fluent-list-item-vertical-padding}; 
+} 

package/data/scss/widgets/fluent/loadPanel/_colors.scss

@@ -6,8 +6,6 @@ $loadpanel-content-bg: getCustomVar(("$loadpanel-content-bg")) !default;
 @use "../overlay/colors" as *;
 
 // adduse
-
-$loadpanel-content-shadow-color: color.change($base-shadow-color, $alpha: 0.25) !default;
 $loadpanel-content-bg: $overlay-content-bg !default;
 $never-used: collector((
 "$loadpanel-content-bg": $loadpanel-content-bg,

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

@@ -7,5 +7,3 @@
 
 $lookup-icon-color: $dropdowneditor-icon-color !default;
 $lookup-icon-color-active: $dropdowneditor-icon-active-color !default;
-$lookup-popover-arrow-border-color: $base-text-color !default;
-$lookup-popover-arrow-bg: $base-bg !default;

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

@@ -16,6 +16,7 @@ $menu-item-selected-bg: $base-selected-bg !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: $base-selected-bg !default;
 
 $never-used: collector((

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

@@ -16,7 +16,7 @@
   color: $menu-color;
 
   a {
-    color: $typography-link-color;
+    color: $menu-item-link-color;
   }
 
   &.dx-state-disabled {

package/data/scss/widgets/fluent/overlay/_colors.scss

@@ -6,8 +6,6 @@ $overlay-shader-bg: getCustomVar(("$overlay-shader-bg")) !default;
 @use "../colors" as *;
 
 // adduse
-
-$overlay-border-color: $base-border-color !default;
 $overlay-content-bg: $base-bg !default;
 $overlay-shader-bg: null !default;
 

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

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

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

@@ -44,3 +44,7 @@ $fluent-popup-focused-content-shadow: null !default;
   $fluent-popup-content-shadow: 0 0 8px 0 $popup-content-shadow-color1, 0 32px 64px 0 $popup-content-shadow-color2 !default;
   $fluent-popup-focused-content-shadow: 0 0 12px 0 $popup-focused-content-shadow-color, 0 32px 64px 0 $popup-focused-content-shadow-color !default;
 }
+
+:root { 
+  --dx-popup-toolbar-item-padding-inline: #{$fluent-popup-toolbar-item-spacing}; 
+} 

package/data/scss/widgets/fluent/progressBar/_sizes.scss

@@ -5,7 +5,6 @@
 $progressbar-height: null !default;
 $progressbar-border-radius: $base-border-radius !default;
 $progressbar-status-height: 16px !default;
-$progressbar-status-margin: 2px !default;
 $progressbar-indeterminate-background-width: 90%;
 
 @if $size == "default" {

package/data/scss/widgets/fluent/radioGroup/_colors.scss

@@ -15,7 +15,6 @@ $radiogroup-bg: $base-element-bg !default;
 
 $radiobutton-invalid-color: $base-invalid-color !default;
 $radiobutton-invalid-color-hover: $base-invalid-color-hover !default;
-$radiobutton-invalid-color-active: $base-invalid-color-active !default;
 $radiobutton-invalid-color-focused: $base-invalid-color-selected !default;
 
 $radiogroup-readonly-border-color: $radiogroup-border-color !default;

package/data/scss/widgets/fluent/scheduler/_colors.scss

@@ -38,15 +38,12 @@ $scheduler-workspace-month-text-color: color.change($base-text-color, $alpha: 0.
 $scheduler-dropdown-appointment-date-color: color.change($base-text-color, $alpha: 0.54) !default;
 $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
 $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default;
-$scheduler-group-header-color: color.change($base-text-color, $alpha: 0.87) !default;
 $scheduler-header-bg: $base-bg !default;
 $scheduler-alldaypanel-bg: $base-element-bg !default;
 $scheduler-other-month-cell-opacity: 0.5 !default;
 $scheduler-fill-focused-appointment: false !default;
 $scheduler-is-shadow-color-for-focused-state: false !default;
 $scheduler-time-indicator-background-color: rgba(0, 0, 0, 0.03) !default;
-$fluent-scheduler-toolbar-color: $base-accent;
-$fluent-scheduler-toolbar-active-color: color.change($base-accent, $alpha: 0.08);
 
 $scheduler-tooltip-appointment-text-color: $base-text-color !default;
 $scheduler-appointment-overlay-bg: $base-bg !default;
@@ -63,20 +60,20 @@ $header-panel-cell-date: null !default;
   $scheduler-appointment-text-color: #000 !default;
   $scheduler-panel-text-color: #707070;
   $header-panel-cell-date: #424242;
-  
+
   @if $color == "blue"{
     $scheduler-appointment-base-color: lighten($base-accent, 48%) !default;
     $scheduler-cell-hover-bg: $base-hover-bg !default;
     $scheduler-cell-active-bg: color.change(darken($base-bg, 13.3%), $alpha: 0.7) !default;
     $scheduler-workspace-focused-cell-color: color.change($base-accent, $alpha: 0.12) !default;
   }
-  
+
   @if $color == "saas" {
     $scheduler-appointment-base-color: lighten($base-accent, 30%) !default;
     $scheduler-cell-hover-bg: lighten($base-hover-bg, 4.10) !default;
     $scheduler-cell-active-bg: darken(saturate(adjust-hue($base-bg, 222), 100.00), 2.00) !default;
     $scheduler-workspace-focused-cell-color: lighten($base-accent, 32.53) !default;
-  } 
+  }
 }
 
 @if $mode == "dark" {
@@ -94,7 +91,7 @@ $header-panel-cell-date: null !default;
   @if $color == "saas" {
     $scheduler-cell-active-bg: lighten($base-bg, 4.31) !default;
     $scheduler-workspace-focused-cell-color: darken(desaturate(adjust-hue($base-accent, -7), 65.00), 41.18) !default;
-  } 
+  }
 }
 
 $scheduler-first-month-cell-background-color: color.adjust($scheduler-appointment-base-color, $alpha: -0.85) !default;

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

@@ -29,20 +29,16 @@ $scheduler-left-column-width: 65px !default;
 $fluent-scheduler-timeline-date-table-cell-height: 50px !default;
 $scheduler-border-radius: 0 !default;
 
-$fluent-scheduler-navigator-border-radius: $button-border-radius !default;
-$fluent-scheduler-navigation-buttons-padding: 6px !default;
 $fluent-scheduler-navigator-icon-font-size: $fluent-base-icon-size;
 $fluent-scheduler-appointment-month-text-size: 12px !default;
 $fluent-scheduler-workspace-info-text-size: 16px !default;
 $fluent-scheduler-all-day-title-font-size: 12px !default;
 $fluent-scheduler-time-panel-font-size: 12px !default;
-$fluent-scheduler-header-panel-week-font-size: 12px !default;
 $fluent-scheduler-header-panel-margin: 14px !default;
 $fluent-scheduler-group-header-font-size: 14px !default;
 $fluent-scheduler-group-header-table-cell-width: 100px !default;
 $fluent-scheduler-appointment-transparent-left-border: 1px solid transparent !default;
 $fluent-scheduler-appointment-transparent-right-border: 1px solid transparent !default;
-$fluent-scheduler-appointment-tooltip-width: 300px !default;
 $fluent-scheduler-workspace-month-header-height: 22px !default;
 $fluent-scheduler-workspace-month-timeline--time-height: 34px !default;
 

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

@@ -9,11 +9,6 @@
 
 // adduse
 
-
-$fluent-slider-tooltip-popup-content-horizontal-padding: 3px;
-$fluent-slider-tooltip-width-without-paddings: $fluent-slider-tooltip-width - 2 * $fluent-slider-tooltip-popup-content-horizontal-padding;
-$fluent-slider-disabled-tooltip-top-margin: 5px;
-
 .dx-slider-wrapper {
   height: $fluent-slider-wrapper-height;
 

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

@@ -11,11 +11,8 @@ $fluent-slider-height: 28px !default; // for fieldset height
 $fluent-slider-radius: 50% !default;
 $fluent-slider-track-height: null !default;
 $fluent-slider-track-border-radius: 2px !default;
-$fluent-slider-handle-active-border-width: 2px !default;
 $fluent-slider-handle-height: null !default;
 $fluent-slider-handle-inner-size: null !default;
-$fluent-slider-handle-inner-border-width: 1px !default;
-$fluent-slider-handle-inner-disabled-size: 2px !default;
 
 @if $size == "default" {
   $fluent-slider-track-height: 4px !default;

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

@@ -1,8 +1,42 @@
+$splitter-resize-handle-color: getCustomVar(("$splitter-resize-handle-color")) !default;
+$splitter-resize-handle-color-focused: getCustomVar(("$splitter-resize-handle-color-focused")) !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;
+
 @use "sass:color";
 @use "../sizes" as *;
 @use "../colors" as *;
 
 // adduse
+$splitter-resize-handle-color: null !default;
+$splitter-resize-handle-color-focused: 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-icon-color !default;
+  $splitter-resize-handle-color-focused: $base-inverted-text-color !default;
+
+  $splitter-resize-handle-bg: $base-border-color !default;
+  $splitter-resize-handle-bg-hover: $base-border-color-hover !default;
+}
+
+@if $mode == 'dark' {
+  $splitter-resize-handle-color: $base-text-color !default;
+  $splitter-resize-handle-color-focused: $base-inverted-text-color !default;
 
-$splitter-inactive-color: $base-border-color !default;
-$splitter-bg: color.change($base-accent, $alpha: 0.5) !default;
+  $splitter-resize-handle-bg: $base-border-color !default;
+  $splitter-resize-handle-bg-hover: $base-border-color-hover !default;
+}
+$splitter-resize-handle-color-hover: $splitter-resize-handle-color !default;
+$never-used: collector((
+"$splitter-resize-handle-color": $splitter-resize-handle-color,
+"$splitter-resize-handle-color-focused": $splitter-resize-handle-color-focused,
+"$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,
+));

package/data/scss/widgets/fluent/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/fluent/splitter/_sizes.scss

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

package/data/scss/widgets/fluent/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/fluent/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/fluent/splitterBar/_sizes.scss

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

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

@@ -17,7 +17,6 @@ $switch-handle-off-bg: $base-border-color-accessible !default;
 $switch-on-bg: $base-accent !default;
 $switch-handle-on-bg: $base-element-bg !default;
 $switch-handle-border-radius: 50% !default;
-$switch-hover-bg: transparent !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;

package/data/scss/widgets/fluent/switch/_sizes.scss

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

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

@@ -12,7 +12,6 @@ $fluent-tagbox-tag-height: null !default;
 $fluent-tagbox-select-all-padding-bottom: 12px !default;
 $fluent-tagbox-select-all-margin-bottom: 3px !default;
 $tagbox-tag-border-radius: 999em !default;
-$fluent-tagbox-outlined-with-label-top-padding: null !default;
 $fluent-tagbox-filled-with-label-top-padding: null !default;
 $fluent-tagbox-filled-with-label-bottom-padding: null !default;
 $fluent-tagbox-tag-content-line-height: null !default;

package/data/scss/widgets/fluent/textBox/_colors.scss

@@ -1,11 +1,5 @@
-$textbox-search-icon-color: getCustomVar(("$textbox-search-icon-color")) !default;
-
 @use "sass:color";
 @use "../sizes" as *;
 @use "../colors" as *;
 
 // adduse
-$textbox-search-icon-color: $base-icon-color !default;
-$never-used: collector((
-"$textbox-search-icon-color": $textbox-search-icon-color,
-));

package/data/scss/widgets/fluent/textBox/_index.scss

@@ -12,13 +12,7 @@
 // adduse
 @use "../textEditor" as *;
 
-$textbox-search-icon-right-padding: math.div($fluent-filled-texteditor-input-horizontal-padding, 2);
-$textbox-filled-search-icon-size:
-  $texteditor-icon-container-size +
-  $fluent-filled-texteditor-input-horizontal-padding +
-  $textbox-search-icon-right-padding;
-
-@mixin dx-texteditor-search-icon($texteditor-icon-size, $texteditor-padding) {
+@mixin dx-texteditor-search-icon($texteditor-icon-size) {
   position: absolute;
   display: flex;
   align-items: center;
@@ -40,7 +34,7 @@ $textbox-filled-search-icon-size:
 
   &.dx-editor-underlined {
     .dx-icon-search {
-      @include dx-texteditor-search-icon($textbox-search-icon-size, $fluent-base-standard-texteditor-input-horizontal-padding);
+      @include dx-texteditor-search-icon($textbox-search-icon-size);
     }
 
     .dx-texteditor-input,
@@ -52,7 +46,7 @@ $textbox-filled-search-icon-size:
   &.dx-editor-filled,
   &.dx-editor-outlined {
     .dx-icon-search {
-      @include dx-texteditor-search-icon($textbox-search-icon-size, $fluent-filled-texteditor-input-horizontal-padding);
+      @include dx-texteditor-search-icon($textbox-search-icon-size);
     }
 
     .dx-texteditor-input,

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

@@ -92,6 +92,12 @@ $texteditor-filled-bg-focused: $texteditor-filled-bg !default;
 $texteditor-label-color: $texteditor-placeholder-color;
 $texteditor-label-color-focused: $base-accent;
 
+:root {
+  --dx-texteditor-color-text: #{$texteditor-color}; 
+  --dx-texteditor-color-label: #{$texteditor-label-color};
+}
+
+
   
 $never-used: collector((
 "$texteditor-color": $texteditor-color,

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

@@ -64,7 +64,7 @@ $fluent-editor-border-width: 1px;
     background-color: transparent;
     border-color: $texteditor-border-color-disabled;
   }
-  
+
   &.dx-invalid {
     border-color: $texteditor-invalid-faded-border-color;
 
@@ -73,7 +73,7 @@ $fluent-editor-border-width: 1px;
       border-color: $texteditor-invalid-focused-border-color;
     }
 
-    &::before {        
+    &::before {
       border-color: $texteditor-invalid-faded-border-color;
     }
   }
@@ -94,7 +94,7 @@ $fluent-editor-border-width: 1px;
     border-top-color: $texteditor-border-color-focused;
     border-bottom-color: $texteditor-border-bottom-color-focused;
 
-    &::before {        
+    &::before {
       transform: scaleX(1);
       transition-property: transform;
       transition-duration: 200ms;
@@ -136,7 +136,7 @@ $fluent-editor-border-width: 1px;
   &.dx-state-active {
     background-color: $texteditor-filled-bg-focused;
   }
-  
+
   &.dx-state-disabled,
   &.dx-state-readonly {
     background-color: transparent;
@@ -540,7 +540,7 @@ $fluent-editor-border-width: 1px;
   $fluent-filled-texteditor-input-with-label-bottom-padding,
   $fluent-texteditor-font-size,
   $fluent-texteditor-label-outside-height,
-); 
+);
 @include dx-editor-underlined(
   $texteditor-label-transition,
   $fluent-texteditor-label-font-size,
@@ -577,7 +577,6 @@ $fluent-editor-border-width: 1px;
   $fluent-underlined-editor-button-height,
   $fluent-editor-custom-button-margin,
   $fluent-editor-custom-button-margin,
-  $fluent-filled-texteditor-input-button-horizontal-padding,
   0,
   $texteditor-spin-button-horizontal-padding,
   $fluent-button-vertical-padding,

package/data/scss/widgets/fluent/textEditor/_sizes.scss

@@ -6,7 +6,6 @@
 $fluent-texteditor-line-height: null !default;
 $fluent-texteditor-font-size: null !default;
 $fluent-texteditor-input-height: null !default;
-$fluent-texteditor-clear-icon-size: $fluent-base-icon-size !default;
 $fluent-texteditor-label-top-offset: null !default;
 $fluent-texteditor-label-outside-top-offset: null !default;
 $fluent-filled-texteditor-input-horizontal-padding: null !default;
@@ -15,7 +14,6 @@ $fluent-filled-texteditor-input-bottom-padding: null !default;
 $fluent-standard-texteditor-input-top-padding: null !default;
 $fluent-underlined-editor-button-height: null !default;
 $fluent-texteditor-label-font-size: null !default;
-$fluent-texteditor-label-outside-font-size: $fluent-texteditor-font-size !default;
 $fluent-texteditor-label-outside-height: null !default;
 $fluent-standard-texteditor-input-bottom-padding: null !default;
 $fluent-standard-texteditor-with-label-input-top-padding: null !default;
@@ -69,10 +67,5 @@ $fluent-filled-texteditor-input-padding:
   $fluent-filled-texteditor-input-horizontal-padding
   $fluent-filled-texteditor-input-bottom-padding !default;
 
-$fluent-standard-texteditor-input-padding:
-  $fluent-standard-texteditor-input-top-padding
-  $fluent-base-standard-texteditor-input-horizontal-padding
-  $fluent-standard-texteditor-input-bottom-padding !default;
-
 $fluent-filled-texteditor-input-button-horizontal-padding: $fluent-filled-texteditor-input-horizontal-padding - 4px !default;
 $texteditor-spin-button-horizontal-padding: math.div($fluent-filled-texteditor-input-horizontal-padding, 2) !default;

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

@@ -19,3 +19,7 @@ $fluent-toolbar-section-padding: null !default;
   $fluent-toolbar-height: 36px !default;
   $fluent-toolbar-section-padding: 8px !default;
 }
+
+:root {
+  --dx-toolbar-height: #{$fluent-toolbar-height}; 
+} 

package/data/scss/widgets/fluent/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/fluent/typography/_sizes.scss

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