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

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "6.8.0-dev.2",
+    "version": "7.0.0-dev.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "6.8.0-dev.2",
+    "version": "7.0.0-dev.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-fluent",
   "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
-  "version": "6.8.0-dev.2",
+  "version": "7.0.0-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -52,8 +52,8 @@
   },
   "dependencies": {
     "@progress/kendo-font-icons": "1.9.0",
-    "@progress/kendo-theme-core": "6.8.0-dev.2",
-    "@progress/kendo-theme-utils": "6.8.0-dev.2"
+    "@progress/kendo-theme-core": "7.0.0-dev.0",
+    "@progress/kendo-theme-utils": "7.0.0-dev.0"
   },
-  "gitHead": "1d0254882897f857ca96fd31477a6e2c18d18433"
+  "gitHead": "228be168555ed9f71c328cefd10924e3fd037023"
 }

package/scss/action-sheet/_variables.scss

@@ -48,7 +48,7 @@ $kendo-actionsheet-text: var( --kendo-component-text, initial ) !default;
 $kendo-actionsheet-border: var( --kendo-component-border, initial ) !default;
 /// Box shadow of the action sheet.
 /// @group action-sheet
-$kendo-actionsheet-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
+$kendo-actionsheet-shadow: var( --kendo-box-shadow-depth-7, none ) !default;
 
 /// Horizontal padding of the action sheet header.
 /// @group action-sheet

package/scss/bottom-navigation/_variables.scss

@@ -60,7 +60,7 @@ $kendo-bottom-nav-item-focus-outline-style: solid !default;
 
 /// The box shadow of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
+$kendo-bottom-nav-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
 
 /// The theme variations for the BottomNavigation.
 /// @group bottom-navigation
@@ -166,4 +166,4 @@ $kendo-bottom-nav-theme-colors: () !default;
         $kendo-bottom-nav-theme-colors,
         k-generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
     );
-}
+}

package/scss/chat/_variables.scss

@@ -168,7 +168,7 @@ $kendo-chat-bubble-border: $kendo-chat-bubble-bg !default;
 $kendo-chat-bubble-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
 /// The hover shadow of the bubble in the chat.
 /// @group chat
-$kendo-chat-bubble-hover-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
+$kendo-chat-bubble-hover-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 /// The selected shadow of the bubble in the chat.
 /// @group chat
 $kendo-chat-bubble-selected-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
@@ -187,10 +187,10 @@ $kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-bg !default;
 $kendo-chat-alt-bubble-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
 /// The hover shadow of the alt bubble in the chat.
 /// @group chat
-$kendo-chat-alt-bubble-hover-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
+$kendo-chat-alt-bubble-hover-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 /// The selected shadow of the alt bubble in the chat.
 /// @group chat
-$kendo-chat-alt-bubble-selected-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
+$kendo-chat-alt-bubble-selected-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
 
 /// The background of quick reply in the chat.
 /// @group chat

package/scss/colorgradient/_layout.scss

