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

package/dist/meta/sassdoc-data.json

@@ -18826,7 +18826,7 @@
             "context": {
                 "type": "variable",
                 "name": "kendo-color-editor-lg-min-width",
-                "value": "360px",
+                "value": "362px",
                 "scope": "default",
                 "line": {
                     "start": 20,
@@ -18841,7 +18841,7 @@
                 "path": "fluent/scss/coloreditor/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "360px",
+            "resolvedValue": "362px",
             "resolvedType": "Number"
         },
         {
@@ -20191,7 +20191,7 @@
                 "path": "fluent/scss/coloreditor/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "(sm: (min-width: 236px, header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-2, 0.5rem), views-padding-x: var(--kendo-spacing-2, 0.5rem), views-padding-y: var(--kendo-spacing-2, 0.5rem), preview-spacing: var(--kendo-spacing-1, 0.25rem), preview-width: 34px, preview-height: 12px), md: (min-width: 260px, header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-2, 0.5rem), views-padding-x: var(--kendo-spacing-2, 0.5rem), views-padding-y: var(--kendo-spacing-2, 0.5rem), preview-spacing: var(--kendo-spacing-1, 0.25rem), preview-width: 34px, preview-height: 14px), lg: (min-width: 360px, header-padding-x: var(--kendo-spacing-4, 1rem), header-padding-y: var(--kendo-spacing-4, 1rem), views-padding-x: var(--kendo-spacing-4, 1rem), views-padding-y: var(--kendo-spacing-4, 1rem), preview-spacing: var(--kendo-spacing-1, 0.25rem), preview-width: 34px, preview-height: 16px))",
