@progress/kendo-theme-fluent 6.8.0-dev.2 → 7.0.0

package/scss/grid/_theme.scss

@@ -138,8 +138,7 @@
         .k-grid-filter,
         .k-header-column-menu,
         .k-grid-header-menu,
-        .k-hierarchy-cell .k-icon,
-        .k-hierarchy-cell .k-svg-icon {
+        .k-hierarchy-cell .k-icon {
             @include fill( $color: var( --kendo-grid-header-text, #{$kendo-grid-header-text} ) );
         }
 
@@ -148,8 +147,7 @@
                 $bg: var( --kendo-grid-grouping-row-bg, #{$kendo-grid-grouping-row-bg} )
             );
 
-            .k-icon,
-            .k-svg-icon {
+            .k-icon {
                 @include fill(
                     $color: var( --kendo-grid-header-text, #{$kendo-grid-header-text} )
                 );
@@ -230,8 +228,7 @@
         .k-grid-filter,
         .k-header-column-menu,
         .k-grid-header-menu,
-        .k-hierarchy-cell .k-icon,
-        .k-hierarchy-cell .k-svg-icon {
+        .k-hierarchy-cell .k-icon {
             &:hover {
                 @include fill(
                     $color: var( --kendo-hover-text, inherit ),
@@ -466,19 +463,12 @@
                 var( --kendo-grid-column-menu-item-bg, #{$kendo-grid-column-menu-item-bg} )
             );
 
-            .k-icon,
-            .k-svg-icon {
+            .k-icon {
                 @include fill(
                     var( --kendo-grid-column-menu-item-icon-text, #{$kendo-grid-column-menu-item-icon-text} )
                 );
             }
 
-            .k-expander-indicator > .k-icon {
-                @include fill(
-                    var( --kendo-grid-column-menu-item-text, #{$kendo-grid-column-menu-item-text} )
-                );
-            }
-
             &:hover,
             &.k-hover {
                 @include fill(
@@ -500,8 +490,7 @@
             }
 
             &.k-disabled .k-link,
-            &.k-disabled .k-icon,
-            &.k-disabled .k-svg-icon {
+            &.k-disabled .k-icon {
                 @include disabled-color(
                     var( --kendo-disabled-text, inherit )
                 );

package/scss/grid/_variables.scss

@@ -454,7 +454,7 @@ $kendo-grid-column-menu-max-width: 320px !default;
 $kendo-grid-column-menu-spacing: map.get( $kendo-spacing, 2 ) !default;
 /// Focus shadow of the grid column menu.
 /// @group grid
-$kendo-grid-column-menu-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
+$kendo-grid-column-menu-shadow: var( --kendo-box-shadow-depth-6, none ) !default;
 /// Background color of the grid column menu.
 /// @group grid
 $kendo-grid-column-menu-bg: var( --kendo-component-bg, inherit ) !default;

package/scss/icon/_layout.scss

@@ -1,13 +1,12 @@
 @use "./_variables.scss" as *;
 
-@use "@progress/kendo-font-icons/scss/index.scss" with (
-    $ki-embed-font: true,
+@use "@progress/kendo-svg-icons/scss/index.scss" with (
     $ki-icon-size: var( --kendo-icon-size, 1rem )
 );
 
 @mixin kendo-icon--layout() {
 
-    @include index.kendo-icon-styles();
+    @include index.kendo-svg-icon-styles();
 
     // kendo-icon-wrapper component
     .k-icon-wrapper-host {
@@ -26,7 +25,7 @@
         right: 0;
         margin: 0 -.5em -.5em 0;
     }
-    .k-svg-icon.k-icon-modifier {
+    .k-icon.k-icon-modifier {
         width: 1em;
         height: 1em;
     }

package/scss/index.scss

@@ -338,6 +338,10 @@
     // Color system css variables
     @include color-system-styles();
 
+    // Elevation
+    @include kendo-elevation--styles();
+    @include elevation--styles-legacy();
+
     // Typography and utils
     @include typography-styles();
     @include utils-styles();

package/scss/input/_layout.scss

@@ -223,9 +223,7 @@
     .k-input-validation-icon,
     .k-input-loading-icon,
     .k-input-prefix > .k-icon,
-    .k-input-prefix > .k-svg-icon,
-    .k-input-suffix > .k-icon,
-    .k-input-suffix > .k-svg-icon {
+    .k-input-suffix > .k-icon {
         padding-inline: var( --INTERNAL--kendo-input-padding-y, #{$kendo-input-md-padding-y} );
         padding-block: var( --INTERNAL--kendo-input-padding-y, #{$kendo-input-md-padding-y} );
         flex: none;
@@ -237,6 +235,12 @@
         box-sizing: content-box;
     }
 
+    .k-input-loading-icon {
+        width: 1em;
+        height: 1em;
+        font-size: var( --kendo-icon-size-md, 1rem );
+    }
+
     // Input with SVG icon
     .k-input-icon,
     .k-input-validation-icon,
@@ -359,13 +363,11 @@
                 min-height: auto !important; // stylelint-disable-line declaration-no-important
             }
         }
-        .k-spinner-increase .k-icon,
-        .k-spinner-increase .k-svg-icon  {
+        .k-spinner-increase .k-icon  {
             bottom: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset} ), auto );
         }
 
-        .k-spinner-decrease .k-icon,
-        .k-spinner-decrease .k-svg-icon  {
+        .k-spinner-decrease .k-icon  {
            top: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset} ), auto );
         }
     }

package/scss/list/_theme.scss

@@ -69,8 +69,7 @@
     }
 
     // Icon
-    .k-list-item .k-icon,
-    .k-list-item .k-svg-icon {
+    .k-list-item .k-icon {
         @include fill(
             $color: var( --kendo-list-item-icon-text, #{$kendo-list-item-icon-text} )
         );

package/scss/listview/_layout.scss

@@ -47,7 +47,7 @@
         grid-gap: var( --kendo-listview-grid-gap, #{$kendo-listview-grid-gap} );
     }
     .k-listview-content-padding-rectangle {
-        padding-inline: var( --$kendo-listview-padding-x, #{$kendo-listview-padding-x} );
+        padding-inline: var( --kendo-listview-padding-x, #{$kendo-listview-padding-x} );
         padding-block: var( --kendo-listview-padding-y, #{$kendo-listview-padding-y} );
     }
     .k-listview-content-padding-square {

package/scss/map/_layout.scss

@@ -88,8 +88,7 @@
             box-shadow: none;
             position: absolute;
 
-            .k-icon,
-            .k-svg-icon {
+            .k-icon {
                 min-width: 0;
                 min-height: 0;
             }

package/scss/menu/_layout.scss

@@ -306,7 +306,7 @@
                 height: var( --kendo-icon-size, 1rem );
                 border-bottom-width: 1px;
 
-                .k-icon::before {
+                .k-font-icon::before {
                     content: "\e013";
                 }
             }
@@ -318,7 +318,7 @@
                 width: var( --kendo-icon-size, 1rem );
                 border-left-width: 1px;
 
-                .k-icon::before {
+                .k-font-icon::before {
                     content: "\e014";
                 }
             }
@@ -330,7 +330,7 @@
                 height: var( --kendo-icon-size, 1rem );
                 border-top-width: 1px;
 
-                .k-icon::before {
+                .k-font-icon::before {
                     content: "\e015";
                 }
             }
@@ -342,7 +342,7 @@
                 width: var( --kendo-icon-size, 1rem );
                 border-right-width: 1px;
 
-                .k-icon::before {
+                .k-font-icon::before {
                     content: "\e016";
                 }
             }

package/scss/menu/_theme.scss

@@ -37,8 +37,7 @@
             }
         }
 
-        .k-link > .k-icon,
-        .k-link > .k-svg-icon {
+        .k-link > .k-icon {
             color: var( --kendo-menu-icon-color, $kendo-menu-icon-color );
         }
 

package/scss/menu/_variables.scss

@@ -125,7 +125,7 @@ $kendo-menu-popup-bg: var( --kendo-component-bg, initial ) !default;
 $kendo-menu-popup-border: initial !default;
 /// The shadow of the menu popup.
 /// @group menu
-$kendo-menu-popup-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
+$kendo-menu-popup-shadow: var( --kendo-box-shadow-depth-6, none ) !default;
 
 /// Horizontal padding of the menu item in popup.
 /// @group menu

package/scss/notification/_theme.scss

@@ -28,8 +28,7 @@
             --kendo-notification-bg: var( --kendo-notification-#{$theme-color}-bg, #{$_bg} );
             --kendo-notification-border: var( --kendo-notification-#{$theme-color}-border, #{$_border} );
 
-            .k-notification-wrap > .k-icon,
-            .k-notification-wrap > .k-svg-icon {
+            .k-notification-wrap > .k-icon {
                 --kendo-notification-icon-text: var( --kendo-notification-#{$theme-color}-icon-text, #{$_icon} );
             }
         }

package/scss/panelbar/_layout.scss

@@ -15,6 +15,7 @@
         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;
 

package/scss/panelbar/_theme.scss

@@ -47,7 +47,6 @@
                 );
 
                 .k-icon,
-                .k-svg-icon,
                 .k-panelbar-item-icon {
                     color: var( --kendo-panelbar-text, #{$kendo-panelbar-text} );
                 }
@@ -85,7 +84,6 @@
                     --INTERNAL--kendo-panelbar-header-border: var( --kendo-panelbar-header-selected-border, #{$kendo-panelbar-header-selected-border} );
 
                     .k-icon,
-                    .k-svg-icon,
                     .k-panelbar-item-icon {
                         color: inherit;
                     }
@@ -124,7 +122,6 @@
                     --INTERNAL--kendo-panelbar-header-text: var( --kendo-disabled-text, inherit );
 
                     .k-icon,
-                    .k-svg-icon,
                     .k-panelbar-item-icon {
                         color: inherit;
                     }
@@ -140,7 +137,6 @@
                 }
 
                 .k-icon,
-                .k-svg-icon,
                 .k-panelbar-item-icon {
                     color: inherit;
                 }
@@ -162,7 +158,6 @@
                 );
 
                 .k-icon,
-                .k-svg-icon,
                 .k-panelbar-item-icon {
                     color: var( --kendo-panelbar-text, #{$kendo-panelbar-text} );
                 }
@@ -226,7 +221,6 @@
                     --INTERNAL--kendo-panelbar-item-text: var( --kendo-disabled-text, inherit );
 
                     .k-icon,
-                    .k-svg-icon,
                     .k-panelbar-item-icon {
                         color: inherit;
                     }
@@ -242,7 +236,6 @@
                 }
 
                 .k-icon,
-                .k-svg-icon,
                 .k-panelbar-item-icon {
                     color: inherit;
                 }

package/scss/pdf-viewer/_theme.scss

@@ -33,8 +33,7 @@
             );
         }
 
-        .k-blank-page > .k-icon,
-        .k-blank-page > .k-svg-icon {
+        .k-blank-page > .k-icon {
             @include fill(
                 $color: var( --kendo-pdf-viewer-icon-text, #{$kendo-pdf-viewer-icon-text} )
             );

package/scss/pdf-viewer/_variables.scss

@@ -49,7 +49,7 @@ $kendo-pdf-viewer-page-text: var( --kendo-component-text, inherit )!default;
 $kendo-pdf-viewer-page-border: var( --kendo-component-border, inherit ) !default;
 /// Shadow of the PDF viewer page.
 /// @group pdf-viewer
-$kendo-pdf-viewer-page-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
+$kendo-pdf-viewer-page-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
 
 /// Horizontal padding of the PDF viewer search panel.
 /// @group pdf-viewer

package/scss/pivotgrid/_layout.scss

@@ -140,8 +140,7 @@
         overflow: hidden;
     }
 
-    .k-pivotgrid-cell .k-icon,
-    .k-pivotgrid-cell .k-svg-icon {
+    .k-pivotgrid-cell .k-icon {
         cursor: pointer;
         padding-inline-end: var( --kendo-pivotgrid-icon-spacing, #{$kendo-pivotgrid-icon-spacing} );
     }
@@ -188,8 +187,7 @@
         cursor: pointer;
         user-select: none;
 
-        .k-icon,
-        .k-svg-icon {
+        .k-icon {
             margin-inline-start: var( --kendo-pivotgrid-configurator-button-icon-spacing, #{$kendo-pivotgrid-configurator-button-icon-spacing} );
         }
 
@@ -201,8 +199,7 @@
             span {
                 writing-mode: vertical-rl;
             }
-            .k-icon,
-            .k-svg-icon {
+            .k-icon {
                 vertical-align: baseline;
             }
         }
@@ -359,8 +356,7 @@
         flex-direction: row;
         align-items: center;
 
-        .k-icon,
-        .k-svg-icon {
+        .k-icon {
             margin-inline-end: map.get( $kendo-spacing, 2 );
         }
         .k-dropdown-list {

package/scss/popover/_variables.scss

@@ -33,7 +33,7 @@ $kendo-popover-bg: var( --kendo-component-bg, initial ) !default;
 $kendo-popover-border: var( --kendo-component-border, initial ) !default;
 /// The box shadow of the Popover.
 /// @group popover
-$kendo-popover-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
+$kendo-popover-shadow: var( --kendo-box-shadow-depth-6, none ) !default;
 
 /// The horizontal padding of the Popover header.
 /// @group popover
@@ -88,4 +88,4 @@ $kendo-popover-callout-height: $kendo-popover-callout-width !default;
 $kendo-popover-callout-border-width: $kendo-popover-border-width !default;
 /// The border style of the Popover callout.
 /// @group popover
-$kendo-popover-callout-border-style: $kendo-popover-border-style !default;
+$kendo-popover-callout-border-style: $kendo-popover-border-style !default;

package/scss/popup/_variables.scss

@@ -39,4 +39,4 @@ $kendo-popup-text: var( --kendo-component-text, initial ) !default;
 $kendo-popup-border: var( --kendo-component-border, initial ) !default;
 /// Box shadow around the popup.
 /// @group popup
-$kendo-popup-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
+$kendo-popup-shadow: var( --kendo-box-shadow-depth-4, none ) !default;

package/scss/scheduler/_layout.scss

@@ -15,6 +15,7 @@
         line-height: var( --kendo-scheduler-line-height, #{$kendo-scheduler-line-height} );
         display: flex;
         flex-direction: column;
+        position: relative;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
@@ -531,20 +532,6 @@
         justify-content: center;
     }
 
-    // Current time
-    .k-current-time {
-        position: absolute;
-
-        &.k-current-time-arrow-left,
-        &.k-current-time-arrow-right,
-        &.k-current-time-arrow-down {
-            width: 0;
-            height: 0;
-            background: transparent;
-            border: 4px solid transparent;
-        }
-    }
-
     // Draging hint
     .k-event-drag-hint {
         opacity: .5;
@@ -938,7 +925,7 @@
 
     .k-safari {
         .k-scheduler-tooltip .k-tooltip-event:not(:last-child) {
-            margin-block-end: var( --kendo-scheduler-tooltip-event-gap #{$kendo-scheduler-tooltip-event-gap} );
+            margin-block-end: var( --kendo-scheduler-tooltip-event-gap, #{$kendo-scheduler-tooltip-event-gap} );
         }
 
         .k-scheduler-yearview .k-calendar-view .k-month {

package/scss/scheduler/_theme.scss

@@ -11,23 +11,6 @@
         );
     }
 
-    // Current time
-    .k-current-time {
-        background: var( --kendo-scheduler-current-time-color, #{$kendo-scheduler-current-time-color} );
-
-        &.k-current-time-arrow-left {
-            border-right-color: var( --kendo-scheduler-current-time-color, #{$kendo-scheduler-current-time-color} );
-        }
-
-        &.k-current-time-arrow-right {
-            border-left-color: var( --kendo-scheduler-current-time-color, #{$kendo-scheduler-current-time-color} );
-        }
-
-        &.k-current-time-arrow-down {
-            border-top-color: var( --kendo-scheduler-current-time-color, #{$kendo-scheduler-current-time-color} );
-        }
-    }
-
     // Header and footer
     .k-scheduler-toolbar {
         @include fill(

package/scss/scheduler/_variables.scss

@@ -146,10 +146,6 @@ $kendo-scheduler-datecolumn-width: 12em !default;
 /// @group scheduler
 $kendo-scheduler-timecolumn-width: 11em !default;
 
-/// Color of the current time marker in the scheduler.
-/// @group scheduler
-$kendo-scheduler-current-time-color: #ff0000 !default;
-
 /// Background color of the non-working hours in the scheduler.
 /// @group scheduler
 $kendo-scheduler-nonwork-bg: k-get-theme-color-var( neutral-10 ) !default;
@@ -221,7 +217,7 @@ $kendo-scheduler-tooltip-text: k-get-theme-color-var( neutral-130 ) !default;
 $kendo-scheduler-tooltip-border: null !default;
 /// Shadow of the scheduler tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-shadow: 0px 0px 10px rgba(0, 0, 0, .2 ) !default;
+$kendo-scheduler-tooltip-shadow: k-elevation(5) !default;
 
 /// Vertical spacing of the scheduler tooltip title.
 /// @group scheduler

package/scss/spreadsheet/_layout.scss

@@ -83,8 +83,7 @@
         flex: 1;
         gap: var( --kendo-spreadsheet-formula-bar-gap, #{$kendo-spreadsheet-formula-bar-gap} );
 
-        > .k-icon,
-        > .k-svg-icon {
+        > .k-icon {
             padding-inline: var( --kendo-padding-y, #{$kendo-padding-md-y} );
             padding-block: 0;
             box-sizing: content-box;
@@ -557,8 +556,7 @@
             .k-link {
                 padding-inline-start: var( --filter-menu-padding-left, #{$kendo-filter-menu-padding-left} );
             }
-            .k-icon,
-            .k-svg-icon {
+            .k-icon {
                 margin-inline-start: calc(-1 * ( var( --kendo-icon-size, 1rem ) + #{$kendo-padding-md-y} ) );
                 margin-inline-end: $kendo-padding-md-y;
             }
@@ -599,7 +597,6 @@
             cursor: pointer;
 
             > .k-icon,
-            > .k-svg-icon,
             > .k-expander-indicator {
                 margin-inline-end: $kendo-padding-md-y;
             }
@@ -725,10 +722,6 @@
             inset-inline-end: 0;
             inset-block-start: map.get( $kendo-spacing, 2 );
 
-            .k-icon {
-                font-size: 6em;
-            }
-
             .k-svg-icon {
                 width: 6em;
                 height: 6em;

package/scss/stepper/_layout.scss

@@ -125,8 +125,7 @@
             text-overflow: ellipsis;
             overflow: hidden;
         }
-        .k-step-label .k-icon,
-        .k-step-label .k-svg-icon {
+        .k-step-label .k-icon {
             margin-inline-start: var( --kendo-icon-spacing, .5rem );
         }
 

package/scss/stepper/_theme.scss

@@ -162,8 +162,7 @@
         .k-step-label {
             @include fill( $color: var( --kendo-stepper-label-text, #{$kendo-stepper-label-text} ) );
         }
-        .k-step-success .k-step-label .k-icon,
-        .k-step-success .k-step-label .k-svg-icon {
+        .k-step-success .k-step-label .k-icon {
             @include fill( $color: var( --kendo-stepper-label-success-text, #{$kendo-stepper-label-success-text} ) );
         }
         .k-step-error .k-step-label {

package/scss/tabstrip/_layout.scss

@@ -12,6 +12,7 @@
         border-style: solid;
         display: flex;
         flex-direction: column;
+        position: relative;
     }
 
 

package/scss/taskboard/_variables.scss

@@ -185,7 +185,7 @@ $kendo-taskboard-card-focus-shadow: none !default;
 $kendo-taskboard-card-selected-border: k-get-theme-color-var( primary-100 ) !default;
 /// Selected shadow of the task board card.
 /// @group taskboard
-$kendo-taskboard-card-selected-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
+$kendo-taskboard-card-selected-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
 
 /// Font size of the task board card title.
 /// @group taskboard

package/scss/tilelayout/_layout.scss

@@ -9,6 +9,7 @@
         box-sizing: border-box;
         outline: 0;
         display: grid;
+        position: relative;
         padding-block: var( --kendo-tile-layout-padding-y, #{$kendo-tile-layout-padding-y} );
         padding-inline: var( --kendo-tile-layout-padding-x, #{$kendo-tile-layout-padding-x} );
         -webkit-touch-callout: none;

package/scss/timeline/_variables.scss

@@ -98,7 +98,7 @@ $kendo-timeline-flag-border-radius: map.get( $kendo-spacing, 0.5 ) !default;
 $kendo-timeline-flag-line-height: var( --kendo-line-height, normal ) !default;
 /// The box shadow of the flag in the timeline.
 /// @group timeline
-$kendo-timeline-flag-box-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
+$kendo-timeline-flag-box-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 /// The min widht of the flag in the timeline.
 /// @group timeline
 $kendo-timeline-flag-min-width: map.get( $kendo-spacing, 20 ) !default;

package/scss/tooltip/_layout.scss

@@ -53,8 +53,7 @@
         margin-inline-start: var( --kendo-tooltip-button-spacing, .5rem );
         flex-shrink: 0;
 
-        .k-icon,
-        .k-svg-icon {
+        .k-icon {
             color: inherit;
             vertical-align: top;
         }

package/scss/tooltip/_variables.scss

@@ -48,7 +48,7 @@ $kendo-tooltip-text: var( --kendo-component-text, initial ) !default;
 $kendo-tooltip-border: transparent !default;
 /// The box-shadow of the tooltip
 /// @group tooltip
-$kendo-tooltip-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
+$kendo-tooltip-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 
 /// The text color of the tooltip button
 /// @group tooltip

package/scss/treeview/_layout.scss

@@ -84,8 +84,7 @@
         align-items: center;
         cursor: pointer;
     }
-    .k-treeview-toggle .k-icon,
-    .k-treeview-toggle .k-svg-icon {
+    .k-treeview-toggle .k-icon {
         padding: var( --kendo-icon-padding, .25rem );
         box-sizing: content-box;
     }
@@ -119,7 +118,6 @@
         position: relative;
 
         .k-icon,
-        .k-svg-icon,
         .k-image,
         .k-sprite {
             margin-inline-end: var( --kendo-icon-spacing, .5rem );

package/scss/upload/_layout.scss

@@ -55,8 +55,7 @@
                 align-items: center;
                 position: relative;
 
-                > .k-icon,
-                > .k-svg-icon {
+                > .k-icon {
                     margin-inline-end: var( --kendo-upload-icon-spacing, #{$kendo-upload-icon-spacing} );
                 }
             }

package/scss/utils/_layout.scss

@@ -4,6 +4,7 @@
     $kendo-spacing: $kendo-spacing,
     $kendo-font-sizes: $kendo-font-sizes,
     $kendo-border-radii: $kendo-border-radii,
+    $kendo-elevation: $kendo-elevation
 );
 
 @mixin kendo-utils--layout() {

package/scss/window/_variables.scss

@@ -81,10 +81,10 @@ $kendo-window-text: var( --kendo-component-text, initial ) !default;
 $kendo-window-border: k-get-theme-color-var( primary-100 ) !default;
 /// The box shadow of the Window.
 /// @group window
-$kendo-window-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
+$kendo-window-shadow: var( --kendo-box-shadow-depth-8, none ) !default;
 /// The box shadow of the focused Window.
 /// @group window
-$kendo-window-focus-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
+$kendo-window-focus-shadow: var( --kendo-box-shadow-depth-9, none ) !default;
 
 /// The background color of the Window titlebar.
 /// @group window