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

package/scss/window/_layout.scss

@@ -1,156 +1,24 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/window/_layout.scss" as *;
 
 @mixin kendo-window--layout() {
+    @include kendo-window--layout-base();
 
-    .k-window {
-        @include border-radius( var( --kendo-window-border-radius, #{$kendo-window-border-radius} ) );
-        padding: 0;
-        border-width: var( --kendo-window-border-width, #{$kendo-window-border-width} );
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: var( --kendo-window-font-family, #{$kendo-window-font-family} );
-        font-size: var( --kendo-window-font-size, #{$kendo-window-font-size} );
-        line-height: var( --kendo-window-line-height, #{$kendo-window-line-height} );
-        display: inline-flex;
-        flex-direction: column;
-        position: absolute;
-        z-index: 10002;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-    }
-
-    .k-window.k-window-maximized {
-        max-width: 100vw;
-        max-height: 100vh;
-        box-shadow: none;
-    }
-
-    // Window sizes
-    @each $size, $kendo-width in $kendo-window-sizes {
-        .k-window-#{$size} { width: $kendo-width; }
-    }
-
-
-    // Title bar
-    .k-window-titlebar {
-        @include border-top-radius( var( --kendo-window-border-radius, #{$kendo-window-border-radius} ) );
-        padding-inline: var( --kendo-window-titlebar-padding-x, #{$kendo-window-titlebar-padding-x} );
-        padding-block: var( --kendo-window-titlebar-padding-y, #{$kendo-window-titlebar-padding-y} );
-        white-space: nowrap;
-        display: flex;
-        flex-direction: row;
-        flex-shrink: 0;
-        align-items: center;
+    .k-window-content:first-child,
+    .k-window-content:last-child {
+        padding-block: $kendo-window-inner-padding-y;
+        padding-inline: $kendo-window-inner-padding-x;
     }
 
     // Title bar title text
     .k-window-title {
-        padding-block: .5em;
-        padding-inline: 0;
-        margin-block: -.5em;
-        margin-inline: 0;
-        font-size: var( --kendo-window-title-font-size, #{$kendo-window-title-font-size} );
-        line-height: var( --kendo-window-title-line-height, #{$kendo-window-title-line-height} );
-        font-weight: var( --kendo-window-title-font-weight, #{$kendo-window-title-font-weight} );
-        text-overflow: ellipsis;
-        overflow: hidden;
-        cursor: default;
-        flex: 1;
-
-        &:empty::before {
-            content: "\200b";
-        }
-    }
-
-
-    // Actions
-    .k-window-titlebar-actions {
-        margin-block: -5em;
-        margin-inline: 0;
-        margin-inline-end: calc( #{$kendo-window-titlebar-padding-y} - #{$kendo-window-titlebar-padding-x} );
-        line-height: 1;
-        display: flex;
-        gap: var( --kendo-window-actions-gap, #{$kendo-window-actions-gap} );
-        flex-flow: row nowrap;
-        flex-shrink: 0;
-        align-items: center;
-        vertical-align: top;
-    }
-    .k-window-titlebar-action {
-        flex-shrink: 0;
-        opacity: var( --kendo-window-action-opacity, #{$kendo-window-action-opacity} );
-
-        &:hover,
-        &.k-hover {
-            opacity: var( --kendo-window-action-hover-opacity, #{$kendo-window-action-hover-opacity} );
-        }
-    }
-
-
-    // Content
-    .k-window-content,
-    .k-prompt-container {
-        padding-inline: var( --kendo-window-inner-padding-x, #{$kendo-window-inner-padding-x} );
-        padding-block: var( --kendo-window-inner-padding-y, #{$kendo-window-inner-padding-y} );
-        border-width: 0;
-        border-color: inherit;
-        color: inherit;
-        background: none;
-        outline: 0;
-        overflow: auto;
-        position: relative;
-        flex: 1 1 auto;
-    }
-
-    .k-window-content + .k-prompt-container {
-        margin-block-start: calc( -1 * var( --kendo-window-inner-padding-y, #{$kendo-window-inner-padding-y} ) / 2 );
-    }
-
-    .k-window-iframecontent {
-        padding: 0;
-        overflow: visible;
-
-        .k-content-frame {
-            vertical-align: top;
-            border: 0;
-            width: 100%;
-            height: 100%;
-        }
+        font-weight: $kendo-window-title-font-weight;
     }
 
     // Buttons Layout
     .k-window-actions {
-        @include border-bottom-radius( var( --kendo-window-border-radius, #{$kendo-window-border-radius} ) );
-        padding-inline: var( --kendo-window-buttongroup-padding-x, #{$kendo-window-buttongroup-padding-x} );
-        padding-block: 0 var( --kendo-window-buttongroup-padding-y, #{$kendo-window-buttongroup-padding-y} );
-        border-width: var( --kendo-window-buttongroup-border-width, #{$kendo-window-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-window-buttongroup-spacing, #{$kendo-window-buttongroup-spacing} );
-        overflow: hidden;
-    }
-
-
-    // Prompt
-    .k-prompt-container {
-
-        > .k-textarea {
-            width: 100%;
-        }
-
-    }
-
-    // Resize Handles
-    .k-window {
-        .k-resize-n { top: 0; }
-        .k-resize-e { right: 0; }
-        .k-resize-s { bottom: 0; }
-        .k-resize-w { left: 0; }
+        padding-block-start: 0;
+        gap: $kendo-window-buttongroup-spacing;
     }
 }

package/scss/window/_theme.scss

@@ -1,51 +1,23 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/window/_theme.scss" as *;
 
 @mixin kendo-window--theme() {
-
-    // Window
-    .k-window {
-        @include fill(
-            var( --kendo-window-text, #{$kendo-window-text} ),
-            var( --kendo-window-bg, #{$kendo-window-bg} ),
-            var( --kendo-window-border, #{$kendo-window-border} )
-        );
-        @include box-shadow( var( --kendo-window-shadow, #{$kendo-window-shadow} ) );
-
-        &:focus,
-        &.k-focus {
-            @include box-shadow( var( --kendo-window-focus-shadow, #{$kendo-window-focus-shadow} ) );
-        }
-    }
-
+    @include kendo-window--theme-base();
 
     // Titlebar
     .k-window-titlebar {
-        @include fill(
-            $bg: var( --kendo-window-titlebar-bg, #{$kendo-window-titlebar-bg} ),
-            $border: var( --kendo-window-titlebar-border, #{$kendo-window-titlebar-border} )
-        );
+        color: inherit;
     }
 
     .k-window-title {
-        color: var( --kendo-window-titlebar-text, #{$kendo-window-titlebar-text} ),
+        color: $kendo-window-titlebar-text,
     }
 
-    // Window theme colors
-    @each $theme-color, $color-props in $kendo-window-theme-colors {
-
-        $_text: map.get( $color-props, text );
-        $_bg: map.get( $color-props, bg );
-        $_border: map.get( $color-props, border );
-
-        .k-window-#{$theme-color} .k-window-titlebar {
-            color: var( --kendo-window-titlebar-text, #{$kendo-window-titlebar-text} );
-
-            --kendo-window-titlebar-text: var( --kendo-window-#{$theme-color}-text, #{$_text} );
-            --kendo-window-titlebar-bg: var( --kendo-window-#{$theme-color}-bg, #{$_bg} );
-            --kendo-window-titlebar-border: var( --kendo-window-#{$theme-color}-border, #{$_border} );
+    @each $name, $color in $kendo-window-theme-colors {
+        .k-window-#{$name} .k-window-title {
+            color: k-color(on-#{$name});
         }
     }
-
 }

package/scss/window/_variables.scss

@@ -3,98 +3,98 @@
 
 /// The width of the border around the Window.
 /// @group window
-$kendo-window-border-width: k-spacing(1) 0 0 !default;
+$kendo-window-border-width: var(--kendo-window-border-width, k-spacing(1) 0 0) !default;
 /// The border radius of the Window.
 /// @group window
-$kendo-window-border-radius: k-border-radius(md) !default;
+$kendo-window-border-radius: var(--kendo-window-border-radius, k-border-radius(md)) !default;
 /// The font family of the Window.
 /// @group window
-$kendo-window-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-window-font-family: var( --kendo-window-font-family, var( --kendo-font-family, inherit ) ) !default;
 /// The font size of the Window.
 /// @group window
-$kendo-window-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-window-font-size: var( --kendo-window-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// The line height of the Window.
 /// @group window
-$kendo-window-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-window-line-height: var( --kendo-window-line-height, var( --kendo-line-height, normal ) ) !default;
 
 /// The horizontal padding of the Window titlebar.
 /// @group window
-$kendo-window-titlebar-padding-x: k-spacing(6) !default;
+$kendo-window-titlebar-padding-x: var( --kendo-window-titlebar-padding-x, k-spacing(6) ) !default;
 /// The vertical padding of the Window titlebar.
 /// @group window
-$kendo-window-titlebar-padding-y: k-spacing(5) !default;
+$kendo-window-titlebar-padding-y: var( --kendo-window-titlebar-padding-y, k-spacing(5) ) !default;
 /// The width of the border of the Window titlebar.
 /// @group window
-$kendo-window-titlebar-border-width: 0 !default;
+$kendo-window-titlebar-border-width: var( --kendo-window-titlebar-border-width, 0 ) !default;
 /// The style of the border of the Window titlebar.
 /// @group window
 $kendo-window-titlebar-border-style: solid !default;
 
 /// The font size of the title of the Window.
 /// @group window
-$kendo-window-title-font-size: var( --kendo-font-size-xl, inherit ) !default;
+$kendo-window-title-font-size: var( --kendo-window-title-font-size, var( --kendo-font-size-xl, inherit ) ) !default;
 /// The line height of the title of the Window.
 /// @group window
-$kendo-window-title-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-window-title-line-height: var( --kendo-window-title-line-height, var( --kendo-line-height, normal ) ) !default;
 /// The font weight of the title of the Window.
 /// @group window
-$kendo-window-title-font-weight: var( --kendo-font-weight-bold, bold ) !default;
+$kendo-window-title-font-weight: var( --kendo-window-title-font-weight, var( --kendo-font-weight-bold, bold ) ) !default;
 
 /// The spacing between the buttons in the Window titlebar.
 /// @group window
-$kendo-window-actions-gap: k-spacing(0) !default;
-/// OThe opacity of the buttons in the Window titlebar.
+$kendo-window-actions-gap: var( --kendo-window-actions-gap, k-spacing(0) ) !default;
+/// The opacity of the buttons in the Window titlebar.
 /// @group window
-$kendo-window-action-opacity: 1 !default;
+$kendo-window-action-opacity: var( --kendo-window-action-opacity, 1 ) !default;
 /// The opacity of the hovered buttons in the Window titlebar.
 /// @group window
-$kendo-window-action-hover-opacity: 1 !default;
+$kendo-window-action-hover-opacity: var( --kendo-window-action-hover-opacity, 1 ) !default;
 
 /// The horizontal padding of the content of the Window.
 /// @group window
-$kendo-window-inner-padding-x: k-spacing(6) !default;
+$kendo-window-inner-padding-x: var( --kendo-window-inner-padding-x, k-spacing(6) ) !default;
 /// The vertical padding of the content of the Window.
 /// @group window
-$kendo-window-inner-padding-y: k-spacing(3) !default;
+$kendo-window-inner-padding-y: var( --kendo-window-inner-padding-y, k-spacing(3) ) !default;
 
 /// The horizontal padding of the Window action buttons.
 /// @group window
-$kendo-window-buttongroup-padding-x: k-spacing(6) !default; // $kendo-actions-padding-x
+$kendo-window-buttongroup-padding-x: var( --kendo-window-buttongroup-padding-x, k-spacing(6) ) !default; // $kendo-actions-padding-x
 /// The vertical padding of the Window action buttons.
 /// @group window
-$kendo-window-buttongroup-padding-y: k-spacing(6) !default; // $kendo-actions-padding-y
+$kendo-window-buttongroup-padding-y: var( --kendo-window-buttongroup-padding-y, k-spacing(6) ) !default; // $kendo-actions-padding-y
 /// The width of the top border of the Window action buttons.
 /// @group window
-$kendo-window-buttongroup-border-width: 0 !default;
+$kendo-window-buttongroup-border-width: var( --kendo-window-buttongroup-border-width, 0 ) !default;
 /// The spacing between the Window action buttons.
 /// @group window
-$kendo-window-buttongroup-spacing: k-spacing(3) !default;
+$kendo-window-buttongroup-spacing: var( --kendo-window-buttongroup-spacing, k-spacing(3) ) !default;
 
 /// The background color of the Window.
 /// @group window
-$kendo-window-bg: k-color(surface-alt) !default;
+$kendo-window-bg: var( --kendo-window-bg, k-color(surface-alt) ) !default;
 /// The text color of the Window.
 /// @group window
-$kendo-window-text: k-color(on-app-surface) !default;
+$kendo-window-text: var( --kendo-window-text, k-color(on-app-surface) ) !default;
 /// The border color of the Window.
 /// @group window
-$kendo-window-border: k-color(primary) !default;
+$kendo-window-border: var( --kendo-window-border, k-color(primary) ) !default;
 /// The box shadow of the Window.
 /// @group window
-$kendo-window-shadow: var( --kendo-box-shadow-depth-8, none ) !default;
+$kendo-window-shadow: var( --kendo-window-shadow, var( --kendo-elevation-8, none ) ) !default;
 /// The box shadow of the focused Window.
 /// @group window
-$kendo-window-focus-shadow: var( --kendo-box-shadow-depth-9, none ) !default;
+$kendo-window-focus-shadow: var( --kendo-window-focus-shadow, var( --kendo-elevation-9, none ) ) !default;
 
 /// The background color of the Window titlebar.
 /// @group window
-$kendo-window-titlebar-bg: k-color(surface-alt) !default; // $kendo-component-header-bg
+$kendo-window-titlebar-bg: var( --kendo-window-titlebar-bg, k-color(surface-alt) ) !default; // $kendo-component-header-bg
 /// The text color of the Window titlebar.
 /// @group window
-$kendo-window-titlebar-text: k-color(primary) !default; // $kendo-component-header-text
+$kendo-window-titlebar-text: var( --kendo-window-titlebar-text, k-color(primary) ) !default; // $kendo-component-header-text
 /// The border color of the Window titlebar.
 /// @group window
-$kendo-window-titlebar-border: k-color(primary) !default;
+$kendo-window-titlebar-border: var( --kendo-window-titlebar-border, k-color(primary) ) !default;
 
 /// The map of the width of the different Window sizes.
 /// @group window
@@ -104,48 +104,43 @@ $kendo-window-sizes: (
     lg: 1200px
 ) !default;
 
-/// The theme variations for the Window.
-/// @group window
-$kendo-window-brand-colors: (
-    primary: primary
- ) !default;
-
-// Matrix with window theme colors in the order: bg, color, border
-$_tc-window-matrix: (
-    (normal: (color, on-color, color)),
-) !default;
-
-$_tc-window-dark-matrix: (
-    (normal: (color, on-color, color)),
-) !default;
-
-$_tc-window-light-matrix: (
-    (normal: (color, on-color, color)),
-) !default;
-
 /// The theme colors map for the Window.
 /// @group window
-$kendo-window-theme-colors: () !default;
-
-@each $ui-states in $_tc-window-matrix {
-    @each $brand-color, $palette in $kendo-window-brand-colors {
-        $kendo-window-theme-colors: map.deep-merge(
-            $kendo-window-theme-colors,
-            k-generate-theme-variation( $brand-color, $palette, $ui-states )
-        );
-    };
-}
+$kendo-window-theme-colors: (
+    "primary": k-color(primary),
+    "light": k-color(light),
+    "dark": k-color(dark)
+) !default;
 
-@each $ui-states in $_tc-window-dark-matrix {
-    $kendo-window-theme-colors: map.deep-merge(
-        $kendo-window-theme-colors,
-        k-generate-theme-variation( dark, dark, $ui-states )
-    );
-}
+@forward "@progress/kendo-theme-core/scss/components/window/_variables.scss" with (
+    $kendo-window-border-width: $kendo-window-border-width,
+    $kendo-window-border-radius: $kendo-window-border-radius,
+    $kendo-window-font-family: $kendo-window-font-family,
+    $kendo-window-font-size: $kendo-window-font-size,
+    $kendo-window-line-height: $kendo-window-line-height,
+    $kendo-window-titlebar-padding-x: $kendo-window-titlebar-padding-x,
+    $kendo-window-titlebar-padding-y: $kendo-window-titlebar-padding-y,
+    $kendo-window-titlebar-border-width: $kendo-window-titlebar-border-width,
+    $kendo-window-titlebar-border-style: $kendo-window-titlebar-border-style,
+    $kendo-window-title-font-size: $kendo-window-title-font-size,
+    $kendo-window-title-line-height: $kendo-window-title-line-height,
+    $kendo-window-actions-gap: $kendo-window-actions-gap,
+    $kendo-window-action-opacity: $kendo-window-action-opacity,
+    $kendo-window-action-hover-opacity: $kendo-window-action-hover-opacity,
+    $kendo-window-inner-padding-x: $kendo-window-inner-padding-x,
+    $kendo-window-inner-padding-y: $kendo-window-inner-padding-y,
+    $kendo-window-buttongroup-padding-x: $kendo-window-buttongroup-padding-x,
+    $kendo-window-buttongroup-padding-y: $kendo-window-buttongroup-padding-y,
+    $kendo-window-buttongroup-border-width: $kendo-window-buttongroup-border-width,
+    $kendo-window-bg: $kendo-window-bg,
+    $kendo-window-text: $kendo-window-text,
+    $kendo-window-border: $kendo-window-border,
+    $kendo-window-shadow: $kendo-window-shadow,
+    $kendo-window-focus-shadow: $kendo-window-focus-shadow,
+    $kendo-window-titlebar-bg: $kendo-window-titlebar-bg,
+    $kendo-window-titlebar-text: $kendo-window-titlebar-text,
+    $kendo-window-titlebar-border: $kendo-window-titlebar-border,
+    $kendo-window-sizes: $kendo-window-sizes,
+    $kendo-window-theme-colors: $kendo-window-theme-colors
+);
 
-@each $ui-states in $_tc-window-light-matrix {
-    $kendo-window-theme-colors: map.deep-merge(
-        $kendo-window-theme-colors,
-        k-generate-theme-variation( light, light, $ui-states )
-    );
-}

package/scss/wizard/_layout.scss

@@ -1,128 +1,41 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/wizard/_layout.scss" as *;
 
 @mixin kendo-wizard--layout() {
+    @include kendo-wizard--layout-base();
 
     .k-wizard {
-        padding-inline: var( --kendo-wizard-padding-x, #{$kendo-wizard-padding-x} );
-        padding-block: var( --kendo-wizard-padding-y, #{$kendo-wizard-padding-y} );
-        border-width: var( --kendo-wizard-border-width, #{$kendo-wizard-border-width} );
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-size: var( --kendo-wizard-font-size, #{$kendo-wizard-font-size} );
-        line-height: var( --kendo-wizard-line-height, #{$kendo-wizard-line-height} );
-        font-family: var( --kendo-wizard-font-family, #{$kendo-wizard-font-family} );
-        position: relative;
-        color: inherit;
-        background: none;
-        display: flex;
-        align-items: stretch;
-        overflow: hidden;
-
-        .k-wizard-steps {
-            box-sizing: border-box;
-            display: flex;
-            overflow: hidden;
-        }
-
         .k-wizard-step {
-            box-sizing: border-box;
-            padding-inline: var( --kendo-wizard-content-padding-x, #{$kendo-wizard-content-padding-x} );
-            padding-block: var( --kendo-wizard-content-padding-y, #{$kendo-wizard-content-padding-y} );
-            width: 100%;
-            display: flex;
-            flex-direction: column;
-            align-items: stretch;
-            justify-content: space-between;
+            padding-inline: $kendo-wizard-content-padding-x;
+            padding-block: $kendo-wizard-content-padding-y;
 
             &:focus,
             &.k-focus {
-                outline-width: 1px;
                 outline-style: solid;
-                outline-offset: -1px;
             }
         }
 
         .k-wizard-content {
-            padding-inline: var( --kendo-wizard-content-padding-x, #{$kendo-wizard-content-padding-x} );
-            padding-block: var( --kendo-wizard-content-padding-y, #{$kendo-wizard-content-padding-y} );
-            box-sizing: border-box;
-            overflow-y: auto;
+            padding-inline: $kendo-wizard-content-padding-x;
+            padding-block: $kendo-wizard-content-padding-y;
         }
 
         .k-wizard-buttons {
-            margin-block-start: var( --kendo-wizard-buttons-margin-y, #{$kendo-wizard-buttons-margin-y} );
-            box-sizing: border-box;
-            display: flex;
-            flex-wrap: nowrap;
-            align-items: center;
-            justify-content: space-between;
-            flex-shrink: 0;
-
-            .k-button {
-                margin-inline-end: var( --kendo-wizard-buttons-margin-x, #{$kendo-wizard-buttons-margin-x} );
-            }
-
-            .k-wizard-pager {
-                vertical-align: middle;
-            }
-        }
-
-        .k-wizard-buttons-right {
-            .k-button:last-of-type {
-                margin-inline-end: 0;
-            }
-        }
-
-        .k-stepper {
-            .k-step-list-vertical {
-                .k-step {
-                    flex: 1 0 auto;
-                }
-            }
-
-            .k-step-indicator {
-                flex-shrink: 0;
-            }
-        }
-    }
-
-    .k-wizard-horizontal {
-        flex-direction: column;
-
-        .k-wizard-steps {
-            margin-block-start: var( --kendo-wizard-content-padding-y, #{$kendo-wizard-content-padding-y} );
-        }
-
-        .k-wizard-steps,
-        .k-wizard-content {
-            flex: 1 1 auto;
+            margin-block-start: $kendo-wizard-buttons-margin-y;
         }
     }
 
     .k-wizard-vertical {
-
         .k-wizard-steps {
-            flex: 1 0 0%;
-        }
-
-        .k-wizard-content {
-            flex: 1 1 0%;
-        }
-
-        .k-wizard-steps {
-            margin-inline-start: var( --kendo-wizard-steps-padding-x, #{$kendo-wizard-steps-padding-x} );
+            margin-inline-start: $kendo-wizard-steps-padding-x;
         }
     }
 
     .k-wizard-left {
-        flex-direction: row-reverse;
-
         .k-wizard-steps {
             margin-inline-end: var( --kendo-wizard-content-padding-x, #{$kendo-wizard-content-padding-x} );
             margin-inline-start: 0;
         }
     }
-
 }

package/scss/wizard/_theme.scss

@@ -1,20 +1,17 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/wizard/_theme.scss" as *;
 
 @mixin kendo-wizard--theme() {
+    @include kendo-wizard--theme-base();
 
     .k-wizard-step {
         .k-wizard-content {
             @include fill(
-                var( --kendo-wizard-content-text, #{$kendo-wizard-content-text} ),
-                var( --kendo-wizard-content-bg, #{$kendo-wizard-content-bg} )
+                $kendo-wizard-content-text,
+                $kendo-wizard-content-bg
             );
         }
-
-        &:focus,
-        &.k-focus {
-            outline-color: var( --kendo-wizard-step-focus-border, #{$kendo-wizard-step-focus-border} );
-        }
     }
 
 }

package/scss/wizard/_variables.scss

@@ -3,13 +3,13 @@
 
 /// The border width of the Wizard.
 /// @group wizard
-$kendo-wizard-border-width: 0px !default;
+$kendo-wizard-border-width: var( --kendo-wizard-border-width, 0px ) !default;
 /// The horizontal padding of the Wizard.
 /// @group wizard
-$kendo-wizard-padding-x: k-spacing(6) !default;
+$kendo-wizard-padding-x: var( --kendo-wizard-padding-x, k-spacing(6) ) !default;
 /// The vertical padding of the Wizard.
 /// @group wizard
-$kendo-wizard-padding-y: k-spacing(6) !default;
+$kendo-wizard-padding-y: var( --kendo-wizard-padding-y, k-spacing(6) ) !default;
 /// The font size of the Wizard.
 /// @group wizard
 $kendo-wizard-font-size: var( --kendo-font-size, inherit ) !default;
@@ -23,28 +23,41 @@ $kendo-wizard-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// The horizontal padding of the Wizard steps.
 /// @group wizard
-$kendo-wizard-steps-padding-x: k-spacing(3) !default;
+$kendo-wizard-steps-padding-x: var( --kendo-wizard-steps-padding-x, k-spacing(3) ) !default;
 
 /// The horizontal padding of the Wizard content.
 /// @group wizard
-$kendo-wizard-content-padding-x: k-spacing(0) !default;
+$kendo-wizard-content-padding-x: var( --kendo-wizard-content-padding-x, k-spacing(0) ) !default;
 /// The vertical padding of the Wizard content.
 /// @group wizard
-$kendo-wizard-content-padding-y: k-spacing(0) !default;
+$kendo-wizard-content-padding-y: var( --kendo-wizard-content-padding-y, k-spacing(0) ) !default;
 /// The text color of the Wizard content.
 /// @group wizard
-$kendo-wizard-content-text: k-color(on-app-surface) !default;
+$kendo-wizard-content-text: var( --kendo-wizard-content-text, k-color(on-app-surface) ) !default;
 /// The background color of the Wizard content.
 /// @group wizard
-$kendo-wizard-content-bg: k-color(surface-alt) !default;
+$kendo-wizard-content-bg: var( --kendo-wizard-content-bg, k-color(surface-alt) ) !default;
 
 /// The horizontal margin of the Wizard's Button container.
 /// @group wizard
-$kendo-wizard-buttons-margin-x: k-spacing(7) !default;
+$kendo-wizard-buttons-margin-x: var( --kendo-wizard-buttons-margin-x, k-spacing(7) ) !default;
 /// The vertical margin of the Wizard Button container.
 /// @group wizard
-$kendo-wizard-buttons-margin-y: k-spacing(6) !default;
+$kendo-wizard-buttons-margin-y: var( --kendo-wizard-buttons-margin-y, k-spacing(6) ) !default;
 
 /// The outline of the focused Wizard step.
 /// @group wizard
-$kendo-wizard-step-focus-border: k-color(base-emphasis) !default;
+$kendo-wizard-step-focus-border: var( --kendo-wizard-step-focus-border, k-color(base-emphasis) ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/wizard/_variables.scss" with (
+    $kendo-wizard-padding-x: $kendo-wizard-padding-x,
+    $kendo-wizard-padding-y: $kendo-wizard-padding-y,
+    $kendo-wizard-content-padding-x: $kendo-wizard-content-padding-x,
+    $kendo-wizard-content-padding-y: $kendo-wizard-content-padding-y,
+    $kendo-wizard-buttons-margin-x: $kendo-wizard-buttons-margin-x,
+    $kendo-wizard-border-width: $kendo-wizard-border-width,
+    $kendo-wizard-font-size: $kendo-wizard-font-size,
+    $kendo-wizard-line-height: $kendo-wizard-line-height,
+    $kendo-wizard-font-family: $kendo-wizard-font-family,
+    $kendo-wizard-step-focus-border: $kendo-wizard-step-focus-border
+);