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

package/scss/editor/_theme.scss

@@ -1,118 +1,52 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/editor/_theme.scss" as *;
 
 @mixin kendo-editor--theme() {
+    @include kendo-editor--theme-base();
 
     .k-editor {
-        @include fill(
-            var( --kendo-editor-text, #{$kendo-editor-text} ),
-            var( --kendo-editor-bg, #{$kendo-editor-bg} ),
-            var( --kendo-editor-border, #{$kendo-editor-border} )
-        );
+        @include fill( $kendo-editor-text, $kendo-editor-bg, $kendo-editor-border );
     }
 
     kendo-editor {
         &.k-readonly {
             .k-editor-content:focus,
             .k-editor-content.k-focus {
-                outline-color: var( --kendo-editor-content-outline-color, #{$kendo-editor-content-outline-color} );
+                outline-color: $kendo-editor-content-outline-color;
             }
         }
     }
 
-    // Inline Editor
     .k-editor-inline {
-
         .k-table {
             &,
             & td {
-                border-color: var( --kendo-editor-inline-td-border, #{$kendo-editor-inline-td-border} );
+                border-color: $kendo-editor-inline-td-border;
             }
         }
 
         .k-element-resize-handle-wrapper {
-            background-color: var( --kendo-editor-resize-handle-bg, #{$kendo-editor-resize-handle-bg} );
-            border-color: var( --kendo-editor-resize-handle-border, #{$kendo-editor-resize-handle-border} );
-        }
-
-        .k-column-resize-handle-wrapper {
-            .k-column-resize-handle {
-                .k-column-resize-marker {
-                    background-color: #00b0ff;
-                }
-            }
-        }
-
-        .k-row-resize-handle-wrapper {
-            .k-row-resize-marker {
-                background-color: #00b0ff;
-            }
+            background-color: $kendo-editor-resize-handle-bg;
+            border-color: $kendo-editor-resize-handle-border;
         }
 
-        // Hover & Actve state
         &:hover,
         &.k-active {
-            border-color: var( --kendo-editor-inline-hover-border, #{$kendo-editor-inline-hover-border} );
+            border-color: $kendo-editor-inline-hover-border;
         }
     }
 
-    // Resizable images
-    .k-editor-resize-handle {
-       @include fill (
-            $bg: var( --kendo-editor-resize-handle-bg, #{$kendo-editor-resize-handle-bg} ),
-            $border: var( --kendo-editor-resize-handle-border, #{$kendo-editor-resize-handle-border} )
-       );
-    }
-    .ProseMirror-selectednode { // stylelint-disable-line
-        outline-color: var( --kendo-editor-selectednode-outline-color, #{$kendo-editor-selectednode-outline-color} );
-    }
-
-
-    // Insert table
     .k-ct-popup {
         .k-selected {
             @include fill(
-                var( --kendo-editor-ct-popup-text, #{$kendo-editor-ct-popup-text} ),
-                var( --kendo-editor-ct-popup-bg, #{$kendo-editor-ct-popup-bg} ),
-                var( --kendo-editor-ct-popup-border, #{$kendo-editor-ct-popup-border} )
+                $kendo-editor-ct-popup-text,
+                $kendo-editor-ct-popup-bg,
+                $kendo-editor-ct-popup-border
             );
         }
-
         .k-disabled:not(.k-selected) {
-            @include fill (
-                $bg: k-color(base-subtle),
-                $border: transparent
-            );
+            @include fill( $bg: k-color(base-subtle), $border: transparent );
         }
     }
-
-    // Content
-    .k-editor-content {
-
-        // Selection
-        .k-text-selected,
-        &::selection {
-            @include fill (
-                $color: var( --kendo-editor-selected-text, #{$kendo-editor-selected-text} ),
-                $bg: var( --kendo-editor-selected-bg, #{$kendo-editor-selected-bg} )
-            );
-        }
-
-        .k-text-highlighted {
-            @include fill (
-                $bg: var( --kendo-editor-highlighted-bg, #{$kendo-editor-highlighted-bg} )
-            );
-        }
-
-        // Table styles
-        td,
-        th {
-            border-color: #dddddd;
-        }
-
-        .selectedCell::after { // stylelint-disable-line
-            background-color: rgba(200, 200, 255, .4);
-        }
-    }
-
 }

package/scss/editor/_variables.scss

@@ -4,85 +4,104 @@
 
 /// The width of the border around the Еditor.
 /// @group editor
-$kendo-editor-border-width: 1px !default;
+$kendo-editor-border-width: var( --kendo-editor-border-width, 1px ) !default;
 /// The font family of the Еditor.
 /// @group editor
-$kendo-editor-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-editor-font-family: var( --kendo-editor-font-family, var( --kendo-font-family, inherit ) ) !default;
 /// The font size of the Еditor.
 /// @group editor
-$kendo-editor-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-editor-font-size: var( --kendo-editor-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// The line height of the Еditor.
 /// @group editor
-$kendo-editor-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-editor-line-height: var( --kendo-editor-line-height, var( --kendo-line-height, normal ) ) !default;
 /// The text color of the Editor.
 /// @group editor
-$kendo-editor-text: k-color(on-app-surface) !default;
+$kendo-editor-text: var( --kendo-editor-text, #{k-color(on-app-surface)} ) !default;
 /// The background color of the Editor.
 /// @group editor
-$kendo-editor-bg: k-color(surface-alt) !default;
+$kendo-editor-bg: var( --kendo-editor-bg, #{k-color(surface-alt)} ) !default;
 /// The color of the border around Editor.
 /// @group editor
-$kendo-editor-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-editor-border: var( --kendo-editor-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
 /// The text color of the Еditor's placeholder.
 /// @group editor
-$kendo-editor-placeholder-text: var( --kendo-input-placeholder-text, #{$kendo-input-placeholder-text} ) !default;
+$kendo-editor-placeholder-text: var( --kendo-editor-placeholder-text, var( --kendo-input-placeholder-text, #{$kendo-input-placeholder-text} ) ) !default;
 /// The opacity of the Editor's placeholder.
 /// @group editor
-$kendo-editor-placeholder-opacity: var( --kendo-input-placeholder-opacity, #{$kendo-input-placeholder-opacity} ) !default;
+$kendo-editor-placeholder-opacity: var( --kendo-editor-placeholder-opacity, var( --kendo-input-placeholder-opacity, #{$kendo-input-placeholder-opacity} ) ) !default;
 /// The outline color of the Editor's content.
 /// @group editor
-$kendo-editor-content-outline-color: k-color(on-app-surface) !default;
+$kendo-editor-content-outline-color: var( --kendo-editor-content-outline-color, #{k-color(on-app-surface)} ) !default;
 /// The horizontal margin of the Editor's export tool icon.
 /// @group editor
-$kendo-editor-export-tool-icon-margin-x: k-spacing(1) !default;
+$kendo-editor-export-tool-icon-margin-x: var( --kendo-editor-export-tool-icon-margin-x, #{k-spacing(1)} ) !default;
 /// The outline width of the Editor's selected node.
 /// @group editor
-$kendo-editor-selectednode-outline-width: k-spacing(0.5) !default;
+$kendo-editor-selectednode-outline-width: var( --kendo-editor-selectednode-outline-width, #{k-spacing(0.5)} ) !default;
 
 /// The selected text color of the Editor.
 /// @group editor
-$kendo-editor-selected-text: k-color(app-surface) !default;
+$kendo-editor-selected-text: var( --kendo-editor-selected-text, #{k-color(app-surface)} ) !default;
 /// The selected background color of the Editor.
 /// @group editor
-$kendo-editor-selected-bg: k-color(primary) !default;
+$kendo-editor-selected-bg: var( --kendo-editor-selected-bg, #{k-color(primary)} ) !default;
 /// The highlighted background color of the Editor.
 /// @group editor
-$kendo-editor-highlighted-bg: color-mix(in srgb, k-color(primary) 55%, transparent) !default;
+$kendo-editor-highlighted-bg: var( --kendo-editor-highlighted-bg, #{color-mix(in srgb, k-color(primary) 55%, transparent)} ) !default;
 
 /// The size of the Editor's resize handle.
 /// @group editor
-$kendo-editor-resize-handle-size: k-spacing(2) !default;
+$kendo-editor-resize-handle-size: var( --kendo-editor-resize-handle-size, #{k-spacing(2)} ) !default;
 /// The border width of the Editor's resize handle.
 /// @group editor
-$kendo-editor-resize-handle-border-width: 1px !default;
+$kendo-editor-resize-handle-border-width: var( --kendo-editor-resize-handle-border-width, 1px ) !default;
 /// The border color of the Editor's resize handle.
 /// @group editor
-$kendo-editor-resize-handle-border: k-color(on-app-surface) !default;
+$kendo-editor-resize-handle-border: var( --kendo-editor-resize-handle-border, #{k-color(on-app-surface)} ) !default;
 /// The background color of the Editor's resize handle.
 /// @group editor
-$kendo-editor-resize-handle-bg: k-color(app-surface) !default;
+$kendo-editor-resize-handle-bg: var( --kendo-editor-resize-handle-bg, #{k-color(app-surface)} ) !default;
 
 /// The outline color of the Editor's selected node.
 /// @group editor
-$kendo-editor-selectednode-outline-color: k-color(primary) !default;
+$kendo-editor-selectednode-outline-color: var( --kendo-editor-selectednode-outline-color, #{k-color(primary)} ) !default;
 
 /// The border color of the Inline Editor data cell.
 /// @group editor
-$kendo-editor-inline-td-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-editor-inline-td-border: var( --kendo-editor-inline-td-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
 /// The hover border color of the Inline Editor.
 /// @group editor
-$kendo-editor-inline-hover-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-editor-inline-hover-border: var( --kendo-editor-inline-hover-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
 
 // Insert table
 /// The size of the cell in the Insert table popup.
 /// @group editor
-$ct-cell-size: 20px !default;
+$ct-cell-size: var( --ct-cell-size, 20px ) !default;
 /// The text color of the selected cells in the Insert table popup.
 /// @group editor
-$kendo-editor-ct-popup-text: k-color(on-base) !default;
+$kendo-editor-ct-popup-text: var( --kendo-editor-ct-popup-text, #{k-color(on-base)} ) !default;
 /// The background color of the selected cells in the Insert table popup.
 /// @group editor
-$kendo-editor-ct-popup-bg: k-color(base-active) !default;
+$kendo-editor-ct-popup-bg: var( --kendo-editor-ct-popup-bg, #{k-color(base-active)} ) !default;
 /// The border color of the selected cells in the Insert table popup.
 /// @group editor
-$kendo-editor-ct-popup-border: color-mix(in srgb, k-color(border-alt) 76%, transparent) !default;
+$kendo-editor-ct-popup-border: var( --kendo-editor-ct-popup-border, #{color-mix(in srgb, k-color(border-alt) 76%, transparent)} ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/editor/_variables.scss" with (
+    $kendo-editor-border-width: $kendo-editor-border-width,
+    $kendo-editor-font-family: $kendo-editor-font-family,
+    $kendo-editor-font-size: $kendo-editor-font-size,
+    $kendo-editor-line-height: $kendo-editor-line-height,
+    $kendo-editor-placeholder-text: $kendo-editor-placeholder-text,
+    $kendo-editor-placeholder-opacity: $kendo-editor-placeholder-opacity,
+    $kendo-editor-selected-text: $kendo-editor-selected-text,
+    $kendo-editor-selected-bg: $kendo-editor-selected-bg,
+    $kendo-editor-highlighted-bg: $kendo-editor-highlighted-bg,
+    $kendo-editor-export-tool-icon-margin-x: $kendo-editor-export-tool-icon-margin-x,
+    $kendo-editor-resize-handle-size: $kendo-editor-resize-handle-size,
+    $kendo-editor-resize-handle-border-width: $kendo-editor-resize-handle-border-width,
+    $kendo-editor-resize-handle-border: $kendo-editor-resize-handle-border,
+    $kendo-editor-resize-handle-bg: $kendo-editor-resize-handle-bg,
+    $kendo-editor-selectednode-outline-width: $kendo-editor-selectednode-outline-width,
+    $kendo-editor-selectednode-outline-color: $kendo-editor-selectednode-outline-color
+);

package/scss/expansion-panel/_layout.scss

@@ -1,86 +1,51 @@
-@use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/expansion-panel/_layout.scss" as *;
 
 @mixin kendo-expander--layout() {
 
-    // Base
+    @include kendo-expander--layout-base();
+
+    // Expander
     .k-expander {
-        border-width: var( --kendo-expander-border-width, #{$kendo-expander-border-width} );
-        border-style: solid;
-        box-sizing: border-box;
-        font-size: var( --kendo-expander-font-size, #{$kendo-expander-font-size} );
-        font-family: var( --kendo-expander-font-family, #{$kendo-expander-font-family} );
-        line-height: var( --kendo-expander-line-height, #{$kendo-expander-line-height} );
         position: relative;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-        outline: 0;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
 
-        &.k-focus {
+        &.k-focus,
+        &:focus {
             border-width: 0;
         }
-        &.k-focus::after {
+
+        &.k-focus::after,
+        &:focus::after {
             content: "";
             position: absolute;
             border: medium none;
-            inset: var( --kendo-expander-focus-offset, #{$kendo-expander-focus-offset} );
-            outline-width: var( --kendo-expander-focus-outline-width, #{$kendo-expander-focus-outline-width} );
-            outline-style: var( --kendo-expander-focus-outline-style, #{$kendo-expander-focus-outline-style} );
+            inset: $kendo-expander-focus-offset;
+            outline-width: $kendo-expander-focus-outline-width;
+            outline-style: $kendo-expander-focus-outline-style;
             z-index: 1;
             pointer-events: none;
         }
     }
 
-    // Header
-    .k-expander-header {
-        padding-inline: var( --kendo-expander-header-padding-x, #{$kendo-expander-header-padding-x} );
-        padding-block: var( --kendo-expander-header-padding-y, #{$kendo-expander-header-padding-y} );
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        cursor: pointer;
-    }
-
-    // Expander spacer
-    .k-expander-spacer {
-        flex: 1 1 auto;
-    }
-
     // Title
     .k-expander-title {
         font-weight: 400;
-    }
-
-    // Expand / collapse icon
-    .k-expander-indicator {
-        margin-inline-start: var( --kendo-expander-indicator-margin-x, #{$kendo-expander-indicator-margin-x} );
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-
-    // Expander content
-    .k-expander-content {
-        padding-inline: var( --kendo-expander-content-padding-x, #{$kendo-expander-content-padding-x} );
-        padding-block: var( --kendo-expander-content-padding-y, #{$kendo-expander-content-padding-y} );
+        text-transform: initial;
     }
 
     // Multiple expanders
     .k-expander + .k-expander.k-expanded,
     .k-expander.k-expanded + .k-expander {
-        margin-top: var( --kendo-expander-margin-y, #{$kendo-expander-margin-y} );
+        margin-top: $kendo-expander-margin-y;
     }
 
-    .k-expander:not(.k-expanded) + .k-expander:not(.k-expanded) {
-        border-top-width: 0;
+    .k-rtl .k-expander,
+    .k-expander.k-rtl,
+    .k-expander[dir="rtl"] {
+        // Expand / collapse icon
+        .k-expander-indicator {
+            margin-inline-end: $kendo-icon-spacing;
+        }
     }
 }

package/scss/expansion-panel/_theme.scss

@@ -1,31 +1,30 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/expansion-panel/_theme.scss" as *;
 
 @mixin kendo-expander--theme() {
 
-    .k-expander {
-        @include fill(
-            var( --kendo-expander-text, #{$kendo-expander-text} ),
-            var( --kendo-expander-bg, #{$kendo-expander-bg} ),
-            var( --kendo-expander-border, #{$kendo-expander-border} ),
-        );
+    @include kendo-expander--theme-base();
 
+    .k-expander {
         &.k-expanded {
-            background-color: var( --kendo-expander-expanded-bg, #{$kendo-expander-expanded-bg} );
+            background-color: $kendo-expander-expanded-bg;
         }
 
-        &.k-focus{
-            background-color: var( --kendo-expander-focus-bg, #{$kendo-expander-focus-bg} );
+        &.k-focus,
+        &:focus {
+            box-shadow: none;
+            background-color: $kendo-expander-focus-bg;
 
             &::after {
-                outline-color: var( --kendo-expander-focus-outline, #{$kendo-expander-focus-outline} );
+                outline-color: $kendo-expander-focus-outline;
             }
         }
 
         &:disabled,
         &.k-disabled {
             @include fill(
-                $color: var( --kendo-expander-disabled-text, #{$kendo-expander-disabled-text} )
+                $color: $kendo-expander-disabled-text
             );
 
             .k-expander-header,
@@ -33,36 +32,14 @@
             .k-expander-sub-title,
             .k-expander-indicator {
                 @include fill(
-                    $color: var( --kendo-expander-disabled-text, #{$kendo-expander-disabled-text} ),
-                    $bg: var( --kendo-expander-disabled-bg, #{$kendo-expander-disabled-bg} )
+                    $color: $kendo-expander-disabled-text,
+                    $bg: $kendo-expander-disabled-bg
                 );
             }
         }
     }
 
-    .k-expander-header {
-        @include fill(
-            var( --kendo-expander-header-text, #{$kendo-expander-header-text} ),
-            var( --kendo-expander-header-bg, #{$kendo-expander-header-bg} )
-        );
-        outline: none;
-
-        &:hover,
-        &.k-hover {
-            background-color: var( --kendo-expander-header-hover-bg, #{$kendo-expander-header-hover-bg} );
-        }
-    }
-
-    .k-expander-title {
-        color: var( --kendo-expander-title-text, #{$kendo-expander-title-text} );
-    }
-
-    .k-expander-sub-title {
-        color: var( --kendo-expander-header-sub-title-text, #{$kendo-expander-header-sub-title-text} );
-    }
-
     .k-expander-indicator {
-        color: var( --kendo-expander-indicator-text, #{$kendo-expander-indicator-text} );
+        color: $kendo-expander-indicator-text;
     }
-
 }

package/scss/expansion-panel/_variables.scss

@@ -3,97 +3,118 @@
 
 /// The vertical spacing of the ExpansionPanel.
 /// @group expander
-$kendo-expander-margin-y: k-spacing(2) !default;
+$kendo-expander-margin-y: var( --kendo-expander-margin-y, k-spacing(2) ) !default;
 /// The width of the border around the ExpansionPanel.
 /// @group expander
-$kendo-expander-border-width: 1px !default;
+$kendo-expander-border-width: var( --kendo-expander-border-width, 1px ) !default;
 /// The font family of the ExpansionPanel.
 /// @group expander
-$kendo-expander-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-expander-font-family: var( --kendo-expander-font-family, var(--kendo-font-family, inherit) ) !default;
 /// The font size of the ExpansionPanel.
 /// @group expander
-$kendo-expander-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-expander-font-size: var( --kendo-expander-font-size, var(--kendo-font-size, inherit) ) !default;
 /// The hine height of the ExpansionPanel.
 /// @group expander
-$kendo-expander-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-expander-line-height: var( --kendo-expander-line-height, var(--kendo-line-height, normal) ) !default;
 
 /// The text color of the ExpansionPanel.
 /// @group expander
-$kendo-expander-text: k-color(on-app-surface) !default;
+$kendo-expander-text: var( --kendo-expander-text, k-color(on-app-surface) ) !default;
 /// The background color of the ExpansionPanel.
 /// @group expander
-$kendo-expander-bg: k-color(surface) !default;
+$kendo-expander-bg: var( --kendo-expander-bg, k-color(surface) ) !default;
 /// The border color of the ExpansionPanel.
 /// @group expander
-$kendo-expander-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-expander-border: var( --kendo-expander-border, color-mix(in srgb, k-color(border) 16%, transparent) ) !default;
 
 /// The background color of the expanded ExpansionPanel.
 /// @group expander
-$kendo-expander-expanded-bg: k-color(surface-alt) !default;
+$kendo-expander-expanded-bg: var( --kendo-expander-expanded-bg, k-color(surface-alt) ) !default;
 
 /// The text color of the disabled ExpansionPanel.
 /// @group expander
-$kendo-expander-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
+$kendo-expander-disabled-text: var( --kendo-expander-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
 /// The background color of the disabled ExpansionPanel.
 /// @group expander
-$kendo-expander-disabled-bg: k-color(base-subtle) !default;
+$kendo-expander-disabled-bg: var( --kendo-expander-disabled-bg, k-color(base-subtle) ) !default;
 
 /// The offset of the focused ExpansionPanel.
 /// @group expander
-$kendo-expander-focus-offset: 1px !default;
+$kendo-expander-focus-offset: var( --kendo-expander-focus-offset, 1px ) !default;
 /// The outline width of the focused ExpansionPanel.
 /// @group expander
-$kendo-expander-focus-outline-width: 1px !default;
+$kendo-expander-focus-outline-width: var( --kendo-expander-focus-outline-width, 1px ) !default;
 /// The outline style of the focused ExpansionPanel.
 /// @group expander
-$kendo-expander-focus-outline-style: solid !default;
+$kendo-expander-focus-outline-style: var( --kendo-expander-focus-outline-style, solid ) !default;
 /// The outline color of the focused ExpansionPanel.
 /// @group expander
-$kendo-expander-focus-outline: k-color(base-emphasis) !default;
+$kendo-expander-focus-outline: var( --kendo-expander-focus-outline, k-color(base-emphasis) ) !default;
 
 /// The background color of the focused ExpansionPanel.
 /// @group expander
-$kendo-expander-focus-bg: k-color(surface-alt) !default;
+$kendo-expander-focus-bg: var( --kendo-expander-focus-bg, k-color(surface-alt) ) !default;
 /// The box shadow of the focused ExpansionPanel.
 /// @group expander
-$kendo-expander-focus-shadow: inset 0px 0px 0px 2px k-color(base-emphasis) !default;
+$kendo-expander-focus-shadow: var( --kendo-expander-focus-shadow, inset 0px 0px 0px 2px k-color(base-emphasis) ) !default;
 
 /// The horizontal padding of the ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-padding-x: k-spacing(4) !default;
+$kendo-expander-header-padding-x: var( --kendo-expander-header-padding-x, k-spacing(4) ) !default;
 /// The vertical padding of the ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-padding-y: k-spacing(3) !default;
+$kendo-expander-header-padding-y: var( --kendo-expander-header-padding-y, k-spacing(3) ) !default;
 
 /// The text color of the ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-text: k-color(primary) !default;
+$kendo-expander-header-text: var( --kendo-expander-header-text, k-color(primary) ) !default;
 /// The background color of the ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-bg: inherit !default;
+$kendo-expander-header-bg: var( --kendo-expander-header-bg, inherit ) !default;
 
 /// The background color of the hovered ExpansionPanel header.
 /// @group expander
-$kendo-expander-header-hover-bg: k-color(base-hover) !default;
+$kendo-expander-header-hover-bg: var( --kendo-expander-header-hover-bg, k-color(base-hover) ) !default;
 
 /// The text color of the ExpansionPanel title.
 /// @group expander
-$kendo-expander-title-text: k-color(primary) !default;
+$kendo-expander-title-text: var( --kendo-expander-title-text, k-color(primary) ) !default;
 
 /// The text color of the ExpansionPanel sub-title.
 /// @group expander
-$kendo-expander-header-sub-title-text: k-color(subtle) !default;
+$kendo-expander-header-sub-title-text: var( --kendo-expander-header-sub-title-text, k-color(subtle) ) !default;
 
 /// The horizontal margin of the ExpansionPanel indicator.
 /// @group expander
-$kendo-expander-indicator-margin-x: k-spacing(2.5) !default;
+$kendo-expander-indicator-margin-x: var( --kendo-expander-indicator-margin-x, k-spacing(2.5) ) !default;
 /// The text color of the ExpansionPanel indicator.
 /// @group expander
-$kendo-expander-indicator-text: var( --kendo-expander-text, #{$kendo-expander-text} ) !default;
+$kendo-expander-indicator-text: var( --kendo-expander-indicator-text, $kendo-expander-text ) !default;
 
 /// The horizontal padding of the ExpansionPanel content.
 /// @group expander
-$kendo-expander-content-padding-x: k-spacing(4) !default;
+$kendo-expander-content-padding-x: var( --kendo-expander-content-padding-x, k-spacing(4) ) !default;
 /// The vertical padding of the ExpansionPanel content.
 /// @group expander
-$kendo-expander-content-padding-y: k-spacing(4) !default;
+$kendo-expander-content-padding-y: var( --kendo-expander-content-padding-y, k-spacing(4) ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/expansion-panel/_variables.scss" with (
+    $kendo-expander-border-width: $kendo-expander-border-width,
+    $kendo-expander-font-family: $kendo-expander-font-family,
+    $kendo-expander-font-size: $kendo-expander-font-size,
+    $kendo-expander-line-height: $kendo-expander-line-height,
+    $kendo-expander-text: $kendo-expander-text,
+    $kendo-expander-bg: $kendo-expander-bg,
+    $kendo-expander-border: $kendo-expander-border,
+    $kendo-expander-focus-shadow: $kendo-expander-focus-shadow,
+    $kendo-expander-header-padding-x: $kendo-expander-header-padding-x,
+    $kendo-expander-header-padding-y: $kendo-expander-header-padding-y,
+    $kendo-expander-header-text: $kendo-expander-header-text,
+    $kendo-expander-header-bg: $kendo-expander-header-bg,
+    $kendo-expander-header-hover-bg: $kendo-expander-header-hover-bg,
+    $kendo-expander-title-text: $kendo-expander-title-text,
+    $kendo-expander-header-sub-title-text: $kendo-expander-header-sub-title-text,
+    $kendo-expander-indicator-margin-x: $kendo-expander-indicator-margin-x,
+    $kendo-expander-content-padding-x: $kendo-expander-content-padding-x,
+    $kendo-expander-content-padding-y: $kendo-expander-content-padding-y
+);