@progress/kendo-theme-fluent 14.0.0-dev.6 → 14.0.0-dev.7

package/dist/meta/variables.json

@@ -1,40 +1,4 @@
 {
-    "kendo-box-shadow-depth-1": {
-        "type": "String",
-        "value": "var(--kendo-elevation-1, none)"
-    },
-    "kendo-box-shadow-depth-2": {
-        "type": "String",
-        "value": "var(--kendo-elevation-2, none)"
-    },
-    "kendo-box-shadow-depth-3": {
-        "type": "String",
-        "value": "var(--kendo-elevation-3, none)"
-    },
-    "kendo-box-shadow-depth-4": {
-        "type": "String",
-        "value": "var(--kendo-elevation-4, none)"
-    },
-    "kendo-box-shadow-depth-5": {
-        "type": "String",
-        "value": "var(--kendo-elevation-5, none)"
-    },
-    "kendo-box-shadow-depth-6": {
-        "type": "String",
-        "value": "var(--kendo-elevation-6, none)"
-    },
-    "kendo-box-shadow-depth-7": {
-        "type": "String",
-        "value": "var(--kendo-elevation-7, none)"
-    },
-    "kendo-box-shadow-depth-8": {
-        "type": "String",
-        "value": "var(--kendo-elevation-8, none)"
-    },
-    "kendo-box-shadow-depth-9": {
-        "type": "String",
-        "value": "var(--kendo-elevation-8, none)"
-    },
     "kendo-is-dark-theme": {
         "type": "Bool",
         "value": "false"
@@ -469,32 +433,24 @@
     },
     "default-elevation": {
         "type": "Map",
-        "value": "(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 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12)), 3: (0 2px 4px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12)), 4: (0 4px 8px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12)), 5: (0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12)), 6: (0 14px 28.8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2)), 7: (0 20px 38px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2)), 8: (0 32px 64px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2)), 9: (0 32px 64px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2)))",
+        "value": "(1: (0px 2px 4px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.12)), 2: (0px 4px 8px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.12)), 3: (0px 8px 16px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.12)), 4: (0px 14px 28px 0px rgba(0, 0, 0, 0.24), 0px 0px 8px 0px rgba(0, 0, 0, 0.2)), 5: (0px 32px 64px 0px rgba(0, 0, 0, 0.24), 0px 0px 8px 0px rgba(0, 0, 0, 0.2)))",
         "prettyValue": {
-            "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 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12))",
-            "3": "(0 2px 4px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12))",
-            "4": "(0 4px 8px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12))",
-            "5": "(0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12))",
-            "6": "(0 14px 28.8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2))",
-            "7": "(0 20px 38px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2))",
-            "8": "(0 32px 64px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2))",
-            "9": "(0 32px 64px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2))"
+            "1": "(0px 2px 4px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.12))",
+            "2": "(0px 4px 8px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.12))",
+            "3": "(0px 8px 16px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.12))",
+            "4": "(0px 14px 28px 0px rgba(0, 0, 0, 0.24), 0px 0px 8px 0px rgba(0, 0, 0, 0.2))",
+            "5": "(0px 32px 64px 0px rgba(0, 0, 0, 0.24), 0px 0px 8px 0px rgba(0, 0, 0, 0.2))"
         }
     },
     "kendo-elevation": {
         "type": "Map",
-        "value": "(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 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12)), 3: (0 2px 4px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12)), 4: (0 4px 8px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12)), 5: (0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12)), 6: (0 14px 28.8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2)), 7: (0 20px 38px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2)), 8: (0 32px 64px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2)), 9: (0 32px 64px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2)))",
+        "value": "(1: (0px 2px 4px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.12)), 2: (0px 4px 8px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.12)), 3: (0px 8px 16px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.12)), 4: (0px 14px 28px 0px rgba(0, 0, 0, 0.24), 0px 0px 8px 0px rgba(0, 0, 0, 0.2)), 5: (0px 32px 64px 0px rgba(0, 0, 0, 0.24), 0px 0px 8px 0px rgba(0, 0, 0, 0.2)))",
         "prettyValue": {
-            "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 1px 2px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12))",
-            "3": "(0 2px 4px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12))",
-            "4": "(0 4px 8px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12))",
-            "5": "(0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12))",
-            "6": "(0 14px 28.8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2))",
-            "7": "(0 20px 38px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2))",
-            "8": "(0 32px 64px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2))",
-            "9": "(0 32px 64px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.2))"
+            "1": "(0px 2px 4px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.12))",
+            "2": "(0px 4px 8px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.12))",
+            "3": "(0px 8px 16px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.12))",
+            "4": "(0px 14px 28px 0px rgba(0, 0, 0, 0.24), 0px 0px 8px 0px rgba(0, 0, 0, 0.2))",
+            "5": "(0px 32px 64px 0px rgba(0, 0, 0, 0.24), 0px 0px 8px 0px rgba(0, 0, 0, 0.2))"
         }
     },
     "kendo-elevation-bg-lightness-step": {
@@ -2432,7 +2388,7 @@
     },
     "kendo-popup-shadow": {
         "type": "String",
-        "value": "var(--kendo-popup-shadow, var(--kendo-elevation-5))"
+        "value": "var(--kendo-popup-shadow, var(--kendo-elevation-3))"
     },
     "kendo-popup-spacing-y": {
         "type": "String",
@@ -3388,7 +3344,7 @@
     },
     "kendo-tooltip-shadow": {
         "type": "String",
-        "value": "var(--kendo-tooltip-shadow, var(--kendo-elevation-4))"
+        "value": "var(--kendo-tooltip-shadow, var(--kendo-elevation-2))"
     },
     "kendo-tooltip-button-text": {
         "type": "String",
@@ -6552,7 +6508,7 @@
     },
     "kendo-menu-popup-shadow": {
         "type": "String",
-        "value": "var(--kendo-menu-popup-shadow, var(--kendo-elevation-5))"
+        "value": "var(--kendo-menu-popup-shadow, var(--kendo-elevation-3))"
     },
     "kendo-menu-popup-item-icon-md-margin-start": {
         "type": "String",
@@ -8071,7 +8027,7 @@
     },
     "kendo-color-gradient-draghandle-shadow": {
         "type": "String",
-        "value": "var(--kendo-elevation-4)"
+        "value": "var(--kendo-elevation-2)"
     },
     "kendo-color-gradient-canvas-draghandle-margin-y": {
         "type": "String",
@@ -8155,7 +8111,7 @@
     },
     "kendo-color-gradient-shadow": {
         "type": "String",
-        "value": "var(--kendo-box-shadow-depth-2, none)"
+        "value": "var(--kendo-elevation-2)"
     },
     "kendo-color-gradient-canvas-border-width": {
         "type": "String",
@@ -8407,7 +8363,7 @@
     },
     "kendo-color-editor-shadow": {
         "type": "String",
-        "value": "var(--kendo-elevation-5)"
+        "value": "var(--kendo-elevation-3)"
     },
     "kendo-color-editor-header-actions-spacing": {
         "type": "String",
@@ -9653,7 +9609,7 @@
     },
     "kendo-fab-shadow": {
         "type": "String",
-        "value": "var(--kendo-elevation-4)"
+        "value": "var(--kendo-elevation-2)"
     },
     "kendo-fab-disabled-shadow": {
         "type": "Null",
@@ -9874,7 +9830,7 @@
     },
     "kendo-card-shadow": {
         "type": "String",
-        "value": "var(--kendo-card-shadow, var(--kendo-elevation-3, none))"
+        "value": "var(--kendo-card-shadow, var(--kendo-elevation-1, none))"
     },
     "kendo-card-focus-bg": {
         "type": "String",
@@ -9890,7 +9846,7 @@
     },
     "kendo-card-focus-shadow": {
         "type": "String",
-        "value": "var(--kendo-elevation-3, none)"
+        "value": "var(--kendo-elevation-1, none)"
     },
     "kendo-card-header-padding-x": {
         "type": "String",
@@ -10114,7 +10070,7 @@
     },
     "kendo-actionsheet-shadow": {
         "type": "String",
-        "value": "var(--kendo-actionsheet-shadow, var(--kendo-box-shadow-depth-7, none))"
+        "value": "var(--kendo-actionsheet-shadow, var(--kendo-elevation-5))"
     },
     "kendo-actionsheet-titlebar-padding-x": {
         "type": "String",
@@ -10991,7 +10947,7 @@
     },
     "kendo-popover-shadow": {
         "type": "String",
-        "value": "var(--kendo-popover-shadow, var(--kendo-box-shadow-depth-4, none))"
+        "value": "var(--kendo-popover-shadow, var(--kendo-elevation-3))"
     },
     "kendo-popover-header-padding-x": {
         "type": "String",
@@ -11135,7 +11091,7 @@
     },
     "kendo-bottom-nav-shadow": {
         "type": "String",
-        "value": "var(--kendo-box-shadow-depth-4, none)"
+        "value": "var(--kendo-elevation-3)"
     },
     "kendo-bottom-nav-flat-text": {
         "type": "String",
@@ -12961,7 +12917,7 @@
     },
     "kendo-dock-manager-unpinned-container-shadow": {
         "type": "String",
-        "value": "var(--kendo-dock-manager-unpinned-container-shadow, var(--kendo-elevation-6))"
+        "value": "var(--kendo-dock-manager-unpinned-container-shadow, var(--kendo-elevation-4))"
     },
     "kendo-dock-indicator-padding": {
         "type": "String",
@@ -12989,7 +12945,7 @@
     },
     "kendo-dock-indicator-shadow": {
         "type": "String",
-        "value": "var(--kendo-dock-indicator-shadow, var(--kendo-elevation-4))"
+        "value": "var(--kendo-dock-indicator-shadow, var(--kendo-elevation-2))"
     },
     "kendo-dock-indicator-hover-bg": {
         "type": "String",
@@ -13825,7 +13781,7 @@
     },
     "kendo-grid-column-menu-shadow": {
         "type": "String",
-        "value": "var(--kendo-grid-column-menu-shadow, var(--kendo-box-shadow-depth-4, none))"
+        "value": "var(--kendo-grid-column-menu-shadow, var(--kendo-elevation-4))"
     },
     "kendo-grid-column-menu-bg": {
         "type": "String",
@@ -16097,7 +16053,7 @@
     },
     "kendo-scheduler-tooltip-shadow": {
         "type": "String",
-        "value": "var(--kendo-scheduler-tooltip-shadow, var(--kendo-elevation-5))"
+        "value": "var(--kendo-scheduler-tooltip-shadow, var(--kendo-elevation-2))"
     },
     "kendo-scheduler-tooltip-title-margin-y": {
         "type": "String",
@@ -16849,7 +16805,7 @@
     },
     "kendo-timeline-card-shadow": {
         "type": "String",
-        "value": "var(--kendo-timeline-card-shadow, var(--kendo-card-shadow, var(--kendo-elevation-3, none)))"
+        "value": "var(--kendo-timeline-card-shadow, var(--kendo-card-shadow, var(--kendo-elevation-1, none)))"
     },
     "kendo-timeline-event-width": {
         "type": "String",
@@ -16869,7 +16825,7 @@
     },
     "kendo-timeline-flag-box-shadow": {
         "type": "String",
-        "value": "var(--kendo-timeline-flag-box-shadow, var(--kendo-box-shadow-depth-2, none))"
+        "value": "var(--kendo-timeline-flag-box-shadow, var(--kendo-elevation-2))"
     },
     "kendo-timeline-card-header-bg": {
         "type": "String",
@@ -16977,7 +16933,7 @@
     },
     "kendo-pdf-viewer-page-shadow": {
         "type": "String",
-        "value": "var(--kendo-pdf-viewer-page-shadow, var(--kendo-elevation-4))"
+        "value": "var(--kendo-pdf-viewer-page-shadow, var(--kendo-elevation-1))"
     },
     "kendo-pdf-viewer-search-panel-padding-x": {
         "type": "String",
@@ -17197,7 +17153,7 @@
     },
     "kendo-scrollview-navigation-arrow-shadow": {
         "type": "String",
-        "value": "var(--kendo-scrollview-navigation-arrow-shadow, var(--kendo-box-shadow-depth-3, none))"
+        "value": "var(--kendo-scrollview-navigation-arrow-shadow, var(--kendo-elevation-3))"
     },
     "kendo-scrollview-navigation-focus-shadow": {
         "type": "String",
@@ -17205,7 +17161,7 @@
     },
     "kendo-scrollview-navigation-arrow-hover-shadow": {
         "type": "String",
-        "value": "var(--kendo-scrollview-navigation-arrow-hover-shadow, var(--kendo-box-shadow-depth-4, none))"
+        "value": "var(--kendo-scrollview-navigation-arrow-hover-shadow, var(--kendo-elevation-4))"
     },
     "kendo-scrollview-pager-light-bg": {
         "type": "String",
@@ -18033,7 +17989,7 @@
     },
     "kendo-orgchart-node-group-focus-shadow": {
         "type": "String",
-        "value": "var(--kendo-orgchart-node-group-focus-shadow, var(--kendo-elevation-3, none))"
+        "value": "var(--kendo-orgchart-node-group-focus-shadow, var(--kendo-elevation-1, none))"
     },
     "kendo-orgchart-node-group-title-font-size": {
         "type": "String",
@@ -18069,11 +18025,11 @@
     },
     "kendo-orgchart-card-shadow": {
         "type": "String",
-        "value": "var(--kendo-orgchart-card-shadow, var(--kendo-card-shadow, var(--kendo-elevation-3, none)))"
+        "value": "var(--kendo-orgchart-card-shadow, var(--kendo-card-shadow, var(--kendo-elevation-1, none)))"
     },
     "kendo-orgchart-card-focus-shadow": {
         "type": "String",
-        "value": "var(--kendo-orgchart-card-focus-shadow, var(--kendo-elevation-3, none))"
+        "value": "var(--kendo-orgchart-card-focus-shadow, var(--kendo-elevation-1, none))"
     },
     "kendo-orgchart-card-title-margin-bottom": {
         "type": "String",

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "14.0.0-dev.6",
+    "version": "14.0.0-dev.7",
     "api": "modern",
     "previewColors": [
         "oklch(100.00% 0.0001 0deg)",

package/lib/swatches/fluent-1-dark.json

@@ -3,7 +3,7 @@
     "name": "Fluent 1 Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "14.0.0-dev.6",
+    "version": "14.0.0-dev.7",
     "previewColors": [
         "oklch(21.85% 0.0025 67.57deg)",
         "oklch(24.42% 0.0024 67.57deg)",

package/lib/swatches/fluent-1.json

@@ -3,7 +3,7 @@
     "name": "Fluent 1",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "14.0.0-dev.6",
+    "version": "14.0.0-dev.7",
     "previewColors": [
         "oklch(100.00% 0.0001 0deg)",
         "oklch(98.26% 0.0016 66.88deg)",

package/lib/swatches/fluent-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "14.0.0-dev.6",
+    "version": "14.0.0-dev.7",
     "previewColors": [
         "oklch(23.93% 0.0000 0deg)",
         "oklch(28.09% 0.0000 0deg)",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "14.0.0-dev.6",
+    "version": "14.0.0-dev.7",
     "previewColors": [
         "oklch(98.51% 0.0001 0deg)",
         "oklch(100.00% 0.0001 0deg)",

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": "14.0.0-dev.6",
+  "version": "14.0.0-dev.7",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -55,12 +55,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "4.9.0",
-    "@progress/kendo-theme-core": "14.0.0-dev.6",
-    "@progress/kendo-theme-utils": "14.0.0-dev.6"
+    "@progress/kendo-theme-core": "14.0.0-dev.7",
+    "@progress/kendo-theme-utils": "14.0.0-dev.7"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "0df0e4e29b482e22243c6e74b121a3bdb0976828"
+  "gitHead": "0e45bfaa59a5e51c96cdd46b78d35db59103aef4"
 }

package/scss/action-sheet/_variables.scss

@@ -48,7 +48,7 @@ $kendo-actionsheet-text: var( --kendo-actionsheet-text, #{k-color(on-app-surface
 $kendo-actionsheet-border: var( --kendo-actionsheet-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
 /// Box shadow of the action sheet.
 /// @group action-sheet
-$kendo-actionsheet-shadow: var( --kendo-actionsheet-shadow, var( --kendo-box-shadow-depth-7, none ) ) !default;
+$kendo-actionsheet-shadow: var( --kendo-actionsheet-shadow, k-elevation(5) ) !default;
 
 /// Horizontal padding of the action sheet header.
 /// @group action-sheet

package/scss/bottom-navigation/_variables.scss

@@ -59,7 +59,7 @@ $kendo-bottom-nav-item-gap: var( --kendo-bottom-nav-item-gap, k-spacing(1) ) !de
 
 /// The box shadow of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
+$kendo-bottom-nav-shadow: k-elevation(3) !default;
 
 /// The text color of the flat BottomNavigation.
 /// @group bottom-navigation

package/scss/card/_variables.scss

@@ -42,7 +42,7 @@ $kendo-card-text: var( --kendo-card-text, k-color(on-app-surface) ) !default;
 $kendo-card-border: var( --kendo-card-border, k-color(surface-alt) ) !default;
 /// The shadow of the Card.
 /// @group card
-$kendo-card-shadow: var( --kendo-card-shadow, var( --kendo-elevation-3, none ) ) !default;
+$kendo-card-shadow: var( --kendo-card-shadow, var( --kendo-elevation-1, none ) ) !default;
 
 /// The background color of the focused Card.
 /// @group card
@@ -55,7 +55,7 @@ $kendo-card-focus-text: null !default;
 $kendo-card-focus-border: k-color(border-alt) !default;
 /// The shadow of the focused Card.
 /// @group card
-$kendo-card-focus-shadow: var( --kendo-elevation-3, none ) !default;
+$kendo-card-focus-shadow: var( --kendo-elevation-1, none ) !default;
 
 /// The font size of the Card header.
 /// @group card

package/scss/coloreditor/_variables.scss

@@ -49,7 +49,7 @@ $kendo-color-editor-bg: var(--kendo-color-editor-bg, k-color(surface-alt)) !defa
 $kendo-color-editor-border: var(--kendo-color-editor-border, color-mix(in srgb, k-color(border) 16%, transparent)) !default;
 /// The box shadow of the ColorEditor.
 /// @group color-editor
-$kendo-color-editor-shadow: k-elevation(5) !default;
+$kendo-color-editor-shadow: k-elevation(3) !default;
 
 /// The border color of the focused ColorEditor.
 /// @group color-editor

package/scss/colorgradient/_variables.scss

@@ -44,7 +44,7 @@ $kendo-color-gradient-bg: var(--kendo-color-gradient-bg, k-color(surface-alt)) !
 $kendo-color-gradient-border: var(--kendo-color-gradient-border, color-mix(in srgb, k-color(border) 16%, transparent)) !default;
 /// The box shadow of the ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
+$kendo-color-gradient-shadow: k-elevation(2) !default;
 
 /// The vertical padding of the small ColorGradient.
 /// @group color-gradient
@@ -175,7 +175,7 @@ $kendo-color-gradient-draghandle-outline-width: var(--kendo-color-gradient-dragh
 $kendo-color-gradient-draghandle-border: var(--kendo-color-gradient-draghandle-border, k-color(app-surface)) !default;
 /// The box shadow of the ColorGradient canvas drag handle.
 /// @group color-gradient
-$kendo-color-gradient-draghandle-shadow: k-elevation(4) !default;
+$kendo-color-gradient-draghandle-shadow: k-elevation(2) !default;
 /// The color of the outline around the ColorGradient canvas drag handle.
 /// @group color-gradient
 $kendo-color-gradient-draghandle-outline: k-color(border) !default;

package/scss/core/_index.scss

@@ -5,7 +5,6 @@
 
 // Elevation
 @use "./elevation/_index.scss" as *;
-@forward "./elevation/_legacy.scss";
 
 // Typography
 @use "./typography/_index.scss" as *;

package/scss/core/elevation/_index.scss

@@ -2,40 +2,24 @@
 
 $_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)
+        0px 2px 4px 0px rgba(0, 0, 0, 0.14),
+        0px 0px 2px 0px rgba(0, 0, 0, 0.12)
     ),
     2: (
-        0 1px 2px 0 rgba(0, 0, 0, 0.14),
-        0 0 2px 0 rgba(0, 0, 0, 0.12)
+        0px 4px 8px 0px rgba(0, 0, 0, 0.14),
+        0px 0px 2px 0px rgba(0, 0, 0, 0.12)
     ),
     3: (
-        0 2px 4px 0 rgba(0, 0, 0, 0.14),
-        0 0 2px 0 rgba(0, 0, 0, 0.12)
+        0px 8px 16px 0px rgba(0, 0, 0, 0.14),
+        0px 0px 2px 0px rgba(0, 0, 0, 0.12)
     ),
     4: (
-        0 4px 8px 0 rgba(0, 0, 0, 0.14),
-        0 0 2px 0 rgba(0, 0, 0, 0.12)
+        0px 14px 28px 0px rgba(0, 0, 0, 0.24),
+        0px 0px 8px 0px rgba(0, 0, 0, 0.2)
     ),
     5: (
-        0 8px 16px 0 rgba(0, 0, 0, 0.14),
-        0 0 2px 0 rgba(0, 0, 0, 0.12)
-    ),
-    6: (
-        0 14px 28.8px 0 rgba(0, 0, 0, 0.24),
-       0 0 8px 0 rgba(0, 0, 0, 0.20)
-    ),
-    7: (
-        0 20px 38px 0 rgba(0, 0, 0, 0.24),
-         0 0 8px 0 rgba(0, 0, 0, 0.20)
-    ),
-    8: (
-        0 32px 64px 0 rgba(0, 0, 0, 0.24), // Missing step 8 in the Design
-         0 0 8px 0 rgba(0, 0, 0, 0.20)
-    ),
-    9: (
-        0 32px 64px 0 rgba(0, 0, 0, 0.24),
-        0 0 8px 0 rgba(0, 0, 0, 0.20)
+        0px 32px 64px 0px rgba(0, 0, 0, 0.24),
+        0px 0px 8px 0px rgba(0, 0, 0, 0.2)
     )
 );
 

package/scss/dock-manager/_variables.scss

@@ -74,7 +74,7 @@ $kendo-dock-manager-unpinned-container-width: var( --kendo-dock-manager-unpinned
 $kendo-dock-manager-unpinned-container-bg: var( --kendo-dock-manager-unpinned-container-bg, k-color(surface-alt) ) !default;
 /// The box shadow of the unpinned pane container in the DockManager component.
 /// @group dock-manager
-$kendo-dock-manager-unpinned-container-shadow: var( --kendo-dock-manager-unpinned-container-shadow, k-elevation(6) ) !default;
+$kendo-dock-manager-unpinned-container-shadow: var( --kendo-dock-manager-unpinned-container-shadow, k-elevation(4) ) !default;
 
 /// The padding of the dock indicator in the DockManager component.
 /// @group dock-manager
@@ -96,7 +96,7 @@ $kendo-dock-indicator-outline-style: var( --kendo-dock-indicator-outline-style,
 $kendo-dock-indicator-outline: var( --kendo-dock-indicator-outline, $kendo-dock-indicator-text ) !default;
 /// The box shadow of the dock indicator in the DockManager component.
 /// @group dock-manager
-$kendo-dock-indicator-shadow: var( --kendo-dock-indicator-shadow, k-elevation(4) ) !default;
+$kendo-dock-indicator-shadow: var( --kendo-dock-indicator-shadow, k-elevation(2) ) !default;
 
 ///  The background color of the hovered dock indicator in the DockManager component.
 /// @group dock-manager

package/scss/fab/_variables.scss

@@ -144,7 +144,7 @@ $kendo-fab-sizes: (
 
 /// The base shadow of the FAB.
 /// @group floating-action-button
-$kendo-fab-shadow: k-elevation(4) !default;
+$kendo-fab-shadow: k-elevation(2) !default;
 
 /// The base text color of the FAB item.
 /// @group floating-action-button

package/scss/grid/_variables.scss

@@ -429,7 +429,7 @@ $kendo-grid-column-menu-max-width: var( --kendo-grid-column-menu-max-width, 320p
 $kendo-grid-column-menu-spacing: var( --kendo-grid-column-menu-spacing, #{k-spacing(2)} ) !default;
 /// The focus shadow of the Grid column menu.
 /// @group grid
-$kendo-grid-column-menu-shadow: var( --kendo-grid-column-menu-shadow, var(--kendo-box-shadow-depth-4, none) ) !default;
+$kendo-grid-column-menu-shadow: var( --kendo-grid-column-menu-shadow, k-elevation(4) ) !default;
 /// The background color of the Grid column menu.
 /// @group grid
 $kendo-grid-column-menu-bg: var( --kendo-grid-column-menu-bg, #{k-color(surface-alt)} ) !default;

package/scss/index.scss

@@ -310,8 +310,6 @@
     // Core
     @include core-styles();
 
-    @include kendo-elevation--styles-legacy();
-
     // Typography
     @include kendo-typography--styles();
 

package/scss/menu/_variables.scss

@@ -169,7 +169,7 @@ $kendo-menu-popup-bg: var( --kendo-menu-popup-bg, #{k-color(surface-alt)} ) !def
 $kendo-menu-popup-border: var( --kendo-menu-popup-border, initial ) !default;
 /// The shadow of the Menu popup.
 /// @group menu
-$kendo-menu-popup-shadow: var( --kendo-menu-popup-shadow, k-elevation(5) ) !default;
+$kendo-menu-popup-shadow: var( --kendo-menu-popup-shadow, k-elevation(3) ) !default;
 
 /// The horizontal padding of the small Menu popup item.
 /// @group menu

package/scss/pdf-viewer/_variables.scss

@@ -52,7 +52,7 @@ $kendo-pdf-viewer-page-text: var( --kendo-pdf-viewer-page-text, #{k-color(on-app
 $kendo-pdf-viewer-page-border: var( --kendo-pdf-viewer-page-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
 /// The shadow of the PDFViewer page.
 /// @group pdf-viewer
-$kendo-pdf-viewer-page-shadow: var( --kendo-pdf-viewer-page-shadow, k-elevation(4) ) !default;
+$kendo-pdf-viewer-page-shadow: var( --kendo-pdf-viewer-page-shadow, k-elevation(1) ) !default;
 
 /// The horizontal padding of the PDFViewer search panel.
 /// @group pdf-viewer

package/scss/popover/_variables.scss

@@ -33,7 +33,7 @@ $kendo-popover-bg: var( --kendo-popover-bg, k-color(surface-alt) ) !default;
 $kendo-popover-border: var( --kendo-popover-border, transparent ) !default;
 /// The box shadow of the Popover.
 /// @group popover
-$kendo-popover-shadow: var( --kendo-popover-shadow, var( --kendo-box-shadow-depth-4, none ) ) !default;
+$kendo-popover-shadow: var( --kendo-popover-shadow, k-elevation(3) ) !default;
 
 /// The horizontal padding of the Popover header.
 /// @group popover

package/scss/popup/_variables.scss

@@ -39,7 +39,7 @@ $kendo-popup-text: var( --kendo-popup-text, #{k-color(on-app-surface)} ) !defaul
 $kendo-popup-border: var( --kendo-popup-border, transparent ) !default;
 /// Box shadow around the popup.
 /// @group popup
-$kendo-popup-shadow: var( --kendo-popup-shadow, k-elevation(5) ) !default;
+$kendo-popup-shadow: var( --kendo-popup-shadow, k-elevation(3) ) !default;
 
 /// Vertical spacing between the popup and the element it is anchored to.
 /// @group popup

package/scss/scheduler/_variables.scss

@@ -213,7 +213,7 @@ $kendo-scheduler-tooltip-text: var( --kendo-scheduler-tooltip-text, k-color(subt
 $kendo-scheduler-tooltip-border: var( --kendo-scheduler-tooltip-border, null ) !default;
 /// The shadow of the Scheduler Tooltip.
 /// @group scheduler
-$kendo-scheduler-tooltip-shadow: var( --kendo-scheduler-tooltip-shadow, k-elevation(5) ) !default;
+$kendo-scheduler-tooltip-shadow: var( --kendo-scheduler-tooltip-shadow, k-elevation(2) ) !default;
 
 /// The vertical margin of the Scheduler Tooltip title.
 /// @group scheduler

package/scss/scrollview/_variables.scss

@@ -76,7 +76,7 @@ $kendo-scrollview-pager-height: var( --kendo-scrollview-pager-height, calc( #{$k
 $kendo-scrollview-navigation-color: var( --kendo-scrollview-navigation-color, k-color(app-surface) ) !default;
 /// The box shadow of the ScrollView navigation arrows.
 /// @group scrollview
-$kendo-scrollview-navigation-arrow-shadow: var( --kendo-scrollview-navigation-arrow-shadow, var( --kendo-box-shadow-depth-3, none ) ) !default;
+$kendo-scrollview-navigation-arrow-shadow: var( --kendo-scrollview-navigation-arrow-shadow, k-elevation(3) ) !default;
 /// The background color of the ScrollView navigation.
 /// @group scrollview
 $kendo-scrollview-navigation-bg: var( --kendo-scrollview-navigation-bg, transparent ) !default;
@@ -85,7 +85,7 @@ $kendo-scrollview-navigation-bg: var( --kendo-scrollview-navigation-bg, transpar
 $kendo-scrollview-navigation-focus-shadow: var( --kendo-scrollview-navigation-focus-shadow, 0 0 0 1px k-color(base-emphasis) ) !default;
 /// The hover box shadow of the ScrollView navigation arrows.
 /// @group scrollview
-$kendo-scrollview-navigation-arrow-hover-shadow: var( --kendo-scrollview-navigation-arrow-hover-shadow, var( --kendo-box-shadow-depth-4, none ) ) !default;
+$kendo-scrollview-navigation-arrow-hover-shadow: var( --kendo-scrollview-navigation-arrow-hover-shadow, k-elevation(4) ) !default;
 
 /// The background color of the ScrollView pager in light mode.
 /// @group scrollview

package/scss/timeline/_variables.scss

@@ -95,7 +95,7 @@ $kendo-timeline-flag-border-radius: var( --kendo-timeline-flag-border-radius, k-
 $kendo-timeline-flag-line-height: var( --kendo-timeline-flag-line-height, var(--kendo-line-height) ) !default;
 /// The box shadow of the Timeline flag.
 /// @group timeline
-$kendo-timeline-flag-box-shadow: var( --kendo-timeline-flag-box-shadow, var( --kendo-box-shadow-depth-2, none ) ) !default;
+$kendo-timeline-flag-box-shadow: var( --kendo-timeline-flag-box-shadow, k-elevation(2) ) !default;
 /// The minimum width of the Timeline flag.
 /// @group timeline
 $kendo-timeline-flag-min-width: var( --kendo-timeline-flag-min-width, k-spacing(20) ) !default;