+            "resolvedValue": "(sm: (min-width: 236px, header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-2, 0.5rem), views-padding-x: var(--kendo-spacing-2, 0.5rem), views-padding-y: var(--kendo-spacing-2, 0.5rem), preview-spacing: var(--kendo-spacing-1, 0.25rem), preview-width: 34px, preview-height: 12px), md: (min-width: 260px, header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-2, 0.5rem), views-padding-x: var(--kendo-spacing-2, 0.5rem), views-padding-y: var(--kendo-spacing-2, 0.5rem), preview-spacing: var(--kendo-spacing-1, 0.25rem), preview-width: 34px, preview-height: 14px), lg: (min-width: 362px, header-padding-x: var(--kendo-spacing-4, 1rem), header-padding-y: var(--kendo-spacing-4, 1rem), views-padding-x: var(--kendo-spacing-4, 1rem), views-padding-y: var(--kendo-spacing-4, 1rem), preview-spacing: var(--kendo-spacing-1, 0.25rem), preview-width: 34px, preview-height: 16px))",
             "resolvedType": "Map",
             "prettyValue": {
                 "sm": {
@@ -20215,7 +20215,7 @@
                     "preview-height": "14px"
                 },
                 "lg": {
-                    "min-width": "360px",
+                    "min-width": "362px",
                     "header-padding-x": "var(--kendo-spacing-4, 1rem)",
                     "header-padding-y": "var(--kendo-spacing-4, 1rem)",
                     "views-padding-x": "var(--kendo-spacing-4, 1rem)",
@@ -20605,15 +20605,15 @@
             "resolvedType": "String"
         },
         {
-            "description": "The width of the small ColorGradient.\n",
+            "description": "The vertical padding of the small ColorGradient.\n",
             "commentRange": {
                 "start": 50,
                 "end": 51
             },
             "context": {
                 "type": "variable",
-                "name": "kendo-color-gradient-sm-width",
-                "value": "226px",
+                "name": "kendo-color-gradient-sm-padding-y",
+                "value": "$kendo-color-gradient-padding-y",
                 "scope": "default",
                 "line": {
                     "start": 52,
@@ -20628,19 +20628,19 @@
                 "path": "fluent/scss/colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "226px",
-            "resolvedType": "Number"
+            "resolvedValue": "var(--kendo-spacing-4, 1rem)",
+            "resolvedType": "String"
         },
         {
-            "description": "The width of the medium ColorGradient.\n",
+            "description": "The horizontal padding of the small ColorGradient.\n",
             "commentRange": {
                 "start": 53,
                 "end": 54
             },
             "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-x",
                 "scope": "default",
                 "line": {
                     "start": 55,
@@ -20655,19 +20655,19 @@
                 "path": "fluent/scss/colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "260px",
-            "resolvedType": "Number"
+            "resolvedValue": "calc(var(--kendo-spacing-4, 1rem) / 2)",
+            "resolvedType": "Calculation"
         },
         {
-            "description": "The width of the large ColorGradient.\n",
+            "description": "The vertical padding of the medium ColorGradient.\n",
             "commentRange": {
                 "start": 56,
                 "end": 57
             },
             "context": {
                 "type": "variable",
-                "name": "kendo-color-gradient-lg-width",
-                "value": "360px",
+                "name": "kendo-color-gradient-md-padding-y",
+                "value": "$kendo-color-gradient-padding-y",
                 "scope": "default",
                 "line": {
                     "start": 58,
@@ -20682,14 +20682,176 @@
                 "path": "fluent/scss/colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "360px",
+            "resolvedValue": "var(--kendo-spacing-4, 1rem)",
+            "resolvedType": "String"
+        },
+        {
+            "description": "The horizontal padding of the medium ColorGradient.\n",
+            "commentRange": {
+                "start": 59,
+                "end": 60
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-color-gradient-md-padding-x",
+                "value": "$kendo-color-gradient-padding-x",
+                "scope": "default",
+                "line": {
+                    "start": 61,
+                    "end": 61
+                }
+            },
+            "group": [
+                "color-gradient"
+            ],
+            "access": "public",
+            "file": {
+                "path": "fluent/scss/colorgradient/_variables.scss",
+                "name": "_variables.scss"
+            },
+            "resolvedValue": "calc(var(--kendo-spacing-4, 1rem) / 2)",
+            "resolvedType": "Calculation"
+        },
+        {
+            "description": "The vertical padding of the large ColorGradient.\n",
+            "commentRange": {
+                "start": 62,
+                "end": 63
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-color-gradient-lg-padding-y",
+                "value": "k-spacing(4)",
+                "scope": "default",
+                "line": {
+                    "start": 64,
+                    "end": 64
+                }
+            },
+            "group": [
+                "color-gradient"
+            ],
+            "access": "public",
+            "file": {
+                "path": "fluent/scss/colorgradient/_variables.scss",
+                "name": "_variables.scss"
+            },
+            "resolvedValue": "var(--kendo-spacing-4, 1rem)",
+            "resolvedType": "String"
+        },
+        {
+            "description": "The horizontal padding of the large ColorGradient.\n",
+            "commentRange": {
+                "start": 65,
+                "end": 66
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-color-gradient-lg-padding-x",
+                "value": "k-spacing(4)",
+                "scope": "default",
+                "line": {
+                    "start": 67,
+                    "end": 67
+                }
+            },
+            "group": [
+                "color-gradient"
+            ],
+            "access": "public",
+            "file": {
+                "path": "fluent/scss/colorgradient/_variables.scss",
+                "name": "_variables.scss"
+            },
+            "resolvedValue": "var(--kendo-spacing-4, 1rem)",
+            "resolvedType": "String"
+        },
+        {
+            "description": "The width of the small ColorGradient.\n",
+            "commentRange": {
+                "start": 69,
+                "end": 70
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-color-gradient-sm-width",
+                "value": "236px",
+                "scope": "default",
+                "line": {
+                    "start": 71,
+                    "end": 71
+                }
+            },
+            "group": [
+                "color-gradient"
+            ],
+            "access": "public",
+            "file": {
+                "path": "fluent/scss/colorgradient/_variables.scss",
+                "name": "_variables.scss"
+            },
+            "resolvedValue": "236px",
+            "resolvedType": "Number"
+        },
+        {
+            "description": "The width of the medium ColorGradient.\n",
+            "commentRange": {
+                "start": 72,
+                "end": 73
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-color-gradient-md-width",
+                "value": "$kendo-color-gradient-width",
+                "scope": "default",
+                "line": {
+                    "start": 74,
+                    "end": 74
+                }
+            },
+            "group": [
+                "color-gradient"
+            ],
+            "access": "public",
+            "file": {
+                "path": "fluent/scss/colorgradient/_variables.scss",
+                "name": "_variables.scss"
+            },
+            "resolvedValue": "260px",
+            "resolvedType": "Number"
+        },
+        {
+            "description": "The width of the large ColorGradient.\n",
+            "commentRange": {
+                "start": 75,
+                "end": 76
+            },
+            "context": {
+                "type": "variable",
+                "name": "kendo-color-gradient-lg-width",
+                "value": "362px",
+                "scope": "default",
+                "line": {
+                    "start": 77,
+                    "end": 77
+                }
+            },
+            "group": [
+                "color-gradient"
+            ],
+            "access": "public",
+            "file": {
+                "path": "fluent/scss/colorgradient/_variables.scss",
+                "name": "_variables.scss"
+            },
+            "resolvedValue": "362px",
             "resolvedType": "Number"
         },
         {
             "description": "The spacing between the sections of the small ColorGradient.\n",
             "commentRange": {
-                "start": 60,
-                "end": 61
+                "start": 79,
+                "end": 80
             },
             "context": {
                 "type": "variable",
@@ -20697,8 +20859,8 @@
                 "value": "$kendo-color-gradient-spacing",
                 "scope": "default",
                 "line": {
-                    "start": 62,
-                    "end": 62
+                    "start": 81,
+                    "end": 81
                 }
             },
             "group": [
@@ -20715,8 +20877,8 @@
         {
             "description": "The spacing between the sections of the medium ColorGradient.\n",
             "commentRange": {
-                "start": 63,
-                "end": 64
+                "start": 82,
+                "end": 83
             },
             "context": {
                 "type": "variable",
@@ -20724,8 +20886,8 @@
                 "value": "$kendo-color-gradient-spacing",
                 "scope": "default",
                 "line": {
-                    "start": 65,
-                    "end": 65
+                    "start": 84,
+                    "end": 84
                 }
             },
             "group": [
@@ -20742,8 +20904,8 @@
         {
             "description": "The spacing between the sections of the large ColorGradient.\n",
             "commentRange": {
-                "start": 66,
-                "end": 67
+                "start": 85,
+                "end": 86
             },
             "context": {
                 "type": "variable",
@@ -20751,8 +20913,8 @@
                 "value": "k-spacing(4.5)",
                 "scope": "default",
                 "line": {
-                    "start": 68,
-                    "end": 68
+                    "start": 87,
+                    "end": 87
                 }
             },
             "group": [
@@ -20769,8 +20931,8 @@
         {
             "description": "The border color of the focused ColorGradient.\n",
             "commentRange": {
-                "start": 70,
-                "end": 71
+                "start": 89,
+                "end": 90
             },
             "context": {
                 "type": "variable",
@@ -20778,8 +20940,8 @@
                 "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 ))",
                 "scope": "default",
                 "line": {
-                    "start": 72,
-                    "end": 72
+                    "start": 91,
+                    "end": 91
                 }
             },
             "group": [
@@ -20796,8 +20958,8 @@
         {
             "description": "The box shadow of the focused ColorGradient.\n",
             "commentRange": {
-                "start": 73,
-                "end": 74
+                "start": 92,
+                "end": 93
             },
             "context": {
                 "type": "variable",
@@ -20805,8 +20967,8 @@
                 "value": "var( --kendo-box-shadow-depth-3, none )",
                 "scope": "default",
                 "line": {
-                    "start": 75,
-                    "end": 75
+                    "start": 94,
+                    "end": 94
                 }
             },
             "group": [
@@ -20823,8 +20985,8 @@
         {
             "description": "The width of the border around the ColorGradient canvas.\n",
             "commentRange": {
-                "start": 77,
-                "end": 78
+                "start": 96,
+                "end": 97
             },
             "context": {
                 "type": "variable",
@@ -20832,8 +20994,8 @@
                 "value": "0",
                 "scope": "default",
                 "line": {
-                    "start": 79,
-                    "end": 79
+                    "start": 98,
+                    "end": 98
                 }
             },
             "group": [
@@ -20850,8 +21012,8 @@
         {
             "description": "The border radius of the ColorGradient canvas.\n",
             "commentRange": {
-                "start": 80,
-                "end": 81
+                "start": 99,
+                "end": 100
             },
             "context": {
                 "type": "variable",
@@ -20859,8 +21021,8 @@
                 "value": "k-border-radius(md)",
                 "scope": "default",
                 "line": {
-                    "start": 82,
-                    "end": 82
+                    "start": 101,
+                    "end": 101
                 }
             },
             "group": [
@@ -20877,8 +21039,8 @@
         {
             "description": "The spacing between the items of the ColorGradient canvas.\n",
             "commentRange": {
-                "start": 83,
-                "end": 84
+                "start": 102,
+                "end": 103
             },
             "context": {
                 "type": "variable",
@@ -20886,8 +21048,8 @@
                 "value": "k-spacing(2)",
                 "scope": "default",
                 "line": {
-                    "start": 85,
-                    "end": 85
+                    "start": 104,
+                    "end": 104
                 }
             },
             "group": [
@@ -20904,8 +21066,8 @@
         {
             "description": "The height the ColorGradient canvas hsv rectangle.\n",
             "commentRange": {
-                "start": 86,
-                "end": 87
+                "start": 105,
+                "end": 106
             },
             "context": {
                 "type": "variable",
@@ -20913,8 +21075,8 @@
                 "value": "180px",
                 "scope": "default",
                 "line": {
-                    "start": 88,
-                    "end": 88
+                    "start": 107,
+                    "end": 107
                 }
             },
             "group": [
@@ -20931,8 +21093,8 @@
         {
             "description": "The height the small ColorGradient canvas hsv rectangle.\n",
             "commentRange": {
-                "start": 89,
-                "end": 90
+                "start": 108,
+                "end": 109
             },
             "context": {
                 "type": "variable",
@@ -20940,8 +21102,8 @@
                 "value": "164px",
                 "scope": "default",
                 "line": {
-                    "start": 91,
-                    "end": 91
+                    "start": 110,
+                    "end": 110
                 }
             },
             "group": [
@@ -20958,8 +21120,8 @@
         {
             "description": "The height the medium ColorGradient canvas hsv rectangle.\n",
             "commentRange": {
-                "start": 92,
-                "end": 93
+                "start": 111,
+                "end": 112
             },
             "context": {
                 "type": "variable",
@@ -20967,8 +21129,8 @@
                 "value": "$kendo-color-gradient-canvas-rectangle-height",
                 "scope": "default",
                 "line": {
-                    "start": 94,
-                    "end": 94
+                    "start": 113,
+                    "end": 113
                 }
             },
             "group": [
@@ -20985,8 +21147,8 @@
         {
             "description": "The height the large ColorGradient canvas hsv rectangle.\n",
             "commentRange": {
-                "start": 95,
-                "end": 96
+                "start": 114,
+                "end": 115
             },
             "context": {
                 "type": "variable",
@@ -20994,8 +21156,8 @@
                 "value": "256px",
                 "scope": "default",
                 "line": {
-                    "start": 97,
-                    "end": 97
+                    "start": 116,
+                    "end": 116
                 }
             },
             "group": [
@@ -21012,8 +21174,8 @@
         {
             "description": "The spacing between the items of the small ColorGradient canvas.\n",
             "commentRange": {
-                "start": 99,
-                "end": 100
+                "start": 118,
+                "end": 119
             },
             "context": {
                 "type": "variable",
@@ -21021,8 +21183,8 @@
                 "value": "$kendo-color-gradient-canvas-spacing",
                 "scope": "default",
                 "line": {
-                    "start": 101,
-                    "end": 101
+                    "start": 120,
+                    "end": 120
                 }
             },
             "group": [
@@ -21039,8 +21201,8 @@
         {
             "description": "The spacing between the items of the medium ColorGradient canvas.\n",
             "commentRange": {
-                "start": 102,
-                "end": 103
+                "start": 121,
+                "end": 122
             },
             "context": {
                 "type": "variable",
@@ -21048,8 +21210,8 @@
                 "value": "$kendo-color-gradient-canvas-spacing",
                 "scope": "default",
                 "line": {
-                    "start": 104,
-                    "end": 104
+                    "start": 123,
+                    "end": 123
                 }
             },
             "group": [
@@ -21066,8 +21228,8 @@
         {
             "description": "The spacing between the items of the large ColorGradient canvas.\n",
             "commentRange": {
-                "start": 105,
-                "end": 106
+                "start": 124,
+                "end": 125
             },
             "context": {
                 "type": "variable",
@@ -21075,8 +21237,8 @@
                 "value": "k-spacing(4)",
                 "scope": "default",
                 "line": {
-                    "start": 107,
-                    "end": 107
+                    "start": 126,
+                    "end": 126
                 }
             },
             "group": [
@@ -21093,8 +21255,8 @@
         {
             "description": "The border color of the ColorGradient canvas hsv rectangle.\n",
             "commentRange": {
-                "start": 109,
-                "end": 110
+                "start": 128,
+                "end": 129
             },
             "context": {
                 "type": "variable",
@@ -21102,8 +21264,8 @@
                 "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                 "scope": "default",
                 "line": {
-                    "start": 111,
-                    "end": 111
+                    "start": 130,
+                    "end": 130
                 }
             },
             "group": [
@@ -21120,8 +21282,8 @@
         {
             "description": "The box shadow of the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 112,
-                "end": 113
+                "start": 131,
+                "end": 132
             },
             "context": {
                 "type": "variable",
@@ -21129,8 +21291,8 @@
                 "value": "var( --kendo-box-shadow-depth-2, none )",
                 "scope": "default",
                 "line": {
-                    "start": 114,
-                    "end": 114
+                    "start": 133,
+                    "end": 133
                 }
             },
             "group": [
@@ -21147,8 +21309,8 @@
         {
             "description": "The width of the ColorGradient slider.\n",
             "commentRange": {
-                "start": 116,
-                "end": 117
+                "start": 135,
+                "end": 136
             },
             "context": {
                 "type": "variable",
@@ -21156,8 +21318,8 @@
                 "value": "20px",
                 "scope": "default",
                 "line": {
-                    "start": 118,
-                    "end": 118
+                    "start": 137,
+                    "end": 137
                 }
             },
             "group": [
@@ -21174,8 +21336,8 @@
         {
             "description": "The border radius of the ColorGradient slider.\n",
             "commentRange": {
-                "start": 119,
-                "end": 120
+                "start": 138,
+                "end": 139
             },
             "context": {
                 "type": "variable",
@@ -21183,8 +21345,8 @@
                 "value": "k-border-radius(md)",
                 "scope": "default",
                 "line": {
-                    "start": 121,
-                    "end": 121
+                    "start": 140,
+                    "end": 140
                 }
             },
             "group": [
@@ -21201,8 +21363,8 @@
         {
             "description": "The width of the border around the ColorGradient slider.\n",
             "commentRange": {
-                "start": 122,
-                "end": 123
+                "start": 141,
+                "end": 142
             },
             "context": {
                 "type": "variable",
@@ -21210,8 +21372,8 @@
                 "value": "if($kendo-enable-color-system, 0, 1px)",
                 "scope": "default",
                 "line": {
-                    "start": 124,
-                    "end": 124
+                    "start": 143,
+                    "end": 143
                 }
             },
             "group": [
@@ -21228,8 +21390,8 @@
         {
             "description": "The color of the border around the ColorGradient slider.\n",
             "commentRange": {
-                "start": 125,
-                "end": 126
+                "start": 144,
+                "end": 145
             },
             "context": {
                 "type": "variable",
@@ -21237,8 +21399,8 @@
                 "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                 "scope": "default",
                 "line": {
-                    "start": 127,
-                    "end": 127
+                    "start": 146,
+                    "end": 146
                 }
             },
             "group": [
@@ -21255,8 +21417,8 @@
         {
             "description": "The height of the ColorGradient vertical slider.\n",
             "commentRange": {
-                "start": 129,
-                "end": 130
+                "start": 148,
+                "end": 149
             },
             "context": {
                 "type": "variable",
@@ -21264,8 +21426,8 @@
                 "value": "180px",
                 "scope": "default",
                 "line": {
-                    "start": 131,
-                    "end": 131
+                    "start": 150,
+                    "end": 150
                 }
             },
             "group": [
@@ -21282,8 +21444,8 @@
         {
             "description": "The width of the ColorGradient horizontal slider.\n",
             "commentRange": {
-                "start": 132,
-                "end": 133
+                "start": 151,
+                "end": 152
             },
             "context": {
                 "type": "variable",
@@ -21291,8 +21453,8 @@
                 "value": "100%",
                 "scope": "default",
                 "line": {
-                    "start": 134,
-                    "end": 134
+                    "start": 153,
+                    "end": 153
                 }
             },
             "group": [
@@ -21309,8 +21471,8 @@
         {
             "description": "The background image of the ColorGradient alpha slider.\n",
             "commentRange": {
-                "start": 135,
-                "end": 136
+                "start": 154,
+                "end": 155
             },
             "context": {
                 "type": "variable",
@@ -21318,8 +21480,8 @@
                 "value": "\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC\"",
                 "scope": "default",
                 "line": {
-                    "start": 137,
-                    "end": 137
+                    "start": 156,
+                    "end": 156
                 }
             },
             "group": [
@@ -21336,8 +21498,8 @@
         {
             "description": "The height of the small ColorGradient vertical slider.\n",
             "commentRange": {
-                "start": 138,
-                "end": 139
+                "start": 157,
+                "end": 158
             },
             "context": {
                 "type": "variable",
@@ -21345,8 +21507,8 @@
                 "value": "164px",
                 "scope": "default",
                 "line": {
-                    "start": 140,
-                    "end": 140
+                    "start": 159,
+                    "end": 159
                 }
             },
             "group": [
@@ -21363,8 +21525,8 @@
         {
             "description": "The height of the medium ColorGradient vertical slider.\n",
             "commentRange": {
-                "start": 141,
-                "end": 142
+                "start": 160,
+                "end": 161
             },
             "context": {
                 "type": "variable",
@@ -21372,8 +21534,8 @@
                 "value": "$kendo-color-gradient-slider-vertical-size",
                 "scope": "default",
                 "line": {
-                    "start": 143,
-                    "end": 143
+                    "start": 162,
+                    "end": 162
                 }
             },
             "group": [
@@ -21390,8 +21552,8 @@
         {
             "description": "The height of the large ColorGradient vertical slider.\n",
             "commentRange": {
-                "start": 144,
-                "end": 145
+                "start": 163,
+                "end": 164
             },
             "context": {
                 "type": "variable",
@@ -21399,8 +21561,8 @@
                 "value": "256px",
                 "scope": "default",
                 "line": {
-                    "start": 146,
-                    "end": 146
+                    "start": 165,
+                    "end": 165
                 }
             },
             "group": [
@@ -21417,8 +21579,8 @@
         {
             "description": "The width of the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 148,
-                "end": 149
+                "start": 167,
+                "end": 168
             },
             "context": {
                 "type": "variable",
@@ -21426,8 +21588,8 @@
                 "value": "20px",
                 "scope": "default",
                 "line": {
-                    "start": 150,
-                    "end": 150
+                    "start": 169,
+                    "end": 169
                 }
             },
             "group": [
@@ -21444,8 +21606,8 @@
         {
             "description": "The height of the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 151,
-                "end": 152
+                "start": 170,
+                "end": 171
             },
             "context": {
                 "type": "variable",
@@ -21453,8 +21615,8 @@
                 "value": "20px",
                 "scope": "default",
                 "line": {
-                    "start": 153,
-                    "end": 153
+                    "start": 172,
+                    "end": 172
                 }
             },
             "group": [
@@ -21471,8 +21633,8 @@
         {
             "description": "The width of the border around the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 154,
-                "end": 155
+                "start": 173,
+                "end": 174
             },
             "context": {
                 "type": "variable",
@@ -21480,8 +21642,8 @@
                 "value": "2px",
                 "scope": "default",
                 "line": {
-                    "start": 156,
-                    "end": 156
+                    "start": 175,
+                    "end": 175
                 }
             },
             "group": [
@@ -21498,8 +21660,8 @@
         {
             "description": "The width of the outline around the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 157,
-                "end": 158
+                "start": 176,
+                "end": 177
             },
             "context": {
                 "type": "variable",
@@ -21507,8 +21669,8 @@
                 "value": "1px",
                 "scope": "default",
                 "line": {
-                    "start": 159,
-                    "end": 159
+                    "start": 178,
+                    "end": 178
                 }
             },
             "group": [
@@ -21525,8 +21687,8 @@
         {
             "description": "The color of the border around the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 160,
-                "end": 161
+                "start": 179,
+                "end": 180
             },
             "context": {
                 "type": "variable",
@@ -21534,8 +21696,8 @@
                 "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
                 "scope": "default",
                 "line": {
-                    "start": 162,
-                    "end": 162
+                    "start": 181,
+                    "end": 181
                 }
             },
             "group": [
@@ -21552,8 +21714,8 @@
         {
             "description": "The box shadow of the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 163,
-                "end": 164
+                "start": 182,
+                "end": 183
             },
             "context": {
                 "type": "variable",
@@ -21561,8 +21723,8 @@
                 "value": "var( --kendo-box-shadow-depth-2, none )",
                 "scope": "default",
                 "line": {
-                    "start": 165,
-                    "end": 165
+                    "start": 184,
+                    "end": 184
                 }
             },
             "group": [
@@ -21579,8 +21741,8 @@
         {
             "description": "The color of the border around the focused ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 166,
-                "end": 167
+                "start": 185,
+                "end": 186
             },
             "context": {
                 "type": "variable",
@@ -21588,8 +21750,8 @@
                 "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
                 "scope": "default",
                 "line": {
-                    "start": 168,
-                    "end": 168
+                    "start": 187,
+                    "end": 187
                 }
             },
             "group": [
@@ -21606,8 +21768,8 @@
         {
             "description": "The focus color of the outline around the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 169,
-                "end": 170
+                "start": 188,
+                "end": 189
             },
             "context": {
                 "type": "variable",
@@ -21615,8 +21777,8 @@
                 "value": "if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))",
                 "scope": "default",
                 "line": {
-                    "start": 171,
-                    "end": 171
+                    "start": 190,
+                    "end": 190
                 }
             },
             "group": [
@@ -21633,8 +21795,8 @@
         {
             "description": "The hover color of the outline around the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 172,
-                "end": 173
+                "start": 191,
+                "end": 192
             },
             "context": {
                 "type": "variable",
@@ -21642,8 +21804,8 @@
                 "value": "if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))",
                 "scope": "default",
                 "line": {
-                    "start": 174,
-                    "end": 174
+                    "start": 193,
+                    "end": 193
                 }
             },
             "group": [
@@ -21660,8 +21822,8 @@
         {
             "description": "The vertical offset of the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 176,
-                "end": 177
+                "start": 195,
+                "end": 196
             },
             "context": {
                 "type": "variable",
@@ -21669,8 +21831,8 @@
                 "value": "( -1 * math.div( $kendo-color-gradient-draghandle-height, 2 ) )",
                 "scope": "default",
                 "line": {
-                    "start": 178,
-                    "end": 178
+                    "start": 197,
+                    "end": 197
                 }
             },
             "group": [
@@ -21687,8 +21849,8 @@
         {
             "description": "The horizontal offset of the ColorGradient canvas drag handle.\n",
             "commentRange": {
-                "start": 179,
-                "end": 180
+                "start": 198,
+                "end": 199
             },
             "context": {
                 "type": "variable",
@@ -21696,8 +21858,8 @@
                 "value": "( -1 * math.div( $kendo-color-gradient-draghandle-width, 2 ) )",
                 "scope": "default",
                 "line": {
-                    "start": 181,
-                    "end": 181
+                    "start": 200,
+                    "end": 200
                 }
             },
             "group": [
@@ -21714,8 +21876,8 @@
         {
             "description": "The width of the ColorGradient input.\n",
             "commentRange": {
-                "start": 183,
-                "end": 184
+                "start": 202,
+                "end": 203
             },
             "context": {
                 "type": "variable",
@@ -21723,8 +21885,8 @@
                 "value": "48px",
                 "scope": "default",
                 "line": {
-                    "start": 185,
-                    "end": 185
+                    "start": 204,
+                    "end": 204
                 }
             },
             "group": [
@@ -21741,8 +21903,8 @@
         {
             "description": "The spacing between the ColorGradient inputs.\n",
             "commentRange": {
-                "start": 186,
-                "end": 187
+                "start": 205,
+                "end": 206
             },
             "context": {
                 "type": "variable",
@@ -21750,8 +21912,8 @@
                 "value": "calc( #{$kendo-color-gradient-spacer} / 4 )",
                 "scope": "default",
                 "line": {
-                    "start": 188,
-                    "end": 188
+                    "start": 207,
+                    "end": 207
                 }
             },
             "group": [
@@ -21768,8 +21930,8 @@
         {
             "description": "The font size of the ColorGradient input labels.\n",
             "commentRange": {
-                "start": 189,
-                "end": 190
+                "start": 208,
+                "end": 209
             },
             "context": {
                 "type": "variable",
@@ -21777,8 +21939,8 @@
                 "value": "var( --kendo-font-size-sm, inherit )",
                 "scope": "default",
                 "line": {
-                    "start": 191,
-                    "end": 191
+                    "start": 210,
+                    "end": 210
                 }
             },
             "group": [
@@ -21795,8 +21957,8 @@
         {
             "description": "The spacing between the ColorGradient inputs and their labels.\n",
             "commentRange": {
-                "start": 192,
-                "end": 193
+                "start": 211,
+                "end": 212
             },
             "context": {
                 "type": "variable",
@@ -21804,8 +21966,8 @@
                 "value": "calc( #{$kendo-color-gradient-spacer} / 4 )",
                 "scope": "default",
                 "line": {
-                    "start": 194,
-                    "end": 194
+                    "start": 213,
+                    "end": 213
                 }
             },
             "group": [
@@ -21822,8 +21984,8 @@
         {
             "description": "The text color of the ColorGradient input labels.\n",
             "commentRange": {
-                "start": 195,
-                "end": 196
+                "start": 214,
+                "end": 215
             },
             "context": {
                 "type": "variable",
@@ -21831,8 +21993,8 @@
                 "value": "var( --kendo-subtle-text, inherit )",
                 "scope": "default",
                 "line": {
-                    "start": 197,
-                    "end": 197
+                    "start": 216,
+                    "end": 216
                 }
             },
             "group": [
@@ -21849,17 +22011,17 @@
         {
             "description": "The width of the small ColorGradient input.\n",
             "commentRange": {
-                "start": 199,
-                "end": 200
+                "start": 218,
+                "end": 219
             },
             "context": {
                 "type": "variable",
                 "name": "kendo-color-gradient-sm-input-width",
-                "value": "43.5px",
+                "value": "43px",
                 "scope": "default",
                 "line": {
-                    "start": 201,
-                    "end": 201
+                    "start": 220,
+                    "end": 220
                 }
             },
             "group": [
@@ -21870,14 +22032,14 @@
                 "path": "fluent/scss/colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "43.5px",
+            "resolvedValue": "43px",
             "resolvedType": "Number"
         },
         {
             "description": "The width of the medium ColorGradient input.\n",
             "commentRange": {
-                "start": 202,
-                "end": 203
+                "start": 221,
+                "end": 222
             },
             "context": {
                 "type": "variable",
@@ -21885,8 +22047,8 @@
                 "value": "$kendo-color-gradient-input-width",
                 "scope": "default",
                 "line": {
-                    "start": 204,
-                    "end": 204
+                    "start": 223,
+                    "end": 223
                 }
             },
             "group": [
@@ -21903,17 +22065,17 @@
         {
             "description": "The width of the large ColorGradient input.\n",
             "commentRange": {
-                "start": 205,
-                "end": 206
+                "start": 224,
+                "end": 225
             },
             "context": {
                 "type": "variable",
                 "name": "kendo-color-gradient-lg-input-width",
-                "value": "50.5px",
+                "value": "68px",
                 "scope": "default",
                 "line": {
-                    "start": 207,
-                    "end": 207
+                    "start": 226,
+                    "end": 226
                 }
             },
             "group": [
@@ -21924,14 +22086,14 @@
                 "path": "fluent/scss/colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "50.5px",
+            "resolvedValue": "68px",
             "resolvedType": "Number"
         },
         {
             "description": "The font weight of the ColorGradient contrast ratio text.\n",
             "commentRange": {
-                "start": 209,
-                "end": 210
+                "start": 228,
+                "end": 229
             },
             "context": {
                 "type": "variable",
@@ -21939,8 +22101,8 @@
                 "value": "var( --kendo-font-weight-bold, normal )",
                 "scope": "default",
                 "line": {
-                    "start": 211,
-                    "end": 211
+                    "start": 230,
+                    "end": 230
                 }
             },
             "group": [
@@ -21957,8 +22119,8 @@
         {
             "description": "The spacing between the items in the ColorGradient contrast tool.\n",
             "commentRange": {
-                "start": 212,
-                "end": 213
+                "start": 231,
+                "end": 232
             },
             "context": {
                 "type": "variable",
@@ -21966,8 +22128,8 @@
                 "value": "calc( #{$kendo-color-gradient-spacer} / 1.5 )",
                 "scope": "default",
                 "line": {
-                    "start": 214,
-                    "end": 214
+                    "start": 233,
+                    "end": 233
                 }
             },
             "group": [
@@ -21984,17 +22146,17 @@
         {
             "description": "The size map of the ColorGradient.\n",
             "commentRange": {
-                "start": 216,
-                "end": 217
+                "start": 235,
+                "end": 236
             },
             "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        spacing: $kendo-color-gradient-sm-spacing,\n        canvas-spacing: $kendo-color-gradient-sm-canvas-spacing\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        spacing: $kendo-color-gradient-md-spacing,\n        canvas-spacing: $kendo-color-gradient-md-canvas-spacing\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        spacing: $kendo-color-gradient-lg-spacing,\n        canvas-spacing: $kendo-color-gradient-lg-canvas-spacing\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        spacing: $kendo-color-gradient-sm-spacing,\n        canvas-spacing: $kendo-color-gradient-sm-canvas-spacing,\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        spacing: $kendo-color-gradient-md-spacing,\n        canvas-spacing: $kendo-color-gradient-md-canvas-spacing,\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        spacing: $kendo-color-gradient-lg-spacing,\n        canvas-spacing: $kendo-color-gradient-lg-canvas-spacing,\n        padding-x: $kendo-color-gradient-lg-padding-x,\n        padding-y: $kendo-color-gradient-lg-padding-y\n    )\n)",
                 "scope": "default",
                 "line": {
-                    "start": 218,
-                    "end": 243
+                    "start": 237,
+                    "end": 268
                 }
             },
             "group": [
@@ -22005,16 +22167,18 @@
                 "path": "fluent/scss/colorgradient/_variables.scss",
                 "name": "_variables.scss"
             },
-            "resolvedValue": "(sm: (width: 226px, vertical-slider-height: 164px, rectangle-height: 164px, input-width: 43.5px, spacing: var(--kendo-spacing-4, 1rem), canvas-spacing: var(--kendo-spacing-2, 0.5rem)), md: (width: 260px, vertical-slider-height: 180px, rectangle-height: 180px, input-width: 48px, spacing: var(--kendo-spacing-4, 1rem), canvas-spacing: var(--kendo-spacing-2, 0.5rem)), lg: (width: 360px, vertical-slider-height: 256px, rectangle-height: 256px, input-width: 50.5px, spacing: var(--kendo-spacing-4\\.5, 1.125rem), canvas-spacing: var(--kendo-spacing-4, 1rem)))",
+            "resolvedValue": "(sm: (width: 236px, vertical-slider-height: 164px, rectangle-height: 164px, input-width: 43px, spacing: var(--kendo-spacing-4, 1rem), canvas-spacing: var(--kendo-spacing-2, 0.5rem), padding-x: calc(var(--kendo-spacing-4, 1rem) / 2), padding-y: var(--kendo-spacing-4, 1rem)), md: (width: 260px, vertical-slider-height: 180px, rectangle-height: 180px, input-width: 48px, spacing: var(--kendo-spacing-4, 1rem), canvas-spacing: var(--kendo-spacing-2, 0.5rem), padding-x: calc(var(--kendo-spacing-4, 1rem) / 2), padding-y: var(--kendo-spacing-4, 1rem)), lg: (width: 362px, vertical-slider-height: 256px, rectangle-height: 256px, input-width: 68px, spacing: var(--kendo-spacing-4\\.5, 1.125rem), canvas-spacing: var(--kendo-spacing-4, 1rem), padding-x: var(--kendo-spacing-4, 1rem), padding-y: var(--kendo-spacing-4, 1rem)))",
             "resolvedType": "Map",
             "prettyValue": {
                 "sm": {
-                    "width": "226px",
+                    "width": "236px",
                     "vertical-slider-height": "164px",
                     "rectangle-height": "164px",
-                    "input-width": "43.5px",
+                    "input-width": "43px",
                     "spacing": "var(--kendo-spacing-4, 1rem)",
-                    "canvas-spacing": "var(--kendo-spacing-2, 0.5rem)"
+                    "canvas-spacing": "var(--kendo-spacing-2, 0.5rem)",
+                    "padding-x": "calc(var(--kendo-spacing-4, 1rem) / 2)",
+                    "padding-y": "var(--kendo-spacing-4, 1rem)"
                 },
                 "md": {
                     "width": "260px",
@@ -22022,15 +22186,19 @@
                     "rectangle-height": "180px",
                     "input-width": "48px",
                     "spacing": "var(--kendo-spacing-4, 1rem)",
-                    "canvas-spacing": "var(--kendo-spacing-2, 0.5rem)"
+                    "canvas-spacing": "var(--kendo-spacing-2, 0.5rem)",
+                    "padding-x": "calc(var(--kendo-spacing-4, 1rem) / 2)",
+                    "padding-y": "var(--kendo-spacing-4, 1rem)"
                 },
                 "lg": {
-                    "width": "360px",
+                    "width": "362px",
                     "vertical-slider-height": "256px",
                     "rectangle-height": "256px",
-                    "input-width": "50.5px",
+                    "input-width": "68px",
                     "spacing": "var(--kendo-spacing-4\\.5, 1.125rem)",
-                    "canvas-spacing": "var(--kendo-spacing-4, 1rem)"
+                    "canvas-spacing": "var(--kendo-spacing-4, 1rem)",
+                    "padding-x": "var(--kendo-spacing-4, 1rem)",
+                    "padding-y": "var(--kendo-spacing-4, 1rem)"
                 }
             }
         },
@@ -22258,7 +22426,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": {
@@ -22285,8 +22453,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": 34,
@@ -22312,7 +22480,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": {
@@ -22339,7 +22507,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": {
@@ -22366,7 +22534,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": {
@@ -22393,8 +22561,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": 46,
@@ -22610,7 +22778,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": 72,
@@ -114944,7 +115112,7 @@
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-editor-lg-min-width",
-                        "value": "360px",
+                        "value": "362px",
                         "scope": "default",
                         "line": {
                             "start": 20,
@@ -114959,7 +115127,7 @@
                         "path": "fluent/scss/coloreditor/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "360px",
+                    "resolvedValue": "362px",
                     "resolvedType": "Number"
                 },
                 {
@@ -116309,7 +116477,7 @@
                         "path": "fluent/scss/coloreditor/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "(sm: (min-width: 236px, header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-2, 0.5rem), views-padding-x: var(--kendo-spacing-2, 0.5rem), views-padding-y: var(--kendo-spacing-2, 0.5rem), preview-spacing: var(--kendo-spacing-1, 0.25rem), preview-width: 34px, preview-height: 12px), md: (min-width: 260px, header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-2, 0.5rem), views-padding-x: var(--kendo-spacing-2, 0.5rem), views-padding-y: var(--kendo-spacing-2, 0.5rem), preview-spacing: var(--kendo-spacing-1, 0.25rem), preview-width: 34px, preview-height: 14px), lg: (min-width: 360px, header-padding-x: var(--kendo-spacing-4, 1rem), header-padding-y: var(--kendo-spacing-4, 1rem), views-padding-x: var(--kendo-spacing-4, 1rem), views-padding-y: var(--kendo-spacing-4, 1rem), preview-spacing: var(--kendo-spacing-1, 0.25rem), preview-width: 34px, preview-height: 16px))",
+                    "resolvedValue": "(sm: (min-width: 236px, header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-2, 0.5rem), views-padding-x: var(--kendo-spacing-2, 0.5rem), views-padding-y: var(--kendo-spacing-2, 0.5rem), preview-spacing: var(--kendo-spacing-1, 0.25rem), preview-width: 34px, preview-height: 12px), md: (min-width: 260px, header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-2, 0.5rem), views-padding-x: var(--kendo-spacing-2, 0.5rem), views-padding-y: var(--kendo-spacing-2, 0.5rem), preview-spacing: var(--kendo-spacing-1, 0.25rem), preview-width: 34px, preview-height: 14px), lg: (min-width: 362px, header-padding-x: var(--kendo-spacing-4, 1rem), header-padding-y: var(--kendo-spacing-4, 1rem), views-padding-x: var(--kendo-spacing-4, 1rem), views-padding-y: var(--kendo-spacing-4, 1rem), preview-spacing: var(--kendo-spacing-1, 0.25rem), preview-width: 34px, preview-height: 16px))",
                     "resolvedType": "Map",
                     "prettyValue": {
                         "sm": {
@@ -116333,7 +116501,7 @@
                             "preview-height": "14px"
                         },
                         "lg": {
-                            "min-width": "360px",
+                            "min-width": "362px",
                             "header-padding-x": "var(--kendo-spacing-4, 1rem)",
                             "header-padding-y": "var(--kendo-spacing-4, 1rem)",
                             "views-padding-x": "var(--kendo-spacing-4, 1rem)",
@@ -116729,15 +116897,15 @@
                     "resolvedType": "String"
                 },
                 {
-                    "description": "The width of the small ColorGradient.\n",
+                    "description": "The vertical padding of the small ColorGradient.\n",
                     "commentRange": {
                         "start": 50,
                         "end": 51
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-gradient-sm-width",
-                        "value": "226px",
+                        "name": "kendo-color-gradient-sm-padding-y",
+                        "value": "$kendo-color-gradient-padding-y",
                         "scope": "default",
                         "line": {
                             "start": 52,
@@ -116752,19 +116920,19 @@
                         "path": "fluent/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "226px",
-                    "resolvedType": "Number"
+                    "resolvedValue": "var(--kendo-spacing-4, 1rem)",
+                    "resolvedType": "String"
                 },
                 {
-                    "description": "The width of the medium ColorGradient.\n",
+                    "description": "The horizontal padding of the small ColorGradient.\n",
                     "commentRange": {
                         "start": 53,
                         "end": 54
                     },
                     "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-x",
                         "scope": "default",
                         "line": {
                             "start": 55,
@@ -116779,19 +116947,19 @@
                         "path": "fluent/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "260px",
-                    "resolvedType": "Number"
+                    "resolvedValue": "calc(var(--kendo-spacing-4, 1rem) / 2)",
+                    "resolvedType": "Calculation"
                 },
                 {
-                    "description": "The width of the large ColorGradient.\n",
+                    "description": "The vertical padding of the medium ColorGradient.\n",
                     "commentRange": {
                         "start": 56,
                         "end": 57
                     },
                     "context": {
                         "type": "variable",
-                        "name": "kendo-color-gradient-lg-width",
-                        "value": "360px",
+                        "name": "kendo-color-gradient-md-padding-y",
+                        "value": "$kendo-color-gradient-padding-y",
                         "scope": "default",
                         "line": {
                             "start": 58,
@@ -116806,14 +116974,176 @@
                         "path": "fluent/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "360px",
+                    "resolvedValue": "var(--kendo-spacing-4, 1rem)",
+                    "resolvedType": "String"
+                },
+                {
+                    "description": "The horizontal padding of the medium ColorGradient.\n",
+                    "commentRange": {
+                        "start": 59,
+                        "end": 60
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-color-gradient-md-padding-x",
+                        "value": "$kendo-color-gradient-padding-x",
+                        "scope": "default",
+                        "line": {
+                            "start": 61,
+                            "end": 61
+                        }
+                    },
+                    "group": [
+                        "color-gradient"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "fluent/scss/colorgradient/_variables.scss",
+                        "name": "_variables.scss"
+                    },
+                    "resolvedValue": "calc(var(--kendo-spacing-4, 1rem) / 2)",
+                    "resolvedType": "Calculation"
+                },
+                {
+                    "description": "The vertical padding of the large ColorGradient.\n",
+                    "commentRange": {
+                        "start": 62,
+                        "end": 63
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-color-gradient-lg-padding-y",
+                        "value": "k-spacing(4)",
+                        "scope": "default",
+                        "line": {
+                            "start": 64,
+                            "end": 64
+                        }
+                    },
+                    "group": [
+                        "color-gradient"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "fluent/scss/colorgradient/_variables.scss",
+                        "name": "_variables.scss"
+                    },
+                    "resolvedValue": "var(--kendo-spacing-4, 1rem)",
+                    "resolvedType": "String"
+                },
+                {
+                    "description": "The horizontal padding of the large ColorGradient.\n",
+                    "commentRange": {
+                        "start": 65,
+                        "end": 66
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-color-gradient-lg-padding-x",
+                        "value": "k-spacing(4)",
+                        "scope": "default",
+                        "line": {
+                            "start": 67,
+                            "end": 67
+                        }
+                    },
+                    "group": [
+                        "color-gradient"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "fluent/scss/colorgradient/_variables.scss",
+                        "name": "_variables.scss"
+                    },
+                    "resolvedValue": "var(--kendo-spacing-4, 1rem)",
+                    "resolvedType": "String"
+                },
+                {
+                    "description": "The width of the small ColorGradient.\n",
+                    "commentRange": {
+                        "start": 69,
+                        "end": 70
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-color-gradient-sm-width",
+                        "value": "236px",
+                        "scope": "default",
+                        "line": {
+                            "start": 71,
+                            "end": 71
+                        }
+                    },
+                    "group": [
+                        "color-gradient"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "fluent/scss/colorgradient/_variables.scss",
+                        "name": "_variables.scss"
+                    },
+                    "resolvedValue": "236px",
+                    "resolvedType": "Number"
+                },
+                {
+                    "description": "The width of the medium ColorGradient.\n",
+                    "commentRange": {
+                        "start": 72,
+                        "end": 73
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-color-gradient-md-width",
+                        "value": "$kendo-color-gradient-width",
+                        "scope": "default",
+                        "line": {
+                            "start": 74,
+                            "end": 74
+                        }
+                    },
+                    "group": [
+                        "color-gradient"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "fluent/scss/colorgradient/_variables.scss",
+                        "name": "_variables.scss"
+                    },
+                    "resolvedValue": "260px",
+                    "resolvedType": "Number"
+                },
+                {
+                    "description": "The width of the large ColorGradient.\n",
+                    "commentRange": {
+                        "start": 75,
+                        "end": 76
+                    },
+                    "context": {
+                        "type": "variable",
+                        "name": "kendo-color-gradient-lg-width",
+                        "value": "362px",
+                        "scope": "default",
+                        "line": {
+                            "start": 77,
+                            "end": 77
+                        }
+                    },
+                    "group": [
+                        "color-gradient"
+                    ],
+                    "access": "public",
+                    "file": {
+                        "path": "fluent/scss/colorgradient/_variables.scss",
+                        "name": "_variables.scss"
+                    },
+                    "resolvedValue": "362px",
                     "resolvedType": "Number"
                 },
                 {
                     "description": "The spacing between the sections of the small ColorGradient.\n",
                     "commentRange": {
-                        "start": 60,
-                        "end": 61
+                        "start": 79,
+                        "end": 80
                     },
                     "context": {
                         "type": "variable",
@@ -116821,8 +117151,8 @@
                         "value": "$kendo-color-gradient-spacing",
                         "scope": "default",
                         "line": {
-                            "start": 62,
-                            "end": 62
+                            "start": 81,
+                            "end": 81
                         }
                     },
                     "group": [
@@ -116839,8 +117169,8 @@
                 {
                     "description": "The spacing between the sections of the medium ColorGradient.\n",
                     "commentRange": {
-                        "start": 63,
-                        "end": 64
+                        "start": 82,
+                        "end": 83
                     },
                     "context": {
                         "type": "variable",
@@ -116848,8 +117178,8 @@
                         "value": "$kendo-color-gradient-spacing",
                         "scope": "default",
                         "line": {
-                            "start": 65,
-                            "end": 65
+                            "start": 84,
+                            "end": 84
                         }
                     },
                     "group": [
@@ -116866,8 +117196,8 @@
                 {
                     "description": "The spacing between the sections of the large ColorGradient.\n",
                     "commentRange": {
-                        "start": 66,
-                        "end": 67
+                        "start": 85,
+                        "end": 86
                     },
                     "context": {
                         "type": "variable",
@@ -116875,8 +117205,8 @@
                         "value": "k-spacing(4.5)",
                         "scope": "default",
                         "line": {
-                            "start": 68,
-                            "end": 68
+                            "start": 87,
+                            "end": 87
                         }
                     },
                     "group": [
@@ -116893,8 +117223,8 @@
                 {
                     "description": "The border color of the focused ColorGradient.\n",
                     "commentRange": {
-                        "start": 70,
-                        "end": 71
+                        "start": 89,
+                        "end": 90
                     },
                     "context": {
                         "type": "variable",
@@ -116902,8 +117232,8 @@
                         "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 ))",
                         "scope": "default",
                         "line": {
-                            "start": 72,
-                            "end": 72
+                            "start": 91,
+                            "end": 91
                         }
                     },
                     "group": [
@@ -116920,8 +117250,8 @@
                 {
                     "description": "The box shadow of the focused ColorGradient.\n",
                     "commentRange": {
-                        "start": 73,
-                        "end": 74
+                        "start": 92,
+                        "end": 93
                     },
                     "context": {
                         "type": "variable",
@@ -116929,8 +117259,8 @@
                         "value": "var( --kendo-box-shadow-depth-3, none )",
                         "scope": "default",
                         "line": {
-                            "start": 75,
-                            "end": 75
+                            "start": 94,
+                            "end": 94
                         }
                     },
                     "group": [
@@ -116947,8 +117277,8 @@
                 {
                     "description": "The width of the border around the ColorGradient canvas.\n",
                     "commentRange": {
-                        "start": 77,
-                        "end": 78
+                        "start": 96,
+                        "end": 97
                     },
                     "context": {
                         "type": "variable",
@@ -116956,8 +117286,8 @@
                         "value": "0",
                         "scope": "default",
                         "line": {
-                            "start": 79,
-                            "end": 79
+                            "start": 98,
+                            "end": 98
                         }
                     },
                     "group": [
@@ -116974,8 +117304,8 @@
                 {
                     "description": "The border radius of the ColorGradient canvas.\n",
                     "commentRange": {
-                        "start": 80,
-                        "end": 81
+                        "start": 99,
+                        "end": 100
                     },
                     "context": {
                         "type": "variable",
@@ -116983,8 +117313,8 @@
                         "value": "k-border-radius(md)",
                         "scope": "default",
                         "line": {
-                            "start": 82,
-                            "end": 82
+                            "start": 101,
+                            "end": 101
                         }
                     },
                     "group": [
@@ -117001,8 +117331,8 @@
                 {
                     "description": "The spacing between the items of the ColorGradient canvas.\n",
                     "commentRange": {
-                        "start": 83,
-                        "end": 84
+                        "start": 102,
+                        "end": 103
                     },
                     "context": {
                         "type": "variable",
@@ -117010,8 +117340,8 @@
                         "value": "k-spacing(2)",
                         "scope": "default",
                         "line": {
-                            "start": 85,
-                            "end": 85
+                            "start": 104,
+                            "end": 104
                         }
                     },
                     "group": [
@@ -117028,8 +117358,8 @@
                 {
                     "description": "The height the ColorGradient canvas hsv rectangle.\n",
                     "commentRange": {
-                        "start": 86,
-                        "end": 87
+                        "start": 105,
+                        "end": 106
                     },
                     "context": {
                         "type": "variable",
@@ -117037,8 +117367,8 @@
                         "value": "180px",
                         "scope": "default",
                         "line": {
-                            "start": 88,
-                            "end": 88
+                            "start": 107,
+                            "end": 107
                         }
                     },
                     "group": [
@@ -117055,8 +117385,8 @@
                 {
                     "description": "The height the small ColorGradient canvas hsv rectangle.\n",
                     "commentRange": {
-                        "start": 89,
-                        "end": 90
+                        "start": 108,
+                        "end": 109
                     },
                     "context": {
                         "type": "variable",
@@ -117064,8 +117394,8 @@
                         "value": "164px",
                         "scope": "default",
                         "line": {
-                            "start": 91,
-                            "end": 91
+                            "start": 110,
+                            "end": 110
                         }
                     },
                     "group": [
@@ -117082,8 +117412,8 @@
                 {
                     "description": "The height the medium ColorGradient canvas hsv rectangle.\n",
                     "commentRange": {
-                        "start": 92,
-                        "end": 93
+                        "start": 111,
+                        "end": 112
                     },
                     "context": {
                         "type": "variable",
@@ -117091,8 +117421,8 @@
                         "value": "$kendo-color-gradient-canvas-rectangle-height",
                         "scope": "default",
                         "line": {
-                            "start": 94,
-                            "end": 94
+                            "start": 113,
+                            "end": 113
                         }
                     },
                     "group": [
@@ -117109,8 +117439,8 @@
                 {
                     "description": "The height the large ColorGradient canvas hsv rectangle.\n",
                     "commentRange": {
-                        "start": 95,
-                        "end": 96
+                        "start": 114,
+                        "end": 115
                     },
                     "context": {
                         "type": "variable",
@@ -117118,8 +117448,8 @@
                         "value": "256px",
                         "scope": "default",
                         "line": {
-                            "start": 97,
-                            "end": 97
+                            "start": 116,
+                            "end": 116
                         }
                     },
                     "group": [
@@ -117136,8 +117466,8 @@
                 {
                     "description": "The spacing between the items of the small ColorGradient canvas.\n",
                     "commentRange": {
-                        "start": 99,
-                        "end": 100
+                        "start": 118,
+                        "end": 119
                     },
                     "context": {
                         "type": "variable",
@@ -117145,8 +117475,8 @@
                         "value": "$kendo-color-gradient-canvas-spacing",
                         "scope": "default",
                         "line": {
-                            "start": 101,
-                            "end": 101
+                            "start": 120,
+                            "end": 120
                         }
                     },
                     "group": [
@@ -117163,8 +117493,8 @@
                 {
                     "description": "The spacing between the items of the medium ColorGradient canvas.\n",
                     "commentRange": {
-                        "start": 102,
-                        "end": 103
+                        "start": 121,
+                        "end": 122
                     },
                     "context": {
                         "type": "variable",
@@ -117172,8 +117502,8 @@
                         "value": "$kendo-color-gradient-canvas-spacing",
                         "scope": "default",
                         "line": {
-                            "start": 104,
-                            "end": 104
+                            "start": 123,
+                            "end": 123
                         }
                     },
                     "group": [
@@ -117190,8 +117520,8 @@
                 {
                     "description": "The spacing between the items of the large ColorGradient canvas.\n",
                     "commentRange": {
-                        "start": 105,
-                        "end": 106
+                        "start": 124,
+                        "end": 125
                     },
                     "context": {
                         "type": "variable",
@@ -117199,8 +117529,8 @@
                         "value": "k-spacing(4)",
                         "scope": "default",
                         "line": {
-                            "start": 107,
-                            "end": 107
+                            "start": 126,
+                            "end": 126
                         }
                     },
                     "group": [
@@ -117217,8 +117547,8 @@
                 {
                     "description": "The border color of the ColorGradient canvas hsv rectangle.\n",
                     "commentRange": {
-                        "start": 109,
-                        "end": 110
+                        "start": 128,
+                        "end": 129
                     },
                     "context": {
                         "type": "variable",
@@ -117226,8 +117556,8 @@
                         "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                         "scope": "default",
                         "line": {
-                            "start": 111,
-                            "end": 111
+                            "start": 130,
+                            "end": 130
                         }
                     },
                     "group": [
@@ -117244,8 +117574,8 @@
                 {
                     "description": "The box shadow of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 112,
-                        "end": 113
+                        "start": 131,
+                        "end": 132
                     },
                     "context": {
                         "type": "variable",
@@ -117253,8 +117583,8 @@
                         "value": "var( --kendo-box-shadow-depth-2, none )",
                         "scope": "default",
                         "line": {
-                            "start": 114,
-                            "end": 114
+                            "start": 133,
+                            "end": 133
                         }
                     },
                     "group": [
@@ -117271,8 +117601,8 @@
                 {
                     "description": "The width of the ColorGradient slider.\n",
                     "commentRange": {
-                        "start": 116,
-                        "end": 117
+                        "start": 135,
+                        "end": 136
                     },
                     "context": {
                         "type": "variable",
@@ -117280,8 +117610,8 @@
                         "value": "20px",
                         "scope": "default",
                         "line": {
-                            "start": 118,
-                            "end": 118
+                            "start": 137,
+                            "end": 137
                         }
                     },
                     "group": [
@@ -117298,8 +117628,8 @@
                 {
                     "description": "The border radius of the ColorGradient slider.\n",
                     "commentRange": {
-                        "start": 119,
-                        "end": 120
+                        "start": 138,
+                        "end": 139
                     },
                     "context": {
                         "type": "variable",
@@ -117307,8 +117637,8 @@
                         "value": "k-border-radius(md)",
                         "scope": "default",
                         "line": {
-                            "start": 121,
-                            "end": 121
+                            "start": 140,
+                            "end": 140
                         }
                     },
                     "group": [
@@ -117325,8 +117655,8 @@
                 {
                     "description": "The width of the border around the ColorGradient slider.\n",
                     "commentRange": {
-                        "start": 122,
-                        "end": 123
+                        "start": 141,
+                        "end": 142
                     },
                     "context": {
                         "type": "variable",
@@ -117334,8 +117664,8 @@
                         "value": "if($kendo-enable-color-system, 0, 1px)",
                         "scope": "default",
                         "line": {
-                            "start": 124,
-                            "end": 124
+                            "start": 143,
+                            "end": 143
                         }
                     },
                     "group": [
@@ -117352,8 +117682,8 @@
                 {
                     "description": "The color of the border around the ColorGradient slider.\n",
                     "commentRange": {
-                        "start": 125,
-                        "end": 126
+                        "start": 144,
+                        "end": 145
                     },
                     "context": {
                         "type": "variable",
@@ -117361,8 +117691,8 @@
                         "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 ))",
                         "scope": "default",
                         "line": {
-                            "start": 127,
-                            "end": 127
+                            "start": 146,
+                            "end": 146
                         }
                     },
                     "group": [
@@ -117379,8 +117709,8 @@
                 {
                     "description": "The height of the ColorGradient vertical slider.\n",
                     "commentRange": {
-                        "start": 129,
-                        "end": 130
+                        "start": 148,
+                        "end": 149
                     },
                     "context": {
                         "type": "variable",
@@ -117388,8 +117718,8 @@
                         "value": "180px",
                         "scope": "default",
                         "line": {
-                            "start": 131,
-                            "end": 131
+                            "start": 150,
+                            "end": 150
                         }
                     },
                     "group": [
@@ -117406,8 +117736,8 @@
                 {
                     "description": "The width of the ColorGradient horizontal slider.\n",
                     "commentRange": {
-                        "start": 132,
-                        "end": 133
+                        "start": 151,
+                        "end": 152
                     },
                     "context": {
                         "type": "variable",
@@ -117415,8 +117745,8 @@
                         "value": "100%",
                         "scope": "default",
                         "line": {
-                            "start": 134,
-                            "end": 134
+                            "start": 153,
+                            "end": 153
                         }
                     },
                     "group": [
@@ -117433,8 +117763,8 @@
                 {
                     "description": "The background image of the ColorGradient alpha slider.\n",
                     "commentRange": {
-                        "start": 135,
-                        "end": 136
+                        "start": 154,
+                        "end": 155
                     },
                     "context": {
                         "type": "variable",
@@ -117442,8 +117772,8 @@
                         "value": "\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC\"",
                         "scope": "default",
                         "line": {
-                            "start": 137,
-                            "end": 137
+                            "start": 156,
+                            "end": 156
                         }
                     },
                     "group": [
@@ -117460,8 +117790,8 @@
                 {
                     "description": "The height of the small ColorGradient vertical slider.\n",
                     "commentRange": {
-                        "start": 138,
-                        "end": 139
+                        "start": 157,
+                        "end": 158
                     },
                     "context": {
                         "type": "variable",
@@ -117469,8 +117799,8 @@
                         "value": "164px",
                         "scope": "default",
                         "line": {
-                            "start": 140,
-                            "end": 140
+                            "start": 159,
+                            "end": 159
                         }
                     },
                     "group": [
@@ -117487,8 +117817,8 @@
                 {
                     "description": "The height of the medium ColorGradient vertical slider.\n",
                     "commentRange": {
-                        "start": 141,
-                        "end": 142
+                        "start": 160,
+                        "end": 161
                     },
                     "context": {
                         "type": "variable",
@@ -117496,8 +117826,8 @@
                         "value": "$kendo-color-gradient-slider-vertical-size",
                         "scope": "default",
                         "line": {
-                            "start": 143,
-                            "end": 143
+                            "start": 162,
+                            "end": 162
                         }
                     },
                     "group": [
@@ -117514,8 +117844,8 @@
                 {
                     "description": "The height of the large ColorGradient vertical slider.\n",
                     "commentRange": {
-                        "start": 144,
-                        "end": 145
+                        "start": 163,
+                        "end": 164
                     },
                     "context": {
                         "type": "variable",
@@ -117523,8 +117853,8 @@
                         "value": "256px",
                         "scope": "default",
                         "line": {
-                            "start": 146,
-                            "end": 146
+                            "start": 165,
+                            "end": 165
                         }
                     },
                     "group": [
@@ -117541,8 +117871,8 @@
                 {
                     "description": "The width of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 148,
-                        "end": 149
+                        "start": 167,
+                        "end": 168
                     },
                     "context": {
                         "type": "variable",
@@ -117550,8 +117880,8 @@
                         "value": "20px",
                         "scope": "default",
                         "line": {
-                            "start": 150,
-                            "end": 150
+                            "start": 169,
+                            "end": 169
                         }
                     },
                     "group": [
@@ -117568,8 +117898,8 @@
                 {
                     "description": "The height of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 151,
-                        "end": 152
+                        "start": 170,
+                        "end": 171
                     },
                     "context": {
                         "type": "variable",
@@ -117577,8 +117907,8 @@
                         "value": "20px",
                         "scope": "default",
                         "line": {
-                            "start": 153,
-                            "end": 153
+                            "start": 172,
+                            "end": 172
                         }
                     },
                     "group": [
@@ -117595,8 +117925,8 @@
                 {
                     "description": "The width of the border around the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 154,
-                        "end": 155
+                        "start": 173,
+                        "end": 174
                     },
                     "context": {
                         "type": "variable",
@@ -117604,8 +117934,8 @@
                         "value": "2px",
                         "scope": "default",
                         "line": {
-                            "start": 156,
-                            "end": 156
+                            "start": 175,
+                            "end": 175
                         }
                     },
                     "group": [
@@ -117622,8 +117952,8 @@
                 {
                     "description": "The width of the outline around the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 157,
-                        "end": 158
+                        "start": 176,
+                        "end": 177
                     },
                     "context": {
                         "type": "variable",
@@ -117631,8 +117961,8 @@
                         "value": "1px",
                         "scope": "default",
                         "line": {
-                            "start": 159,
-                            "end": 159
+                            "start": 178,
+                            "end": 178
                         }
                     },
                     "group": [
@@ -117649,8 +117979,8 @@
                 {
                     "description": "The color of the border around the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 160,
-                        "end": 161
+                        "start": 179,
+                        "end": 180
                     },
                     "context": {
                         "type": "variable",
@@ -117658,8 +117988,8 @@
                         "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
                         "scope": "default",
                         "line": {
-                            "start": 162,
-                            "end": 162
+                            "start": 181,
+                            "end": 181
                         }
                     },
                     "group": [
@@ -117676,8 +118006,8 @@
                 {
                     "description": "The box shadow of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 163,
-                        "end": 164
+                        "start": 182,
+                        "end": 183
                     },
                     "context": {
                         "type": "variable",
@@ -117685,8 +118015,8 @@
                         "value": "var( --kendo-box-shadow-depth-2, none )",
                         "scope": "default",
                         "line": {
-                            "start": 165,
-                            "end": 165
+                            "start": 184,
+                            "end": 184
                         }
                     },
                     "group": [
@@ -117703,8 +118033,8 @@
                 {
                     "description": "The color of the border around the focused ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 166,
-                        "end": 167
+                        "start": 185,
+                        "end": 186
                     },
                     "context": {
                         "type": "variable",
@@ -117712,8 +118042,8 @@
                         "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white)",
                         "scope": "default",
                         "line": {
-                            "start": 168,
-                            "end": 168
+                            "start": 187,
+                            "end": 187
                         }
                     },
                     "group": [
@@ -117730,8 +118060,8 @@
                 {
                     "description": "The focus color of the outline around the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 169,
-                        "end": 170
+                        "start": 188,
+                        "end": 189
                     },
                     "context": {
                         "type": "variable",
@@ -117739,8 +118069,8 @@
                         "value": "if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))",
                         "scope": "default",
                         "line": {
-                            "start": 171,
-                            "end": 171
+                            "start": 190,
+                            "end": 190
                         }
                     },
                     "group": [
@@ -117757,8 +118087,8 @@
                 {
                     "description": "The hover color of the outline around the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 172,
-                        "end": 173
+                        "start": 191,
+                        "end": 192
                     },
                     "context": {
                         "type": "variable",
@@ -117766,8 +118096,8 @@
                         "value": "if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 ))",
                         "scope": "default",
                         "line": {
-                            "start": 174,
-                            "end": 174
+                            "start": 193,
+                            "end": 193
                         }
                     },
                     "group": [
@@ -117784,8 +118114,8 @@
                 {
                     "description": "The vertical offset of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 176,
-                        "end": 177
+                        "start": 195,
+                        "end": 196
                     },
                     "context": {
                         "type": "variable",
@@ -117793,8 +118123,8 @@
                         "value": "( -1 * math.div( $kendo-color-gradient-draghandle-height, 2 ) )",
                         "scope": "default",
                         "line": {
-                            "start": 178,
-                            "end": 178
+                            "start": 197,
+                            "end": 197
                         }
                     },
                     "group": [
@@ -117811,8 +118141,8 @@
                 {
                     "description": "The horizontal offset of the ColorGradient canvas drag handle.\n",
                     "commentRange": {
-                        "start": 179,
-                        "end": 180
+                        "start": 198,
+                        "end": 199
                     },
                     "context": {
                         "type": "variable",
@@ -117820,8 +118150,8 @@
                         "value": "( -1 * math.div( $kendo-color-gradient-draghandle-width, 2 ) )",
                         "scope": "default",
                         "line": {
-                            "start": 181,
-                            "end": 181
+                            "start": 200,
+                            "end": 200
                         }
                     },
                     "group": [
@@ -117838,8 +118168,8 @@
                 {
                     "description": "The width of the ColorGradient input.\n",
                     "commentRange": {
-                        "start": 183,
-                        "end": 184
+                        "start": 202,
+                        "end": 203
                     },
                     "context": {
                         "type": "variable",
@@ -117847,8 +118177,8 @@
                         "value": "48px",
                         "scope": "default",
                         "line": {
-                            "start": 185,
-                            "end": 185
+                            "start": 204,
+                            "end": 204
                         }
                     },
                     "group": [
@@ -117865,8 +118195,8 @@
                 {
                     "description": "The spacing between the ColorGradient inputs.\n",
                     "commentRange": {
-                        "start": 186,
-                        "end": 187
+                        "start": 205,
+                        "end": 206
                     },
                     "context": {
                         "type": "variable",
@@ -117874,8 +118204,8 @@
                         "value": "calc( #{$kendo-color-gradient-spacer} / 4 )",
                         "scope": "default",
                         "line": {
-                            "start": 188,
-                            "end": 188
+                            "start": 207,
+                            "end": 207
                         }
                     },
                     "group": [
@@ -117892,8 +118222,8 @@
                 {
                     "description": "The font size of the ColorGradient input labels.\n",
                     "commentRange": {
-                        "start": 189,
-                        "end": 190
+                        "start": 208,
+                        "end": 209
                     },
                     "context": {
                         "type": "variable",
@@ -117901,8 +118231,8 @@
                         "value": "var( --kendo-font-size-sm, inherit )",
                         "scope": "default",
                         "line": {
-                            "start": 191,
-                            "end": 191
+                            "start": 210,
+                            "end": 210
                         }
                     },
                     "group": [
@@ -117919,8 +118249,8 @@
                 {
                     "description": "The spacing between the ColorGradient inputs and their labels.\n",
                     "commentRange": {
-                        "start": 192,
-                        "end": 193
+                        "start": 211,
+                        "end": 212
                     },
                     "context": {
                         "type": "variable",
@@ -117928,8 +118258,8 @@
                         "value": "calc( #{$kendo-color-gradient-spacer} / 4 )",
                         "scope": "default",
                         "line": {
-                            "start": 194,
-                            "end": 194
+                            "start": 213,
+                            "end": 213
                         }
                     },
                     "group": [
@@ -117946,8 +118276,8 @@
                 {
                     "description": "The text color of the ColorGradient input labels.\n",
                     "commentRange": {
-                        "start": 195,
-                        "end": 196
+                        "start": 214,
+                        "end": 215
                     },
                     "context": {
                         "type": "variable",
@@ -117955,8 +118285,8 @@
                         "value": "var( --kendo-subtle-text, inherit )",
                         "scope": "default",
                         "line": {
-                            "start": 197,
-                            "end": 197
+                            "start": 216,
+                            "end": 216
                         }
                     },
                     "group": [
@@ -117973,17 +118303,17 @@
                 {
                     "description": "The width of the small ColorGradient input.\n",
                     "commentRange": {
-                        "start": 199,
-                        "end": 200
+                        "start": 218,
+                        "end": 219
                     },
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-gradient-sm-input-width",
-                        "value": "43.5px",
+                        "value": "43px",
                         "scope": "default",
                         "line": {
-                            "start": 201,
-                            "end": 201
+                            "start": 220,
+                            "end": 220
                         }
                     },
                     "group": [
@@ -117994,14 +118324,14 @@
                         "path": "fluent/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "43.5px",
+                    "resolvedValue": "43px",
                     "resolvedType": "Number"
                 },
                 {
                     "description": "The width of the medium ColorGradient input.\n",
                     "commentRange": {
-                        "start": 202,
-                        "end": 203
+                        "start": 221,
+                        "end": 222
                     },
                     "context": {
                         "type": "variable",
@@ -118009,8 +118339,8 @@
                         "value": "$kendo-color-gradient-input-width",
                         "scope": "default",
                         "line": {
-                            "start": 204,
-                            "end": 204
+                            "start": 223,
+                            "end": 223
                         }
                     },
                     "group": [
@@ -118027,17 +118357,17 @@
                 {
                     "description": "The width of the large ColorGradient input.\n",
                     "commentRange": {
-                        "start": 205,
-                        "end": 206
+                        "start": 224,
+                        "end": 225
                     },
                     "context": {
                         "type": "variable",
                         "name": "kendo-color-gradient-lg-input-width",
-                        "value": "50.5px",
+                        "value": "68px",
                         "scope": "default",
                         "line": {
-                            "start": 207,
-                            "end": 207
+                            "start": 226,
+                            "end": 226
                         }
                     },
                     "group": [
@@ -118048,14 +118378,14 @@
                         "path": "fluent/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "50.5px",
+                    "resolvedValue": "68px",
                     "resolvedType": "Number"
                 },
                 {
                     "description": "The font weight of the ColorGradient contrast ratio text.\n",
                     "commentRange": {
-                        "start": 209,
-                        "end": 210
+                        "start": 228,
+                        "end": 229
                     },
                     "context": {
                         "type": "variable",
@@ -118063,8 +118393,8 @@
                         "value": "var( --kendo-font-weight-bold, normal )",
                         "scope": "default",
                         "line": {
-                            "start": 211,
-                            "end": 211
+                            "start": 230,
+                            "end": 230
                         }
                     },
                     "group": [
@@ -118081,8 +118411,8 @@
                 {
                     "description": "The spacing between the items in the ColorGradient contrast tool.\n",
                     "commentRange": {
-                        "start": 212,
-                        "end": 213
+                        "start": 231,
+                        "end": 232
                     },
                     "context": {
                         "type": "variable",
@@ -118090,8 +118420,8 @@
                         "value": "calc( #{$kendo-color-gradient-spacer} / 1.5 )",
                         "scope": "default",
                         "line": {
-                            "start": 214,
-                            "end": 214
+                            "start": 233,
+                            "end": 233
                         }
                     },
                     "group": [
@@ -118108,17 +118438,17 @@
                 {
                     "description": "The size map of the ColorGradient.\n",
                     "commentRange": {
-                        "start": 216,
-                        "end": 217
+                        "start": 235,
+                        "end": 236
                     },
                     "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        spacing: $kendo-color-gradient-sm-spacing,\n        canvas-spacing: $kendo-color-gradient-sm-canvas-spacing\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        spacing: $kendo-color-gradient-md-spacing,\n        canvas-spacing: $kendo-color-gradient-md-canvas-spacing\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        spacing: $kendo-color-gradient-lg-spacing,\n        canvas-spacing: $kendo-color-gradient-lg-canvas-spacing\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        spacing: $kendo-color-gradient-sm-spacing,\n        canvas-spacing: $kendo-color-gradient-sm-canvas-spacing,\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        spacing: $kendo-color-gradient-md-spacing,\n        canvas-spacing: $kendo-color-gradient-md-canvas-spacing,\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        spacing: $kendo-color-gradient-lg-spacing,\n        canvas-spacing: $kendo-color-gradient-lg-canvas-spacing,\n        padding-x: $kendo-color-gradient-lg-padding-x,\n        padding-y: $kendo-color-gradient-lg-padding-y\n    )\n)",
                         "scope": "default",
                         "line": {
-                            "start": 218,
-                            "end": 243
+                            "start": 237,
+                            "end": 268
                         }
                     },
                     "group": [
@@ -118129,16 +118459,18 @@
                         "path": "fluent/scss/colorgradient/_variables.scss",
                         "name": "_variables.scss"
                     },
-                    "resolvedValue": "(sm: (width: 226px, vertical-slider-height: 164px, rectangle-height: 164px, input-width: 43.5px, spacing: var(--kendo-spacing-4, 1rem), canvas-spacing: var(--kendo-spacing-2, 0.5rem)), md: (width: 260px, vertical-slider-height: 180px, rectangle-height: 180px, input-width: 48px, spacing: var(--kendo-spacing-4, 1rem), canvas-spacing: var(--kendo-spacing-2, 0.5rem)), lg: (width: 360px, vertical-slider-height: 256px, rectangle-height: 256px, input-width: 50.5px, spacing: var(--kendo-spacing-4\\.5, 1.125rem), canvas-spacing: var(--kendo-spacing-4, 1rem)))",
+                    "resolvedValue": "(sm: (width: 236px, vertical-slider-height: 164px, rectangle-height: 164px, input-width: 43px, spacing: var(--kendo-spacing-4, 1rem), canvas-spacing: var(--kendo-spacing-2, 0.5rem), padding-x: calc(var(--kendo-spacing-4, 1rem) / 2), padding-y: var(--kendo-spacing-4, 1rem)), md: (width: 260px, vertical-slider-height: 180px, rectangle-height: 180px, input-width: 48px, spacing: var(--kendo-spacing-4, 1rem), canvas-spacing: var(--kendo-spacing-2, 0.5rem), padding-x: calc(var(--kendo-spacing-4, 1rem) / 2), padding-y: var(--kendo-spacing-4, 1rem)), lg: (width: 362px, vertical-slider-height: 256px, rectangle-height: 256px, input-width: 68px, spacing: var(--kendo-spacing-4\\.5, 1.125rem), canvas-spacing: var(--kendo-spacing-4, 1rem), padding-x: var(--kendo-spacing-4, 1rem), padding-y: var(--kendo-spacing-4, 1rem)))",
                     "resolvedType": "Map",
                     "prettyValue": {
                         "sm": {
-                            "width": "226px",
+                            "width": "236px",
                             "vertical-slider-height": "164px",
                             "rectangle-height": "164px",
-                            "input-width": "43.5px",
+                            "input-width": "43px",
                             "spacing": "var(--kendo-spacing-4, 1rem)",
-                            "canvas-spacing": "var(--kendo-spacing-2, 0.5rem)"
+                            "canvas-spacing": "var(--kendo-spacing-2, 0.5rem)",
+                            "padding-x": "calc(var(--kendo-spacing-4, 1rem) / 2)",
+                            "padding-y": "var(--kendo-spacing-4, 1rem)"
                         },
                         "md": {
                             "width": "260px",
@@ -118146,15 +118478,19 @@
                             "rectangle-height": "180px",
                             "input-width": "48px",
                             "spacing": "var(--kendo-spacing-4, 1rem)",
-                            "canvas-spacing": "var(--kendo-spacing-2, 0.5rem)"
+                            "canvas-spacing": "var(--kendo-spacing-2, 0.5rem)",
+                            "padding-x": "calc(var(--kendo-spacing-4, 1rem) / 2)",
+                            "padding-y": "var(--kendo-spacing-4, 1rem)"
                         },
                         "lg": {
-                            "width": "360px",
+                            "width": "362px",
                             "vertical-slider-height": "256px",
                             "rectangle-height": "256px",
-                            "input-width": "50.5px",
+                            "input-width": "68px",
                             "spacing": "var(--kendo-spacing-4\\.5, 1.125rem)",
-                            "canvas-spacing": "var(--kendo-spacing-4, 1rem)"
+                            "canvas-spacing": "var(--kendo-spacing-4, 1rem)",
+                            "padding-x": "var(--kendo-spacing-4, 1rem)",
+                            "padding-y": "var(--kendo-spacing-4, 1rem)"
                         }
                     }
                 }
@@ -118388,7 +118724,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": {
@@ -118415,8 +118751,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": 34,
@@ -118442,7 +118778,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": {
@@ -118469,7 +118805,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": {
@@ -118496,7 +118832,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": {
@@ -118523,8 +118859,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": 46,
@@ -118740,7 +119076,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": 72,