@@ -70,6 +70,8 @@
         width: var( --kendo-color-gradient-draghandle-width, #{$kendo-color-gradient-draghandle-width} );
         height: var( --kendo-color-gradient-draghandle-height, #{$kendo-color-gradient-draghandle-height} );
         border-width: var( --kendo-color-gradient-draghandle-border-width, #{$kendo-color-gradient-draghandle-border-width} );
+        outline-width: var( --kendo-color-gradient-draghandle-outline-width, #{$kendo-color-gradient-draghandle-outline-width} );
+        outline-style: solid;
         box-sizing: border-box;
     }
 

package/scss/colorgradient/_theme.scss

@@ -20,9 +20,6 @@
         @include fill(
             $border: var( --kendo-color-gradient-focus-border, #{$kendo-color-gradient-focus-border} )
         );
-        @include box-shadow(
-            var( --kendo-color-gradient-focus-shadow, #{$kendo-color-gradient-focus-shadow} )
-        );
     }
 
     // Canvas
@@ -43,6 +40,7 @@
         @include fill(
             $border: var( --kendo-color-gradient-draghandle-border, #{$kendo-color-gradient-draghandle-border })
         );
+        outline-color: $kendo-color-gradient-draghandle-focus-shadow;
         @include box-shadow(
             var( --kendo-color-gradient-draghandle-shadow, #{$kendo-color-gradient-draghandle-shadow} )
         );
@@ -52,38 +50,13 @@
             @include fill(
                 $border: var( --kendo-color-gradient-draghandle-focus-border, #{$kendo-color-gradient-draghandle-focus-border} )
             );
-            @include box-shadow(
-                var( --kendo-color-gradient-draghandle-focus-shadow, #{$kendo-color-gradient-draghandle-focus-shadow} )
-            );
+            outline-color: $kendo-color-gradient-draghandle-focus-shadow;
         }
 
         &:active,
         &:hover,
         &.k-hover {
-            @include box-shadow(
-                var( --kendo-color-gradient-draghandle-hover-shadow, #{$kendo-color-gradient-draghandle-hover-shadow} )
-            );
-        }
-    }
-
-    .k-colorgradient .k-hsv-draghandle {
-        @include box-shadow(
-            var( --kendo-color-gradient-canvas-draghandle-shadow, #{$kendo-color-gradient-canvas-draghandle-shadow} )
-        );
-
-        &:focus,
-        &.k-focus {
-            @include box-shadow(
-                var( --kendo-color-gradient-canvas-draghandle-shadow, #{$kendo-color-gradient-canvas-draghandle-shadow} )
-            );
-        }
-
-        &:active,
-        &:hover,
-        &.k-hover {
-            @include box-shadow(
-                var( --kendo-color-gradient-canvas-draghandle-shadow, #{$kendo-color-gradient-canvas-draghandle-shadow} )
-            );
+            outline-color: $kendo-color-gradient-draghandle-hover-shadow;
         }
     }
 

package/scss/colorgradient/_variables.scss

@@ -11,7 +11,7 @@ $kendo-color-gradient-spacer: map.get( $kendo-spacing, 4 ) !default;
 $kendo-color-gradient-width: 260px !default;
 /// The width of the border around the ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-border-width: 1px !default;
+$kendo-color-gradient-border-width: 2px !default;
 /// The border radius of the ColorGradient.
 /// @group cologradient
 $kendo-color-gradient-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
@@ -71,7 +71,7 @@ $kendo-color-gradient-canvas-rectangle-height: 180px !default;
 $kendo-color-gradient-canvas-rectangle-border: k-get-theme-color-var( neutral-30 ) !default;
 /// The box shadow of the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-canvas-draghandle-shadow: 0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13), inset 0px 0px 0px 3px #FFFFFF !default;
+$kendo-color-gradient-canvas-draghandle-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 
 /// The width of the ColorGradient slider.
 /// @group cologradient
@@ -104,22 +104,28 @@ $kendo-color-gradient-draghandle-width: 20px !default;
 $kendo-color-gradient-draghandle-height: 20px !default;
 /// The width of the border around the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-border-width: 1px !default;
+$kendo-color-gradient-draghandle-border-width: 2px !default;
+/// The width of the outline around the ColorGradient canvas drag handle.
+/// @group cologradient
+$kendo-color-gradient-draghandle-outline-width: 1px !default;
 /// The color of the border around the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-border: k-get-theme-color-var( neutral-110 ) !default;
+$kendo-color-gradient-draghandle-border: $kendo-color-white !default;
+/// The color of the outline around the ColorGradient canvas drag handle.
+/// @group cologradient
+$kendo-color-gradient-draghandle-shadow: k-get-theme-color-var( neutral-110 ) !default;
 /// The box shadow of the ColorGradient canvas drag handle.
 /// @group cologradient
 $kendo-color-gradient-draghandle-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 /// The color of the border around the focused ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-focus-border: k-get-theme-color-var( neutral-160 ) !default;
-/// The box shadow of the focused ColorGradient canvas drag handle.
+$kendo-color-gradient-draghandle-focus-border: $kendo-color-white !default;
+/// The focus color of the outline around the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-focus-shadow: $kendo-color-gradient-draghandle-shadow !default;
-/// The box shadow of the hovered ColorGradient canvas drag handle.
+$kendo-color-gradient-draghandle-focus-shadow: k-get-theme-color-var( neutral-130 ) !default;
+/// The hover color of the outline around the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-hover-shadow: $kendo-color-gradient-draghandle-focus-shadow !default;
+$kendo-color-gradient-draghandle-hover-shadow: k-get-theme-color-var( neutral-130 ) !default;
 
 /// The vertical offset of the ColorGradient canvas drag handle.
 /// @group cologradient
@@ -149,4 +155,4 @@ $kendo-color-gradient-input-label-text: var( --kendo-subtle-text, inherit ) !def
 $kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 /// The spacing between the items in the ColorGradient contrast tool.
 /// @group cologradient
-$kendo-color-gradient-contrast-spacing: math.div( $kendo-color-gradient-spacer, 1.5 ) !default;
+$kendo-color-gradient-contrast-spacing: math.div( $kendo-color-gradient-spacer, 1.5 ) !default;

package/scss/core/_index.scss

@@ -4,11 +4,17 @@
 @forward "./color-system/palettes";
 @use "./color-system/palettes" as *;
 
+// Elevation
+@use "./elevation" as *;
+@forward "./elevation/legacy";
+
 // Variables
 @forward "./variables";
 
-@forward "@progress/kendo-theme-core/scss/index.import.scss" with (
-    $kendo-palettes: $kendo-fluent-palettes
+@forward "@progress/kendo-theme-core/scss/index.import.scss"  with (
+    $kendo-palettes: $kendo-fluent-palettes,
+    $_default-elevation: $kendo-elevation,
+    $kendo-elevation: $kendo-elevation !default,
 );
 
 // Helpers
@@ -21,7 +27,7 @@ $components: null !default;
 
 @mixin core-configure($config: null) {
     @if $config {
-        $_components: map.get( $config, "components" );
+        $_components: map.get($config, "components");
 
         @if ($_components) {
             module.$components: $_components;

package/scss/core/_legacy.scss

@@ -0,0 +1,4 @@
+@use "./index" as *;
+@forward "./elevation" with (
+    $kendo-elevation: $kendo-elevation
+)

package/scss/core/elevation/_index.scss

@@ -0,0 +1,44 @@
+@use "sass:map";
+
+$_default-elevation: (
+    1: (
+        0 0.3px 0.9px rgba(0, 0, 0, 0.1),
+        0 1.6px 3.6px rgba(0, 0, 0, 0.13),
+    ),
+    2: (
+        0 0.6px 1.8px rgba(0, 0, 0, 0.1),
+        0 3.2px 7.2px rgba(0, 0, 0, 0.13),
+    ),
+    3: (
+        0 0.9px 2.7px rgba(0, 0, 0, 0.1),
+        0 4.8px 10.8px rgba(0, 0, 0, 0.13),
+    ),
+    4: (
+        0 1.2px 3.6px rgba(0, 0, 0, 0.1),
+        0 6.4px 14.4px rgba(0, 0, 0, 0.13),
+    ),
+    5: (
+        0 1.8px 5.4px rgba(0, 0, 0, 0.1),
+        0 9.6px 21.6px rgba(0, 0, 0, 0.13),
+    ),
+    6: (
+        0 2.4px 7.2px rgba(0, 0, 0, 0.18),
+        0 12.8px 28.8px rgba(0, 0, 0, 0.22),
+    ),
+    7: (
+        0 3.2px 10.8px rgba(0, 0, 0, 0.18),
+        0 19.2px 43.2px rgba(0, 0, 0, 0.22),
+    ),
+    8: (
+        0 4.8px 14.4px rgba(0, 0, 0, 0.18),
+        0 25.6px 57.6px rgba(0, 0, 0, 0.22),
+    ),
+    9: (
+        0 6.4px 18px rgba(0, 0, 0, 0.18),
+        0 32px 72px rgba(0, 0, 0, 0.22),
+    ),
+);
+
+/// Global Elevation.
+/// @group elevation
+$kendo-elevation: $_default-elevation !default;

package/scss/core/elevation/_legacy.scss

@@ -0,0 +1,48 @@
+@use "sass:map";
+@use "./index" as *;
+
+/// Shadow for cards and grid item thumbnails.
+/// Equivalent to fluent depth 4.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-1: var( --kendo-elevation-1, none ) !default;
+/// Shadow for color gradient drag handle.
+/// Equivalent to fluent depth 8.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-2: var( --kendo-elevation-2, none ) !default;
+/// Shadow for focus card.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-3: var( --kendo-elevation-3, none ) !default;
+/// Shadow for panels.
+/// Equivalent to fluent depth 16.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-4: var( --kendo-elevation-4, none ) !default;
+/// Shadow for floating action button.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-5: var( --kendo-elevation-5, none ) !default;
+/// Shadow for pop up.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-6: var( --kendo-elevation-6, none ) !default;
+/// Shadow for action sheet.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-7: var( --kendo-elevation-7, none ) !default;
+/// Shadow for dialogs and window.
+/// Equivalent to fluent depth 64.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-8: var( --kendo-elevation-8, none ) !default;
+/// Shadow for focus window.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-9: var( --kendo-elevation-8, none ) !default;
+
+@mixin elevation--styles-legacy() {
+    :root {
+        --kendo-box-shadow-depth-1: #{$kendo-box-shadow-depth-1};
+        --kendo-box-shadow-depth-2: #{$kendo-box-shadow-depth-2};
+        --kendo-box-shadow-depth-3: #{$kendo-box-shadow-depth-3};
+        --kendo-box-shadow-depth-4: #{$kendo-box-shadow-depth-4};
+        --kendo-box-shadow-depth-5: #{$kendo-box-shadow-depth-5};
+        --kendo-box-shadow-depth-6: #{$kendo-box-shadow-depth-6};
+        --kendo-box-shadow-depth-7: #{$kendo-box-shadow-depth-7};
+        --kendo-box-shadow-depth-8: #{$kendo-box-shadow-depth-8};
+        --kendo-box-shadow-depth-9: #{$kendo-box-shadow-depth-9};
+    }
+}

package/scss/core/helpers/_index.scss

@@ -1,6 +1,7 @@
 @use "./asp-fallback";
 @use "./animations";
 @use "./extra";
+@use "./indicators";
 @use "./reset";
 @use "./normalize";
 @use "./resizing";

package/scss/core/helpers/_indicators.scss

@@ -0,0 +1,35 @@
+$kendo-current-time-width: 1px !default;
+$kendo-current-time-color: #ff0000 !default;
+
+// Layout
+.k-current-time {
+    width: var( --kendo-current-time-width, #{$kendo-current-time-width} );
+    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;
+    }
+}
+
+
+// Theme
+.k-current-time {
+    background: var( --kendo-current-time-color, #{$kendo-current-time-color} );
+
+    &.k-current-time-arrow-left {
+        border-right-color: var( --kendo-current-time-color, #{$kendo-current-time-color} );
+    }
+
+    &.k-current-time-arrow-right {
+        border-left-color: var( --kendo-current-time-color, #{$kendo-current-time-color} );
+    }
+
+    &.k-current-time-arrow-down {
+        border-top-color: var( --kendo-current-time-color, #{$kendo-current-time-color} );
+    }
+}

package/scss/dataviz/_variables.scss

@@ -218,7 +218,7 @@ $kendo-selection-border-color: var( --kendo-component-border, initial ) !default
 $kendo-treemap-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font-size of the treemap.
 /// @group charts
-$kendo-treemap-font-size: var( -kendo-font-size, inherit ) !default;
+$kendo-treemap-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line-height of the treemap.
 /// @group charts
 $kendo-treemap-line-height: var( --kendo-line-height, normal ) !default;

package/scss/dialog/_variables.scss

@@ -50,7 +50,7 @@ $kendo-dialog-button-spacing: map.get( $kendo-spacing, 2 ) !default; // $kendo-a
 
 /// The box shadow around the Dialog.
 /// @group dialog
-$kendo-dialog-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
+$kendo-dialog-shadow: var( --kendo-box-shadow-depth-8, none ) !default;
 
 /// The theme variations for the Dialog.
 $kendo-dialog-brand-colors: (

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/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/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/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/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/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

@@ -531,20 +531,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 +924,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/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/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/_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/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