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

package/scss/dialog/_variables.scss

@@ -3,99 +3,70 @@
 
 /// The width of the border around the Dialog.
 /// @group dialog
-$kendo-dialog-border-width: 0 !default;
+$kendo-dialog-border-width: var( --kendo-dialog-border-width, 0 ) !default;
 
 /// The background color of the Dialog titlebar.
 /// @group dialog
-$kendo-dialog-titlebar-bg: k-color(surface-alt) !default;
+$kendo-dialog-titlebar-bg: var( --kendo-dialog-titlebar-bg, k-color(surface-alt) ) !default;
 /// The text color of the Dialog titlebar.
 /// @group dialog
-$kendo-dialog-titlebar-text: k-color(on-app-surface) !default;
+$kendo-dialog-titlebar-text: var( --kendo-dialog-titlebar-text, k-color(on-app-surface) ) !default;
 /// The border color of the Dialog titlebar.
 /// @group dialog
-$kendo-dialog-titlebar-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-dialog-titlebar-border: var( --kendo-dialog-titlebar-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
 /// The width of the border around the Dialog titlebar.
 /// @group dialog
-$kendo-dialog-titlebar-border-width: 0 !default;
+$kendo-dialog-titlebar-border-width: var( --kendo-dialog-titlebar-border-width, 0 ) !default;
 /// The horizontal padding of the Dialog titlebar.
 /// @group dialog
-$kendo-dialog-titlebar-padding-x: k-spacing(6) !default;
+$kendo-dialog-titlebar-padding-x: var( --kendo-dialog-titlebar-padding-x, k-spacing(6) ) !default;
 /// The vertical padding of the Dialog titlebar.
 /// @group dialog
-$kendo-dialog-titlebar-padding-y: k-spacing(4) !default;
+$kendo-dialog-titlebar-padding-y: var( --kendo-dialog-titlebar-padding-y, k-spacing(4) ) !default;
 
 /// The horizontal padding of the content of the Dialog.
 /// @group dialog
-$kendo-dialog-inner-padding-x: k-spacing(6) !default;
+$kendo-dialog-inner-padding-x: var( --kendo-dialog-inner-padding-x, k-spacing(6) ) !default;
 /// The vertical padding of the content of the Dialog.
 /// @group dialog
-$kendo-dialog-inner-padding-y: k-spacing(3) !default;
+$kendo-dialog-inner-padding-y: var( --kendo-dialog-inner-padding-y, k-spacing(3) ) !default;
 
 /// The horizontal padding of the Dialog action buttons.
 /// @group dialog
-$kendo-dialog-buttongroup-padding-x: k-spacing(6) !default; // $kendo-actions-padding-x
+$kendo-dialog-buttongroup-padding-x: var( --kendo-dialog-buttongroup-padding-x, k-spacing(6) ) !default; // $kendo-actions-padding-x
 /// The vertical padding of the Dialog action buttons.
 /// @group dialog
-$kendo-dialog-buttongroup-padding-y: k-spacing(6) !default; // $kendo-actions-padding-y
+$kendo-dialog-buttongroup-padding-y: var( --kendo-dialog-buttongroup-padding-y, k-spacing(6) ) !default; // $kendo-actions-padding-y
 /// The width of the top border of the Dialog action buttons.
 /// @group dialog
-$kendo-dialog-buttongroup-border-width: 0 !default;
+$kendo-dialog-buttongroup-border-width: var( --kendo-dialog-buttongroup-border-width, 0 ) !default;
 /// The spacing between the Dialog action buttons.
 /// @group dialog
-$kendo-dialog-buttongroup-spacing: k-spacing(3) !default;
-
-/// The spacing between the Dialog action buttons.
-/// @group dialog
-$kendo-dialog-button-spacing: k-spacing(2) !default; // $kendo-actions-padding-y
+$kendo-dialog-button-spacing: var( --kendo-dialog-button-spacing, k-spacing(3) ) !default; // $kendo-actions-padding-y
 
 /// The background color of the Dialog.
 /// @group dialog
-$kendo-dialog-bg: k-color(app-surface) !default;
+$kendo-dialog-bg: var( --kendo-dialog-bg, k-color(app-surface) ) !default;
 
 /// The box shadow around the Dialog.
 /// @group dialog
-$kendo-dialog-shadow: var( --kendo-box-shadow-depth-8, none ) !default;
-
-/// The theme variations for the Dialog.
-$kendo-dialog-brand-colors: (
-    primary: primary
- ) !default;
-
-// Matrix with dialog theme colors in the order: bg, color, border
-$_tc-dialog-matrix: (
-    (normal: (color, on-color, color)),
-) !default;
-
-$_tc-dialog-dark-matrix: (
-    (normal: (color, on-color, color)),
-) !default;
-
-$_tc-dialog-light-matrix: (
-    (normal: (color, on-color, color)),
-) !default;
+$kendo-dialog-shadow: var( --kendo-dialog-shadow, var( --kendo-elevation-8, none ) ) !default;
 
 /// The theme colors map for the Dialog.
-$kendo-dialog-theme-colors: () !default;
-
-@each $ui-states in $_tc-dialog-matrix {
-    @each $brand-color, $palette in $kendo-dialog-brand-colors {
-        $kendo-dialog-theme-colors: map.deep-merge(
-            $kendo-dialog-theme-colors,
-            k-generate-theme-variation( $brand-color, $palette, $ui-states )
-        );
-    };
-}
-
-@each $ui-states in $_tc-dialog-dark-matrix {
-    $kendo-dialog-theme-colors: map.deep-merge(
-        $kendo-dialog-theme-colors,
-        k-generate-theme-variation( dark, dark, $ui-states )
-    );
-}
+$kendo-dialog-theme-colors: (
+    "primary": k-color(primary),
+    "light": k-color(light),
+    "dark": k-color(dark)
+) !default;
 
-@each $ui-states in $_tc-dialog-light-matrix {
-    $kendo-dialog-theme-colors: map.deep-merge(
-        $kendo-dialog-theme-colors,
-        k-generate-theme-variation( light, light, $ui-states )
-    );
-}
+@forward "@progress/kendo-theme-core/scss/components/dialog/_variables.scss" with (
+    $kendo-dialog-titlebar-bg: $kendo-dialog-titlebar-bg,
+    $kendo-dialog-titlebar-text: $kendo-dialog-titlebar-text,
+    $kendo-dialog-titlebar-border: $kendo-dialog-titlebar-border,
+    $kendo-dialog-buttongroup-padding-x: $kendo-dialog-buttongroup-padding-x,
+    $kendo-dialog-buttongroup-padding-y: $kendo-dialog-buttongroup-padding-y,
+    $kendo-dialog-buttongroup-border-width: $kendo-dialog-buttongroup-border-width,
+    $kendo-dialog-button-spacing: $kendo-dialog-button-spacing,
+    $kendo-dialog-bg: $kendo-dialog-bg,
+    $kendo-dialog-theme-colors: $kendo-dialog-theme-colors
+);

package/scss/dock-manager/_layout.scss

@@ -1,217 +1,33 @@
 @use "./_variables.scss" as *;
 @use "../core/typography/_index.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/dock-manager/_layout.scss" as *;
 
 @mixin kendo-dock-manager--layout() {
+    @include kendo-dock-manager--layout-base();
 
-    // DockManager
-    .k-dock-manager {
-        width: 100%;
-        height: 100%;
-        border-width: var( --kendo-dock-manager-border-width, #{$kendo-dock-manager-border-width} );
-        border-style: var( --kendo-dock-manager-border-style, #{$kendo-dock-manager-border-style} );
-        position: relative;
-        display: flex;
-        flex-flow: row nowrap;
-        overflow: auto;
-        box-sizing: border-box;
-    }
-
-    // Toolbar
     .k-dock-manager-toolbar {
-        border-width: 0 $kendo-dock-manager-border-width 0 0;
-        border-color: inherit;
-        flex-shrink: 0;
-        writing-mode: vertical-lr;
-
-        &::before {
-            height: 0;
-        }
-
-        .k-separator-horizontal {
-            width:  $kendo-line-height-em;
-            height: 0;
-            border-width: var( --kendo-dock-manager-border-width, #{$kendo-dock-manager-border-width} ) 0 0;
-        }
+        box-shadow: none;
     }
 
-    // Panes
-    .k-dock-manager-pane-container {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-grow: 1;
-        overflow: hidden;
-    }
-
-   // Splitter
-   .k-dock-manager-splitter,
-   .k-dock-manager-unpinned-container {
-        height: 100%;
-        border-width: 0;
-        align-items: stretch;
-
-        > .k-pane {
-            height: auto;
-            flex-direction: column;
-            border-color: inherit;
-        }
-
-        .k-pane-header {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding-block: var( --kendo-dock-manager-pane-header-padding-y, #{$kendo-dock-manager-pane-header-padding-y} );
-            padding-inline: var( --kendo-dock-manager-pane-header-padding-x, #{$kendo-dock-manager-pane-header-padding-x} );
-            border-block-end-width: var( --kendo-dock-manager-pane-header-border-width, #{$kendo-dock-manager-pane-header-border-width} );
-            border-block-end-style: var( --kendo-dock-manager-pane-header-border-style, #{$kendo-dock-manager-pane-header-border-style} );
-            border-color: inherit;
-        }
-
-        .k-pane-title {
-            padding-block: var( --kendo-dock-manager-pane-title-padding-y, #{$kendo-dock-manager-pane-title-padding-y} );
-            padding-inline: var( --kendo-dock-manager-pane-title-padding-x, #{$kendo-dock-manager-pane-title-padding-x} );
-            font-family: var( --kendo-dock-manager-pane-title-font-family, #{$kendo-font-family} );
-            font-size: var( --kendo-dock-manager-pane-title-font-size, #{$kendo-dock-manager-pane-title-font-size} );
-            line-height: var( --kendo-dock-manager-pane-title-line-height, #{$kendo-dock-manager-pane-title-line-height} );
-            font-weight: var( --kendo-dock-manager-pane-title-font-weight, #{$kendo-dock-manager-pane-title-font-weight} );
-            flex: 1 1 auto;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-        }
-
-        .k-pane-scrollable {
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            border-color: inherit;
-        }
-
-        .k-pane-content {
-            height: 100%;
-            padding-block: var( --kendo-dock-manager-pane-content-padding-y, #{$kendo-dock-manager-pane-content-padding-y} );
-            padding-inline: var( --kendo-dock-manager-pane-content-padding-x, #{$kendo-dock-manager-pane-content-padding-x} );
-            overflow: auto;
-            flex: 1;
-        }
-
-        .k-pane-actions {
-            display: flex;
-            flex-flow: row nowrap;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .k-pane-tabbed {
-            padding-block: var( --kendo-dock-manager-tabbed-pane-padding-y, #{$kendo-dock-manager-tabbed-pane-padding-y} );
-            padding-inline: var( --kendo-dock-manager-tabbed-pane-padding-x, #{$kendo-dock-manager-tabbed-pane-padding-x} );
-        }
-
-        .k-splitbar {
-            border-width: 0 1px;
-            border-style: solid;
-            border-color: inherit;
-        }
-        .k-splitbar-vertical {
-            border-width: 1px 0;
-        }
-    }
-
-    // Unpinned pane
+    .k-dock-manager-splitter,
     .k-dock-manager-unpinned-container {
-        width: var( --kendo-dock-manager-unpinned-container-width, #{$kendo-dock-manager-unpinned-container-width} );
-        position: absolute;
-        display: flex;
-        height: 100%;
-        border-color: inherit;
-        z-index: 20;
-
-        .k-pane {
-            display: inline-flex;
-            flex-direction: column;
-            position: relative;
-            flex: 1 1 auto;
-            width: 100%;
-        }
-
-        .k-splitbar {
-            height: 100%;
-            position: relative;
-            flex: none;
+        .k-pane-tabbed {
+            padding-block: $kendo-dock-manager-tabbed-pane-padding-y;
+            padding-inline: $kendo-dock-manager-tabbed-pane-padding-x;
         }
     }
 
-    // Docking preview
     .k-docking-preview {
-        display: flex;
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        top: 0;
-        left: 0;
-        border-width: var( --kendo-dock-manager-dock-preview-border-width, #{$kendo-dock-manager-dock-preview-border-width} );
-        border-style: var( --kendo-dock-manager-dock-preview-border-style, #{$kendo-dock-manager-dock-preview-border-style} );
-        border-radius: var( --kendo-dock-manager-dock-preview-border-radius, #{$kendo-dock-manager-dock-preview-border-radius} );
-    }
-
-    .k-dock-manager-window:has(.k-pane) .k-window-content {
-        padding: 0;
+        z-index: 10;
     }
-
 }
 
 @mixin  kendo-dock-indicator--layout() {
-
-    // DockNavigator
-    .k-dock-navigator-container {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        position: absolute;
-        z-index: 10001;
-        pointer-events: none;
-    }
-
-    .k-dock-navigator {
-        display: grid;
-        grid-template-columns: repeat(3, auto);
-        grid-template-rows: repeat(3, auto);
-        justify-content: center;
-        position: absolute;
-    }
+    @include kendo-dock-navigator--layout();
 
     .k-dock-indicator {
-        padding: var( --kendo-dock-indicator-padding, #{$kendo-dock-indicator-padding} );
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        box-sizing: border-box;
-        position: relative;
-        pointer-events: all;
-        outline-width: var( --kendo-dock-indicator-outline-width, #{$kendo-dock-indicator-outline-width} );
-        outline-style: var( --kendo-dock-indicator-outline-style, #{$kendo-dock-indicator-outline-style} );
-
         &.k-dock-indicator-middle {
             box-shadow: none;
         }
     }
-
-    .k-dock-indicator-top {
-        grid-area: 1 / 2 / auto;
-    }
-    .k-dock-indicator-right {
-        grid-area: 2 / 3 / auto;
-    }
-    .k-dock-indicator-bottom {
-        grid-area: 3 / 2 / auto;
-    }
-    .k-dock-indicator-left {
-        grid-area: 2 / 1 / auto;
-    }
-    .k-dock-indicator-middle {
-        grid-area: 2 / 2 / auto;
-    }
-
 }

package/scss/dock-manager/_theme.scss

@@ -1,47 +1,25 @@
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/dock-manager/_theme.scss" as *;
 
 @mixin kendo-dock-manager--theme() {
-
-      // DockManager
-      .k-dock-manager {
-        border-color: var( --kendo-dock-manager-border, #{$kendo-dock-manager-border} );
-    }
+    @include kendo-dock-manager--theme-base();
 
     .k-dock-manager-splitter .k-pane-header,
     .k-dock-manager-unpinned-container .k-pane-header {
-        background-color: var( --kendo-dock-manager-pane-header-bg, #{$kendo-dock-manager-pane-header-bg} );
-
         > .k-pane-title {
-            color: var( --kendo-dock-manager-pane-header-text, #{$kendo-dock-manager-pane-header-text} );
+            color: $kendo-dock-manager-pane-header-text;
         }
     }
 
     .k-dock-manager-unpinned-container {
-        background-color: var( --kendo-dock-manager-unpinned-container-bg, #{$kendo-dock-manager-unpinned-container-bg} );
-        box-shadow:  $kendo-dock-manager-unpinned-container-shadow;
-    }
-
-    // Docking preview
-    .k-docking-preview {
-        background-color: var( --kendo-dock-manager-dock-preview-bg, #{$kendo-dock-manager-dock-preview-bg} );
-        border-color: var( --kendo-dock-manager-dock-preview-border, #{$kendo-dock-manager-dock-preview-border} );
+        box-shadow: $kendo-dock-manager-unpinned-container-shadow;
     }
-
 }
 
 @mixin kendo-dock-indicator--theme() {
+    @include kendo-dock-navigator--theme();
 
     .k-dock-indicator {
-        background-color: var( --kendo-dock-indicator-bg, #{$kendo-dock-indicator-bg} );
-        color: var( --kendo-dock-indicator-text, #{$kendo-dock-indicator-text} );
-        outline-color: var( --kendo-dock-indicator-outline, #{$kendo-dock-indicator-outline} );
-        box-shadow: var( --kendo-dock-indicator-shadow, #{$kendo-dock-indicator-shadow} );
-
-        &:hover,
-        &.k-hover {
-            background-color: var( --kendo-dock-indicator-hover-bg, #{$kendo-dock-indicator-hover-bg} );
-            color: var( --kendo-dock-indicator-hover-text, #{$kendo-dock-indicator-hover-text} );
-        }
+        box-shadow: $kendo-dock-indicator-shadow;
     }
-
 }

package/scss/dock-manager/_variables.scss

@@ -3,117 +3,155 @@
 
 ///  The width of the border around the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-border-width: 1px !default;
+$kendo-dock-manager-border-width: var( --kendo-dock-manager-border-width, 1px ) !default;
 /// The style of the border around the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-border-style: solid !default;
+$kendo-dock-manager-border-style: var( --kendo-dock-manager-border-style, solid ) !default;
 /// The color of the border around the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-dock-manager-border: var( --kendo-dock-manager-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
 
 /// The vertical padding of the pane header in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-header-padding-y: k-spacing(1) !default;
+$kendo-dock-manager-pane-header-padding-y: var( --kendo-dock-manager-pane-header-padding-y, k-spacing(1) ) !default;
 /// The horizontal padding of the pane header in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-header-padding-x: k-spacing(6) !default;
+$kendo-dock-manager-pane-header-padding-x: var( --kendo-dock-manager-pane-header-padding-x, k-spacing(6) ) !default;
 /// The width of the border around the pane header in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-header-border-width: $kendo-dock-manager-border-width !default;
+$kendo-dock-manager-pane-header-border-width: var( --kendo-dock-manager-pane-header-border-width, $kendo-dock-manager-border-width ) !default;
 ///  The style of the border around the pane header in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-header-border-style: solid !default;
+$kendo-dock-manager-pane-header-border-style: var( --kendo-dock-manager-pane-header-border-style, solid ) !default;
 /// The background color of the pane header in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-header-bg: k-color(surface-alt) !default;
+$kendo-dock-manager-pane-header-bg: var( --kendo-dock-manager-pane-header-bg, k-color(surface-alt) ) !default;
 /// The text color of the pane header in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-header-text: k-color(primary) !default;
+$kendo-dock-manager-pane-header-text: var( --kendo-dock-manager-pane-header-text, k-color(primary) ) !default;
 
 /// The vertical padding of the pane title in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-title-padding-y: null !default;
+$kendo-dock-manager-pane-title-padding-y: var( --kendo-dock-manager-pane-title-padding-y, null ) !default;
 /// The horizontal padding of the pane title in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-title-padding-x: null !default;
+$kendo-dock-manager-pane-title-padding-x: var( --kendo-dock-manager-pane-title-padding-x, null ) !default;
 /// The font family of the pane title in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-title-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-dock-manager-pane-title-font-family: var( --kendo-dock-manager-pane-title-font-family, var( --kendo-font-family, inherit ) ) !default;
 /// The font size of the pane title in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-title-font-size: var( --kendo-font-size-lg, inherit ) !default;
+$kendo-dock-manager-pane-title-font-size: var( --kendo-dock-manager-pane-title-font-size, var( --kendo-font-size-lg, inherit ) ) !default;
 /// The line height of the pane title in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-title-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-dock-manager-pane-title-line-height: var( --kendo-dock-manager-pane-title-line-height, var( --kendo-line-height, normal ) ) !default;
 /// The font weight of the pane title in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-title-font-weight: var( --kendo-font-weight, normal ) !default;
+$kendo-dock-manager-pane-title-font-weight: var( --kendo-dock-manager-pane-title-font-weight, var( --kendo-font-weight, normal ) ) !default;
 
 /// The horizontal padding of the pane content in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-content-padding-x: k-spacing(3) !default;
+$kendo-dock-manager-pane-content-padding-x: var( --kendo-dock-manager-pane-content-padding-x, k-spacing(3) ) !default;
 /// The vertical padding of the pane content in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-pane-content-padding-y: k-spacing(3) !default;
+$kendo-dock-manager-pane-content-padding-y: var( --kendo-dock-manager-pane-content-padding-y, k-spacing(3) ) !default;
 
 /// The horizontal padding of the tabbed pane in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-tabbed-pane-padding-y: null !default;
+$kendo-dock-manager-tabbed-pane-padding-y: var( --kendo-dock-manager-tabbed-pane-padding-y, null ) !default;
 /// The horizontal padding of the tabbed pane in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-tabbed-pane-padding-x: null !default;
+$kendo-dock-manager-tabbed-pane-padding-x: var( --kendo-dock-manager-tabbed-pane-padding-x, null ) !default;
 
 /// The width of the unpinned pane container in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-unpinned-container-width: 300px !default;
+$kendo-dock-manager-unpinned-container-width: var( --kendo-dock-manager-unpinned-container-width, 300px ) !default;
 /// The background-color of the unpinned pane container in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-unpinned-container-bg: k-color(app-surface) !default;
+$kendo-dock-manager-unpinned-container-bg: var( --kendo-dock-manager-unpinned-container-bg, k-color(app-surface) ) !default;
 /// The box shadow of the unpinned pane container in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-unpinned-container-shadow: 25.6px 0px 57.6px 0px rgba(0, 0, 0, 0.22), 4.8px 0px 14.4px 0px rgba(0, 0, 0, 0.18) !default;
+$kendo-dock-manager-unpinned-container-shadow: var( --kendo-dock-manager-unpinned-container-shadow, 25.6px 0px 57.6px 0px rgba(0, 0, 0, 0.22), 4.8px 0px 14.4px 0px rgba(0, 0, 0, 0.18) ) !default;
 
 /// The padding of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-padding: k-spacing(1.5) !default;
+$kendo-dock-indicator-padding: var( --kendo-dock-indicator-padding, k-spacing(1.5) ) !default;
 /// The background color of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-bg: k-color(surface-alt) !default;
+$kendo-dock-indicator-bg: var( --kendo-dock-indicator-bg, k-color(surface-alt) ) !default;
 /// The text color of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-text: k-color(primary) !default;
+$kendo-dock-indicator-text: var( --kendo-dock-indicator-text, k-color(primary) ) !default;
 /// The outline width of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-outline-width: 1px !default;
+$kendo-dock-indicator-outline-width: var( --kendo-dock-indicator-outline-width, 1px ) !default;
 /// The outline style of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-outline-style: solid !default;
+$kendo-dock-indicator-outline-style: var( --kendo-dock-indicator-outline-style, solid ) !default;
 /// The outline color of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-outline: $kendo-dock-indicator-text !default;
+$kendo-dock-indicator-outline: var( --kendo-dock-indicator-outline, $kendo-dock-indicator-text ) !default;
 /// The box shadow of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 3px 5px -1px rgba(0, 0, 0, 0.20) !default;
+$kendo-dock-indicator-shadow: var( --kendo-dock-indicator-shadow, 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 3px 5px -1px rgba(0, 0, 0, 0.20) ) !default;
 
 ///  The background color of the hovered dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-hover-bg: k-color(primary-hover) !default;
+$kendo-dock-indicator-hover-bg: var( --kendo-dock-indicator-hover-bg, k-color(primary-hover) ) !default;
 /// The text color of the hovered dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-hover-text: k-color(app-surface) !default;
+$kendo-dock-indicator-hover-text: var( --kendo-dock-indicator-hover-text, k-color(app-surface) ) !default;
 
 /// The width of the border around the dropping area in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-dock-preview-border-width: 1px !default;
+$kendo-dock-manager-dock-preview-border-width: var( --kendo-dock-manager-dock-preview-border-width, 1px ) !default;
 /// The style of the border around the dropping area in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-dock-preview-border-style: dashed !default;
+$kendo-dock-manager-dock-preview-border-style: var( --kendo-dock-manager-dock-preview-border-style, dashed ) !default;
 /// The border radius of the dropping area in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-dock-preview-border-radius: var( --kendo-border-radius-md, 0) !default;
+$kendo-dock-manager-dock-preview-border-radius: var( --kendo-dock-manager-dock-preview-border-radius, var( --kendo-border-radius-md, 0) ) !default;
 /// The background color of the dropping area in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-dock-preview-bg: color-mix(in srgb, k-color(primary) 20%, transparent) !default;
+$kendo-dock-manager-dock-preview-bg: var( --kendo-dock-manager-dock-preview-bg, color-mix(in srgb, k-color(primary) 20%, transparent) ) !default;
 /// The border color of the dropping area in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-dock-preview-border: k-color(primary) !default;
+$kendo-dock-manager-dock-preview-border: var( --kendo-dock-manager-dock-preview-border, k-color(primary) ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/dock-manager/_variables.scss" with (
+    $kendo-dock-manager-border-width: $kendo-dock-manager-border-width,
+    $kendo-dock-manager-border-style: $kendo-dock-manager-border-style,
+    $kendo-dock-manager-border: $kendo-dock-manager-border,
+    $kendo-dock-manager-pane-header-padding-y: $kendo-dock-manager-pane-header-padding-y,
+    $kendo-dock-manager-pane-header-padding-x: $kendo-dock-manager-pane-header-padding-x,
+    $kendo-dock-manager-pane-header-border-width: $kendo-dock-manager-pane-header-border-width,
+    $kendo-dock-manager-pane-header-border-style: $kendo-dock-manager-pane-header-border-style,
+    $kendo-dock-manager-pane-header-bg: $kendo-dock-manager-pane-header-bg,
+    $kendo-dock-manager-pane-title-padding-y: $kendo-dock-manager-pane-title-padding-y,
+    $kendo-dock-manager-pane-title-padding-x: $kendo-dock-manager-pane-title-padding-x,
+    $kendo-dock-manager-pane-title-font-family: $kendo-dock-manager-pane-title-font-family,
+    $kendo-dock-manager-pane-title-font-size: $kendo-dock-manager-pane-title-font-size,
+    $kendo-dock-manager-pane-title-line-height: $kendo-dock-manager-pane-title-line-height,
+    $kendo-dock-manager-pane-title-font-weight: $kendo-dock-manager-pane-title-font-weight,
+    $kendo-dock-manager-pane-content-padding-x: $kendo-dock-manager-pane-content-padding-x,
+    $kendo-dock-manager-pane-content-padding-y: $kendo-dock-manager-pane-content-padding-y,
+    $kendo-dock-manager-tabbed-pane-padding-y: $kendo-dock-manager-tabbed-pane-padding-y,
+    $kendo-dock-manager-tabbed-pane-padding-x: $kendo-dock-manager-tabbed-pane-padding-x,
+    $kendo-dock-manager-unpinned-container-width: $kendo-dock-manager-unpinned-container-width,
+    $kendo-dock-manager-unpinned-container-bg: $kendo-dock-manager-unpinned-container-bg,
+    $kendo-dock-manager-unpinned-container-shadow: $kendo-dock-manager-unpinned-container-shadow,
+    $kendo-dock-indicator-padding: $kendo-dock-indicator-padding,
+    $kendo-dock-indicator-bg: $kendo-dock-indicator-bg,
+    $kendo-dock-indicator-text: $kendo-dock-indicator-text,
+    $kendo-dock-indicator-outline-width: $kendo-dock-indicator-outline-width,
+    $kendo-dock-indicator-outline-style: $kendo-dock-indicator-outline-style,
+    $kendo-dock-indicator-outline: $kendo-dock-indicator-outline,
+    $kendo-dock-indicator-shadow: $kendo-dock-indicator-shadow,
+    $kendo-dock-indicator-hover-bg: $kendo-dock-indicator-hover-bg,
+    $kendo-dock-indicator-hover-text: $kendo-dock-indicator-hover-text,
+    $kendo-dock-manager-dock-preview-border-width: $kendo-dock-manager-dock-preview-border-width,
+    $kendo-dock-manager-dock-preview-border-style: $kendo-dock-manager-dock-preview-border-style,
+    $kendo-dock-manager-dock-preview-border-radius: $kendo-dock-manager-dock-preview-border-radius,
+    $kendo-dock-manager-dock-preview-bg: $kendo-dock-manager-dock-preview-bg,
+    $kendo-dock-manager-dock-preview-border: $kendo-dock-manager-dock-preview-border
+);