@progress/kendo-theme-classic 10.1.0-dev.6 → 10.1.0

package/dist/meta/sassdoc-raw-data.json

@@ -13100,15 +13100,15 @@
         }
     },
     {
-        "description": "The width of the border around the ColorEditor.\n",
+        "description": "The minimum width of the ColorEditor.\n",
         "commentRange": {
             "start": 12,
             "end": 13
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-editor-border-width",
-            "value": "1px",
+            "name": "kendo-color-editor-sm-min-width",
+            "value": "252px",
             "scope": "default",
             "line": {
                 "start": 14,
@@ -13125,15 +13125,15 @@
         }
     },
     {
-        "description": "The border radius of the ColorEditor.\n",
+        "description": "The minimum width of the ColorEditor.\n",
         "commentRange": {
             "start": 15,
             "end": 16
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-editor-border-radius",
-            "value": "k-border-radius(md)",
+            "name": "kendo-color-editor-md-min-width",
+            "value": "$kendo-color-editor-min-width",
             "scope": "default",
             "line": {
                 "start": 17,
@@ -13150,15 +13150,15 @@
         }
     },
     {
-        "description": "The font family of the ColorEditor.\n",
+        "description": "The minimum width of the ColorEditor.\n",
         "commentRange": {
             "start": 18,
             "end": 19
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-editor-font-family",
-            "value": "var( --kendo-font-family, inherit )",
+            "name": "kendo-color-editor-lg-min-width",
+            "value": "362px",
             "scope": "default",
             "line": {
                 "start": 20,
@@ -13175,15 +13175,15 @@
         }
     },
     {
-        "description": "The font size of the ColorEditor.\n",
+        "description": "The width of the border around the ColorEditor.\n",
         "commentRange": {
             "start": 21,
             "end": 22
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-editor-font-size",
-            "value": "var( --kendo-font-size, inherit )",
+            "name": "kendo-color-editor-border-width",
+            "value": "1px",
             "scope": "default",
             "line": {
                 "start": 23,
@@ -13200,15 +13200,15 @@
         }
     },
     {
-        "description": "The line height of the ColorEditor.\n",
+        "description": "The border radius of the ColorEditor.\n",
         "commentRange": {
             "start": 24,
             "end": 25
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-editor-line-height",
-            "value": "var( --kendo-line-height, normal )",
+            "name": "kendo-color-editor-border-radius",
+            "value": "k-border-radius(md)",
             "scope": "default",
             "line": {
                 "start": 26,
@@ -13225,15 +13225,15 @@
         }
     },
     {
-        "description": "The text color of the ColorEditor.\n",
+        "description": "The font family of the ColorEditor.\n",
         "commentRange": {
             "start": 27,
             "end": 28
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-editor-text",
-            "value": "$kendo-component-text",
+            "name": "kendo-color-editor-font-family",
+            "value": "var( --kendo-font-family, inherit )",
             "scope": "default",
             "line": {
                 "start": 29,
@@ -13250,15 +13250,15 @@
         }
     },
     {
-        "description": "The background color of the ColorEditor.\n",
+        "description": "The font size of the ColorEditor.\n",
         "commentRange": {
             "start": 30,
             "end": 31
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-editor-bg",
-            "value": "$kendo-component-bg",
+            "name": "kendo-color-editor-font-size",
+            "value": "var( --kendo-font-size, inherit )",
             "scope": "default",
             "line": {
                 "start": 32,
@@ -13275,15 +13275,15 @@
         }
     },
     {
-        "description": "The border color of the ColorEditor.\n",
+        "description": "The line height of the ColorEditor.\n",
         "commentRange": {
             "start": 33,
             "end": 34
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-editor-border",
-            "value": "$kendo-component-border",
+            "name": "kendo-color-editor-line-height",
+            "value": "var( --kendo-line-height, normal )",
             "scope": "default",
             "line": {
                 "start": 35,
@@ -13300,19 +13300,19 @@
         }
     },
     {
-        "description": "The border color of the focused ColorEditor.\n",
+        "description": "The text color of the ColorEditor.\n",
         "commentRange": {
-            "start": 37,
-            "end": 38
+            "start": 36,
+            "end": 37
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-editor-focus-border",
-            "value": "null",
+            "name": "kendo-color-editor-text",
+            "value": "$kendo-component-text",
             "scope": "default",
             "line": {
-                "start": 39,
-                "end": 39
+                "start": 38,
+                "end": 38
             }
         },
         "group": [
@@ -13325,19 +13325,19 @@
         }
     },
     {
-        "description": "The box shadow of the focused ColorEditor.\n",
+        "description": "The background color of the ColorEditor.\n",
         "commentRange": {
-            "start": 40,
-            "end": 41
+            "start": 39,
+            "end": 40
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-editor-focus-shadow",
-            "value": "k-elevation(3)",
+            "name": "kendo-color-editor-bg",
+            "value": "$kendo-component-bg",
             "scope": "default",
             "line": {
-                "start": 42,
-                "end": 42
+                "start": 41,
+                "end": 41
             }
         },
         "group": [
@@ -13350,19 +13350,19 @@
         }
     },
     {
-        "description": "The vertical padding of the ColorEditor header.\n",
+        "description": "The border color of the ColorEditor.\n",
         "commentRange": {
-            "start": 44,
-            "end": 45
+            "start": 42,
+            "end": 43
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-editor-header-padding-y",
-            "value": "$kendo-color-editor-spacer",
+            "name": "kendo-color-editor-border",
+            "value": "$kendo-component-border",
             "scope": "default",
             "line": {
-                "start": 46,
-                "end": 46
+                "start": 44,
+                "end": 44
             }
         },
         "group": [
@@ -13375,19 +13375,19 @@
         }
     },
     {
-        "description": "The horizontal padding of the ColorEditor header.\n",
+        "description": "The border color of the focused ColorEditor.\n",
         "commentRange": {
-            "start": 47,
-            "end": 48
+            "start": 46,
+            "end": 47
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-editor-header-padding-x",
-            "value": "$kendo-color-editor-header-padding-y",
+            "name": "kendo-color-editor-focus-border",
+            "value": "null",
             "scope": "default",
             "line": {
-                "start": 49,
-                "end": 49
+                "start": 48,
+                "end": 48
             }
         },
         "group": [
@@ -13400,19 +13400,19 @@
         }
     },
     {
-        "description": "The spacing between the ColorEditor header actions.\n",
+        "description": "The box shadow of the focused ColorEditor.\n",
         "commentRange": {
-            "start": 50,
-            "end": 51
+            "start": 49,
+            "end": 50
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-editor-header-actions-gap",
-            "value": "calc( #{$kendo-color-editor-spacer} / 1.5 )",
+            "name": "kendo-color-editor-focus-shadow",
+            "value": "k-elevation(3)",
             "scope": "default",
             "line": {
-                "start": 52,
-                "end": 52
+                "start": 51,
+                "end": 51
             }
         },
         "group": [
@@ -13425,19 +13425,19 @@
         }
     },
     {
-        "description": "The width of the ColorEditor preview.\n",
+        "description": "The vertical padding of the ColorEditor header.\n",
         "commentRange": {
-            "start": 54,
-            "end": 55
+            "start": 53,
+            "end": 54
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-editor-color-preview-width",
-            "value": "32px",
+            "name": "kendo-color-editor-header-padding-y",
+            "value": "$kendo-color-editor-spacer",
             "scope": "default",
             "line": {
-                "start": 56,
-                "end": 56
+                "start": 55,
+                "end": 55
             }
         },
         "group": [
@@ -13450,19 +13450,19 @@
         }
     },
     {
-        "description": "The height of the ColorEditor preview.\n",
+        "description": "The horizontal padding of the ColorEditor header.\n",
         "commentRange": {
-            "start": 57,
-            "end": 58
+            "start": 56,
+            "end": 57
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-editor-color-preview-height",
-            "value": "12px",
+            "name": "kendo-color-editor-header-padding-x",
+            "value": "$kendo-color-editor-header-padding-y",
             "scope": "default",
             "line": {
-                "start": 59,
-                "end": 59
+                "start": 58,
+                "end": 58
             }
         },
         "group": [
@@ -13475,19 +13475,19 @@
         }
     },
     {
-        "description": "The spacing between the colors in the ColorEditor preview.\n",
+        "description": "The spacing between the ColorEditor header actions.\n",
         "commentRange": {
-            "start": 60,
-            "end": 61
+            "start": 59,
+            "end": 60
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-editor-preview-gap",
-            "value": "k-spacing(1)",
+            "name": "kendo-color-editor-header-actions-gap",
+            "value": "k-spacing(2)",
             "scope": "default",
             "line": {
-                "start": 62,
-                "end": 62
+                "start": 61,
+                "end": 61
             }
         },
         "group": [
@@ -13500,19 +13500,19 @@
         }
     },
     {
-        "description": "The vertical padding of the ColorEditor views container.\n",
+        "description": "The vertical padding of the small ColorEditor header.\n",
         "commentRange": {
-            "start": 64,
-            "end": 65
+            "start": 62,
+            "end": 63
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-editor-views-padding-y",
-            "value": "$kendo-color-editor-spacer",
+            "name": "kendo-color-editor-sm-header-padding-y",
+            "value": "$kendo-color-editor-header-padding-y",
             "scope": "default",
             "line": {
-                "start": 66,
-                "end": 66
+                "start": 64,
+                "end": 64
             }
         },
         "group": [
@@ -13525,19 +13525,19 @@
         }
     },
     {
-        "description": "The horizontal padding of the ColorEditor views container.\n",
+        "description": "The horizontal padding of the small ColorEditor header.\n",
         "commentRange": {
-            "start": 67,
-            "end": 68
+            "start": 65,
+            "end": 66
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-editor-views-padding-x",
-            "value": "$kendo-color-editor-views-padding-y",
+            "name": "kendo-color-editor-sm-header-padding-x",
+            "value": "$kendo-color-editor-header-padding-x",
             "scope": "default",
             "line": {
-                "start": 69,
-                "end": 69
+                "start": 67,
+                "end": 67
             }
         },
         "group": [
@@ -13550,19 +13550,19 @@
         }
     },
     {
-        "description": "The spacing of the ColorEditor views container.\n",
+        "description": "The vertical padding of the medium ColorEditor header.\n",
         "commentRange": {
-            "start": 70,
-            "end": 71
+            "start": 68,
+            "end": 69
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-editor-views-gap",
-            "value": "$kendo-color-editor-spacer",
+            "name": "kendo-color-editor-md-header-padding-y",
+            "value": "$kendo-color-editor-header-padding-y",
             "scope": "default",
             "line": {
-                "start": 72,
-                "end": 72
+                "start": 70,
+                "end": 70
             }
         },
         "group": [
@@ -13575,15 +13575,40 @@
         }
     },
     {
-        "description": "The outline color of the focused ColorGradient.\n",
+        "description": "The horizontal padding of the medium ColorEditor header.\n",
+        "commentRange": {
+            "start": 71,
+            "end": 72
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-md-header-padding-x",
+            "value": "$kendo-color-editor-header-padding-x",
+            "scope": "default",
+            "line": {
+                "start": 73,
+                "end": 73
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The vertical padding of the large ColorEditor header.\n",
         "commentRange": {
             "start": 74,
             "end": 75
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-editor-color-gradient-focus-outline-color",
-            "value": "rgba(0, 0, 0, .3)",
+            "name": "kendo-color-editor-lg-header-padding-y",
+            "value": "k-spacing(4.5)",
             "scope": "default",
             "line": {
                 "start": 76,
@@ -13600,15 +13625,15 @@
         }
     },
     {
-        "description": "The outline width of the focused ColorGradient.\n",
+        "description": "The horizontal padding of the large ColorEditor header.\n",
         "commentRange": {
             "start": 77,
             "end": 78
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-editor-color-gradient-focus-outline",
-            "value": "2px",
+            "name": "kendo-color-editor-lg-header-padding-x",
+            "value": "k-spacing(4.5)",
             "scope": "default",
             "line": {
                 "start": 79,
@@ -13625,19 +13650,19 @@
         }
     },
     {
-        "description": "The outline offset of the focused ColorGradient.\n",
+        "description": "The width of the ColorEditor preview.\n",
         "commentRange": {
-            "start": 80,
-            "end": 81
+            "start": 81,
+            "end": 82
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-editor-color-gradient-focus-outline-offset",
-            "value": "4px",
+            "name": "kendo-color-editor-color-preview-width",
+            "value": "32px",
             "scope": "default",
             "line": {
-                "start": 82,
-                "end": 82
+                "start": 83,
+                "end": 83
             }
         },
         "group": [
@@ -13650,35 +13675,710 @@
         }
     },
     {
-        "description": "The spacer of the ColorGradient.\n",
+        "description": "The height of the ColorEditor preview.\n",
         "commentRange": {
-            "start": 6,
-            "end": 7
+            "start": 84,
+            "end": 85
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-spacer",
-            "value": "k-spacing(3)",
+            "name": "kendo-color-editor-color-preview-height",
+            "value": "12px",
             "scope": "default",
             "line": {
-                "start": 8,
-                "end": 8
+                "start": 86,
+                "end": 86
             }
         },
         "group": [
-            "color-gradient"
+            "color-editor"
         ],
         "access": "public",
         "file": {
-            "path": "colorgradient/_variables.scss",
+            "path": "coloreditor/_variables.scss",
             "name": "_variables.scss"
         }
     },
     {
-        "description": "The width of the ColorGradient.\n",
+        "description": "The spacing between the colors in the ColorEditor preview.\n",
         "commentRange": {
-            "start": 10,
-            "end": 11
+            "start": 87,
+            "end": 88
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-preview-gap",
+            "value": "k-spacing(1)",
+            "scope": "default",
+            "line": {
+                "start": 89,
+                "end": 89
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The spacing between the colors in the small ColorEditor preview.\n",
+        "commentRange": {
+            "start": 90,
+            "end": 91
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-sm-preview-gap",
+            "value": "k-spacing(0.5)",
+            "scope": "default",
+            "line": {
+                "start": 92,
+                "end": 92
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The spacing between the colors in the medium ColorEditor preview.\n",
+        "commentRange": {
+            "start": 93,
+            "end": 94
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-md-preview-gap",
+            "value": "$kendo-color-editor-preview-gap",
+            "scope": "default",
+            "line": {
+                "start": 95,
+                "end": 95
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The spacing between the colors in the large ColorEditor preview.\n",
+        "commentRange": {
+            "start": 96,
+            "end": 97
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-lg-preview-gap",
+            "value": "k-spacing(1)",
+            "scope": "default",
+            "line": {
+                "start": 98,
+                "end": 98
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The width of the small ColorEditor preview.\n",
+        "commentRange": {
+            "start": 100,
+            "end": 101
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-sm-color-preview-width",
+            "value": "34px",
+            "scope": "default",
+            "line": {
+                "start": 102,
+                "end": 102
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The height of the small ColorEditor preview.\n",
+        "commentRange": {
+            "start": 103,
+            "end": 104
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-sm-color-preview-height",
+            "value": "12px",
+            "scope": "default",
+            "line": {
+                "start": 105,
+                "end": 105
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The width of the medium ColorEditor preview.\n",
+        "commentRange": {
+            "start": 106,
+            "end": 107
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-md-color-preview-width",
+            "value": "$kendo-color-editor-color-preview-width",
+            "scope": "default",
+            "line": {
+                "start": 108,
+                "end": 108
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The height of the medium ColorEditor preview.\n",
+        "commentRange": {
+            "start": 109,
+            "end": 110
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-md-color-preview-height",
+            "value": "$kendo-color-editor-color-preview-height",
+            "scope": "default",
+            "line": {
+                "start": 111,
+                "end": 111
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The width of the large ColorEditor preview.\n",
+        "commentRange": {
+            "start": 112,
+            "end": 113
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-lg-color-preview-width",
+            "value": "44px",
+            "scope": "default",
+            "line": {
+                "start": 114,
+                "end": 114
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The height of the large ColorEditor preview.\n",
+        "commentRange": {
+            "start": 115,
+            "end": 116
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-lg-color-preview-height",
+            "value": "16px",
+            "scope": "default",
+            "line": {
+                "start": 117,
+                "end": 117
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The vertical padding of the ColorEditor views container.\n",
+        "commentRange": {
+            "start": 119,
+            "end": 120
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-views-padding-y",
+            "value": "$kendo-color-editor-spacer",
+            "scope": "default",
+            "line": {
+                "start": 121,
+                "end": 121
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the ColorEditor views container.\n",
+        "commentRange": {
+            "start": 122,
+            "end": 123
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-views-padding-x",
+            "value": "$kendo-color-editor-views-padding-y",
+            "scope": "default",
+            "line": {
+                "start": 124,
+                "end": 124
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The spacing of the ColorEditor views container.\n",
+        "commentRange": {
+            "start": 125,
+            "end": 126
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-views-gap",
+            "value": "$kendo-color-editor-spacer",
+            "scope": "default",
+            "line": {
+                "start": 127,
+                "end": 127
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The vertical padding of the small ColorEditor views container.\n",
+        "commentRange": {
+            "start": 128,
+            "end": 129
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-sm-views-padding-y",
+            "value": "$kendo-color-editor-spacer",
+            "scope": "default",
+            "line": {
+                "start": 130,
+                "end": 130
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the small ColorEditor views container.\n",
+        "commentRange": {
+            "start": 131,
+            "end": 132
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-sm-views-padding-x",
+            "value": "$kendo-color-editor-views-padding-y",
+            "scope": "default",
+            "line": {
+                "start": 133,
+                "end": 133
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The spacing of the small ColorEditor views container.\n",
+        "commentRange": {
+            "start": 134,
+            "end": 135
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-sm-views-gap",
+            "value": "$kendo-color-editor-spacer",
+            "scope": "default",
+            "line": {
+                "start": 136,
+                "end": 136
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The vertical padding of the medium ColorEditor views container.\n",
+        "commentRange": {
+            "start": 137,
+            "end": 138
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-md-views-padding-y",
+            "value": "$kendo-color-editor-views-padding-y",
+            "scope": "default",
+            "line": {
+                "start": 139,
+                "end": 139
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the medium ColorEditor views container.\n",
+        "commentRange": {
+            "start": 140,
+            "end": 141
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-md-views-padding-x",
+            "value": "$kendo-color-editor-views-padding-x",
+            "scope": "default",
+            "line": {
+                "start": 142,
+                "end": 142
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The spacing of the medium ColorEditor views container.\n",
+        "commentRange": {
+            "start": 143,
+            "end": 144
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-md-views-gap",
+            "value": "$kendo-color-editor-views-gap",
+            "scope": "default",
+            "line": {
+                "start": 145,
+                "end": 145
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The vertical padding of the large ColorEditor views container.\n",
+        "commentRange": {
+            "start": 146,
+            "end": 147
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-lg-views-padding-y",
+            "value": "k-spacing(4.5)",
+            "scope": "default",
+            "line": {
+                "start": 148,
+                "end": 148
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the large ColorEditor views container.\n",
+        "commentRange": {
+            "start": 149,
+            "end": 150
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-lg-views-padding-x",
+            "value": "k-spacing(4.5)",
+            "scope": "default",
+            "line": {
+                "start": 151,
+                "end": 151
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The spacing of the large ColorEditor views container.\n",
+        "commentRange": {
+            "start": 152,
+            "end": 153
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-lg-views-gap",
+            "value": "k-spacing(4.5)",
+            "scope": "default",
+            "line": {
+                "start": 154,
+                "end": 154
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The outline color of the focused ColorGradient.\n",
+        "commentRange": {
+            "start": 156,
+            "end": 157
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-color-gradient-focus-outline-color",
+            "value": "rgba(0, 0, 0, .3)",
+            "scope": "default",
+            "line": {
+                "start": 158,
+                "end": 158
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The outline width of the focused ColorGradient.\n",
+        "commentRange": {
+            "start": 159,
+            "end": 160
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-color-gradient-focus-outline",
+            "value": "2px",
+            "scope": "default",
+            "line": {
+                "start": 161,
+                "end": 161
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The outline offset of the focused ColorGradient.\n",
+        "commentRange": {
+            "start": 162,
+            "end": 163
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-color-gradient-focus-outline-offset",
+            "value": "4px",
+            "scope": "default",
+            "line": {
+                "start": 164,
+                "end": 164
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The size map of the ColorEditor.\n",
+        "commentRange": {
+            "start": 166,
+            "end": 167
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-editor-sizes",
+            "value": "(\n    sm: (\n        min-width: $kendo-color-editor-sm-min-width,\n        header-padding-x: $kendo-color-editor-sm-header-padding-x,\n        header-padding-y: $kendo-color-editor-sm-header-padding-y,\n        views-padding-x: $kendo-color-editor-sm-views-padding-x,\n        views-padding-y: $kendo-color-editor-sm-views-padding-y,\n        preview-gap: $kendo-color-editor-sm-preview-gap,\n        preview-width: $kendo-color-editor-sm-color-preview-width,\n        preview-height: $kendo-color-editor-sm-color-preview-height,\n\n    ),\n    md: (\n        min-width: $kendo-color-editor-md-min-width,\n        header-padding-x: $kendo-color-editor-md-header-padding-x,\n        header-padding-y: $kendo-color-editor-md-header-padding-y,\n        views-padding-x: $kendo-color-editor-md-views-padding-x,\n        views-padding-y: $kendo-color-editor-md-views-padding-y,\n        preview-gap: $kendo-color-editor-md-preview-gap,\n        preview-width: $kendo-color-editor-md-color-preview-width,\n        preview-height: $kendo-color-editor-md-color-preview-height,\n    ),\n    lg: (\n        min-width: $kendo-color-editor-lg-min-width,\n        header-padding-x: $kendo-color-editor-lg-header-padding-x,\n        header-padding-y: $kendo-color-editor-lg-header-padding-y,\n        views-padding-x: $kendo-color-editor-lg-views-padding-x,\n        views-padding-y: $kendo-color-editor-lg-views-padding-y,\n        preview-gap: $kendo-color-editor-lg-preview-gap,\n        preview-width: $kendo-color-editor-lg-color-preview-width,\n        preview-height: $kendo-color-editor-lg-color-preview-height,\n    )\n)",
+            "scope": "default",
+            "line": {
+                "start": 168,
+                "end": 200
+            }
+        },
+        "group": [
+            "color-editor"
+        ],
+        "access": "public",
+        "file": {
+            "path": "coloreditor/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The spacer of the ColorGradient.\n",
+        "commentRange": {
+            "start": 6,
+            "end": 7
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-spacer",
+            "value": "k-spacing(3)",
+            "scope": "default",
+            "line": {
+                "start": 8,
+                "end": 8
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The width of the ColorGradient.\n",
+        "commentRange": {
+            "start": 10,
+            "end": 11
         },
         "context": {
             "type": "variable",
@@ -13686,8 +14386,533 @@
             "value": "272px",
             "scope": "default",
             "line": {
-                "start": 12,
-                "end": 12
+                "start": 12,
+                "end": 12
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The width of the border around the ColorGradient.\n",
+        "commentRange": {
+            "start": 13,
+            "end": 14
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-border-width",
+            "value": "1px",
+            "scope": "default",
+            "line": {
+                "start": 15,
+                "end": 15
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The border radius of the ColorGradient.\n",
+        "commentRange": {
+            "start": 16,
+            "end": 17
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-border-radius",
+            "value": "k-border-radius(md)",
+            "scope": "default",
+            "line": {
+                "start": 18,
+                "end": 18
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The vertical padding of the ColorGradient.\n",
+        "commentRange": {
+            "start": 19,
+            "end": 20
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-padding-y",
+            "value": "$kendo-color-gradient-spacer",
+            "scope": "default",
+            "line": {
+                "start": 21,
+                "end": 21
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the ColorGradient.\n",
+        "commentRange": {
+            "start": 22,
+            "end": 23
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-padding-x",
+            "value": "$kendo-color-gradient-padding-y",
+            "scope": "default",
+            "line": {
+                "start": 24,
+                "end": 24
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The spacing between the sections of the ColorGradient.\n",
+        "commentRange": {
+            "start": 25,
+            "end": 26
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-gap",
+            "value": "$kendo-color-gradient-spacer",
+            "scope": "default",
+            "line": {
+                "start": 27,
+                "end": 27
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The font family of the ColorGradient.\n",
+        "commentRange": {
+            "start": 28,
+            "end": 29
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-font-family",
+            "value": "var( --kendo-font-family, inherit )",
+            "scope": "default",
+            "line": {
+                "start": 30,
+                "end": 30
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The font size of the ColorGradient.\n",
+        "commentRange": {
+            "start": 31,
+            "end": 32
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-font-size",
+            "value": "var( --kendo-font-size, inherit )",
+            "scope": "default",
+            "line": {
+                "start": 33,
+                "end": 33
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The line height of the ColorGradient.\n",
+        "commentRange": {
+            "start": 34,
+            "end": 35
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-line-height",
+            "value": "var( --kendo-line-height, normal )",
+            "scope": "default",
+            "line": {
+                "start": 36,
+                "end": 36
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The text color of the ColorGradient.\n",
+        "commentRange": {
+            "start": 37,
+            "end": 38
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-text",
+            "value": "$kendo-component-text",
+            "scope": "default",
+            "line": {
+                "start": 39,
+                "end": 39
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The background color of the ColorGradient.\n",
+        "commentRange": {
+            "start": 40,
+            "end": 41
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-bg",
+            "value": "$kendo-component-bg",
+            "scope": "default",
+            "line": {
+                "start": 42,
+                "end": 42
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The border color of the ColorGradient.\n",
+        "commentRange": {
+            "start": 43,
+            "end": 44
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-border",
+            "value": "$kendo-component-border",
+            "scope": "default",
+            "line": {
+                "start": 45,
+                "end": 45
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The width of the small ColorGradient.\n",
+        "commentRange": {
+            "start": 47,
+            "end": 48
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-sm-width",
+            "value": "226px",
+            "scope": "default",
+            "line": {
+                "start": 49,
+                "end": 49
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The width of the medium ColorGradient.\n",
+        "commentRange": {
+            "start": 50,
+            "end": 51
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-md-width",
+            "value": "$kendo-color-gradient-width",
+            "scope": "default",
+            "line": {
+                "start": 52,
+                "end": 52
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The width of the large ColorGradient.\n",
+        "commentRange": {
+            "start": 53,
+            "end": 54
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-lg-width",
+            "value": "324px",
+            "scope": "default",
+            "line": {
+                "start": 55,
+                "end": 55
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The spacing between the sections of the small ColorGradient.\n",
+        "commentRange": {
+            "start": 57,
+            "end": 58
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-sm-gap",
+            "value": "$kendo-color-gradient-gap",
+            "scope": "default",
+            "line": {
+                "start": 59,
+                "end": 59
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The spacing between the sections of the medium ColorGradient.\n",
+        "commentRange": {
+            "start": 60,
+            "end": 61
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-md-gap",
+            "value": "$kendo-color-gradient-gap",
+            "scope": "default",
+            "line": {
+                "start": 62,
+                "end": 62
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The spacing between the sections of the large ColorGradient.\n",
+        "commentRange": {
+            "start": 63,
+            "end": 64
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-lg-gap",
+            "value": "k-spacing(4.5)",
+            "scope": "default",
+            "line": {
+                "start": 65,
+                "end": 65
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The border color of the focused ColorGradient.\n",
+        "commentRange": {
+            "start": 67,
+            "end": 68
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-focus-border",
+            "value": "null",
+            "scope": "default",
+            "line": {
+                "start": 69,
+                "end": 69
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The box shadow of the focused ColorGradient.\n",
+        "commentRange": {
+            "start": 70,
+            "end": 71
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-focus-shadow",
+            "value": "k-elevation(3)",
+            "scope": "default",
+            "line": {
+                "start": 72,
+                "end": 72
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The border radius of the ColorGradient canvas.\n",
+        "commentRange": {
+            "start": 74,
+            "end": 75
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-canvas-border-radius",
+            "value": "k-border-radius(md)",
+            "scope": "default",
+            "line": {
+                "start": 76,
+                "end": 76
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The spacing between the items of the ColorGradient canvas.\n",
+        "commentRange": {
+            "start": 77,
+            "end": 78
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-canvas-gap",
+            "value": "$kendo-color-gradient-spacer",
+            "scope": "default",
+            "line": {
+                "start": 79,
+                "end": 79
             }
         },
         "group": [
@@ -13700,19 +14925,19 @@
         }
     },
     {
-        "description": "The width of the border around the ColorGradient.\n",
+        "description": "The height the ColorGradient canvas hsv rectangle.\n",
         "commentRange": {
-            "start": 13,
-            "end": 14
+            "start": 80,
+            "end": 81
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-border-width",
-            "value": "1px",
+            "name": "kendo-color-gradient-canvas-rectangle-height",
+            "value": "180px",
             "scope": "default",
             "line": {
-                "start": 15,
-                "end": 15
+                "start": 82,
+                "end": 82
             }
         },
         "group": [
@@ -13725,19 +14950,19 @@
         }
     },
     {
-        "description": "The border radius of the ColorGradient.\n",
+        "description": "The height the small ColorGradient canvas hsv rectangle.\n",
         "commentRange": {
-            "start": 16,
-            "end": 17
+            "start": 83,
+            "end": 84
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-border-radius",
-            "value": "k-border-radius(md)",
+            "name": "kendo-color-gradient-sm-canvas-rectangle-height",
+            "value": "182px",
             "scope": "default",
             "line": {
-                "start": 18,
-                "end": 18
+                "start": 85,
+                "end": 85
             }
         },
         "group": [
@@ -13750,19 +14975,19 @@
         }
     },
     {
-        "description": "The vertical padding of the ColorGradient.\n",
+        "description": "The height the medium ColorGradient canvas hsv rectangle.\n",
         "commentRange": {
-            "start": 19,
-            "end": 20
+            "start": 86,
+            "end": 87
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-padding-y",
-            "value": "$kendo-color-gradient-spacer",
+            "name": "kendo-color-gradient-md-canvas-rectangle-height",
+            "value": "$kendo-color-gradient-canvas-rectangle-height",
             "scope": "default",
             "line": {
-                "start": 21,
-                "end": 21
+                "start": 88,
+                "end": 88
             }
         },
         "group": [
@@ -13775,19 +15000,19 @@
         }
     },
     {
-        "description": "The horizontal padding of the ColorGradient.\n",
+        "description": "The height the large ColorGradient canvas hsv rectangle.\n",
         "commentRange": {
-            "start": 22,
-            "end": 23
+            "start": 89,
+            "end": 90
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-padding-x",
-            "value": "$kendo-color-gradient-padding-y",
+            "name": "kendo-color-gradient-lg-canvas-rectangle-height",
+            "value": "268px",
             "scope": "default",
             "line": {
-                "start": 24,
-                "end": 24
+                "start": 91,
+                "end": 91
             }
         },
         "group": [
@@ -13800,19 +15025,19 @@
         }
     },
     {
-        "description": "The spacing between the sections of the ColorGradient.\n",
+        "description": "The spacing between the items of the small ColorGradient canvas.\n",
         "commentRange": {
-            "start": 25,
-            "end": 26
+            "start": 93,
+            "end": 94
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-gap",
-            "value": "$kendo-color-gradient-spacer",
+            "name": "kendo-color-gradient-sm-canvas-gap",
+            "value": "$kendo-color-gradient-canvas-gap",
             "scope": "default",
             "line": {
-                "start": 27,
-                "end": 27
+                "start": 95,
+                "end": 95
             }
         },
         "group": [
@@ -13825,19 +15050,19 @@
         }
     },
     {
-        "description": "The font family of the ColorGradient.\n",
+        "description": "The spacing between the items of the medium ColorGradient canvas.\n",
         "commentRange": {
-            "start": 28,
-            "end": 29
+            "start": 96,
+            "end": 97
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-font-family",
-            "value": "var( --kendo-font-family, inherit )",
+            "name": "kendo-color-gradient-md-canvas-gap",
+            "value": "$kendo-color-gradient-canvas-gap",
             "scope": "default",
             "line": {
-                "start": 30,
-                "end": 30
+                "start": 98,
+                "end": 98
             }
         },
         "group": [
@@ -13850,19 +15075,19 @@
         }
     },
     {
-        "description": "The font size of the ColorGradient.\n",
+        "description": "The spacing between the items of the large ColorGradient canvas.\n",
         "commentRange": {
-            "start": 31,
-            "end": 32
+            "start": 99,
+            "end": 100
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-font-size",
-            "value": "var( --kendo-font-size, inherit )",
+            "name": "kendo-color-gradient-lg-canvas-gap",
+            "value": "k-spacing(4.5)",
             "scope": "default",
             "line": {
-                "start": 33,
-                "end": 33
+                "start": 101,
+                "end": 101
             }
         },
         "group": [
@@ -13875,19 +15100,19 @@
         }
     },
     {
-        "description": "The line height of the ColorGradient.\n",
+        "description": "The width of the ColorGradient slider.\n",
         "commentRange": {
-            "start": 34,
-            "end": 35
+            "start": 103,
+            "end": 104
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-line-height",
-            "value": "var( --kendo-line-height, normal )",
+            "name": "kendo-color-gradient-slider-track-size",
+            "value": "10px",
             "scope": "default",
             "line": {
-                "start": 36,
-                "end": 36
+                "start": 105,
+                "end": 105
             }
         },
         "group": [
@@ -13900,19 +15125,19 @@
         }
     },
     {
-        "description": "The text color of the ColorGradient.\n",
+        "description": "The border radius of the ColorGradient slider.\n",
         "commentRange": {
-            "start": 37,
-            "end": 38
+            "start": 106,
+            "end": 107
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-text",
-            "value": "$kendo-component-text",
+            "name": "kendo-color-gradient-slider-border-radius",
+            "value": "10px",
             "scope": "default",
             "line": {
-                "start": 39,
-                "end": 39
+                "start": 108,
+                "end": 108
             }
         },
         "group": [
@@ -13925,19 +15150,19 @@
         }
     },
     {
-        "description": "The background color of the ColorGradient.\n",
+        "description": "The width of the border around the ColorGradient slider drag handle.\n",
         "commentRange": {
-            "start": 40,
-            "end": 41
+            "start": 109,
+            "end": 110
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-bg",
-            "value": "$kendo-component-bg",
+            "name": "kendo-color-gradient-slider-draghandle-border-width",
+            "value": "3px",
             "scope": "default",
             "line": {
-                "start": 42,
-                "end": 42
+                "start": 111,
+                "end": 111
             }
         },
         "group": [
@@ -13950,19 +15175,19 @@
         }
     },
     {
-        "description": "The border color of the ColorGradient.\n",
+        "description": "The height of the ColorGradient vertical slider.\n",
         "commentRange": {
-            "start": 43,
-            "end": 44
+            "start": 113,
+            "end": 114
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-border",
-            "value": "$kendo-component-border",
+            "name": "kendo-color-gradient-slider-vertical-size",
+            "value": "180px",
             "scope": "default",
             "line": {
-                "start": 45,
-                "end": 45
+                "start": 115,
+                "end": 115
             }
         },
         "group": [
@@ -13975,19 +15200,19 @@
         }
     },
     {
-        "description": "The border color of the focused ColorGradient.\n",
+        "description": "The width of the ColorGradient horizontal slider.\n",
         "commentRange": {
-            "start": 47,
-            "end": 48
+            "start": 116,
+            "end": 117
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-focus-border",
-            "value": "null",
+            "name": "kendo-color-gradient-slider-horizontal-size",
+            "value": "100%",
             "scope": "default",
             "line": {
-                "start": 49,
-                "end": 49
+                "start": 118,
+                "end": 118
             }
         },
         "group": [
@@ -14000,19 +15225,119 @@
         }
     },
     {
-        "description": "The box shadow of the focused ColorGradient.\n",
+        "description": "The background image of the ColorGradient alpha slider.\n",
         "commentRange": {
-            "start": 50,
-            "end": 51
+            "start": 119,
+            "end": 120
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-slider-alpha-bgr",
+            "value": "\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC\"",
+            "scope": "default",
+            "line": {
+                "start": 121,
+                "end": 121
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The height of the small ColorGradient vertical slider.\n",
+        "commentRange": {
+            "start": 123,
+            "end": 124
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-sm-slider-vertical-size",
+            "value": "182px",
+            "scope": "default",
+            "line": {
+                "start": 125,
+                "end": 125
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The height of the medium ColorGradient vertical slider.\n",
+        "commentRange": {
+            "start": 126,
+            "end": 127
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-md-slider-vertical-size",
+            "value": "$kendo-color-gradient-slider-vertical-size",
+            "scope": "default",
+            "line": {
+                "start": 128,
+                "end": 128
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The height of the large ColorGradient vertical slider.\n",
+        "commentRange": {
+            "start": 129,
+            "end": 130
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-color-gradient-lg-slider-vertical-size",
+            "value": "268px",
+            "scope": "default",
+            "line": {
+                "start": 131,
+                "end": 131
+            }
+        },
+        "group": [
+            "color-gradient"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorgradient/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The width of the ColorGradient canvas drag handle.\n",
+        "commentRange": {
+            "start": 133,
+            "end": 134
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-focus-shadow",
-            "value": "k-elevation(3)",
+            "name": "kendo-color-gradient-draghandle-width",
+            "value": "14px",
             "scope": "default",
             "line": {
-                "start": 52,
-                "end": 52
+                "start": 135,
+                "end": 135
             }
         },
         "group": [
@@ -14025,19 +15350,19 @@
         }
     },
     {
-        "description": "The border radius of the ColorGradient canvas.\n",
+        "description": "The height of the ColorGradient canvas drag handle.\n",
         "commentRange": {
-            "start": 54,
-            "end": 55
+            "start": 136,
+            "end": 137
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-canvas-border-radius",
-            "value": "k-border-radius(md)",
+            "name": "kendo-color-gradient-draghandle-height",
+            "value": "14px",
             "scope": "default",
             "line": {
-                "start": 56,
-                "end": 56
+                "start": 138,
+                "end": 138
             }
         },
         "group": [
@@ -14050,19 +15375,19 @@
         }
     },
     {
-        "description": "The spacing between the items of the ColorGradient canvas.\n",
+        "description": "The width of the border around the ColorGradient canvas drag handle.\n",
         "commentRange": {
-            "start": 57,
-            "end": 58
+            "start": 139,
+            "end": 140
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-canvas-gap",
-            "value": "$kendo-color-gradient-spacer",
+            "name": "kendo-color-gradient-draghandle-border-width",
+            "value": "1px",
             "scope": "default",
             "line": {
-                "start": 59,
-                "end": 59
+                "start": 141,
+                "end": 141
             }
         },
         "group": [
@@ -14075,19 +15400,19 @@
         }
     },
     {
-        "description": "The height the ColorGradient canvas hsv rectangle.\n",
+        "description": "The width of the outline around the ColorGradient canvas drag handle.\n",
         "commentRange": {
-            "start": 60,
-            "end": 61
+            "start": 142,
+            "end": 143
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-canvas-rectangle-height",
-            "value": "180px",
+            "name": "kendo-color-gradient-draghandle-outline-width",
+            "value": "1px",
             "scope": "default",
             "line": {
-                "start": 62,
-                "end": 62
+                "start": 144,
+                "end": 144
             }
         },
         "group": [
@@ -14100,19 +15425,19 @@
         }
     },
     {
-        "description": "The width of the ColorGradient slider.\n",
+        "description": "The border radius of the ColorGradient canvas drag handle.\n",
         "commentRange": {
-            "start": 64,
-            "end": 65
+            "start": 145,
+            "end": 146
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-slider-track-size",
-            "value": "10px",
+            "name": "kendo-color-gradient-draghandle-border-radius",
+            "value": "50%",
             "scope": "default",
             "line": {
-                "start": 66,
-                "end": 66
+                "start": 147,
+                "end": 147
             }
         },
         "group": [
@@ -14125,19 +15450,19 @@
         }
     },
     {
-        "description": "The border radius of the ColorGradient slider.\n",
+        "description": "The text color of the ColorGradient canvas drag handle.\n",
         "commentRange": {
-            "start": 67,
-            "end": 68
+            "start": 148,
+            "end": 149
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-slider-border-radius",
-            "value": "10px",
+            "name": "kendo-color-gradient-draghandle-text",
+            "value": "null",
             "scope": "default",
             "line": {
-                "start": 69,
-                "end": 69
+                "start": 150,
+                "end": 150
             }
         },
         "group": [
@@ -14150,19 +15475,19 @@
         }
     },
     {
-        "description": "The width of the border around the ColorGradient slider drag handle.\n",
+        "description": "The background color of the ColorGradient canvas drag handle.\n",
         "commentRange": {
-            "start": 70,
-            "end": 71
+            "start": 151,
+            "end": 152
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-slider-draghandle-border-width",
-            "value": "3px",
+            "name": "kendo-color-gradient-draghandle-bg",
+            "value": "transparent",
             "scope": "default",
             "line": {
-                "start": 72,
-                "end": 72
+                "start": 153,
+                "end": 153
             }
         },
         "group": [
@@ -14175,19 +15500,19 @@
         }
     },
     {
-        "description": "The height of the ColorGradient vertical slider.\n",
+        "description": "The color of the border around the ColorGradient canvas drag handle.\n",
         "commentRange": {
-            "start": 74,
-            "end": 75
+            "start": 154,
+            "end": 155
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-slider-vertical-size",
-            "value": "180px",
+            "name": "kendo-color-gradient-draghandle-border",
+            "value": "rgba( white, .8)",
             "scope": "default",
             "line": {
-                "start": 76,
-                "end": 76
+                "start": 156,
+                "end": 156
             }
         },
         "group": [
@@ -14200,19 +15525,19 @@
         }
     },
     {
-        "description": "The width of the ColorGradient horizontal slider.\n",
+        "description": "The focus color of the outline around the ColorGradient canvas drag handle.\n",
         "commentRange": {
-            "start": 77,
-            "end": 78
+            "start": 157,
+            "end": 158
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-slider-horizontal-size",
-            "value": "100%",
+            "name": "kendo-color-gradient-draghandle-focus-shadow",
+            "value": "$kendo-color-black",
             "scope": "default",
             "line": {
-                "start": 79,
-                "end": 79
+                "start": 159,
+                "end": 159
             }
         },
         "group": [
@@ -14225,19 +15550,19 @@
         }
     },
     {
-        "description": "The background image of the ColorGradient alpha slider.\n",
+        "description": "The outline color of the outline around the ColorGradient canvas drag handle.\n",
         "commentRange": {
-            "start": 80,
-            "end": 81
+            "start": 160,
+            "end": 161
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-slider-alpha-bgr",
-            "value": "\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC\"",
+            "name": "kendo-color-gradient-draghandle-hover-shadow",
+            "value": "$kendo-color-black",
             "scope": "default",
             "line": {
-                "start": 82,
-                "end": 82
+                "start": 162,
+                "end": 162
             }
         },
         "group": [
@@ -14250,19 +15575,19 @@
         }
     },
     {
-        "description": "The width of the ColorGradient canvas drag handle.\n",
+        "description": "The box shadow of the ColorGradient canvas drag handle.\n",
         "commentRange": {
-            "start": 84,
-            "end": 85
+            "start": 163,
+            "end": 164
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-draghandle-width",
-            "value": "14px",
+            "name": "kendo-color-gradient-draghandle-shadow",
+            "value": "k-elevation(2)",
             "scope": "default",
             "line": {
-                "start": 86,
-                "end": 86
+                "start": 165,
+                "end": 165
             }
         },
         "group": [
@@ -14275,19 +15600,19 @@
         }
     },
     {
-        "description": "The height of the ColorGradient canvas drag handle.\n",
+        "description": "The vertical margin of the ColorGradient canvas drag handle.\n",
         "commentRange": {
-            "start": 87,
-            "end": 88
+            "start": 167,
+            "end": 168
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-draghandle-height",
-            "value": "14px",
+            "name": "kendo-color-gradient-canvas-draghandle-margin-y",
+            "value": "- math.div( $kendo-color-gradient-draghandle-height, 2 )",
             "scope": "default",
             "line": {
-                "start": 89,
-                "end": 89
+                "start": 169,
+                "end": 169
             }
         },
         "group": [
@@ -14300,19 +15625,19 @@
         }
     },
     {
-        "description": "The width of the border around the ColorGradient canvas drag handle.\n",
+        "description": "The horizontal margin of the ColorGradient canvas drag handle.\n",
         "commentRange": {
-            "start": 90,
-            "end": 91
+            "start": 170,
+            "end": 171
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-draghandle-border-width",
-            "value": "1px",
+            "name": "kendo-color-gradient-canvas-draghandle-margin-x",
+            "value": "- math.div( $kendo-color-gradient-draghandle-width, 2 )",
             "scope": "default",
             "line": {
-                "start": 92,
-                "end": 92
+                "start": 172,
+                "end": 172
             }
         },
         "group": [
@@ -14325,19 +15650,19 @@
         }
     },
     {
-        "description": "The width of the outline around the ColorGradient canvas drag handle.\n",
+        "description": "The width of the ColorGradient input.\n",
         "commentRange": {
-            "start": 93,
-            "end": 94
+            "start": 174,
+            "end": 175
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-draghandle-outline-width",
-            "value": "1px",
+            "name": "kendo-color-gradient-input-width",
+            "value": "46px",
             "scope": "default",
             "line": {
-                "start": 95,
-                "end": 95
+                "start": 176,
+                "end": 176
             }
         },
         "group": [
@@ -14350,19 +15675,19 @@
         }
     },
     {
-        "description": "The border radius of the ColorGradient canvas drag handle.\n",
+        "description": "The spacing between the ColorGradient inputs.\n",
         "commentRange": {
-            "start": 96,
-            "end": 97
+            "start": 177,
+            "end": 178
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-draghandle-border-radius",
-            "value": "50%",
+            "name": "kendo-color-gradient-input-gap",
+            "value": "k-spacing(2)",
             "scope": "default",
             "line": {
-                "start": 98,
-                "end": 98
+                "start": 179,
+                "end": 179
             }
         },
         "group": [
@@ -14375,19 +15700,19 @@
         }
     },
     {
-        "description": "The text color of the ColorGradient canvas drag handle.\n",
+        "description": "The spacing between the ColorGradient inputs and their labels.\n",
         "commentRange": {
-            "start": 99,
-            "end": 100
+            "start": 180,
+            "end": 181
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-draghandle-text",
-            "value": "null",
+            "name": "kendo-color-gradient-input-label-gap",
+            "value": "calc( #{$kendo-color-gradient-spacer} / 3 )",
             "scope": "default",
             "line": {
-                "start": 101,
-                "end": 101
+                "start": 182,
+                "end": 182
             }
         },
         "group": [
@@ -14400,19 +15725,19 @@
         }
     },
     {
-        "description": "The background color of the ColorGradient canvas drag handle.\n",
+        "description": "The text color of the ColorGradient input labels.\n",
         "commentRange": {
-            "start": 102,
-            "end": 103
+            "start": 183,
+            "end": 184
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-draghandle-bg",
-            "value": "transparent",
+            "name": "kendo-color-gradient-input-label-text",
+            "value": "$kendo-subtle-text",
             "scope": "default",
             "line": {
-                "start": 104,
-                "end": 104
+                "start": 185,
+                "end": 185
             }
         },
         "group": [
@@ -14425,19 +15750,19 @@
         }
     },
     {
-        "description": "The color of the border around the ColorGradient canvas drag handle.\n",
+        "description": "The width of the small ColorGradient input.\n",
         "commentRange": {
-            "start": 105,
-            "end": 106
+            "start": 187,
+            "end": 188
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-draghandle-border",
-            "value": "rgba( white, .8)",
+            "name": "kendo-color-gradient-sm-input-width",
+            "value": "42px",
             "scope": "default",
             "line": {
-                "start": 107,
-                "end": 107
+                "start": 189,
+                "end": 189
             }
         },
         "group": [
@@ -14450,19 +15775,19 @@
         }
     },
     {
-        "description": "The focus color of the outline around the ColorGradient canvas drag handle.\n",
+        "description": "The width of the medium ColorGradient input.\n",
         "commentRange": {
-            "start": 108,
-            "end": 109
+            "start": 190,
+            "end": 191
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-draghandle-focus-shadow",
-            "value": "$kendo-color-black",
+            "name": "kendo-color-gradient-md-input-width",
+            "value": "$kendo-color-gradient-input-width",
             "scope": "default",
             "line": {
-                "start": 110,
-                "end": 110
+                "start": 192,
+                "end": 192
             }
         },
         "group": [
@@ -14475,19 +15800,19 @@
         }
     },
     {
-        "description": "The outline color of the outline around the ColorGradient canvas drag handle.\n",
+        "description": "The width of the large ColorGradient input.\n",
         "commentRange": {
-            "start": 111,
-            "end": 112
+            "start": 193,
+            "end": 194
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-draghandle-hover-shadow",
-            "value": "$kendo-color-black",
+            "name": "kendo-color-gradient-lg-input-width",
+            "value": "62.5px",
             "scope": "default",
             "line": {
-                "start": 113,
-                "end": 113
+                "start": 195,
+                "end": 195
             }
         },
         "group": [
@@ -14500,19 +15825,19 @@
         }
     },
     {
-        "description": "The box shadow of the ColorGradient canvas drag handle.\n",
+        "description": "The font weight of the ColorGradient contrast ratio text.\n",
         "commentRange": {
-            "start": 114,
-            "end": 115
+            "start": 197,
+            "end": 198
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-draghandle-shadow",
-            "value": "k-elevation(2)",
+            "name": "kendo-color-gradient-contrast-ratio-font-weight",
+            "value": "var( --kendo-font-weight-bold, normal )",
             "scope": "default",
             "line": {
-                "start": 116,
-                "end": 116
+                "start": 199,
+                "end": 199
             }
         },
         "group": [
@@ -14525,19 +15850,19 @@
         }
     },
     {
-        "description": "The vertical margin of the ColorGradient canvas drag handle.\n",
+        "description": "The spacing between the items in the ColorGradient contrast tool.\n",
         "commentRange": {
-            "start": 118,
-            "end": 119
+            "start": 200,
+            "end": 201
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-canvas-draghandle-margin-y",
-            "value": "- math.div( $kendo-color-gradient-draghandle-height, 2 )",
+            "name": "kendo-color-gradient-contrast-spacer",
+            "value": "calc( #{$kendo-color-gradient-spacer} / 1.5 )",
             "scope": "default",
             "line": {
-                "start": 120,
-                "end": 120
+                "start": 202,
+                "end": 202
             }
         },
         "group": [
@@ -14550,19 +15875,19 @@
         }
     },
     {
-        "description": "The horizontal margin of the ColorGradient canvas drag handle.\n",
+        "description": "The size map of the ColorGradient.\n",
         "commentRange": {
-            "start": 121,
-            "end": 122
+            "start": 204,
+            "end": 205
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-canvas-draghandle-margin-x",
-            "value": "- math.div( $kendo-color-gradient-draghandle-width, 2 )",
+            "name": "kendo-color-gradient-sizes",
+            "value": "(\n    sm: (\n        width: $kendo-color-gradient-sm-width,\n        vertical-slider-height: $kendo-color-gradient-sm-slider-vertical-size,\n        rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,\n        input-width: $kendo-color-gradient-sm-input-width,\n        gap: $kendo-color-gradient-sm-gap,\n        canvas-gap: $kendo-color-gradient-sm-canvas-gap\n    ),\n    md: (\n        width: $kendo-color-gradient-md-width,\n        vertical-slider-height: $kendo-color-gradient-md-slider-vertical-size,\n        rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,\n        input-width: $kendo-color-gradient-md-input-width,\n        gap: $kendo-color-gradient-md-gap,\n        canvas-gap: $kendo-color-gradient-md-canvas-gap\n    ),\n    lg: (\n        width: $kendo-color-gradient-lg-width,\n        vertical-slider-height: $kendo-color-gradient-lg-slider-vertical-size,\n        rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,\n        input-width: $kendo-color-gradient-lg-input-width,\n        gap: $kendo-color-gradient-lg-gap,\n        canvas-gap: $kendo-color-gradient-lg-canvas-gap\n    )\n)",
             "scope": "default",
             "line": {
-                "start": 123,
-                "end": 123
+                "start": 206,
+                "end": 231
             }
         },
         "group": [
@@ -14575,169 +15900,169 @@
         }
     },
     {
-        "description": "The width of the ColorGradient input.\n",
+        "description": "The font family of the ColorPalette.\n",
         "commentRange": {
-            "start": 125,
-            "end": 126
+            "start": 5,
+            "end": 6
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-input-width",
-            "value": "46px",
+            "name": "kendo-color-palette-font-family",
+            "value": "var( --kendo-font-family, inherit )",
             "scope": "default",
             "line": {
-                "start": 127,
-                "end": 127
+                "start": 7,
+                "end": 7
             }
         },
         "group": [
-            "color-gradient"
+            "color-palette"
         ],
         "access": "public",
         "file": {
-            "path": "colorgradient/_variables.scss",
+            "path": "colorpalette/_variables.scss",
             "name": "_variables.scss"
         }
     },
     {
-        "description": "The spacing between the ColorGradient inputs.\n",
+        "description": "The font size of the ColorPalette.\n",
         "commentRange": {
-            "start": 128,
-            "end": 129
+            "start": 8,
+            "end": 9
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-input-gap",
-            "value": "calc( #{$kendo-color-gradient-spacer} / 1.5 )",
+            "name": "kendo-color-palette-font-size",
+            "value": "var( --kendo-font-size, inherit )",
             "scope": "default",
             "line": {
-                "start": 130,
-                "end": 130
+                "start": 10,
+                "end": 10
             }
         },
         "group": [
-            "color-gradient"
+            "color-palette"
         ],
         "access": "public",
         "file": {
-            "path": "colorgradient/_variables.scss",
+            "path": "colorpalette/_variables.scss",
             "name": "_variables.scss"
         }
     },
     {
-        "description": "The spacing between the ColorGradient inputs and their labels.\n",
+        "description": "The line height of the ColorPalette.\n",
         "commentRange": {
-            "start": 131,
-            "end": 132
+            "start": 11,
+            "end": 12
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-input-label-gap",
-            "value": "calc( #{$kendo-color-gradient-spacer} / 3 )",
+            "name": "kendo-color-palette-line-height",
+            "value": "0",
             "scope": "default",
             "line": {
-                "start": 133,
-                "end": 133
+                "start": 13,
+                "end": 13
             }
         },
         "group": [
-            "color-gradient"
+            "color-palette"
         ],
         "access": "public",
         "file": {
-            "path": "colorgradient/_variables.scss",
+            "path": "colorpalette/_variables.scss",
             "name": "_variables.scss"
         }
     },
     {
-        "description": "The text color of the ColorGradient input labels.\n",
+        "description": "The width of the ColorPalette tile.\n",
         "commentRange": {
-            "start": 134,
-            "end": 135
+            "start": 15,
+            "end": 16
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-input-label-text",
-            "value": "$kendo-subtle-text",
+            "name": "kendo-color-palette-tile-width",
+            "value": "k-spacing(6)",
             "scope": "default",
             "line": {
-                "start": 136,
-                "end": 136
+                "start": 17,
+                "end": 17
             }
         },
         "group": [
-            "color-gradient"
+            "color-palette"
         ],
         "access": "public",
         "file": {
-            "path": "colorgradient/_variables.scss",
+            "path": "colorpalette/_variables.scss",
             "name": "_variables.scss"
         }
     },
     {
-        "description": "The font weight of the ColorGradient contrast ratio text.\n",
+        "description": "The height of the ColorPalette tile.\n",
         "commentRange": {
-            "start": 138,
-            "end": 139
+            "start": 18,
+            "end": 19
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-contrast-ratio-font-weight",
-            "value": "var( --kendo-font-weight-bold, normal )",
+            "name": "kendo-color-palette-tile-height",
+            "value": "$kendo-color-palette-tile-width",
             "scope": "default",
             "line": {
-                "start": 140,
-                "end": 140
+                "start": 20,
+                "end": 20
             }
         },
         "group": [
-            "color-gradient"
+            "color-palette"
         ],
         "access": "public",
         "file": {
-            "path": "colorgradient/_variables.scss",
+            "path": "colorpalette/_variables.scss",
             "name": "_variables.scss"
         }
     },
     {
-        "description": "The spacing between the items in the ColorGradient contrast tool.\n",
+        "description": "The width of the small ColorPalette tile.\n",
         "commentRange": {
-            "start": 141,
-            "end": 142
+            "start": 21,
+            "end": 22
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-gradient-contrast-spacer",
-            "value": "calc( #{$kendo-color-gradient-spacer} / 1.5 )",
+            "name": "kendo-color-palette-tile-sm-width",
+            "value": "k-spacing(5.5)",
             "scope": "default",
             "line": {
-                "start": 143,
-                "end": 143
+                "start": 23,
+                "end": 23
             }
         },
         "group": [
-            "color-gradient"
+            "color-palette"
         ],
         "access": "public",
         "file": {
-            "path": "colorgradient/_variables.scss",
+            "path": "colorpalette/_variables.scss",
             "name": "_variables.scss"
         }
     },
     {
-        "description": "The font family of the ColorPalette.\n",
+        "description": "The height of the small ColorPalette tile.\n",
         "commentRange": {
-            "start": 5,
-            "end": 6
+            "start": 24,
+            "end": 25
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-palette-font-family",
-            "value": "var( --kendo-font-family, inherit )",
+            "name": "kendo-color-palette-tile-sm-height",
+            "value": "$kendo-color-palette-tile-sm-width",
             "scope": "default",
             "line": {
-                "start": 7,
-                "end": 7
+                "start": 26,
+                "end": 26
             }
         },
         "group": [
@@ -14750,19 +16075,19 @@
         }
     },
     {
-        "description": "The font size of the ColorPalette.\n",
+        "description": "The width of the medium ColorPalette tile.\n",
         "commentRange": {
-            "start": 8,
-            "end": 9
+            "start": 27,
+            "end": 28
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-palette-font-size",
-            "value": "var( --kendo-font-size, inherit )",
+            "name": "kendo-color-palette-tile-md-width",
+            "value": "$kendo-color-palette-tile-width",
             "scope": "default",
             "line": {
-                "start": 10,
-                "end": 10
+                "start": 29,
+                "end": 29
             }
         },
         "group": [
@@ -14775,19 +16100,19 @@
         }
     },
     {
-        "description": "The line height of the ColorPalette.\n",
+        "description": "The height of the medium ColorPalette tile.\n",
         "commentRange": {
-            "start": 11,
-            "end": 12
+            "start": 30,
+            "end": 31
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-palette-line-height",
-            "value": "0",
+            "name": "kendo-color-palette-tile-md-height",
+            "value": "$kendo-color-palette-tile-height",
             "scope": "default",
             "line": {
-                "start": 13,
-                "end": 13
+                "start": 32,
+                "end": 32
             }
         },
         "group": [
@@ -14800,19 +16125,19 @@
         }
     },
     {
-        "description": "The width of the ColorPalette tile.\n",
+        "description": "The width of the large ColorPalette tile.\n",
         "commentRange": {
-            "start": 15,
-            "end": 16
+            "start": 33,
+            "end": 34
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-palette-tile-width",
-            "value": "k-spacing(6)",
+            "name": "kendo-color-palette-tile-lg-width",
+            "value": "k-spacing(8)",
             "scope": "default",
             "line": {
-                "start": 17,
-                "end": 17
+                "start": 35,
+                "end": 35
             }
         },
         "group": [
@@ -14825,19 +16150,19 @@
         }
     },
     {
-        "description": "The height of the ColorPalette tile.\n",
+        "description": "The height of the large ColorPalette tile.\n",
         "commentRange": {
-            "start": 18,
-            "end": 19
+            "start": 36,
+            "end": 37
         },
         "context": {
             "type": "variable",
-            "name": "kendo-color-palette-tile-height",
-            "value": "$kendo-color-palette-tile-width",
+            "name": "kendo-color-palette-tile-lg-height",
+            "value": "$kendo-color-palette-tile-lg-width",
             "scope": "default",
             "line": {
-                "start": 20,
-                "end": 20
+                "start": 38,
+                "end": 38
             }
         },
         "group": [
@@ -14852,8 +16177,8 @@
     {
         "description": "The shadow of the ColorPalette focused tile.\n",
         "commentRange": {
-            "start": 21,
-            "end": 22
+            "start": 39,
+            "end": 40
         },
         "context": {
             "type": "variable",
@@ -14861,8 +16186,8 @@
             "value": "0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 )",
             "scope": "default",
             "line": {
-                "start": 23,
-                "end": 23
+                "start": 41,
+                "end": 41
             }
         },
         "group": [
@@ -14877,8 +16202,8 @@
     {
         "description": "The shadow of the ColorPalette hovered tile.\n",
         "commentRange": {
-            "start": 24,
-            "end": 25
+            "start": 42,
+            "end": 43
         },
         "context": {
             "type": "variable",
@@ -14886,8 +16211,8 @@
             "value": "0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .8 )",
             "scope": "default",
             "line": {
-                "start": 26,
-                "end": 26
+                "start": 44,
+                "end": 44
             }
         },
         "group": [
@@ -14902,8 +16227,8 @@
     {
         "description": "The shadow of the ColorPalette selected tile.\n",
         "commentRange": {
-            "start": 27,
-            "end": 28
+            "start": 45,
+            "end": 46
         },
         "context": {
             "type": "variable",
@@ -14911,8 +16236,33 @@
             "value": "0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 )",
             "scope": "default",
             "line": {
-                "start": 29,
-                "end": 29
+                "start": 47,
+                "end": 47
+            }
+        },
+        "group": [
+            "color-palette"
+        ],
+        "access": "public",
+        "file": {
+            "path": "colorpalette/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The size map of the ColorPalette.\n",
+        "commentRange": {
+            "start": 49,
+            "end": 50
+        },
+        "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)",
+            "scope": "default",
+            "line": {
+                "start": 51,
+                "end": 64
             }
         },
         "group": [