@progress/kendo-theme-material 6.8.0-dev.1 → 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,
@@ -7875,19 +7875,19 @@
         }
     },
     {
-        "description": "The vertical margin of the ColorGradient canvas drag handle.\n",
+        "description": "The outline color of the outline around the ColorGradient canvas drag handle.\n",
         "commentRange": {
-            "start": 111,
-            "end": 112
+            "start": 110,
+            "end": 111
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-canvas-draghandle-margin-y",
-            "value": "- k-math-div( $kendo-color-gradient-draghandle-height, 2 )",
+            "name": "kendo-color-gradient-draghandle-hover-shadow",
+            "value": "$kendo-color-black",
             "scope": "default",
             "line": {
-                "start": 113,
-                "end": 113
+                "start": 112,
+                "end": 112
             }
         },
         "group": [
@@ -7900,19 +7900,19 @@
         }
     },
     {
-        "description": "The horizontal margin of the ColorGradient canvas drag handle.\n",
+        "description": "The box shadow of the ColorGradient canvas drag handle.\n",
         "commentRange": {
-            "start": 114,
-            "end": 115
+            "start": 113,
+            "end": 114
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-canvas-draghandle-margin-x",
-            "value": "- k-math-div( $kendo-color-gradient-draghandle-width, 2 )",
+            "name": "kendo-color-gradient-draghandle-shadow",
+            "value": "k-elevation(2)",
             "scope": "default",
             "line": {
-                "start": 116,
-                "end": 116
+                "start": 115,
+                "end": 115
             }
         },
         "group": [
@@ -7925,19 +7925,19 @@
         }
     },
     {
-        "description": "The width of the ColorGradient input.\n",
+        "description": "The vertical margin of the ColorGradient canvas drag handle.\n",
         "commentRange": {
-            "start": 118,
-            "end": 119
+            "start": 117,
+            "end": 118
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-input-width",
-            "value": "50px",
+            "name": "kendo-color-gradient-canvas-draghandle-margin-y",
+            "value": "- k-math-div( $kendo-color-gradient-draghandle-height, 2 )",
             "scope": "default",
             "line": {
-                "start": 120,
-                "end": 120
+                "start": 119,
+                "end": 119
             }
         },
         "group": [
@@ -7950,19 +7950,19 @@
         }
     },
     {
-        "description": "The spacing between the ColorGradient inputs.\n",
+        "description": "The horizontal margin of the ColorGradient canvas drag handle.\n",
         "commentRange": {
-            "start": 121,
-            "end": 122
+            "start": 120,
+            "end": 121
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-input-gap",
-            "value": "k-map-get( $kendo-spacing, 2 )",
+            "name": "kendo-color-gradient-canvas-draghandle-margin-x",
+            "value": "- k-math-div( $kendo-color-gradient-draghandle-width, 2 )",
             "scope": "default",
             "line": {
-                "start": 123,
-                "end": 123
+                "start": 122,
+                "end": 122
             }
         },
         "group": [
@@ -7975,15 +7975,15 @@
         }
     },
     {
-        "description": "The spacing between the ColorGradient inputs and their labels.\n",
+        "description": "The width of the ColorGradient input.\n",
         "commentRange": {
             "start": 124,
             "end": 125
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-input-label-gap",
-            "value": "k-map-get( $kendo-spacing, 1 )",
+            "name": "kendo-color-gradient-input-width",
+            "value": "50px",
             "scope": "default",
             "line": {
                 "start": 126,
@@ -8000,15 +8000,15 @@
         }
     },
     {
-        "description": "The text color of the ColorGradient input labels.\n",
+        "description": "The spacing between the ColorGradient inputs.\n",
         "commentRange": {
             "start": 127,
             "end": 128
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-input-label-text",
-            "value": "$kendo-subtle-text",
+            "name": "kendo-color-gradient-input-gap",
+            "value": "k-map-get( $kendo-spacing, 2 )",
             "scope": "default",
             "line": {
                 "start": 129,
@@ -8025,19 +8025,19 @@
         }
     },
     {
-        "description": "The font weight of the ColorGradient contrast ratio text.\n",
+        "description": "The spacing between the ColorGradient inputs and their labels.\n",
         "commentRange": {
-            "start": 131,
-            "end": 132
+            "start": 130,
+            "end": 131
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-contrast-ratio-font-weight",
-            "value": "$kendo-font-weight-medium",
+            "name": "kendo-color-gradient-input-label-gap",
+            "value": "k-map-get( $kendo-spacing, 1 )",
             "scope": "default",
             "line": {
-                "start": 133,
-                "end": 133
+                "start": 132,
+                "end": 132
             }
         },
         "group": [
@@ -8050,19 +8050,19 @@
         }
     },
     {
-        "description": "The spacing between the items in the ColorGradient contrast tool.\n",
+        "description": "The text color of the ColorGradient input labels.\n",
         "commentRange": {
-            "start": 134,
-            "end": 135
+            "start": 133,
+            "end": 134
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-contrast-spacer",
-            "value": "k-map-get( $kendo-spacing, 2 )",
+            "name": "kendo-color-gradient-input-label-text",
+            "value": "$kendo-subtle-text",
             "scope": "default",
             "line": {
-                "start": 136,
-                "end": 136
+                "start": 135,
+                "end": 135
             }
         },
         "group": [
@@ -8075,391 +8075,441 @@
         }
     },
     {
-        "description": "The color white.\nNote: you cannot change this value.\n",
-        "commentRange": {
-            "start": 3,
-            "end": 6
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-color-white",
-            "value": "#ffffff",
-            "scope": "private",
-            "line": {
-                "start": 7,
-                "end": 7
-            }
-        },
-        "type": "Color",
-        "group": [
-            "color-system"
-        ],
-        "access": "public",
-        "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
-    {
-        "description": "The color black.\nNote: you cannot change this value.\n",
-        "commentRange": {
-            "start": 9,
-            "end": 12
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-color-black",
-            "value": "#000000",
-            "scope": "private",
-            "line": {
-                "start": 13,
-                "end": 13
-            }
-        },
-        "type": "Color",
-        "group": [
-            "color-system"
-        ],
-        "access": "public",
-        "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
-    {
-        "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
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-color-primary",
-            "value": "material-color( $primary-palette, main )",
-            "scope": "default",
-            "line": {
-                "start": 169,
-                "end": 169
-            }
-        },
-        "group": [
-            "color-system"
-        ],
-        "type": "Color",
-        "access": "public",
-        "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
-    {
-        "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
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-color-primary-contrast",
-            "value": "material-color( $primary-palette, main-contrast )",
-            "scope": "default",
-            "line": {
-                "start": 177,
-                "end": 177
-            }
-        },
-        "group": [
-            "color-system"
-        ],
-        "type": "Color",
-        "access": "public",
-        "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
-    {
-        "description": "The secondary color of the theme.\n",
-        "commentRange": {
-            "start": 179,
-            "end": 181
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-color-secondary",
-            "value": "material-color( $secondary-palette, main )",
-            "scope": "default",
-            "line": {
-                "start": 182,
-                "end": 182
-            }
-        },
-        "group": [
-            "color-system"
-        ],
-        "type": "Color",
-        "access": "public",
-        "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
-    {
-        "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
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-color-secondary-contrast",
-            "value": "material-color( $secondary-palette, main-contrast )",
-            "scope": "default",
-            "line": {
-                "start": 190,
-                "end": 190
-            }
-        },
-        "group": [
-            "color-system"
-        ],
-        "type": "Color",
-        "access": "public",
-        "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
-    {
-        "description": "The tertiary color of the theme.\n",
-        "commentRange": {
-            "start": 192,
-            "end": 194
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-color-tertiary",
-            "value": "material-color($tertiary-palette, main)",
-            "scope": "default",
-            "line": {
-                "start": 195,
-                "end": 195
-            }
-        },
-        "group": [
-            "color-system"
-        ],
-        "type": "Color",
-        "access": "public",
-        "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
-    {
-        "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
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-color-tertiary-contrast",
-            "value": "material-color($tertiary-palette, main-contrast)",
-            "scope": "default",
-            "line": {
-                "start": 203,
-                "end": 203
-            }
-        },
-        "group": [
-            "color-system"
-        ],
-        "type": "Color",
-        "access": "public",
-        "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
-    {
-        "description": "The color for informational messages and states.\n",
-        "commentRange": {
-            "start": 205,
-            "end": 207
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-color-info",
-            "value": "#0058e9",
-            "scope": "default",
-            "line": {
-                "start": 208,
-                "end": 208
-            }
-        },
-        "group": [
-            "color-system"
-        ],
-        "type": "Color",
-        "access": "public",
-        "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
-    {
-        "description": "The color for success messages and states.\n",
-        "commentRange": {
-            "start": 212,
-            "end": 214
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-color-success",
-            "value": "#37b400",
-            "scope": "default",
-            "line": {
-                "start": 215,
-                "end": 215
-            }
-        },
-        "group": [
-            "color-system"
-        ],
-        "type": "Color",
-        "access": "public",
-        "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
-    {
-        "description": "The color for warning messages and states.\n",
-        "commentRange": {
-            "start": 219,
-            "end": 221
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-color-warning",
-            "value": "#ffc000",
-            "scope": "default",
-            "line": {
-                "start": 222,
-                "end": 222
-            }
-        },
-        "group": [
-            "color-system"
-        ],
-        "type": "Color",
-        "access": "public",
-        "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
-    {
-        "description": "The color for error messages and states.\n",
-        "commentRange": {
-            "start": 226,
-            "end": 228
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-color-error",
-            "value": "#f31700",
-            "scope": "default",
-            "line": {
-                "start": 229,
-                "end": 229
-            }
-        },
-        "group": [
-            "color-system"
-        ],
-        "type": "Color",
-        "access": "public",
-        "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
-    {
-        "description": "The dark color of the theme.\n",
-        "commentRange": {
-            "start": 233,
-            "end": 235
-        },
-        "context": {
-            "type": "variable",
-            "name": "kendo-color-dark",
-            "value": "get-base-hue( gray, 800 )",
-            "scope": "default",
-            "line": {
-                "start": 236,
-                "end": 236
-            }
-        },
-        "group": [
-            "color-system"
-        ],
-        "type": "Color",
-        "access": "public",
-        "file": {
-            "path": "_variables.scss",
-            "name": "_variables.scss"
-        }
-    },
-    {
-        "description": "The light color of the theme.\n",
+        "description": "The font weight of the ColorGradient contrast ratio text.\n",
         "commentRange": {
-            "start": 238,
-            "end": 240
+            "start": 137,
+            "end": 138
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-light",
-            "value": "get-base-hue( gray, 100 )",
+            "name": "kendo-color-gradient-contrast-ratio-font-weight",
+            "value": "$kendo-font-weight-medium",
             "scope": "default",
             "line": {
-                "start": 241,
-                "end": 241
+                "start": 139,
+                "end": 139
             }
         },
         "group": [
-            "color-system"
+            "cologradient"
         ],
-        "type": "Color",
         "access": "public",
         "file": {
-            "path": "_variables.scss",
+            "path": "colorgradient/_variables.scss",
             "name": "_variables.scss"
         }
     },
     {
-        "description": "Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark\n",
+        "description": "The spacing between the items in the ColorGradient contrast tool.\n",
         "commentRange": {
-            "start": 243,
-            "end": 244
+            "start": 140,
+            "end": 141
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-inverse",
-            "value": "if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark )",
+            "name": "kendo-color-gradient-contrast-spacer",
+            "value": "k-map-get( $kendo-spacing, 2 )",
             "scope": "default",
             "line": {
-                "start": 245,
-                "end": 245
+                "start": 142,
+                "end": 142
             }
         },
         "group": [
-            "color-system"
+            "cologradient"
         ],
         "access": "public",
         "file": {
-            "path": "_variables.scss",
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The color white.\nNote: you cannot change this value.\n",
+        "commentRange": {
+            "start": 3,
+            "end": 6
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-white",
+            "value": "#ffffff",
+            "scope": "private",
+            "line": {
+                "start": 7,
+                "end": 7
+            }
+        },
+        "type": "Color",
+        "group": [
+            "color-system"
+        ],
+        "access": "public",
+        "file": {
+            "path": "_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The color black.\nNote: you cannot change this value.\n",
+        "commentRange": {
+            "start": 9,
+            "end": 12
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-black",
+            "value": "#000000",
+            "scope": "private",
+            "line": {
+                "start": 13,
+                "end": 13
+            }
+        },
+        "type": "Color",
+        "group": [
+            "color-system"
+        ],
+        "access": "public",
+        "file": {
+            "path": "_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The color that focuses the user attention.\nUsed for primary buttons and for elements of primary importance across the theme.\n",
+        "commentRange": {
+            "start": 190,
+            "end": 193
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-primary",
+            "value": "material-color( $primary-palette, main )",
+            "scope": "default",
+            "line": {
+                "start": 194,
+                "end": 194
+            }
+        },
+        "group": [
+            "color-system"
+        ],
+        "type": "Color",
+        "access": "public",
+        "file": {
+            "path": "_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "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": 198,
+            "end": 201
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-primary-contrast",
+            "value": "material-color( $primary-palette, main-contrast )",
+            "scope": "default",
+            "line": {
+                "start": 202,
+                "end": 202
+            }
+        },
+        "group": [
+            "color-system"
+        ],
+        "type": "Color",
+        "access": "public",
+        "file": {
+            "path": "_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The secondary color of the theme.\n",
+        "commentRange": {
+            "start": 204,
+            "end": 206
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-secondary",
+            "value": "material-color( $secondary-palette, main )",
+            "scope": "default",
+            "line": {
+                "start": 207,
+                "end": 207
+            }
+        },
+        "group": [
+            "color-system"
+        ],
+        "type": "Color",
+        "access": "public",
+        "file": {
+            "path": "_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "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": 211,
+            "end": 214
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-secondary-contrast",
+            "value": "material-color( $secondary-palette, main-contrast )",
+            "scope": "default",
+            "line": {
+                "start": 215,
+                "end": 215
+            }
+        },
+        "group": [
+            "color-system"
+        ],
+        "type": "Color",
+        "access": "public",
+        "file": {
+            "path": "_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The tertiary color of the theme.\n",
+        "commentRange": {
+            "start": 217,
+            "end": 219
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-tertiary",
+            "value": "material-color($tertiary-palette, main)",
+            "scope": "default",
+            "line": {
+                "start": 220,
+                "end": 220
+            }
+        },
+        "group": [
+            "color-system"
+        ],
+        "type": "Color",
+        "access": "public",
+        "file": {
+            "path": "_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "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": 224,
+            "end": 227
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-tertiary-contrast",
+            "value": "material-color($tertiary-palette, main-contrast)",
+            "scope": "default",
+            "line": {
+                "start": 228,
+                "end": 228
+            }
+        },
+        "group": [
+            "color-system"
+        ],
+        "type": "Color",
+        "access": "public",
+        "file": {
+            "path": "_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The color for informational messages and states.\n",
+        "commentRange": {
+            "start": 230,
+            "end": 232
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-info",
+            "value": "#0058e9",
+            "scope": "default",
+            "line": {
+                "start": 233,
+                "end": 233
+            }
+        },
+        "group": [
+            "color-system"
+        ],
+        "type": "Color",
+        "access": "public",
+        "file": {
+            "path": "_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The color for success messages and states.\n",
+        "commentRange": {
+            "start": 237,
+            "end": 239
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-success",
+            "value": "#37b400",
+            "scope": "default",
+            "line": {
+                "start": 240,
+                "end": 240
+            }
+        },
+        "group": [
+            "color-system"
+        ],
+        "type": "Color",
+        "access": "public",
+        "file": {
+            "path": "_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The color for warning messages and states.\n",
+        "commentRange": {
+            "start": 244,
+            "end": 246
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-warning",
+            "value": "#ffc000",
+            "scope": "default",
+            "line": {
+                "start": 247,
+                "end": 247
+            }
+        },
+        "group": [
+            "color-system"
+        ],
+        "type": "Color",
+        "access": "public",
+        "file": {
+            "path": "_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The color for error messages and states.\n",
+        "commentRange": {
+            "start": 251,
+            "end": 253
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-error",
+            "value": "#f31700",
+            "scope": "default",
+            "line": {
+                "start": 254,
+                "end": 254
+            }
+        },
+        "group": [
+            "color-system"
+        ],
+        "type": "Color",
+        "access": "public",
+        "file": {
+            "path": "_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The dark color of the theme.\n",
+        "commentRange": {
+            "start": 258,
+            "end": 260
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-dark",
+            "value": "get-base-hue( gray, 800 )",
+            "scope": "default",
+            "line": {
+                "start": 261,
+                "end": 261
+            }
+        },
+        "group": [
+            "color-system"
+        ],
+        "type": "Color",
+        "access": "public",
+        "file": {
+            "path": "_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The light color of the theme.\n",
+        "commentRange": {
+            "start": 263,
+            "end": 265
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-light",
+            "value": "get-base-hue( gray, 100 )",
+            "scope": "default",
+            "line": {
+                "start": 266,
+                "end": 266
+            }
+        },
+        "group": [
+            "color-system"
+        ],
+        "type": "Color",
+        "access": "public",
+        "file": {
+            "path": "_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "Inverse color of the theme. Depending on the theme luminance dark or light, it will be light or dark\n",
+        "commentRange": {
+            "start": 268,
+            "end": 269
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-inverse",
+            "value": "if( $kendo-is-dark-theme, $kendo-color-light, $kendo-color-dark )",
+            "scope": "default",
+            "line": {
+                "start": 270,
+                "end": 270
+            }
+        },
+        "group": [
+            "color-system"
+        ],
+        "access": "public",
+        "file": {
+            "path": "_variables.scss",
             "name": "_variables.scss"
         }
     },
@@ -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": [
@@ -9590,6 +9640,881 @@
             "name": "_variables.scss"
         }
     },
+    {
+        "description": " The width of the border around the DockManager component.\n",
+        "commentRange": {
+            "start": 1,
+            "end": 2
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-border-width",
+            "value": "1px",
+            "scope": "default",
+            "line": {
+                "start": 3,
+                "end": 3
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The style of the border around the DockManager component.\n",
+        "commentRange": {
+            "start": 4,
+            "end": 5
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-border-style",
+            "value": "solid",
+            "scope": "default",
+            "line": {
+                "start": 6,
+                "end": 6
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The color of the border around the DockManager component.\n",
+        "commentRange": {
+            "start": 7,
+            "end": 8
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-border",
+            "value": "$kendo-base-border",
+            "scope": "default",
+            "line": {
+                "start": 9,
+                "end": 9
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The vertical padding of the pane header in the DockManager component.\n",
+        "commentRange": {
+            "start": 11,
+            "end": 12
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-pane-header-padding-y",
+            "value": "k-map-get( $kendo-spacing, 1 )",
+            "scope": "default",
+            "line": {
+                "start": 13,
+                "end": 13
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the pane header in the DockManager component.\n",
+        "commentRange": {
+            "start": 14,
+            "end": 15
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-pane-header-padding-x",
+            "value": "k-map-get( $kendo-spacing, 6 )",
+            "scope": "default",
+            "line": {
+                "start": 16,
+                "end": 16
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The width of the border around the pane header in the DockManager component.\n",
+        "commentRange": {
+            "start": 17,
+            "end": 18
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-pane-header-border-width",
+            "value": "$kendo-dock-manager-border-width",
+            "scope": "default",
+            "line": {
+                "start": 19,
+                "end": 19
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": " The style of the border around the pane header in the DockManager component.\n",
+        "commentRange": {
+            "start": 20,
+            "end": 21
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-pane-header-border-style",
+            "value": "solid",
+            "scope": "default",
+            "line": {
+                "start": 22,
+                "end": 22
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The background color of the pane header in the DockManager component.\n",
+        "commentRange": {
+            "start": 23,
+            "end": 24
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-pane-header-bg",
+            "value": "$kendo-component-bg",
+            "scope": "default",
+            "line": {
+                "start": 25,
+                "end": 25
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The vertical padding of the pane title in the DockManager component.\n",
+        "commentRange": {
+            "start": 27,
+            "end": 28
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-pane-title-padding-y",
+            "value": "null",
+            "scope": "default",
+            "line": {
+                "start": 29,
+                "end": 29
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the pane title in the DockManager component.\n",
+        "commentRange": {
+            "start": 30,
+            "end": 31
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-pane-title-padding-x",
+            "value": "null",
+            "scope": "default",
+            "line": {
+                "start": 32,
+                "end": 32
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The font family of the pane title in the DockManager component.\n",
+        "commentRange": {
+            "start": 33,
+            "end": 34
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-pane-title-font-family",
+            "value": "$kendo-font-family",
+            "scope": "default",
+            "line": {
+                "start": 35,
+                "end": 35
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The font size of the pane title in the DockManager component.\n",
+        "commentRange": {
+            "start": 36,
+            "end": 37
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-pane-title-font-size",
+            "value": "$kendo-font-size-lg",
+            "scope": "default",
+            "line": {
+                "start": 38,
+                "end": 38
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The line height of the pane title in the DockManager component.\n",
+        "commentRange": {
+            "start": 39,
+            "end": 40
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-pane-title-line-height",
+            "value": "$kendo-line-height-sm",
+            "scope": "default",
+            "line": {
+                "start": 41,
+                "end": 41
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The font weight of the pane title in the DockManager component.\n",
+        "commentRange": {
+            "start": 42,
+            "end": 43
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-pane-title-font-weight",
+            "value": "$kendo-font-weight-normal",
+            "scope": "default",
+            "line": {
+                "start": 44,
+                "end": 44
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the pane content in the DockManager component.\n",
+        "commentRange": {
+            "start": 46,
+            "end": 47
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-pane-content-padding-x",
+            "value": "$kendo-dock-manager-pane-header-padding-x",
+            "scope": "default",
+            "line": {
+                "start": 48,
+                "end": 48
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The vertical padding of the pane content in the DockManager component.\n",
+        "commentRange": {
+            "start": 49,
+            "end": 50
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-pane-content-padding-y",
+            "value": "$kendo-dock-manager-pane-header-padding-x",
+            "scope": "default",
+            "line": {
+                "start": 51,
+                "end": 51
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the tabbed pane in the DockManager component.\n",
+        "commentRange": {
+            "start": 53,
+            "end": 54
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-tabbed-pane-padding-y",
+            "value": "null",
+            "scope": "default",
+            "line": {
+                "start": 55,
+                "end": 55
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the tabbed pane in the DockManager component.\n",
+        "commentRange": {
+            "start": 56,
+            "end": 57
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-tabbed-pane-padding-x",
+            "value": "null",
+            "scope": "default",
+            "line": {
+                "start": 58,
+                "end": 58
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The width of the unpinned pane container in the DockManager component.\n",
+        "commentRange": {
+            "start": 60,
+            "end": 61
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-unpinned-container-width",
+            "value": "300px",
+            "scope": "default",
+            "line": {
+                "start": 62,
+                "end": 62
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The background-color of the unpinned pane container in the DockManager component.\n",
+        "commentRange": {
+            "start": 63,
+            "end": 64
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-unpinned-container-bg",
+            "value": "$kendo-color-white",
+            "scope": "default",
+            "line": {
+                "start": 65,
+                "end": 65
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The box shadow of the unpinned pane container in the DockManager component.\n",
+        "commentRange": {
+            "start": 66,
+            "end": 67
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-unpinned-container-shadow",
+            "value": "4px 0px 5px 0px rgba(0, 0, 0, 0.04), 2px 0px 4px 0px rgba(0, 0, 0, 0.03)",
+            "scope": "default",
+            "line": {
+                "start": 68,
+                "end": 68
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The padding of the dock indicator in the DockManager component.\n",
+        "commentRange": {
+            "start": 70,
+            "end": 71
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-indicator-padding",
+            "value": "k-map-get( $kendo-spacing, 1.5 )",
+            "scope": "default",
+            "line": {
+                "start": 72,
+                "end": 72
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The background color of the dock indicator in the DockManager component.\n",
+        "commentRange": {
+            "start": 73,
+            "end": 74
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-indicator-bg",
+            "value": "$kendo-base-bg",
+            "scope": "default",
+            "line": {
+                "start": 75,
+                "end": 75
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The text color of the dock indicator in the DockManager component.\n",
+        "commentRange": {
+            "start": 76,
+            "end": 77
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-indicator-text",
+            "value": "$kendo-color-primary",
+            "scope": "default",
+            "line": {
+                "start": 78,
+                "end": 78
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The outline width of the dock indicator in the DockManager component.\n",
+        "commentRange": {
+            "start": 79,
+            "end": 80
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-indicator-outline-width",
+            "value": "1px",
+            "scope": "default",
+            "line": {
+                "start": 81,
+                "end": 81
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The outline style of the dock indicator in the DockManager component.\n",
+        "commentRange": {
+            "start": 82,
+            "end": 83
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-indicator-outline-style",
+            "value": "solid",
+            "scope": "default",
+            "line": {
+                "start": 84,
+                "end": 84
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The outline color of the dock indicator in the DockManager component.\n",
+        "commentRange": {
+            "start": 85,
+            "end": 86
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-indicator-outline",
+            "value": "$kendo-dock-indicator-text",
+            "scope": "default",
+            "line": {
+                "start": 87,
+                "end": 87
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The box shadow of the dock indicator in the DockManager component.\n",
+        "commentRange": {
+            "start": 88,
+            "end": 89
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-indicator-shadow",
+            "value": "drop-shadow( 0px 1px 18px rgba(0, 0, 0, 0.12) ) drop-shadow( 0px 6px 10px rgba(0, 0, 0, 0.14) ) drop-shadow( 0px 3px 5px rgba(0, 0, 0, 0.20) )",
+            "scope": "default",
+            "line": {
+                "start": 90,
+                "end": 90
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": " The background color of the hovered dock indicator in the DockManager component.\n",
+        "commentRange": {
+            "start": 92,
+            "end": 93
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-indicator-hover-bg",
+            "value": "k-color-mix( $kendo-color-white, $kendo-color-primary, 8% )",
+            "scope": "default",
+            "line": {
+                "start": 94,
+                "end": 94
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The text color of the hovered dock indicator in the DockManager component.\n",
+        "commentRange": {
+            "start": 95,
+            "end": 96
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-indicator-hover-text",
+            "value": "$kendo-color-white",
+            "scope": "default",
+            "line": {
+                "start": 97,
+                "end": 97
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The width of the border around the dropping area in the DockManager component.\n",
+        "commentRange": {
+            "start": 99,
+            "end": 100
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-dock-preview-border-width",
+            "value": "1px",
+            "scope": "default",
+            "line": {
+                "start": 101,
+                "end": 101
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The style of the border around the dropping area in the DockManager component.\n",
+        "commentRange": {
+            "start": 102,
+            "end": 103
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-dock-preview-border-style",
+            "value": "dashed",
+            "scope": "default",
+            "line": {
+                "start": 104,
+                "end": 104
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The border radius of the dropping area in the DockManager component.\n",
+        "commentRange": {
+            "start": 105,
+            "end": 106
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-dock-preview-border-radius",
+            "value": "$kendo-border-radius-sm",
+            "scope": "default",
+            "line": {
+                "start": 107,
+                "end": 107
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The background color of the dropping area in the DockManager component.\n",
+        "commentRange": {
+            "start": 108,
+            "end": 109
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-dock-preview-bg",
+            "value": "rgba( $kendo-color-primary, .16 )",
+            "scope": "default",
+            "line": {
+                "start": 110,
+                "end": 110
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The border color of the dropping area in the DockManager component.\n",
+        "commentRange": {
+            "start": 111,
+            "end": 112
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-dock-manager-dock-preview-border",
+            "value": "$kendo-color-primary",
+            "scope": "default",
+            "line": {
+                "start": 113,
+                "end": 113
+            }
+        },
+        "group": [
+            "dock-manager"
+        ],
+        "access": "public",
+        "file": {
+            "path": "dock-manager/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
     {
         "description": "The horizontal padding of the DropdownTree popup\n",
         "commentRange": {
@@ -10040,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": {
@@ -11549,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,
@@ -11574,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,
@@ -11599,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,
@@ -23324,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,
@@ -25744,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",
@@ -25768,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",
@@ -25791,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",
@@ -25816,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",
@@ -25841,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",
@@ -29799,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,
@@ -31168,8 +32227,8 @@
     {
         "description": "Base font size across all components.\n",
         "commentRange": {
-            "start": 264,
-            "end": 265
+            "start": 289,
+            "end": 290
         },
         "context": {
             "type": "variable",
@@ -31177,8 +32236,8 @@
             "value": "14px",
             "scope": "default",
             "line": {
-                "start": 266,
-                "end": 266
+                "start": 291,
+                "end": 291
             }
         },
         "group": [
@@ -31193,8 +32252,8 @@
     {
         "description": "Font family for text.\n",
         "commentRange": {
-            "start": 281,
-            "end": 282
+            "start": 306,
+            "end": 307
         },
         "context": {
             "type": "variable",
@@ -31202,8 +32261,8 @@
             "value": "Roboto, \"Helvetica Neue\", sans-serif",
             "scope": "default",
             "line": {
-                "start": 283,
-                "end": 283
+                "start": 308,
+                "end": 308
             }
         },
         "group": [
@@ -31218,8 +32277,8 @@
     {
         "description": "Font family across all components.\n",
         "commentRange": {
-            "start": 285,
-            "end": 286
+            "start": 310,
+            "end": 311
         },
         "context": {
             "type": "variable",
@@ -31227,8 +32286,8 @@
             "value": "Roboto, \"Helvetica Neue\", sans-serif",
             "scope": "default",
             "line": {
-                "start": 287,
-                "end": 287
+                "start": 312,
+                "end": 312
             }
         },
         "group": [
@@ -31243,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",
@@ -31252,8 +32311,8 @@
             "value": "Consolas, \"Ubuntu Mono\", \"Lucida Console\", \"Courier New\", monospace",
             "scope": "default",
             "line": {
-                "start": 291,
-                "end": 291
+                "start": 316,
+                "end": 316
             }
         },
         "group": [
@@ -31268,8 +32327,8 @@
     {
         "description": "Font family across all components.\n",
         "commentRange": {
-            "start": 293,
-            "end": 294
+            "start": 318,
+            "end": 319
         },
         "context": {
             "type": "variable",
@@ -31277,8 +32336,8 @@
             "value": "Roboto, \"Helvetica Neue\", sans-serif",
             "scope": "default",
             "line": {
-                "start": 295,
-                "end": 295
+                "start": 320,
+                "end": 320
             }
         },
         "group": [
@@ -31293,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",
@@ -31302,8 +32361,8 @@
             "value": "k-math-div( 28, 14 )",
             "scope": "default",
             "line": {
-                "start": 299,
-                "end": 299
+                "start": 324,
+                "end": 324
             }
         },
         "group": [
@@ -31318,8 +32377,8 @@
     {
         "description": "Border radius for all components.\n",
         "commentRange": {
-            "start": 139,
-            "end": 139
+            "start": 164,
+            "end": 164
         },
         "context": {
             "type": "variable",
@@ -31327,8 +32386,8 @@
             "value": "k-map-get( $kendo-spacing, 1 )",
             "scope": "default",
             "line": {
-                "start": 140,
-                "end": 140
+                "start": 165,
+                "end": 165
             }
         },
         "access": "public",
@@ -31343,8 +32402,8 @@
     {
         "description": "The background of the components' chrome area.\n",
         "commentRange": {
-            "start": 351,
-            "end": 351
+            "start": 376,
+            "end": 376
         },
         "context": {
             "type": "variable",
@@ -31352,8 +32411,8 @@
             "value": "k-map-get( $theme, base-bg )",
             "scope": "default",
             "line": {
-                "start": 352,
-                "end": 352
+                "start": 377,
+                "end": 377
             }
         },
         "access": "public",
@@ -31368,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",
@@ -31377,8 +32436,8 @@
             "value": "k-map-get( $theme, component-text )",
             "scope": "default",
             "line": {
-                "start": 354,
-                "end": 354
+                "start": 379,
+                "end": 379
             }
         },
         "access": "public",
@@ -31393,8 +32452,8 @@
     {
         "description": "The border of the components' chrome area.\n",
         "commentRange": {
-            "start": 355,
-            "end": 355
+            "start": 380,
+            "end": 380
         },
         "context": {
             "type": "variable",
@@ -31402,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",
@@ -31418,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",
@@ -31427,8 +32486,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 358,
-                "end": 358
+                "start": 383,
+                "end": 383
             }
         },
         "access": "public",
@@ -31443,8 +32502,8 @@
     {
         "description": "The background of hovered items.\n",
         "commentRange": {
-            "start": 360,
-            "end": 360
+            "start": 385,
+            "end": 385
         },
         "context": {
             "type": "variable",
@@ -31452,8 +32511,8 @@
             "value": "k-map-get( $theme, hover-bg )",
             "scope": "default",
             "line": {
-                "start": 361,
-                "end": 361
+                "start": 386,
+                "end": 386
             }
         },
         "access": "public",
@@ -31468,8 +32527,8 @@
     {
         "description": "The text color of hovered items.\n",
         "commentRange": {
-            "start": 362,
-            "end": 362
+            "start": 387,
+            "end": 387
         },
         "context": {
             "type": "variable",
@@ -31477,8 +32536,8 @@
             "value": "$kendo-base-text",
             "scope": "default",
             "line": {
-                "start": 363,
-                "end": 363
+                "start": 388,
+                "end": 388
             }
         },
         "access": "public",
@@ -31493,8 +32552,8 @@
     {
         "description": "The border color of hovered items.\n",
         "commentRange": {
-            "start": 364,
-            "end": 364
+            "start": 389,
+            "end": 389
         },
         "context": {
             "type": "variable",
@@ -31502,8 +32561,8 @@
             "value": "rgba( $kendo-base-border, .15 )",
             "scope": "default",
             "line": {
-                "start": 365,
-                "end": 365
+                "start": 390,
+                "end": 390
             }
         },
         "access": "public",
@@ -31518,8 +32577,8 @@
     {
         "description": "The gradient background of hovered items.\n",
         "commentRange": {
-            "start": 366,
-            "end": 366
+            "start": 391,
+            "end": 391
         },
         "context": {
             "type": "variable",
@@ -31527,8 +32586,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 367,
-                "end": 367
+                "start": 392,
+                "end": 392
             }
         },
         "access": "public",
@@ -31543,8 +32602,8 @@
     {
         "description": "The background of selected items.\n",
         "commentRange": {
-            "start": 369,
-            "end": 369
+            "start": 394,
+            "end": 394
         },
         "context": {
             "type": "variable",
@@ -31552,8 +32611,8 @@
             "value": "$kendo-color-secondary",
             "scope": "default",
             "line": {
-                "start": 370,
-                "end": 370
+                "start": 395,
+                "end": 395
             }
         },
         "access": "public",
@@ -31568,8 +32627,8 @@
     {
         "description": "The text color of selected items.\n",
         "commentRange": {
-            "start": 371,
-            "end": 371
+            "start": 396,
+            "end": 396
         },
         "context": {
             "type": "variable",
@@ -31577,8 +32636,8 @@
             "value": "$kendo-color-secondary-contrast",
             "scope": "default",
             "line": {
-                "start": 372,
-                "end": 372
+                "start": 397,
+                "end": 397
             }
         },
         "access": "public",
@@ -31593,8 +32652,8 @@
     {
         "description": "The border color of selected items.\n",
         "commentRange": {
-            "start": 373,
-            "end": 373
+            "start": 398,
+            "end": 398
         },
         "context": {
             "type": "variable",
@@ -31602,8 +32661,8 @@
             "value": "rgba( $kendo-base-border, .1 )",
             "scope": "default",
             "line": {
-                "start": 374,
-                "end": 374
+                "start": 399,
+                "end": 399
             }
         },
         "access": "public",
@@ -31618,8 +32677,8 @@
     {
         "description": "The gradient background of selected items.\n",
         "commentRange": {
-            "start": 375,
-            "end": 375
+            "start": 400,
+            "end": 400
         },
         "context": {
             "type": "variable",
@@ -31627,8 +32686,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 376,
-                "end": 376
+                "start": 401,
+                "end": 401
             }
         },
         "access": "public",
@@ -32949,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,
@@ -32974,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,