@progress/kendo-theme-material 10.1.1-dev.0 → 10.2.0-dev.0

package/dist/meta/sassdoc-data.json

@@ -15981,20 +15981,182 @@
             "resolvedValue": "var(--kendo-color-border, rgba(0, 0, 0, 0.12))",
             "resolvedType": "String"
         },
+        {
+            "description": "The vertical padding of the small ColorGradient.\n",
+            "commentRange": {
+                "start": 47,
+                "end": 48
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-color-gradient-sm-padding-y",
+                "value": "$kendo-color-gradient-spacer",
+                "scope": "default",
+                "line": {
+                    "start": 49,
+                    "end": 49
+                }
+            },
+            "group": [
+                "color-gradient"
+            ],
+            "access": "public",
+            "file": {
+                "path": "material/scss/colorgradient/_variables.scss",
+                "name": "_variables.scss"
+            },
+            "resolvedValue": "var(--kendo-spacing-3, 0.75rem)",
+            "resolvedType": "String"
+        },
+        {
+            "description": "The horizontal padding of the small ColorGradient.\n",
+            "commentRange": {
+                "start": 50,
+                "end": 51
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-color-gradient-sm-padding-x",
+                "value": "$kendo-color-gradient-padding-y",
+                "scope": "default",
+                "line": {
+                    "start": 52,
+                    "end": 52
+                }
+            },
+            "group": [
+                "color-gradient"
+            ],
+            "access": "public",
+            "file": {
+                "path": "material/scss/colorgradient/_variables.scss",
+                "name": "_variables.scss"
+            },
+            "resolvedValue": "var(--kendo-spacing-3, 0.75rem)",
+            "resolvedType": "String"
+        },
+        {
+            "description": "The vertical padding of the medium ColorGradient.\n",
+            "commentRange": {
+                "start": 53,
+                "end": 54
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-color-gradient-md-padding-y",
+                "value": "$kendo-color-gradient-spacer",
+                "scope": "default",
+                "line": {
+                    "start": 55,
+                    "end": 55
+                }
+            },
+            "group": [
+                "color-gradient"
+            ],
+            "access": "public",
+            "file": {
+                "path": "material/scss/colorgradient/_variables.scss",
+                "name": "_variables.scss"
+            },
+            "resolvedValue": "var(--kendo-spacing-3, 0.75rem)",
+            "resolvedType": "String"
+        },
+        {
+            "description": "The horizontal padding of the medium ColorGradient.\n",
+            "commentRange": {
+                "start": 56,
+                "end": 57
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-color-gradient-md-padding-x",
+                "value": "$kendo-color-gradient-padding-y",
+                "scope": "default",
+                "line": {
+                    "start": 58,
+                    "end": 58
+                }
+            },
+            "group": [
+                "color-gradient"
+            ],
+            "access": "public",
+            "file": {
+                "path": "material/scss/colorgradient/_variables.scss",
+                "name": "_variables.scss"
+            },
+            "resolvedValue": "var(--kendo-spacing-3, 0.75rem)",
+            "resolvedType": "String"
+        },
+        {
+            "description": "The vertical padding of the large ColorGradient.\n",
+            "commentRange": {
+                "start": 59,
+                "end": 60
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-color-gradient-lg-padding-y",
+                "value": "k-spacing(4.5)",
+                "scope": "default",
+                "line": {
+                    "start": 61,
+                    "end": 61
+                }
+            },
+            "group": [
+                "color-gradient"
+            ],
+            "access": "public",
+            "file": {
+                "path": "material/scss/colorgradient/_variables.scss",
+                "name": "_variables.scss"
+            },
+            "resolvedValue": "var(--kendo-spacing-4\\.5, 1.125rem)",
+            "resolvedType": "String"
+        },
+        {
+            "description": "The horizontal padding of the large ColorGradient.\n",
+            "commentRange": {
+                "start": 62,
+                "end": 63
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-color-gradient-lg-padding-x",
+                "value": "k-spacing(4.5)",
+                "scope": "default",
+                "line": {
+                    "start": 64,
+                    "end": 64
+                }
+            },
+            "group": [
+                "color-gradient"
+            ],
+            "access": "public",
+            "file": {
+                "path": "material/scss/colorgradient/_variables.scss",
+                "name": "_variables.scss"
+            },
+            "resolvedValue": "var(--kendo-spacing-4\\.5, 1.125rem)",
+            "resolvedType": "String"
+        },
         {
             "description": "The width of the small ColorGradient.\n",
             "commentRange": {
-                "start": 46,
-                "end": 47
+                "start": 66,
+                "end": 67
             },
             "context": {
                 "type": "variable",
                 "name": "kendo-color-gradient-sm-width",
-                "value": "254px",
+                "value": "278px",
                 "scope": "default",
                 "line": {
-                    "start": 48,
-                    "end": 48
+                    "start": 68,
+                    "end": 68
                 }
             },
             "group": [
@@ -16005,14 +16167,14 @@
                 "path": "material/scss/colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "254px",
+            "resolvedValue": "278px",
             "resolvedType": "Number"
         },
         {
             "description": "The width of the medium ColorGradient.\n",
             "commentRange": {
-                "start": 49,
-                "end": 50
+                "start": 69,
+                "end": 70
             },
             "context": {
                 "type": "variable",
@@ -16020,8 +16182,8 @@
                 "value": "$kendo-color-gradient-width",
                 "scope": "default",
                 "line": {
-                    "start": 51,
-                    "end": 51
+                    "start": 71,
+                    "end": 71
                 }
             },
             "group": [
@@ -16038,17 +16200,17 @@
         {
             "description": "The width of the large ColorGradient.\n",
             "commentRange": {
-                "start": 52,
-                "end": 53
+                "start": 72,
+                "end": 73
             },
             "context": {
                 "type": "variable",
                 "name": "kendo-color-gradient-lg-width",
-                "value": "328px",
+                "value": "364px",
                 "scope": "default",
                 "line": {
-                    "start": 54,
-                    "end": 54
+                    "start": 74,
+                    "end": 74
                 }
             },
             "group": [
@@ -16059,14 +16221,14 @@
                 "path": "material/scss/colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "328px",
+            "resolvedValue": "364px",
             "resolvedType": "Number"
         },
         {
             "description": "The spacing between the sections of the small ColorGradient.\n",
             "commentRange": {
-                "start": 56,
-                "end": 57
+                "start": 76,
+                "end": 77
             },
             "context": {
                 "type": "variable",
@@ -16074,8 +16236,8 @@
                 "value": "k-spacing(2.5)",
                 "scope": "default",
                 "line": {
-                    "start": 58,
-                    "end": 58
+                    "start": 78,
+                    "end": 78
                 }
             },
             "group": [
@@ -16092,8 +16254,8 @@
         {
             "description": "The spacing between the sections of the medium ColorGradient.\n",
             "commentRange": {
-                "start": 59,
-                "end": 60
+                "start": 79,
+                "end": 80
             },
             "context": {
                 "type": "variable",
@@ -16101,8 +16263,8 @@
                 "value": "$kendo-color-gradient-gap",
                 "scope": "default",
                 "line": {
-                    "start": 61,
-                    "end": 61
+                    "start": 81,
+                    "end": 81
                 }
             },
             "group": [
@@ -16119,17 +16281,17 @@
         {
             "description": "The spacing between the sections of the large ColorGradient.\n",
             "commentRange": {
-                "start": 62,
-                "end": 63
+                "start": 82,
+                "end": 83
             },
             "context": {
                 "type": "variable",
                 "name": "kendo-color-gradient-lg-gap",
-                "value": "k-spacing(4)",
+                "value": "k-spacing(4.5)",
                 "scope": "default",
                 "line": {
-                    "start": 64,
-                    "end": 64
+                    "start": 84,
+                    "end": 84
                 }
             },
             "group": [
@@ -16140,14 +16302,14 @@
                 "path": "material/scss/colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "var(--kendo-spacing-4, 1rem)",
+            "resolvedValue": "var(--kendo-spacing-4\\.5, 1.125rem)",
             "resolvedType": "String"
         },
         {
             "description": "The border color of the focused ColorGradient.\n",
             "commentRange": {
-                "start": 66,
-                "end": 67
+                "start": 86,
+                "end": 87
             },
             "context": {
                 "type": "variable",
@@ -16155,8 +16317,8 @@
                 "value": "$kendo-hover-border",
                 "scope": "default",
                 "line": {
-                    "start": 68,
-                    "end": 68
+                    "start": 88,
+                    "end": 88
                 }
             },
             "group": [
@@ -16173,8 +16335,8 @@
         {
             "description": "The box shadow of the focused ColorGradient.\n",
             "commentRange": {
-                "start": 69,
-                "end": 70
+                "start": 89,
+                "end": 90
             },
             "context": {
                 "type": "variable",
@@ -16182,8 +16344,8 @@
                 "value": "k-elevation(3)",
                 "scope": "default",
                 "line": {
-                    "start": 71,
-                    "end": 71
+                    "start": 91,
+                    "end": 91
                 }
             },
             "group": [
@@ -16200,8 +16362,8 @@
         {
             "description": "The border radius of the ColorGradient canvas.\n",
             "commentRange": {
-                "start": 73,
-                "end": 74
+                "start": 93,
+                "end": 94
             },
             "context": {
                 "type": "variable",
@@ -16209,8 +16371,8 @@
                 "value": "k-border-radius(md)",
                 "scope": "default",
                 "line": {
-                    "start": 75,
-                    "end": 75
+                    "start": 95,
+                    "end": 95
                 }
             },
             "group": [
@@ -16227,8 +16389,8 @@
         {
             "description": "The spacing between the items of the ColorGradient canvas.\n",
             "commentRange": {
-                "start": 76,
-                "end": 77
+                "start": 96,
+                "end": 97
             },
             "context": {
                 "type": "variable",
@@ -16236,8 +16398,8 @@
                 "value": "$kendo-color-gradient-spacer",
                 "scope": "default",
                 "line": {
-                    "start": 78,
-                    "end": 78
+                    "start": 98,
+                    "end": 98
                 }
             },
             "group": [
@@ -16254,8 +16416,8 @@
         {
             "description": "The height the ColorGradient canvas hsv rectangle.\n",
             "commentRange": {
-                "start": 79,
-                "end": 80
+                "start": 99,
+                "end": 100
             },
             "context": {
                 "type": "variable",
@@ -16263,8 +16425,8 @@
                 "value": "180px",
                 "scope": "default",
                 "line": {
-                    "start": 81,
-                    "end": 81
+                    "start": 101,
+                    "end": 101
                 }
             },
             "group": [
@@ -16281,17 +16443,17 @@
         {
             "description": "The height the small ColorGradient canvas hsv rectangle.\n",
             "commentRange": {
-                "start": 82,
-                "end": 83
+                "start": 102,
+                "end": 103
             },
             "context": {
                 "type": "variable",
                 "name": "kendo-color-gradient-sm-canvas-rectangle-height",
-                "value": "210px",
+                "value": "$kendo-color-gradient-canvas-rectangle-height",
                 "scope": "default",
                 "line": {
-                    "start": 84,
-                    "end": 84
+                    "start": 104,
+                    "end": 104
                 }
             },
             "group": [
@@ -16302,14 +16464,14 @@
                 "path": "material/scss/colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "210px",
+            "resolvedValue": "180px",
             "resolvedType": "Number"
         },
         {
             "description": "The height the medium ColorGradient canvas hsv rectangle.\n",
             "commentRange": {
-                "start": 85,
-                "end": 86
+                "start": 105,
+                "end": 106
             },
             "context": {
                 "type": "variable",
@@ -16317,8 +16479,8 @@
                 "value": "$kendo-color-gradient-canvas-rectangle-height",
                 "scope": "default",
                 "line": {
-                    "start": 87,
-                    "end": 87
+                    "start": 107,
+                    "end": 107
                 }
             },
             "group": [
@@ -16335,17 +16497,17 @@
         {
             "description": "The height the large ColorGradient canvas hsv rectangle.\n",
             "commentRange": {
-                "start": 88,
-                "end": 89
+                "start": 108,
+                "end": 109
             },
             "context": {
                 "type": "variable",
                 "name": "kendo-color-gradient-lg-canvas-rectangle-height",
-                "value": "266px",
+                "value": "270px",
                 "scope": "default",
                 "line": {
-                    "start": 90,
-                    "end": 90
+                    "start": 110,
+                    "end": 110
                 }
             },
             "group": [
@@ -16356,14 +16518,14 @@
                 "path": "material/scss/colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "266px",
+            "resolvedValue": "270px",
             "resolvedType": "Number"
         },
         {
             "description": "The spacing between the items of the small ColorGradient canvas.\n",
             "commentRange": {
-                "start": 92,
-                "end": 93
+                "start": 112,
+                "end": 113
             },
             "context": {
                 "type": "variable",
@@ -16371,8 +16533,8 @@
                 "value": "k-spacing(2.5)",
                 "scope": "default",
                 "line": {
-                    "start": 94,
-                    "end": 94
+                    "start": 114,
+                    "end": 114
                 }
             },
             "group": [
@@ -16389,8 +16551,8 @@
         {
             "description": "The spacing between the items of the medium ColorGradient canvas.\n",
             "commentRange": {
-                "start": 95,
-                "end": 96
+                "start": 115,
+                "end": 116
             },
             "context": {
                 "type": "variable",
@@ -16398,8 +16560,8 @@
                 "value": "$kendo-color-gradient-canvas-gap",
                 "scope": "default",
                 "line": {
-                    "start": 97,
-                    "end": 97
+                    "start": 117,
+                    "end": 117
                 }
             },
             "group": [
@@ -16416,17 +16578,17 @@
         {
             "description": "The spacing between the items of the large ColorGradient canvas.\n",
             "commentRange": {
-                "start": 98,
-                "end": 99
+                "start": 118,
+                "end": 119
             },
             "context": {
                 "type": "variable",
                 "name": "kendo-color-gradient-lg-canvas-gap",
-                "value": "k-spacing(4)",
+                "value": "k-spacing(4.5)",
                 "scope": "default",
                 "line": {
-                    "start": 100,
-                    "end": 100
+                    "start": 120,
+                    "end": 120
                 }
             },
             "group": [
@@ -16437,14 +16599,14 @@
                 "path": "material/scss/colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "var(--kendo-spacing-4, 1rem)",
+            "resolvedValue": "var(--kendo-spacing-4\\.5, 1.125rem)",
             "resolvedType": "String"
         },
         {
             "description": "The width of the ColorGradient slider.\n",
             "commentRange": {
-                "start": 102,
-                "end": 103
+                "start": 122,
+                "end": 123
             },
             "context": {
                 "type": "variable",
@@ -16452,8 +16614,8 @@
                 "value": "10px",
                 "scope": "default",
                 "line": {
-                    "start": 104,
-                    "end": 104
+                    "start": 124,
+                    "end": 124
                 }
             },
             "group": [
@@ -16470,8 +16632,8 @@
         {
             "description": "The border radius of the ColorGradient slider.\n",
             "commentRange": {
-                "start": 105,
-                "end": 106
+                "start": 125,
+                "end": 126
             },
             "context": {
                 "type": "variable",
@@ -16479,8 +16641,8 @@
                 "value": "10px",
                 "scope": "default",
                 "line": {
-                    "start": 107,
-                    "end": 107
+                    "start": 127,
+                    "end": 127
                 }
             },
             "group": [
@@ -16497,8 +16659,8 @@
         {
             "description": "The width of the border around the ColorGradient slider drag handle.\n",
             "commentRange": {
-                "start": 108,
-                "end": 109
+                "start": 128,
+                "end": 129
             },
             "context": {
                 "type": "variable",
@@ -16506,8 +16668,8 @@
                 "value": "3px",
                 "scope": "default",
                 "line": {
-                    "start": 110,
-                    "end": 110
+                    "start": 130,
+                    "end": 130
                 }
             },
             "group": [
@@ -16524,8 +16686,8 @@
         {
             "description": "The height of the ColorGradient vertical slider.\n",
             "commentRange": {
-                "start": 112,
-                "end": 113
+                "start": 132,
+                "end": 133
             },
             "context": {
                 "type": "variable",
@@ -16533,8 +16695,8 @@
                 "value": "180px",
                 "scope": "default",
                 "line": {
-                    "start": 114,
-                    "end": 114
+                    "start": 134,
+                    "end": 134
                 }
             },
             "group": [
@@ -16551,8 +16713,8 @@
         {
             "description": "The width of the ColorGradient horizontal slider.\n",
             "commentRange": {
-                "start": 115,
-                "end": 116
+                "start": 135,
+                "end": 136
             },
             "context": {
                 "type": "variable",
@@ -16560,8 +16722,8 @@
                 "value": "100%",
                 "scope": "default",
                 "line": {
-                    "start": 117,
-                    "end": 117
+                    "start": 137,
+                    "end": 137
                 }
             },
             "group": [
@@ -16578,8 +16740,8 @@
         {
             "description": "The background image of the ColorGradient alpha slider.\n",
             "commentRange": {
-                "start": 118,
-                "end": 119
+                "start": 138,
+                "end": 139
             },
             "context": {
                 "type": "variable",
@@ -16587,8 +16749,8 @@
                 "value": "\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC\"",
                 "scope": "default",
                 "line": {
-                    "start": 120,
-                    "end": 120
+                    "start": 140,
+                    "end": 140
                 }
             },
             "group": [
@@ -16605,17 +16767,17 @@
         {
             "description": "The height of the small ColorGradient vertical slider.\n",
             "commentRange": {
-                "start": 121,
-                "end": 122
+                "start": 141,
+                "end": 142
             },
             "context": {
                 "type": "variable",
                 "name": "kendo-color-gradient-sm-slider-vertical-size",
-                "value": "210px",
+                "value": "$kendo-color-gradient-slider-vertical-size",
                 "scope": "default",
                 "line": {
-                    "start": 123,
-                    "end": 123
+                    "start": 143,
+                    "end": 143
                 }
             },
             "group": [
@@ -16626,14 +16788,14 @@
                 "path": "material/scss/colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "210px",
+            "resolvedValue": "180px",
             "resolvedType": "Number"
         },
         {
             "description": "The height of the medium ColorGradient vertical slider.\n",
             "commentRange": {
-                "start": 124,
-                "end": 125
+                "start": 144,
+                "end": 145
             },
             "context": {
                 "type": "variable",
@@ -16641,8 +16803,8 @@
                 "value": "$kendo-color-gradient-slider-vertical-size",
                 "scope": "default",
                 "line": {
-                    "start": 126,
-                    "end": 126
+                    "start": 146,
+                    "end": 146
                 }
             },
             "group": [
@@ -16659,17 +16821,17 @@
         {
             "description": "The height of the large ColorGradient vertical slider.\n",
             "commentRange": {
-                "start": 127,
-                "end": 128
+                "start": 147,
+                "end": 148
             },
             "context": {
                 "type": "variable",
                 "name": "kendo-color-gradient-lg-slider-vertical-size",
-                "value": "266px",
+                "value": "270px",
                 "scope": "default",
                 "line": {
-                    "start": 129,
-                    "end": 129
+                    "start": 149,
+                    "end": 149
                 }
             },
             "group": [
@@ -16680,14 +16842,14 @@
                 "path": "material/scss/colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "266px",
+            "resolvedValue": "270px",
             "resolvedType": "Number"
         },
         {
             "description": "The width of the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 131,
-                "end": 132
+                "start": 151,
+                "end": 152
             },
             "context": {
                 "type": "variable",
@@ -16695,8 +16857,8 @@
                 "value": "14px",
                 "scope": "default",
                 "line": {
-                    "start": 133,
-                    "end": 133
+                    "start": 153,
+                    "end": 153
                 }
             },
             "group": [
@@ -16713,8 +16875,8 @@
         {
             "description": "The height of the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 134,
-                "end": 135
+                "start": 154,
+                "end": 155
             },
             "context": {
                 "type": "variable",
@@ -16722,8 +16884,8 @@
                 "value": "14px",
                 "scope": "default",
                 "line": {
-                    "start": 136,
-                    "end": 136
+                    "start": 156,
+                    "end": 156
                 }
             },
             "group": [
@@ -16740,8 +16902,8 @@
         {
             "description": "The width of the border around the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 137,
-                "end": 138
+                "start": 157,
+                "end": 158
             },
             "context": {
                 "type": "variable",
@@ -16749,8 +16911,8 @@
                 "value": "1px",
                 "scope": "default",
                 "line": {
-                    "start": 139,
-                    "end": 139
+                    "start": 159,
+                    "end": 159
                 }
             },
             "group": [
@@ -16767,8 +16929,8 @@
         {
             "description": "The width of the outline around the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 140,
-                "end": 141
+                "start": 160,
+                "end": 161
             },
             "context": {
                 "type": "variable",
@@ -16776,8 +16938,8 @@
                 "value": "1px",
                 "scope": "default",
                 "line": {
-                    "start": 142,
-                    "end": 142
+                    "start": 162,
+                    "end": 162
                 }
             },
             "group": [
@@ -16794,8 +16956,8 @@
         {
             "description": "The border radius of the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 143,
-                "end": 144
+                "start": 163,
+                "end": 164
             },
             "context": {
                 "type": "variable",
@@ -16803,8 +16965,8 @@
                 "value": "50%",
                 "scope": "default",
                 "line": {
-                    "start": 145,
-                    "end": 145
+                    "start": 165,
+                    "end": 165
                 }
             },
             "group": [
@@ -16821,8 +16983,8 @@
         {
             "description": "The text color of the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 146,
-                "end": 147
+                "start": 166,
+                "end": 167
             },
             "context": {
                 "type": "variable",
@@ -16830,8 +16992,8 @@
                 "value": "null",
                 "scope": "default",
                 "line": {
-                    "start": 148,
-                    "end": 148
+                    "start": 168,
+                    "end": 168
                 }
             },
             "group": [
@@ -16848,8 +17010,8 @@
         {
             "description": "The background color of the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 149,
-                "end": 150
+                "start": 169,
+                "end": 170
             },
             "context": {
                 "type": "variable",
@@ -16857,8 +17019,8 @@
                 "value": "transparent",
                 "scope": "default",
                 "line": {
-                    "start": 151,
-                    "end": 151
+                    "start": 171,
+                    "end": 171
                 }
             },
             "group": [
@@ -16875,8 +17037,8 @@
         {
             "description": "The color of the border around the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 152,
-                "end": 153
+                "start": 172,
+                "end": 173
             },
             "context": {
                 "type": "variable",
@@ -16884,8 +17046,8 @@
                 "value": "rgba( white, .8 )",
                 "scope": "default",
                 "line": {
-                    "start": 154,
-                    "end": 154
+                    "start": 174,
+                    "end": 174
                 }
             },
             "group": [
@@ -16902,8 +17064,8 @@
         {
             "description": "The focus color of the outline around the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 155,
-                "end": 156
+                "start": 175,
+                "end": 176
             },
             "context": {
                 "type": "variable",
@@ -16911,8 +17073,8 @@
                 "value": "$kendo-color-black",
                 "scope": "default",
                 "line": {
-                    "start": 157,
-                    "end": 157
+                    "start": 177,
+                    "end": 177
                 }
             },
             "group": [
@@ -16929,8 +17091,8 @@
         {
             "description": "The outline color of the outline around the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 158,
-                "end": 159
+                "start": 178,
+                "end": 179
             },
             "context": {
                 "type": "variable",
@@ -16938,8 +17100,8 @@
                 "value": "$kendo-color-black",
                 "scope": "default",
                 "line": {
-                    "start": 160,
-                    "end": 160
+                    "start": 180,
+                    "end": 180
                 }
             },
             "group": [
@@ -16956,8 +17118,8 @@
         {
             "description": "The box shadow of the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 161,
-                "end": 162
+                "start": 181,
+                "end": 182
             },
             "context": {
                 "type": "variable",
@@ -16965,8 +17127,8 @@
                 "value": "k-elevation(2)",
                 "scope": "default",
                 "line": {
-                    "start": 163,
-                    "end": 163
+                    "start": 183,
+                    "end": 183
                 }
             },
             "group": [
@@ -16983,8 +17145,8 @@
         {
             "description": "The vertical margin of the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 165,
-                "end": 166
+                "start": 185,
+                "end": 186
             },
             "context": {
                 "type": "variable",
@@ -16992,8 +17154,8 @@
                 "value": "- math.div( $kendo-color-gradient-draghandle-height, 2 )",
                 "scope": "default",
                 "line": {
-                    "start": 167,
-                    "end": 167
+                    "start": 187,
+                    "end": 187
                 }
             },
             "group": [
@@ -17010,8 +17172,8 @@
         {
             "description": "The horizontal margin of the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 168,
-                "end": 169
+                "start": 188,
+                "end": 189
             },
             "context": {
                 "type": "variable",
@@ -17019,8 +17181,8 @@
                 "value": "- math.div( $kendo-color-gradient-draghandle-width, 2 )",
                 "scope": "default",
                 "line": {
-                    "start": 170,
-                    "end": 170
+                    "start": 190,
+                    "end": 190
                 }
             },
             "group": [
@@ -17037,8 +17199,8 @@
         {
             "description": "The width of the ColorGradient input.\n",
             "commentRange": {
-                "start": 172,
-                "end": 173
+                "start": 192,
+                "end": 193
             },
             "context": {
                 "type": "variable",
@@ -17046,8 +17208,8 @@
                 "value": "50px",
                 "scope": "default",
                 "line": {
-                    "start": 174,
-                    "end": 174
+                    "start": 194,
+                    "end": 194
                 }
             },
             "group": [
@@ -17064,8 +17226,8 @@
         {
             "description": "The spacing between the ColorGradient inputs.\n",
             "commentRange": {
-                "start": 175,
-                "end": 176
+                "start": 195,
+                "end": 196
             },
             "context": {
                 "type": "variable",
@@ -17073,8 +17235,8 @@
                 "value": "k-spacing(2)",
                 "scope": "default",
                 "line": {
-                    "start": 177,
-                    "end": 177
+                    "start": 197,
+                    "end": 197
                 }
             },
             "group": [
@@ -17091,8 +17253,8 @@
         {
             "description": "The spacing between the ColorGradient inputs and their labels.\n",
             "commentRange": {
-                "start": 178,
-                "end": 179
+                "start": 198,
+                "end": 199
             },
             "context": {
                 "type": "variable",
@@ -17100,8 +17262,8 @@
                 "value": "k-spacing(1)",
                 "scope": "default",
                 "line": {
-                    "start": 180,
-                    "end": 180
+                    "start": 200,
+                    "end": 200
                 }
             },
             "group": [
@@ -17118,8 +17280,8 @@
         {
             "description": "The text color of the ColorGradient input labels.\n",
             "commentRange": {
-                "start": 181,
-                "end": 182
+                "start": 201,
+                "end": 202
             },
             "context": {
                 "type": "variable",
@@ -17127,8 +17289,8 @@
                 "value": "$kendo-subtle-text",
                 "scope": "default",
                 "line": {
-                    "start": 183,
-                    "end": 183
+                    "start": 203,
+                    "end": 203
                 }
             },
             "group": [
@@ -17145,8 +17307,8 @@
         {
             "description": "The width of the small ColorGradient input.\n",
             "commentRange": {
-                "start": 185,
-                "end": 186
+                "start": 205,
+                "end": 206
             },
             "context": {
                 "type": "variable",
@@ -17154,8 +17316,8 @@
                 "value": "46px",
                 "scope": "default",
                 "line": {
-                    "start": 187,
-                    "end": 187
+                    "start": 207,
+                    "end": 207
                 }
             },
             "group": [
@@ -17172,8 +17334,8 @@
         {
             "description": "The width of the medium ColorGradient input.\n",
             "commentRange": {
-                "start": 188,
-                "end": 189
+                "start": 208,
+                "end": 209
             },
             "context": {
                 "type": "variable",
@@ -17181,8 +17343,8 @@
                 "value": "$kendo-color-gradient-input-width",
                 "scope": "default",
                 "line": {
-                    "start": 190,
-                    "end": 190
+                    "start": 210,
+                    "end": 210
                 }
             },
             "group": [
@@ -17199,8 +17361,8 @@
         {
             "description": "The width of the large ColorGradient input.\n",
             "commentRange": {
-                "start": 191,
-                "end": 192
+                "start": 211,
+                "end": 212
             },
             "context": {
                 "type": "variable",
@@ -17208,8 +17370,8 @@
                 "value": "62px",
                 "scope": "default",
                 "line": {
-                    "start": 193,
-                    "end": 193
+                    "start": 213,
+                    "end": 213
                 }
             },
             "group": [
@@ -17226,8 +17388,8 @@
         {
             "description": "The font weight of the ColorGradient contrast ratio text.\n",
             "commentRange": {
-                "start": 195,
-                "end": 196
+                "start": 215,
+                "end": 216
             },
             "context": {
                 "type": "variable",
@@ -17235,8 +17397,8 @@
                 "value": "var( --kendo-font-weight-medium, normal )",
                 "scope": "default",
                 "line": {
-                    "start": 197,
-                    "end": 197
+                    "start": 217,
+                    "end": 217
                 }
             },
             "group": [
@@ -17253,8 +17415,8 @@
         {
             "description": "The spacing between the items in the ColorGradient contrast tool.\n",
             "commentRange": {
-                "start": 198,
-                "end": 199
+                "start": 218,
+                "end": 219
             },
             "context": {
                 "type": "variable",
@@ -17262,8 +17424,8 @@
                 "value": "k-spacing(2)",
                 "scope": "default",
                 "line": {
-                    "start": 200,
-                    "end": 200
+                    "start": 220,
+                    "end": 220
                 }
             },
             "group": [
@@ -17280,17 +17442,17 @@
         {
             "description": "The size map of the ColorGradient.\n",
             "commentRange": {
-                "start": 202,
-                "end": 203
+                "start": 222,
+                "end": 223
             },
             "context": {
                 "type": "variable",
                 "name": "kendo-color-gradient-sizes",
-                "value": "(\n    sm: (\n        width: $kendo-color-gradient-sm-width,\n        vertical-slider-height: $kendo-color-gradient-sm-slider-vertical-size,\n        rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,\n        input-width: $kendo-color-gradient-sm-input-width,\n        gap: $kendo-color-gradient-sm-gap,\n        canvas-gap: $kendo-color-gradient-sm-canvas-gap\n    ),\n    md: (\n        width: $kendo-color-gradient-md-width,\n        vertical-slider-height: $kendo-color-gradient-md-slider-vertical-size,\n        rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,\n        input-width: $kendo-color-gradient-md-input-width,\n        gap: $kendo-color-gradient-md-gap,\n        canvas-gap: $kendo-color-gradient-md-canvas-gap\n    ),\n    lg: (\n        width: $kendo-color-gradient-lg-width,\n        vertical-slider-height: $kendo-color-gradient-lg-slider-vertical-size,\n        rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,\n        input-width: $kendo-color-gradient-lg-input-width,\n        gap: $kendo-color-gradient-lg-gap,\n        canvas-gap: $kendo-color-gradient-lg-canvas-gap\n    )\n)",
+                "value": "(\n    sm: (\n        width: $kendo-color-gradient-sm-width,\n        vertical-slider-height: $kendo-color-gradient-sm-slider-vertical-size,\n        rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,\n        input-width: $kendo-color-gradient-sm-input-width,\n        gap: $kendo-color-gradient-sm-gap,\n        canvas-gap: $kendo-color-gradient-sm-canvas-gap,\n        padding-x: $kendo-color-gradient-sm-padding-x,\n        padding-y: $kendo-color-gradient-sm-padding-y\n    ),\n    md: (\n        width: $kendo-color-gradient-md-width,\n        vertical-slider-height: $kendo-color-gradient-md-slider-vertical-size,\n        rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,\n        input-width: $kendo-color-gradient-md-input-width,\n        gap: $kendo-color-gradient-md-gap,\n        canvas-gap: $kendo-color-gradient-md-canvas-gap,\n        padding-x: $kendo-color-gradient-md-padding-x,\n        padding-y: $kendo-color-gradient-md-padding-y\n    ),\n    lg: (\n        width: $kendo-color-gradient-lg-width,\n        vertical-slider-height: $kendo-color-gradient-lg-slider-vertical-size,\n        rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,\n        input-width: $kendo-color-gradient-lg-input-width,\n        gap: $kendo-color-gradient-lg-gap,\n        canvas-gap: $kendo-color-gradient-lg-canvas-gap,\n        padding-x: $kendo-color-gradient-lg-padding-x,\n        padding-y: $kendo-color-gradient-lg-padding-y\n    )\n)",
                 "scope": "default",
                 "line": {
-                    "start": 204,
-                    "end": 229
+                    "start": 224,
+                    "end": 255
                 }
             },
             "group": [
@@ -17301,16 +17463,18 @@
                 "path": "material/scss/colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "(sm: (width: 254px, vertical-slider-height: 210px, rectangle-height: 210px, input-width: 46px, gap: var(--kendo-spacing-2\\.5, 0.625rem), canvas-gap: var(--kendo-spacing-2\\.5, 0.625rem)), md: (width: 294px, vertical-slider-height: 180px, rectangle-height: 180px, input-width: 50px, gap: var(--kendo-spacing-3, 0.75rem), canvas-gap: var(--kendo-spacing-3, 0.75rem)), lg: (width: 328px, vertical-slider-height: 266px, rectangle-height: 266px, input-width: 62px, gap: var(--kendo-spacing-4, 1rem), canvas-gap: var(--kendo-spacing-4, 1rem)))",
+            "resolvedValue": "(sm: (width: 278px, vertical-slider-height: 180px, rectangle-height: 180px, input-width: 46px, gap: var(--kendo-spacing-2\\.5, 0.625rem), canvas-gap: var(--kendo-spacing-2\\.5, 0.625rem), padding-x: var(--kendo-spacing-3, 0.75rem), padding-y: var(--kendo-spacing-3, 0.75rem)), md: (width: 294px, vertical-slider-height: 180px, rectangle-height: 180px, input-width: 50px, gap: var(--kendo-spacing-3, 0.75rem), canvas-gap: var(--kendo-spacing-3, 0.75rem), padding-x: var(--kendo-spacing-3, 0.75rem), padding-y: var(--kendo-spacing-3, 0.75rem)), lg: (width: 364px, vertical-slider-height: 270px, rectangle-height: 270px, input-width: 62px, gap: var(--kendo-spacing-4\\.5, 1.125rem), canvas-gap: var(--kendo-spacing-4\\.5, 1.125rem), padding-x: var(--kendo-spacing-4\\.5, 1.125rem), padding-y: var(--kendo-spacing-4\\.5, 1.125rem)))",
             "resolvedType": "Map",
             "prettyValue": {
                 "sm": {
-                    "width": "254px",
-                    "vertical-slider-height": "210px",
-                    "rectangle-height": "210px",
+                    "width": "278px",
+                    "vertical-slider-height": "180px",
+                    "rectangle-height": "180px",
                     "input-width": "46px",
                     "gap": "var(--kendo-spacing-2\\.5, 0.625rem)",
-                    "canvas-gap": "var(--kendo-spacing-2\\.5, 0.625rem)"
+                    "canvas-gap": "var(--kendo-spacing-2\\.5, 0.625rem)",
+                    "padding-x": "var(--kendo-spacing-3, 0.75rem)",
+                    "padding-y": "var(--kendo-spacing-3, 0.75rem)"
                 },
                 "md": {
                     "width": "294px",
@@ -17318,15 +17482,19 @@
                     "rectangle-height": "180px",
                     "input-width": "50px",
                     "gap": "var(--kendo-spacing-3, 0.75rem)",
-                    "canvas-gap": "var(--kendo-spacing-3, 0.75rem)"
+                    "canvas-gap": "var(--kendo-spacing-3, 0.75rem)",
+                    "padding-x": "var(--kendo-spacing-3, 0.75rem)",
+                    "padding-y": "var(--kendo-spacing-3, 0.75rem)"
                 },
                 "lg": {
-                    "width": "328px",
-                    "vertical-slider-height": "266px",
-                    "rectangle-height": "266px",
+                    "width": "364px",
+                    "vertical-slider-height": "270px",
+                    "rectangle-height": "270px",
                     "input-width": "62px",
-                    "gap": "var(--kendo-spacing-4, 1rem)",
-                    "canvas-gap": "var(--kendo-spacing-4, 1rem)"
+                    "gap": "var(--kendo-spacing-4\\.5, 1.125rem)",
+                    "canvas-gap": "var(--kendo-spacing-4\\.5, 1.125rem)",
+                    "padding-x": "var(--kendo-spacing-4\\.5, 1.125rem)",
+                    "padding-y": "var(--kendo-spacing-4\\.5, 1.125rem)"
                 }
             }
         },
@@ -17473,7 +17641,7 @@
             },
             "context": {
                 "type": "variable",
-                "name": "kendo-color-palette-tile-sm-width",
+                "name": "kendo-color-palette-sm-tile-width",
                 "value": "k-spacing(5.5)",
                 "scope": "default",
                 "line": {
@@ -17500,8 +17668,8 @@
             },
             "context": {
                 "type": "variable",
-                "name": "kendo-color-palette-tile-sm-height",
-                "value": "$kendo-color-palette-tile-sm-width",
+                "name": "kendo-color-palette-sm-tile-height",
+                "value": "$kendo-color-palette-sm-tile-width",
                 "scope": "default",
                 "line": {
                     "start": 26,
@@ -17527,7 +17695,7 @@
             },
             "context": {
                 "type": "variable",
-                "name": "kendo-color-palette-tile-md-width",
+                "name": "kendo-color-palette-md-tile-width",
                 "value": "$kendo-color-palette-tile-width",
                 "scope": "default",
                 "line": {
@@ -17554,7 +17722,7 @@
             },
             "context": {
                 "type": "variable",
-                "name": "kendo-color-palette-tile-md-height",
+                "name": "kendo-color-palette-md-tile-height",
                 "value": "$kendo-color-palette-tile-height",
                 "scope": "default",
                 "line": {
@@ -17581,7 +17749,7 @@
             },
             "context": {
                 "type": "variable",
-                "name": "kendo-color-palette-tile-lg-width",
+                "name": "kendo-color-palette-lg-tile-width",
                 "value": "k-spacing(8)",
                 "scope": "default",
                 "line": {
@@ -17608,8 +17776,8 @@
             },
             "context": {
                 "type": "variable",
-                "name": "kendo-color-palette-tile-lg-height",
-                "value": "$kendo-color-palette-tile-lg-width",
+                "name": "kendo-color-palette-lg-tile-height",
+                "value": "$kendo-color-palette-lg-tile-width",
                 "scope": "default",
                 "line": {
                     "start": 38,
@@ -17717,7 +17885,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-color-palette-sizes",
-                "value": "(\n    sm: (\n        width: $kendo-color-palette-tile-sm-width,\n        height: $kendo-color-palette-tile-sm-height\n    ),\n    md: (\n        width: $kendo-color-palette-tile-md-width,\n        height: $kendo-color-palette-tile-md-height\n    ),\n    lg: (\n        width: $kendo-color-palette-tile-lg-width,\n        height: $kendo-color-palette-tile-lg-height\n    )\n)",
+                "value": "(\n    sm: (\n        width: $kendo-color-palette-sm-tile-width,\n        height: $kendo-color-palette-sm-tile-height\n    ),\n    md: (\n        width: $kendo-color-palette-md-tile-width,\n        height: $kendo-color-palette-md-tile-height\n    ),\n    lg: (\n        width: $kendo-color-palette-lg-tile-width,\n        height: $kendo-color-palette-lg-tile-height\n    )\n)",
                 "scope": "default",
                 "line": {
                     "start": 51,
@@ -97302,23 +97470,185 @@
                         "path": "material/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "var(--kendo-spacing-3, 0.75rem)",
+                    "resolvedValue": "var(--kendo-spacing-3, 0.75rem)",
+                    "resolvedType": "String"
+                },
+                {
+                    "description": "The spacing between the sections of the ColorGradient.\n",
+                    "commentRange": {
+                        "start": 25,
+                        "end": 26
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-color-gradient-gap",
+                        "value": "$kendo-color-gradient-spacer",
+                        "scope": "default",
+                        "line": {
+                            "start": 27,
+                            "end": 27
+                        }
+                    },
+                    "group": [
+                        "color-gradient"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "material/scss/colorgradient/_variables.scss",
+                        "name": "_variables.scss"
+                    },
+                    "resolvedValue": "var(--kendo-spacing-3, 0.75rem)",
+                    "resolvedType": "String"
+                },
+                {
+                    "description": "The font family of the ColorGradient.\n",
+                    "commentRange": {
+                        "start": 28,
+                        "end": 29
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-color-gradient-font-family",
+                        "value": "var( --kendo-font-family, inherit )",
+                        "scope": "default",
+                        "line": {
+                            "start": 30,
+                            "end": 30
+                        }
+                    },
+                    "group": [
+                        "color-gradient"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "material/scss/colorgradient/_variables.scss",
+                        "name": "_variables.scss"
+                    },
+                    "resolvedValue": "var(--kendo-font-family, inherit)",
+                    "resolvedType": "String"
+                },
+                {
+                    "description": "The font size of the ColorGradient.\n",
+                    "commentRange": {
+                        "start": 31,
+                        "end": 32
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-color-gradient-font-size",
+                        "value": "var( --kendo-font-size, inherit )",
+                        "scope": "default",
+                        "line": {
+                            "start": 33,
+                            "end": 33
+                        }
+                    },
+                    "group": [
+                        "color-gradient"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "material/scss/colorgradient/_variables.scss",
+                        "name": "_variables.scss"
+                    },
+                    "resolvedValue": "var(--kendo-font-size, inherit)",
+                    "resolvedType": "String"
+                },
+                {
+                    "description": "The line height of the ColorGradient.\n",
+                    "commentRange": {
+                        "start": 34,
+                        "end": 35
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-color-gradient-line-height",
+                        "value": "var( --kendo-line-height, normal )",
+                        "scope": "default",
+                        "line": {
+                            "start": 36,
+                            "end": 36
+                        }
+                    },
+                    "group": [
+                        "color-gradient"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "material/scss/colorgradient/_variables.scss",
+                        "name": "_variables.scss"
+                    },
+                    "resolvedValue": "var(--kendo-line-height, normal)",
+                    "resolvedType": "String"
+                },
+                {
+                    "description": "The text color of the ColorGradient.\n",
+                    "commentRange": {
+                        "start": 37,
+                        "end": 38
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-color-gradient-text",
+                        "value": "$kendo-component-text",
+                        "scope": "default",
+                        "line": {
+                            "start": 39,
+                            "end": 39
+                        }
+                    },
+                    "group": [
+                        "color-gradient"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "material/scss/colorgradient/_variables.scss",
+                        "name": "_variables.scss"
+                    },
+                    "resolvedValue": "var(--kendo-color-on-app-surface, #212121)",
+                    "resolvedType": "String"
+                },
+                {
+                    "description": "The background color of the ColorGradient.\n",
+                    "commentRange": {
+                        "start": 40,
+                        "end": 41
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-color-gradient-bg",
+                        "value": "$kendo-component-bg",
+                        "scope": "default",
+                        "line": {
+                            "start": 42,
+                            "end": 42
+                        }
+                    },
+                    "group": [
+                        "color-gradient"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "material/scss/colorgradient/_variables.scss",
+                        "name": "_variables.scss"
+                    },
+                    "resolvedValue": "var(--kendo-color-surface-alt, #ffffff)",
                     "resolvedType": "String"
                 },
                 {
-                    "description": "The spacing between the sections of the ColorGradient.\n",
+                    "description": "The border color of the ColorGradient.\n",
                     "commentRange": {
-                        "start": 25,
-                        "end": 26
+                        "start": 43,
+                        "end": 44
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-gradient-gap",
-                        "value": "$kendo-color-gradient-spacer",
+                        "name": "kendo-color-gradient-border",
+                        "value": "$kendo-component-border",
                         "scope": "default",
                         "line": {
-                            "start": 27,
-                            "end": 27
+                            "start": 45,
+                            "end": 45
                         }
                     },
                     "group": [
@@ -97329,23 +97659,23 @@
                         "path": "material/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "var(--kendo-spacing-3, 0.75rem)",
+                    "resolvedValue": "var(--kendo-color-border, rgba(0, 0, 0, 0.12))",
                     "resolvedType": "String"
                 },
                 {
-                    "description": "The font family of the ColorGradient.\n",
+                    "description": "The vertical padding of the small ColorGradient.\n",
                     "commentRange": {
-                        "start": 28,
-                        "end": 29
+                        "start": 47,
+                        "end": 48
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-gradient-font-family",
-                        "value": "var( --kendo-font-family, inherit )",
+                        "name": "kendo-color-gradient-sm-padding-y",
+                        "value": "$kendo-color-gradient-spacer",
                         "scope": "default",
                         "line": {
-                            "start": 30,
-                            "end": 30
+                            "start": 49,
+                            "end": 49
                         }
                     },
                     "group": [
@@ -97356,23 +97686,23 @@
                         "path": "material/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "var(--kendo-font-family, inherit)",
+                    "resolvedValue": "var(--kendo-spacing-3, 0.75rem)",
                     "resolvedType": "String"
                 },
                 {
-                    "description": "The font size of the ColorGradient.\n",
+                    "description": "The horizontal padding of the small ColorGradient.\n",
                     "commentRange": {
-                        "start": 31,
-                        "end": 32
+                        "start": 50,
+                        "end": 51
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-gradient-font-size",
-                        "value": "var( --kendo-font-size, inherit )",
+                        "name": "kendo-color-gradient-sm-padding-x",
+                        "value": "$kendo-color-gradient-padding-y",
                         "scope": "default",
                         "line": {
-                            "start": 33,
-                            "end": 33
+                            "start": 52,
+                            "end": 52
                         }
                     },
                     "group": [
@@ -97383,23 +97713,23 @@
                         "path": "material/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "var(--kendo-font-size, inherit)",
+                    "resolvedValue": "var(--kendo-spacing-3, 0.75rem)",
                     "resolvedType": "String"
                 },
                 {
-                    "description": "The line height of the ColorGradient.\n",
+                    "description": "The vertical padding of the medium ColorGradient.\n",
                     "commentRange": {
-                        "start": 34,
-                        "end": 35
+                        "start": 53,
+                        "end": 54
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-gradient-line-height",
-                        "value": "var( --kendo-line-height, normal )",
+                        "name": "kendo-color-gradient-md-padding-y",
+                        "value": "$kendo-color-gradient-spacer",
                         "scope": "default",
                         "line": {
-                            "start": 36,
-                            "end": 36
+                            "start": 55,
+                            "end": 55
                         }
                     },
                     "group": [
@@ -97410,23 +97740,23 @@
                         "path": "material/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "var(--kendo-line-height, normal)",
+                    "resolvedValue": "var(--kendo-spacing-3, 0.75rem)",
                     "resolvedType": "String"
                 },
                 {
-                    "description": "The text color of the ColorGradient.\n",
+                    "description": "The horizontal padding of the medium ColorGradient.\n",
                     "commentRange": {
-                        "start": 37,
-                        "end": 38
+                        "start": 56,
+                        "end": 57
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-gradient-text",
-                        "value": "$kendo-component-text",
+                        "name": "kendo-color-gradient-md-padding-x",
+                        "value": "$kendo-color-gradient-padding-y",
                         "scope": "default",
                         "line": {
-                            "start": 39,
-                            "end": 39
+                            "start": 58,
+                            "end": 58
                         }
                     },
                     "group": [
@@ -97437,23 +97767,23 @@
                         "path": "material/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "var(--kendo-color-on-app-surface, #212121)",
+                    "resolvedValue": "var(--kendo-spacing-3, 0.75rem)",
                     "resolvedType": "String"
                 },
                 {
-                    "description": "The background color of the ColorGradient.\n",
+                    "description": "The vertical padding of the large ColorGradient.\n",
                     "commentRange": {
-                        "start": 40,
-                        "end": 41
+                        "start": 59,
+                        "end": 60
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-gradient-bg",
-                        "value": "$kendo-component-bg",
+                        "name": "kendo-color-gradient-lg-padding-y",
+                        "value": "k-spacing(4.5)",
                         "scope": "default",
                         "line": {
-                            "start": 42,
-                            "end": 42
+                            "start": 61,
+                            "end": 61
                         }
                     },
                     "group": [
@@ -97464,23 +97794,23 @@
                         "path": "material/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "var(--kendo-color-surface-alt, #ffffff)",
+                    "resolvedValue": "var(--kendo-spacing-4\\.5, 1.125rem)",
                     "resolvedType": "String"
                 },
                 {
-                    "description": "The border color of the ColorGradient.\n",
+                    "description": "The horizontal padding of the large ColorGradient.\n",
                     "commentRange": {
-                        "start": 43,
-                        "end": 44
+                        "start": 62,
+                        "end": 63
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-gradient-border",
-                        "value": "$kendo-component-border",
+                        "name": "kendo-color-gradient-lg-padding-x",
+                        "value": "k-spacing(4.5)",
                         "scope": "default",
                         "line": {
-                            "start": 45,
-                            "end": 45
+                            "start": 64,
+                            "end": 64
                         }
                     },
                     "group": [
@@ -97491,23 +97821,23 @@
                         "path": "material/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "var(--kendo-color-border, rgba(0, 0, 0, 0.12))",
+                    "resolvedValue": "var(--kendo-spacing-4\\.5, 1.125rem)",
                     "resolvedType": "String"
                 },
                 {
                     "description": "The width of the small ColorGradient.\n",
                     "commentRange": {
-                        "start": 46,
-                        "end": 47
+                        "start": 66,
+                        "end": 67
                     },
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-gradient-sm-width",
-                        "value": "254px",
+                        "value": "278px",
                         "scope": "default",
                         "line": {
-                            "start": 48,
-                            "end": 48
+                            "start": 68,
+                            "end": 68
                         }
                     },
                     "group": [
@@ -97518,14 +97848,14 @@
                         "path": "material/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "254px",
+                    "resolvedValue": "278px",
                     "resolvedType": "Number"
                 },
                 {
                     "description": "The width of the medium ColorGradient.\n",
                     "commentRange": {
-                        "start": 49,
-                        "end": 50
+                        "start": 69,
+                        "end": 70
                     },
                     "context": {
                         "type": "variable",
@@ -97533,8 +97863,8 @@
                         "value": "$kendo-color-gradient-width",
                         "scope": "default",
                         "line": {
-                            "start": 51,
-                            "end": 51
+                            "start": 71,
+                            "end": 71
                         }
                     },
                     "group": [
@@ -97551,17 +97881,17 @@
                 {
                     "description": "The width of the large ColorGradient.\n",
                     "commentRange": {
-                        "start": 52,
-                        "end": 53
+                        "start": 72,
+                        "end": 73
                     },
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-gradient-lg-width",
-                        "value": "328px",
+                        "value": "364px",
                         "scope": "default",
                         "line": {
-                            "start": 54,
-                            "end": 54
+                            "start": 74,
+                            "end": 74
                         }
                     },
                     "group": [
@@ -97572,14 +97902,14 @@
                         "path": "material/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "328px",
+                    "resolvedValue": "364px",
                     "resolvedType": "Number"
                 },
                 {
                     "description": "The spacing between the sections of the small ColorGradient.\n",
                     "commentRange": {
-                        "start": 56,
-                        "end": 57
+                        "start": 76,
+                        "end": 77
                     },
                     "context": {
                         "type": "variable",
@@ -97587,8 +97917,8 @@
                         "value": "k-spacing(2.5)",
                         "scope": "default",
                         "line": {
-                            "start": 58,
-                            "end": 58
+                            "start": 78,
+                            "end": 78
                         }
                     },
                     "group": [
@@ -97605,8 +97935,8 @@
                 {
                     "description": "The spacing between the sections of the medium ColorGradient.\n",
                     "commentRange": {
-                        "start": 59,
-                        "end": 60
+                        "start": 79,
+                        "end": 80
                     },
                     "context": {
                         "type": "variable",
@@ -97614,8 +97944,8 @@
                         "value": "$kendo-color-gradient-gap",
                         "scope": "default",
                         "line": {
-                            "start": 61,
-                            "end": 61
+                            "start": 81,
+                            "end": 81
                         }
                     },
                     "group": [
@@ -97632,17 +97962,17 @@
                 {
                     "description": "The spacing between the sections of the large ColorGradient.\n",
                     "commentRange": {
-                        "start": 62,
-                        "end": 63
+                        "start": 82,
+                        "end": 83
                     },
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-gradient-lg-gap",
-                        "value": "k-spacing(4)",
+                        "value": "k-spacing(4.5)",
                         "scope": "default",
                         "line": {
-                            "start": 64,
-                            "end": 64
+                            "start": 84,
+                            "end": 84
                         }
                     },
                     "group": [
@@ -97653,14 +97983,14 @@
                         "path": "material/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "var(--kendo-spacing-4, 1rem)",
+                    "resolvedValue": "var(--kendo-spacing-4\\.5, 1.125rem)",
                     "resolvedType": "String"
                 },
                 {
                     "description": "The border color of the focused ColorGradient.\n",
                     "commentRange": {
-                        "start": 66,
-                        "end": 67
+                        "start": 86,
+                        "end": 87
                     },
                     "context": {
                         "type": "variable",
@@ -97668,8 +97998,8 @@
                         "value": "$kendo-hover-border",
                         "scope": "default",
                         "line": {
-                            "start": 68,
-                            "end": 68
+                            "start": 88,
+                            "end": 88
                         }
                     },
                     "group": [
@@ -97686,8 +98016,8 @@
                 {
                     "description": "The box shadow of the focused ColorGradient.\n",
                     "commentRange": {
-                        "start": 69,
-                        "end": 70
+                        "start": 89,
+                        "end": 90
                     },
                     "context": {
                         "type": "variable",
@@ -97695,8 +98025,8 @@
                         "value": "k-elevation(3)",
                         "scope": "default",
                         "line": {
-                            "start": 71,
-                            "end": 71
+                            "start": 91,
+                            "end": 91
                         }
                     },
                     "group": [
@@ -97713,8 +98043,8 @@
                 {
                     "description": "The border radius of the ColorGradient canvas.\n",
                     "commentRange": {
-                        "start": 73,
-                        "end": 74
+                        "start": 93,
+                        "end": 94
                     },
                     "context": {
                         "type": "variable",
@@ -97722,8 +98052,8 @@
                         "value": "k-border-radius(md)",
                         "scope": "default",
                         "line": {
-                            "start": 75,
-                            "end": 75
+                            "start": 95,
+                            "end": 95
                         }
                     },
                     "group": [
@@ -97740,8 +98070,8 @@
                 {
                     "description": "The spacing between the items of the ColorGradient canvas.\n",
                     "commentRange": {
-                        "start": 76,
-                        "end": 77
+                        "start": 96,
+                        "end": 97
                     },
                     "context": {
                         "type": "variable",
@@ -97749,8 +98079,8 @@
                         "value": "$kendo-color-gradient-spacer",
                         "scope": "default",
                         "line": {
-                            "start": 78,
-                            "end": 78
+                            "start": 98,
+                            "end": 98
                         }
                     },
                     "group": [
@@ -97767,8 +98097,8 @@
                 {
                     "description": "The height the ColorGradient canvas hsv rectangle.\n",
                     "commentRange": {
-                        "start": 79,
-                        "end": 80
+                        "start": 99,
+                        "end": 100
                     },
                     "context": {
                         "type": "variable",
@@ -97776,8 +98106,8 @@
                         "value": "180px",
                         "scope": "default",
                         "line": {
-                            "start": 81,
-                            "end": 81
+                            "start": 101,
+                            "end": 101
                         }
                     },
                     "group": [
@@ -97794,17 +98124,17 @@
                 {
                     "description": "The height the small ColorGradient canvas hsv rectangle.\n",
                     "commentRange": {
-                        "start": 82,
-                        "end": 83
+                        "start": 102,
+                        "end": 103
                     },
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-gradient-sm-canvas-rectangle-height",
-                        "value": "210px",
+                        "value": "$kendo-color-gradient-canvas-rectangle-height",
                         "scope": "default",
                         "line": {
-                            "start": 84,
-                            "end": 84
+                            "start": 104,
+                            "end": 104
                         }
                     },
                     "group": [
@@ -97815,14 +98145,14 @@
                         "path": "material/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "210px",
+                    "resolvedValue": "180px",
                     "resolvedType": "Number"
                 },
                 {
                     "description": "The height the medium ColorGradient canvas hsv rectangle.\n",
                     "commentRange": {
-                        "start": 85,
-                        "end": 86
+                        "start": 105,
+                        "end": 106
                     },
                     "context": {
                         "type": "variable",
@@ -97830,8 +98160,8 @@
                         "value": "$kendo-color-gradient-canvas-rectangle-height",
                         "scope": "default",
                         "line": {
-                            "start": 87,
-                            "end": 87
+                            "start": 107,
+                            "end": 107
                         }
                     },
                     "group": [
@@ -97848,17 +98178,17 @@
                 {
                     "description": "The height the large ColorGradient canvas hsv rectangle.\n",
                     "commentRange": {
-                        "start": 88,
-                        "end": 89
+                        "start": 108,
+                        "end": 109
                     },
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-gradient-lg-canvas-rectangle-height",
-                        "value": "266px",
+                        "value": "270px",
                         "scope": "default",
                         "line": {
-                            "start": 90,
-                            "end": 90
+                            "start": 110,
+                            "end": 110
                         }
                     },
                     "group": [
@@ -97869,14 +98199,14 @@
                         "path": "material/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "266px",
+                    "resolvedValue": "270px",
                     "resolvedType": "Number"
                 },
                 {
                     "description": "The spacing between the items of the small ColorGradient canvas.\n",
                     "commentRange": {
-                        "start": 92,
-                        "end": 93
+                        "start": 112,
+                        "end": 113
                     },
                     "context": {
                         "type": "variable",
@@ -97884,8 +98214,8 @@
                         "value": "k-spacing(2.5)",
                         "scope": "default",
                         "line": {
-                            "start": 94,
-                            "end": 94
+                            "start": 114,
+                            "end": 114
                         }
                     },
                     "group": [
@@ -97902,8 +98232,8 @@
                 {
                     "description": "The spacing between the items of the medium ColorGradient canvas.\n",
                     "commentRange": {
-                        "start": 95,
-                        "end": 96
+                        "start": 115,
+                        "end": 116
                     },
                     "context": {
                         "type": "variable",
@@ -97911,8 +98241,8 @@
                         "value": "$kendo-color-gradient-canvas-gap",
                         "scope": "default",
                         "line": {
-                            "start": 97,
-                            "end": 97
+                            "start": 117,
+                            "end": 117
                         }
                     },
                     "group": [
@@ -97929,17 +98259,17 @@
                 {
                     "description": "The spacing between the items of the large ColorGradient canvas.\n",
                     "commentRange": {
-                        "start": 98,
-                        "end": 99
+                        "start": 118,
+                        "end": 119
                     },
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-gradient-lg-canvas-gap",
-                        "value": "k-spacing(4)",
+                        "value": "k-spacing(4.5)",
                         "scope": "default",
                         "line": {
-                            "start": 100,
-                            "end": 100
+                            "start": 120,
+                            "end": 120
                         }
                     },
                     "group": [
@@ -97950,14 +98280,14 @@
                         "path": "material/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "var(--kendo-spacing-4, 1rem)",
+                    "resolvedValue": "var(--kendo-spacing-4\\.5, 1.125rem)",
                     "resolvedType": "String"
                 },
                 {
                     "description": "The width of the ColorGradient slider.\n",
                     "commentRange": {
-                        "start": 102,
-                        "end": 103
+                        "start": 122,
+                        "end": 123
                     },
                     "context": {
                         "type": "variable",
@@ -97965,8 +98295,8 @@
                         "value": "10px",
                         "scope": "default",
                         "line": {
-                            "start": 104,
-                            "end": 104
+                            "start": 124,
+                            "end": 124
                         }
                     },
                     "group": [
@@ -97983,8 +98313,8 @@
                 {
                     "description": "The border radius of the ColorGradient slider.\n",
                     "commentRange": {
-                        "start": 105,
-                        "end": 106
+                        "start": 125,
+                        "end": 126
                     },
                     "context": {
                         "type": "variable",
@@ -97992,8 +98322,8 @@
                         "value": "10px",
                         "scope": "default",
                         "line": {
-                            "start": 107,
-                            "end": 107
+                            "start": 127,
+                            "end": 127
                         }
                     },
                     "group": [
@@ -98010,8 +98340,8 @@
                 {
                     "description": "The width of the border around the ColorGradient slider drag handle.\n",
                     "commentRange": {
-                        "start": 108,
-                        "end": 109
+                        "start": 128,
+                        "end": 129
                     },
                     "context": {
                         "type": "variable",
@@ -98019,8 +98349,8 @@
                         "value": "3px",
                         "scope": "default",
                         "line": {
-                            "start": 110,
-                            "end": 110
+                            "start": 130,
+                            "end": 130
                         }
                     },
                     "group": [
@@ -98037,8 +98367,8 @@
                 {
                     "description": "The height of the ColorGradient vertical slider.\n",
                     "commentRange": {
-                        "start": 112,
-                        "end": 113
+                        "start": 132,
+                        "end": 133
                     },
                     "context": {
                         "type": "variable",
@@ -98046,8 +98376,8 @@
                         "value": "180px",
                         "scope": "default",
                         "line": {
-                            "start": 114,
-                            "end": 114
+                            "start": 134,
+                            "end": 134
                         }
                     },
                     "group": [
@@ -98064,8 +98394,8 @@
                 {
                     "description": "The width of the ColorGradient horizontal slider.\n",
                     "commentRange": {
-                        "start": 115,
-                        "end": 116
+                        "start": 135,
+                        "end": 136
                     },
                     "context": {
                         "type": "variable",
@@ -98073,8 +98403,8 @@
                         "value": "100%",
                         "scope": "default",
                         "line": {
-                            "start": 117,
-                            "end": 117
+                            "start": 137,
+                            "end": 137
                         }
                     },
                     "group": [
@@ -98091,8 +98421,8 @@
                 {
                     "description": "The background image of the ColorGradient alpha slider.\n",
                     "commentRange": {
-                        "start": 118,
-                        "end": 119
+                        "start": 138,
+                        "end": 139
                     },
                     "context": {
                         "type": "variable",
@@ -98100,8 +98430,8 @@
                         "value": "\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC\"",
                         "scope": "default",
                         "line": {
-                            "start": 120,
-                            "end": 120
+                            "start": 140,
+                            "end": 140
                         }
                     },
                     "group": [
@@ -98118,17 +98448,17 @@
                 {
                     "description": "The height of the small ColorGradient vertical slider.\n",
                     "commentRange": {
-                        "start": 121,
-                        "end": 122
+                        "start": 141,
+                        "end": 142
                     },
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-gradient-sm-slider-vertical-size",
-                        "value": "210px",
+                        "value": "$kendo-color-gradient-slider-vertical-size",
                         "scope": "default",
                         "line": {
-                            "start": 123,
-                            "end": 123
+                            "start": 143,
+                            "end": 143
                         }
                     },
                     "group": [
@@ -98139,14 +98469,14 @@
                         "path": "material/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "210px",
+                    "resolvedValue": "180px",
                     "resolvedType": "Number"
                 },
                 {
                     "description": "The height of the medium ColorGradient vertical slider.\n",
                     "commentRange": {
-                        "start": 124,
-                        "end": 125
+                        "start": 144,
+                        "end": 145
                     },
                     "context": {
                         "type": "variable",
@@ -98154,8 +98484,8 @@
                         "value": "$kendo-color-gradient-slider-vertical-size",
                         "scope": "default",
                         "line": {
-                            "start": 126,
-                            "end": 126
+                            "start": 146,
+                            "end": 146
                         }
                     },
                     "group": [
@@ -98172,17 +98502,17 @@
                 {
                     "description": "The height of the large ColorGradient vertical slider.\n",
                     "commentRange": {
-                        "start": 127,
-                        "end": 128
+                        "start": 147,
+                        "end": 148
                     },
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-gradient-lg-slider-vertical-size",
-                        "value": "266px",
+                        "value": "270px",
                         "scope": "default",
                         "line": {
-                            "start": 129,
-                            "end": 129
+                            "start": 149,
+                            "end": 149
                         }
                     },
                     "group": [
@@ -98193,14 +98523,14 @@
                         "path": "material/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "266px",
+                    "resolvedValue": "270px",
                     "resolvedType": "Number"
                 },
                 {
                     "description": "The width of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 131,
-                        "end": 132
+                        "start": 151,
+                        "end": 152
                     },
                     "context": {
                         "type": "variable",
@@ -98208,8 +98538,8 @@
                         "value": "14px",
                         "scope": "default",
                         "line": {
-                            "start": 133,
-                            "end": 133
+                            "start": 153,
+                            "end": 153
                         }
                     },
                     "group": [
@@ -98226,8 +98556,8 @@
                 {
                     "description": "The height of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 134,
-                        "end": 135
+                        "start": 154,
+                        "end": 155
                     },
                     "context": {
                         "type": "variable",
@@ -98235,8 +98565,8 @@
                         "value": "14px",
                         "scope": "default",
                         "line": {
-                            "start": 136,
-                            "end": 136
+                            "start": 156,
+                            "end": 156
                         }
                     },
                     "group": [
@@ -98253,8 +98583,8 @@
                 {
                     "description": "The width of the border around the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 137,
-                        "end": 138
+                        "start": 157,
+                        "end": 158
                     },
                     "context": {
                         "type": "variable",
@@ -98262,8 +98592,8 @@
                         "value": "1px",
                         "scope": "default",
                         "line": {
-                            "start": 139,
-                            "end": 139
+                            "start": 159,
+                            "end": 159
                         }
                     },
                     "group": [
@@ -98280,8 +98610,8 @@
                 {
                     "description": "The width of the outline around the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 140,
-                        "end": 141
+                        "start": 160,
+                        "end": 161
                     },
                     "context": {
                         "type": "variable",
@@ -98289,8 +98619,8 @@
                         "value": "1px",
                         "scope": "default",
                         "line": {
-                            "start": 142,
-                            "end": 142
+                            "start": 162,
+                            "end": 162
                         }
                     },
                     "group": [
@@ -98307,8 +98637,8 @@
                 {
                     "description": "The border radius of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 143,
-                        "end": 144
+                        "start": 163,
+                        "end": 164
                     },
                     "context": {
                         "type": "variable",
@@ -98316,8 +98646,8 @@
                         "value": "50%",
                         "scope": "default",
                         "line": {
-                            "start": 145,
-                            "end": 145
+                            "start": 165,
+                            "end": 165
                         }
                     },
                     "group": [
@@ -98334,8 +98664,8 @@
                 {
                     "description": "The text color of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 146,
-                        "end": 147
+                        "start": 166,
+                        "end": 167
                     },
                     "context": {
                         "type": "variable",
@@ -98343,8 +98673,8 @@
                         "value": "null",
                         "scope": "default",
                         "line": {
-                            "start": 148,
-                            "end": 148
+                            "start": 168,
+                            "end": 168
                         }
                     },
                     "group": [
@@ -98361,8 +98691,8 @@
                 {
                     "description": "The background color of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 149,
-                        "end": 150
+                        "start": 169,
+                        "end": 170
                     },
                     "context": {
                         "type": "variable",
@@ -98370,8 +98700,8 @@
                         "value": "transparent",
                         "scope": "default",
                         "line": {
-                            "start": 151,
-                            "end": 151
+                            "start": 171,
+                            "end": 171
                         }
                     },
                     "group": [
@@ -98388,8 +98718,8 @@
                 {
                     "description": "The color of the border around the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 152,
-                        "end": 153
+                        "start": 172,
+                        "end": 173
                     },
                     "context": {
                         "type": "variable",
@@ -98397,8 +98727,8 @@
                         "value": "rgba( white, .8 )",
                         "scope": "default",
                         "line": {
-                            "start": 154,
-                            "end": 154
+                            "start": 174,
+                            "end": 174
                         }
                     },
                     "group": [
@@ -98415,8 +98745,8 @@
                 {
                     "description": "The focus color of the outline around the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 155,
-                        "end": 156
+                        "start": 175,
+                        "end": 176
                     },
                     "context": {
                         "type": "variable",
@@ -98424,8 +98754,8 @@
                         "value": "$kendo-color-black",
                         "scope": "default",
                         "line": {
-                            "start": 157,
-                            "end": 157
+                            "start": 177,
+                            "end": 177
                         }
                     },
                     "group": [
@@ -98442,8 +98772,8 @@
                 {
                     "description": "The outline color of the outline around the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 158,
-                        "end": 159
+                        "start": 178,
+                        "end": 179
                     },
                     "context": {
                         "type": "variable",
@@ -98451,8 +98781,8 @@
                         "value": "$kendo-color-black",
                         "scope": "default",
                         "line": {
-                            "start": 160,
-                            "end": 160
+                            "start": 180,
+                            "end": 180
                         }
                     },
                     "group": [
@@ -98469,8 +98799,8 @@
                 {
                     "description": "The box shadow of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 161,
-                        "end": 162
+                        "start": 181,
+                        "end": 182
                     },
                     "context": {
                         "type": "variable",
@@ -98478,8 +98808,8 @@
                         "value": "k-elevation(2)",
                         "scope": "default",
                         "line": {
-                            "start": 163,
-                            "end": 163
+                            "start": 183,
+                            "end": 183
                         }
                     },
                     "group": [
@@ -98496,8 +98826,8 @@
                 {
                     "description": "The vertical margin of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 165,
-                        "end": 166
+                        "start": 185,
+                        "end": 186
                     },
                     "context": {
                         "type": "variable",
@@ -98505,8 +98835,8 @@
                         "value": "- math.div( $kendo-color-gradient-draghandle-height, 2 )",
                         "scope": "default",
                         "line": {
-                            "start": 167,
-                            "end": 167
+                            "start": 187,
+                            "end": 187
                         }
                     },
                     "group": [
@@ -98523,8 +98853,8 @@
                 {
                     "description": "The horizontal margin of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 168,
-                        "end": 169
+                        "start": 188,
+                        "end": 189
                     },
                     "context": {
                         "type": "variable",
@@ -98532,8 +98862,8 @@
                         "value": "- math.div( $kendo-color-gradient-draghandle-width, 2 )",
                         "scope": "default",
                         "line": {
-                            "start": 170,
-                            "end": 170
+                            "start": 190,
+                            "end": 190
                         }
                     },
                     "group": [
@@ -98550,8 +98880,8 @@
                 {
                     "description": "The width of the ColorGradient input.\n",
                     "commentRange": {
-                        "start": 172,
-                        "end": 173
+                        "start": 192,
+                        "end": 193
                     },
                     "context": {
                         "type": "variable",
@@ -98559,8 +98889,8 @@
                         "value": "50px",
                         "scope": "default",
                         "line": {
-                            "start": 174,
-                            "end": 174
+                            "start": 194,
+                            "end": 194
                         }
                     },
                     "group": [
@@ -98577,8 +98907,8 @@
                 {
                     "description": "The spacing between the ColorGradient inputs.\n",
                     "commentRange": {
-                        "start": 175,
-                        "end": 176
+                        "start": 195,
+                        "end": 196
                     },
                     "context": {
                         "type": "variable",
@@ -98586,8 +98916,8 @@
                         "value": "k-spacing(2)",
                         "scope": "default",
                         "line": {
-                            "start": 177,
-                            "end": 177
+                            "start": 197,
+                            "end": 197
                         }
                     },
                     "group": [
@@ -98604,8 +98934,8 @@
                 {
                     "description": "The spacing between the ColorGradient inputs and their labels.\n",
                     "commentRange": {
-                        "start": 178,
-                        "end": 179
+                        "start": 198,
+                        "end": 199
                     },
                     "context": {
                         "type": "variable",
@@ -98613,8 +98943,8 @@
                         "value": "k-spacing(1)",
                         "scope": "default",
                         "line": {
-                            "start": 180,
-                            "end": 180
+                            "start": 200,
+                            "end": 200
                         }
                     },
                     "group": [
@@ -98631,8 +98961,8 @@
                 {
                     "description": "The text color of the ColorGradient input labels.\n",
                     "commentRange": {
-                        "start": 181,
-                        "end": 182
+                        "start": 201,
+                        "end": 202
                     },
                     "context": {
                         "type": "variable",
@@ -98640,8 +98970,8 @@
                         "value": "$kendo-subtle-text",
                         "scope": "default",
                         "line": {
-                            "start": 183,
-                            "end": 183
+                            "start": 203,
+                            "end": 203
                         }
                     },
                     "group": [
@@ -98658,8 +98988,8 @@
                 {
                     "description": "The width of the small ColorGradient input.\n",
                     "commentRange": {
-                        "start": 185,
-                        "end": 186
+                        "start": 205,
+                        "end": 206
                     },
                     "context": {
                         "type": "variable",
@@ -98667,8 +98997,8 @@
                         "value": "46px",
                         "scope": "default",
                         "line": {
-                            "start": 187,
-                            "end": 187
+                            "start": 207,
+                            "end": 207
                         }
                     },
                     "group": [
@@ -98685,8 +99015,8 @@
                 {
                     "description": "The width of the medium ColorGradient input.\n",
                     "commentRange": {
-                        "start": 188,
-                        "end": 189
+                        "start": 208,
+                        "end": 209
                     },
                     "context": {
                         "type": "variable",
@@ -98694,8 +99024,8 @@
                         "value": "$kendo-color-gradient-input-width",
                         "scope": "default",
                         "line": {
-                            "start": 190,
-                            "end": 190
+                            "start": 210,
+                            "end": 210
                         }
                     },
                     "group": [
@@ -98712,8 +99042,8 @@
                 {
                     "description": "The width of the large ColorGradient input.\n",
                     "commentRange": {
-                        "start": 191,
-                        "end": 192
+                        "start": 211,
+                        "end": 212
                     },
                     "context": {
                         "type": "variable",
@@ -98721,8 +99051,8 @@
                         "value": "62px",
                         "scope": "default",
                         "line": {
-                            "start": 193,
-                            "end": 193
+                            "start": 213,
+                            "end": 213
                         }
                     },
                     "group": [
@@ -98739,8 +99069,8 @@
                 {
                     "description": "The font weight of the ColorGradient contrast ratio text.\n",
                     "commentRange": {
-                        "start": 195,
-                        "end": 196
+                        "start": 215,
+                        "end": 216
                     },
                     "context": {
                         "type": "variable",
@@ -98748,8 +99078,8 @@
                         "value": "var( --kendo-font-weight-medium, normal )",
                         "scope": "default",
                         "line": {
-                            "start": 197,
-                            "end": 197
+                            "start": 217,
+                            "end": 217
                         }
                     },
                     "group": [
@@ -98766,8 +99096,8 @@
                 {
                     "description": "The spacing between the items in the ColorGradient contrast tool.\n",
                     "commentRange": {
-                        "start": 198,
-                        "end": 199
+                        "start": 218,
+                        "end": 219
                     },
                     "context": {
                         "type": "variable",
@@ -98775,8 +99105,8 @@
                         "value": "k-spacing(2)",
                         "scope": "default",
                         "line": {
-                            "start": 200,
-                            "end": 200
+                            "start": 220,
+                            "end": 220
                         }
                     },
                     "group": [
@@ -98793,17 +99123,17 @@
                 {
                     "description": "The size map of the ColorGradient.\n",
                     "commentRange": {
-                        "start": 202,
-                        "end": 203
+                        "start": 222,
+                        "end": 223
                     },
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-gradient-sizes",
-                        "value": "(\n    sm: (\n        width: $kendo-color-gradient-sm-width,\n        vertical-slider-height: $kendo-color-gradient-sm-slider-vertical-size,\n        rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,\n        input-width: $kendo-color-gradient-sm-input-width,\n        gap: $kendo-color-gradient-sm-gap,\n        canvas-gap: $kendo-color-gradient-sm-canvas-gap\n    ),\n    md: (\n        width: $kendo-color-gradient-md-width,\n        vertical-slider-height: $kendo-color-gradient-md-slider-vertical-size,\n        rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,\n        input-width: $kendo-color-gradient-md-input-width,\n        gap: $kendo-color-gradient-md-gap,\n        canvas-gap: $kendo-color-gradient-md-canvas-gap\n    ),\n    lg: (\n        width: $kendo-color-gradient-lg-width,\n        vertical-slider-height: $kendo-color-gradient-lg-slider-vertical-size,\n        rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,\n        input-width: $kendo-color-gradient-lg-input-width,\n        gap: $kendo-color-gradient-lg-gap,\n        canvas-gap: $kendo-color-gradient-lg-canvas-gap\n    )\n)",
+                        "value": "(\n    sm: (\n        width: $kendo-color-gradient-sm-width,\n        vertical-slider-height: $kendo-color-gradient-sm-slider-vertical-size,\n        rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,\n        input-width: $kendo-color-gradient-sm-input-width,\n        gap: $kendo-color-gradient-sm-gap,\n        canvas-gap: $kendo-color-gradient-sm-canvas-gap,\n        padding-x: $kendo-color-gradient-sm-padding-x,\n        padding-y: $kendo-color-gradient-sm-padding-y\n    ),\n    md: (\n        width: $kendo-color-gradient-md-width,\n        vertical-slider-height: $kendo-color-gradient-md-slider-vertical-size,\n        rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,\n        input-width: $kendo-color-gradient-md-input-width,\n        gap: $kendo-color-gradient-md-gap,\n        canvas-gap: $kendo-color-gradient-md-canvas-gap,\n        padding-x: $kendo-color-gradient-md-padding-x,\n        padding-y: $kendo-color-gradient-md-padding-y\n    ),\n    lg: (\n        width: $kendo-color-gradient-lg-width,\n        vertical-slider-height: $kendo-color-gradient-lg-slider-vertical-size,\n        rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,\n        input-width: $kendo-color-gradient-lg-input-width,\n        gap: $kendo-color-gradient-lg-gap,\n        canvas-gap: $kendo-color-gradient-lg-canvas-gap,\n        padding-x: $kendo-color-gradient-lg-padding-x,\n        padding-y: $kendo-color-gradient-lg-padding-y\n    )\n)",
                         "scope": "default",
                         "line": {
-                            "start": 204,
-                            "end": 229
+                            "start": 224,
+                            "end": 255
                         }
                     },
                     "group": [
@@ -98814,16 +99144,18 @@
                         "path": "material/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "(sm: (width: 254px, vertical-slider-height: 210px, rectangle-height: 210px, input-width: 46px, gap: var(--kendo-spacing-2\\.5, 0.625rem), canvas-gap: var(--kendo-spacing-2\\.5, 0.625rem)), md: (width: 294px, vertical-slider-height: 180px, rectangle-height: 180px, input-width: 50px, gap: var(--kendo-spacing-3, 0.75rem), canvas-gap: var(--kendo-spacing-3, 0.75rem)), lg: (width: 328px, vertical-slider-height: 266px, rectangle-height: 266px, input-width: 62px, gap: var(--kendo-spacing-4, 1rem), canvas-gap: var(--kendo-spacing-4, 1rem)))",
+                    "resolvedValue": "(sm: (width: 278px, vertical-slider-height: 180px, rectangle-height: 180px, input-width: 46px, gap: var(--kendo-spacing-2\\.5, 0.625rem), canvas-gap: var(--kendo-spacing-2\\.5, 0.625rem), padding-x: var(--kendo-spacing-3, 0.75rem), padding-y: var(--kendo-spacing-3, 0.75rem)), md: (width: 294px, vertical-slider-height: 180px, rectangle-height: 180px, input-width: 50px, gap: var(--kendo-spacing-3, 0.75rem), canvas-gap: var(--kendo-spacing-3, 0.75rem), padding-x: var(--kendo-spacing-3, 0.75rem), padding-y: var(--kendo-spacing-3, 0.75rem)), lg: (width: 364px, vertical-slider-height: 270px, rectangle-height: 270px, input-width: 62px, gap: var(--kendo-spacing-4\\.5, 1.125rem), canvas-gap: var(--kendo-spacing-4\\.5, 1.125rem), padding-x: var(--kendo-spacing-4\\.5, 1.125rem), padding-y: var(--kendo-spacing-4\\.5, 1.125rem)))",
                     "resolvedType": "Map",
                     "prettyValue": {
                         "sm": {
-                            "width": "254px",
-                            "vertical-slider-height": "210px",
-                            "rectangle-height": "210px",
+                            "width": "278px",
+                            "vertical-slider-height": "180px",
+                            "rectangle-height": "180px",
                             "input-width": "46px",
                             "gap": "var(--kendo-spacing-2\\.5, 0.625rem)",
-                            "canvas-gap": "var(--kendo-spacing-2\\.5, 0.625rem)"
+                            "canvas-gap": "var(--kendo-spacing-2\\.5, 0.625rem)",
+                            "padding-x": "var(--kendo-spacing-3, 0.75rem)",
+                            "padding-y": "var(--kendo-spacing-3, 0.75rem)"
                         },
                         "md": {
                             "width": "294px",
@@ -98831,15 +99163,19 @@
                             "rectangle-height": "180px",
                             "input-width": "50px",
                             "gap": "var(--kendo-spacing-3, 0.75rem)",
-                            "canvas-gap": "var(--kendo-spacing-3, 0.75rem)"
+                            "canvas-gap": "var(--kendo-spacing-3, 0.75rem)",
+                            "padding-x": "var(--kendo-spacing-3, 0.75rem)",
+                            "padding-y": "var(--kendo-spacing-3, 0.75rem)"
                         },
                         "lg": {
-                            "width": "328px",
-                            "vertical-slider-height": "266px",
-                            "rectangle-height": "266px",
+                            "width": "364px",
+                            "vertical-slider-height": "270px",
+                            "rectangle-height": "270px",
                             "input-width": "62px",
-                            "gap": "var(--kendo-spacing-4, 1rem)",
-                            "canvas-gap": "var(--kendo-spacing-4, 1rem)"
+                            "gap": "var(--kendo-spacing-4\\.5, 1.125rem)",
+                            "canvas-gap": "var(--kendo-spacing-4\\.5, 1.125rem)",
+                            "padding-x": "var(--kendo-spacing-4\\.5, 1.125rem)",
+                            "padding-y": "var(--kendo-spacing-4\\.5, 1.125rem)"
                         }
                     }
                 }
@@ -98992,7 +99328,7 @@
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-palette-tile-sm-width",
+                        "name": "kendo-color-palette-sm-tile-width",
                         "value": "k-spacing(5.5)",
                         "scope": "default",
                         "line": {
@@ -99019,8 +99355,8 @@
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-palette-tile-sm-height",
-                        "value": "$kendo-color-palette-tile-sm-width",
+                        "name": "kendo-color-palette-sm-tile-height",
+                        "value": "$kendo-color-palette-sm-tile-width",
                         "scope": "default",
                         "line": {
                             "start": 26,
@@ -99046,7 +99382,7 @@
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-palette-tile-md-width",
+                        "name": "kendo-color-palette-md-tile-width",
                         "value": "$kendo-color-palette-tile-width",
                         "scope": "default",
                         "line": {
@@ -99073,7 +99409,7 @@
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-palette-tile-md-height",
+                        "name": "kendo-color-palette-md-tile-height",
                         "value": "$kendo-color-palette-tile-height",
                         "scope": "default",
                         "line": {
@@ -99100,7 +99436,7 @@
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-palette-tile-lg-width",
+                        "name": "kendo-color-palette-lg-tile-width",
                         "value": "k-spacing(8)",
                         "scope": "default",
                         "line": {
@@ -99127,8 +99463,8 @@
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-palette-tile-lg-height",
-                        "value": "$kendo-color-palette-tile-lg-width",
+                        "name": "kendo-color-palette-lg-tile-height",
+                        "value": "$kendo-color-palette-lg-tile-width",
                         "scope": "default",
                         "line": {
                             "start": 38,
@@ -99236,7 +99572,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-palette-sizes",
-                        "value": "(\n    sm: (\n        width: $kendo-color-palette-tile-sm-width,\n        height: $kendo-color-palette-tile-sm-height\n    ),\n    md: (\n        width: $kendo-color-palette-tile-md-width,\n        height: $kendo-color-palette-tile-md-height\n    ),\n    lg: (\n        width: $kendo-color-palette-tile-lg-width,\n        height: $kendo-color-palette-tile-lg-height\n    )\n)",
+                        "value": "(\n    sm: (\n        width: $kendo-color-palette-sm-tile-width,\n        height: $kendo-color-palette-sm-tile-height\n    ),\n    md: (\n        width: $kendo-color-palette-md-tile-width,\n        height: $kendo-color-palette-md-tile-height\n    ),\n    lg: (\n        width: $kendo-color-palette-lg-tile-width,\n        height: $kendo-color-palette-lg-tile-height\n    )\n)",
                         "scope": "default",
                         "line": {
                             "start": 51,