devextreme-themebuilder 23.2.6 → 24.1.2-beta

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

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

package/data/scss/widgets/generic/_colors.scss

@@ -40,9 +40,6 @@ $base-shadow-color: null !default;
 $base-success: null !default;
 $base-warning: null !default;
 $base-danger: null !default;
-$typography-bg: null !default;
-$typography-color: null !default;
-$typography-link-color: null !default;
 $base-hover-color: null !default;
 $base-hover-bg: null !default;
 $base-select-color: null !default;
@@ -86,9 +83,6 @@ $base-grid-selectedrow-border-color: null !default;
   $base-success: #5cb85c !default;
   $base-warning: #f0ad4e !default;
   $base-danger: #f74d61 !default;
-  $typography-bg: $base-bg !default;
-  $typography-color: $base-text-color !default;
-  $typography-link-color: $base-link-color !default;
   $base-hover-color: $base-text-color !default;
   $base-hover-bg: color.change($base-accent, $alpha: 0.12) !default;
   $base-select-color: $base-text-color !default;
@@ -125,9 +119,6 @@ $base-grid-selectedrow-border-color: null !default;
   $base-inverted-text-color: extcolor.difference(#fff, $base-text-color) !default;
   $base-inverted-icon-color: extcolor.difference(#fff, $base-text-color) !default;
   $base-link-color: $base-text-color !default;
-  $typography-bg: $base-bg !default;
-  $typography-color: $base-text-color !default;
-  $typography-link-color: $base-link-color !default;
   $base-invalid-color: #ea4444 !default;
   $base-invalid-faded-border-color: $base-invalid-color !default;
   $base-label-color: $base-text-color !default;
@@ -160,9 +151,6 @@ $base-grid-selectedrow-border-color: null !default;
   $base-inverted-text-color: #2a2a2a !default;
   $base-focus-color: $base-inverted-text-color !default;
   $base-focus-bg: $base-accent !default;
-  $typography-bg: $base-bg !default;
-  $typography-color: $base-text-color !default;
-  $typography-link-color: $base-link-color !default;
   $base-inverted-icon-color: $base-inverted-text-color !default;
   $base-dropdown-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default;
   $base-invalid-color: $base-danger !default;
@@ -197,9 +185,6 @@ $base-grid-selectedrow-border-color: null !default;
   $base-focus-bg: $base-accent !default;
   $base-inverted-bg: darken($base-bg, 100%) !default;
   $base-shadow-color: $base-inverted-bg !default;
-  $typography-bg: $base-bg !default;
-  $typography-color: $base-text-color !default;
-  $typography-link-color: $base-link-color !default;
   $base-inverted-icon-color: $base-inverted-text-color !default;
   $base-dropdown-shadow-color: color.change(darken($base-shadow-color, 100%), $alpha: 0.175) !default;
   $base-invalid-color: $base-danger !default;
@@ -234,9 +219,6 @@ $base-grid-selectedrow-border-color: null !default;
   $base-inverted-text-color: #2a2a2a !default;
   $base-focus-color: $base-inverted-text-color !default;
   $base-focus-bg: $base-accent !default;
-  $typography-bg: $base-bg !default;
-  $typography-color: $base-text-color !default;
-  $typography-link-color: $base-link-color !default;
   $base-inverted-icon-color: $base-inverted-text-color !default;
   $base-header-color: #8894a0 !default;
   $base-row-alternation-background: #1d2026 !default;
@@ -273,9 +255,6 @@ $base-grid-selectedrow-border-color: null !default;
   $base-inverted-text-color: #fff !default;
   $base-focus-color: $base-inverted-text-color !default;
   $base-focus-bg: $base-accent !default;
-  $typography-bg: $base-bg !default;
-  $typography-color: $base-text-color !default;
-  $typography-link-color: $base-link-color !default;
   $base-inverted-icon-color: $base-inverted-text-color !default;
   $base-dropdown-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default;
   $base-invalid-color: $base-danger !default;
@@ -308,9 +287,6 @@ $base-grid-selectedrow-border-color: null !default;
   $base-inverted-text-color: #fff !default;
   $base-focus-color: $base-inverted-text-color !default;
   $base-focus-bg: $base-accent !default;
-  $typography-bg: $base-bg !default;
-  $typography-color: $base-text-color !default;
-  $typography-link-color: $base-link-color !default;
   $base-inverted-icon-color: $base-inverted-text-color !default;
   $base-dropdown-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default;
   $base-invalid-color: $base-danger !default;
@@ -345,9 +321,6 @@ $base-grid-selectedrow-border-color: null !default;
   $base-focus-bg: $base-accent !default;
   $base-inverted-bg: darken($base-bg, 100%) !default;
   $base-shadow-color: $base-inverted-bg !default;
-  $typography-bg: $base-bg !default;
-  $typography-color: $base-text-color !default;
-  $typography-link-color: $base-link-color !default;
   $base-inverted-icon-color: $base-inverted-text-color !default;
   $base-webwidget-hover-background: #edf0f2 !default;
   $base-grid-selection-background: #d1e0ed !default;
@@ -359,9 +332,26 @@ $base-grid-selectedrow-border-color: null !default;
   $scrollview-pulldown-path: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABkCAQAAABebbrxAAABD0lEQVRo3u2XvQ3CMBCFLbmjYYGsAA2wA1X2gAbEAEwB2eIKflagh6zACJAuUihASUic+M5GNH56dT7J8efTPUXKkDkzrS8LpQAEMBygcwAss2UGQADDBmLa+AMvzAAIYNhATBt/YMEMgACGDcS0wbQBEEAAAQQQwD8CEzaiL7sKqOnojTuQrh95SKkX7kqD5j+M6O6Mu1NkupQJZU64B426bjmmXIzLKe7TZiUGLmweyhTa28XWdJKpYn8pXIVub1U4T4+jUKkKbyWeWhR6Vqpwd+w+hb5U4S/ta54qkhZgVihxrxWaznZVZD2lqVDaVkVafOoKGVWRN6nZR6GMxr+qZjHl3aq4db0NLXld7wVjuu7NS9f7yAAAAABJRU5ErkJggg==") !default;
 }
 
-$base-border-radius-small: $base-border-radius - 1px !default;
-$base-border-radius-large: $base-border-radius + 2px !default;
+$typography-bg: $base-bg !default;
+$typography-color: $base-text-color !default;
+$typography-link-color: $base-link-color !default;
 
+
+:root {
+  --dx-component-color-bg: #{$base-bg};
+  --dx-color-main-bg: #{$typography-bg};
+  --dx-color-primary: #{$base-accent};
+  --dx-color-danger: #{$base-danger};
+  --dx-color-success: #{$base-success};
+  --dx-color-warning: #{$base-warning};
+  --dx-color-border: #{$base-border-color};
+  --dx-color-text: #{$base-text-color};
+  --dx-color-icon: #{$base-icon-color};
+  --dx-color-spin-icon: #{$base-icon-color};
+  --dx-color-link: #{$base-link-color};
+  --dx-color-shadow: #{$base-shadow-color};
+  --dx-color-separator: #{$base-border-color};
+}
 $never-used: collector((
 "$base-font-family": $base-font-family,
 "$base-accent": $base-accent,

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

@@ -4,6 +4,7 @@
 @use "./button";
 @use "./buttonGroup";
 @use "./scrollView";
+@use "./splitter";
 @use "./checkBox";
 @use "./switch";
 @use "./tabs";

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

@@ -70,3 +70,11 @@ $generic-base-inline-borderedwidget-bottom-padding:
   $generic-base-border-width !default;
 
 $generic-treeview-search-editor-height: round($generic-base-line-height * $generic-base-font-size) + $generic-base-inline-borderedwidget-top-padding + $generic-base-inline-borderedwidget-bottom-padding + 2 * $generic-base-border-width;
+
+:root {
+  --dx-component-height: #{$generic-base-inline-widget-height};
+  --dx-font-size: #{$generic-base-font-size};
+  --dx-border-width: #{$generic-base-border-width}; 
+  --dx-border-radius: #{$base-border-radius}; 
+  --dx-font-size-icon: #{$generic-base-icon-size}; 
+}

package/data/scss/widgets/generic/button/_colors.scss

@@ -30,7 +30,6 @@ $button-success-text-bg-selected: getCustomVar(("$button-success-text-bg-selecte
 // adduse
 
 $button-border-radius: $base-border-radius !default;
-$button-disabled-text-opacity: 0.5 !default;
 $button-normal-color: $base-text-color !default;
 $button-normal-bg: null !default;
 $button-normal-border-color: null !default;

package/data/scss/widgets/generic/button/_sizes.scss

@@ -11,10 +11,6 @@ $generic-button-border-weight: $generic-base-border-width !default;
 
 $generic-button-content-line-height: $generic-base-line-height !default;
 
-$generic-button-text-transform: none !default;
-$generic-button-text-font-weight: 400 !default;
-$generic-button-text-letter-spacing: normal !default;
-
 @if $size == "default" {
   $generic-button-text-line-height: 1.2858 !default;
   $generic-button-vertical-padding: 8px !default;
@@ -30,3 +26,7 @@ $generic-button-text-letter-spacing: normal !default;
   $generic-button-icon-horizontal-padding: 5px !default;
   $generic-button-box-shadow-size: 0 1px 2px !default;
 }
+
+:root { 
+  --dx-button-padding-inline: #{$generic-button-horizontal-padding}; 
+} 

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

@@ -40,7 +40,6 @@
   $calendar-navigator-text-color,
 );
 @include dx-calendar-body-mixin(
-  $calendar-cell-other-color,
   $calendar-week-number-cell-color,
   $calendar-week-number-cell-bg,
   0,

package/data/scss/widgets/generic/checkBox/_colors.scss

@@ -17,7 +17,6 @@ $checkbox-bg: null !default;
 $checkbox-hover-border-color: null !default;
 $checkbox-active-icon-bg: null !default;
 $checkbox-readonly-border-color: null !default;
-$checkbox-icon-border-radius: null !default;
 $checkbox-invalid-focused-border-color: $base-invalid-color !default;
 $checkbox-invalid-faded-border-color: $base-invalid-faded-border-color !default;
 
@@ -29,7 +28,6 @@ $checkbox-invalid-faded-border-color: $base-invalid-faded-border-color !default;
   $checkbox-hover-border-color: darken($base-accent, 12%) !default;
   $checkbox-active-icon-bg: color.change(darken($checkbox-bg, 62.5%), $alpha: 0.2) !default;
   $checkbox-readonly-border-color: lighten($checkbox-border-color, 9%) !default;
-  $checkbox-icon-border-radius: $base-border-radius-exsmall !default;
 }
 
 @if $color == "contrast" {
@@ -40,7 +38,6 @@ $checkbox-invalid-faded-border-color: $base-invalid-faded-border-color !default;
   $checkbox-hover-border-color: $base-border-color !default;
   $checkbox-active-icon-bg: $base-inverted-bg !default;
   $checkbox-readonly-border-color: darken($checkbox-border-color, 50%) !default;
-  $checkbox-icon-border-radius: $base-border-radius - 2px !default;
 }
 
 @if $color == "dark" {
@@ -51,7 +48,6 @@ $checkbox-invalid-faded-border-color: $base-invalid-faded-border-color !default;
   $checkbox-hover-border-color: lighten($base-accent, 12%) !default;
   $checkbox-active-icon-bg: color.change(lighten($checkbox-bg, 62.5%), $alpha: 0.2) !default;
   $checkbox-readonly-border-color: darken($checkbox-border-color, 9%) !default;
-  $checkbox-icon-border-radius: $base-border-radius-exsmall !default;
 }
 
 @if $color == "darkmoon" {
@@ -62,7 +58,6 @@ $checkbox-invalid-faded-border-color: $base-invalid-faded-border-color !default;
   $checkbox-hover-border-color: lighten($base-accent, 12%) !default;
   $checkbox-active-icon-bg: color.change(lighten($checkbox-bg, 62.5%), $alpha: 0.2) !default;
   $checkbox-readonly-border-color: darken($checkbox-border-color, 9%) !default;
-  $checkbox-icon-border-radius: $base-border-radius-exsmall !default;
 }
 
 @if $color == "darkviolet" {
@@ -73,7 +68,6 @@ $checkbox-invalid-faded-border-color: $base-invalid-faded-border-color !default;
   $checkbox-hover-border-color: $base-accent-highlight-color !default;
   $checkbox-active-icon-bg: color.change(lighten($checkbox-bg, 62.5%), $alpha: 0.2) !default;
   $checkbox-readonly-border-color: darken($checkbox-border-color, 9%) !default;
-  $checkbox-icon-border-radius: $base-border-radius-exsmall !default;
 }
 
 @if $color == "greenmist" {
@@ -84,7 +78,6 @@ $checkbox-invalid-faded-border-color: $base-invalid-faded-border-color !default;
   $checkbox-hover-border-color: darken($base-accent, 12%) !default;
   $checkbox-active-icon-bg: color.change(darken($base-bg, 9%), $alpha: 0.4) !default;
   $checkbox-readonly-border-color: lighten($checkbox-border-color, 9%) !default;
-  $checkbox-icon-border-radius: $base-border-radius-exsmall !default;
 }
 
 @if $color == "light" {
@@ -95,7 +88,6 @@ $checkbox-invalid-faded-border-color: $base-invalid-faded-border-color !default;
   $checkbox-hover-border-color: darken($base-accent, 12%) !default;
   $checkbox-active-icon-bg: color.change(darken($checkbox-bg, 62.5%), $alpha: 0.2) !default;
   $checkbox-readonly-border-color: lighten($checkbox-border-color, 9%) !default;
-  $checkbox-icon-border-radius: $base-border-radius-exsmall !default;
 }
 
 @if $color == "softblue" {
@@ -106,7 +98,6 @@ $checkbox-invalid-faded-border-color: $base-invalid-faded-border-color !default;
   $checkbox-hover-border-color: darken($base-accent, 12%) !default;
   $checkbox-active-icon-bg: color.change(darken($checkbox-bg, 62.5%), $alpha: 0.2) !default;
   $checkbox-readonly-border-color: lighten($checkbox-border-color, 9%) !default;
-  $checkbox-icon-border-radius: $base-border-radius-exsmall !default;
 }
 
 $checkbox-readonly-bg: $checkbox-bg !default;

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

@@ -5,12 +5,12 @@
 @use "../sizes" as *;
 @use "../../base/icons" as *;
 @use "../../base/checkBox";
+@use "../../base/checkBox/mixins" as *;
 
 // adduse
 
 
 $generic-checkbox-disable-opacity: 0.4;
-$icon-position: relative;
 
 .dx-checkbox {
   line-height: 0;
@@ -24,13 +24,13 @@ $icon-position: relative;
 
   &.dx-state-hover {
     .dx-checkbox-icon {
-      border: 1px solid $checkbox-hover-border-color;
+      border-color: $checkbox-hover-border-color;
     }
   }
 
   &.dx-state-focused {
     .dx-checkbox-icon {
-      border: 1px solid $checkbox-border-color-focused;
+      border-color: $checkbox-border-color-focused;
     }
   }
 
@@ -42,38 +42,33 @@ $icon-position: relative;
 }
 
 .dx-checkbox-icon {
-  width: $generic-checkbox-size;
-  height: $generic-checkbox-size;
-  border-radius: $checkbox-icon-border-radius;
-  border: 1px solid $checkbox-border-color;
+  width: $generic-checkbox-arrow-icon-size;
+  height: $generic-checkbox-arrow-icon-size;
+  font-size: $generic-checkbox-icon-font-size;
+  border-radius: $generic-checkbox-border-radius;
+  border-width: $generic-checkbox-border-width;
+  border-style: solid;
+  border-color: $checkbox-border-color;
   background-color: $checkbox-bg;
 
   .dx-checkbox-checked & {
     @include dx-icon(check);
 
     color: $checkbox-checked-color;
+    font-size: $generic-checkbox-icon-font-size;
 
-    @include dx-icon-font-centered-sizing($generic-checkbox-arrow-icon-size, $icon-position);
-
-    font-size: $generic-checkbox-arrow-font-size;
-  }
-
-  .dx-checkbox-indeterminate & {
-    color: $checkbox-indeterminate-bg;
-
-    @include dx-icon-font-centered-sizing($generic-checkbox-indeterminate-icon-size, $icon-position);
-
-    font-size: $generic-checkbox-indeterminate-font-size;
-
-    &::before {
-      content: '';
-      background-color: $checkbox-checked-color;
-      border-radius: 2px;
-      height: $generic-checkbox-indeterminate-icon-size;
-    }
+    @include dx-checkbox-icon-centered($generic-checkbox-arrow-icon-size, $generic-checkbox-arrow-icon-size, $generic-checkbox-arrow-font-size);
   }
 }
 
+@include dx-checkbox-icon-indeterminate(
+  $checkbox-indeterminate-bg,
+  $checkbox-checked-color,
+  $generic-checkbox-indeterminate-icon-size,
+  $generic-checkbox-indeterminate-icon-size,
+  $generic-checkbox-indeterminate-icon-border-radius,
+);
+
 .dx-state-disabled {
   &.dx-checkbox,
   .dx-checkbox {
@@ -92,7 +87,7 @@ $icon-position: relative;
 .dx-invalid {
   .dx-checkbox-container {
     .dx-checkbox-icon {
-      border: 1px solid $checkbox-invalid-faded-border-color;
+      border-color: $checkbox-invalid-faded-border-color;
     }
   }
 

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

@@ -1,29 +1,27 @@
 @use "../sizes" as *;
+@use "../colors" as *;
 @use "colors" as *;
 
 // adduse
 
-$generic-checkbox-arrow-icon-size: null !default;
+$generic-checkbox-icon-font-size: null !default;
+
+$generic-checkbox-border-width: 1px !default;
+$generic-checkbox-border-radius: $base-border-radius-exsmall !default;
+
+$generic-checkbox-arrow-icon-size: 1em !default;
 $generic-checkbox-arrow-font-size: null !default;
 $generic-checkbox-indeterminate-icon-size: null !default;
-$generic-checkbox-indeterminate-icon-margin: null !default;
-$generic-checkbox-indeterminate-font-size: null !default;
-$generic-checkbox-size: null !default;
+$generic-checkbox-indeterminate-icon-border-radius: 2px !default;
 
 @if $size == "default" {
-  $generic-checkbox-arrow-icon-size: 1em !default;
-  $generic-checkbox-arrow-font-size: 16px !default;
-  $generic-checkbox-indeterminate-icon-size: 1em !default;
-  $generic-checkbox-indeterminate-font-size: 12px;
-  $generic-checkbox-indeterminate-icon-margin: 0.33em !default;
-  $generic-checkbox-size: 22px !default;
+  $generic-checkbox-icon-font-size: 22px !default;
+  $generic-checkbox-arrow-font-size: 0.727273em !default;
+  $generic-checkbox-indeterminate-icon-size: 0.545455em !default;
 }
 
 @else if $size == "compact" {
-  $generic-checkbox-arrow-icon-size: 1em !default;
-  $generic-checkbox-arrow-font-size: 10px !default;
-  $generic-checkbox-indeterminate-icon-size: 1em !default;
-  $generic-checkbox-indeterminate-font-size: 8px;
-  $generic-checkbox-indeterminate-icon-margin: 0.375em !default;
-  $generic-checkbox-size: 16px !default;
+  $generic-checkbox-icon-font-size: 16px !default;
+  $generic-checkbox-arrow-font-size: 0.625em !default;
+  $generic-checkbox-indeterminate-icon-size: 0.5em !default;
 }

package/data/scss/widgets/generic/dropDownEditor/_colors.scss

@@ -21,7 +21,7 @@ $dropdowneditor-filled-button-invalid-active-bg: color.change($texteditor-invali
 $dropdowneditor-button-active-border-color: transparent !default;
 $dropdowneditor-icon-color: $base-icon-color !default;
 $dropdowneditor-icon-active-color: null !default;
-$dropdowneditor-icon-border-radius: $base-border-radius-small !default;
+$dropdowneditor-icon-border-radius: $base-border-radius - 1px !default;
 
 @if $color == "carmine" {
   $dropdowneditor-button-hover-bg: darken($base-bg, 4%) !default; // #fff => #f5f6f7

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

@@ -76,7 +76,7 @@ $generic-fieldset-attention-icon-offset: $generic-base-inline-horizontal-padding
       }
     }
 
-    @include dx-field-value-widget-position(dx-checkbox, $generic-checkbox-size);
+    @include dx-field-value-widget-position(dx-checkbox, $generic-checkbox-icon-font-size);
     @include dx-field-value-widget-position(dx-switch, $generic-switch-height);
     @include dx-field-value-widget-position(dx-slider, $generic-slider-height);
     @include dx-field-value-widget-position(dx-radiogroup, $generic-radiogroup-min-height);

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

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

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

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

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

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

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

@@ -5,6 +5,7 @@
 @use "sizes" as *;
 @use "../sizes" as *;
 @use "../../base/icons" as *;
+@use "../../base/checkBox/mixins" as *;
 @use "../dropDownEditor" as *;
 @use "../textEditor" as *;
 @use "../common/mixins" as *;
@@ -168,6 +169,13 @@ $generic-grid-base-group-panel-message-line-height: $generic-button-text-line-he
     }
 
     .dx-#{$widget-name}-content .dx-#{$widget-name}-table .dx-row {
+      .dx-command-edit {
+        .dx-link:not(.dx-link-icon) {
+          margin: 0 $generic-command-edit-text-margin;
+          min-width: 20px;
+        }
+      }
+      
       .dx-command-edit-with-icons {
         .dx-link {
           @include dx-icon-sizing($generic-command-edit-icon-size);
@@ -278,18 +286,22 @@ $generic-grid-base-group-panel-message-line-height: $generic-button-text-line-he
   .dx-#{$widget-name}-checkbox-size {
     padding-bottom: $generic-grid-base-checkbox-padding-bottom;
 
-    &.dx-checkbox-checked .dx-checkbox-icon {
-      font-size: $generic-grid-base-checkbox-fontsize;
+    .dx-checkbox-icon {
+      font-size: $generic-grid-base-checkbox-icon-size;
     }
 
-    .dx-checkbox-icon {
-      height: $generic-grid-base-checkbox-icon-size;
-      width: $generic-grid-base-checkbox-icon-size;
+    &.dx-checkbox-checked {
+      .dx-checkbox-icon {
+        &::before {
+          font-size: $generic-grid-base-checkbox-fontsize;
+        }
+      }
+
     }
 
     &.dx-checkbox-indeterminate {
       .dx-checkbox-icon {
-        font-size: $generic-grid-base-checkbox-indeterminate-icon-size;
+        @include dx-checkbox-icon-centered($generic-grid-base-checkbox-indeterminate-icon-size, $generic-grid-base-checkbox-indeterminate-icon-size);
 
         &::before {
           border-radius: 0;

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

@@ -19,6 +19,7 @@ $generic-grid-base-adaptive-text-padding: null !default;
 $generic-grid-base-treeview-search-margin: null !default;
 $generic-command-edit-icon-size: null !default;
 $generic-command-edit-icon-margin: null !default;
+$generic-command-edit-text-margin: null !default;
 $generic-grid-base-nodata-font-size: null !default;
 $generic-grid-base-checkbox-padding-bottom: null !default;
 $generic-grid-base-treeview-select-all-item-offset: null !default;
@@ -42,7 +43,8 @@ $datagrid-icon-link-disabled-opacity: 0.6;
   $generic-grid-base-adaptive-text-padding: 8px !default;
   $generic-grid-base-treeview-search-margin: 10px !default;
   $generic-command-edit-icon-size: 18px !default;
-  $generic-command-edit-icon-margin: 3px !default;
+  $generic-command-edit-icon-margin: 5px !default;
+  $generic-command-edit-text-margin: 2px !default;
   $generic-grid-base-nodata-font-size: 17px !default;
   $generic-grid-base-checkbox-padding-bottom: 2px;
   $generic-grid-base-treeview-select-all-item-offset: 34px;
@@ -64,7 +66,8 @@ $datagrid-icon-link-disabled-opacity: 0.6;
   $generic-grid-base-adaptive-text-padding: 6px !default;
   $generic-grid-base-treeview-search-margin: 5px !default;
   $generic-command-edit-icon-size: 14px !default;
-  $generic-command-edit-icon-margin: 1px !default;
+  $generic-command-edit-icon-margin: 5px !default;
+  $generic-command-edit-text-margin: 2px !default;
   $generic-grid-base-nodata-font-size: 14px !default;
   $generic-grid-base-checkbox-padding-bottom: 0;
   $generic-grid-base-treeview-select-all-item-offset: 28px;

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

@@ -3,7 +3,6 @@
 // adduse
 
 $generic-toolbar-size-editor-width: null !default;
-$generic-html-editor-horizontal-padding: 15px !default;
 $generic-html-editor-add-image-dialog-base-padding: 5px !default;
 $generic-html-editor-add-image-dialog-fileuploader-padding: null !default;
 

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

@@ -47,3 +47,8 @@ $generic-list-border-width: 1px !default;
   $generic-list-searchbox-margin-bottom: 3px !default;
   $generic-list-item-vertical-padding: 5px !default;
 }
+
+:root {
+  --dx-list-item-padding-inline: #{$generic-list-item-horizontal-padding};
+  --dx-list-item-padding-block: #{$generic-list-item-vertical-padding};
+} 

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

@@ -21,6 +21,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: null !default;
+$menu-item-link-color: $base-link-color !default;
 $menu-item-focused-selected-bg: null !default;
 $menu-container-shadow-color: null !default;
 

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

@@ -3,4 +3,3 @@
 @use "../colors" as *;
 
 // adduse
-

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

@@ -22,7 +22,7 @@ $generic-menu-popup-border: 1px solid $menu-popup-border-color;
   color: $menu-color;
 
   a {
-    color: $typography-link-color;
+    color: $menu-item-link-color;
   }
 
   &.dx-state-disabled {

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

@@ -12,7 +12,7 @@ $overlay-content-shadow-color: null !default;
 $overlay-border-color: $base-border-color !default;
 $overlay-content-bg: $base-bg !default;
 $overlay-shader-bg: null !default;
-$overlay-content-border-radius: $base-border-radius-large !default;
+$overlay-content-border-radius: $base-border-radius + 2px !default;
 
 @if $color == "carmine" {
   $overlay-content-shadow-color: color.change($base-shadow-color, $alpha: 0.175) !default;

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

@@ -28,3 +28,7 @@ $generic-popup-toolbarbottom-padding: null !default;
   $generic-popup-toolbartop-padding: 2px 10px !default;
   $generic-popup-toolbarbottom-padding: 10px !default;
 }
+
+:root {
+  --dx-popup-toolbar-item-padding-inline: #{$generic-popup-toolbar-item-spacing};
+}

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

@@ -57,9 +57,6 @@ $generic-scheduler-header-panel-table-cell-height: $generic-scheduler-workspace-
 
 $generic-scheduler-current-time-cell-border-size: 2px;
 
-$generic-scheduler-focused-tab-border: 1px solid $scheduler-tab-focused-border-color;
-
-$generic-scheduler-view-switcher-font-size: $generic-base-font-size;
 $generic-scheduler-month-date-text-size: $generic-h5-font-size;
 
 $scheduler-first-of-month-border: 1px solid $scheduler-first-month-border-color;

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

@@ -25,7 +25,6 @@ $agenda-appointment-title-font-size: null !default;
 $scheduler-timeline-cell-height: null !default;
 
 $scheduler-left-column-width: 100px !default;
-$generic-scheduler-navigator-border-radius: $button-border-radius !default;
 $generic-scheduler-group-header-agenda-font-size: 14px !default;
 
 @if $size == "default" {

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

@@ -12,7 +12,6 @@
 $generic-fa-button-size: 30px;
 $generic-fa-button-label-padding: 5px 10px;
 $generic-fa-button-label-offset: 10px;
-$generic-fa-button-label-shadow: $speed-dial-action-label-shadow;
 
 @include dx-fa-button-mixin(
   $generic-main-fa-button-size,