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

package/dist/meta/sassdoc-data.json

@@ -387,7 +387,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-appbar-box-shadow",
-                "value": "0px 2px 3px rgba( black, .24 )",
+                "value": "$box-shadow-depth-4",
                 "scope": "default",
                 "line": {
                     "start": 51,
@@ -402,8 +402,8 @@
                 "path": "appbar/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0px 2px 3px rgba(0, 0, 0, 0.24)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
         },
         {
             "description": "The box shadow of the AppBar with bottom position.\n",
@@ -414,7 +414,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-appbar-bottom-box-shadow",
-                "value": "0px -2px 3px rgba( black, .24 )",
+                "value": "$kendo-appbar-box-shadow",
                 "scope": "default",
                 "line": {
                     "start": 54,
@@ -429,8 +429,8 @@
                 "path": "appbar/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0px -2px 3px rgba(0, 0, 0, 0.24)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
         },
         {
             "description": "The border width of the Avatar.\n",
@@ -1629,7 +1629,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-bottom-nav-shadow",
-                "value": "0px 0px 5px rgba( black, .12 )",
+                "value": "$box-shadow-depth-4",
                 "scope": "default",
                 "line": {
                     "start": 52,
@@ -1644,8 +1644,8 @@
                 "path": "bottom-navigation/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0px 0px 5px rgba(0, 0, 0, 0.12)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
         },
         {
             "description": "The text color of the flat BottomNavigation.\n",
@@ -4128,8 +4128,8 @@
                 "path": "button/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
         },
         {
             "description": "The base background of the hovered Button.\n",
@@ -4383,7 +4383,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-button-active-shadow",
-                "value": "$box-shadow-depth-3",
+                "value": "$box-shadow-depth-6",
                 "scope": "default",
                 "line": {
                     "start": 157,
@@ -4398,8 +4398,8 @@
                 "path": "button/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-6, 0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 8px 10px 0px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
         },
         {
             "description": "The base background color of the selected Button.\n",
@@ -8001,7 +8001,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-color-gradient-focus-shadow",
-                "value": "$box-shadow-depth-2",
+                "value": "$box-shadow-depth-3",
                 "scope": "default",
                 "line": {
                     "start": 51,
@@ -8016,8 +8016,8 @@
                 "path": "colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
         },
         {
             "description": "The border radius of the ColorGradient canvas.\n",
@@ -8317,15 +8317,15 @@
             "resolvedType": "Number"
         },
         {
-            "description": "The border radius of the ColorGradient canvas drag handle.\n",
+            "description": "The width of the outline around the ColorGradient canvas drag handle.\n",
             "commentRange": {
                 "start": 89,
                 "end": 90
             },
             "context": {
                 "type": "variable",
-                "name": "kendo-color-gradient-draghandle-border-radius",
-                "value": "50%",
+                "name": "kendo-color-gradient-draghandle-outline-width",
+                "value": "1px",
                 "scope": "default",
                 "line": {
                     "start": 91,
@@ -8340,19 +8340,19 @@
                 "path": "colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "50%",
+            "resolvedValue": "1px",
             "resolvedType": "Number"
         },
         {
-            "description": "The text color of the ColorGradient canvas drag handle.\n",
+            "description": "The border radius of the ColorGradient canvas drag handle.\n",
             "commentRange": {
                 "start": 92,
                 "end": 93
             },
             "context": {
                 "type": "variable",
-                "name": "kendo-color-gradient-draghandle-text",
-                "value": "null",
+                "name": "kendo-color-gradient-draghandle-border-radius",
+                "value": "50%",
                 "scope": "default",
                 "line": {
                     "start": 94,
@@ -8367,19 +8367,19 @@
                 "path": "colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "null",
-            "resolvedType": "Null"
+            "resolvedValue": "50%",
+            "resolvedType": "Number"
         },
         {
-            "description": "The background color of the ColorGradient canvas drag handle.\n",
+            "description": "The text color of the ColorGradient canvas drag handle.\n",
             "commentRange": {
                 "start": 95,
                 "end": 96
             },
             "context": {
                 "type": "variable",
-                "name": "kendo-color-gradient-draghandle-bg",
-                "value": "transparent",
+                "name": "kendo-color-gradient-draghandle-text",
+                "value": "null",
                 "scope": "default",
                 "line": {
                     "start": 97,
@@ -8394,19 +8394,19 @@
                 "path": "colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "transparent",
-            "resolvedType": "Color"
+            "resolvedValue": "null",
+            "resolvedType": "Null"
         },
         {
-            "description": "The color of the border around the ColorGradient canvas drag handle.\n",
+            "description": "The background color of the ColorGradient canvas drag handle.\n",
             "commentRange": {
                 "start": 98,
                 "end": 99
             },
             "context": {
                 "type": "variable",
-                "name": "kendo-color-gradient-draghandle-border",
-                "value": "rgba( white, .8 )",
+                "name": "kendo-color-gradient-draghandle-bg",
+                "value": "transparent",
                 "scope": "default",
                 "line": {
                     "start": 100,
@@ -8421,19 +8421,19 @@
                 "path": "colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "rgba(255, 255, 255, 0.8)",
+            "resolvedValue": "transparent",
             "resolvedType": "Color"
         },
         {
-            "description": "The box shadow of the ColorGradient canvas drag handle.\n",
+            "description": "The color of the border around the ColorGradient canvas drag handle.\n",
             "commentRange": {
                 "start": 101,
                 "end": 102
             },
             "context": {
                 "type": "variable",
-                "name": "kendo-color-gradient-draghandle-shadow",
-                "value": "0 1px 4px rgba( black, .5 )",
+                "name": "kendo-color-gradient-draghandle-border",
+                "value": "rgba( white, .8 )",
                 "scope": "default",
                 "line": {
                     "start": 103,
@@ -8448,19 +8448,19 @@
                 "path": "colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 1px 4px rgba(0, 0, 0, 0.5)",
-            "resolvedType": "List"
+            "resolvedValue": "rgba(255, 255, 255, 0.8)",
+            "resolvedType": "Color"
         },
         {
-            "description": "The box shadow of the focused ColorGradient canvas drag handle.\n",
+            "description": "The color of the outline around the ColorGradient canvas drag handle.\n",
             "commentRange": {
                 "start": 104,
                 "end": 105
             },
             "context": {
                 "type": "variable",
-                "name": "kendo-color-gradient-draghandle-focus-shadow",
-                "value": "0 1px 4px black",
+                "name": "kendo-color-gradient-draghandle-shadow",
+                "value": "rgba( $kendo-color-black, .5)",
                 "scope": "default",
                 "line": {
                     "start": 106,
@@ -8475,19 +8475,19 @@
                 "path": "colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 1px 4px black",
-            "resolvedType": "List"
+            "resolvedValue": "rgba(0, 0, 0, 0.5)",
+            "resolvedType": "Color"
         },
         {
-            "description": "The box shadow of the hovered ColorGradient canvas drag handle.\n",
+            "description": "The focus color of the outline around the ColorGradient canvas drag handle.\n",
             "commentRange": {
                 "start": 107,
                 "end": 108
             },
             "context": {
                 "type": "variable",
-                "name": "kendo-color-gradient-draghandle-hover-shadow",
-                "value": "$kendo-color-gradient-draghandle-focus-shadow",
+                "name": "kendo-color-gradient-draghandle-focus-shadow",
+                "value": "$kendo-color-black",
                 "scope": "default",
                 "line": {
                     "start": 109,
@@ -8502,14 +8502,68 @@
                 "path": "colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 1px 4px black",
-            "resolvedType": "List"
+            "resolvedValue": "#000000",
+            "resolvedType": "Color"
+        },
+        {
+            "description": "The outline color of the outline around the ColorGradient canvas drag handle.\n",
+            "commentRange": {
+                "start": 110,
+                "end": 111
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-color-gradient-draghandle-hover-shadow",
+                "value": "$kendo-color-black",
+                "scope": "default",
+                "line": {
+                    "start": 112,
+                    "end": 112
+                }
+            },
+            "group": [
+                "cologradient"
+            ],
+            "access": "public",
+            "file": {
+                "path": "colorgradient/_variables.scss",
+                "name": "_variables.scss"
+            },
+            "resolvedValue": "#000000",
+            "resolvedType": "Color"
+        },
+        {
+            "description": "The box shadow of the ColorGradient canvas drag handle.\n",
+            "commentRange": {
+                "start": 113,
+                "end": 114
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-color-gradient-draghandle-shadow",
+                "value": "k-elevation(2)",
+                "scope": "default",
+                "line": {
+                    "start": 115,
+                    "end": 115
+                }
+            },
+            "group": [
+                "cologradient"
+            ],
+            "access": "public",
+            "file": {
+                "path": "colorgradient/_variables.scss",
+                "name": "_variables.scss"
+            },
+            "resolvedValue": "rgba(0, 0, 0, 0.5)",
+            "resolvedType": "Color"
         },
         {
             "description": "The vertical margin of the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 111,
-                "end": 112
+                "start": 117,
+                "end": 118
             },
             "context": {
                 "type": "variable",
@@ -8517,8 +8571,8 @@
                 "value": "- k-math-div( $kendo-color-gradient-draghandle-height, 2 )",
                 "scope": "default",
                 "line": {
-                    "start": 113,
-                    "end": 113
+                    "start": 119,
+                    "end": 119
                 }
             },
             "group": [
@@ -8535,8 +8589,8 @@
         {
             "description": "The horizontal margin of the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 114,
-                "end": 115
+                "start": 120,
+                "end": 121
             },
             "context": {
                 "type": "variable",
@@ -8544,8 +8598,8 @@
                 "value": "- k-math-div( $kendo-color-gradient-draghandle-width, 2 )",
                 "scope": "default",
                 "line": {
-                    "start": 116,
-                    "end": 116
+                    "start": 122,
+                    "end": 122
                 }
             },
             "group": [
@@ -8562,8 +8616,8 @@
         {
             "description": "The width of the ColorGradient input.\n",
             "commentRange": {
-                "start": 118,
-                "end": 119
+                "start": 124,
+                "end": 125
             },
             "context": {
                 "type": "variable",
@@ -8571,8 +8625,8 @@
                 "value": "50px",
                 "scope": "default",
                 "line": {
-                    "start": 120,
-                    "end": 120
+                    "start": 126,
+                    "end": 126
                 }
             },
             "group": [
@@ -8589,8 +8643,8 @@
         {
             "description": "The spacing between the ColorGradient inputs.\n",
             "commentRange": {
-                "start": 121,
-                "end": 122
+                "start": 127,
+                "end": 128
             },
             "context": {
                 "type": "variable",
@@ -8598,8 +8652,8 @@
                 "value": "k-map-get( $kendo-spacing, 2 )",
                 "scope": "default",
                 "line": {
-                    "start": 123,
-                    "end": 123
+                    "start": 129,
+                    "end": 129
                 }
             },
             "group": [
@@ -8616,8 +8670,8 @@
         {
             "description": "The spacing between the ColorGradient inputs and their labels.\n",
             "commentRange": {
-                "start": 124,
-                "end": 125
+                "start": 130,
+                "end": 131
             },
             "context": {
                 "type": "variable",
@@ -8625,8 +8679,8 @@
                 "value": "k-map-get( $kendo-spacing, 1 )",
                 "scope": "default",
                 "line": {
-                    "start": 126,
-                    "end": 126
+                    "start": 132,
+                    "end": 132
                 }
             },
             "group": [
@@ -8643,8 +8697,8 @@
         {
             "description": "The text color of the ColorGradient input labels.\n",
             "commentRange": {
-                "start": 127,
-                "end": 128
+                "start": 133,
+                "end": 134
             },
             "context": {
                 "type": "variable",
@@ -8652,8 +8706,8 @@
                 "value": "$kendo-subtle-text",
                 "scope": "default",
                 "line": {
-                    "start": 129,
-                    "end": 129
+                    "start": 135,
+                    "end": 135
                 }
             },
             "group": [
@@ -8670,8 +8724,8 @@
         {
             "description": "The font weight of the ColorGradient contrast ratio text.\n",
             "commentRange": {
-                "start": 131,
-                "end": 132
+                "start": 137,
+                "end": 138
             },
             "context": {
                 "type": "variable",
@@ -8679,8 +8733,8 @@
                 "value": "$kendo-font-weight-medium",
                 "scope": "default",
                 "line": {
-                    "start": 133,
-                    "end": 133
+                    "start": 139,
+                    "end": 139
                 }
             },
             "group": [
@@ -8697,8 +8751,8 @@
         {
             "description": "The spacing between the items in the ColorGradient contrast tool.\n",
             "commentRange": {
-                "start": 134,
-                "end": 135
+                "start": 140,
+                "end": 141
             },
             "context": {
                 "type": "variable",
@@ -8706,8 +8760,8 @@
                 "value": "k-map-get( $kendo-spacing, 2 )",
                 "scope": "default",
                 "line": {
-                    "start": 136,
-                    "end": 136
+                    "start": 142,
+                    "end": 142
                 }
             },
             "group": [
@@ -8780,8 +8834,8 @@
         {
             "description": "The color that focuses the user attention.\nUsed for primary buttons and for elements of primary importance across the theme.\n",
             "commentRange": {
-                "start": 165,
-                "end": 168
+                "start": 190,
+                "end": 193
             },
             "context": {
                 "type": "variable",
@@ -8789,8 +8843,8 @@
                 "value": "material-color( $primary-palette, main )",
                 "scope": "default",
                 "line": {
-                    "start": 169,
-                    "end": 169
+                    "start": 194,
+                    "end": 194
                 }
             },
             "group": [
@@ -8808,8 +8862,8 @@
         {
             "description": "The color used along with the primary color denoted by $kendo-color-primary.\nUsed to provide contrast between the background and foreground colors.\n",
             "commentRange": {
-                "start": 173,
-                "end": 176
+                "start": 198,
+                "end": 201
             },
             "context": {
                 "type": "variable",
@@ -8817,8 +8871,8 @@
                 "value": "material-color( $primary-palette, main-contrast )",
                 "scope": "default",
                 "line": {
-                    "start": 177,
-                    "end": 177
+                    "start": 202,
+                    "end": 202
                 }
             },
             "group": [
@@ -8836,8 +8890,8 @@
         {
             "description": "The secondary color of the theme.\n",
             "commentRange": {
-                "start": 179,
-                "end": 181
+                "start": 204,
+                "end": 206
             },
             "context": {
                 "type": "variable",
@@ -8845,8 +8899,8 @@
                 "value": "material-color( $secondary-palette, main )",
                 "scope": "default",
                 "line": {
-                    "start": 182,
-                    "end": 182
+                    "start": 207,
+                    "end": 207
                 }
             },
             "group": [
@@ -8864,8 +8918,8 @@
         {
             "description": "The color used along with the secondary color denoted by $kendo-color-secondary.\nUsed to provide contrast between the background and foreground colors.\n",
             "commentRange": {
-                "start": 186,
-                "end": 189
+                "start": 211,
+                "end": 214
             },
             "context": {
                 "type": "variable",
@@ -8873,8 +8927,8 @@
                 "value": "material-color( $secondary-palette, main-contrast )",
                 "scope": "default",
                 "line": {
-                    "start": 190,
-                    "end": 190
+                    "start": 215,
+                    "end": 215
                 }
             },
             "group": [
@@ -8892,8 +8946,8 @@
         {
             "description": "The tertiary color of the theme.\n",
             "commentRange": {
-                "start": 192,
-                "end": 194
+                "start": 217,
+                "end": 219
             },
             "context": {
                 "type": "variable",
@@ -8901,8 +8955,8 @@
                 "value": "material-color($tertiary-palette, main)",
                 "scope": "default",
                 "line": {
-                    "start": 195,
-                    "end": 195
+                    "start": 220,
+                    "end": 220
                 }
             },
             "group": [
@@ -8920,8 +8974,8 @@
         {
             "description": "The color used along with the tertiary color denoted by $kendo-color-tertiary.\nUsed to provide contrast between the background and foreground colors.\n",
             "commentRange": {
-                "start": 199,
-                "end": 202
+                "start": 224,
+                "end": 227
             },
             "context": {
                 "type": "variable",
@@ -8929,8 +8983,8 @@
                 "value": "material-color($tertiary-palette, main-contrast)",
                 "scope": "default",
                 "line": {
-                    "start": 203,
-                    "end": 203
+                    "start": 228,
+                    "end": 228
                 }
             },
             "group": [
@@ -8948,8 +9002,8 @@
         {
             "description": "The color for informational messages and states.\n",
             "commentRange": {
-                "start": 205,
-                "end": 207
+                "start": 230,
+                "end": 232
             },
             "context": {
                 "type": "variable",
@@ -8957,8 +9011,8 @@
                 "value": "#0058e9",
                 "scope": "default",
                 "line": {
-                    "start": 208,
-                    "end": 208
+                    "start": 233,
+                    "end": 233
                 }
             },
             "group": [
@@ -8976,8 +9030,8 @@
         {
             "description": "The color for success messages and states.\n",
             "commentRange": {
-                "start": 212,
-                "end": 214
+                "start": 237,
+                "end": 239
             },
             "context": {
                 "type": "variable",
@@ -8985,8 +9039,8 @@
                 "value": "#37b400",
                 "scope": "default",
                 "line": {
-                    "start": 215,
-                    "end": 215
+                    "start": 240,
+                    "end": 240
                 }
             },
             "group": [
@@ -9004,8 +9058,8 @@
         {
             "description": "The color for warning messages and states.\n",
             "commentRange": {
-                "start": 219,
-                "end": 221
+                "start": 244,
+                "end": 246
             },
             "context": {
                 "type": "variable",
@@ -9013,8 +9067,8 @@
                 "value": "#ffc000",
                 "scope": "default",
                 "line": {
-                    "start": 222,
-                    "end": 222
+                    "start": 247,
+                    "end": 247
                 }
             },
             "group": [
@@ -9032,8 +9086,8 @@
         {
             "description": "The color for error messages and states.\n",
             "commentRange": {
-                "start": 226,
-                "end": 228
+                "start": 251,
+                "end": 253
             },
             "context": {
                 "type": "variable",
@@ -9041,8 +9095,8 @@
                 "value": "#f31700",
                 "scope": "default",
                 "line": {
-                    "start": 229,
-                    "end": 229
+                    "start": 254,
+                    "end": 254
                 }
             },
             "group": [
@@ -9060,8 +9114,8 @@
         {
             "description": "The dark color of the theme.\n",
             "commentRange": {
-                "start": 233,
-                "end": 235
+                "start": 258,
+                "end": 260
             },
             "context": {
                 "type": "variable",
@@ -9069,8 +9123,8 @@
                 "value": "get-base-hue( gray, 800 )",
                 "scope": "default",
                 "line": {
-                    "start": 236,
-                    "end": 236
+                    "start": 261,
+                    "end": 261
                 }
             },
             "group": [
@@ -9088,8 +9142,8 @@
         {
             "description": "The light color of the theme.\n",
             "commentRange": {
-                "start": 238,
-                "end": 240
+                "start": 263,
+                "end": 265
             },
             "context": {
                 "type": "variable",
@@ -9097,8 +9151,8 @@
                 "value": "get-base-hue( gray, 100 )",
                 "scope": "default",
                 "line": {
-                    "start": 241,
-                    "end": 241
+                    "start": 266,
+                    "end": 266
                 }
             },
             "group": [
@@ -9116,8 +9170,8 @@
         {
             "description": "Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark\n",
             "commentRange": {
-                "start": 243,
-                "end": 244
+                "start": 268,
+                "end": 269
             },
             "context": {
                 "type": "variable",
@@ -9125,8 +9179,8 @@
                 "value": "if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark )",
                 "scope": "default",
                 "line": {
-                    "start": 245,
-                    "end": 245
+                    "start": 270,
+                    "end": 270
                 }
             },
             "group": [
@@ -9502,7 +9556,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-color-editor-focus-shadow",
-                "value": "$box-shadow-depth-2",
+                "value": "$box-shadow-depth-3",
                 "scope": "default",
                 "line": {
                     "start": 40,
@@ -9517,8 +9571,8 @@
                 "path": "coloreditor/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
         },
         {
             "description": "The vertical padding of the ColorEditor header.\n",
@@ -10063,8 +10117,8 @@
         {
             "description": "Background color of a component.\nNote: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.\n",
             "commentRange": {
-                "start": 337,
-                "end": 339
+                "start": 362,
+                "end": 364
             },
             "context": {
                 "type": "variable",
@@ -10072,8 +10126,8 @@
                 "value": "k-map-get( $theme, component-bg )",
                 "scope": "default",
                 "line": {
-                    "start": 340,
-                    "end": 340
+                    "start": 365,
+                    "end": 365
                 }
             },
             "group": [
@@ -10090,8 +10144,8 @@
         {
             "description": "Text color of a component.\nNote: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`.\n",
             "commentRange": {
-                "start": 341,
-                "end": 343
+                "start": 366,
+                "end": 368
             },
             "context": {
                 "type": "variable",
@@ -10099,8 +10153,8 @@
                 "value": "k-map-get( $theme, component-text )",
                 "scope": "default",
                 "line": {
-                    "start": 344,
-                    "end": 344
+                    "start": 369,
+                    "end": 369
                 }
             },
             "group": [
@@ -10117,8 +10171,8 @@
         {
             "description": "Border color of a component.\nNote: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.\n",
             "commentRange": {
-                "start": 345,
-                "end": 347
+                "start": 370,
+                "end": 372
             },
             "context": {
                 "type": "variable",
@@ -10126,8 +10180,8 @@
                 "value": "k-map-get( $theme, component-border )",
                 "scope": "default",
                 "line": {
-                    "start": 348,
-                    "end": 348
+                    "start": 373,
+                    "end": 373
                 }
             },
             "group": [
@@ -11788,6 +11842,33 @@
             "resolvedValue": "#88ccff",
             "resolvedType": "Color"
         },
+        {
+            "description": "Global Elevation.\n",
+            "commentRange": {
+                "start": 49,
+                "end": 50
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-elevation",
+                "value": "$_default-elevation",
+                "scope": "default",
+                "line": {
+                    "start": 51,
+                    "end": 51
+                }
+            },
+            "group": [
+                "elevation"
+            ],
+            "access": "public",
+            "file": {
+                "path": "core/elevation/index.import.scss",
+                "name": "index.import.scss"
+            },
+            "resolvedValue": "(1: (0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14)), 2: (0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14)), 3: (0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14)), 4: (0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14)), 5: (0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14)), 6: (0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 8px 10px 0px rgba(0, 0, 0, 0.14)), 7: (0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14)), 8: (0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14)), 9: (0px 11px 15px rgba(0, 0, 0, 0.2), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 24px 38px rgba(0, 0, 0, 0.14)))",
+            "resolvedType": "Map"
+        },
         {
             "description": "The vertical spacing of the ExpansionPanel.\n",
             "commentRange": {
@@ -13417,7 +13498,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-fab-shadow",
-                "value": "0px 3px 5px -1px rgba( black, .2 ), 0px 6px 10px rgba( black, .14 ), 0px 1px 18px rgba( black, .12 )",
+                "value": "$box-shadow-depth-5",
                 "scope": "default",
                 "line": {
                     "start": 118,
@@ -13432,8 +13513,8 @@
                 "path": "fab/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
         },
         {
             "description": "The shadow of the disabled FAB.\n",
@@ -13444,7 +13525,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-fab-disabled-shadow",
-                "value": "0px 3px 5px -1px k-try-tint( rgba( black, .2 ), .5 ), 0px 6px 10px k-try-tint( rgba( black, .14 ), .5 ), 0px 1px 18px k-try-tint( rgba( black, .12 ), .5 )",
+                "value": "$box-shadow-depth-5",
                 "scope": "default",
                 "line": {
                     "start": 121,
@@ -13459,8 +13540,8 @@
                 "path": "fab/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0px 3px 5px -1px rgba(70, 70, 70, 0.232), 0px 6px 10px rgba(91, 91, 91, 0.1744), 0px 1px 18px rgba(101, 101, 101, 0.1552)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
         },
         {
             "description": "The shadow of the active FAB.\n",
@@ -13471,7 +13552,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-fab-active-shadow",
-                "value": "0px 5px 5px -3px rgba( black, .2 ), 0px 8px 10px 1px rgba( black, .14 ), 0px 3px 14px 2px rgba( black, .12 )",
+                "value": "$box-shadow-depth-7",
                 "scope": "default",
                 "line": {
                     "start": 124,
@@ -13486,8 +13567,8 @@
                 "path": "fab/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-7, 0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
         },
         {
             "description": "The base text color of the FAB item.\n",
@@ -13675,8 +13756,8 @@
                 "path": "fab/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
         },
         {
             "description": "The shadow of the disabled FAB item.\n",
@@ -13702,8 +13783,8 @@
                 "path": "fab/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0px 3px 5px -1px rgba(70, 70, 70, 0.232), 0px 6px 10px rgba(91, 91, 91, 0.1744), 0px 1px 18px rgba(101, 101, 101, 0.1552)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
         },
         {
             "description": "The shadow of the active FAB item.\n",
@@ -13729,8 +13810,8 @@
                 "path": "fab/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-7, 0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
         },
         {
             "description": "The transformation scale of the Floating Label.\n",
@@ -22585,8 +22666,8 @@
                 "path": "notification/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
         },
         {
             "description": "The horizontal spacing of the Notification icon.\n",
@@ -25393,8 +25474,8 @@
                 "path": "popover/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
         },
         {
             "description": "The horizontal padding of the Popover header.\n",
@@ -26134,7 +26215,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-popup-shadow",
-                "value": "0 2px 4px -1px rgba( $elevation, .2 ), 0 4px 5px 0 rgba( $elevation, .14 ), 0 1px 10px 0 rgba( $elevation, .12 )",
+                "value": "$box-shadow-depth-4",
                 "scope": "default",
                 "line": {
                     "start": 39,
@@ -26149,8 +26230,8 @@
                 "path": "popup/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
         },
         {
             "description": "The height of the ProgressBar.\n",
@@ -28748,136 +28829,253 @@
             "description": "Shadow for switch.\nEquivalent to material elevation 1.\n",
             "commentRange": {
                 "start": 93,
-                "end": 95
+                "end": 96
             },
             "context": {
                 "type": "variable",
                 "name": "box-shadow-depth-1",
-                "value": "0 2px 1px -1px rgba( $elevation, .2 ), 0 1px 1px 0 rgba( $elevation, .14 ), 0 1px 3px 0 rgba( $elevation, .12 )",
+                "value": "k-elevation(1)",
                 "scope": "default",
                 "line": {
-                    "start": 96,
-                    "end": 96
+                    "start": 97,
+                    "end": 97
                 }
             },
             "group": [
                 "shadows"
             ],
+            "deprecated": "Use the `$kendo-elevation` map instead.",
             "access": "public",
             "file": {
                 "path": "_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
         },
         {
             "description": "Shadow for resting state of button, card and other widgets.\nEquivalent to material elevation 2.\n",
             "commentRange": {
-                "start": 97,
-                "end": 99
+                "start": 98,
+                "end": 101
             },
             "context": {
                 "type": "variable",
                 "name": "box-shadow-depth-2",
-                "value": "0 3px 1px -2px rgba( $elevation, .2 ), 0 2px 2px 0 rgba( $elevation, .14 ), 0 1px 5px 0 rgba( $elevation, .12 )",
+                "value": "k-elevation(2)",
                 "scope": "default",
                 "line": {
-                    "start": 100,
-                    "end": 100
+                    "start": 102,
+                    "end": 102
                 }
             },
             "group": [
                 "shadows"
             ],
+            "deprecated": "Use the `$kendo-elevation` map instead.",
             "access": "public",
             "file": {
                 "path": "_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
         },
         {
-            "description": "Shadow for menu, popups and raised state of button and card.\nEquivalent to material elevation 8.\n",
+            "description": "Shadow for menu, popups and raised state of button and card.\nEquivalent to material elevation 3.\n",
             "commentRange": {
-                "start": 101,
-                "end": 103
+                "start": 103,
+                "end": 106
             },
             "context": {
                 "type": "variable",
                 "name": "box-shadow-depth-3",
-                "value": "0 5px 5px -3px rgba( $elevation, .2 ), 0 8px 10px 1px rgba( $elevation, .14 ), 0 3px 14px 2px rgba( $elevation, .12 )",
+                "value": "k-elevation(3)",
                 "scope": "default",
                 "line": {
-                    "start": 104,
-                    "end": 104
+                    "start": 107,
+                    "end": 107
                 }
             },
             "group": [
                 "shadows"
             ],
+            "deprecated": "Use the `$kendo-elevation` map instead.",
             "access": "public",
             "file": {
                 "path": "_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
         },
         {
-            "description": "Shadow for drawers and other overlaying elements.\nEquivalent to material elevation 16.\n",
+            "description": "Shadow for drawers and other overlaying elements.\nEquivalent to material elevation 4.\n",
             "commentRange": {
-                "start": 105,
-                "end": 107
+                "start": 108,
+                "end": 111
             },
             "context": {
                 "type": "variable",
                 "name": "box-shadow-depth-4",
-                "value": "0 8px 10px -5px rgba( $elevation, .2 ), 0 16px 24px 2px rgba( $elevation, .14 ), 0 6px 30px 5px rgba( $elevation, .12 )",
+                "value": "k-elevation(4)",
                 "scope": "default",
                 "line": {
-                    "start": 108,
-                    "end": 108
+                    "start": 112,
+                    "end": 112
                 }
             },
             "group": [
                 "shadows"
             ],
+            "deprecated": "Use the `$kendo-elevation` map instead.",
             "access": "public",
             "file": {
                 "path": "_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
         },
         {
-            "description": "Shadow for window and dialog.\nEquivalent to material elevation 24.\n",
+            "description": "Shadow for window and dialog.\nEquivalent to material elevation 6.\n",
             "commentRange": {
-                "start": 109,
-                "end": 111
+                "start": 113,
+                "end": 116
             },
             "context": {
                 "type": "variable",
                 "name": "box-shadow-depth-5",
-                "value": "0 11px 15px -7px rgba( $elevation, .2 ), 0 24px 38px 3px rgba( $elevation, .14 ), 0 9px 46px 8px rgba( $elevation, .12 )",
+                "value": "k-elevation(5)",
                 "scope": "default",
                 "line": {
-                    "start": 112,
-                    "end": 112
+                    "start": 117,
+                    "end": 117
                 }
             },
             "group": [
                 "shadows"
             ],
+            "deprecated": "Use the `$kendo-elevation` map instead.",
             "access": "public",
             "file": {
                 "path": "_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
+        },
+        {
+            "description": "Shadow for window and dialog.\nEquivalent to material elevation 8.\n",
+            "commentRange": {
+                "start": 118,
+                "end": 121
+            },
+            "context": {
+                "type": "variable",
+                "name": "box-shadow-depth-6",
+                "value": "k-elevation(6)",
+                "scope": "default",
+                "line": {
+                    "start": 122,
+                    "end": 122
+                }
+            },
+            "group": [
+                "shadows"
+            ],
+            "deprecated": "Use the `$kendo-elevation` map instead.",
+            "access": "public",
+            "file": {
+                "path": "_variables.scss",
+                "name": "_variables.scss"
+            },
+            "resolvedValue": "var(--kendo-elevation-6, 0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 8px 10px 0px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
+        },
+        {
+            "description": "Shadow for window and dialog.\nEquivalent to material elevation 12.\n",
+            "commentRange": {
+                "start": 123,
+                "end": 126
+            },
+            "context": {
+                "type": "variable",
+                "name": "box-shadow-depth-7",
+                "value": "k-elevation(7)",
+                "scope": "default",
+                "line": {
+                    "start": 127,
+                    "end": 127
+                }
+            },
+            "group": [
+                "shadows"
+            ],
+            "deprecated": "Use the `$kendo-elevation` map instead.",
+            "access": "public",
+            "file": {
+                "path": "_variables.scss",
+                "name": "_variables.scss"
+            },
+            "resolvedValue": "var(--kendo-elevation-7, 0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
+        },
+        {
+            "description": "Shadow for window and dialog.\nEquivalent to material elevation 16.\n",
+            "commentRange": {
+                "start": 128,
+                "end": 131
+            },
+            "context": {
+                "type": "variable",
+                "name": "box-shadow-depth-8",
+                "value": "k-elevation(8)",
+                "scope": "default",
+                "line": {
+                    "start": 132,
+                    "end": 132
+                }
+            },
+            "group": [
+                "shadows"
+            ],
+            "deprecated": "Use the `$kendo-elevation` map instead.",
+            "access": "public",
+            "file": {
+                "path": "_variables.scss",
+                "name": "_variables.scss"
+            },
+            "resolvedValue": "var(--kendo-elevation-8, 0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
+        },
+        {
+            "description": "Shadow for window and dialog.\nEquivalent to material elevation 24.\n",
+            "commentRange": {
+                "start": 133,
+                "end": 136
+            },
+            "context": {
+                "type": "variable",
+                "name": "box-shadow-depth-9",
+                "value": "k-elevation(9)",
+                "scope": "default",
+                "line": {
+                    "start": 137,
+                    "end": 137
+                }
+            },
+            "group": [
+                "shadows"
+            ],
+            "deprecated": "Use the `$kendo-elevation` map instead.",
+            "access": "public",
+            "file": {
+                "path": "_variables.scss",
+                "name": "_variables.scss"
+            },
+            "resolvedValue": "var(--kendo-elevation-9, 0px 11px 15px rgba(0, 0, 0, 0.2), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 24px 38px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
         },
         {
             "description": "The focus shadow of the SplitButton.\n",
@@ -32440,8 +32638,8 @@
                 "path": "tilelayout/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
         },
         {
             "description": "The width of the border around the TileLayout hint.\n",
@@ -33127,7 +33325,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-toolbar-shadow",
-                "value": "$box-shadow-depth-2",
+                "value": "$box-shadow-depth-4",
                 "scope": "default",
                 "line": {
                     "start": 73,
@@ -33142,8 +33340,8 @@
                 "path": "toolbar/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
         },
         {
             "description": "The color of the separator border of the Toolbar.\n",
@@ -34606,8 +34804,8 @@
         {
             "description": "Base font size across all components.\n",
             "commentRange": {
-                "start": 264,
-                "end": 265
+                "start": 289,
+                "end": 290
             },
             "context": {
                 "type": "variable",
@@ -34615,8 +34813,8 @@
                 "value": "14px",
                 "scope": "default",
                 "line": {
-                    "start": 266,
-                    "end": 266
+                    "start": 291,
+                    "end": 291
                 }
             },
             "group": [
@@ -34633,8 +34831,8 @@
         {
             "description": "Font family for text.\n",
             "commentRange": {
-                "start": 281,
-                "end": 282
+                "start": 306,
+                "end": 307
             },
             "context": {
                 "type": "variable",
@@ -34642,8 +34840,8 @@
                 "value": "Roboto, \"Helvetica Neue\", sans-serif",
                 "scope": "default",
                 "line": {
-                    "start": 283,
-                    "end": 283
+                    "start": 308,
+                    "end": 308
                 }
             },
             "group": [
@@ -34660,8 +34858,8 @@
         {
             "description": "Font family across all components.\n",
             "commentRange": {
-                "start": 285,
-                "end": 286
+                "start": 310,
+                "end": 311
             },
             "context": {
                 "type": "variable",
@@ -34669,8 +34867,8 @@
                 "value": "Roboto, \"Helvetica Neue\", sans-serif",
                 "scope": "default",
                 "line": {
-                    "start": 287,
-                    "end": 287
+                    "start": 312,
+                    "end": 312
                 }
             },
             "group": [
@@ -34687,8 +34885,8 @@
         {
             "description": "Font family for monospaced text. Used for styling the code.\n",
             "commentRange": {
-                "start": 289,
-                "end": 290
+                "start": 314,
+                "end": 315
             },
             "context": {
                 "type": "variable",
@@ -34696,8 +34894,8 @@
                 "value": "Consolas, \"Ubuntu Mono\", \"Lucida Console\", \"Courier New\", monospace",
                 "scope": "default",
                 "line": {
-                    "start": 291,
-                    "end": 291
+                    "start": 316,
+                    "end": 316
                 }
             },
             "group": [
@@ -34714,8 +34912,8 @@
         {
             "description": "Font family across all components.\n",
             "commentRange": {
-                "start": 293,
-                "end": 294
+                "start": 318,
+                "end": 319
             },
             "context": {
                 "type": "variable",
@@ -34723,8 +34921,8 @@
                 "value": "Roboto, \"Helvetica Neue\", sans-serif",
                 "scope": "default",
                 "line": {
-                    "start": 295,
-                    "end": 295
+                    "start": 320,
+                    "end": 320
                 }
             },
             "group": [
@@ -34741,8 +34939,8 @@
         {
             "description": "Line height used along with $kendo-font-size.\n",
             "commentRange": {
-                "start": 297,
-                "end": 298
+                "start": 322,
+                "end": 323
             },
             "context": {
                 "type": "variable",
@@ -34750,8 +34948,8 @@
                 "value": "k-math-div( 28, 14 )",
                 "scope": "default",
                 "line": {
-                    "start": 299,
-                    "end": 299
+                    "start": 324,
+                    "end": 324
                 }
             },
             "group": [
@@ -34768,8 +34966,8 @@
         {
             "description": "Border radius for all components.\n",
             "commentRange": {
-                "start": 139,
-                "end": 139
+                "start": 164,
+                "end": 164
             },
             "context": {
                 "type": "variable",
@@ -34777,8 +34975,8 @@
                 "value": "k-map-get( $kendo-spacing, 1 )",
                 "scope": "default",
                 "line": {
-                    "start": 140,
-                    "end": 140
+                    "start": 165,
+                    "end": 165
                 }
             },
             "access": "public",
@@ -34795,8 +34993,8 @@
         {
             "description": "The background of the components' chrome area.\n",
             "commentRange": {
-                "start": 351,
-                "end": 351
+                "start": 376,
+                "end": 376
             },
             "context": {
                 "type": "variable",
@@ -34804,8 +35002,8 @@
                 "value": "k-map-get( $theme, base-bg )",
                 "scope": "default",
                 "line": {
-                    "start": 352,
-                    "end": 352
+                    "start": 377,
+                    "end": 377
                 }
             },
             "access": "public",
@@ -34822,8 +35020,8 @@
         {
             "description": "The text color of the components' chrome area.\n",
             "commentRange": {
-                "start": 353,
-                "end": 353
+                "start": 378,
+                "end": 378
             },
             "context": {
                 "type": "variable",
@@ -34831,8 +35029,8 @@
                 "value": "k-map-get( $theme, component-text )",
                 "scope": "default",
                 "line": {
-                    "start": 354,
-                    "end": 354
+                    "start": 379,
+                    "end": 379
                 }
             },
             "access": "public",
@@ -34849,8 +35047,8 @@
         {
             "description": "The border of the components' chrome area.\n",
             "commentRange": {
-                "start": 355,
-                "end": 355
+                "start": 380,
+                "end": 380
             },
             "context": {
                 "type": "variable",
@@ -34858,8 +35056,8 @@
                 "value": "rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )",
                 "scope": "default",
                 "line": {
-                    "start": 356,
-                    "end": 356
+                    "start": 381,
+                    "end": 381
                 }
             },
             "access": "public",
@@ -34876,8 +35074,8 @@
         {
             "description": "The gradient background of the components' chrome area.\n",
             "commentRange": {
-                "start": 357,
-                "end": 357
+                "start": 382,
+                "end": 382
             },
             "context": {
                 "type": "variable",
@@ -34885,8 +35083,8 @@
                 "value": "null",
                 "scope": "default",
                 "line": {
-                    "start": 358,
-                    "end": 358
+                    "start": 383,
+                    "end": 383
                 }
             },
             "access": "public",
@@ -34903,8 +35101,8 @@
         {
             "description": "The background of hovered items.\n",
             "commentRange": {
-                "start": 360,
-                "end": 360
+                "start": 385,
+                "end": 385
             },
             "context": {
                 "type": "variable",
@@ -34912,8 +35110,8 @@
                 "value": "k-map-get( $theme, hover-bg )",
                 "scope": "default",
                 "line": {
-                    "start": 361,
-                    "end": 361
+                    "start": 386,
+                    "end": 386
                 }
             },
             "access": "public",
@@ -34930,8 +35128,8 @@
         {
             "description": "The text color of hovered items.\n",
             "commentRange": {
-                "start": 362,
-                "end": 362
+                "start": 387,
+                "end": 387
             },
             "context": {
                 "type": "variable",
@@ -34939,8 +35137,8 @@
                 "value": "$kendo-base-text",
                 "scope": "default",
                 "line": {
-                    "start": 363,
-                    "end": 363
+                    "start": 388,
+                    "end": 388
                 }
             },
             "access": "public",
@@ -34957,8 +35155,8 @@
         {
             "description": "The border color of hovered items.\n",
             "commentRange": {
-                "start": 364,
-                "end": 364
+                "start": 389,
+                "end": 389
             },
             "context": {
                 "type": "variable",
@@ -34966,8 +35164,8 @@
                 "value": "rgba( $kendo-base-border, .15 )",
                 "scope": "default",
                 "line": {
-                    "start": 365,
-                    "end": 365
+                    "start": 390,
+                    "end": 390
                 }
             },
             "access": "public",
@@ -34984,8 +35182,8 @@
         {
             "description": "The gradient background of hovered items.\n",
             "commentRange": {
-                "start": 366,
-                "end": 366
+                "start": 391,
+                "end": 391
             },
             "context": {
                 "type": "variable",
@@ -34993,8 +35191,8 @@
                 "value": "null",
                 "scope": "default",
                 "line": {
-                    "start": 367,
-                    "end": 367
+                    "start": 392,
+                    "end": 392
                 }
             },
             "access": "public",
@@ -35011,8 +35209,8 @@
         {
             "description": "The background of selected items.\n",
             "commentRange": {
-                "start": 369,
-                "end": 369
+                "start": 394,
+                "end": 394
             },
             "context": {
                 "type": "variable",
@@ -35020,8 +35218,8 @@
                 "value": "$kendo-color-secondary",
                 "scope": "default",
                 "line": {
-                    "start": 370,
-                    "end": 370
+                    "start": 395,
+                    "end": 395
                 }
             },
             "access": "public",
@@ -35038,8 +35236,8 @@
         {
             "description": "The text color of selected items.\n",
             "commentRange": {
-                "start": 371,
-                "end": 371
+                "start": 396,
+                "end": 396
             },
             "context": {
                 "type": "variable",
@@ -35047,8 +35245,8 @@
                 "value": "$kendo-color-secondary-contrast",
                 "scope": "default",
                 "line": {
-                    "start": 372,
-                    "end": 372
+                    "start": 397,
+                    "end": 397
                 }
             },
             "access": "public",
@@ -35065,8 +35263,8 @@
         {
             "description": "The border color of selected items.\n",
             "commentRange": {
-                "start": 373,
-                "end": 373
+                "start": 398,
+                "end": 398
             },
             "context": {
                 "type": "variable",
@@ -35074,8 +35272,8 @@
                 "value": "rgba( $kendo-base-border, .1 )",
                 "scope": "default",
                 "line": {
-                    "start": 374,
-                    "end": 374
+                    "start": 399,
+                    "end": 399
                 }
             },
             "access": "public",
@@ -35092,8 +35290,8 @@
         {
             "description": "The gradient background of selected items.\n",
             "commentRange": {
-                "start": 375,
-                "end": 375
+                "start": 400,
+                "end": 400
             },
             "context": {
                 "type": "variable",
@@ -35101,8 +35299,8 @@
                 "value": "null",
                 "scope": "default",
                 "line": {
-                    "start": 376,
-                    "end": 376
+                    "start": 401,
+                    "end": 401
                 }
             },
             "access": "public",
@@ -36529,7 +36727,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-window-shadow",
-                "value": "$box-shadow-depth-4",
+                "value": "$box-shadow-depth-8",
                 "scope": "default",
                 "line": {
                     "start": 79,
@@ -36544,8 +36742,8 @@
                 "path": "window/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-8, 0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
         },
         {
             "description": "The box shadow of the focused Window.\n",
@@ -36556,7 +36754,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-window-focus-shadow",
-                "value": "$box-shadow-depth-5",
+                "value": "$box-shadow-depth-9",
                 "scope": "default",
                 "line": {
                     "start": 82,
@@ -36571,8 +36769,8 @@
                 "path": "window/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-9, 0px 11px 15px rgba(0, 0, 0, 0.2), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 24px 38px rgba(0, 0, 0, 0.14))",
+            "resolvedType": "String"
         },
         {
             "description": "The background color of the Window titlebar.\n",
@@ -36749,8 +36947,8 @@
                 {
                     "description": "Border radius for all components.\n",
                     "commentRange": {
-                        "start": 139,
-                        "end": 139
+                        "start": 164,
+                        "end": 164
                     },
                     "context": {
                         "type": "variable",
@@ -36758,8 +36956,8 @@
                         "value": "k-map-get( $kendo-spacing, 1 )",
                         "scope": "default",
                         "line": {
-                            "start": 140,
-                            "end": 140
+                            "start": 165,
+                            "end": 165
                         }
                     },
                     "access": "public",
@@ -36776,8 +36974,8 @@
                 {
                     "description": "The background of the components' chrome area.\n",
                     "commentRange": {
-                        "start": 351,
-                        "end": 351
+                        "start": 376,
+                        "end": 376
                     },
                     "context": {
                         "type": "variable",
@@ -36785,8 +36983,8 @@
                         "value": "k-map-get( $theme, base-bg )",
                         "scope": "default",
                         "line": {
-                            "start": 352,
-                            "end": 352
+                            "start": 377,
+                            "end": 377
                         }
                     },
                     "access": "public",
@@ -36803,8 +37001,8 @@
                 {
                     "description": "The text color of the components' chrome area.\n",
                     "commentRange": {
-                        "start": 353,
-                        "end": 353
+                        "start": 378,
+                        "end": 378
                     },
                     "context": {
                         "type": "variable",
@@ -36812,8 +37010,8 @@
                         "value": "k-map-get( $theme, component-text )",
                         "scope": "default",
                         "line": {
-                            "start": 354,
-                            "end": 354
+                            "start": 379,
+                            "end": 379
                         }
                     },
                     "access": "public",
@@ -36830,8 +37028,8 @@
                 {
                     "description": "The border of the components' chrome area.\n",
                     "commentRange": {
-                        "start": 355,
-                        "end": 355
+                        "start": 380,
+                        "end": 380
                     },
                     "context": {
                         "type": "variable",
@@ -36839,8 +37037,8 @@
                         "value": "rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )",
                         "scope": "default",
                         "line": {
-                            "start": 356,
-                            "end": 356
+                            "start": 381,
+                            "end": 381
                         }
                     },
                     "access": "public",
@@ -36857,8 +37055,8 @@
                 {
                     "description": "The gradient background of the components' chrome area.\n",
                     "commentRange": {
-                        "start": 357,
-                        "end": 357
+                        "start": 382,
+                        "end": 382
                     },
                     "context": {
                         "type": "variable",
@@ -36866,8 +37064,8 @@
                         "value": "null",
                         "scope": "default",
                         "line": {
-                            "start": 358,
-                            "end": 358
+                            "start": 383,
+                            "end": 383
                         }
                     },
                     "access": "public",
@@ -36884,8 +37082,8 @@
                 {
                     "description": "The background of hovered items.\n",
                     "commentRange": {
-                        "start": 360,
-                        "end": 360
+                        "start": 385,
+                        "end": 385
                     },
                     "context": {
                         "type": "variable",
@@ -36893,8 +37091,8 @@
                         "value": "k-map-get( $theme, hover-bg )",
                         "scope": "default",
                         "line": {
-                            "start": 361,
-                            "end": 361
+                            "start": 386,
+                            "end": 386
                         }
                     },
                     "access": "public",
@@ -36911,8 +37109,8 @@
                 {
                     "description": "The text color of hovered items.\n",
                     "commentRange": {
-                        "start": 362,
-                        "end": 362
+                        "start": 387,
+                        "end": 387
                     },
                     "context": {
                         "type": "variable",
@@ -36920,8 +37118,8 @@
                         "value": "$kendo-base-text",
                         "scope": "default",
                         "line": {
-                            "start": 363,
-                            "end": 363
+                            "start": 388,
+                            "end": 388
                         }
                     },
                     "access": "public",
@@ -36938,8 +37136,8 @@
                 {
                     "description": "The border color of hovered items.\n",
                     "commentRange": {
-                        "start": 364,
-                        "end": 364
+                        "start": 389,
+                        "end": 389
                     },
                     "context": {
                         "type": "variable",
@@ -36947,8 +37145,8 @@
                         "value": "rgba( $kendo-base-border, .15 )",
                         "scope": "default",
                         "line": {
-                            "start": 365,
-                            "end": 365
+                            "start": 390,
+                            "end": 390
                         }
                     },
                     "access": "public",
@@ -36965,8 +37163,8 @@
                 {
                     "description": "The gradient background of hovered items.\n",
                     "commentRange": {
-                        "start": 366,
-                        "end": 366
+                        "start": 391,
+                        "end": 391
                     },
                     "context": {
                         "type": "variable",
@@ -36974,8 +37172,8 @@
                         "value": "null",
                         "scope": "default",
                         "line": {
-                            "start": 367,
-                            "end": 367
+                            "start": 392,
+                            "end": 392
                         }
                     },
                     "access": "public",
@@ -36992,8 +37190,8 @@
                 {
                     "description": "The background of selected items.\n",
                     "commentRange": {
-                        "start": 369,
-                        "end": 369
+                        "start": 394,
+                        "end": 394
                     },
                     "context": {
                         "type": "variable",
@@ -37001,8 +37199,8 @@
                         "value": "$kendo-color-secondary",
                         "scope": "default",
                         "line": {
-                            "start": 370,
-                            "end": 370
+                            "start": 395,
+                            "end": 395
                         }
                     },
                     "access": "public",
@@ -37019,8 +37217,8 @@
                 {
                     "description": "The text color of selected items.\n",
                     "commentRange": {
-                        "start": 371,
-                        "end": 371
+                        "start": 396,
+                        "end": 396
                     },
                     "context": {
                         "type": "variable",
@@ -37028,8 +37226,8 @@
                         "value": "$kendo-color-secondary-contrast",
                         "scope": "default",
                         "line": {
-                            "start": 372,
-                            "end": 372
+                            "start": 397,
+                            "end": 397
                         }
                     },
                     "access": "public",
@@ -37046,8 +37244,8 @@
                 {
                     "description": "The border color of selected items.\n",
                     "commentRange": {
-                        "start": 373,
-                        "end": 373
+                        "start": 398,
+                        "end": 398
                     },
                     "context": {
                         "type": "variable",
@@ -37055,8 +37253,8 @@
                         "value": "rgba( $kendo-base-border, .1 )",
                         "scope": "default",
                         "line": {
-                            "start": 374,
-                            "end": 374
+                            "start": 399,
+                            "end": 399
                         }
                     },
                     "access": "public",
@@ -37073,8 +37271,8 @@
                 {
                     "description": "The gradient background of selected items.\n",
                     "commentRange": {
-                        "start": 375,
-                        "end": 375
+                        "start": 400,
+                        "end": 400
                     },
                     "context": {
                         "type": "variable",
@@ -37082,8 +37280,8 @@
                         "value": "null",
                         "scope": "default",
                         "line": {
-                            "start": 376,
-                            "end": 376
+                            "start": 401,
+                            "end": 401
                         }
                     },
                     "access": "public",
@@ -37517,7 +37715,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-appbar-box-shadow",
-                        "value": "0px 2px 3px rgba( black, .24 )",
+                        "value": "$box-shadow-depth-4",
                         "scope": "default",
                         "line": {
                             "start": 51,
@@ -37532,8 +37730,8 @@
                         "path": "appbar/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0px 2px 3px rgba(0, 0, 0, 0.24)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The box shadow of the AppBar with bottom position.\n",
@@ -37544,7 +37742,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-appbar-bottom-box-shadow",
-                        "value": "0px -2px 3px rgba( black, .24 )",
+                        "value": "$kendo-appbar-box-shadow",
                         "scope": "default",
                         "line": {
                             "start": 54,
@@ -37559,8 +37757,8 @@
                         "path": "appbar/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0px -2px 3px rgba(0, 0, 0, 0.24)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
                 }
             ]
         },
@@ -38777,7 +38975,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-bottom-nav-shadow",
-                        "value": "0px 0px 5px rgba( black, .12 )",
+                        "value": "$box-shadow-depth-4",
                         "scope": "default",
                         "line": {
                             "start": 52,
@@ -38792,8 +38990,8 @@
                         "path": "bottom-navigation/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0px 0px 5px rgba(0, 0, 0, 0.12)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The text color of the flat BottomNavigation.\n",
@@ -41288,8 +41486,8 @@
                         "path": "button/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The base background of the hovered Button.\n",
@@ -41543,7 +41741,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-button-active-shadow",
-                        "value": "$box-shadow-depth-3",
+                        "value": "$box-shadow-depth-6",
                         "scope": "default",
                         "line": {
                             "start": 157,
@@ -41558,8 +41756,8 @@
                         "path": "button/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-6, 0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 8px 10px 0px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The base background color of the selected Button.\n",
@@ -45185,7 +45383,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-gradient-focus-shadow",
-                        "value": "$box-shadow-depth-2",
+                        "value": "$box-shadow-depth-3",
                         "scope": "default",
                         "line": {
                             "start": 51,
@@ -45200,8 +45398,8 @@
                         "path": "colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The border radius of the ColorGradient canvas.\n",
@@ -45501,15 +45699,15 @@
                     "resolvedType": "Number"
                 },
                 {
-                    "description": "The border radius of the ColorGradient canvas drag handle.\n",
+                    "description": "The width of the outline around the ColorGradient canvas drag handle.\n",
                     "commentRange": {
                         "start": 89,
                         "end": 90
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-gradient-draghandle-border-radius",
-                        "value": "50%",
+                        "name": "kendo-color-gradient-draghandle-outline-width",
+                        "value": "1px",
                         "scope": "default",
                         "line": {
                             "start": 91,
@@ -45524,19 +45722,19 @@
                         "path": "colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "50%",
+                    "resolvedValue": "1px",
                     "resolvedType": "Number"
                 },
                 {
-                    "description": "The text color of the ColorGradient canvas drag handle.\n",
+                    "description": "The border radius of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
                         "start": 92,
                         "end": 93
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-gradient-draghandle-text",
-                        "value": "null",
+                        "name": "kendo-color-gradient-draghandle-border-radius",
+                        "value": "50%",
                         "scope": "default",
                         "line": {
                             "start": 94,
@@ -45551,19 +45749,19 @@
                         "path": "colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "null",
-                    "resolvedType": "Null"
+                    "resolvedValue": "50%",
+                    "resolvedType": "Number"
                 },
                 {
-                    "description": "The background color of the ColorGradient canvas drag handle.\n",
+                    "description": "The text color of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
                         "start": 95,
                         "end": 96
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-gradient-draghandle-bg",
-                        "value": "transparent",
+                        "name": "kendo-color-gradient-draghandle-text",
+                        "value": "null",
                         "scope": "default",
                         "line": {
                             "start": 97,
@@ -45578,19 +45776,19 @@
                         "path": "colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "transparent",
-                    "resolvedType": "Color"
+                    "resolvedValue": "null",
+                    "resolvedType": "Null"
                 },
                 {
-                    "description": "The color of the border around the ColorGradient canvas drag handle.\n",
+                    "description": "The background color of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
                         "start": 98,
                         "end": 99
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-gradient-draghandle-border",
-                        "value": "rgba( white, .8 )",
+                        "name": "kendo-color-gradient-draghandle-bg",
+                        "value": "transparent",
                         "scope": "default",
                         "line": {
                             "start": 100,
@@ -45605,19 +45803,19 @@
                         "path": "colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "rgba(255, 255, 255, 0.8)",
+                    "resolvedValue": "transparent",
                     "resolvedType": "Color"
                 },
                 {
-                    "description": "The box shadow of the ColorGradient canvas drag handle.\n",
+                    "description": "The color of the border around the ColorGradient canvas drag handle.\n",
                     "commentRange": {
                         "start": 101,
                         "end": 102
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-gradient-draghandle-shadow",
-                        "value": "0 1px 4px rgba( black, .5 )",
+                        "name": "kendo-color-gradient-draghandle-border",
+                        "value": "rgba( white, .8 )",
                         "scope": "default",
                         "line": {
                             "start": 103,
@@ -45632,19 +45830,19 @@
                         "path": "colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 1px 4px rgba(0, 0, 0, 0.5)",
-                    "resolvedType": "List"
+                    "resolvedValue": "rgba(255, 255, 255, 0.8)",
+                    "resolvedType": "Color"
                 },
                 {
-                    "description": "The box shadow of the focused ColorGradient canvas drag handle.\n",
+                    "description": "The color of the outline around the ColorGradient canvas drag handle.\n",
                     "commentRange": {
                         "start": 104,
                         "end": 105
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-gradient-draghandle-focus-shadow",
-                        "value": "0 1px 4px black",
+                        "name": "kendo-color-gradient-draghandle-shadow",
+                        "value": "rgba( $kendo-color-black, .5)",
                         "scope": "default",
                         "line": {
                             "start": 106,
@@ -45659,19 +45857,19 @@
                         "path": "colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 1px 4px black",
-                    "resolvedType": "List"
+                    "resolvedValue": "rgba(0, 0, 0, 0.5)",
+                    "resolvedType": "Color"
                 },
                 {
-                    "description": "The box shadow of the hovered ColorGradient canvas drag handle.\n",
+                    "description": "The focus color of the outline around the ColorGradient canvas drag handle.\n",
                     "commentRange": {
                         "start": 107,
                         "end": 108
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-gradient-draghandle-hover-shadow",
-                        "value": "$kendo-color-gradient-draghandle-focus-shadow",
+                        "name": "kendo-color-gradient-draghandle-focus-shadow",
+                        "value": "$kendo-color-black",
                         "scope": "default",
                         "line": {
                             "start": 109,
@@ -45686,14 +45884,68 @@
                         "path": "colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 1px 4px black",
-                    "resolvedType": "List"
+                    "resolvedValue": "#000000",
+                    "resolvedType": "Color"
+                },
+                {
+                    "description": "The outline color of the outline around the ColorGradient canvas drag handle.\n",
+                    "commentRange": {
+                        "start": 110,
+                        "end": 111
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-color-gradient-draghandle-hover-shadow",
+                        "value": "$kendo-color-black",
+                        "scope": "default",
+                        "line": {
+                            "start": 112,
+                            "end": 112
+                        }
+                    },
+                    "group": [
+                        "cologradient"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "colorgradient/_variables.scss",
+                        "name": "_variables.scss"
+                    },
+                    "resolvedValue": "#000000",
+                    "resolvedType": "Color"
+                },
+                {
+                    "description": "The box shadow of the ColorGradient canvas drag handle.\n",
+                    "commentRange": {
+                        "start": 113,
+                        "end": 114
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-color-gradient-draghandle-shadow",
+                        "value": "k-elevation(2)",
+                        "scope": "default",
+                        "line": {
+                            "start": 115,
+                            "end": 115
+                        }
+                    },
+                    "group": [
+                        "cologradient"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "colorgradient/_variables.scss",
+                        "name": "_variables.scss"
+                    },
+                    "resolvedValue": "rgba(0, 0, 0, 0.5)",
+                    "resolvedType": "Color"
                 },
                 {
                     "description": "The vertical margin of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 111,
-                        "end": 112
+                        "start": 117,
+                        "end": 118
                     },
                     "context": {
                         "type": "variable",
@@ -45701,8 +45953,8 @@
                         "value": "- k-math-div( $kendo-color-gradient-draghandle-height, 2 )",
                         "scope": "default",
                         "line": {
-                            "start": 113,
-                            "end": 113
+                            "start": 119,
+                            "end": 119
                         }
                     },
                     "group": [
@@ -45719,8 +45971,8 @@
                 {
                     "description": "The horizontal margin of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 114,
-                        "end": 115
+                        "start": 120,
+                        "end": 121
                     },
                     "context": {
                         "type": "variable",
@@ -45728,8 +45980,8 @@
                         "value": "- k-math-div( $kendo-color-gradient-draghandle-width, 2 )",
                         "scope": "default",
                         "line": {
-                            "start": 116,
-                            "end": 116
+                            "start": 122,
+                            "end": 122
                         }
                     },
                     "group": [
@@ -45746,8 +45998,8 @@
                 {
                     "description": "The width of the ColorGradient input.\n",
                     "commentRange": {
-                        "start": 118,
-                        "end": 119
+                        "start": 124,
+                        "end": 125
                     },
                     "context": {
                         "type": "variable",
@@ -45755,8 +46007,8 @@
                         "value": "50px",
                         "scope": "default",
                         "line": {
-                            "start": 120,
-                            "end": 120
+                            "start": 126,
+                            "end": 126
                         }
                     },
                     "group": [
@@ -45773,8 +46025,8 @@
                 {
                     "description": "The spacing between the ColorGradient inputs.\n",
                     "commentRange": {
-                        "start": 121,
-                        "end": 122
+                        "start": 127,
+                        "end": 128
                     },
                     "context": {
                         "type": "variable",
@@ -45782,8 +46034,8 @@
                         "value": "k-map-get( $kendo-spacing, 2 )",
                         "scope": "default",
                         "line": {
-                            "start": 123,
-                            "end": 123
+                            "start": 129,
+                            "end": 129
                         }
                     },
                     "group": [
@@ -45800,8 +46052,8 @@
                 {
                     "description": "The spacing between the ColorGradient inputs and their labels.\n",
                     "commentRange": {
-                        "start": 124,
-                        "end": 125
+                        "start": 130,
+                        "end": 131
                     },
                     "context": {
                         "type": "variable",
@@ -45809,8 +46061,8 @@
                         "value": "k-map-get( $kendo-spacing, 1 )",
                         "scope": "default",
                         "line": {
-                            "start": 126,
-                            "end": 126
+                            "start": 132,
+                            "end": 132
                         }
                     },
                     "group": [
@@ -45827,8 +46079,8 @@
                 {
                     "description": "The text color of the ColorGradient input labels.\n",
                     "commentRange": {
-                        "start": 127,
-                        "end": 128
+                        "start": 133,
+                        "end": 134
                     },
                     "context": {
                         "type": "variable",
@@ -45836,8 +46088,8 @@
                         "value": "$kendo-subtle-text",
                         "scope": "default",
                         "line": {
-                            "start": 129,
-                            "end": 129
+                            "start": 135,
+                            "end": 135
                         }
                     },
                     "group": [
@@ -45854,8 +46106,8 @@
                 {
                     "description": "The font weight of the ColorGradient contrast ratio text.\n",
                     "commentRange": {
-                        "start": 131,
-                        "end": 132
+                        "start": 137,
+                        "end": 138
                     },
                     "context": {
                         "type": "variable",
@@ -45863,8 +46115,8 @@
                         "value": "$kendo-font-weight-medium",
                         "scope": "default",
                         "line": {
-                            "start": 133,
-                            "end": 133
+                            "start": 139,
+                            "end": 139
                         }
                     },
                     "group": [
@@ -45881,8 +46133,8 @@
                 {
                     "description": "The spacing between the items in the ColorGradient contrast tool.\n",
                     "commentRange": {
-                        "start": 134,
-                        "end": 135
+                        "start": 140,
+                        "end": 141
                     },
                     "context": {
                         "type": "variable",
@@ -45890,8 +46142,8 @@
                         "value": "k-map-get( $kendo-spacing, 2 )",
                         "scope": "default",
                         "line": {
-                            "start": 136,
-                            "end": 136
+                            "start": 142,
+                            "end": 142
                         }
                     },
                     "group": [
@@ -45970,8 +46222,8 @@
                 {
                     "description": "The color that focuses the user attention.\nUsed for primary buttons and for elements of primary importance across the theme.\n",
                     "commentRange": {
-                        "start": 165,
-                        "end": 168
+                        "start": 190,
+                        "end": 193
                     },
                     "context": {
                         "type": "variable",
@@ -45979,8 +46231,8 @@
                         "value": "material-color( $primary-palette, main )",
                         "scope": "default",
                         "line": {
-                            "start": 169,
-                            "end": 169
+                            "start": 194,
+                            "end": 194
                         }
                     },
                     "group": [
@@ -45998,8 +46250,8 @@
                 {
                     "description": "The color used along with the primary color denoted by $kendo-color-primary.\nUsed to provide contrast between the background and foreground colors.\n",
                     "commentRange": {
-                        "start": 173,
-                        "end": 176
+                        "start": 198,
+                        "end": 201
                     },
                     "context": {
                         "type": "variable",
@@ -46007,8 +46259,8 @@
                         "value": "material-color( $primary-palette, main-contrast )",
                         "scope": "default",
                         "line": {
-                            "start": 177,
-                            "end": 177
+                            "start": 202,
+                            "end": 202
                         }
                     },
                     "group": [
@@ -46026,8 +46278,8 @@
                 {
                     "description": "The secondary color of the theme.\n",
                     "commentRange": {
-                        "start": 179,
-                        "end": 181
+                        "start": 204,
+                        "end": 206
                     },
                     "context": {
                         "type": "variable",
@@ -46035,8 +46287,8 @@
                         "value": "material-color( $secondary-palette, main )",
                         "scope": "default",
                         "line": {
-                            "start": 182,
-                            "end": 182
+                            "start": 207,
+                            "end": 207
                         }
                     },
                     "group": [
@@ -46054,8 +46306,8 @@
                 {
                     "description": "The color used along with the secondary color denoted by $kendo-color-secondary.\nUsed to provide contrast between the background and foreground colors.\n",
                     "commentRange": {
-                        "start": 186,
-                        "end": 189
+                        "start": 211,
+                        "end": 214
                     },
                     "context": {
                         "type": "variable",
@@ -46063,8 +46315,8 @@
                         "value": "material-color( $secondary-palette, main-contrast )",
                         "scope": "default",
                         "line": {
-                            "start": 190,
-                            "end": 190
+                            "start": 215,
+                            "end": 215
                         }
                     },
                     "group": [
@@ -46082,8 +46334,8 @@
                 {
                     "description": "The tertiary color of the theme.\n",
                     "commentRange": {
-                        "start": 192,
-                        "end": 194
+                        "start": 217,
+                        "end": 219
                     },
                     "context": {
                         "type": "variable",
@@ -46091,8 +46343,8 @@
                         "value": "material-color($tertiary-palette, main)",
                         "scope": "default",
                         "line": {
-                            "start": 195,
-                            "end": 195
+                            "start": 220,
+                            "end": 220
                         }
                     },
                     "group": [
@@ -46110,8 +46362,8 @@
                 {
                     "description": "The color used along with the tertiary color denoted by $kendo-color-tertiary.\nUsed to provide contrast between the background and foreground colors.\n",
                     "commentRange": {
-                        "start": 199,
-                        "end": 202
+                        "start": 224,
+                        "end": 227
                     },
                     "context": {
                         "type": "variable",
@@ -46119,8 +46371,8 @@
                         "value": "material-color($tertiary-palette, main-contrast)",
                         "scope": "default",
                         "line": {
-                            "start": 203,
-                            "end": 203
+                            "start": 228,
+                            "end": 228
                         }
                     },
                     "group": [
@@ -46138,8 +46390,8 @@
                 {
                     "description": "The color for informational messages and states.\n",
                     "commentRange": {
-                        "start": 205,
-                        "end": 207
+                        "start": 230,
+                        "end": 232
                     },
                     "context": {
                         "type": "variable",
@@ -46147,8 +46399,8 @@
                         "value": "#0058e9",
                         "scope": "default",
                         "line": {
-                            "start": 208,
-                            "end": 208
+                            "start": 233,
+                            "end": 233
                         }
                     },
                     "group": [
@@ -46166,8 +46418,8 @@
                 {
                     "description": "The color for success messages and states.\n",
                     "commentRange": {
-                        "start": 212,
-                        "end": 214
+                        "start": 237,
+                        "end": 239
                     },
                     "context": {
                         "type": "variable",
@@ -46175,8 +46427,8 @@
                         "value": "#37b400",
                         "scope": "default",
                         "line": {
-                            "start": 215,
-                            "end": 215
+                            "start": 240,
+                            "end": 240
                         }
                     },
                     "group": [
@@ -46194,8 +46446,8 @@
                 {
                     "description": "The color for warning messages and states.\n",
                     "commentRange": {
-                        "start": 219,
-                        "end": 221
+                        "start": 244,
+                        "end": 246
                     },
                     "context": {
                         "type": "variable",
@@ -46203,8 +46455,8 @@
                         "value": "#ffc000",
                         "scope": "default",
                         "line": {
-                            "start": 222,
-                            "end": 222
+                            "start": 247,
+                            "end": 247
                         }
                     },
                     "group": [
@@ -46222,8 +46474,8 @@
                 {
                     "description": "The color for error messages and states.\n",
                     "commentRange": {
-                        "start": 226,
-                        "end": 228
+                        "start": 251,
+                        "end": 253
                     },
                     "context": {
                         "type": "variable",
@@ -46231,8 +46483,8 @@
                         "value": "#f31700",
                         "scope": "default",
                         "line": {
-                            "start": 229,
-                            "end": 229
+                            "start": 254,
+                            "end": 254
                         }
                     },
                     "group": [
@@ -46250,8 +46502,8 @@
                 {
                     "description": "The dark color of the theme.\n",
                     "commentRange": {
-                        "start": 233,
-                        "end": 235
+                        "start": 258,
+                        "end": 260
                     },
                     "context": {
                         "type": "variable",
@@ -46259,8 +46511,8 @@
                         "value": "get-base-hue( gray, 800 )",
                         "scope": "default",
                         "line": {
-                            "start": 236,
-                            "end": 236
+                            "start": 261,
+                            "end": 261
                         }
                     },
                     "group": [
@@ -46278,8 +46530,8 @@
                 {
                     "description": "The light color of the theme.\n",
                     "commentRange": {
-                        "start": 238,
-                        "end": 240
+                        "start": 263,
+                        "end": 265
                     },
                     "context": {
                         "type": "variable",
@@ -46287,8 +46539,8 @@
                         "value": "get-base-hue( gray, 100 )",
                         "scope": "default",
                         "line": {
-                            "start": 241,
-                            "end": 241
+                            "start": 266,
+                            "end": 266
                         }
                     },
                     "group": [
@@ -46306,8 +46558,8 @@
                 {
                     "description": "Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark\n",
                     "commentRange": {
-                        "start": 243,
-                        "end": 244
+                        "start": 268,
+                        "end": 269
                     },
                     "context": {
                         "type": "variable",
@@ -46315,8 +46567,8 @@
                         "value": "if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark )",
                         "scope": "default",
                         "line": {
-                            "start": 245,
-                            "end": 245
+                            "start": 270,
+                            "end": 270
                         }
                     },
                     "group": [
@@ -46698,7 +46950,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-editor-focus-shadow",
-                        "value": "$box-shadow-depth-2",
+                        "value": "$box-shadow-depth-3",
                         "scope": "default",
                         "line": {
                             "start": 40,
@@ -46713,8 +46965,8 @@
                         "path": "coloreditor/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The vertical padding of the ColorEditor header.\n",
@@ -47271,8 +47523,8 @@
                 {
                     "description": "Background color of a component.\nNote: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$kendo-grid-bg: $kendo-component-bg !default;`.\n",
                     "commentRange": {
-                        "start": 337,
-                        "end": 339
+                        "start": 362,
+                        "end": 364
                     },
                     "context": {
                         "type": "variable",
@@ -47280,8 +47532,8 @@
                         "value": "k-map-get( $theme, component-bg )",
                         "scope": "default",
                         "line": {
-                            "start": 340,
-                            "end": 340
+                            "start": 365,
+                            "end": 365
                         }
                     },
                     "group": [
@@ -47298,8 +47550,8 @@
                 {
                     "description": "Text color of a component.\nNote: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$kendo-grid-text: $kendo-component-text !default;`.\n",
                     "commentRange": {
-                        "start": 341,
-                        "end": 343
+                        "start": 366,
+                        "end": 368
                     },
                     "context": {
                         "type": "variable",
@@ -47307,8 +47559,8 @@
                         "value": "k-map-get( $theme, component-text )",
                         "scope": "default",
                         "line": {
-                            "start": 344,
-                            "end": 344
+                            "start": 369,
+                            "end": 369
                         }
                     },
                     "group": [
@@ -47325,8 +47577,8 @@
                 {
                     "description": "Border color of a component.\nNote: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$kendo-grid-border: $kendo-component-border !default;`.\n",
                     "commentRange": {
-                        "start": 345,
-                        "end": 347
+                        "start": 370,
+                        "end": 372
                     },
                     "context": {
                         "type": "variable",
@@ -47334,8 +47586,8 @@
                         "value": "k-map-get( $theme, component-border )",
                         "scope": "default",
                         "line": {
-                            "start": 348,
-                            "end": 348
+                            "start": 373,
+                            "end": 373
                         }
                     },
                     "group": [
@@ -49022,6 +49274,39 @@
                 }
             ]
         },
+        {
+            "id": "elevation",
+            "title": "Elevation",
+            "variables": [
+                {
+                    "description": "Global Elevation.\n",
+                    "commentRange": {
+                        "start": 49,
+                        "end": 50
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-elevation",
+                        "value": "$_default-elevation",
+                        "scope": "default",
+                        "line": {
+                            "start": 51,
+                            "end": 51
+                        }
+                    },
+                    "group": [
+                        "elevation"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "core/elevation/index.import.scss",
+                        "name": "index.import.scss"
+                    },
+                    "resolvedValue": "(1: (0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14)), 2: (0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14)), 3: (0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14)), 4: (0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14)), 5: (0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14)), 6: (0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 8px 10px 0px rgba(0, 0, 0, 0.14)), 7: (0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14)), 8: (0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14)), 9: (0px 11px 15px rgba(0, 0, 0, 0.2), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 24px 38px rgba(0, 0, 0, 0.14)))",
+                    "resolvedType": "Map"
+                }
+            ]
+        },
         {
             "id": "expander",
             "title": "Expander",
@@ -50667,7 +50952,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-fab-shadow",
-                        "value": "0px 3px 5px -1px rgba( black, .2 ), 0px 6px 10px rgba( black, .14 ), 0px 1px 18px rgba( black, .12 )",
+                        "value": "$box-shadow-depth-5",
                         "scope": "default",
                         "line": {
                             "start": 118,
@@ -50682,8 +50967,8 @@
                         "path": "fab/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The shadow of the disabled FAB.\n",
@@ -50694,7 +50979,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-fab-disabled-shadow",
-                        "value": "0px 3px 5px -1px k-try-tint( rgba( black, .2 ), .5 ), 0px 6px 10px k-try-tint( rgba( black, .14 ), .5 ), 0px 1px 18px k-try-tint( rgba( black, .12 ), .5 )",
+                        "value": "$box-shadow-depth-5",
                         "scope": "default",
                         "line": {
                             "start": 121,
@@ -50709,8 +50994,8 @@
                         "path": "fab/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0px 3px 5px -1px rgba(70, 70, 70, 0.232), 0px 6px 10px rgba(91, 91, 91, 0.1744), 0px 1px 18px rgba(101, 101, 101, 0.1552)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The shadow of the active FAB.\n",
@@ -50721,7 +51006,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-fab-active-shadow",
-                        "value": "0px 5px 5px -3px rgba( black, .2 ), 0px 8px 10px 1px rgba( black, .14 ), 0px 3px 14px 2px rgba( black, .12 )",
+                        "value": "$box-shadow-depth-7",
                         "scope": "default",
                         "line": {
                             "start": 124,
@@ -50736,8 +51021,8 @@
                         "path": "fab/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-7, 0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The base text color of the FAB item.\n",
@@ -50925,8 +51210,8 @@
                         "path": "fab/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The shadow of the disabled FAB item.\n",
@@ -50952,8 +51237,8 @@
                         "path": "fab/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0px 3px 5px -1px rgba(70, 70, 70, 0.232), 0px 6px 10px rgba(91, 91, 91, 0.1744), 0px 1px 18px rgba(101, 101, 101, 0.1552)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The shadow of the active FAB item.\n",
@@ -50979,8 +51264,8 @@
                         "path": "fab/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-7, 0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
                 }
             ]
         },
@@ -59907,8 +60192,8 @@
                         "path": "notification/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The horizontal spacing of the Notification icon.\n",
@@ -62739,8 +63024,8 @@
                         "path": "popover/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The horizontal padding of the Popover header.\n",
@@ -63486,7 +63771,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-popup-shadow",
-                        "value": "0 2px 4px -1px rgba( $elevation, .2 ), 0 4px 5px 0 rgba( $elevation, .14 ), 0 1px 10px 0 rgba( $elevation, .12 )",
+                        "value": "$box-shadow-depth-4",
                         "scope": "default",
                         "line": {
                             "start": 39,
@@ -63501,8 +63786,8 @@
                         "path": "popup/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
                 }
             ]
         },
@@ -66124,136 +66409,253 @@
                     "description": "Shadow for switch.\nEquivalent to material elevation 1.\n",
                     "commentRange": {
                         "start": 93,
-                        "end": 95
+                        "end": 96
                     },
                     "context": {
                         "type": "variable",
                         "name": "box-shadow-depth-1",
-                        "value": "0 2px 1px -1px rgba( $elevation, .2 ), 0 1px 1px 0 rgba( $elevation, .14 ), 0 1px 3px 0 rgba( $elevation, .12 )",
+                        "value": "k-elevation(1)",
                         "scope": "default",
                         "line": {
-                            "start": 96,
-                            "end": 96
+                            "start": 97,
+                            "end": 97
                         }
                     },
                     "group": [
                         "shadows"
                     ],
+                    "deprecated": "Use the `$kendo-elevation` map instead.",
                     "access": "public",
                     "file": {
                         "path": "_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-1, 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 2px 1px 0px rgba(0, 0, 0, 0.12), 0px 1px 1px 0px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "Shadow for resting state of button, card and other widgets.\nEquivalent to material elevation 2.\n",
                     "commentRange": {
-                        "start": 97,
-                        "end": 99
+                        "start": 98,
+                        "end": 101
                     },
                     "context": {
                         "type": "variable",
                         "name": "box-shadow-depth-2",
-                        "value": "0 3px 1px -2px rgba( $elevation, .2 ), 0 2px 2px 0 rgba( $elevation, .14 ), 0 1px 5px 0 rgba( $elevation, .12 )",
+                        "value": "k-elevation(2)",
                         "scope": "default",
                         "line": {
-                            "start": 100,
-                            "end": 100
+                            "start": 102,
+                            "end": 102
                         }
                     },
                     "group": [
                         "shadows"
                     ],
+                    "deprecated": "Use the `$kendo-elevation` map instead.",
                     "access": "public",
                     "file": {
                         "path": "_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 1px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
                 },
                 {
-                    "description": "Shadow for menu, popups and raised state of button and card.\nEquivalent to material elevation 8.\n",
+                    "description": "Shadow for menu, popups and raised state of button and card.\nEquivalent to material elevation 3.\n",
                     "commentRange": {
-                        "start": 101,
-                        "end": 103
+                        "start": 103,
+                        "end": 106
                     },
                     "context": {
                         "type": "variable",
                         "name": "box-shadow-depth-3",
-                        "value": "0 5px 5px -3px rgba( $elevation, .2 ), 0 8px 10px 1px rgba( $elevation, .14 ), 0 3px 14px 2px rgba( $elevation, .12 )",
+                        "value": "k-elevation(3)",
                         "scope": "default",
                         "line": {
-                            "start": 104,
-                            "end": 104
+                            "start": 107,
+                            "end": 107
                         }
                     },
                     "group": [
                         "shadows"
                     ],
+                    "deprecated": "Use the `$kendo-elevation` map instead.",
                     "access": "public",
                     "file": {
                         "path": "_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
                 },
                 {
-                    "description": "Shadow for drawers and other overlaying elements.\nEquivalent to material elevation 16.\n",
+                    "description": "Shadow for drawers and other overlaying elements.\nEquivalent to material elevation 4.\n",
                     "commentRange": {
-                        "start": 105,
-                        "end": 107
+                        "start": 108,
+                        "end": 111
                     },
                     "context": {
                         "type": "variable",
                         "name": "box-shadow-depth-4",
-                        "value": "0 8px 10px -5px rgba( $elevation, .2 ), 0 16px 24px 2px rgba( $elevation, .14 ), 0 6px 30px 5px rgba( $elevation, .12 )",
+                        "value": "k-elevation(4)",
                         "scope": "default",
                         "line": {
-                            "start": 108,
-                            "end": 108
+                            "start": 112,
+                            "end": 112
                         }
                     },
                     "group": [
                         "shadows"
                     ],
+                    "deprecated": "Use the `$kendo-elevation` map instead.",
                     "access": "public",
                     "file": {
                         "path": "_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
                 },
                 {
-                    "description": "Shadow for window and dialog.\nEquivalent to material elevation 24.\n",
+                    "description": "Shadow for window and dialog.\nEquivalent to material elevation 6.\n",
                     "commentRange": {
-                        "start": 109,
-                        "end": 111
+                        "start": 113,
+                        "end": 116
                     },
                     "context": {
                         "type": "variable",
                         "name": "box-shadow-depth-5",
-                        "value": "0 11px 15px -7px rgba( $elevation, .2 ), 0 24px 38px 3px rgba( $elevation, .14 ), 0 9px 46px 8px rgba( $elevation, .12 )",
+                        "value": "k-elevation(5)",
                         "scope": "default",
                         "line": {
-                            "start": 112,
-                            "end": 112
+                            "start": 117,
+                            "end": 117
                         }
                     },
                     "group": [
                         "shadows"
                     ],
+                    "deprecated": "Use the `$kendo-elevation` map instead.",
                     "access": "public",
                     "file": {
                         "path": "_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-5, 0px 3px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 18px 0px rgba(0, 0, 0, 0.12), 0px 6px 10px 0px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
+                },
+                {
+                    "description": "Shadow for window and dialog.\nEquivalent to material elevation 8.\n",
+                    "commentRange": {
+                        "start": 118,
+                        "end": 121
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "box-shadow-depth-6",
+                        "value": "k-elevation(6)",
+                        "scope": "default",
+                        "line": {
+                            "start": 122,
+                            "end": 122
+                        }
+                    },
+                    "group": [
+                        "shadows"
+                    ],
+                    "deprecated": "Use the `$kendo-elevation` map instead.",
+                    "access": "public",
+                    "file": {
+                        "path": "_variables.scss",
+                        "name": "_variables.scss"
+                    },
+                    "resolvedValue": "var(--kendo-elevation-6, 0px 5px 5px 0px rgba(0, 0, 0, 0.2), 0px 3px 14px 0px rgba(0, 0, 0, 0.12), 0px 8px 10px 0px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
+                },
+                {
+                    "description": "Shadow for window and dialog.\nEquivalent to material elevation 12.\n",
+                    "commentRange": {
+                        "start": 123,
+                        "end": 126
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "box-shadow-depth-7",
+                        "value": "k-elevation(7)",
+                        "scope": "default",
+                        "line": {
+                            "start": 127,
+                            "end": 127
+                        }
+                    },
+                    "group": [
+                        "shadows"
+                    ],
+                    "deprecated": "Use the `$kendo-elevation` map instead.",
+                    "access": "public",
+                    "file": {
+                        "path": "_variables.scss",
+                        "name": "_variables.scss"
+                    },
+                    "resolvedValue": "var(--kendo-elevation-7, 0px 7px 8px 0px rgba(0, 0, 0, 0.2), 0px 5px 22px 0px rgba(0, 0, 0, 0.12), 0px 12px 17px 0px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
+                },
+                {
+                    "description": "Shadow for window and dialog.\nEquivalent to material elevation 16.\n",
+                    "commentRange": {
+                        "start": 128,
+                        "end": 131
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "box-shadow-depth-8",
+                        "value": "k-elevation(8)",
+                        "scope": "default",
+                        "line": {
+                            "start": 132,
+                            "end": 132
+                        }
+                    },
+                    "group": [
+                        "shadows"
+                    ],
+                    "deprecated": "Use the `$kendo-elevation` map instead.",
+                    "access": "public",
+                    "file": {
+                        "path": "_variables.scss",
+                        "name": "_variables.scss"
+                    },
+                    "resolvedValue": "var(--kendo-elevation-8, 0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
+                },
+                {
+                    "description": "Shadow for window and dialog.\nEquivalent to material elevation 24.\n",
+                    "commentRange": {
+                        "start": 133,
+                        "end": 136
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "box-shadow-depth-9",
+                        "value": "k-elevation(9)",
+                        "scope": "default",
+                        "line": {
+                            "start": 137,
+                            "end": 137
+                        }
+                    },
+                    "group": [
+                        "shadows"
+                    ],
+                    "deprecated": "Use the `$kendo-elevation` map instead.",
+                    "access": "public",
+                    "file": {
+                        "path": "_variables.scss",
+                        "name": "_variables.scss"
+                    },
+                    "resolvedValue": "var(--kendo-elevation-9, 0px 11px 15px rgba(0, 0, 0, 0.2), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 24px 38px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
                 }
             ]
         },
@@ -69846,8 +70248,8 @@
                         "path": "tilelayout/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-3, 0px 1px 8px 0px rgba(0, 0, 0, 0.2), 0px 3px 3px 0px rgba(0, 0, 0, 0.12), 0px 3px 4px 0px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The width of the border around the TileLayout hint.\n",
@@ -70539,7 +70941,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-toolbar-shadow",
-                        "value": "$box-shadow-depth-2",
+                        "value": "$box-shadow-depth-4",
                         "scope": "default",
                         "line": {
                             "start": 73,
@@ -70554,8 +70956,8 @@
                         "path": "toolbar/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-4, 0px 2px 4px 0px rgba(0, 0, 0, 0.2), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The color of the separator border of the Toolbar.\n",
@@ -72030,8 +72432,8 @@
                 {
                     "description": "Base font size across all components.\n",
                     "commentRange": {
-                        "start": 264,
-                        "end": 265
+                        "start": 289,
+                        "end": 290
                     },
                     "context": {
                         "type": "variable",
@@ -72039,8 +72441,8 @@
                         "value": "14px",
                         "scope": "default",
                         "line": {
-                            "start": 266,
-                            "end": 266
+                            "start": 291,
+                            "end": 291
                         }
                     },
                     "group": [
@@ -72057,8 +72459,8 @@
                 {
                     "description": "Font family for text.\n",
                     "commentRange": {
-                        "start": 281,
-                        "end": 282
+                        "start": 306,
+                        "end": 307
                     },
                     "context": {
                         "type": "variable",
@@ -72066,8 +72468,8 @@
                         "value": "Roboto, \"Helvetica Neue\", sans-serif",
                         "scope": "default",
                         "line": {
-                            "start": 283,
-                            "end": 283
+                            "start": 308,
+                            "end": 308
                         }
                     },
                     "group": [
@@ -72084,8 +72486,8 @@
                 {
                     "description": "Font family across all components.\n",
                     "commentRange": {
-                        "start": 285,
-                        "end": 286
+                        "start": 310,
+                        "end": 311
                     },
                     "context": {
                         "type": "variable",
@@ -72093,8 +72495,8 @@
                         "value": "Roboto, \"Helvetica Neue\", sans-serif",
                         "scope": "default",
                         "line": {
-                            "start": 287,
-                            "end": 287
+                            "start": 312,
+                            "end": 312
                         }
                     },
                     "group": [
@@ -72111,8 +72513,8 @@
                 {
                     "description": "Font family for monospaced text. Used for styling the code.\n",
                     "commentRange": {
-                        "start": 289,
-                        "end": 290
+                        "start": 314,
+                        "end": 315
                     },
                     "context": {
                         "type": "variable",
@@ -72120,8 +72522,8 @@
                         "value": "Consolas, \"Ubuntu Mono\", \"Lucida Console\", \"Courier New\", monospace",
                         "scope": "default",
                         "line": {
-                            "start": 291,
-                            "end": 291
+                            "start": 316,
+                            "end": 316
                         }
                     },
                     "group": [
@@ -72138,8 +72540,8 @@
                 {
                     "description": "Font family across all components.\n",
                     "commentRange": {
-                        "start": 293,
-                        "end": 294
+                        "start": 318,
+                        "end": 319
                     },
                     "context": {
                         "type": "variable",
@@ -72147,8 +72549,8 @@
                         "value": "Roboto, \"Helvetica Neue\", sans-serif",
                         "scope": "default",
                         "line": {
-                            "start": 295,
-                            "end": 295
+                            "start": 320,
+                            "end": 320
                         }
                     },
                     "group": [
@@ -72165,8 +72567,8 @@
                 {
                     "description": "Line height used along with $kendo-font-size.\n",
                     "commentRange": {
-                        "start": 297,
-                        "end": 298
+                        "start": 322,
+                        "end": 323
                     },
                     "context": {
                         "type": "variable",
@@ -72174,8 +72576,8 @@
                         "value": "k-math-div( 28, 14 )",
                         "scope": "default",
                         "line": {
-                            "start": 299,
-                            "end": 299
+                            "start": 324,
+                            "end": 324
                         }
                     },
                     "group": [
@@ -73587,7 +73989,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-window-shadow",
-                        "value": "$box-shadow-depth-4",
+                        "value": "$box-shadow-depth-8",
                         "scope": "default",
                         "line": {
                             "start": 79,
@@ -73602,8 +74004,8 @@
                         "path": "window/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-8, 0px 8px 10px rgba(0, 0, 0, 0.2), 0px 6px 30px rgba(0, 0, 0, 0.12), 0px 16px 24px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The box shadow of the focused Window.\n",
@@ -73614,7 +74016,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-window-focus-shadow",
-                        "value": "$box-shadow-depth-5",
+                        "value": "$box-shadow-depth-9",
                         "scope": "default",
                         "line": {
                             "start": 82,
@@ -73629,8 +74031,8 @@
                         "path": "window/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-9, 0px 11px 15px rgba(0, 0, 0, 0.2), 0px 9px 46px rgba(0, 0, 0, 0.12), 0px 24px 38px rgba(0, 0, 0, 0.14))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The background color of the Window titlebar.\n",