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

package/scss/pager/_variables.scss

@@ -4,91 +4,91 @@
 
 /// The horizontal padding of the Pager.
 /// @group pager
-$kendo-pager-padding-x: k-spacing(2) !default;
+$kendo-pager-padding-x: var( --kendo-pager-padding-x, #{k-spacing(2)} ) !default;
 /// The horizontal padding of the small Pager.
 /// @group pager
-$kendo-pager-sm-padding-x: k-spacing(1.5) !default;
+$kendo-pager-sm-padding-x: var( --kendo-pager-sm-padding-x, #{k-spacing(1.5)} ) !default;
 /// The horizontal padding of the medium Pager.
 /// @group pager
-$kendo-pager-md-padding-x: k-spacing(2) !default;
+$kendo-pager-md-padding-x: var( --kendo-pager-md-padding-x, #{k-spacing(2)} ) !default;
 /// The horizontal padding of the large Pager.
 /// @group pager
-$kendo-pager-lg-padding-x: k-spacing(2.5) !default;
+$kendo-pager-lg-padding-x: var( --kendo-pager-lg-padding-x, #{k-spacing(2.5)} ) !default;
 
 /// The vertical padding of the small Pager.
 /// @group pager
-$kendo-pager-sm-padding-y: $kendo-pager-sm-padding-x !default;
+$kendo-pager-sm-padding-y: var( --kendo-pager-sm-padding-y, #{$kendo-pager-sm-padding-x} ) !default;
 /// The vertical padding of the medium Pager.
 /// @group pager
-$kendo-pager-md-padding-y: $kendo-pager-md-padding-x !default;
+$kendo-pager-md-padding-y: var( --kendo-pager-md-padding-y, #{$kendo-pager-md-padding-x} ) !default;
 /// The vertical padding of the large Pager.
 /// @group pager
-$kendo-pager-lg-padding-y: $kendo-pager-lg-padding-x !default;
+$kendo-pager-lg-padding-y: var( --kendo-pager-lg-padding-y, #{$kendo-pager-lg-padding-x} ) !default;
 /// The border width of the Pager.
 /// @group pager
-$kendo-pager-border-width: 1px !default;
+$kendo-pager-border-width: var( --kendo-pager-border-width, 1px ) !default;
 
 /// The font family of the Pager.
 /// @group pager
-$kendo-pager-font-family: var( --kendo-font-family, normal ) !default;
+$kendo-pager-font-family: var( --kendo-pager-font-family, var( --kendo-font-family, normal ) ) !default;
 /// The font size of the Pager.
 /// @group pager
-$kendo-pager-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-pager-font-size: var( --kendo-pager-font-size, var( --kendo-font-size, inherit ) ) !default;
 /// The line height of the Pager.
 /// @group pager
-$kendo-pager-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-pager-line-height: var( --kendo-pager-line-height, var( --kendo-line-height, normal ) ) !default;
 
 /// The background color of the Pager.
 /// @group pager
-$kendo-pager-bg: k-color(surface) !default;
+$kendo-pager-bg: var( --kendo-pager-bg, #{k-color(surface)} ) !default;
 /// The text color of the Pager.
 /// @group pager
-$kendo-pager-text: k-color(on-app-surface) !default;
+$kendo-pager-text: var( --kendo-pager-text, #{k-color(on-app-surface)} ) !default;
 /// The border color of the Pager.
 /// @group pager
-$kendo-pager-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-pager-border: var( --kendo-pager-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
 
 /// The background color of the focused Pager.
 /// @group pager
-$kendo-pager-focus-bg: var( --kendo-pager-bg, #{$kendo-pager-bg}) !default;
+$kendo-pager-focus-bg: var( --kendo-pager-focus-bg, #{$kendo-pager-bg} ) !default;
 /// The text color of the focused Pager.
 /// @group pager
-$kendo-pager-focus-text: var( --kendo-pager-text, #{$kendo-pager-text}) !default;
+$kendo-pager-focus-text: var( --kendo-pager-focus-text, #{$kendo-pager-text} ) !default;
 /// The border color of the focused Pager.
 /// @group pager
-$kendo-pager-focus-border: k-color(border) !default;
+$kendo-pager-focus-border: var( --kendo-pager-focus-border, #{k-color(border)} ) !default;
 
 /// The border radius of the Pager items.
 /// @group pager
-$kendo-pager-item-border-radius: 0 !default;
+$kendo-pager-item-border-radius: var( --kendo-pager-item-border-radius, 0 ) !default;
 /// The spacing around the Pager items.
 /// @group pager
-$kendo-pager-item-spacing: null !default;
+$kendo-pager-item-spacing: var( --kendo-pager-item-spacing, null ) !default;
 
 /// The spacing between the item groups of the small Pager.
 /// @group pager
-$kendo-pager-sm-item-group-spacing: k-spacing(2) !default;
+$kendo-pager-sm-item-group-spacing: var( --kendo-pager-sm-item-group-spacing, #{k-spacing(2)} ) !default;
 /// The spacing between the item groups of the medium Pager.
 /// @group pager
-$kendo-pager-md-item-group-spacing: k-spacing(2) !default;
+$kendo-pager-md-item-group-spacing: var( --kendo-pager-md-item-group-spacing, #{k-spacing(2)} ) !default;
 /// The spacing between the item groups of the large Pager.
 /// @group pager
-$kendo-pager-lg-item-group-spacing: k-spacing(2) !default;
+$kendo-pager-lg-item-group-spacing: var( --kendo-pager-lg-item-group-spacing, #{k-spacing(2)} ) !default;
 
 /// The text color of the Pagers' sizes label.
 /// @group pager
-$kendo-pager-sizes-label-text: k-color(on-app-surface) !default;
+$kendo-pager-sizes-label-text: var( --kendo-pager-sizes-label-text, #{k-color(on-app-surface)} ) !default;
 
 /// The text color of the Pagers' info label.
 /// @group pager
-$kendo-pager-info-label-text: k-color(subtle) !default;
+$kendo-pager-info-label-text: var( --kendo-pager-info-label-text, #{k-color(subtle)} ) !default;
 
 /// The width of the Inputs in the Pager.
 /// @group pager
-$kendo-pager-input-width: 5em !default;
+$kendo-pager-input-width: var( --kendo-pager-input-width, 5em ) !default;
 /// The width of the DropDowns in the Pager.
 /// @group pager
-$kendo-pager-dropdown-width: 5em !default;
+$kendo-pager-dropdown-width: var( --kendo-pager-dropdown-width, 5em ) !default;
 
 /// The sizes map of the Pager.
 /// @group pager
@@ -109,3 +109,26 @@ $kendo-pager-sizes: (
         item-group-spacing: $kendo-pager-lg-item-group-spacing
     )
 ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/pager/_variables.scss" with (
+    $kendo-pager-sm-padding-x: $kendo-pager-sm-padding-x,
+    $kendo-pager-md-padding-x: $kendo-pager-md-padding-x,
+    $kendo-pager-lg-padding-x: $kendo-pager-lg-padding-x,
+    $kendo-pager-sm-padding-y: $kendo-pager-sm-padding-y,
+    $kendo-pager-md-padding-y: $kendo-pager-md-padding-y,
+    $kendo-pager-lg-padding-y: $kendo-pager-lg-padding-y,
+    $kendo-pager-sm-item-group-spacing: $kendo-pager-sm-item-group-spacing,
+    $kendo-pager-md-item-group-spacing: $kendo-pager-md-item-group-spacing,
+    $kendo-pager-lg-item-group-spacing: $kendo-pager-lg-item-group-spacing,
+    $kendo-pager-border-width: $kendo-pager-border-width,
+    $kendo-pager-font-family: $kendo-pager-font-family,
+    $kendo-pager-font-size: $kendo-pager-font-size,
+    $kendo-pager-line-height: $kendo-pager-line-height,
+    $kendo-pager-bg: $kendo-pager-bg,
+    $kendo-pager-text: $kendo-pager-text,
+    $kendo-pager-border: $kendo-pager-border,
+    $kendo-pager-focus-bg: $kendo-pager-focus-bg,
+    $kendo-pager-item-spacing: $kendo-pager-item-spacing,
+    $kendo-pager-input-width: $kendo-pager-input-width,
+    $kendo-pager-sizes: $kendo-pager-sizes
+);

package/scss/panel/_layout.scss

@@ -1,29 +1,7 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/panel/_layout.scss" as *;
 
 @mixin kendo-panel--layout() {
-    // Panels
-    .k-block,
-    .k-panel {
-        @include border-radius( $kendo-panel-border-radius );
-        padding: 0;
-        border-width: $kendo-panel-border-width;
-        border-style: $kendo-panel-border-style;
-        box-sizing: border-box;
-
-        > .k-header {
-            @include border-top-radius( $kendo-panel-border-radius );
-            @include fill(
-                k-color(on-app-surface),
-                k-color(surface-alt),
-                color-mix(in srgb, k-color(border) 16%, transparent)
-            );
-            padding-inline: $kendo-panel-header-padding-inline;
-            padding-block: $kendo-panel-header-padding-block;
-        }
-        > .k-content {
-            padding-inline: $kendo-panel-content-padding-inline;
-            padding-block: $kendo-panel-content-padding-block;
-        }
-    }
+    @include kendo-panel--layout--base();
 }

package/scss/panel/_theme.scss

@@ -1,22 +1,19 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/panel/_theme.scss" as *;
 
 @mixin kendo-panel--theme() {
-    // Panels
+    @include kendo-panel--theme--base();
+
     .k-block,
     .k-panel {
-        @include fill(
-            var( --kendo-panel-text, #{$kendo-panel-text} ),
-            var( --kendo-panel-bg, #{$kendo-panel-bg} ),
-            var( --kendo-panel-border, #{$kendo-panel-border} )
-        );
+        > .k-header {
+            @include fill(
+                k-color(on-app-surface),
+                k-color(surface-alt),
+                color-mix(in srgb, k-color(border) 16%, transparent)
+            );
+        }
     }
 
-    :where(.k-content) {
-        @include fill(
-            var( --kendo-panel-text, #{$kendo-panel-text} ),
-            var( --kendo-panel-bg, #{$kendo-panel-bg} ),
-            var( --kendo-panel-border, #{$kendo-panel-border} )
-        );
-    }
 }

package/scss/panel/_variables.scss

@@ -3,34 +3,47 @@
 
 /// The border radius of the Panel.
 /// @group panel
-$kendo-panel-border-radius: k-border-radius(md) !default;
+$kendo-panel-border-radius: var( --kendo-panel-border-radius, #{k-border-radius(md)} ) !default;
 /// The width of the border around the Panel.
 /// @group panel
-$kendo-panel-border-width: 1px !default;
+$kendo-panel-border-width: var( --kendo-panel-border-width, 1px ) !default;
 /// The style of the border around the Panel.
 /// @group panel
-$kendo-panel-border-style: solid !default;
+$kendo-panel-border-style: var( --kendo-panel-border-style, solid ) !default;
 
 /// The inline padding of the Panel header.
 /// @group panel
-$kendo-panel-header-padding-inline: k-spacing(2) !default;
+$kendo-panel-header-padding-inline: var( --kendo-panel-header-padding-inline, #{k-spacing(2)} ) !default;
 /// The block padding of the Panel header.
 /// @group panel
-$kendo-panel-header-padding-block: k-spacing(1) !default;
+$kendo-panel-header-padding-block: var( --kendo-panel-header-padding-block, #{k-spacing(1)} ) !default;
 
 /// The inline padding of the Panel content.
 /// @group panel
-$kendo-panel-content-padding-inline: k-spacing(2) !default;
+$kendo-panel-content-padding-inline: var( --kendo-panel-content-padding-inline, #{k-spacing(2)} ) !default;
 /// The block padding of the Panel content.
 /// @group panel
-$kendo-panel-content-padding-block: k-spacing(1) !default;
+$kendo-panel-content-padding-block: var( --kendo-panel-content-padding-block, #{k-spacing(1)} ) !default;
 
 /// The text color of the Panel.
 /// @group panel
-$kendo-panel-text: k-color(on-app-surface) !default;
+$kendo-panel-text: var( --kendo-panel-text, #{k-color(on-app-surface)} ) !default;
 /// The background color of the Panel.
 /// @group panel
-$kendo-panel-bg: k-color(surface-alt) !default;
+$kendo-panel-bg: var( --kendo-panel-bg, #{k-color(surface-alt)} ) !default;
 /// The color of the border around the Panel.
 /// @group panel
-$kendo-panel-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-panel-border: var( --kendo-panel-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/panel/_variables.scss" with (
+    $kendo-panel-border-radius: $kendo-panel-border-radius,
+    $kendo-panel-border-width: $kendo-panel-border-width,
+    $kendo-panel-border-style: $kendo-panel-border-style,
+    $kendo-panel-header-padding-inline: $kendo-panel-header-padding-inline,
+    $kendo-panel-header-padding-block: $kendo-panel-header-padding-block,
+    $kendo-panel-content-padding-inline: $kendo-panel-content-padding-inline,
+    $kendo-panel-content-padding-block: $kendo-panel-content-padding-block,
+    $kendo-panel-text: $kendo-panel-text,
+    $kendo-panel-bg: $kendo-panel-bg,
+    $kendo-panel-border: $kendo-panel-border
+);

package/scss/panelbar/_layout.scss

@@ -1,59 +1,23 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 @use "../core/spacing/_index.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/panelbar/_layout.scss" as *;
 
 @mixin kendo-panelbar--layout() {
+    @include kendo-panelbar--layout-base();
 
     .k-panelbar {
-        margin: 0;
-        padding: 0;
-        border-width: var( --kendo-panelbar-border-width, #{$kendo-panelbar-border-width} );
-        border-style: var( --kendo-panelbar-border-style, #{$kendo-panelbar-border-style} );
-        box-sizing: border-box;
-        outline: 0;
-        font-family: var( --kendo-panelbar-font-family, #{$kendo-panelbar-font-family} );
-        font-size: var( --kendo-panelbar-font-size, #{$kendo-panelbar-font-size} );
-        line-height: var( --kendo-panelbar-line-height, #{$kendo-panelbar-line-height} );
-        list-style: none;
-        display: block;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-
-        // Root
         > .k-panelbar-header {
-            // TODO
-            border-width: 0;
-            border-style: var( --kendo-panelbar-item-border-style, #{$kendo-panelbar-item-border-style} );
-            border-color: inherit;
-            display: block;
 
             > .k-link {
-                padding-inline-start: var( --kendo-panelbar-header-padding-x-start, #{$kendo-panelbar-header-padding-x-start} );
-                padding-inline-end: var( --kendo-panelbar-header-padding-x-end, #{$kendo-panelbar-header-padding-x-end} );
-                padding-block: var( --kendo-panelbar-header-padding-y, #{$kendo-panelbar-header-padding-y} );
-                color: inherit;
-                background: none;
-                text-decoration: none;
-                display: flex;
-                flex-flow: row nowrap;
-                gap: var( --kendo-icon-spacing, .5rem );
-                align-items: center;
-                align-content: center;
-                position: relative;
-                user-select: none;
-                cursor: default;
-                transition: var( --kendo-transition, none );
+                padding-inline-start: $kendo-panelbar-header-padding-x-start;
+                padding-inline-end: $kendo-panelbar-header-padding-x-end;
+                padding-block: $kendo-panelbar-header-padding-y;
+                font-weight: normal;
 
                 &.k-selected {
-                    font-weight: var( --kendo-font-weight-bold, #{$kendo-font-weight-bold} );
+                    font-weight: $kendo-font-weight-bold;
 
                     &::before {
                         content: '';
@@ -66,49 +30,19 @@
             }
         }
 
-        > .k-panelbar-header + .k-panelbar-header {
-            border-top-width: var( --kendo-panelbar-item-border-width, #{$kendo-panelbar-item-border-width} );
-        }
-
-        // Absolute positioning should be applied only if the icon is a first child
         .k-panelbar-item-icon:first-child {
             position: absolute;
-            inset-inline-start: var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} );
-        }
-
-
-        // Sub
-        .k-panelbar-group {
-            margin: 0;
-            padding: 0;
-            border-width: 0;
-            border-color: inherit;
-            color: inherit;
-            background-color: transparent;
-            list-style: none;
+            inset-inline-start: $kendo-panelbar-icon-spacing;
         }
 
         .k-panelbar-group > .k-panelbar-item {
-            display: block;
-
             > .k-link {
-                padding-inline-start: var( --kendo-panelbar-item-padding-x-start, #{$kendo-panelbar-item-padding-x-start} );
-                padding-inline-end: var( --kendo-panelbar-item-padding-x-end, #{$kendo-panelbar-item-padding-x-end} );
-                padding-block: var( --kendo-panelbar-item-padding-y, #{$kendo-panelbar-item-padding-y} );
-                color: inherit;
-                text-decoration: none;
-                display: flex;
-                flex-flow: row nowrap;
-                gap: var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} );
-                align-items: center;
-                align-content: center;
-                position: relative;
-                user-select: none;
-                cursor: default;
-                transition: var( --kendo-transition, #{$kendo-transition} );
+                padding-inline-start: $kendo-panelbar-item-padding-x-start;
+                padding-inline-end: $kendo-panelbar-item-padding-x-end;
+                padding-block: $kendo-panelbar-item-padding-y;
 
                 &.k-selected {
-                    font-weight: var( --kendo-font-weight-bold, #{$kendo-font-weight-bold} );
+                    font-weight: $kendo-font-weight-bold;
 
                     &::before {
                         content: '';
@@ -120,32 +54,20 @@
                 }
             }
 
-            // Hierarchy items
             @for $i from 1 through $kendo-panelbar-item-level-count {
                 &.k-level-#{$i} {
-                    --kendo-panelbar-link-spacing: calc( #{k-spacing(3)} * #{$i} );
-                    --kendo-panelbar-item-padding: var( --kendo-panelbar-item-padding-x-start, #{$kendo-panelbar-item-padding-x-start} );
+                    $_link-spacing: calc( #{k-spacing(3)} * #{$i} );
+                    $_item-padding: $kendo-panelbar-item-padding-x-start;
+
                     .k-link {
-                        padding-inline-start: calc( var( --kendo-panelbar-item-padding ) + var( --kendo-panelbar-link-spacing ) );
+                        padding-inline-start: calc( $kendo-panelbar-item-padding-x-start + $_link-spacing );
                     }
 
                     .k-panelbar-item-icon:first-child {
-                        inset-inline-start: calc( var( --kendo-panelbar-icon-spacing, #{$kendo-panelbar-icon-spacing} ) + var( --kendo-panelbar-link-spacing ) );
+                        inset-inline-start: calc( $kendo-panelbar-icon-spacing + $_link-spacing );
                     }
                 }
             }
         }
-
-        // Panelbar content
-        .k-panelbar-content {
-            display: flow-root;
-        }
-
-        // Toggle icon
-        .k-panelbar-expand,
-        .k-panelbar-collapse,
-        .k-panelbar-toggle {
-            margin-inline-start: auto;
-        }
     }
 }

package/scss/panelbar/_theme.scss

@@ -1,124 +1,30 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/panelbar/_theme.scss" as *;
 
 @mixin kendo-panelbar--theme() {
-    .k-panelbar {
-        @include fill(
-            var( --kendo-panelbar-text, #{$kendo-panelbar-text} ),
-            var( --kendo-panelbar-bg, #{$kendo-panelbar-bg} ),
-            var( --kendo-panelbar-border, #{$kendo-panelbar-border} )
-        );
-
-
-        // Root
-        > .k-panelbar-header {
+    @include kendo-panelbar--theme-base();
 
-            &.k-expanded.k-level-0 > .k-link  {
-                --kendo-panelbar-header-text: var( --kendo-panelbar-header-expanded-text, #{$kendo-panelbar-header-expanded-text} );
-                --kendo-panelbar-header-bg: var( --kendo-panelbar-header-expanded-bg, #{$kendo-panelbar-header-expanded-bg} );
-                --kendo-panelbar-header-border: var( --kendo-panelbar-header-expanded-bg, #{$kendo-panelbar-header-expanded-bg} );
-
-                // Hover
-                &:hover,
-                &.k-hover {
-                    --kendo-panelbar-header-text: var( --kendo-panelbar-header-hover-text, #{$kendo-panelbar-header-hover-text} );
-                    --kendo-panelbar-header-bg: var( --kendo-panelbar-header-hover-bg, #{$kendo-panelbar-header-hover-bg} );
-                    --kendo-panelbar-header-border: var( --kendo-panelbar-header-hover-border, #{$kendo-panelbar-header-hover-border} );
-                }
 
-                &.k-selected {
-                    --kendo-panelbar-header-text: var( --kendo-panelbar-header-selected-text, #{$kendo-panelbar-header-selected-text} );
-                    --kendo-panelbar-header-bg: var( --kendo-panelbar-header-selected-bg, #{$kendo-panelbar-header-selected-bg} );
-                    --kendo-panelbar-header-border: var( --kendo-panelbar-header-selected-border, #{$kendo-panelbar-header-selected-border} );
-                }
-            }
+    .k-panelbar {
 
-            // Normal
+        > .k-panelbar-header {
             > .k-link {
-                --kendo-panelbar-header-text: var( --kendo-panelbar-header-text, #{$kendo-panelbar-header-text} );
-                --kendo-panelbar-header-bg: var( --kendo-panelbar-header-bg, #{$kendo-panelbar-header-bg} );
-                --kendo-panelbar-header-border: var( --kendo-panelbar-header-border, #{$kendo-panelbar-header-border} );
-
-                @include fill(
-                    var( --kendo-panelbar-header-text, inherit ),
-                    var( --kendo-panelbar-header-bg, inherit ),
-                    var( --kendo-panelbar-header-border, inherit )
-                );
 
-                .k-icon,
-                .k-panelbar-item-icon {
-                    color: var( --kendo-panelbar-text, #{$kendo-panelbar-text} );
-                }
-
-                // Hover
-                &:hover,
-                &.k-hover {
-                    --kendo-panelbar-header-text: var( --kendo-panelbar-header-hover-text, #{$kendo-panelbar-header-hover-text} );
-                    --kendo-panelbar-header-bg: var( --kendo-panelbar-header-hover-bg, #{$kendo-panelbar-header-hover-bg} );
-                    --kendo-panelbar-header-border: var( --kendo-panelbar-header-hover-border, #{$kendo-panelbar-header-hover-border} );
-                }
-
-                // Focus
                 &:focus,
                 &.k-focus {
-                    --kendo-panelbar-header-text: var( --kendo-panelbar-header-focus-text, #{$kendo-panelbar-header-focus-text} );
-                    --kendo-panelbar-header-bg: var( --kendo-panelbar-header-focus-bg, #{$kendo-panelbar-header-focus-bg} );
-                    --kendo-panelbar-header-border: var( --kendo-panelbar-header-focus-border, #{$kendo-panelbar-header-focus-border} );
-
-                    box-shadow: var( --kendo-panelbar-header-focus-shadow, #{$kendo-panelbar-header-focus-shadow} );
-
-                    // Focus & Hover
-                    &:hover,
-                    &.k-hover {
-                        --kendo-panelbar-header-text: var( --kendo-panelbar-header-hover-focus-text, #{$kendo-panelbar-header-hover-focus-text} );
-                        --kendo-panelbar-header-bg: var( --kendo-panelbar-header-hover-focus-bg, #{$kendo-panelbar-header-hover-focus-bg} );
-                        --kendo-panelbar-header-border: var( --kendo-panelbar-header-hover-focus-border, #{$kendo-panelbar-header-hover-focus-border} );
-                    }
+                    box-shadow: $kendo-panelbar-header-focus-shadow;
                 }
 
-                // Selected
                 &.k-selected {
-                    --kendo-panelbar-header-text: var( --kendo-panelbar-header-selected-text, #{$kendo-panelbar-header-selected-text} );
-                    --kendo-panelbar-header-bg: var( --kendo-panelbar-header-selected-bg, #{$kendo-panelbar-header-selected-bg} );
-                    --kendo-panelbar-header-border: var( --kendo-panelbar-header-selected-border, #{$kendo-panelbar-header-selected-border} );
-
-                    .k-icon,
-                    .k-panelbar-item-icon {
-                        color: inherit;
-                    }
-
                     &::before {
-                        background-color: var( --kendo-panelbar-selected-marker, #{$kendo-panelbar-selected-marker} );
-                    }
-
-                    // Selected Hover
-                    &:hover,
-                    &.k-hover {
-                        --kendo-panelbar-header-text: var( --kendo-panelbar-header-selected-hover-text, #{$kendo-panelbar-header-selected-hover-text} );
-                        --kendo-panelbar-header-bg: var( --kendo-panelbar-header-selected-hover-bg, #{$kendo-panelbar-header-selected-hover-bg} );
-                        --kendo-panelbar-header-border: var( --kendo-panelbar-header-selected-hover-border, #{$kendo-panelbar-header-selected-hover-border} );
-                    }
-
-                    // Selected Focus
-                    &:focus,
-                    &.k-focus {
-                        --kendo-panelbar-header-text: var( --kendo-panelbar-header-selected-focus-text, #{$kendo-panelbar-header-selected-focus-text} );
-                        --kendo-panelbar-header-bg: var( --kendo-panelbar-header-selected-focus-bg, #{$kendo-panelbar-header-selected-focus-bg} );
-                        --kendo-panelbar-header-border: var( --kendo-panelbar-header-selected-focus-border, #{$kendo-panelbar-header-selected-focus-border} );
-
-                        // Selected Focus & Hover
-                        &:hover,
-                        &.k-hover {
-                            --kendo-panelbar-header-text: var( --kendo-panelbar-header-selected-hover-focus-text, #{$kendo-panelbar-header-selected-hover-focus-text} );
-                            --kendo-panelbar-header-bg: var( --kendo-panelbar-header-selected-hover-focus-bg, #{$kendo-panelbar-header-selected-hover-focus-bg} );
-                            --kendo-panelbar-header-border: var( --kendo-panelbar-header-selected-hover-focus-border, #{$kendo-panelbar-header-selected-hover-focus-border} );
-                        }
+                        background-color: $kendo-panelbar-selected-marker;
                     }
                 }
 
                 &:disabled,
                 &.k-disabled {
-                    --kendo-panelbar-header-text: var( --kendo-disabled-text, inherit );
+                   color: var( --kendo-disabled-text, inherit );
 
                     .k-icon,
                     .k-panelbar-item-icon {
@@ -132,7 +38,7 @@
                 background-color: transparent;
 
                 > .k-link {
-                    --kendo-panelbar-header-text: var( --kendo-disabled-text, inherit );
+                    color: var( --kendo-disabled-text, inherit );
                 }
 
                 .k-icon,
@@ -142,81 +48,26 @@
             }
         }
 
-
-        // Sub
-
         .k-panelbar-group > .k-panelbar-item {
-
             > .k-link {
+                color: $kendo-panelbar-text;
+                background-color: $kendo-panelbar-bg;
+                border-color: $kendo-panelbar-border; 
 
-                @include fill(
-                    var( --kendo-panelbar-item-text, inherit ),
-                    var( --kendo-panelbar-item-bg, inherit ),
-                    var( --kendo-panelbar-item-border, inherit )
-                );
-
-                .k-icon,
-                .k-panelbar-item-icon {
-                    color: var( --kendo-panelbar-text, #{$kendo-panelbar-text} );
-                }
-
-                &:hover,
-                &.k-hover {
-                    --kendo-panelbar-item-text: var( --kendo-panelbar-item-hover-text, #{$kendo-panelbar-item-hover-text} );
-                    --kendo-panelbar-item-bg: var( --kendo-panelbar-item-hover-bg, #{$kendo-panelbar-item-hover-bg} );
-                    --kendo-panelbar-item-border: var( --kendo-panelbar-item-hover-border, #{$kendo-panelbar-item-hover-border} );
-                }
 
                 &:focus,
                 &.k-focus {
-                    --kendo-panelbar-item-text: var( --kendo-panelbar-item-focus-text, #{$kendo-panelbar-item-focus-text} );
-                    --kendo-panelbar-item-bg: var( --kendo-panelbar-item-focus-bg, #{$kendo-panelbar-item-focus-bg} );
-                    --kendo-panelbar-item-border: var( --kendo-panelbar-item-focus-border, #{$kendo-panelbar-item-focus-border} );
-
-                    box-shadow: var( --kendo-panelbar-item-focus-shadow, #{$kendo-panelbar-item-focus-shadow} );
-
-                    &:hover,
-                    &.k-hover {
-                        --kendo-panelbar-item-text: var( --kendo-panelbar-item-hover-focus-text, #{$kendo-panelbar-item-hover-focus-text} );
-                        --kendo-panelbar-item-bg: var( --kendo-panelbar-item-hover-focus-bg, #{$kendo-panelbar-item-hover-focus-bg} );
-                        --kendo-panelbar-item-border: var( --kendo-panelbar-item-hover-focus-border, #{$kendo-panelbar-item-hover-focus-border} );
-                    }
+                    box-shadow: $kendo-panelbar-item-focus-shadow;
                 }
 
                 &.k-selected {
-                    --kendo-panelbar-item-text: var( --kendo-panelbar-item-selected-text, #{$kendo-panelbar-item-selected-text} );
-                    --kendo-panelbar-item-bg: var( --kendo-panelbar-item-selected-bg, #{$kendo-panelbar-item-selected-bg} );
-                    --kendo-panelbar-item-border: var( --kendo-panelbar-item-selected-border, #{$kendo-panelbar-item-selected-border} );
-
                     &::before {
-                        background-color: var( --kendo-panelbar-selected-marker, #{$kendo-panelbar-selected-marker} );
-                    }
-
-                    &:hover,
-                    &.k-hover {
-                        --kendo-panelbar-item-text: var( --kendo-panelbar-item-selected-hover-text, #{$kendo-panelbar-item-selected-hover-text} );
-                        --kendo-panelbar-item-bg: var( --kendo-panelbar-item-selected-hover-bg, #{$kendo-panelbar-item-selected-hover-bg} );
-                        --kendo-panelbar-item-border: var( --kendo-panelbar-item-selected-hover-border, #{$kendo-panelbar-item-selected-hover-border} );
-                    }
-
-                    &:focus,
-                    &.k-focus {
-                        --kendo-panelbar-item-text: var( --kendo-panelbar-item-selected-focus-text, #{$kendo-panelbar-item-selected-focus-text} );
-                        --kendo-panelbar-item-bg: var( --kendo-panelbar-item-selected-focus-bg, #{$kendo-panelbar-item-selected-focus-bg} );
-                        --kendo-panelbar-item-border: var( --kendo-panelbar-item-selected-focus-border, #{$kendo-panelbar-item-selected-focus-border} );
-
-                        // Selected Focus & Hover
-                        &:hover,
-                        &.k-hover {
-                            --kendo-panelbar-item-text: var( --kendo-panelbar-item-selected-hover-focus-text, #{$kendo-panelbar-item-selected-hover-focus-text} );
-                            --kendo-panelbar-item-bg: var( --kendo-panelbar-item-selected-hover-focus-bg, #{$kendo-panelbar-item-selected-hover-focus-bg} );
-                            --kendo-panelbar-item-border: var( --kendo-panelbar-item-selected-hover-focus-border, #{$kendo-panelbar-item-selected-hover-focus-border} );
-                        }
+                        background-color: $kendo-panelbar-selected-marker;
                     }
                 }
 
                 &.k-disabled {
-                    --kendo-panelbar-item-text: var( --kendo-disabled-text, inherit );
+                    color: var( --kendo-disabled-text, inherit );
 
                     .k-icon,
                     .k-panelbar-item-icon {
@@ -230,7 +81,7 @@
                 background-color: transparent;
 
                 > .k-link {
-                    --kendo-panelbar-item-text: var( --kendo-disabled-text, inherit );
+                    color: var( --kendo-disabled-text, inherit );
                 }
 
                 .k-icon,