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

package/dist/meta/sassdoc-raw-data.json

@@ -358,7 +358,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,
@@ -383,7 +383,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,
@@ -1508,7 +1508,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,
@@ -4058,7 +4058,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-active-shadow",
-            "value": "$box-shadow-depth-3",
+            "value": "$box-shadow-depth-6",
             "scope": "default",
             "line": {
                 "start": 157,
@@ -7408,7 +7408,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,
@@ -7700,15 +7700,15 @@
         }
     },
     {
-        "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,
@@ -7725,15 +7725,15 @@
         }
     },
     {
-        "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,
@@ -7750,15 +7750,15 @@
         }
     },
     {
-        "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,
@@ -7775,15 +7775,15 @@
         }
     },
     {
-        "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,
@@ -7800,15 +7800,15 @@
         }
     },
     {
-        "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,
@@ -7825,15 +7825,15 @@
         }
     },
     {
-        "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,
@@ -7850,15 +7850,15 @@
         }
     },
     {
-        "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,
@@ -7874,11 +7874,61 @@
             "name": "_variables.scss"
         }
     },
+    {
+        "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"
+        }
+    },
+    {
+        "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"
+        }
+    },
     {
         "description": "The vertical margin of the ColorGradient canvas drag handle.\n",
         "commentRange": {
-            "start": 111,
-            "end": 112
+            "start": 117,
+            "end": 118
         },
         "context": {
             "type": "variable",
@@ -7886,8 +7936,8 @@
             "value": "- k-math-div( $kendo-color-gradient-draghandle-height, 2 )",
             "scope": "default",
             "line": {
-                "start": 113,
-                "end": 113
+                "start": 119,
+                "end": 119
             }
         },
         "group": [
@@ -7902,8 +7952,8 @@
     {
         "description": "The horizontal margin of the ColorGradient canvas drag handle.\n",
         "commentRange": {
-            "start": 114,
-            "end": 115
+            "start": 120,
+            "end": 121
         },
         "context": {
             "type": "variable",
@@ -7911,8 +7961,8 @@
             "value": "- k-math-div( $kendo-color-gradient-draghandle-width, 2 )",
             "scope": "default",
             "line": {
-                "start": 116,
-                "end": 116
+                "start": 122,
+                "end": 122
             }
         },
         "group": [
@@ -7927,8 +7977,8 @@
     {
         "description": "The width of the ColorGradient input.\n",
         "commentRange": {
-            "start": 118,
-            "end": 119
+            "start": 124,
+            "end": 125
         },
         "context": {
             "type": "variable",
@@ -7936,8 +7986,8 @@
             "value": "50px",
             "scope": "default",
             "line": {
-                "start": 120,
-                "end": 120
+                "start": 126,
+                "end": 126
             }
         },
         "group": [
@@ -7952,8 +8002,8 @@
     {
         "description": "The spacing between the ColorGradient inputs.\n",
         "commentRange": {
-            "start": 121,
-            "end": 122
+            "start": 127,
+            "end": 128
         },
         "context": {
             "type": "variable",
@@ -7961,8 +8011,8 @@
             "value": "k-map-get( $kendo-spacing, 2 )",
             "scope": "default",
             "line": {
-                "start": 123,
-                "end": 123
+                "start": 129,
+                "end": 129
             }
         },
         "group": [
@@ -7977,8 +8027,8 @@
     {
         "description": "The spacing between the ColorGradient inputs and their labels.\n",
         "commentRange": {
-            "start": 124,
-            "end": 125
+            "start": 130,
+            "end": 131
         },
         "context": {
             "type": "variable",
@@ -7986,8 +8036,8 @@
             "value": "k-map-get( $kendo-spacing, 1 )",
             "scope": "default",
             "line": {
-                "start": 126,
-                "end": 126
+                "start": 132,
+                "end": 132
             }
         },
         "group": [
@@ -8002,8 +8052,8 @@
     {
         "description": "The text color of the ColorGradient input labels.\n",
         "commentRange": {
-            "start": 127,
-            "end": 128
+            "start": 133,
+            "end": 134
         },
         "context": {
             "type": "variable",
@@ -8011,8 +8061,8 @@
             "value": "$kendo-subtle-text",
             "scope": "default",
             "line": {
-                "start": 129,
-                "end": 129
+                "start": 135,
+                "end": 135
             }
         },
         "group": [
@@ -8027,8 +8077,8 @@
     {
         "description": "The font weight of the ColorGradient contrast ratio text.\n",
         "commentRange": {
-            "start": 131,
-            "end": 132
+            "start": 137,
+            "end": 138
         },
         "context": {
             "type": "variable",
@@ -8036,8 +8086,8 @@
             "value": "$kendo-font-weight-medium",
             "scope": "default",
             "line": {
-                "start": 133,
-                "end": 133
+                "start": 139,
+                "end": 139
             }
         },
         "group": [
@@ -8052,8 +8102,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",
@@ -8061,8 +8111,8 @@
             "value": "k-map-get( $kendo-spacing, 2 )",
             "scope": "default",
             "line": {
-                "start": 136,
-                "end": 136
+                "start": 142,
+                "end": 142
             }
         },
         "group": [
@@ -8129,8 +8179,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",
@@ -8138,8 +8188,8 @@
             "value": "material-color( $primary-palette, main )",
             "scope": "default",
             "line": {
-                "start": 169,
-                "end": 169
+                "start": 194,
+                "end": 194
             }
         },
         "group": [
@@ -8155,8 +8205,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",
@@ -8164,8 +8214,8 @@
             "value": "material-color( $primary-palette, main-contrast )",
             "scope": "default",
             "line": {
-                "start": 177,
-                "end": 177
+                "start": 202,
+                "end": 202
             }
         },
         "group": [
@@ -8181,8 +8231,8 @@
     {
         "description": "The secondary color of the theme.\n",
         "commentRange": {
-            "start": 179,
-            "end": 181
+            "start": 204,
+            "end": 206
         },
         "context": {
             "type": "variable",
@@ -8190,8 +8240,8 @@
             "value": "material-color( $secondary-palette, main )",
             "scope": "default",
             "line": {
-                "start": 182,
-                "end": 182
+                "start": 207,
+                "end": 207
             }
         },
         "group": [
@@ -8207,8 +8257,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",
@@ -8216,8 +8266,8 @@
             "value": "material-color( $secondary-palette, main-contrast )",
             "scope": "default",
             "line": {
-                "start": 190,
-                "end": 190
+                "start": 215,
+                "end": 215
             }
         },
         "group": [
@@ -8233,8 +8283,8 @@
     {
         "description": "The tertiary color of the theme.\n",
         "commentRange": {
-            "start": 192,
-            "end": 194
+            "start": 217,
+            "end": 219
         },
         "context": {
             "type": "variable",
@@ -8242,8 +8292,8 @@
             "value": "material-color($tertiary-palette, main)",
             "scope": "default",
             "line": {
-                "start": 195,
-                "end": 195
+                "start": 220,
+                "end": 220
             }
         },
         "group": [
@@ -8259,8 +8309,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",
@@ -8268,8 +8318,8 @@
             "value": "material-color($tertiary-palette, main-contrast)",
             "scope": "default",
             "line": {
-                "start": 203,
-                "end": 203
+                "start": 228,
+                "end": 228
             }
         },
         "group": [
@@ -8285,8 +8335,8 @@
     {
         "description": "The color for informational messages and states.\n",
         "commentRange": {
-            "start": 205,
-            "end": 207
+            "start": 230,
+            "end": 232
         },
         "context": {
             "type": "variable",
@@ -8294,8 +8344,8 @@
             "value": "#0058e9",
             "scope": "default",
             "line": {
-                "start": 208,
-                "end": 208
+                "start": 233,
+                "end": 233
             }
         },
         "group": [
@@ -8311,8 +8361,8 @@
     {
         "description": "The color for success messages and states.\n",
         "commentRange": {
-            "start": 212,
-            "end": 214
+            "start": 237,
+            "end": 239
         },
         "context": {
             "type": "variable",
@@ -8320,8 +8370,8 @@
             "value": "#37b400",
             "scope": "default",
             "line": {
-                "start": 215,
-                "end": 215
+                "start": 240,
+                "end": 240
             }
         },
         "group": [
@@ -8337,8 +8387,8 @@
     {
         "description": "The color for warning messages and states.\n",
         "commentRange": {
-            "start": 219,
-            "end": 221
+            "start": 244,
+            "end": 246
         },
         "context": {
             "type": "variable",
@@ -8346,8 +8396,8 @@
             "value": "#ffc000",
             "scope": "default",
             "line": {
-                "start": 222,
-                "end": 222
+                "start": 247,
+                "end": 247
             }
         },
         "group": [
@@ -8363,8 +8413,8 @@
     {
         "description": "The color for error messages and states.\n",
         "commentRange": {
-            "start": 226,
-            "end": 228
+            "start": 251,
+            "end": 253
         },
         "context": {
             "type": "variable",
@@ -8372,8 +8422,8 @@
             "value": "#f31700",
             "scope": "default",
             "line": {
-                "start": 229,
-                "end": 229
+                "start": 254,
+                "end": 254
             }
         },
         "group": [
@@ -8389,8 +8439,8 @@
     {
         "description": "The dark color of the theme.\n",
         "commentRange": {
-            "start": 233,
-            "end": 235
+            "start": 258,
+            "end": 260
         },
         "context": {
             "type": "variable",
@@ -8398,8 +8448,8 @@
             "value": "get-base-hue( gray, 800 )",
             "scope": "default",
             "line": {
-                "start": 236,
-                "end": 236
+                "start": 261,
+                "end": 261
             }
         },
         "group": [
@@ -8415,8 +8465,8 @@
     {
         "description": "The light color of the theme.\n",
         "commentRange": {
-            "start": 238,
-            "end": 240
+            "start": 263,
+            "end": 265
         },
         "context": {
             "type": "variable",
@@ -8424,8 +8474,8 @@
             "value": "get-base-hue( gray, 100 )",
             "scope": "default",
             "line": {
-                "start": 241,
-                "end": 241
+                "start": 266,
+                "end": 266
             }
         },
         "group": [
@@ -8441,8 +8491,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",
@@ -8450,8 +8500,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": [
@@ -8799,7 +8849,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,
@@ -9318,8 +9368,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",
@@ -9327,8 +9377,8 @@
             "value": "k-map-get( $theme, component-bg )",
             "scope": "default",
             "line": {
-                "start": 340,
-                "end": 340
+                "start": 365,
+                "end": 365
             }
         },
         "group": [
@@ -9343,8 +9393,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",
@@ -9352,8 +9402,8 @@
             "value": "k-map-get( $theme, component-text )",
             "scope": "default",
             "line": {
-                "start": 344,
-                "end": 344
+                "start": 369,
+                "end": 369
             }
         },
         "group": [
@@ -9368,8 +9418,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",
@@ -9377,8 +9427,8 @@
             "value": "k-map-get( $theme, component-border )",
             "scope": "default",
             "line": {
-                "start": 348,
-                "end": 348
+                "start": 373,
+                "end": 373
             }
         },
         "group": [
@@ -10915,6 +10965,31 @@
             "name": "_variables.scss"
         }
     },
+    {
+        "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"
+        }
+    },
     {
         "description": "The vertical spacing of the ExpansionPanel.\n",
         "commentRange": {
@@ -12424,7 +12499,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,
@@ -12449,7 +12524,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,
@@ -12474,7 +12549,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,
@@ -24199,7 +24274,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,
@@ -26619,21 +26694,22 @@
         "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",
@@ -26643,22 +26719,23 @@
     {
         "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",
@@ -26666,24 +26743,25 @@
         }
     },
     {
-        "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",
@@ -26691,24 +26769,25 @@
         }
     },
     {
-        "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",
@@ -26716,24 +26795,129 @@
         }
     },
     {
-        "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"
+        }
+    },
+    {
+        "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"
+        }
+    },
+    {
+        "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"
+        }
+    },
+    {
+        "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"
+        }
+    },
+    {
+        "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",
@@ -30674,7 +30858,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-shadow",
-            "value": "$box-shadow-depth-2",
+            "value": "$box-shadow-depth-4",
             "scope": "default",
             "line": {
                 "start": 73,
@@ -32043,8 +32227,8 @@
     {
         "description": "Base font size across all components.\n",
         "commentRange": {
-            "start": 264,
-            "end": 265
+            "start": 289,
+            "end": 290
         },
         "context": {
             "type": "variable",
@@ -32052,8 +32236,8 @@
             "value": "14px",
             "scope": "default",
             "line": {
-                "start": 266,
-                "end": 266
+                "start": 291,
+                "end": 291
             }
         },
         "group": [
@@ -32068,8 +32252,8 @@
     {
         "description": "Font family for text.\n",
         "commentRange": {
-            "start": 281,
-            "end": 282
+            "start": 306,
+            "end": 307
         },
         "context": {
             "type": "variable",
@@ -32077,8 +32261,8 @@
             "value": "Roboto, \"Helvetica Neue\", sans-serif",
             "scope": "default",
             "line": {
-                "start": 283,
-                "end": 283
+                "start": 308,
+                "end": 308
             }
         },
         "group": [
@@ -32093,8 +32277,8 @@
     {
         "description": "Font family across all components.\n",
         "commentRange": {
-            "start": 285,
-            "end": 286
+            "start": 310,
+            "end": 311
         },
         "context": {
             "type": "variable",
@@ -32102,8 +32286,8 @@
             "value": "Roboto, \"Helvetica Neue\", sans-serif",
             "scope": "default",
             "line": {
-                "start": 287,
-                "end": 287
+                "start": 312,
+                "end": 312
             }
         },
         "group": [
@@ -32118,8 +32302,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",
@@ -32127,8 +32311,8 @@
             "value": "Consolas, \"Ubuntu Mono\", \"Lucida Console\", \"Courier New\", monospace",
             "scope": "default",
             "line": {
-                "start": 291,
-                "end": 291
+                "start": 316,
+                "end": 316
             }
         },
         "group": [
@@ -32143,8 +32327,8 @@
     {
         "description": "Font family across all components.\n",
         "commentRange": {
-            "start": 293,
-            "end": 294
+            "start": 318,
+            "end": 319
         },
         "context": {
             "type": "variable",
@@ -32152,8 +32336,8 @@
             "value": "Roboto, \"Helvetica Neue\", sans-serif",
             "scope": "default",
             "line": {
-                "start": 295,
-                "end": 295
+                "start": 320,
+                "end": 320
             }
         },
         "group": [
@@ -32168,8 +32352,8 @@
     {
         "description": "Line height used along with $kendo-font-size.\n",
         "commentRange": {
-            "start": 297,
-            "end": 298
+            "start": 322,
+            "end": 323
         },
         "context": {
             "type": "variable",
@@ -32177,8 +32361,8 @@
             "value": "k-math-div( 28, 14 )",
             "scope": "default",
             "line": {
-                "start": 299,
-                "end": 299
+                "start": 324,
+                "end": 324
             }
         },
         "group": [
@@ -32193,8 +32377,8 @@
     {
         "description": "Border radius for all components.\n",
         "commentRange": {
-            "start": 139,
-            "end": 139
+            "start": 164,
+            "end": 164
         },
         "context": {
             "type": "variable",
@@ -32202,8 +32386,8 @@
             "value": "k-map-get( $kendo-spacing, 1 )",
             "scope": "default",
             "line": {
-                "start": 140,
-                "end": 140
+                "start": 165,
+                "end": 165
             }
         },
         "access": "public",
@@ -32218,8 +32402,8 @@
     {
         "description": "The background of the components' chrome area.\n",
         "commentRange": {
-            "start": 351,
-            "end": 351
+            "start": 376,
+            "end": 376
         },
         "context": {
             "type": "variable",
@@ -32227,8 +32411,8 @@
             "value": "k-map-get( $theme, base-bg )",
             "scope": "default",
             "line": {
-                "start": 352,
-                "end": 352
+                "start": 377,
+                "end": 377
             }
         },
         "access": "public",
@@ -32243,8 +32427,8 @@
     {
         "description": "The text color of the components' chrome area.\n",
         "commentRange": {
-            "start": 353,
-            "end": 353
+            "start": 378,
+            "end": 378
         },
         "context": {
             "type": "variable",
@@ -32252,8 +32436,8 @@
             "value": "k-map-get( $theme, component-text )",
             "scope": "default",
             "line": {
-                "start": 354,
-                "end": 354
+                "start": 379,
+                "end": 379
             }
         },
         "access": "public",
@@ -32268,8 +32452,8 @@
     {
         "description": "The border of the components' chrome area.\n",
         "commentRange": {
-            "start": 355,
-            "end": 355
+            "start": 380,
+            "end": 380
         },
         "context": {
             "type": "variable",
@@ -32277,8 +32461,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",
@@ -32293,8 +32477,8 @@
     {
         "description": "The gradient background of the components' chrome area.\n",
         "commentRange": {
-            "start": 357,
-            "end": 357
+            "start": 382,
+            "end": 382
         },
         "context": {
             "type": "variable",
@@ -32302,8 +32486,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 358,
-                "end": 358
+                "start": 383,
+                "end": 383
             }
         },
         "access": "public",
@@ -32318,8 +32502,8 @@
     {
         "description": "The background of hovered items.\n",
         "commentRange": {
-            "start": 360,
-            "end": 360
+            "start": 385,
+            "end": 385
         },
         "context": {
             "type": "variable",
@@ -32327,8 +32511,8 @@
             "value": "k-map-get( $theme, hover-bg )",
             "scope": "default",
             "line": {
-                "start": 361,
-                "end": 361
+                "start": 386,
+                "end": 386
             }
         },
         "access": "public",
@@ -32343,8 +32527,8 @@
     {
         "description": "The text color of hovered items.\n",
         "commentRange": {
-            "start": 362,
-            "end": 362
+            "start": 387,
+            "end": 387
         },
         "context": {
             "type": "variable",
@@ -32352,8 +32536,8 @@
             "value": "$kendo-base-text",
             "scope": "default",
             "line": {
-                "start": 363,
-                "end": 363
+                "start": 388,
+                "end": 388
             }
         },
         "access": "public",
@@ -32368,8 +32552,8 @@
     {
         "description": "The border color of hovered items.\n",
         "commentRange": {
-            "start": 364,
-            "end": 364
+            "start": 389,
+            "end": 389
         },
         "context": {
             "type": "variable",
@@ -32377,8 +32561,8 @@
             "value": "rgba( $kendo-base-border, .15 )",
             "scope": "default",
             "line": {
-                "start": 365,
-                "end": 365
+                "start": 390,
+                "end": 390
             }
         },
         "access": "public",
@@ -32393,8 +32577,8 @@
     {
         "description": "The gradient background of hovered items.\n",
         "commentRange": {
-            "start": 366,
-            "end": 366
+            "start": 391,
+            "end": 391
         },
         "context": {
             "type": "variable",
@@ -32402,8 +32586,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 367,
-                "end": 367
+                "start": 392,
+                "end": 392
             }
         },
         "access": "public",
@@ -32418,8 +32602,8 @@
     {
         "description": "The background of selected items.\n",
         "commentRange": {
-            "start": 369,
-            "end": 369
+            "start": 394,
+            "end": 394
         },
         "context": {
             "type": "variable",
@@ -32427,8 +32611,8 @@
             "value": "$kendo-color-secondary",
             "scope": "default",
             "line": {
-                "start": 370,
-                "end": 370
+                "start": 395,
+                "end": 395
             }
         },
         "access": "public",
@@ -32443,8 +32627,8 @@
     {
         "description": "The text color of selected items.\n",
         "commentRange": {
-            "start": 371,
-            "end": 371
+            "start": 396,
+            "end": 396
         },
         "context": {
             "type": "variable",
@@ -32452,8 +32636,8 @@
             "value": "$kendo-color-secondary-contrast",
             "scope": "default",
             "line": {
-                "start": 372,
-                "end": 372
+                "start": 397,
+                "end": 397
             }
         },
         "access": "public",
@@ -32468,8 +32652,8 @@
     {
         "description": "The border color of selected items.\n",
         "commentRange": {
-            "start": 373,
-            "end": 373
+            "start": 398,
+            "end": 398
         },
         "context": {
             "type": "variable",
@@ -32477,8 +32661,8 @@
             "value": "rgba( $kendo-base-border, .1 )",
             "scope": "default",
             "line": {
-                "start": 374,
-                "end": 374
+                "start": 399,
+                "end": 399
             }
         },
         "access": "public",
@@ -32493,8 +32677,8 @@
     {
         "description": "The gradient background of selected items.\n",
         "commentRange": {
-            "start": 375,
-            "end": 375
+            "start": 400,
+            "end": 400
         },
         "context": {
             "type": "variable",
@@ -32502,8 +32686,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 376,
-                "end": 376
+                "start": 401,
+                "end": 401
             }
         },
         "access": "public",
@@ -33824,7 +34008,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-window-shadow",
-            "value": "$box-shadow-depth-4",
+            "value": "$box-shadow-depth-8",
             "scope": "default",
             "line": {
                 "start": 79,
@@ -33849,7 +34033,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-window-focus-shadow",
-            "value": "$box-shadow-depth-5",
+            "value": "$box-shadow-depth-9",
             "scope": "default",
             "line": {
                 "start": 82,