@progress/kendo-theme-fluent 11.2.1-dev.0 → 11.3.0-dev.0

package/scss/dataviz/_variables.scss

@@ -85,23 +85,26 @@ $kendo-series-30: $kendo-series-f-darker !default;
 
 /// The border width of the chart component.
 /// @group charts
-$kendo-chart-border-width: 0px !default;
+$kendo-chart-border-width: var( --kendo-chart-border-width, 0px ) !default;
 /// The font-family of the chart component.
 /// @group charts
-$kendo-chart-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-chart-font-family: var( --kendo-chart-font-family, var( --kendo-font-family, inherit ) ) !default;
 /// The font-size of the chart component.
 /// @group charts
 $kendo-chart-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line-height of the chart component.
 /// @group charts
-$kendo-chart-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-chart-line-height: var( --kendo-chart-line-height, var( --kendo-line-height, normal ) ) !default;
 
 /// The font-size of the tooltip of the chart component.
 /// @group charts
-$kendo-chart-tooltip-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-chart-tooltip-font-size: var( --kendo-chart-tooltip-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
 /// The line-height of the tooltip of the chart component.
 /// @group charts
-$kendo-chart-tooltip-line-height: var( --kendo-line-height-sm, normal ) !default;
+$kendo-chart-tooltip-line-height: var( --kendo-chart-tooltip-line-height, var( --kendo-line-height-sm, normal ) ) !default;
+/// The transition of the tooltip of the chart component.
+/// @group charts
+$kendo-chart-tooltip-transition: left ease-in 80ms, top ease-in 80ms !default;
 
 /// The font-size of the label of the chart component.
 /// @group chart
@@ -148,27 +151,27 @@ $kendo-chart-bg: k-color(surface-alt) !default;
 $kendo-chart-text: k-color(on-app-surface) !default;
 /// The border color of the chart component.
 /// @group charts
-$kendo-chart-border: k-color(on-app-surface) !default;
+$kendo-chart-border: var( --kendo-chart-border, k-color(on-app-surface) ) !default;
 
 /// The text color of the chart tooltip.
 /// @group charts
-$kendo-chart-tooltip-color: k-color(app-surface) !default;
+$kendo-chart-tooltip-color: var( --kendo-chart-tooltip-color, k-color(app-surface) ) !default;
 /// The inverse text color of the chart tooltip.
 /// @group charts
-$kendo-chart-tooltip-color-inverse: k-color(on-app-surface) !default;
+$kendo-chart-tooltip-color-inverse: var( --kendo-chart-tooltip-color-inverse, k-color(on-app-surface) ) !default;
 
 /// The background color of the chart crosshairs.
 /// @group charts
 $kendo-chart-crosshair-background: k-color(on-app-surface) !default;
 /// The text color of the chart shared crosshair tooltip.
 /// @group charts
-$kendo-chart-crosshair-shared-tooltip-color: k-color(on-app-surface) !default;
+$kendo-chart-crosshair-shared-tooltip-color: var( --kendo-chart-crosshair-shared-tooltip-color, k-color(on-app-surface) ) !default;
 /// The background color of the chart shared crosshair tooltip.
 /// @group charts
-$kendo-chart-crosshair-shared-tooltip-background: k-color(surface-alt) !default;
+$kendo-chart-crosshair-shared-tooltip-background: var( --kendo-chart-crosshair-shared-tooltip-background, k-color(surface-alt) ) !default;
 /// The border color of the chart shared crosshair tooltip.
 /// @group charts
-$kendo-chart-crosshair-shared-tooltip-border: transparent !default;
+$kendo-chart-crosshair-shared-tooltip-border: var( --kendo-chart-crosshair-shared-tooltip-border, transparent ) !default;
 
 /// The background color of the chart notes.
 /// @group charts
@@ -178,23 +181,23 @@ $kendo-chart-notes-background: k-color(base-emphasis) !default;
 $kendo-chart-notes-border: $kendo-chart-notes-background !default;
 /// The background color of the chart note lines.
 /// @group charts
-$kendo-chart-notes-lines: $kendo-chart-notes-background !default;
+$kendo-chart-notes-lines: var( --kendo-chart-notes-lines, $kendo-chart-notes-background ) !default;
 
 /// The background color of the chart handle.
 /// @group charts
-$kendo-chart-handle-bg: k-color(surface) !default;
+$kendo-chart-handle-bg: var( --kendo-chart-handle-bg, k-color(surface) ) !default;
 /// The text color of the chart handle.
 /// @group charts
-$kendo-chart-handle-text: $kendo-chart-text !default;
+$kendo-chart-handle-text: var( --kendo-chart-handle-text, $kendo-chart-text ) !default;
 /// The border color of the chart handle.
 /// @group charts
-$kendo-chart-handle-border: $kendo-chart-handle-bg !default;
+$kendo-chart-handle-border: var( --kendo-chart-handle-border, $kendo-chart-handle-bg ) !default;
 /// The hover background color of the chart handle.
 /// @group charts
-$kendo-chart-handle-hover-bg: k-color(base-hover) !default;
+$kendo-chart-handle-hover-bg: var( --kendo-chart-handle-hover-bg, k-color(base-hover) ) !default;
 /// The hover text color of the chart handle.
 /// @group charts
-$kendo-chart-handle-hover-text: k-color(on-base) !default;
+$kendo-chart-handle-hover-text: var( --kendo-chart-handle-hover-text, k-color(on-base) ) !default;
 /// The hover border color of the chart handle.
 /// @group charts
 $kendo-chart-handle-hover-border: color-mix(in srgb, k-color(border) 10%, transparent) !default;
@@ -205,10 +208,10 @@ $kendo-chart-error-bars-background: k-color(error) !default;
 
 /// The size of the selection handle of the chart component.
 /// @group charts
-$kendo-selection-handle-size: 24px !default;
+$kendo-chart-selection-handle-size: 24px !default;
 /// The color of the selection handle of the chart component.
 /// @group charts
-$kendo-selection-border-color: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-chart-selection-border-color: color-mix(in srgb, k-color(border) 16%, transparent) !default;
 
 /// The computed height of the Chart title.
 /// @group charts
@@ -216,51 +219,57 @@ $kendo-chart-computed-title-height: 0px !default;
 
 /// The font-family of the treemap.
 /// @group charts
-$kendo-treemap-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-treemap-font-family: var( --kendo-treemap-font-family, var( --kendo-font-family, inherit ) ) !default;
 /// The font-size of the treemap.
 /// @group charts
-$kendo-treemap-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-treemap-font-size: var( --kendo-treemap-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// The line-height of the treemap.
 /// @group charts
-$kendo-treemap-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-treemap-line-height: var( --kendo-treemap-line-height, var( --kendo-line-height, normal ) ) !default;
+/// The horizontal padding of the treemap.
+/// @group charts
+$kendo-treemap-padding-x: var( --kendo-treemap-padding-x, k-spacing(1) ) !default;
+/// The vertical padding of the treemap.
+/// @group charts
+$kendo-treemap-padding-y: var( --kendo-treemap-padding-y, k-spacing(0.5) ) !default;
 /// The background color of the treemap.
 /// @group charts
-$kendo-treemap-bg: k-color(surface-alt) !default;
+$kendo-treemap-bg: var( --kendo-treemap-bg, k-color(surface-alt) ) !default;
 /// The text color of the treemap.
 /// @group charts
-$kendo-treemap-text: k-color(on-app-surface) !default;
+$kendo-treemap-text: var( --kendo-treemap-text, k-color(on-app-surface) ) !default;
 /// The border color of the treemap.
 /// @group charts
-$kendo-treemap-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-treemap-border: var( --kendo-treemap-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
 
 /// The background color of the treemap title.
 /// @group charts
-$kendo-treemap-title-bg: k-color(surface) !default;
+$kendo-treemap-title-bg: var( --kendo-treemap-title-bg, k-color(surface) ) !default;
 /// The text color of the treemap title.
 /// @group charts
-$kendo-treemap-title-text: k-color(on-app-surface) !default;
+$kendo-treemap-title-text: var( --kendo-treemap-title-text, k-color(on-app-surface) ) !default;
 /// The border color of the treemap title.
 /// @group charts
-$kendo-treemap-title-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-treemap-title-border: var( --kendo-treemap-title-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
 
 // Chart Overlay
 /// The background color of the Chart overlay.
 /// @group charts
-$kendo-chart-overlay-bg: k-color(app-surface) !default;
+$kendo-chart-overlay-bg: var( --kendo-chart-overlay-bg, k-color(app-surface) ) !default;
 
 // No Data
 /// The font-size of the Chart no data message.
 /// @group charts
-$kendo-chart-no-data-font-size: var( --kendo-font-size-lg, inherit ) !default;
+$kendo-chart-no-data-font-size: var( --kendo-chart-no-data-font-size, var( --kendo-font-size-lg, inherit ) ) !default;
 /// The font-weight of the Chart no data message.
 /// @group charts
-$kendo-chart-no-data-font-weight: var( --kendo-font-weight, normal ) !default;
+$kendo-chart-no-data-font-weight: var( --kendo-chart-no-data-font-weight, var( --kendo-font-weight, normal ) ) !default;
 /// The text color of the Chart no data message.
 /// @group charts
-$kendo-chart-no-data-text: k-color(on-app-surface) !default;
+$kendo-chart-no-data-text: var( --kendo-chart-no-data-text, k-color(on-app-surface) ) !default;
 /// The vertical padding of the Chart no data message.
 /// @group charts
-$kendo-chart-no-data-padding-y: k-spacing( 25 ) !default;
+$kendo-chart-no-data-padding-y: var( --kendo-chart-no-data-padding-y, k-spacing( 25 ) ) !default;
 
 // Gauge
 /// Color of the Gauge Pointer.
@@ -269,3 +278,113 @@ $kendo-gauge-pointer-bg: $kendo-series-f !default;
 /// Color of the Gauge Track.
 /// @group charts
 $kendo-gauge-track-bg: k-color(base-emphasis) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/dataviz/_variables.scss" with (
+    $kendo-series-a: $kendo-series-a,
+    $kendo-series-a-dark: $kendo-series-a-dark,
+    $kendo-series-a-darker: $kendo-series-a-darker,
+    $kendo-series-a-light: $kendo-series-a-light,
+    $kendo-series-a-lighter: $kendo-series-a-lighter,
+    $kendo-series-b: $kendo-series-b,
+    $kendo-series-b-dark: $kendo-series-b-dark,
+    $kendo-series-b-darker: $kendo-series-b-darker,
+    $kendo-series-b-light: $kendo-series-b-light,
+    $kendo-series-b-lighter: $kendo-series-b-lighter,
+    $kendo-series-c: $kendo-series-c,
+    $kendo-series-c-dark: $kendo-series-c-dark,
+    $kendo-series-c-darker: $kendo-series-c-darker,
+    $kendo-series-c-light: $kendo-series-c-light,
+    $kendo-series-c-lighter: $kendo-series-c-lighter,
+    $kendo-series-d: $kendo-series-d,
+    $kendo-series-d-dark: $kendo-series-d-dark,
+    $kendo-series-d-darker: $kendo-series-d-darker,
+    $kendo-series-d-light: $kendo-series-d-light,
+    $kendo-series-d-lighter: $kendo-series-d-lighter,
+    $kendo-series-e: $kendo-series-e,
+    $kendo-series-e-dark: $kendo-series-e-dark,
+    $kendo-series-e-darker: $kendo-series-e-darker,
+    $kendo-series-e-light: $kendo-series-e-light,
+    $kendo-series-e-lighter: $kendo-series-e-lighter,
+    $kendo-series-f: $kendo-series-f,
+    $kendo-series-f-dark: $kendo-series-f-dark,
+    $kendo-series-f-darker: $kendo-series-f-darker,
+    $kendo-series-f-light: $kendo-series-f-light,
+    $kendo-series-f-lighter: $kendo-series-f-lighter,
+    $kendo-series-1: $kendo-series-1,
+    $kendo-series-2: $kendo-series-2,
+    $kendo-series-3: $kendo-series-3,
+    $kendo-series-4: $kendo-series-4,
+    $kendo-series-5: $kendo-series-5,
+    $kendo-series-6: $kendo-series-6,
+    $kendo-series-7: $kendo-series-7,
+    $kendo-series-8: $kendo-series-8,
+    $kendo-series-9: $kendo-series-9,
+    $kendo-series-10: $kendo-series-10,
+    $kendo-series-11: $kendo-series-11,
+    $kendo-series-12: $kendo-series-12,
+    $kendo-series-13: $kendo-series-13,
+    $kendo-series-14: $kendo-series-14,
+    $kendo-series-15: $kendo-series-15,
+    $kendo-series-16: $kendo-series-16,
+    $kendo-series-17: $kendo-series-17,
+    $kendo-series-18: $kendo-series-18,
+    $kendo-series-19: $kendo-series-19,
+    $kendo-series-20: $kendo-series-20,
+    $kendo-series-21: $kendo-series-21,
+    $kendo-series-22: $kendo-series-22,
+    $kendo-series-23: $kendo-series-23,
+    $kendo-series-24: $kendo-series-24,
+    $kendo-series-25: $kendo-series-25,
+    $kendo-series-26: $kendo-series-26,
+    $kendo-series-27: $kendo-series-27,
+    $kendo-series-28: $kendo-series-28,
+    $kendo-series-29: $kendo-series-29,
+    $kendo-series-30: $kendo-series-30,
+    $kendo-chart-border-width: $kendo-chart-border-width,
+    $kendo-chart-font-family: $kendo-chart-font-family,
+    $kendo-chart-font-size: $kendo-chart-font-size,
+    $kendo-chart-line-height: $kendo-chart-line-height,
+    $kendo-chart-tooltip-font-size: $kendo-chart-tooltip-font-size,
+    $kendo-chart-label-font-size: $kendo-chart-label-font-size,
+    $kendo-chart-title-font-size: $kendo-chart-title-font-size,
+    $kendo-chart-pane-title-font-size: $kendo-chart-pane-title-font-size,
+    $kendo-chart-pane-title-font-weight: $kendo-chart-pane-title-font-weight,
+    $kendo-chart-major-lines: $kendo-chart-major-lines,
+    $kendo-chart-minor-lines: $kendo-chart-minor-lines,
+    $kendo-chart-inactive: $kendo-chart-inactive-bg,
+    $kendo-chart-area-opacity: $kendo-chart-area-opacity,
+    $kendo-chart-area-inactive-opacity: $kendo-chart-area-inactive-opacity,
+    $kendo-chart-line-inactive-opacity: $kendo-chart-line-inactive-opacity,
+    $kendo-chart-tooltip-transition: $kendo-chart-tooltip-transition,
+    $kendo-chart-bg: $kendo-chart-bg,
+    $kendo-chart-text: $kendo-chart-text,
+    $kendo-chart-border: $kendo-chart-border,
+    $kendo-chart-crosshair-background: $kendo-chart-crosshair-background,
+    $kendo-chart-crosshair-shared-tooltip-color: $kendo-chart-crosshair-shared-tooltip-color,
+    $kendo-chart-crosshair-shared-tooltip-background: $kendo-chart-crosshair-shared-tooltip-background,
+    $kendo-chart-crosshair-shared-tooltip-border: $kendo-chart-crosshair-shared-tooltip-border,
+    $kendo-chart-notes-background: $kendo-chart-notes-background,
+    $kendo-chart-notes-border: $kendo-chart-notes-border,
+    $kendo-chart-notes-lines: $kendo-chart-notes-lines,
+    $kendo-chart-error-bars-background: $kendo-chart-error-bars-background,
+    $kendo-chart-selection-handle-size: $kendo-chart-selection-handle-size,
+    $kendo-chart-selection-border-color: $kendo-chart-selection-border-color,
+    $kendo-chart-computed-title-height: $kendo-chart-computed-title-height,
+    $kendo-treemap-font-family: $kendo-treemap-font-family,
+    $kendo-treemap-font-size: $kendo-treemap-font-size,
+    $kendo-treemap-line-height: $kendo-treemap-line-height,
+    $kendo-treemap-padding-x: $kendo-treemap-padding-x,
+    $kendo-treemap-padding-y: $kendo-treemap-padding-y,
+    $kendo-chart-overlay-bg: $kendo-chart-overlay-bg,
+    $kendo-chart-no-data-font-size: $kendo-chart-no-data-font-size,
+    $kendo-chart-no-data-font-weight: $kendo-chart-no-data-font-weight,
+    $kendo-chart-no-data-padding-y: $kendo-chart-no-data-padding-y,
+    $kendo-treemap-text: $kendo-treemap-text,
+    $kendo-treemap-bg: $kendo-treemap-bg,
+    $kendo-treemap-border: $kendo-treemap-border,
+    $kendo-treemap-title-text: $kendo-treemap-title-text,
+    $kendo-treemap-title-bg: $kendo-treemap-title-bg,
+    $kendo-treemap-title-border: $kendo-treemap-title-border,
+    $kendo-gauge-pointer-bg: $kendo-gauge-pointer-bg,
+    $kendo-gauge-track-bg: $kendo-gauge-track-bg
+);

package/scss/daterangepicker/_layout.scss

@@ -1,40 +1,5 @@
-@use "sass:map";
-@use "../core/_index.scss" as *;
-@use "../input/_variables.scss" as *;
-@use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/daterangepicker/_layout.scss" as *;
 
 @mixin kendo-date-range-picker--layout() {
-
-    // Daterange picker
-    .k-daterange-picker {
-        width: var( --kendo-daterange-picker-width, #{$kendo-daterange-picker-width} );
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: flex-end;
-        gap: k-spacing(2);
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-        .k-dateinput {
-            width: var( --kendo-daterange-picker-input-width, #{$kendo-daterange-picker-input-width} );
-        }
-    }
-
-    // React specific
-    .k-daterangepicker-wrap {
-        display: inherit;
-        flex-flow: inherit;
-        align-items: inherit;
-        gap: inherit;
-    }
-
-
-    // Alias
-    .k-daterangepicker {
-        @extend .k-daterange-picker !optional;
-    }
+    @include kendo-date-range-picker--layout-base();
 }

package/scss/daterangepicker/_theme.scss

@@ -1,4 +1,5 @@
 @use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
 @use "../input/_variables.scss" as *;
 
 @mixin kendo-date-range-picker--theme() {
@@ -8,20 +9,28 @@
         &:disabled,
         &[disabled],
         &.k-disabled {
-            @include disabled(
-                $color: var( --kendo-daterange-picker-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ),
-                $bg: var( --kendo-daterange-picker-disabled-bg, transparent ),
-                $border: var( --kendo-daterange-picker-disabled-border, currentColor )
+                @include disabled(
+                    $color: $kendo-daterange-picker-disabled-text,
+                    $bg: $kendo-daterange-picker-disabled-bg,
+                    $border: $kendo-daterange-picker-disabled-border
             );
 
             .k-input {
                 @include fill(
-                    $color: var( --kendo-input-disabled-text, inherit ),
-                    $bg: var( --kendo-input-disabled-bg, transparent ),
-                    $border: var( --kendo-input-disabled-border, currentColor )
+                    $color: $kendo-input-disabled-text,
+                    $bg: $kendo-input-disabled-bg,
+                    $border: $kendo-input-disabled-border
                 )
             }
 
+            .k-input-outline {
+                border-color: $kendo-input-outline-disabled-border;
+            }
+
+            .k-input-flat {
+                border-color: $kendo-input-flat-disabled-border;
+            }
+
         }
 
     }

package/scss/daterangepicker/_variables.scss

@@ -1,5 +1,14 @@
+@use "../core/_index.scss" as *;
 @use "../input/_variables.scss" as *;
 
 // Daterangepicker
 $kendo-daterange-picker-width: var( --kendo-input-width, #{$kendo-input-width} ) !default;
 $kendo-daterange-picker-input-width: 10em !default;
+
+$kendo-daterange-picker-disabled-text: var( --kendo-daterange-picker-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
+$kendo-daterange-picker-disabled-bg: var( --kendo-daterange-picker-disabled-bg, transparent ) !default;
+$kendo-daterange-picker-disabled-border: var( --kendo-daterange-picker-disabled-border, currentColor ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/daterangepicker/_variables.scss" with (
+    $kendo-daterange-picker-input-width: $kendo-daterange-picker-input-width
+);

package/scss/datetimepicker/_layout.scss

@@ -1,56 +1,18 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 @use "../action-buttons/_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/datetimepicker/_layout.scss" as *;
 
 @mixin kendo-date-time-picker--layout() {
+    @include kendo-date-time-picker--layout-base();
 
-    // Datetime container
-    .k-datetime-container {}
-
-    // Datetime selector
-    .k-datetime-selector {
-        display: flex;
-        transition: transform .2s;
-    }
-
-    // Wrap
     .k-datetime-wrap {
-        width: var( --kendo-datetime-width, #{$kendo-datetime-width} );
-        overflow: hidden;
-
         .k-datetime-buttongroup {
-            padding-inline: var( --kendo-datetime-button-group-padding-x, #{$kendo-actions-padding-x} );
-            padding-block: var( --kendo-datetime-button-group-padding-y, #{$kendo-actions-padding-y} ) 0;
-        }
-
-        .k-calendar,
-        .k-timeselector {
-            width: 100%;
-            border-width: 0;
+            padding-block: $kendo-actions-padding-y 0;
         }
     }
 
-    // Inner wrap
-    .k-datetime-calendar-wrap,
-    .k-datetime-time-wrap {
-        text-align: center;
-        flex: 0 0 var( --kendo-datetime-width, #{$kendo-datetime-width} );
-    }
-
     .k-datetime-time-wrap .k-time-header {
         flex-direction: column;
     }
-
-    // Tabs
-    .k-date-tab .k-datetime-selector {
-        transform: translateX(0);
-    }
-    .k-time-tab .k-datetime-selector {
-        transform: translateX(-100%);
-    }
-
-    :is(.k-rtl, [dir="rtl"]) .k-time-tab .k-datetime-selector,
-    .k-time-tab .k-datetime-selector:is(.k-rtl, [dir="rtl"]) {
-        transform: translateX(100%);
-    }
 }

package/scss/datetimepicker/_theme.scss

@@ -1,4 +1,5 @@
-@mixin kendo-date-time-picker--theme() {
+@use "@progress/kendo-theme-core/scss/components/datetimepicker/_theme.scss" as *;
 
-    .k-datetimepicker {}
+@mixin kendo-date-time-picker--theme() {
+    @include kendo-date-time-picker--theme-base();
 }

package/scss/datetimepicker/_variables.scss

@@ -1,3 +1,7 @@
 @use "../calendar/_variables.scss" as *;
 
-$kendo-datetime-width: calc( #{$kendo-calendar-header-min-width} + calc( #{$kendo-infinite-calendar-view-padding-x} * 2 ) ) !default;
+$kendo-datetime-width: var( --kendo-datetime-width, calc( #{$kendo-calendar-header-min-width} + calc( #{$kendo-infinite-calendar-view-padding-x} * 2 ) ) ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/datetimepicker/_variables.scss" with (
+    $kendo-datetime-width: $kendo-datetime-width
+);

package/scss/dialog/_layout.scss

@@ -2,71 +2,26 @@
 @use "../core/_index.scss" as *;
 @use "../window/_variables.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/dialog/_layout.scss" as *;
 
 @mixin kendo-dialog--layout() {
 
-    .k-dialog-wrapper {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        outline: 0;
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 10001;
-
-        .k-dialog {
-            position: relative;
-        }
-    }
+    @include kendo-dialog--layout-base();
 
     .k-dialog {
-        padding: 0;
-        border-width: var( --kendo-dialog-border-width, #{$kendo-dialog-border-width} ) 0 0;
-        position: fixed;
-        box-sizing: border-box;
-
-        // Centered
-        &.k-dialog-centered {
-            transform: translate(-50%, -50%);
-            top: 50%;
-            left: 50%;
-        }
-
-        .k-multiselect {
-            width: 100%;
-        }
+        border-width: $kendo-dialog-border-width 0 0;
     }
 
     // Title bar
     .k-dialog-titlebar {
-        border-width: var( --kendo-dialog-titlebar-border-width, #{$kendo-dialog-titlebar-border-width} ) 0 0;
-        padding-inline: var( --kendo-dialog-titlebar-padding-x, #{$kendo-dialog-titlebar-padding-x} );
-        padding-block: var( --kendo-dialog-titlebar-padding-y, #{$kendo-dialog-titlebar-padding-y} );
+        border-width: $kendo-dialog-titlebar-border-width 0 0;
+        padding-inline: $kendo-dialog-titlebar-padding-x;
+        padding-block: $kendo-dialog-titlebar-padding-y;
     }
 
     .k-dialog-content {
-        padding-inline: var( --kendo-dialog-inner-padding-x, #{$kendo-dialog-inner-padding-x} );
-        padding-block: var( --kendo-dialog-inner-padding-y, #{$kendo-dialog-inner-padding-y} );
-    }
-
-    // Buttons
-    .k-dialog-actions {
-        @include border-bottom-radius( var( --kendo-window-border-radius, #{$kendo-window-border-radius} ) );
-        padding-inline: var( --kendo-dialog-buttongroup-padding-x, #{$kendo-dialog-buttongroup-padding-x} );
-        padding-block: var( --kendo-dialog-buttongroup-padding-y, #{$kendo-dialog-buttongroup-padding-y} );
-        border-width: var( --kendo-dialog-buttongroup-border-width, #{$kendo-dialog-buttongroup-border-width} ) 0 0;
-        border-style: solid;
-        border-color: inherit;
-        flex: 0 0 auto;
-        display: flex;
-        flex-flow: row wrap;
-        align-items: center;
-        gap: var( --kendo-dialog-buttongroup-spacing, #{$kendo-dialog-buttongroup-spacing} );
-        overflow: hidden;
+        padding-inline: $kendo-dialog-inner-padding-x;
+        padding-block: $kendo-dialog-inner-padding-y;
     }
 
     .k-dialog-content + .k-dialog-actions {

package/scss/dialog/_theme.scss

@@ -1,42 +1,22 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/dialog/_theme.scss" as *;
 
 @mixin kendo-dialog--theme() {
 
+    @include kendo-dialog--theme-base();
+
     .k-dialog {
-        background-color: var( --kendo-dialog-bg, #{$kendo-dialog-bg} );
-        @include box-shadow( var( --kendo-dialog-shadow, #{$kendo-dialog-shadow} ) );
+        @include box-shadow( $kendo-dialog-shadow );
     }
 
     // Title
     .k-dialog-titlebar {
-        @include fill(
-            $bg: var( --kendo-dialog-titlebar-bg, #{$kendo-dialog-titlebar-bg} ),
-            $border: var( --kendo-dialog-titlebar-border, #{$kendo-dialog-titlebar-border} ),
-        );
-
         @include box-shadow(none);
     }
 
     .k-dialog-title {
-        color: var( --kendo-dialog-titlebar-text, #{$kendo-dialog-titlebar-text} );
-    }
-
-    // dialog theme colors
-    @each $theme-color, $color-props in $kendo-dialog-theme-colors {
-
-        $_text: map.get( $color-props, text );
-        $_bg: map.get( $color-props, bg );
-        $_border: map.get( $color-props, border );
-
-        .k-dialog-#{$theme-color} .k-dialog-titlebar {
-            color: var( --kendo-dialog-titlebar-text, #{$kendo-dialog-titlebar-text} );
-
-            --kendo-dialog-titlebar-text: var( --kendo-dialog-#{$theme-color}-text, #{$_text} );
-            --kendo-dialog-titlebar-bg: var( --kendo-dialog-#{$theme-color}-bg, #{$_bg} );
-            --kendo-dialog-titlebar-border: var( --kendo-dialog-#{$theme-color}-border, #{$_border} );
-        }
+        color: inherit;
     }
-
 }