@progress/kendo-theme-classic 10.1.1-dev.1 → 10.2.0-dev.1

package/dist/meta/sassdoc-data.json

@@ -10034,8 +10034,8 @@
         {
             "description": "The color of the Chart grid lines (major).\n",
             "commentRange": {
-                "start": 102,
-                "end": 103
+                "start": 99,
+                "end": 100
             },
             "context": {
                 "type": "variable",
@@ -10043,8 +10043,8 @@
                 "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ))",
                 "scope": "default",
                 "line": {
-                    "start": 104,
-                    "end": 104
+                    "start": 101,
+                    "end": 101
                 }
             },
             "group": [
@@ -10061,8 +10061,8 @@
         {
             "description": "The color of the Chart grid lines (minor).\n",
             "commentRange": {
-                "start": 106,
-                "end": 107
+                "start": 103,
+                "end": 104
             },
             "context": {
                 "type": "variable",
@@ -10070,8 +10070,8 @@
                 "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 ))",
                 "scope": "default",
                 "line": {
-                    "start": 108,
-                    "end": 108
+                    "start": 105,
+                    "end": 105
                 }
             },
             "group": [
@@ -16036,15 +16036,15 @@
             "resolvedType": "String"
         },
         {
-            "description": "The width of the small ColorGradient.\n",
+            "description": "The vertical padding of the small ColorGradient.\n",
             "commentRange": {
                 "start": 47,
                 "end": 48
             },
             "context": {
                 "type": "variable",
-                "name": "kendo-color-gradient-sm-width",
-                "value": "226px",
+                "name": "kendo-color-gradient-sm-padding-y",
+                "value": "$kendo-color-gradient-spacer",
                 "scope": "default",
                 "line": {
                     "start": 49,
@@ -16059,19 +16059,19 @@
                 "path": "classic/scss/colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "226px",
-            "resolvedType": "Number"
+            "resolvedValue": "var(--kendo-spacing-3, 0.75rem)",
+            "resolvedType": "String"
         },
         {
-            "description": "The width of the medium ColorGradient.\n",
+            "description": "The horizontal padding of the small ColorGradient.\n",
             "commentRange": {
                 "start": 50,
                 "end": 51
             },
             "context": {
                 "type": "variable",
-                "name": "kendo-color-gradient-md-width",
-                "value": "$kendo-color-gradient-width",
+                "name": "kendo-color-gradient-sm-padding-x",
+                "value": "$kendo-color-gradient-padding-y",
                 "scope": "default",
                 "line": {
                     "start": 52,
@@ -16086,19 +16086,19 @@
                 "path": "classic/scss/colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "272px",
-            "resolvedType": "Number"
+            "resolvedValue": "var(--kendo-spacing-3, 0.75rem)",
+            "resolvedType": "String"
         },
         {
-            "description": "The width of the large ColorGradient.\n",
+            "description": "The vertical padding of the medium ColorGradient.\n",
             "commentRange": {
                 "start": 53,
                 "end": 54
             },
             "context": {
                 "type": "variable",
-                "name": "kendo-color-gradient-lg-width",
-                "value": "324px",
+                "name": "kendo-color-gradient-md-padding-y",
+                "value": "$kendo-color-gradient-spacer",
                 "scope": "default",
                 "line": {
                     "start": 55,
@@ -16113,14 +16113,176 @@
                 "path": "classic/scss/colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "324px",
+            "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": "classic/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": "classic/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": "classic/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": 66,
+                "end": 67
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-color-gradient-sm-width",
+                "value": "252px",
+                "scope": "default",
+                "line": {
+                    "start": 68,
+                    "end": 68
+                }
+            },
+            "group": [
+                "color-gradient"
+            ],
+            "access": "public",
+            "file": {
+                "path": "classic/scss/colorgradient/_variables.scss",
+                "name": "_variables.scss"
+            },
+            "resolvedValue": "252px",
+            "resolvedType": "Number"
+        },
+        {
+            "description": "The width of the medium ColorGradient.\n",
+            "commentRange": {
+                "start": 69,
+                "end": 70
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-color-gradient-md-width",
+                "value": "$kendo-color-gradient-width",
+                "scope": "default",
+                "line": {
+                    "start": 71,
+                    "end": 71
+                }
+            },
+            "group": [
+                "color-gradient"
+            ],
+            "access": "public",
+            "file": {
+                "path": "classic/scss/colorgradient/_variables.scss",
+                "name": "_variables.scss"
+            },
+            "resolvedValue": "272px",
+            "resolvedType": "Number"
+        },
+        {
+            "description": "The width of the large ColorGradient.\n",
+            "commentRange": {
+                "start": 72,
+                "end": 73
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-color-gradient-lg-width",
+                "value": "362px",
+                "scope": "default",
+                "line": {
+                    "start": 74,
+                    "end": 74
+                }
+            },
+            "group": [
+                "color-gradient"
+            ],
+            "access": "public",
+            "file": {
+                "path": "classic/scss/colorgradient/_variables.scss",
+                "name": "_variables.scss"
+            },
+            "resolvedValue": "362px",
             "resolvedType": "Number"
         },
         {
             "description": "The spacing between the sections of the small ColorGradient.\n",
             "commentRange": {
-                "start": 57,
-                "end": 58
+                "start": 76,
+                "end": 77
             },
             "context": {
                 "type": "variable",
@@ -16128,8 +16290,8 @@
                 "value": "$kendo-color-gradient-gap",
                 "scope": "default",
                 "line": {
-                    "start": 59,
-                    "end": 59
+                    "start": 78,
+                    "end": 78
                 }
             },
             "group": [
@@ -16146,8 +16308,8 @@
         {
             "description": "The spacing between the sections of the medium ColorGradient.\n",
             "commentRange": {
-                "start": 60,
-                "end": 61
+                "start": 79,
+                "end": 80
             },
             "context": {
                 "type": "variable",
@@ -16155,8 +16317,8 @@
                 "value": "$kendo-color-gradient-gap",
                 "scope": "default",
                 "line": {
-                    "start": 62,
-                    "end": 62
+                    "start": 81,
+                    "end": 81
                 }
             },
             "group": [
@@ -16173,8 +16335,8 @@
         {
             "description": "The spacing between the sections of the large ColorGradient.\n",
             "commentRange": {
-                "start": 63,
-                "end": 64
+                "start": 82,
+                "end": 83
             },
             "context": {
                 "type": "variable",
@@ -16182,8 +16344,8 @@
                 "value": "k-spacing(4.5)",
                 "scope": "default",
                 "line": {
-                    "start": 65,
-                    "end": 65
+                    "start": 84,
+                    "end": 84
                 }
             },
             "group": [
@@ -16200,8 +16362,8 @@
         {
             "description": "The border color of the focused ColorGradient.\n",
             "commentRange": {
-                "start": 67,
-                "end": 68
+                "start": 86,
+                "end": 87
             },
             "context": {
                 "type": "variable",
@@ -16209,8 +16371,8 @@
                 "value": "null",
                 "scope": "default",
                 "line": {
-                    "start": 69,
-                    "end": 69
+                    "start": 88,
+                    "end": 88
                 }
             },
             "group": [
@@ -16227,8 +16389,8 @@
         {
             "description": "The box shadow of the focused ColorGradient.\n",
             "commentRange": {
-                "start": 70,
-                "end": 71
+                "start": 89,
+                "end": 90
             },
             "context": {
                 "type": "variable",
@@ -16236,8 +16398,8 @@
                 "value": "k-elevation(3)",
                 "scope": "default",
                 "line": {
-                    "start": 72,
-                    "end": 72
+                    "start": 91,
+                    "end": 91
                 }
             },
             "group": [
@@ -16254,8 +16416,8 @@
         {
             "description": "The border radius of the ColorGradient canvas.\n",
             "commentRange": {
-                "start": 74,
-                "end": 75
+                "start": 93,
+                "end": 94
             },
             "context": {
                 "type": "variable",
@@ -16263,8 +16425,8 @@
                 "value": "k-border-radius(md)",
                 "scope": "default",
                 "line": {
-                    "start": 76,
-                    "end": 76
+                    "start": 95,
+                    "end": 95
                 }
             },
             "group": [
@@ -16281,8 +16443,8 @@
         {
             "description": "The spacing between the items of the ColorGradient canvas.\n",
             "commentRange": {
-                "start": 77,
-                "end": 78
+                "start": 96,
+                "end": 97
             },
             "context": {
                 "type": "variable",
@@ -16290,8 +16452,8 @@
                 "value": "$kendo-color-gradient-spacer",
                 "scope": "default",
                 "line": {
-                    "start": 79,
-                    "end": 79
+                    "start": 98,
+                    "end": 98
                 }
             },
             "group": [
@@ -16308,8 +16470,8 @@
         {
             "description": "The height the ColorGradient canvas hsv rectangle.\n",
             "commentRange": {
-                "start": 80,
-                "end": 81
+                "start": 99,
+                "end": 100
             },
             "context": {
                 "type": "variable",
@@ -16317,8 +16479,8 @@
                 "value": "180px",
                 "scope": "default",
                 "line": {
-                    "start": 82,
-                    "end": 82
+                    "start": 101,
+                    "end": 101
                 }
             },
             "group": [
@@ -16335,17 +16497,17 @@
         {
             "description": "The height the small ColorGradient canvas hsv rectangle.\n",
             "commentRange": {
-                "start": 83,
-                "end": 84
+                "start": 102,
+                "end": 103
             },
             "context": {
                 "type": "variable",
                 "name": "kendo-color-gradient-sm-canvas-rectangle-height",
-                "value": "182px",
+                "value": "$kendo-color-gradient-canvas-rectangle-height",
                 "scope": "default",
                 "line": {
-                    "start": 85,
-                    "end": 85
+                    "start": 104,
+                    "end": 104
                 }
             },
             "group": [
@@ -16356,14 +16518,14 @@
                 "path": "classic/scss/colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "182px",
+            "resolvedValue": "180px",
             "resolvedType": "Number"
         },
         {
             "description": "The height the medium ColorGradient canvas hsv rectangle.\n",
             "commentRange": {
-                "start": 86,
-                "end": 87
+                "start": 105,
+                "end": 106
             },
             "context": {
                 "type": "variable",
@@ -16371,8 +16533,8 @@
                 "value": "$kendo-color-gradient-canvas-rectangle-height",
                 "scope": "default",
                 "line": {
-                    "start": 88,
-                    "end": 88
+                    "start": 107,
+                    "end": 107
                 }
             },
             "group": [
@@ -16389,8 +16551,8 @@
         {
             "description": "The height the large ColorGradient canvas hsv rectangle.\n",
             "commentRange": {
-                "start": 89,
-                "end": 90
+                "start": 108,
+                "end": 109
             },
             "context": {
                 "type": "variable",
@@ -16398,8 +16560,8 @@
                 "value": "268px",
                 "scope": "default",
                 "line": {
-                    "start": 91,
-                    "end": 91
+                    "start": 110,
+                    "end": 110
                 }
             },
             "group": [
@@ -16416,8 +16578,8 @@
         {
             "description": "The spacing between the items of the small ColorGradient canvas.\n",
             "commentRange": {
-                "start": 93,
-                "end": 94
+                "start": 112,
+                "end": 113
             },
             "context": {
                 "type": "variable",
@@ -16425,8 +16587,8 @@
                 "value": "$kendo-color-gradient-canvas-gap",
                 "scope": "default",
                 "line": {
-                    "start": 95,
-                    "end": 95
+                    "start": 114,
+                    "end": 114
                 }
             },
             "group": [
@@ -16443,8 +16605,8 @@
         {
             "description": "The spacing between the items of the medium ColorGradient canvas.\n",
             "commentRange": {
-                "start": 96,
-                "end": 97
+                "start": 115,
+                "end": 116
             },
             "context": {
                 "type": "variable",
@@ -16452,8 +16614,8 @@
                 "value": "$kendo-color-gradient-canvas-gap",
                 "scope": "default",
                 "line": {
-                    "start": 98,
-                    "end": 98
+                    "start": 117,
+                    "end": 117
                 }
             },
             "group": [
@@ -16470,8 +16632,8 @@
         {
             "description": "The spacing between the items of the large ColorGradient canvas.\n",
             "commentRange": {
-                "start": 99,
-                "end": 100
+                "start": 118,
+                "end": 119
             },
             "context": {
                 "type": "variable",
@@ -16479,8 +16641,8 @@
                 "value": "k-spacing(4.5)",
                 "scope": "default",
                 "line": {
-                    "start": 101,
-                    "end": 101
+                    "start": 120,
+                    "end": 120
                 }
             },
             "group": [
@@ -16497,8 +16659,8 @@
         {
             "description": "The width of the ColorGradient slider.\n",
             "commentRange": {
-                "start": 103,
-                "end": 104
+                "start": 122,
+                "end": 123
             },
             "context": {
                 "type": "variable",
@@ -16506,8 +16668,8 @@
                 "value": "10px",
                 "scope": "default",
                 "line": {
-                    "start": 105,
-                    "end": 105
+                    "start": 124,
+                    "end": 124
                 }
             },
             "group": [
@@ -16524,8 +16686,8 @@
         {
             "description": "The border radius of the ColorGradient slider.\n",
             "commentRange": {
-                "start": 106,
-                "end": 107
+                "start": 125,
+                "end": 126
             },
             "context": {
                 "type": "variable",
@@ -16533,8 +16695,8 @@
                 "value": "10px",
                 "scope": "default",
                 "line": {
-                    "start": 108,
-                    "end": 108
+                    "start": 127,
+                    "end": 127
                 }
             },
             "group": [
@@ -16551,8 +16713,8 @@
         {
             "description": "The width of the border around the ColorGradient slider drag handle.\n",
             "commentRange": {
-                "start": 109,
-                "end": 110
+                "start": 128,
+                "end": 129
             },
             "context": {
                 "type": "variable",
@@ -16560,8 +16722,8 @@
                 "value": "3px",
                 "scope": "default",
                 "line": {
-                    "start": 111,
-                    "end": 111
+                    "start": 130,
+                    "end": 130
                 }
             },
             "group": [
@@ -16578,8 +16740,8 @@
         {
             "description": "The height of the ColorGradient vertical slider.\n",
             "commentRange": {
-                "start": 113,
-                "end": 114
+                "start": 132,
+                "end": 133
             },
             "context": {
                 "type": "variable",
@@ -16587,8 +16749,8 @@
                 "value": "180px",
                 "scope": "default",
                 "line": {
-                    "start": 115,
-                    "end": 115
+                    "start": 134,
+                    "end": 134
                 }
             },
             "group": [
@@ -16605,8 +16767,8 @@
         {
             "description": "The width of the ColorGradient horizontal slider.\n",
             "commentRange": {
-                "start": 116,
-                "end": 117
+                "start": 135,
+                "end": 136
             },
             "context": {
                 "type": "variable",
@@ -16614,8 +16776,8 @@
                 "value": "100%",
                 "scope": "default",
                 "line": {
-                    "start": 118,
-                    "end": 118
+                    "start": 137,
+                    "end": 137
                 }
             },
             "group": [
@@ -16632,8 +16794,8 @@
         {
             "description": "The background image of the ColorGradient alpha slider.\n",
             "commentRange": {
-                "start": 119,
-                "end": 120
+                "start": 138,
+                "end": 139
             },
             "context": {
                 "type": "variable",
@@ -16641,8 +16803,8 @@
                 "value": "\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC\"",
                 "scope": "default",
                 "line": {
-                    "start": 121,
-                    "end": 121
+                    "start": 140,
+                    "end": 140
                 }
             },
             "group": [
@@ -16659,17 +16821,17 @@
         {
             "description": "The height of the small ColorGradient vertical slider.\n",
             "commentRange": {
-                "start": 123,
-                "end": 124
+                "start": 142,
+                "end": 143
             },
             "context": {
                 "type": "variable",
                 "name": "kendo-color-gradient-sm-slider-vertical-size",
-                "value": "182px",
+                "value": "$kendo-color-gradient-slider-vertical-size",
                 "scope": "default",
                 "line": {
-                    "start": 125,
-                    "end": 125
+                    "start": 144,
+                    "end": 144
                 }
             },
             "group": [
@@ -16680,14 +16842,14 @@
                 "path": "classic/scss/colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "182px",
+            "resolvedValue": "180px",
             "resolvedType": "Number"
         },
         {
             "description": "The height of the medium ColorGradient vertical slider.\n",
             "commentRange": {
-                "start": 126,
-                "end": 127
+                "start": 145,
+                "end": 146
             },
             "context": {
                 "type": "variable",
@@ -16695,8 +16857,8 @@
                 "value": "$kendo-color-gradient-slider-vertical-size",
                 "scope": "default",
                 "line": {
-                    "start": 128,
-                    "end": 128
+                    "start": 147,
+                    "end": 147
                 }
             },
             "group": [
@@ -16713,8 +16875,8 @@
         {
             "description": "The height of the large ColorGradient vertical slider.\n",
             "commentRange": {
-                "start": 129,
-                "end": 130
+                "start": 148,
+                "end": 149
             },
             "context": {
                 "type": "variable",
@@ -16722,8 +16884,8 @@
                 "value": "268px",
                 "scope": "default",
                 "line": {
-                    "start": 131,
-                    "end": 131
+                    "start": 150,
+                    "end": 150
                 }
             },
             "group": [
@@ -16740,8 +16902,8 @@
         {
             "description": "The width of the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 133,
-                "end": 134
+                "start": 152,
+                "end": 153
             },
             "context": {
                 "type": "variable",
@@ -16749,8 +16911,8 @@
                 "value": "14px",
                 "scope": "default",
                 "line": {
-                    "start": 135,
-                    "end": 135
+                    "start": 154,
+                    "end": 154
                 }
             },
             "group": [
@@ -16767,8 +16929,8 @@
         {
             "description": "The height of the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 136,
-                "end": 137
+                "start": 155,
+                "end": 156
             },
             "context": {
                 "type": "variable",
@@ -16776,8 +16938,8 @@
                 "value": "14px",
                 "scope": "default",
                 "line": {
-                    "start": 138,
-                    "end": 138
+                    "start": 157,
+                    "end": 157
                 }
             },
             "group": [
@@ -16794,8 +16956,8 @@
         {
             "description": "The width of the border around the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 139,
-                "end": 140
+                "start": 158,
+                "end": 159
             },
             "context": {
                 "type": "variable",
@@ -16803,8 +16965,8 @@
                 "value": "1px",
                 "scope": "default",
                 "line": {
-                    "start": 141,
-                    "end": 141
+                    "start": 160,
+                    "end": 160
                 }
             },
             "group": [
@@ -16821,8 +16983,8 @@
         {
             "description": "The width of the outline around the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 142,
-                "end": 143
+                "start": 161,
+                "end": 162
             },
             "context": {
                 "type": "variable",
@@ -16830,8 +16992,8 @@
                 "value": "1px",
                 "scope": "default",
                 "line": {
-                    "start": 144,
-                    "end": 144
+                    "start": 163,
+                    "end": 163
                 }
             },
             "group": [
@@ -16848,8 +17010,8 @@
         {
             "description": "The border radius of the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 145,
-                "end": 146
+                "start": 164,
+                "end": 165
             },
             "context": {
                 "type": "variable",
@@ -16857,8 +17019,8 @@
                 "value": "50%",
                 "scope": "default",
                 "line": {
-                    "start": 147,
-                    "end": 147
+                    "start": 166,
+                    "end": 166
                 }
             },
             "group": [
@@ -16875,8 +17037,8 @@
         {
             "description": "The text color of the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 148,
-                "end": 149
+                "start": 167,
+                "end": 168
             },
             "context": {
                 "type": "variable",
@@ -16884,8 +17046,8 @@
                 "value": "null",
                 "scope": "default",
                 "line": {
-                    "start": 150,
-                    "end": 150
+                    "start": 169,
+                    "end": 169
                 }
             },
             "group": [
@@ -16902,8 +17064,8 @@
         {
             "description": "The background color of the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 151,
-                "end": 152
+                "start": 170,
+                "end": 171
             },
             "context": {
                 "type": "variable",
@@ -16911,8 +17073,8 @@
                 "value": "transparent",
                 "scope": "default",
                 "line": {
-                    "start": 153,
-                    "end": 153
+                    "start": 172,
+                    "end": 172
                 }
             },
             "group": [
@@ -16929,8 +17091,8 @@
         {
             "description": "The color of the border around the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 154,
-                "end": 155
+                "start": 173,
+                "end": 174
             },
             "context": {
                 "type": "variable",
@@ -16938,8 +17100,8 @@
                 "value": "rgba( white, .8)",
                 "scope": "default",
                 "line": {
-                    "start": 156,
-                    "end": 156
+                    "start": 175,
+                    "end": 175
                 }
             },
             "group": [
@@ -16956,8 +17118,8 @@
         {
             "description": "The focus color of the outline around the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 157,
-                "end": 158
+                "start": 176,
+                "end": 177
             },
             "context": {
                 "type": "variable",
@@ -16965,8 +17127,8 @@
                 "value": "$kendo-color-black",
                 "scope": "default",
                 "line": {
-                    "start": 159,
-                    "end": 159
+                    "start": 178,
+                    "end": 178
                 }
             },
             "group": [
@@ -16983,8 +17145,8 @@
         {
             "description": "The outline color of the outline around the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 160,
-                "end": 161
+                "start": 179,
+                "end": 180
             },
             "context": {
                 "type": "variable",
@@ -16992,8 +17154,8 @@
                 "value": "$kendo-color-black",
                 "scope": "default",
                 "line": {
-                    "start": 162,
-                    "end": 162
+                    "start": 181,
+                    "end": 181
                 }
             },
             "group": [
@@ -17010,8 +17172,8 @@
         {
             "description": "The box shadow of the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 163,
-                "end": 164
+                "start": 182,
+                "end": 183
             },
             "context": {
                 "type": "variable",
@@ -17019,8 +17181,8 @@
                 "value": "k-elevation(2)",
                 "scope": "default",
                 "line": {
-                    "start": 165,
-                    "end": 165
+                    "start": 184,
+                    "end": 184
                 }
             },
             "group": [
@@ -17037,8 +17199,8 @@
         {
             "description": "The vertical margin of the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 167,
-                "end": 168
+                "start": 186,
+                "end": 187
             },
             "context": {
                 "type": "variable",
@@ -17046,8 +17208,8 @@
                 "value": "- math.div( $kendo-color-gradient-draghandle-height, 2 )",
                 "scope": "default",
                 "line": {
-                    "start": 169,
-                    "end": 169
+                    "start": 188,
+                    "end": 188
                 }
             },
             "group": [
@@ -17064,8 +17226,8 @@
         {
             "description": "The horizontal margin of the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 170,
-                "end": 171
+                "start": 189,
+                "end": 190
             },
             "context": {
                 "type": "variable",
@@ -17073,8 +17235,8 @@
                 "value": "- math.div( $kendo-color-gradient-draghandle-width, 2 )",
                 "scope": "default",
                 "line": {
-                    "start": 172,
-                    "end": 172
+                    "start": 191,
+                    "end": 191
                 }
             },
             "group": [
@@ -17091,8 +17253,8 @@
         {
             "description": "The width of the ColorGradient input.\n",
             "commentRange": {
-                "start": 174,
-                "end": 175
+                "start": 193,
+                "end": 194
             },
             "context": {
                 "type": "variable",
@@ -17100,8 +17262,8 @@
                 "value": "46px",
                 "scope": "default",
                 "line": {
-                    "start": 176,
-                    "end": 176
+                    "start": 195,
+                    "end": 195
                 }
             },
             "group": [
@@ -17118,8 +17280,8 @@
         {
             "description": "The spacing between the ColorGradient inputs.\n",
             "commentRange": {
-                "start": 177,
-                "end": 178
+                "start": 196,
+                "end": 197
             },
             "context": {
                 "type": "variable",
@@ -17127,8 +17289,8 @@
                 "value": "k-spacing(2)",
                 "scope": "default",
                 "line": {
-                    "start": 179,
-                    "end": 179
+                    "start": 198,
+                    "end": 198
                 }
             },
             "group": [
@@ -17145,8 +17307,8 @@
         {
             "description": "The spacing between the ColorGradient inputs and their labels.\n",
             "commentRange": {
-                "start": 180,
-                "end": 181
+                "start": 199,
+                "end": 200
             },
             "context": {
                 "type": "variable",
@@ -17154,8 +17316,8 @@
                 "value": "calc( #{$kendo-color-gradient-spacer} / 3 )",
                 "scope": "default",
                 "line": {
-                    "start": 182,
-                    "end": 182
+                    "start": 201,
+                    "end": 201
                 }
             },
             "group": [
@@ -17172,8 +17334,8 @@
         {
             "description": "The text color of the ColorGradient input labels.\n",
             "commentRange": {
-                "start": 183,
-                "end": 184
+                "start": 202,
+                "end": 203
             },
             "context": {
                 "type": "variable",
@@ -17181,8 +17343,8 @@
                 "value": "$kendo-subtle-text",
                 "scope": "default",
                 "line": {
-                    "start": 185,
-                    "end": 185
+                    "start": 204,
+                    "end": 204
                 }
             },
             "group": [
@@ -17199,8 +17361,8 @@
         {
             "description": "The width of the small ColorGradient input.\n",
             "commentRange": {
-                "start": 187,
-                "end": 188
+                "start": 206,
+                "end": 207
             },
             "context": {
                 "type": "variable",
@@ -17208,8 +17370,8 @@
                 "value": "42px",
                 "scope": "default",
                 "line": {
-                    "start": 189,
-                    "end": 189
+                    "start": 208,
+                    "end": 208
                 }
             },
             "group": [
@@ -17226,8 +17388,8 @@
         {
             "description": "The width of the medium ColorGradient input.\n",
             "commentRange": {
-                "start": 190,
-                "end": 191
+                "start": 209,
+                "end": 210
             },
             "context": {
                 "type": "variable",
@@ -17235,8 +17397,8 @@
                 "value": "$kendo-color-gradient-input-width",
                 "scope": "default",
                 "line": {
-                    "start": 192,
-                    "end": 192
+                    "start": 211,
+                    "end": 211
                 }
             },
             "group": [
@@ -17253,17 +17415,17 @@
         {
             "description": "The width of the large ColorGradient input.\n",
             "commentRange": {
-                "start": 193,
-                "end": 194
+                "start": 212,
+                "end": 213
             },
             "context": {
                 "type": "variable",
                 "name": "kendo-color-gradient-lg-input-width",
-                "value": "62.5px",
+                "value": "62px",
                 "scope": "default",
                 "line": {
-                    "start": 195,
-                    "end": 195
+                    "start": 214,
+                    "end": 214
                 }
             },
             "group": [
@@ -17274,14 +17436,14 @@
                 "path": "classic/scss/colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "62.5px",
+            "resolvedValue": "62px",
             "resolvedType": "Number"
         },
         {
             "description": "The font weight of the ColorGradient contrast ratio text.\n",
             "commentRange": {
-                "start": 197,
-                "end": 198
+                "start": 216,
+                "end": 217
             },
             "context": {
                 "type": "variable",
@@ -17289,8 +17451,8 @@
                 "value": "var( --kendo-font-weight-bold, normal )",
                 "scope": "default",
                 "line": {
-                    "start": 199,
-                    "end": 199
+                    "start": 218,
+                    "end": 218
                 }
             },
             "group": [
@@ -17307,8 +17469,8 @@
         {
             "description": "The spacing between the items in the ColorGradient contrast tool.\n",
             "commentRange": {
-                "start": 200,
-                "end": 201
+                "start": 219,
+                "end": 220
             },
             "context": {
                 "type": "variable",
@@ -17316,8 +17478,8 @@
                 "value": "calc( #{$kendo-color-gradient-spacer} / 1.5 )",
                 "scope": "default",
                 "line": {
-                    "start": 202,
-                    "end": 202
+                    "start": 221,
+                    "end": 221
                 }
             },
             "group": [
@@ -17334,17 +17496,17 @@
         {
             "description": "The size map of the ColorGradient.\n",
             "commentRange": {
-                "start": 204,
-                "end": 205
+                "start": 223,
+                "end": 224
             },
             "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": 206,
-                    "end": 231
+                    "start": 225,
+                    "end": 256
                 }
             },
             "group": [
@@ -17355,16 +17517,18 @@
                 "path": "classic/scss/colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "(sm: (width: 226px, vertical-slider-height: 182px, rectangle-height: 182px, input-width: 42px, gap: var(--kendo-spacing-3, 0.75rem), canvas-gap: var(--kendo-spacing-3, 0.75rem)), md: (width: 272px, vertical-slider-height: 180px, rectangle-height: 180px, input-width: 46px, gap: var(--kendo-spacing-3, 0.75rem), canvas-gap: var(--kendo-spacing-3, 0.75rem)), lg: (width: 324px, vertical-slider-height: 268px, rectangle-height: 268px, input-width: 62.5px, gap: var(--kendo-spacing-4\\.5, 1.125rem), canvas-gap: var(--kendo-spacing-4\\.5, 1.125rem)))",
+            "resolvedValue": "(sm: (width: 252px, vertical-slider-height: 180px, rectangle-height: 180px, input-width: 42px, 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)), md: (width: 272px, vertical-slider-height: 180px, rectangle-height: 180px, input-width: 46px, 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: 362px, vertical-slider-height: 268px, rectangle-height: 268px, 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": "226px",
-                    "vertical-slider-height": "182px",
-                    "rectangle-height": "182px",
+                    "width": "252px",
+                    "vertical-slider-height": "180px",
+                    "rectangle-height": "180px",
                     "input-width": "42px",
                     "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)"
                 },
                 "md": {
                     "width": "272px",
@@ -17372,15 +17536,19 @@
                     "rectangle-height": "180px",
                     "input-width": "46px",
                     "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": "324px",
+                    "width": "362px",
                     "vertical-slider-height": "268px",
                     "rectangle-height": "268px",
-                    "input-width": "62.5px",
+                    "input-width": "62px",
                     "gap": "var(--kendo-spacing-4\\.5, 1.125rem)",
-                    "canvas-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)"
                 }
             }
         },
@@ -17527,7 +17695,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": {
@@ -17554,8 +17722,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,
@@ -17581,7 +17749,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": {
@@ -17608,7 +17776,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": {
@@ -17635,7 +17803,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": {
@@ -17662,8 +17830,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,
@@ -17771,7 +17939,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,
@@ -91885,8 +92053,8 @@
                 {
                     "description": "The color of the Chart grid lines (major).\n",
                     "commentRange": {
-                        "start": 102,
-                        "end": 103
+                        "start": 99,
+                        "end": 100
                     },
                     "context": {
                         "type": "variable",
@@ -91894,8 +92062,8 @@
                         "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ))",
                         "scope": "default",
                         "line": {
-                            "start": 104,
-                            "end": 104
+                            "start": 101,
+                            "end": 101
                         }
                     },
                     "group": [
@@ -91912,8 +92080,8 @@
                 {
                     "description": "The color of the Chart grid lines (minor).\n",
                     "commentRange": {
-                        "start": 106,
-                        "end": 107
+                        "start": 103,
+                        "end": 104
                     },
                     "context": {
                         "type": "variable",
@@ -91921,8 +92089,8 @@
                         "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 ))",
                         "scope": "default",
                         "line": {
-                            "start": 108,
-                            "end": 108
+                            "start": 105,
+                            "end": 105
                         }
                     },
                     "group": [
@@ -99680,15 +99848,15 @@
                     "resolvedType": "String"
                 },
                 {
-                    "description": "The width of the small ColorGradient.\n",
+                    "description": "The vertical padding of the small ColorGradient.\n",
                     "commentRange": {
                         "start": 47,
                         "end": 48
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-gradient-sm-width",
-                        "value": "226px",
+                        "name": "kendo-color-gradient-sm-padding-y",
+                        "value": "$kendo-color-gradient-spacer",
                         "scope": "default",
                         "line": {
                             "start": 49,
@@ -99703,19 +99871,19 @@
                         "path": "classic/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "226px",
-                    "resolvedType": "Number"
+                    "resolvedValue": "var(--kendo-spacing-3, 0.75rem)",
+                    "resolvedType": "String"
                 },
                 {
-                    "description": "The width of the medium ColorGradient.\n",
+                    "description": "The horizontal padding of the small ColorGradient.\n",
                     "commentRange": {
                         "start": 50,
                         "end": 51
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-gradient-md-width",
-                        "value": "$kendo-color-gradient-width",
+                        "name": "kendo-color-gradient-sm-padding-x",
+                        "value": "$kendo-color-gradient-padding-y",
                         "scope": "default",
                         "line": {
                             "start": 52,
@@ -99730,19 +99898,19 @@
                         "path": "classic/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "272px",
-                    "resolvedType": "Number"
+                    "resolvedValue": "var(--kendo-spacing-3, 0.75rem)",
+                    "resolvedType": "String"
                 },
                 {
-                    "description": "The width of the large ColorGradient.\n",
+                    "description": "The vertical padding of the medium ColorGradient.\n",
                     "commentRange": {
                         "start": 53,
                         "end": 54
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-gradient-lg-width",
-                        "value": "324px",
+                        "name": "kendo-color-gradient-md-padding-y",
+                        "value": "$kendo-color-gradient-spacer",
                         "scope": "default",
                         "line": {
                             "start": 55,
@@ -99757,14 +99925,176 @@
                         "path": "classic/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "324px",
+                    "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": "classic/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": "classic/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": "classic/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": 66,
+                        "end": 67
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-color-gradient-sm-width",
+                        "value": "252px",
+                        "scope": "default",
+                        "line": {
+                            "start": 68,
+                            "end": 68
+                        }
+                    },
+                    "group": [
+                        "color-gradient"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "classic/scss/colorgradient/_variables.scss",
+                        "name": "_variables.scss"
+                    },
+                    "resolvedValue": "252px",
+                    "resolvedType": "Number"
+                },
+                {
+                    "description": "The width of the medium ColorGradient.\n",
+                    "commentRange": {
+                        "start": 69,
+                        "end": 70
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-color-gradient-md-width",
+                        "value": "$kendo-color-gradient-width",
+                        "scope": "default",
+                        "line": {
+                            "start": 71,
+                            "end": 71
+                        }
+                    },
+                    "group": [
+                        "color-gradient"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "classic/scss/colorgradient/_variables.scss",
+                        "name": "_variables.scss"
+                    },
+                    "resolvedValue": "272px",
+                    "resolvedType": "Number"
+                },
+                {
+                    "description": "The width of the large ColorGradient.\n",
+                    "commentRange": {
+                        "start": 72,
+                        "end": 73
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-color-gradient-lg-width",
+                        "value": "362px",
+                        "scope": "default",
+                        "line": {
+                            "start": 74,
+                            "end": 74
+                        }
+                    },
+                    "group": [
+                        "color-gradient"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "classic/scss/colorgradient/_variables.scss",
+                        "name": "_variables.scss"
+                    },
+                    "resolvedValue": "362px",
                     "resolvedType": "Number"
                 },
                 {
                     "description": "The spacing between the sections of the small ColorGradient.\n",
                     "commentRange": {
-                        "start": 57,
-                        "end": 58
+                        "start": 76,
+                        "end": 77
                     },
                     "context": {
                         "type": "variable",
@@ -99772,8 +100102,8 @@
                         "value": "$kendo-color-gradient-gap",
                         "scope": "default",
                         "line": {
-                            "start": 59,
-                            "end": 59
+                            "start": 78,
+                            "end": 78
                         }
                     },
                     "group": [
@@ -99790,8 +100120,8 @@
                 {
                     "description": "The spacing between the sections of the medium ColorGradient.\n",
                     "commentRange": {
-                        "start": 60,
-                        "end": 61
+                        "start": 79,
+                        "end": 80
                     },
                     "context": {
                         "type": "variable",
@@ -99799,8 +100129,8 @@
                         "value": "$kendo-color-gradient-gap",
                         "scope": "default",
                         "line": {
-                            "start": 62,
-                            "end": 62
+                            "start": 81,
+                            "end": 81
                         }
                     },
                     "group": [
@@ -99817,8 +100147,8 @@
                 {
                     "description": "The spacing between the sections of the large ColorGradient.\n",
                     "commentRange": {
-                        "start": 63,
-                        "end": 64
+                        "start": 82,
+                        "end": 83
                     },
                     "context": {
                         "type": "variable",
@@ -99826,8 +100156,8 @@
                         "value": "k-spacing(4.5)",
                         "scope": "default",
                         "line": {
-                            "start": 65,
-                            "end": 65
+                            "start": 84,
+                            "end": 84
                         }
                     },
                     "group": [
@@ -99844,8 +100174,8 @@
                 {
                     "description": "The border color of the focused ColorGradient.\n",
                     "commentRange": {
-                        "start": 67,
-                        "end": 68
+                        "start": 86,
+                        "end": 87
                     },
                     "context": {
                         "type": "variable",
@@ -99853,8 +100183,8 @@
                         "value": "null",
                         "scope": "default",
                         "line": {
-                            "start": 69,
-                            "end": 69
+                            "start": 88,
+                            "end": 88
                         }
                     },
                     "group": [
@@ -99871,8 +100201,8 @@
                 {
                     "description": "The box shadow of the focused ColorGradient.\n",
                     "commentRange": {
-                        "start": 70,
-                        "end": 71
+                        "start": 89,
+                        "end": 90
                     },
                     "context": {
                         "type": "variable",
@@ -99880,8 +100210,8 @@
                         "value": "k-elevation(3)",
                         "scope": "default",
                         "line": {
-                            "start": 72,
-                            "end": 72
+                            "start": 91,
+                            "end": 91
                         }
                     },
                     "group": [
@@ -99898,8 +100228,8 @@
                 {
                     "description": "The border radius of the ColorGradient canvas.\n",
                     "commentRange": {
-                        "start": 74,
-                        "end": 75
+                        "start": 93,
+                        "end": 94
                     },
                     "context": {
                         "type": "variable",
@@ -99907,8 +100237,8 @@
                         "value": "k-border-radius(md)",
                         "scope": "default",
                         "line": {
-                            "start": 76,
-                            "end": 76
+                            "start": 95,
+                            "end": 95
                         }
                     },
                     "group": [
@@ -99925,8 +100255,8 @@
                 {
                     "description": "The spacing between the items of the ColorGradient canvas.\n",
                     "commentRange": {
-                        "start": 77,
-                        "end": 78
+                        "start": 96,
+                        "end": 97
                     },
                     "context": {
                         "type": "variable",
@@ -99934,8 +100264,8 @@
                         "value": "$kendo-color-gradient-spacer",
                         "scope": "default",
                         "line": {
-                            "start": 79,
-                            "end": 79
+                            "start": 98,
+                            "end": 98
                         }
                     },
                     "group": [
@@ -99952,8 +100282,8 @@
                 {
                     "description": "The height the ColorGradient canvas hsv rectangle.\n",
                     "commentRange": {
-                        "start": 80,
-                        "end": 81
+                        "start": 99,
+                        "end": 100
                     },
                     "context": {
                         "type": "variable",
@@ -99961,8 +100291,8 @@
                         "value": "180px",
                         "scope": "default",
                         "line": {
-                            "start": 82,
-                            "end": 82
+                            "start": 101,
+                            "end": 101
                         }
                     },
                     "group": [
@@ -99979,17 +100309,17 @@
                 {
                     "description": "The height the small ColorGradient canvas hsv rectangle.\n",
                     "commentRange": {
-                        "start": 83,
-                        "end": 84
+                        "start": 102,
+                        "end": 103
                     },
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-gradient-sm-canvas-rectangle-height",
-                        "value": "182px",
+                        "value": "$kendo-color-gradient-canvas-rectangle-height",
                         "scope": "default",
                         "line": {
-                            "start": 85,
-                            "end": 85
+                            "start": 104,
+                            "end": 104
                         }
                     },
                     "group": [
@@ -100000,14 +100330,14 @@
                         "path": "classic/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "182px",
+                    "resolvedValue": "180px",
                     "resolvedType": "Number"
                 },
                 {
                     "description": "The height the medium ColorGradient canvas hsv rectangle.\n",
                     "commentRange": {
-                        "start": 86,
-                        "end": 87
+                        "start": 105,
+                        "end": 106
                     },
                     "context": {
                         "type": "variable",
@@ -100015,8 +100345,8 @@
                         "value": "$kendo-color-gradient-canvas-rectangle-height",
                         "scope": "default",
                         "line": {
-                            "start": 88,
-                            "end": 88
+                            "start": 107,
+                            "end": 107
                         }
                     },
                     "group": [
@@ -100033,8 +100363,8 @@
                 {
                     "description": "The height the large ColorGradient canvas hsv rectangle.\n",
                     "commentRange": {
-                        "start": 89,
-                        "end": 90
+                        "start": 108,
+                        "end": 109
                     },
                     "context": {
                         "type": "variable",
@@ -100042,8 +100372,8 @@
                         "value": "268px",
                         "scope": "default",
                         "line": {
-                            "start": 91,
-                            "end": 91
+                            "start": 110,
+                            "end": 110
                         }
                     },
                     "group": [
@@ -100060,8 +100390,8 @@
                 {
                     "description": "The spacing between the items of the small ColorGradient canvas.\n",
                     "commentRange": {
-                        "start": 93,
-                        "end": 94
+                        "start": 112,
+                        "end": 113
                     },
                     "context": {
                         "type": "variable",
@@ -100069,8 +100399,8 @@
                         "value": "$kendo-color-gradient-canvas-gap",
                         "scope": "default",
                         "line": {
-                            "start": 95,
-                            "end": 95
+                            "start": 114,
+                            "end": 114
                         }
                     },
                     "group": [
@@ -100087,8 +100417,8 @@
                 {
                     "description": "The spacing between the items of the medium ColorGradient canvas.\n",
                     "commentRange": {
-                        "start": 96,
-                        "end": 97
+                        "start": 115,
+                        "end": 116
                     },
                     "context": {
                         "type": "variable",
@@ -100096,8 +100426,8 @@
                         "value": "$kendo-color-gradient-canvas-gap",
                         "scope": "default",
                         "line": {
-                            "start": 98,
-                            "end": 98
+                            "start": 117,
+                            "end": 117
                         }
                     },
                     "group": [
@@ -100114,8 +100444,8 @@
                 {
                     "description": "The spacing between the items of the large ColorGradient canvas.\n",
                     "commentRange": {
-                        "start": 99,
-                        "end": 100
+                        "start": 118,
+                        "end": 119
                     },
                     "context": {
                         "type": "variable",
@@ -100123,8 +100453,8 @@
                         "value": "k-spacing(4.5)",
                         "scope": "default",
                         "line": {
-                            "start": 101,
-                            "end": 101
+                            "start": 120,
+                            "end": 120
                         }
                     },
                     "group": [
@@ -100141,8 +100471,8 @@
                 {
                     "description": "The width of the ColorGradient slider.\n",
                     "commentRange": {
-                        "start": 103,
-                        "end": 104
+                        "start": 122,
+                        "end": 123
                     },
                     "context": {
                         "type": "variable",
@@ -100150,8 +100480,8 @@
                         "value": "10px",
                         "scope": "default",
                         "line": {
-                            "start": 105,
-                            "end": 105
+                            "start": 124,
+                            "end": 124
                         }
                     },
                     "group": [
@@ -100168,8 +100498,8 @@
                 {
                     "description": "The border radius of the ColorGradient slider.\n",
                     "commentRange": {
-                        "start": 106,
-                        "end": 107
+                        "start": 125,
+                        "end": 126
                     },
                     "context": {
                         "type": "variable",
@@ -100177,8 +100507,8 @@
                         "value": "10px",
                         "scope": "default",
                         "line": {
-                            "start": 108,
-                            "end": 108
+                            "start": 127,
+                            "end": 127
                         }
                     },
                     "group": [
@@ -100195,8 +100525,8 @@
                 {
                     "description": "The width of the border around the ColorGradient slider drag handle.\n",
                     "commentRange": {
-                        "start": 109,
-                        "end": 110
+                        "start": 128,
+                        "end": 129
                     },
                     "context": {
                         "type": "variable",
@@ -100204,8 +100534,8 @@
                         "value": "3px",
                         "scope": "default",
                         "line": {
-                            "start": 111,
-                            "end": 111
+                            "start": 130,
+                            "end": 130
                         }
                     },
                     "group": [
@@ -100222,8 +100552,8 @@
                 {
                     "description": "The height of the ColorGradient vertical slider.\n",
                     "commentRange": {
-                        "start": 113,
-                        "end": 114
+                        "start": 132,
+                        "end": 133
                     },
                     "context": {
                         "type": "variable",
@@ -100231,8 +100561,8 @@
                         "value": "180px",
                         "scope": "default",
                         "line": {
-                            "start": 115,
-                            "end": 115
+                            "start": 134,
+                            "end": 134
                         }
                     },
                     "group": [
@@ -100249,8 +100579,8 @@
                 {
                     "description": "The width of the ColorGradient horizontal slider.\n",
                     "commentRange": {
-                        "start": 116,
-                        "end": 117
+                        "start": 135,
+                        "end": 136
                     },
                     "context": {
                         "type": "variable",
@@ -100258,8 +100588,8 @@
                         "value": "100%",
                         "scope": "default",
                         "line": {
-                            "start": 118,
-                            "end": 118
+                            "start": 137,
+                            "end": 137
                         }
                     },
                     "group": [
@@ -100276,8 +100606,8 @@
                 {
                     "description": "The background image of the ColorGradient alpha slider.\n",
                     "commentRange": {
-                        "start": 119,
-                        "end": 120
+                        "start": 138,
+                        "end": 139
                     },
                     "context": {
                         "type": "variable",
@@ -100285,8 +100615,8 @@
                         "value": "\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC\"",
                         "scope": "default",
                         "line": {
-                            "start": 121,
-                            "end": 121
+                            "start": 140,
+                            "end": 140
                         }
                     },
                     "group": [
@@ -100303,17 +100633,17 @@
                 {
                     "description": "The height of the small ColorGradient vertical slider.\n",
                     "commentRange": {
-                        "start": 123,
-                        "end": 124
+                        "start": 142,
+                        "end": 143
                     },
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-gradient-sm-slider-vertical-size",
-                        "value": "182px",
+                        "value": "$kendo-color-gradient-slider-vertical-size",
                         "scope": "default",
                         "line": {
-                            "start": 125,
-                            "end": 125
+                            "start": 144,
+                            "end": 144
                         }
                     },
                     "group": [
@@ -100324,14 +100654,14 @@
                         "path": "classic/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "182px",
+                    "resolvedValue": "180px",
                     "resolvedType": "Number"
                 },
                 {
                     "description": "The height of the medium ColorGradient vertical slider.\n",
                     "commentRange": {
-                        "start": 126,
-                        "end": 127
+                        "start": 145,
+                        "end": 146
                     },
                     "context": {
                         "type": "variable",
@@ -100339,8 +100669,8 @@
                         "value": "$kendo-color-gradient-slider-vertical-size",
                         "scope": "default",
                         "line": {
-                            "start": 128,
-                            "end": 128
+                            "start": 147,
+                            "end": 147
                         }
                     },
                     "group": [
@@ -100357,8 +100687,8 @@
                 {
                     "description": "The height of the large ColorGradient vertical slider.\n",
                     "commentRange": {
-                        "start": 129,
-                        "end": 130
+                        "start": 148,
+                        "end": 149
                     },
                     "context": {
                         "type": "variable",
@@ -100366,8 +100696,8 @@
                         "value": "268px",
                         "scope": "default",
                         "line": {
-                            "start": 131,
-                            "end": 131
+                            "start": 150,
+                            "end": 150
                         }
                     },
                     "group": [
@@ -100384,8 +100714,8 @@
                 {
                     "description": "The width of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 133,
-                        "end": 134
+                        "start": 152,
+                        "end": 153
                     },
                     "context": {
                         "type": "variable",
@@ -100393,8 +100723,8 @@
                         "value": "14px",
                         "scope": "default",
                         "line": {
-                            "start": 135,
-                            "end": 135
+                            "start": 154,
+                            "end": 154
                         }
                     },
                     "group": [
@@ -100411,8 +100741,8 @@
                 {
                     "description": "The height of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 136,
-                        "end": 137
+                        "start": 155,
+                        "end": 156
                     },
                     "context": {
                         "type": "variable",
@@ -100420,8 +100750,8 @@
                         "value": "14px",
                         "scope": "default",
                         "line": {
-                            "start": 138,
-                            "end": 138
+                            "start": 157,
+                            "end": 157
                         }
                     },
                     "group": [
@@ -100438,8 +100768,8 @@
                 {
                     "description": "The width of the border around the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 139,
-                        "end": 140
+                        "start": 158,
+                        "end": 159
                     },
                     "context": {
                         "type": "variable",
@@ -100447,8 +100777,8 @@
                         "value": "1px",
                         "scope": "default",
                         "line": {
-                            "start": 141,
-                            "end": 141
+                            "start": 160,
+                            "end": 160
                         }
                     },
                     "group": [
@@ -100465,8 +100795,8 @@
                 {
                     "description": "The width of the outline around the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 142,
-                        "end": 143
+                        "start": 161,
+                        "end": 162
                     },
                     "context": {
                         "type": "variable",
@@ -100474,8 +100804,8 @@
                         "value": "1px",
                         "scope": "default",
                         "line": {
-                            "start": 144,
-                            "end": 144
+                            "start": 163,
+                            "end": 163
                         }
                     },
                     "group": [
@@ -100492,8 +100822,8 @@
                 {
                     "description": "The border radius of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 145,
-                        "end": 146
+                        "start": 164,
+                        "end": 165
                     },
                     "context": {
                         "type": "variable",
@@ -100501,8 +100831,8 @@
                         "value": "50%",
                         "scope": "default",
                         "line": {
-                            "start": 147,
-                            "end": 147
+                            "start": 166,
+                            "end": 166
                         }
                     },
                     "group": [
@@ -100519,8 +100849,8 @@
                 {
                     "description": "The text color of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 148,
-                        "end": 149
+                        "start": 167,
+                        "end": 168
                     },
                     "context": {
                         "type": "variable",
@@ -100528,8 +100858,8 @@
                         "value": "null",
                         "scope": "default",
                         "line": {
-                            "start": 150,
-                            "end": 150
+                            "start": 169,
+                            "end": 169
                         }
                     },
                     "group": [
@@ -100546,8 +100876,8 @@
                 {
                     "description": "The background color of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 151,
-                        "end": 152
+                        "start": 170,
+                        "end": 171
                     },
                     "context": {
                         "type": "variable",
@@ -100555,8 +100885,8 @@
                         "value": "transparent",
                         "scope": "default",
                         "line": {
-                            "start": 153,
-                            "end": 153
+                            "start": 172,
+                            "end": 172
                         }
                     },
                     "group": [
@@ -100573,8 +100903,8 @@
                 {
                     "description": "The color of the border around the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 154,
-                        "end": 155
+                        "start": 173,
+                        "end": 174
                     },
                     "context": {
                         "type": "variable",
@@ -100582,8 +100912,8 @@
                         "value": "rgba( white, .8)",
                         "scope": "default",
                         "line": {
-                            "start": 156,
-                            "end": 156
+                            "start": 175,
+                            "end": 175
                         }
                     },
                     "group": [
@@ -100600,8 +100930,8 @@
                 {
                     "description": "The focus color of the outline around the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 157,
-                        "end": 158
+                        "start": 176,
+                        "end": 177
                     },
                     "context": {
                         "type": "variable",
@@ -100609,8 +100939,8 @@
                         "value": "$kendo-color-black",
                         "scope": "default",
                         "line": {
-                            "start": 159,
-                            "end": 159
+                            "start": 178,
+                            "end": 178
                         }
                     },
                     "group": [
@@ -100627,8 +100957,8 @@
                 {
                     "description": "The outline color of the outline around the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 160,
-                        "end": 161
+                        "start": 179,
+                        "end": 180
                     },
                     "context": {
                         "type": "variable",
@@ -100636,8 +100966,8 @@
                         "value": "$kendo-color-black",
                         "scope": "default",
                         "line": {
-                            "start": 162,
-                            "end": 162
+                            "start": 181,
+                            "end": 181
                         }
                     },
                     "group": [
@@ -100654,8 +100984,8 @@
                 {
                     "description": "The box shadow of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 163,
-                        "end": 164
+                        "start": 182,
+                        "end": 183
                     },
                     "context": {
                         "type": "variable",
@@ -100663,8 +100993,8 @@
                         "value": "k-elevation(2)",
                         "scope": "default",
                         "line": {
-                            "start": 165,
-                            "end": 165
+                            "start": 184,
+                            "end": 184
                         }
                     },
                     "group": [
@@ -100681,8 +101011,8 @@
                 {
                     "description": "The vertical margin of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 167,
-                        "end": 168
+                        "start": 186,
+                        "end": 187
                     },
                     "context": {
                         "type": "variable",
@@ -100690,8 +101020,8 @@
                         "value": "- math.div( $kendo-color-gradient-draghandle-height, 2 )",
                         "scope": "default",
                         "line": {
-                            "start": 169,
-                            "end": 169
+                            "start": 188,
+                            "end": 188
                         }
                     },
                     "group": [
@@ -100708,8 +101038,8 @@
                 {
                     "description": "The horizontal margin of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 170,
-                        "end": 171
+                        "start": 189,
+                        "end": 190
                     },
                     "context": {
                         "type": "variable",
@@ -100717,8 +101047,8 @@
                         "value": "- math.div( $kendo-color-gradient-draghandle-width, 2 )",
                         "scope": "default",
                         "line": {
-                            "start": 172,
-                            "end": 172
+                            "start": 191,
+                            "end": 191
                         }
                     },
                     "group": [
@@ -100735,8 +101065,8 @@
                 {
                     "description": "The width of the ColorGradient input.\n",
                     "commentRange": {
-                        "start": 174,
-                        "end": 175
+                        "start": 193,
+                        "end": 194
                     },
                     "context": {
                         "type": "variable",
@@ -100744,8 +101074,8 @@
                         "value": "46px",
                         "scope": "default",
                         "line": {
-                            "start": 176,
-                            "end": 176
+                            "start": 195,
+                            "end": 195
                         }
                     },
                     "group": [
@@ -100762,8 +101092,8 @@
                 {
                     "description": "The spacing between the ColorGradient inputs.\n",
                     "commentRange": {
-                        "start": 177,
-                        "end": 178
+                        "start": 196,
+                        "end": 197
                     },
                     "context": {
                         "type": "variable",
@@ -100771,8 +101101,8 @@
                         "value": "k-spacing(2)",
                         "scope": "default",
                         "line": {
-                            "start": 179,
-                            "end": 179
+                            "start": 198,
+                            "end": 198
                         }
                     },
                     "group": [
@@ -100789,8 +101119,8 @@
                 {
                     "description": "The spacing between the ColorGradient inputs and their labels.\n",
                     "commentRange": {
-                        "start": 180,
-                        "end": 181
+                        "start": 199,
+                        "end": 200
                     },
                     "context": {
                         "type": "variable",
@@ -100798,8 +101128,8 @@
                         "value": "calc( #{$kendo-color-gradient-spacer} / 3 )",
                         "scope": "default",
                         "line": {
-                            "start": 182,
-                            "end": 182
+                            "start": 201,
+                            "end": 201
                         }
                     },
                     "group": [
@@ -100816,8 +101146,8 @@
                 {
                     "description": "The text color of the ColorGradient input labels.\n",
                     "commentRange": {
-                        "start": 183,
-                        "end": 184
+                        "start": 202,
+                        "end": 203
                     },
                     "context": {
                         "type": "variable",
@@ -100825,8 +101155,8 @@
                         "value": "$kendo-subtle-text",
                         "scope": "default",
                         "line": {
-                            "start": 185,
-                            "end": 185
+                            "start": 204,
+                            "end": 204
                         }
                     },
                     "group": [
@@ -100843,8 +101173,8 @@
                 {
                     "description": "The width of the small ColorGradient input.\n",
                     "commentRange": {
-                        "start": 187,
-                        "end": 188
+                        "start": 206,
+                        "end": 207
                     },
                     "context": {
                         "type": "variable",
@@ -100852,8 +101182,8 @@
                         "value": "42px",
                         "scope": "default",
                         "line": {
-                            "start": 189,
-                            "end": 189
+                            "start": 208,
+                            "end": 208
                         }
                     },
                     "group": [
@@ -100870,8 +101200,8 @@
                 {
                     "description": "The width of the medium ColorGradient input.\n",
                     "commentRange": {
-                        "start": 190,
-                        "end": 191
+                        "start": 209,
+                        "end": 210
                     },
                     "context": {
                         "type": "variable",
@@ -100879,8 +101209,8 @@
                         "value": "$kendo-color-gradient-input-width",
                         "scope": "default",
                         "line": {
-                            "start": 192,
-                            "end": 192
+                            "start": 211,
+                            "end": 211
                         }
                     },
                     "group": [
@@ -100897,17 +101227,17 @@
                 {
                     "description": "The width of the large ColorGradient input.\n",
                     "commentRange": {
-                        "start": 193,
-                        "end": 194
+                        "start": 212,
+                        "end": 213
                     },
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-gradient-lg-input-width",
-                        "value": "62.5px",
+                        "value": "62px",
                         "scope": "default",
                         "line": {
-                            "start": 195,
-                            "end": 195
+                            "start": 214,
+                            "end": 214
                         }
                     },
                     "group": [
@@ -100918,14 +101248,14 @@
                         "path": "classic/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "62.5px",
+                    "resolvedValue": "62px",
                     "resolvedType": "Number"
                 },
                 {
                     "description": "The font weight of the ColorGradient contrast ratio text.\n",
                     "commentRange": {
-                        "start": 197,
-                        "end": 198
+                        "start": 216,
+                        "end": 217
                     },
                     "context": {
                         "type": "variable",
@@ -100933,8 +101263,8 @@
                         "value": "var( --kendo-font-weight-bold, normal )",
                         "scope": "default",
                         "line": {
-                            "start": 199,
-                            "end": 199
+                            "start": 218,
+                            "end": 218
                         }
                     },
                     "group": [
@@ -100951,8 +101281,8 @@
                 {
                     "description": "The spacing between the items in the ColorGradient contrast tool.\n",
                     "commentRange": {
-                        "start": 200,
-                        "end": 201
+                        "start": 219,
+                        "end": 220
                     },
                     "context": {
                         "type": "variable",
@@ -100960,8 +101290,8 @@
                         "value": "calc( #{$kendo-color-gradient-spacer} / 1.5 )",
                         "scope": "default",
                         "line": {
-                            "start": 202,
-                            "end": 202
+                            "start": 221,
+                            "end": 221
                         }
                     },
                     "group": [
@@ -100978,17 +101308,17 @@
                 {
                     "description": "The size map of the ColorGradient.\n",
                     "commentRange": {
-                        "start": 204,
-                        "end": 205
+                        "start": 223,
+                        "end": 224
                     },
                     "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": 206,
-                            "end": 231
+                            "start": 225,
+                            "end": 256
                         }
                     },
                     "group": [
@@ -100999,16 +101329,18 @@
                         "path": "classic/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "(sm: (width: 226px, vertical-slider-height: 182px, rectangle-height: 182px, input-width: 42px, gap: var(--kendo-spacing-3, 0.75rem), canvas-gap: var(--kendo-spacing-3, 0.75rem)), md: (width: 272px, vertical-slider-height: 180px, rectangle-height: 180px, input-width: 46px, gap: var(--kendo-spacing-3, 0.75rem), canvas-gap: var(--kendo-spacing-3, 0.75rem)), lg: (width: 324px, vertical-slider-height: 268px, rectangle-height: 268px, input-width: 62.5px, gap: var(--kendo-spacing-4\\.5, 1.125rem), canvas-gap: var(--kendo-spacing-4\\.5, 1.125rem)))",
+                    "resolvedValue": "(sm: (width: 252px, vertical-slider-height: 180px, rectangle-height: 180px, input-width: 42px, 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)), md: (width: 272px, vertical-slider-height: 180px, rectangle-height: 180px, input-width: 46px, 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: 362px, vertical-slider-height: 268px, rectangle-height: 268px, 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": "226px",
-                            "vertical-slider-height": "182px",
-                            "rectangle-height": "182px",
+                            "width": "252px",
+                            "vertical-slider-height": "180px",
+                            "rectangle-height": "180px",
                             "input-width": "42px",
                             "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)"
                         },
                         "md": {
                             "width": "272px",
@@ -101016,15 +101348,19 @@
                             "rectangle-height": "180px",
                             "input-width": "46px",
                             "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": "324px",
+                            "width": "362px",
                             "vertical-slider-height": "268px",
                             "rectangle-height": "268px",
-                            "input-width": "62.5px",
+                            "input-width": "62px",
                             "gap": "var(--kendo-spacing-4\\.5, 1.125rem)",
-                            "canvas-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)"
                         }
                     }
                 }
@@ -101177,7 +101513,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": {
@@ -101204,8 +101540,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,
@@ -101231,7 +101567,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": {
@@ -101258,7 +101594,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": {
@@ -101285,7 +101621,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": {
@@ -101312,8 +101648,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,
@@ -101421,7 +101757,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,