@progress/kendo-theme-default 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 1px 1px rgba(0, 0, 0, .16)",
+                "value": "k-elevation(4)",
                 "scope": "default",
                 "line": {
                     "start": 51,
@@ -402,8 +402,8 @@
                 "path": "appbar/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0px 1px 1px rgba(0, 0, 0, 0.16)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))",
+            "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 -1px 1px rgba(0, 0, 0, .16)",
+                "value": "$kendo-appbar-box-shadow",
                 "scope": "default",
                 "line": {
                     "start": 54,
@@ -429,8 +429,8 @@
                 "path": "appbar/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0px -1px 1px rgba(0, 0, 0, 0.16)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))",
+            "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(0, 0, 0, .12)",
+                "value": "k-elevation(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, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))",
+            "resolvedType": "String"
         },
         {
             "description": "The text color of the flat BottomNavigation.\n",
@@ -8001,7 +8001,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-color-gradient-focus-shadow",
-                "value": "1px 1px 7px 1px rgba(0, 0, 0, .3)",
+                "value": "k-elevation(3)",
                 "scope": "default",
                 "line": {
                     "start": 51,
@@ -8016,8 +8016,8 @@
                 "path": "colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "1px 1px 7px 1px rgba(0, 0, 0, 0.3)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))",
+            "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( $kendo-color-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(0, 0, 0, .5)",
+                "name": "kendo-color-gradient-draghandle-border",
+                "value": "rgba( $kendo-color-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 hover 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": "46px",
                 "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-math-div( $kendo-color-gradient-spacer, 1.5 )",
                 "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-math-div( $kendo-color-gradient-spacer, 3 )",
                 "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-bold",
                 "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-math-div( $kendo-color-gradient-spacer, 1.5 )",
                 "scope": "default",
                 "line": {
-                    "start": 136,
-                    "end": 136
+                    "start": 142,
+                    "end": 142
                 }
             },
             "group": [
@@ -9384,17 +9438,17 @@
         {
             "description": "The box shadow of the focused ColorEditor.\n",
             "commentRange": {
-                "start": 38,
-                "end": 39
+                "start": 39,
+                "end": 40
             },
             "context": {
                 "type": "variable",
                 "name": "kendo-color-editor-focus-shadow",
-                "value": "1px 1px 7px 1px rgba(0, 0, 0, .3)",
+                "value": "null",
                 "scope": "default",
                 "line": {
-                    "start": 40,
-                    "end": 40
+                    "start": 41,
+                    "end": 41
                 }
             },
             "group": [
@@ -9405,14 +9459,14 @@
                 "path": "coloreditor/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "1px 1px 7px 1px rgba(0, 0, 0, 0.3)",
-            "resolvedType": "List"
+            "resolvedValue": "null",
+            "resolvedType": "Null"
         },
         {
             "description": "The vertical padding of the ColorEditor header.\n",
             "commentRange": {
-                "start": 42,
-                "end": 43
+                "start": 43,
+                "end": 44
             },
             "context": {
                 "type": "variable",
@@ -9420,8 +9474,8 @@
                 "value": "$kendo-color-editor-spacer",
                 "scope": "default",
                 "line": {
-                    "start": 44,
-                    "end": 44
+                    "start": 45,
+                    "end": 45
                 }
             },
             "group": [
@@ -9438,8 +9492,8 @@
         {
             "description": "The horizontal padding of the ColorEditor header.\n",
             "commentRange": {
-                "start": 45,
-                "end": 46
+                "start": 46,
+                "end": 47
             },
             "context": {
                 "type": "variable",
@@ -9447,8 +9501,8 @@
                 "value": "$kendo-color-editor-header-padding-y",
                 "scope": "default",
                 "line": {
-                    "start": 47,
-                    "end": 47
+                    "start": 48,
+                    "end": 48
                 }
             },
             "group": [
@@ -9465,8 +9519,8 @@
         {
             "description": "The spacing between the ColorEditor header actions.\n",
             "commentRange": {
-                "start": 48,
-                "end": 49
+                "start": 49,
+                "end": 50
             },
             "context": {
                 "type": "variable",
@@ -9474,8 +9528,8 @@
                 "value": "k-math-div( $kendo-color-editor-spacer, 1.5 )",
                 "scope": "default",
                 "line": {
-                    "start": 50,
-                    "end": 50
+                    "start": 51,
+                    "end": 51
                 }
             },
             "group": [
@@ -9492,8 +9546,8 @@
         {
             "description": "The width of the ColorEditor preview.\n",
             "commentRange": {
-                "start": 52,
-                "end": 53
+                "start": 53,
+                "end": 54
             },
             "context": {
                 "type": "variable",
@@ -9501,8 +9555,8 @@
                 "value": "32px",
                 "scope": "default",
                 "line": {
-                    "start": 54,
-                    "end": 54
+                    "start": 55,
+                    "end": 55
                 }
             },
             "group": [
@@ -9519,8 +9573,8 @@
         {
             "description": "The height of the ColorEditor preview.\n",
             "commentRange": {
-                "start": 55,
-                "end": 56
+                "start": 56,
+                "end": 57
             },
             "context": {
                 "type": "variable",
@@ -9528,8 +9582,8 @@
                 "value": "12px",
                 "scope": "default",
                 "line": {
-                    "start": 57,
-                    "end": 57
+                    "start": 58,
+                    "end": 58
                 }
             },
             "group": [
@@ -9546,8 +9600,8 @@
         {
             "description": "The spacing between the colors in the ColorEditor preview.\n",
             "commentRange": {
-                "start": 58,
-                "end": 59
+                "start": 59,
+                "end": 60
             },
             "context": {
                 "type": "variable",
@@ -9555,8 +9609,8 @@
                 "value": "k-map-get( $kendo-spacing, 1 )",
                 "scope": "default",
                 "line": {
-                    "start": 60,
-                    "end": 60
+                    "start": 61,
+                    "end": 61
                 }
             },
             "group": [
@@ -9573,8 +9627,8 @@
         {
             "description": "The vertical padding of the ColorEditor views container.\n",
             "commentRange": {
-                "start": 62,
-                "end": 63
+                "start": 63,
+                "end": 64
             },
             "context": {
                 "type": "variable",
@@ -9582,8 +9636,8 @@
                 "value": "$kendo-color-editor-spacer",
                 "scope": "default",
                 "line": {
-                    "start": 64,
-                    "end": 64
+                    "start": 65,
+                    "end": 65
                 }
             },
             "group": [
@@ -9600,8 +9654,8 @@
         {
             "description": "The horizontal padding of the ColorEditor views container.\n",
             "commentRange": {
-                "start": 65,
-                "end": 66
+                "start": 66,
+                "end": 67
             },
             "context": {
                 "type": "variable",
@@ -9609,8 +9663,8 @@
                 "value": "$kendo-color-editor-views-padding-y",
                 "scope": "default",
                 "line": {
-                    "start": 67,
-                    "end": 67
+                    "start": 68,
+                    "end": 68
                 }
             },
             "group": [
@@ -9627,8 +9681,8 @@
         {
             "description": "The spacing of the ColorEditor views container.\n",
             "commentRange": {
-                "start": 68,
-                "end": 69
+                "start": 69,
+                "end": 70
             },
             "context": {
                 "type": "variable",
@@ -9636,8 +9690,8 @@
                 "value": "$kendo-color-editor-spacer",
                 "scope": "default",
                 "line": {
-                    "start": 70,
-                    "end": 70
+                    "start": 71,
+                    "end": 71
                 }
             },
             "group": [
@@ -9654,8 +9708,8 @@
         {
             "description": "The outline color of the focused ColorGradient.\n",
             "commentRange": {
-                "start": 72,
-                "end": 73
+                "start": 73,
+                "end": 74
             },
             "context": {
                 "type": "variable",
@@ -9663,8 +9717,8 @@
                 "value": "rgba(0, 0, 0, .3)",
                 "scope": "default",
                 "line": {
-                    "start": 74,
-                    "end": 74
+                    "start": 75,
+                    "end": 75
                 }
             },
             "group": [
@@ -9681,8 +9735,8 @@
         {
             "description": "The outline width of the focused ColorGradient.\n",
             "commentRange": {
-                "start": 75,
-                "end": 76
+                "start": 76,
+                "end": 77
             },
             "context": {
                 "type": "variable",
@@ -9690,8 +9744,8 @@
                 "value": "2px",
                 "scope": "default",
                 "line": {
-                    "start": 77,
-                    "end": 77
+                    "start": 78,
+                    "end": 78
                 }
             },
             "group": [
@@ -9708,8 +9762,8 @@
         {
             "description": "The outline offset of the focused ColorGradient.\n",
             "commentRange": {
-                "start": 78,
-                "end": 79
+                "start": 79,
+                "end": 80
             },
             "context": {
                 "type": "variable",
@@ -9717,8 +9771,8 @@
                 "value": "4px",
                 "scope": "default",
                 "line": {
-                    "start": 80,
-                    "end": 80
+                    "start": 81,
+                    "end": 81
                 }
             },
             "group": [
@@ -14196,7 +14250,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-fab-shadow",
-                "value": "0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12), 0 3px 5px rgba(0, 0, 0, .2)",
+                "value": "k-elevation(5)",
                 "scope": "default",
                 "line": {
                     "start": 118,
@@ -14211,8 +14265,8 @@
                 "path": "fab/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12), 0 3px 5px rgba(0, 0, 0, 0.2)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))",
+            "resolvedType": "String"
         },
         {
             "description": "The shadow of the disabled FAB.\n",
@@ -14223,7 +14277,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-fab-disabled-shadow",
-                "value": "0 6px 10px k-try-tint( rgba(0, 0, 0, .14), .5 ), 0 1px 18px k-try-tint( rgba(0, 0, 0, .12), .5 ), 0 3px 5px k-try-tint( rgba(0, 0, 0, .2), .5 )",
+                "value": "k-elevation(5)",
                 "scope": "default",
                 "line": {
                     "start": 121,
@@ -14238,8 +14292,8 @@
                 "path": "fab/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 6px 10px rgba(91, 91, 91, 0.1744), 0 1px 18px rgba(101, 101, 101, 0.1552), 0 3px 5px rgba(70, 70, 70, 0.232)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))",
+            "resolvedType": "String"
         },
         {
             "description": "The shadow of the active FAB.\n",
@@ -14508,8 +14562,8 @@
                 "path": "fab/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12), 0 3px 5px rgba(0, 0, 0, 0.2)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))",
+            "resolvedType": "String"
         },
         {
             "description": "The shadow of the disabled FAB item.\n",
@@ -14535,8 +14589,8 @@
                 "path": "fab/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 6px 10px rgba(91, 91, 91, 0.1744), 0 1px 18px rgba(101, 101, 101, 0.1552), 0 3px 5px rgba(70, 70, 70, 0.232)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))",
+            "resolvedType": "String"
         },
         {
             "description": "The shadow of the active FAB item.\n",
@@ -20136,7 +20190,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-list-header-shadow",
-                "value": "0 5px 10px 0 rgba(0, 0, 0, .06)",
+                "value": "k-elevation(2)",
                 "scope": "default",
                 "line": {
                     "start": 198,
@@ -20151,8 +20205,8 @@
                 "path": "list/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 5px 10px 0 rgba(0, 0, 0, 0.06)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))",
+            "resolvedType": "String"
         },
         {
             "description": "The background color of the List items.\n",
@@ -23526,8 +23580,8 @@
                 "path": "notification/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))",
+            "resolvedType": "String"
         },
         {
             "description": "The horizontal spacing of the Notification icon.\n",
@@ -26307,8 +26361,8 @@
                 "path": "popover/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))",
+            "resolvedType": "String"
         },
         {
             "description": "The horizontal padding of the Popover header.\n",
@@ -27048,7 +27102,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-popup-shadow",
-                "value": "0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04)",
+                "value": "k-elevation(4)",
                 "scope": "default",
                 "line": {
                     "start": 39,
@@ -27063,8 +27117,8 @@
                 "path": "popup/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))",
+            "resolvedType": "String"
         },
         {
             "description": "The height of the ProgressBar.\n",
@@ -33192,8 +33246,8 @@
                 "path": "tilelayout/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 3px 4px 0 rgba(0, 0, 0, 0.06)",
-            "resolvedType": "List"
+            "resolvedValue": "null",
+            "resolvedType": "Null"
         },
         {
             "description": "The width of the border around the TileLayout hint.\n",
@@ -37848,7 +37902,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-window-shadow",
-                "value": "0 3px 3px 0 rgba(0, 0, 0, .06)",
+                "value": "k-elevation(8)",
                 "scope": "default",
                 "line": {
                     "start": 79,
@@ -37863,8 +37917,8 @@
                 "path": "window/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "0 3px 3px 0 rgba(0, 0, 0, 0.06)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-8, 0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12))",
+            "resolvedType": "String"
         },
         {
             "description": "The box shadow of the focused Window.\n",
@@ -37875,7 +37929,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-window-focus-shadow",
-                "value": "1px 1px 7px 1px rgba(0, 0, 0, .3)",
+                "value": "k-elevation(9)",
                 "scope": "default",
                 "line": {
                     "start": 82,
@@ -37890,8 +37944,8 @@
                 "path": "window/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "1px 1px 7px 1px rgba(0, 0, 0, 0.3)",
-            "resolvedType": "List"
+            "resolvedValue": "var(--kendo-elevation-9, 0 32px 34px rgba(0, 0, 0, 0.32), 0 4px 16px rgba(0, 0, 0, 0.12))",
+            "resolvedType": "String"
         },
         {
             "description": "The background color of the Window titlebar.\n",
@@ -39700,7 +39754,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-appbar-box-shadow",
-                        "value": "0px 1px 1px rgba(0, 0, 0, .16)",
+                        "value": "k-elevation(4)",
                         "scope": "default",
                         "line": {
                             "start": 51,
@@ -39715,8 +39769,8 @@
                         "path": "appbar/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0px 1px 1px rgba(0, 0, 0, 0.16)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The box shadow of the AppBar with bottom position.\n",
@@ -39727,7 +39781,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-appbar-bottom-box-shadow",
-                        "value": "0px -1px 1px rgba(0, 0, 0, .16)",
+                        "value": "$kendo-appbar-box-shadow",
                         "scope": "default",
                         "line": {
                             "start": 54,
@@ -39742,8 +39796,8 @@
                         "path": "appbar/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0px -1px 1px rgba(0, 0, 0, 0.16)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))",
+                    "resolvedType": "String"
                 }
             ]
         },
@@ -40960,7 +41014,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-bottom-nav-shadow",
-                        "value": "0px 0px 5px rgba(0, 0, 0, .12)",
+                        "value": "k-elevation(4)",
                         "scope": "default",
                         "line": {
                             "start": 52,
@@ -40975,8 +41029,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, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The text color of the flat BottomNavigation.\n",
@@ -47368,7 +47422,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-gradient-focus-shadow",
-                        "value": "1px 1px 7px 1px rgba(0, 0, 0, .3)",
+                        "value": "k-elevation(3)",
                         "scope": "default",
                         "line": {
                             "start": 51,
@@ -47383,8 +47437,8 @@
                         "path": "colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "1px 1px 7px 1px rgba(0, 0, 0, 0.3)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The border radius of the ColorGradient canvas.\n",
@@ -47684,15 +47738,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,
@@ -47707,19 +47761,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,
@@ -47734,19 +47788,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,
@@ -47761,19 +47815,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( $kendo-color-white, .8)",
+                        "name": "kendo-color-gradient-draghandle-bg",
+                        "value": "transparent",
                         "scope": "default",
                         "line": {
                             "start": 100,
@@ -47788,19 +47842,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(0, 0, 0, .5)",
+                        "name": "kendo-color-gradient-draghandle-border",
+                        "value": "rgba( $kendo-color-white, .8)",
                         "scope": "default",
                         "line": {
                             "start": 103,
@@ -47815,19 +47869,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,
@@ -47842,19 +47896,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,
@@ -47869,14 +47923,68 @@
                         "path": "colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 1px 4px black",
-                    "resolvedType": "List"
+                    "resolvedValue": "#000000",
+                    "resolvedType": "Color"
+                },
+                {
+                    "description": "The hover 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",
@@ -47884,8 +47992,8 @@
                         "value": "- k-math-div( $kendo-color-gradient-draghandle-height, 2 )",
                         "scope": "default",
                         "line": {
-                            "start": 113,
-                            "end": 113
+                            "start": 119,
+                            "end": 119
                         }
                     },
                     "group": [
@@ -47902,8 +48010,8 @@
                 {
                     "description": "The horizontal margin of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 114,
-                        "end": 115
+                        "start": 120,
+                        "end": 121
                     },
                     "context": {
                         "type": "variable",
@@ -47911,8 +48019,8 @@
                         "value": "- k-math-div( $kendo-color-gradient-draghandle-width, 2 )",
                         "scope": "default",
                         "line": {
-                            "start": 116,
-                            "end": 116
+                            "start": 122,
+                            "end": 122
                         }
                     },
                     "group": [
@@ -47929,8 +48037,8 @@
                 {
                     "description": "The width of the ColorGradient input.\n",
                     "commentRange": {
-                        "start": 118,
-                        "end": 119
+                        "start": 124,
+                        "end": 125
                     },
                     "context": {
                         "type": "variable",
@@ -47938,8 +48046,8 @@
                         "value": "46px",
                         "scope": "default",
                         "line": {
-                            "start": 120,
-                            "end": 120
+                            "start": 126,
+                            "end": 126
                         }
                     },
                     "group": [
@@ -47956,8 +48064,8 @@
                 {
                     "description": "The spacing between the ColorGradient inputs.\n",
                     "commentRange": {
-                        "start": 121,
-                        "end": 122
+                        "start": 127,
+                        "end": 128
                     },
                     "context": {
                         "type": "variable",
@@ -47965,8 +48073,8 @@
                         "value": "k-math-div( $kendo-color-gradient-spacer, 1.5 )",
                         "scope": "default",
                         "line": {
-                            "start": 123,
-                            "end": 123
+                            "start": 129,
+                            "end": 129
                         }
                     },
                     "group": [
@@ -47983,8 +48091,8 @@
                 {
                     "description": "The spacing between the ColorGradient inputs and their labels.\n",
                     "commentRange": {
-                        "start": 124,
-                        "end": 125
+                        "start": 130,
+                        "end": 131
                     },
                     "context": {
                         "type": "variable",
@@ -47992,8 +48100,8 @@
                         "value": "k-math-div( $kendo-color-gradient-spacer, 3 )",
                         "scope": "default",
                         "line": {
-                            "start": 126,
-                            "end": 126
+                            "start": 132,
+                            "end": 132
                         }
                     },
                     "group": [
@@ -48010,8 +48118,8 @@
                 {
                     "description": "The text color of the ColorGradient input labels.\n",
                     "commentRange": {
-                        "start": 127,
-                        "end": 128
+                        "start": 133,
+                        "end": 134
                     },
                     "context": {
                         "type": "variable",
@@ -48019,8 +48127,8 @@
                         "value": "$kendo-subtle-text",
                         "scope": "default",
                         "line": {
-                            "start": 129,
-                            "end": 129
+                            "start": 135,
+                            "end": 135
                         }
                     },
                     "group": [
@@ -48037,8 +48145,8 @@
                 {
                     "description": "The font weight of the ColorGradient contrast ratio text.\n",
                     "commentRange": {
-                        "start": 131,
-                        "end": 132
+                        "start": 137,
+                        "end": 138
                     },
                     "context": {
                         "type": "variable",
@@ -48046,8 +48154,8 @@
                         "value": "$kendo-font-weight-bold",
                         "scope": "default",
                         "line": {
-                            "start": 133,
-                            "end": 133
+                            "start": 139,
+                            "end": 139
                         }
                     },
                     "group": [
@@ -48064,8 +48172,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",
@@ -48073,8 +48181,8 @@
                         "value": "k-math-div( $kendo-color-gradient-spacer, 1.5 )",
                         "scope": "default",
                         "line": {
-                            "start": 136,
-                            "end": 136
+                            "start": 142,
+                            "end": 142
                         }
                     },
                     "group": [
@@ -48763,17 +48871,17 @@
                 {
                     "description": "The box shadow of the focused ColorEditor.\n",
                     "commentRange": {
-                        "start": 38,
-                        "end": 39
+                        "start": 39,
+                        "end": 40
                     },
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-editor-focus-shadow",
-                        "value": "1px 1px 7px 1px rgba(0, 0, 0, .3)",
+                        "value": "null",
                         "scope": "default",
                         "line": {
-                            "start": 40,
-                            "end": 40
+                            "start": 41,
+                            "end": 41
                         }
                     },
                     "group": [
@@ -48784,14 +48892,14 @@
                         "path": "coloreditor/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "1px 1px 7px 1px rgba(0, 0, 0, 0.3)",
-                    "resolvedType": "List"
+                    "resolvedValue": "null",
+                    "resolvedType": "Null"
                 },
                 {
                     "description": "The vertical padding of the ColorEditor header.\n",
                     "commentRange": {
-                        "start": 42,
-                        "end": 43
+                        "start": 43,
+                        "end": 44
                     },
                     "context": {
                         "type": "variable",
@@ -48799,8 +48907,8 @@
                         "value": "$kendo-color-editor-spacer",
                         "scope": "default",
                         "line": {
-                            "start": 44,
-                            "end": 44
+                            "start": 45,
+                            "end": 45
                         }
                     },
                     "group": [
@@ -48817,8 +48925,8 @@
                 {
                     "description": "The horizontal padding of the ColorEditor header.\n",
                     "commentRange": {
-                        "start": 45,
-                        "end": 46
+                        "start": 46,
+                        "end": 47
                     },
                     "context": {
                         "type": "variable",
@@ -48826,8 +48934,8 @@
                         "value": "$kendo-color-editor-header-padding-y",
                         "scope": "default",
                         "line": {
-                            "start": 47,
-                            "end": 47
+                            "start": 48,
+                            "end": 48
                         }
                     },
                     "group": [
@@ -48844,8 +48952,8 @@
                 {
                     "description": "The spacing between the ColorEditor header actions.\n",
                     "commentRange": {
-                        "start": 48,
-                        "end": 49
+                        "start": 49,
+                        "end": 50
                     },
                     "context": {
                         "type": "variable",
@@ -48853,8 +48961,8 @@
                         "value": "k-math-div( $kendo-color-editor-spacer, 1.5 )",
                         "scope": "default",
                         "line": {
-                            "start": 50,
-                            "end": 50
+                            "start": 51,
+                            "end": 51
                         }
                     },
                     "group": [
@@ -48871,8 +48979,8 @@
                 {
                     "description": "The width of the ColorEditor preview.\n",
                     "commentRange": {
-                        "start": 52,
-                        "end": 53
+                        "start": 53,
+                        "end": 54
                     },
                     "context": {
                         "type": "variable",
@@ -48880,8 +48988,8 @@
                         "value": "32px",
                         "scope": "default",
                         "line": {
-                            "start": 54,
-                            "end": 54
+                            "start": 55,
+                            "end": 55
                         }
                     },
                     "group": [
@@ -48898,8 +49006,8 @@
                 {
                     "description": "The height of the ColorEditor preview.\n",
                     "commentRange": {
-                        "start": 55,
-                        "end": 56
+                        "start": 56,
+                        "end": 57
                     },
                     "context": {
                         "type": "variable",
@@ -48907,8 +49015,8 @@
                         "value": "12px",
                         "scope": "default",
                         "line": {
-                            "start": 57,
-                            "end": 57
+                            "start": 58,
+                            "end": 58
                         }
                     },
                     "group": [
@@ -48925,8 +49033,8 @@
                 {
                     "description": "The spacing between the colors in the ColorEditor preview.\n",
                     "commentRange": {
-                        "start": 58,
-                        "end": 59
+                        "start": 59,
+                        "end": 60
                     },
                     "context": {
                         "type": "variable",
@@ -48934,8 +49042,8 @@
                         "value": "k-map-get( $kendo-spacing, 1 )",
                         "scope": "default",
                         "line": {
-                            "start": 60,
-                            "end": 60
+                            "start": 61,
+                            "end": 61
                         }
                     },
                     "group": [
@@ -48952,8 +49060,8 @@
                 {
                     "description": "The vertical padding of the ColorEditor views container.\n",
                     "commentRange": {
-                        "start": 62,
-                        "end": 63
+                        "start": 63,
+                        "end": 64
                     },
                     "context": {
                         "type": "variable",
@@ -48961,8 +49069,8 @@
                         "value": "$kendo-color-editor-spacer",
                         "scope": "default",
                         "line": {
-                            "start": 64,
-                            "end": 64
+                            "start": 65,
+                            "end": 65
                         }
                     },
                     "group": [
@@ -48979,8 +49087,8 @@
                 {
                     "description": "The horizontal padding of the ColorEditor views container.\n",
                     "commentRange": {
-                        "start": 65,
-                        "end": 66
+                        "start": 66,
+                        "end": 67
                     },
                     "context": {
                         "type": "variable",
@@ -48988,8 +49096,8 @@
                         "value": "$kendo-color-editor-views-padding-y",
                         "scope": "default",
                         "line": {
-                            "start": 67,
-                            "end": 67
+                            "start": 68,
+                            "end": 68
                         }
                     },
                     "group": [
@@ -49006,8 +49114,8 @@
                 {
                     "description": "The spacing of the ColorEditor views container.\n",
                     "commentRange": {
-                        "start": 68,
-                        "end": 69
+                        "start": 69,
+                        "end": 70
                     },
                     "context": {
                         "type": "variable",
@@ -49015,8 +49123,8 @@
                         "value": "$kendo-color-editor-spacer",
                         "scope": "default",
                         "line": {
-                            "start": 70,
-                            "end": 70
+                            "start": 71,
+                            "end": 71
                         }
                     },
                     "group": [
@@ -49033,8 +49141,8 @@
                 {
                     "description": "The outline color of the focused ColorGradient.\n",
                     "commentRange": {
-                        "start": 72,
-                        "end": 73
+                        "start": 73,
+                        "end": 74
                     },
                     "context": {
                         "type": "variable",
@@ -49042,8 +49150,8 @@
                         "value": "rgba(0, 0, 0, .3)",
                         "scope": "default",
                         "line": {
-                            "start": 74,
-                            "end": 74
+                            "start": 75,
+                            "end": 75
                         }
                     },
                     "group": [
@@ -49060,8 +49168,8 @@
                 {
                     "description": "The outline width of the focused ColorGradient.\n",
                     "commentRange": {
-                        "start": 75,
-                        "end": 76
+                        "start": 76,
+                        "end": 77
                     },
                     "context": {
                         "type": "variable",
@@ -49069,8 +49177,8 @@
                         "value": "2px",
                         "scope": "default",
                         "line": {
-                            "start": 77,
-                            "end": 77
+                            "start": 78,
+                            "end": 78
                         }
                     },
                     "group": [
@@ -49087,8 +49195,8 @@
                 {
                     "description": "The outline offset of the focused ColorGradient.\n",
                     "commentRange": {
-                        "start": 78,
-                        "end": 79
+                        "start": 79,
+                        "end": 80
                     },
                     "context": {
                         "type": "variable",
@@ -49096,8 +49204,8 @@
                         "value": "4px",
                         "scope": "default",
                         "line": {
-                            "start": 80,
-                            "end": 80
+                            "start": 81,
+                            "end": 81
                         }
                     },
                     "group": [
@@ -52954,7 +53062,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-fab-shadow",
-                        "value": "0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12), 0 3px 5px rgba(0, 0, 0, .2)",
+                        "value": "k-elevation(5)",
                         "scope": "default",
                         "line": {
                             "start": 118,
@@ -52969,8 +53077,8 @@
                         "path": "fab/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12), 0 3px 5px rgba(0, 0, 0, 0.2)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The shadow of the disabled FAB.\n",
@@ -52981,7 +53089,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-fab-disabled-shadow",
-                        "value": "0 6px 10px k-try-tint( rgba(0, 0, 0, .14), .5 ), 0 1px 18px k-try-tint( rgba(0, 0, 0, .12), .5 ), 0 3px 5px k-try-tint( rgba(0, 0, 0, .2), .5 )",
+                        "value": "k-elevation(5)",
                         "scope": "default",
                         "line": {
                             "start": 121,
@@ -52996,8 +53104,8 @@
                         "path": "fab/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 6px 10px rgba(91, 91, 91, 0.1744), 0 1px 18px rgba(101, 101, 101, 0.1552), 0 3px 5px rgba(70, 70, 70, 0.232)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The shadow of the active FAB.\n",
@@ -53266,8 +53374,8 @@
                         "path": "fab/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 6px 10px rgba(0, 0, 0, 0.14), 0 1px 18px rgba(0, 0, 0, 0.12), 0 3px 5px rgba(0, 0, 0, 0.2)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The shadow of the disabled FAB item.\n",
@@ -53293,8 +53401,8 @@
                         "path": "fab/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 6px 10px rgba(91, 91, 91, 0.1744), 0 1px 18px rgba(101, 101, 101, 0.1552), 0 3px 5px rgba(70, 70, 70, 0.232)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-5, 0 10px 12px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.12))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The shadow of the active FAB item.\n",
@@ -58924,7 +59032,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-list-header-shadow",
-                        "value": "0 5px 10px 0 rgba(0, 0, 0, .06)",
+                        "value": "k-elevation(2)",
                         "scope": "default",
                         "line": {
                             "start": 198,
@@ -58939,8 +59047,8 @@
                         "path": "list/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 5px 10px 0 rgba(0, 0, 0, 0.06)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-2, 0 4px 6px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.12))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The background color of the List items.\n",
@@ -62356,8 +62464,8 @@
                         "path": "notification/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The horizontal spacing of the Notification icon.\n",
@@ -65155,8 +65263,8 @@
                         "path": "popover/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The horizontal padding of the Popover header.\n",
@@ -65902,7 +66010,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-popup-shadow",
-                        "value": "0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04)",
+                        "value": "k-elevation(4)",
                         "scope": "default",
                         "line": {
                             "start": 39,
@@ -65917,8 +66025,8 @@
                         "path": "popup/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 2px 4px 0 rgba(0, 0, 0, 0.03), 0 4px 5px 0 rgba(0, 0, 0, 0.04)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-4, 0 8px 10px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.12))",
+                    "resolvedType": "String"
                 }
             ]
         },
@@ -72094,8 +72202,8 @@
                         "path": "tilelayout/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 3px 4px 0 rgba(0, 0, 0, 0.06)",
-                    "resolvedType": "List"
+                    "resolvedValue": "null",
+                    "resolvedType": "Null"
                 },
                 {
                     "description": "The width of the border around the TileLayout hint.\n",
@@ -76213,7 +76321,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-window-shadow",
-                        "value": "0 3px 3px 0 rgba(0, 0, 0, .06)",
+                        "value": "k-elevation(8)",
                         "scope": "default",
                         "line": {
                             "start": 79,
@@ -76228,8 +76336,8 @@
                         "path": "window/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "0 3px 3px 0 rgba(0, 0, 0, 0.06)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-8, 0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The box shadow of the focused Window.\n",
@@ -76240,7 +76348,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-window-focus-shadow",
-                        "value": "1px 1px 7px 1px rgba(0, 0, 0, .3)",
+                        "value": "k-elevation(9)",
                         "scope": "default",
                         "line": {
                             "start": 82,
@@ -76255,8 +76363,8 @@
                         "path": "window/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "1px 1px 7px 1px rgba(0, 0, 0, 0.3)",
-                    "resolvedType": "List"
+                    "resolvedValue": "var(--kendo-elevation-9, 0 32px 34px rgba(0, 0, 0, 0.32), 0 4px 16px rgba(0, 0, 0, 0.12))",
+                    "resolvedType": "String"
                 },
                 {
                     "description": "The background color of the Window titlebar.\n",