diff --git a/packages/bootstrap/docs/customization-color-editor.md b/packages/bootstrap/docs/customization-color-editor.md
index c68f640440..d499a1c267 100644
--- a/packages/bootstrap/docs/customization-color-editor.md
+++ b/packages/bootstrap/docs/customization-color-editor.md
@@ -47,6 +47,36 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-min-width</td>
+    <td>Number</td>
+    <td><code>252px</code></td>
+    <td><code>252px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-min-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-min-width</code></td>
+    <td><code>328px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-min-width</td>
+    <td>Number</td>
+    <td><code>362px</code></td>
+    <td><code>362px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-border-width</td>
     <td>Number</td>
@@ -177,6 +207,66 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the ColorEditor header actions.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-header-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-y</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-header-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-x</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-header-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-y</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-header-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-x</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-header-padding-y</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-header-padding-x</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large ColorEditor header.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-color-preview-width</td>
     <td>Number</td>
@@ -207,6 +297,96 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the ColorEditor preview.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-preview-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(1)</code></td>
+    <td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-preview-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-preview-gap</code></td>
+    <td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-preview-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(1)</code></td>
+    <td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the large ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-color-preview-width</td>
+    <td>Number</td>
+    <td><code>32px</code></td>
+    <td><code>32px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-color-preview-height</td>
+    <td>Number</td>
+    <td><code>10px</code></td>
+    <td><code>10px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-color-preview-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-color-preview-width</code></td>
+    <td><code>32px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-color-preview-height</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-color-preview-height</code></td>
+    <td><code>12px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-color-preview-width</td>
+    <td>Number</td>
+    <td><code>32px</code></td>
+    <td><code>32px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-color-preview-height</td>
+    <td>Number</td>
+    <td><code>12px</code></td>
+    <td><code>12px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorEditor preview.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-views-padding-y</td>
     <td>String</td>
@@ -237,6 +417,96 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the ColorEditor views container.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-spacer</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-y</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-spacer</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-y</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-x</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-gap</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-padding-y</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-padding-x</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-color-gradient-focus-outline-color</td>
     <td>Color</td>
@@ -267,6 +537,48 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The outline offset of the focused ColorGradient.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        min-width: $kendo-color-editor-sm-min-width,
+        header-padding-x: $kendo-color-editor-sm-header-padding-x,
+        header-padding-y: $kendo-color-editor-sm-header-padding-y,
+        views-padding-x: $kendo-color-editor-sm-views-padding-x,
+        views-padding-y: $kendo-color-editor-sm-views-padding-y,
+        preview-gap: $kendo-color-editor-sm-preview-gap,
+        preview-width: $kendo-color-editor-sm-color-preview-width,
+        preview-height: $kendo-color-editor-sm-color-preview-height,
+
+    ),
+    md: (
+        min-width: $kendo-color-editor-md-min-width,
+        header-padding-x: $kendo-color-editor-md-header-padding-x,
+        header-padding-y: $kendo-color-editor-md-header-padding-y,
+        views-padding-x: $kendo-color-editor-md-views-padding-x,
+        views-padding-y: $kendo-color-editor-md-views-padding-y,
+        preview-gap: $kendo-color-editor-md-preview-gap,
+        preview-width: $kendo-color-editor-md-color-preview-width,
+        preview-height: $kendo-color-editor-md-color-preview-height,
+    ),
+    lg: (
+        min-width: $kendo-color-editor-lg-min-width,
+        header-padding-x: $kendo-color-editor-lg-header-padding-x,
+        header-padding-y: $kendo-color-editor-lg-header-padding-y,
+        views-padding-x: $kendo-color-editor-lg-views-padding-x,
+        views-padding-y: $kendo-color-editor-lg-views-padding-y,
+        preview-gap: $kendo-color-editor-lg-preview-gap,
+        preview-width: $kendo-color-editor-lg-color-preview-width,
+        preview-height: $kendo-color-editor-lg-color-preview-height,
+    )
+)</code></td>
+    <td><ul><li>sm: "min-width":"252px","header-padding-x":"var(--kendo-spacing-4, 1rem)","header-padding-y":"var(--kendo-spacing-4, 1rem)","views-padding-x":"var(--kendo-spacing-4, 1rem)","views-padding-y":"var(--kendo-spacing-4, 1rem)","preview-gap":"var(--kendo-spacing-1, 0.25rem)","preview-width":"32px","preview-height":"10px"</li><li>md: "min-width":"328px","header-padding-x":"var(--kendo-spacing-4, 1rem)","header-padding-y":"var(--kendo-spacing-4, 1rem)","views-padding-x":"var(--kendo-spacing-4, 1rem)","views-padding-y":"var(--kendo-spacing-4, 1rem)","preview-gap":"var(--kendo-spacing-1, 0.25rem)","preview-width":"32px","preview-height":"12px"</li><li>lg: "min-width":"362px","header-padding-x":"var(--kendo-spacing-4\\.5, 1.125rem)","header-padding-y":"var(--kendo-spacing-4\\.5, 1.125rem)","views-padding-x":"var(--kendo-spacing-4\\.5, 1.125rem)","views-padding-y":"var(--kendo-spacing-4\\.5, 1.125rem)","preview-gap":"var(--kendo-spacing-1, 0.25rem)","preview-width":"32px","preview-height":"12px"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorEditor.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
diff --git a/packages/bootstrap/docs/customization-color-gradient.md b/packages/bootstrap/docs/customization-color-gradient.md
index ee74922964..fe0e30c1b7 100644
--- a/packages/bootstrap/docs/customization-color-gradient.md
+++ b/packages/bootstrap/docs/customization-color-gradient.md
@@ -157,6 +157,66 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the ColorGradient.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-width</td>
+    <td>Number</td>
+    <td><code>266px</code></td>
+    <td><code>266px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-width</code></td>
+    <td><code>328px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-width</td>
+    <td>Number</td>
+    <td><code>362px</code></td>
+    <td><code>362px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-sm-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-gap</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the small ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-gap</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the medium ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the large ColorGradient.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-focus-border</td>
     <td>String</td>
@@ -207,6 +267,66 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the ColorGradient canvas hsv rectangle.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>186px</code></td>
+    <td><code>186px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the small ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-canvas-rectangle-height</code></td>
+    <td><code>180px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the medium ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>268px</code></td>
+    <td><code>268px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the large ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-sm-canvas-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(3)</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the small ColorGradient canvas.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-canvas-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-canvas-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the medium ColorGradient canvas.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-canvas-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the large ColorGradient canvas.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-slider-track-size</td>
     <td>Number</td>
@@ -267,6 +387,36 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background image of the ColorGradient alpha slider.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>186px</code></td>
+    <td><code>186px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-slider-vertical-size</code></td>
+    <td><code>180px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>268px</code></td>
+    <td><code>268px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-draghandle-width</td>
     <td>Number</td>
@@ -437,6 +587,36 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the ColorGradient input labels.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-input-width</td>
+    <td>Number</td>
+    <td><code>42px</code></td>
+    <td><code>42px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorGradient input.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-input-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-input-width</code></td>
+    <td><code>56px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorGradient input.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-input-width</td>
+    <td>Number</td>
+    <td><code>62.5px</code></td>
+    <td><code>62.5px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorGradient input.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-contrast-ratio-font-weight</td>
     <td>String</td>
@@ -457,6 +637,41 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items in the ColorGradient contrast tool.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        width: $kendo-color-gradient-sm-width,
+        vertical-slider-height: $kendo-color-gradient-sm-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-sm-input-width,
+        gap: $kendo-color-gradient-sm-gap,
+        canvas-gap: $kendo-color-gradient-sm-canvas-gap
+    ),
+    md: (
+        width: $kendo-color-gradient-md-width,
+        vertical-slider-height: $kendo-color-gradient-md-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-md-input-width,
+        gap: $kendo-color-gradient-md-gap,
+        canvas-gap: $kendo-color-gradient-md-canvas-gap
+    ),
+    lg: (
+        width: $kendo-color-gradient-lg-width,
+        vertical-slider-height: $kendo-color-gradient-lg-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-lg-input-width,
+        gap: $kendo-color-gradient-lg-gap,
+        canvas-gap: $kendo-color-gradient-lg-canvas-gap
+    )
+)</code></td>
+    <td><ul><li>sm: "width":"266px","vertical-slider-height":"186px","rectangle-height":"186px","input-width":"42px","gap":"var(--kendo-spacing-4, 1rem)","canvas-gap":"var(--kendo-spacing-3, 0.75rem)"</li><li>md: "width":"328px","vertical-slider-height":"180px","rectangle-height":"180px","input-width":"56px","gap":"var(--kendo-spacing-4, 1rem)","canvas-gap":"var(--kendo-spacing-3, 0.75rem)"</li><li>lg: "width":"362px","vertical-slider-height":"268px","rectangle-height":"268px","input-width":"62.5px","gap":"var(--kendo-spacing-4\\.5, 1.125rem)","canvas-gap":"var(--kendo-spacing-4\\.5, 1.125rem)"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorGradient.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
diff --git a/packages/bootstrap/docs/customization-color-palette.md b/packages/bootstrap/docs/customization-color-palette.md
index a02df9dee0..5329e63158 100644
--- a/packages/bootstrap/docs/customization-color-palette.md
+++ b/packages/bootstrap/docs/customization-color-palette.md
@@ -77,6 +77,66 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the ColorPalette tile.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-palette-tile-sm-width</td>
+    <td>String</td>
+    <td><code>k-spacing(5.5)</code></td>
+    <td><code>var(--kendo-spacing-5\.5, 1.375rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container">
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-sm-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-sm-width</code></td>
+    <td><code>var(--kendo-spacing-5\.5, 1.375rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-md-width</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-width</code></td>
+    <td><code>var(--kendo-spacing-6, 1.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-md-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-height</code></td>
+    <td><code>var(--kendo-spacing-6, 1.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-lg-width</td>
+    <td>String</td>
+    <td><code>k-spacing(8)</code></td>
+    <td><code>var(--kendo-spacing-8, 2rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-lg-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-lg-width</code></td>
+    <td><code>var(--kendo-spacing-8, 2rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorPalette tile.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-palette-tile-focus-shadow</td>
     <td>List</td>
@@ -107,6 +167,29 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The shadow of the ColorPalette selected tile.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-palette-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        width: $kendo-color-palette-tile-sm-width,
+        height: $kendo-color-palette-tile-sm-height
+    ),
+    md: (
+        width: $kendo-color-palette-tile-md-width,
+        height: $kendo-color-palette-tile-md-height
+    ),
+    lg: (
+        width: $kendo-color-palette-tile-lg-width,
+        height: $kendo-color-palette-tile-lg-height
+    )
+)</code></td>
+    <td><ul><li>sm: "width":"var(--kendo-spacing-5\\.5, 1.375rem)","height":"var(--kendo-spacing-5\\.5, 1.375rem)"</li><li>md: "width":"var(--kendo-spacing-6, 1.5rem)","height":"var(--kendo-spacing-6, 1.5rem)"</li><li>lg: "width":"var(--kendo-spacing-8, 2rem)","height":"var(--kendo-spacing-8, 2rem)"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorPalette.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
diff --git a/packages/bootstrap/docs/customization.md b/packages/bootstrap/docs/customization.md
index 291442d0bc..31fefdc4c3 100644
--- a/packages/bootstrap/docs/customization.md
+++ b/packages/bootstrap/docs/customization.md
@@ -7109,6 +7109,36 @@ The following table lists the available variables for customizing the Bootstrap
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-min-width</td>
+    <td>Number</td>
+    <td><code>252px</code></td>
+    <td><code>252px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-min-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-min-width</code></td>
+    <td><code>328px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-min-width</td>
+    <td>Number</td>
+    <td><code>362px</code></td>
+    <td><code>362px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-border-width</td>
     <td>Number</td>
@@ -7239,6 +7269,66 @@ The following table lists the available variables for customizing the Bootstrap
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the ColorEditor header actions.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-header-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-y</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-header-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-x</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-header-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-y</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-header-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-x</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-header-padding-y</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-header-padding-x</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large ColorEditor header.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-color-preview-width</td>
     <td>Number</td>
@@ -7269,6 +7359,96 @@ The following table lists the available variables for customizing the Bootstrap
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the ColorEditor preview.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-preview-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(1)</code></td>
+    <td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-preview-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-preview-gap</code></td>
+    <td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-preview-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(1)</code></td>
+    <td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the large ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-color-preview-width</td>
+    <td>Number</td>
+    <td><code>32px</code></td>
+    <td><code>32px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-color-preview-height</td>
+    <td>Number</td>
+    <td><code>10px</code></td>
+    <td><code>10px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-color-preview-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-color-preview-width</code></td>
+    <td><code>32px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-color-preview-height</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-color-preview-height</code></td>
+    <td><code>12px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-color-preview-width</td>
+    <td>Number</td>
+    <td><code>32px</code></td>
+    <td><code>32px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-color-preview-height</td>
+    <td>Number</td>
+    <td><code>12px</code></td>
+    <td><code>12px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorEditor preview.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-views-padding-y</td>
     <td>String</td>
@@ -7299,6 +7479,96 @@ The following table lists the available variables for customizing the Bootstrap
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the ColorEditor views container.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-spacer</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-y</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-spacer</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-y</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-x</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-gap</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-padding-y</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-padding-x</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-color-gradient-focus-outline-color</td>
     <td>Color</td>
@@ -7329,6 +7599,48 @@ The following table lists the available variables for customizing the Bootstrap
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The outline offset of the focused ColorGradient.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        min-width: $kendo-color-editor-sm-min-width,
+        header-padding-x: $kendo-color-editor-sm-header-padding-x,
+        header-padding-y: $kendo-color-editor-sm-header-padding-y,
+        views-padding-x: $kendo-color-editor-sm-views-padding-x,
+        views-padding-y: $kendo-color-editor-sm-views-padding-y,
+        preview-gap: $kendo-color-editor-sm-preview-gap,
+        preview-width: $kendo-color-editor-sm-color-preview-width,
+        preview-height: $kendo-color-editor-sm-color-preview-height,
+
+    ),
+    md: (
+        min-width: $kendo-color-editor-md-min-width,
+        header-padding-x: $kendo-color-editor-md-header-padding-x,
+        header-padding-y: $kendo-color-editor-md-header-padding-y,
+        views-padding-x: $kendo-color-editor-md-views-padding-x,
+        views-padding-y: $kendo-color-editor-md-views-padding-y,
+        preview-gap: $kendo-color-editor-md-preview-gap,
+        preview-width: $kendo-color-editor-md-color-preview-width,
+        preview-height: $kendo-color-editor-md-color-preview-height,
+    ),
+    lg: (
+        min-width: $kendo-color-editor-lg-min-width,
+        header-padding-x: $kendo-color-editor-lg-header-padding-x,
+        header-padding-y: $kendo-color-editor-lg-header-padding-y,
+        views-padding-x: $kendo-color-editor-lg-views-padding-x,
+        views-padding-y: $kendo-color-editor-lg-views-padding-y,
+        preview-gap: $kendo-color-editor-lg-preview-gap,
+        preview-width: $kendo-color-editor-lg-color-preview-width,
+        preview-height: $kendo-color-editor-lg-color-preview-height,
+    )
+)</code></td>
+    <td><ul><li>sm: "min-width":"252px","header-padding-x":"var(--kendo-spacing-4, 1rem)","header-padding-y":"var(--kendo-spacing-4, 1rem)","views-padding-x":"var(--kendo-spacing-4, 1rem)","views-padding-y":"var(--kendo-spacing-4, 1rem)","preview-gap":"var(--kendo-spacing-1, 0.25rem)","preview-width":"32px","preview-height":"10px"</li><li>md: "min-width":"328px","header-padding-x":"var(--kendo-spacing-4, 1rem)","header-padding-y":"var(--kendo-spacing-4, 1rem)","views-padding-x":"var(--kendo-spacing-4, 1rem)","views-padding-y":"var(--kendo-spacing-4, 1rem)","preview-gap":"var(--kendo-spacing-1, 0.25rem)","preview-width":"32px","preview-height":"12px"</li><li>lg: "min-width":"362px","header-padding-x":"var(--kendo-spacing-4\\.5, 1.125rem)","header-padding-y":"var(--kendo-spacing-4\\.5, 1.125rem)","views-padding-x":"var(--kendo-spacing-4\\.5, 1.125rem)","views-padding-y":"var(--kendo-spacing-4\\.5, 1.125rem)","preview-gap":"var(--kendo-spacing-1, 0.25rem)","preview-width":"32px","preview-height":"12px"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorEditor.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
@@ -7479,6 +7791,66 @@ The following table lists the available variables for customizing the Bootstrap
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the ColorGradient.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-width</td>
+    <td>Number</td>
+    <td><code>266px</code></td>
+    <td><code>266px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-width</code></td>
+    <td><code>328px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-width</td>
+    <td>Number</td>
+    <td><code>362px</code></td>
+    <td><code>362px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-sm-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-gap</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the small ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-gap</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the medium ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the large ColorGradient.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-focus-border</td>
     <td>String</td>
@@ -7529,6 +7901,66 @@ The following table lists the available variables for customizing the Bootstrap
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the ColorGradient canvas hsv rectangle.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>186px</code></td>
+    <td><code>186px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the small ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-canvas-rectangle-height</code></td>
+    <td><code>180px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the medium ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>268px</code></td>
+    <td><code>268px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the large ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-sm-canvas-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(3)</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the small ColorGradient canvas.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-canvas-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-canvas-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the medium ColorGradient canvas.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-canvas-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the large ColorGradient canvas.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-slider-track-size</td>
     <td>Number</td>
@@ -7589,6 +8021,36 @@ The following table lists the available variables for customizing the Bootstrap
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background image of the ColorGradient alpha slider.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>186px</code></td>
+    <td><code>186px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-slider-vertical-size</code></td>
+    <td><code>180px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>268px</code></td>
+    <td><code>268px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-draghandle-width</td>
     <td>Number</td>
@@ -7759,6 +8221,36 @@ The following table lists the available variables for customizing the Bootstrap
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the ColorGradient input labels.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-input-width</td>
+    <td>Number</td>
+    <td><code>42px</code></td>
+    <td><code>42px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorGradient input.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-input-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-input-width</code></td>
+    <td><code>56px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorGradient input.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-input-width</td>
+    <td>Number</td>
+    <td><code>62.5px</code></td>
+    <td><code>62.5px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorGradient input.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-contrast-ratio-font-weight</td>
     <td>String</td>
@@ -7779,6 +8271,41 @@ The following table lists the available variables for customizing the Bootstrap
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items in the ColorGradient contrast tool.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        width: $kendo-color-gradient-sm-width,
+        vertical-slider-height: $kendo-color-gradient-sm-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-sm-input-width,
+        gap: $kendo-color-gradient-sm-gap,
+        canvas-gap: $kendo-color-gradient-sm-canvas-gap
+    ),
+    md: (
+        width: $kendo-color-gradient-md-width,
+        vertical-slider-height: $kendo-color-gradient-md-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-md-input-width,
+        gap: $kendo-color-gradient-md-gap,
+        canvas-gap: $kendo-color-gradient-md-canvas-gap
+    ),
+    lg: (
+        width: $kendo-color-gradient-lg-width,
+        vertical-slider-height: $kendo-color-gradient-lg-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-lg-input-width,
+        gap: $kendo-color-gradient-lg-gap,
+        canvas-gap: $kendo-color-gradient-lg-canvas-gap
+    )
+)</code></td>
+    <td><ul><li>sm: "width":"266px","vertical-slider-height":"186px","rectangle-height":"186px","input-width":"42px","gap":"var(--kendo-spacing-4, 1rem)","canvas-gap":"var(--kendo-spacing-3, 0.75rem)"</li><li>md: "width":"328px","vertical-slider-height":"180px","rectangle-height":"180px","input-width":"56px","gap":"var(--kendo-spacing-4, 1rem)","canvas-gap":"var(--kendo-spacing-3, 0.75rem)"</li><li>lg: "width":"362px","vertical-slider-height":"268px","rectangle-height":"268px","input-width":"62.5px","gap":"var(--kendo-spacing-4\\.5, 1.125rem)","canvas-gap":"var(--kendo-spacing-4\\.5, 1.125rem)"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorGradient.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
@@ -7849,6 +8376,66 @@ The following table lists the available variables for customizing the Bootstrap
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the ColorPalette tile.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-palette-tile-sm-width</td>
+    <td>String</td>
+    <td><code>k-spacing(5.5)</code></td>
+    <td><code>var(--kendo-spacing-5\.5, 1.375rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container">
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-sm-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-sm-width</code></td>
+    <td><code>var(--kendo-spacing-5\.5, 1.375rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-md-width</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-width</code></td>
+    <td><code>var(--kendo-spacing-6, 1.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-md-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-height</code></td>
+    <td><code>var(--kendo-spacing-6, 1.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-lg-width</td>
+    <td>String</td>
+    <td><code>k-spacing(8)</code></td>
+    <td><code>var(--kendo-spacing-8, 2rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-lg-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-lg-width</code></td>
+    <td><code>var(--kendo-spacing-8, 2rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorPalette tile.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-palette-tile-focus-shadow</td>
     <td>List</td>
@@ -7879,6 +8466,29 @@ The following table lists the available variables for customizing the Bootstrap
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The shadow of the ColorPalette selected tile.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-palette-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        width: $kendo-color-palette-tile-sm-width,
+        height: $kendo-color-palette-tile-sm-height
+    ),
+    md: (
+        width: $kendo-color-palette-tile-md-width,
+        height: $kendo-color-palette-tile-md-height
+    ),
+    lg: (
+        width: $kendo-color-palette-tile-lg-width,
+        height: $kendo-color-palette-tile-lg-height
+    )
+)</code></td>
+    <td><ul><li>sm: "width":"var(--kendo-spacing-5\\.5, 1.375rem)","height":"var(--kendo-spacing-5\\.5, 1.375rem)"</li><li>md: "width":"var(--kendo-spacing-6, 1.5rem)","height":"var(--kendo-spacing-6, 1.5rem)"</li><li>lg: "width":"var(--kendo-spacing-8, 2rem)","height":"var(--kendo-spacing-8, 2rem)"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorPalette.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
diff --git a/packages/classic/docs/customization-color-editor.md b/packages/classic/docs/customization-color-editor.md
index 17e4fcb69a..443452b381 100644
--- a/packages/classic/docs/customization-color-editor.md
+++ b/packages/classic/docs/customization-color-editor.md
@@ -47,6 +47,36 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-min-width</td>
+    <td>Number</td>
+    <td><code>252px</code></td>
+    <td><code>252px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-min-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-min-width</code></td>
+    <td><code>272px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-min-width</td>
+    <td>Number</td>
+    <td><code>362px</code></td>
+    <td><code>362px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-border-width</td>
     <td>Number</td>
@@ -169,14 +199,74 @@ The following table lists the available variables for customization.
 </tr>
 <tr>
     <td>$kendo-color-editor-header-actions-gap</td>
-    <td>Calculation</td>
-    <td><code>calc( #{$kendo-color-editor-spacer} / 1.5 )</code></td>
-    <td><code>calc(var(--kendo-spacing-3, 0.75rem) / 1.5)</code></td>
+    <td>String</td>
+    <td><code>k-spacing(2)</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
 </tr>
 <tr>
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the ColorEditor header actions.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-header-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-y</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-header-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-x</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-header-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-y</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-header-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-x</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-header-padding-y</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-header-padding-x</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large ColorEditor header.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-color-preview-width</td>
     <td>Number</td>
@@ -207,6 +297,96 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the ColorEditor preview.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-preview-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(0.5)</code></td>
+    <td><code>var(--kendo-spacing-0\.5, 0.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-preview-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-preview-gap</code></td>
+    <td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-preview-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(1)</code></td>
+    <td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the large ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-color-preview-width</td>
+    <td>Number</td>
+    <td><code>34px</code></td>
+    <td><code>34px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-color-preview-height</td>
+    <td>Number</td>
+    <td><code>12px</code></td>
+    <td><code>12px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-color-preview-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-color-preview-width</code></td>
+    <td><code>32px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-color-preview-height</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-color-preview-height</code></td>
+    <td><code>12px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-color-preview-width</td>
+    <td>Number</td>
+    <td><code>44px</code></td>
+    <td><code>44px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-color-preview-height</td>
+    <td>Number</td>
+    <td><code>16px</code></td>
+    <td><code>16px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorEditor preview.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-views-padding-y</td>
     <td>String</td>
@@ -237,6 +417,96 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the ColorEditor views container.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-spacer</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-y</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-spacer</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-y</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-x</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-padding-y</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-padding-x</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-color-gradient-focus-outline-color</td>
     <td>Color</td>
@@ -267,6 +537,48 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The outline offset of the focused ColorGradient.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        min-width: $kendo-color-editor-sm-min-width,
+        header-padding-x: $kendo-color-editor-sm-header-padding-x,
+        header-padding-y: $kendo-color-editor-sm-header-padding-y,
+        views-padding-x: $kendo-color-editor-sm-views-padding-x,
+        views-padding-y: $kendo-color-editor-sm-views-padding-y,
+        preview-gap: $kendo-color-editor-sm-preview-gap,
+        preview-width: $kendo-color-editor-sm-color-preview-width,
+        preview-height: $kendo-color-editor-sm-color-preview-height,
+
+    ),
+    md: (
+        min-width: $kendo-color-editor-md-min-width,
+        header-padding-x: $kendo-color-editor-md-header-padding-x,
+        header-padding-y: $kendo-color-editor-md-header-padding-y,
+        views-padding-x: $kendo-color-editor-md-views-padding-x,
+        views-padding-y: $kendo-color-editor-md-views-padding-y,
+        preview-gap: $kendo-color-editor-md-preview-gap,
+        preview-width: $kendo-color-editor-md-color-preview-width,
+        preview-height: $kendo-color-editor-md-color-preview-height,
+    ),
+    lg: (
+        min-width: $kendo-color-editor-lg-min-width,
+        header-padding-x: $kendo-color-editor-lg-header-padding-x,
+        header-padding-y: $kendo-color-editor-lg-header-padding-y,
+        views-padding-x: $kendo-color-editor-lg-views-padding-x,
+        views-padding-y: $kendo-color-editor-lg-views-padding-y,
+        preview-gap: $kendo-color-editor-lg-preview-gap,
+        preview-width: $kendo-color-editor-lg-color-preview-width,
+        preview-height: $kendo-color-editor-lg-color-preview-height,
+    )
+)</code></td>
+    <td><ul><li>sm: "min-width":"252px","header-padding-x":"var(--kendo-spacing-3, 0.75rem)","header-padding-y":"var(--kendo-spacing-3, 0.75rem)","views-padding-x":"var(--kendo-spacing-3, 0.75rem)","views-padding-y":"var(--kendo-spacing-3, 0.75rem)","preview-gap":"var(--kendo-spacing-0\\.5, 0.125rem)","preview-width":"34px","preview-height":"12px"</li><li>md: "min-width":"272px","header-padding-x":"var(--kendo-spacing-3, 0.75rem)","header-padding-y":"var(--kendo-spacing-3, 0.75rem)","views-padding-x":"var(--kendo-spacing-3, 0.75rem)","views-padding-y":"var(--kendo-spacing-3, 0.75rem)","preview-gap":"var(--kendo-spacing-1, 0.25rem)","preview-width":"32px","preview-height":"12px"</li><li>lg: "min-width":"362px","header-padding-x":"var(--kendo-spacing-4\\.5, 1.125rem)","header-padding-y":"var(--kendo-spacing-4\\.5, 1.125rem)","views-padding-x":"var(--kendo-spacing-4\\.5, 1.125rem)","views-padding-y":"var(--kendo-spacing-4\\.5, 1.125rem)","preview-gap":"var(--kendo-spacing-1, 0.25rem)","preview-width":"44px","preview-height":"16px"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorEditor.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
diff --git a/packages/classic/docs/customization-color-gradient.md b/packages/classic/docs/customization-color-gradient.md
index d24e288f1d..181d659bef 100644
--- a/packages/classic/docs/customization-color-gradient.md
+++ b/packages/classic/docs/customization-color-gradient.md
@@ -157,6 +157,66 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the ColorGradient.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-width</td>
+    <td>Number</td>
+    <td><code>226px</code></td>
+    <td><code>226px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-width</code></td>
+    <td><code>272px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-width</td>
+    <td>Number</td>
+    <td><code>324px</code></td>
+    <td><code>324px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-sm-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the small ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the medium ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the large ColorGradient.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-focus-border</td>
     <td>Null</td>
@@ -207,6 +267,66 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the ColorGradient canvas hsv rectangle.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>182px</code></td>
+    <td><code>182px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the small ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-canvas-rectangle-height</code></td>
+    <td><code>180px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the medium ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>268px</code></td>
+    <td><code>268px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the large ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-sm-canvas-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-canvas-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the small ColorGradient canvas.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-canvas-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-canvas-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the medium ColorGradient canvas.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-canvas-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the large ColorGradient canvas.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-slider-track-size</td>
     <td>Number</td>
@@ -267,6 +387,36 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background image of the ColorGradient alpha slider.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>182px</code></td>
+    <td><code>182px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-slider-vertical-size</code></td>
+    <td><code>180px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>268px</code></td>
+    <td><code>268px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-draghandle-width</td>
     <td>Number</td>
@@ -409,9 +559,9 @@ The following table lists the available variables for customization.
 </tr>
 <tr>
     <td>$kendo-color-gradient-input-gap</td>
-    <td>Calculation</td>
-    <td><code>calc( #{$kendo-color-gradient-spacer} / 1.5 )</code></td>
-    <td><code>calc(var(--kendo-spacing-3, 0.75rem) / 1.5)</code></td>
+    <td>String</td>
+    <td><code>k-spacing(2)</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
 </tr>
 <tr>
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the ColorGradient inputs.</div></div>
@@ -437,6 +587,36 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the ColorGradient input labels.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-input-width</td>
+    <td>Number</td>
+    <td><code>42px</code></td>
+    <td><code>42px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorGradient input.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-input-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-input-width</code></td>
+    <td><code>46px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorGradient input.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-input-width</td>
+    <td>Number</td>
+    <td><code>62.5px</code></td>
+    <td><code>62.5px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorGradient input.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-contrast-ratio-font-weight</td>
     <td>String</td>
@@ -457,6 +637,41 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items in the ColorGradient contrast tool.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        width: $kendo-color-gradient-sm-width,
+        vertical-slider-height: $kendo-color-gradient-sm-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-sm-input-width,
+        gap: $kendo-color-gradient-sm-gap,
+        canvas-gap: $kendo-color-gradient-sm-canvas-gap
+    ),
+    md: (
+        width: $kendo-color-gradient-md-width,
+        vertical-slider-height: $kendo-color-gradient-md-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-md-input-width,
+        gap: $kendo-color-gradient-md-gap,
+        canvas-gap: $kendo-color-gradient-md-canvas-gap
+    ),
+    lg: (
+        width: $kendo-color-gradient-lg-width,
+        vertical-slider-height: $kendo-color-gradient-lg-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-lg-input-width,
+        gap: $kendo-color-gradient-lg-gap,
+        canvas-gap: $kendo-color-gradient-lg-canvas-gap
+    )
+)</code></td>
+    <td><ul><li>sm: "width":"226px","vertical-slider-height":"182px","rectangle-height":"182px","input-width":"42px","gap":"var(--kendo-spacing-3, 0.75rem)","canvas-gap":"var(--kendo-spacing-3, 0.75rem)"</li><li>md: "width":"272px","vertical-slider-height":"180px","rectangle-height":"180px","input-width":"46px","gap":"var(--kendo-spacing-3, 0.75rem)","canvas-gap":"var(--kendo-spacing-3, 0.75rem)"</li><li>lg: "width":"324px","vertical-slider-height":"268px","rectangle-height":"268px","input-width":"62.5px","gap":"var(--kendo-spacing-4\\.5, 1.125rem)","canvas-gap":"var(--kendo-spacing-4\\.5, 1.125rem)"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorGradient.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
diff --git a/packages/classic/docs/customization-color-palette.md b/packages/classic/docs/customization-color-palette.md
index 75093867af..9625d37865 100644
--- a/packages/classic/docs/customization-color-palette.md
+++ b/packages/classic/docs/customization-color-palette.md
@@ -77,6 +77,66 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the ColorPalette tile.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-palette-tile-sm-width</td>
+    <td>String</td>
+    <td><code>k-spacing(5.5)</code></td>
+    <td><code>var(--kendo-spacing-5\.5, 1.375rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-sm-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-sm-width</code></td>
+    <td><code>var(--kendo-spacing-5\.5, 1.375rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-md-width</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-width</code></td>
+    <td><code>var(--kendo-spacing-6, 1.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-md-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-height</code></td>
+    <td><code>var(--kendo-spacing-6, 1.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-lg-width</td>
+    <td>String</td>
+    <td><code>k-spacing(8)</code></td>
+    <td><code>var(--kendo-spacing-8, 2rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-lg-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-lg-width</code></td>
+    <td><code>var(--kendo-spacing-8, 2rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorPalette tile.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-palette-tile-focus-shadow</td>
     <td>List</td>
@@ -107,6 +167,29 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The shadow of the ColorPalette selected tile.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-palette-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        width: $kendo-color-palette-tile-sm-width,
+        height: $kendo-color-palette-tile-sm-height
+    ),
+    md: (
+        width: $kendo-color-palette-tile-md-width,
+        height: $kendo-color-palette-tile-md-height
+    ),
+    lg: (
+        width: $kendo-color-palette-tile-lg-width,
+        height: $kendo-color-palette-tile-lg-height
+    )
+)</code></td>
+    <td><ul><li>sm: "width":"var(--kendo-spacing-5\\.5, 1.375rem)","height":"var(--kendo-spacing-5\\.5, 1.375rem)"</li><li>md: "width":"var(--kendo-spacing-6, 1.5rem)","height":"var(--kendo-spacing-6, 1.5rem)"</li><li>lg: "width":"var(--kendo-spacing-8, 2rem)","height":"var(--kendo-spacing-8, 2rem)"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorPalette.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
diff --git a/packages/classic/docs/customization.md b/packages/classic/docs/customization.md
index 847f89641a..8ff31a88f0 100644
--- a/packages/classic/docs/customization.md
+++ b/packages/classic/docs/customization.md
@@ -7150,6 +7150,36 @@ The following table lists the available variables for customizing the Classic th
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-min-width</td>
+    <td>Number</td>
+    <td><code>252px</code></td>
+    <td><code>252px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-min-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-min-width</code></td>
+    <td><code>272px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-min-width</td>
+    <td>Number</td>
+    <td><code>362px</code></td>
+    <td><code>362px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-border-width</td>
     <td>Number</td>
@@ -7272,14 +7302,74 @@ The following table lists the available variables for customizing the Classic th
 </tr>
 <tr>
     <td>$kendo-color-editor-header-actions-gap</td>
-    <td>Calculation</td>
-    <td><code>calc( #{$kendo-color-editor-spacer} / 1.5 )</code></td>
-    <td><code>calc(var(--kendo-spacing-3, 0.75rem) / 1.5)</code></td>
+    <td>String</td>
+    <td><code>k-spacing(2)</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
 </tr>
 <tr>
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the ColorEditor header actions.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-header-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-y</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-header-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-x</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-header-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-y</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-header-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-x</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-header-padding-y</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-header-padding-x</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large ColorEditor header.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-color-preview-width</td>
     <td>Number</td>
@@ -7310,6 +7400,96 @@ The following table lists the available variables for customizing the Classic th
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the ColorEditor preview.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-preview-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(0.5)</code></td>
+    <td><code>var(--kendo-spacing-0\.5, 0.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-preview-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-preview-gap</code></td>
+    <td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-preview-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(1)</code></td>
+    <td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the large ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-color-preview-width</td>
+    <td>Number</td>
+    <td><code>34px</code></td>
+    <td><code>34px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-color-preview-height</td>
+    <td>Number</td>
+    <td><code>12px</code></td>
+    <td><code>12px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-color-preview-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-color-preview-width</code></td>
+    <td><code>32px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-color-preview-height</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-color-preview-height</code></td>
+    <td><code>12px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-color-preview-width</td>
+    <td>Number</td>
+    <td><code>44px</code></td>
+    <td><code>44px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-color-preview-height</td>
+    <td>Number</td>
+    <td><code>16px</code></td>
+    <td><code>16px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorEditor preview.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-views-padding-y</td>
     <td>String</td>
@@ -7340,6 +7520,96 @@ The following table lists the available variables for customizing the Classic th
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the ColorEditor views container.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-spacer</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-y</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-spacer</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-y</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-x</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-padding-y</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-padding-x</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-color-gradient-focus-outline-color</td>
     <td>Color</td>
@@ -7370,6 +7640,48 @@ The following table lists the available variables for customizing the Classic th
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The outline offset of the focused ColorGradient.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        min-width: $kendo-color-editor-sm-min-width,
+        header-padding-x: $kendo-color-editor-sm-header-padding-x,
+        header-padding-y: $kendo-color-editor-sm-header-padding-y,
+        views-padding-x: $kendo-color-editor-sm-views-padding-x,
+        views-padding-y: $kendo-color-editor-sm-views-padding-y,
+        preview-gap: $kendo-color-editor-sm-preview-gap,
+        preview-width: $kendo-color-editor-sm-color-preview-width,
+        preview-height: $kendo-color-editor-sm-color-preview-height,
+
+    ),
+    md: (
+        min-width: $kendo-color-editor-md-min-width,
+        header-padding-x: $kendo-color-editor-md-header-padding-x,
+        header-padding-y: $kendo-color-editor-md-header-padding-y,
+        views-padding-x: $kendo-color-editor-md-views-padding-x,
+        views-padding-y: $kendo-color-editor-md-views-padding-y,
+        preview-gap: $kendo-color-editor-md-preview-gap,
+        preview-width: $kendo-color-editor-md-color-preview-width,
+        preview-height: $kendo-color-editor-md-color-preview-height,
+    ),
+    lg: (
+        min-width: $kendo-color-editor-lg-min-width,
+        header-padding-x: $kendo-color-editor-lg-header-padding-x,
+        header-padding-y: $kendo-color-editor-lg-header-padding-y,
+        views-padding-x: $kendo-color-editor-lg-views-padding-x,
+        views-padding-y: $kendo-color-editor-lg-views-padding-y,
+        preview-gap: $kendo-color-editor-lg-preview-gap,
+        preview-width: $kendo-color-editor-lg-color-preview-width,
+        preview-height: $kendo-color-editor-lg-color-preview-height,
+    )
+)</code></td>
+    <td><ul><li>sm: "min-width":"252px","header-padding-x":"var(--kendo-spacing-3, 0.75rem)","header-padding-y":"var(--kendo-spacing-3, 0.75rem)","views-padding-x":"var(--kendo-spacing-3, 0.75rem)","views-padding-y":"var(--kendo-spacing-3, 0.75rem)","preview-gap":"var(--kendo-spacing-0\\.5, 0.125rem)","preview-width":"34px","preview-height":"12px"</li><li>md: "min-width":"272px","header-padding-x":"var(--kendo-spacing-3, 0.75rem)","header-padding-y":"var(--kendo-spacing-3, 0.75rem)","views-padding-x":"var(--kendo-spacing-3, 0.75rem)","views-padding-y":"var(--kendo-spacing-3, 0.75rem)","preview-gap":"var(--kendo-spacing-1, 0.25rem)","preview-width":"32px","preview-height":"12px"</li><li>lg: "min-width":"362px","header-padding-x":"var(--kendo-spacing-4\\.5, 1.125rem)","header-padding-y":"var(--kendo-spacing-4\\.5, 1.125rem)","views-padding-x":"var(--kendo-spacing-4\\.5, 1.125rem)","views-padding-y":"var(--kendo-spacing-4\\.5, 1.125rem)","preview-gap":"var(--kendo-spacing-1, 0.25rem)","preview-width":"44px","preview-height":"16px"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorEditor.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
@@ -7520,6 +7832,66 @@ The following table lists the available variables for customizing the Classic th
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the ColorGradient.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-width</td>
+    <td>Number</td>
+    <td><code>226px</code></td>
+    <td><code>226px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-width</code></td>
+    <td><code>272px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-width</td>
+    <td>Number</td>
+    <td><code>324px</code></td>
+    <td><code>324px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-sm-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the small ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the medium ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the large ColorGradient.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-focus-border</td>
     <td>Null</td>
@@ -7570,6 +7942,66 @@ The following table lists the available variables for customizing the Classic th
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the ColorGradient canvas hsv rectangle.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>182px</code></td>
+    <td><code>182px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the small ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-canvas-rectangle-height</code></td>
+    <td><code>180px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the medium ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>268px</code></td>
+    <td><code>268px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the large ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-sm-canvas-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-canvas-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the small ColorGradient canvas.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-canvas-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-canvas-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the medium ColorGradient canvas.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-canvas-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the large ColorGradient canvas.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-slider-track-size</td>
     <td>Number</td>
@@ -7630,6 +8062,36 @@ The following table lists the available variables for customizing the Classic th
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background image of the ColorGradient alpha slider.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>182px</code></td>
+    <td><code>182px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-slider-vertical-size</code></td>
+    <td><code>180px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>268px</code></td>
+    <td><code>268px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-draghandle-width</td>
     <td>Number</td>
@@ -7772,9 +8234,9 @@ The following table lists the available variables for customizing the Classic th
 </tr>
 <tr>
     <td>$kendo-color-gradient-input-gap</td>
-    <td>Calculation</td>
-    <td><code>calc( #{$kendo-color-gradient-spacer} / 1.5 )</code></td>
-    <td><code>calc(var(--kendo-spacing-3, 0.75rem) / 1.5)</code></td>
+    <td>String</td>
+    <td><code>k-spacing(2)</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
 </tr>
 <tr>
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the ColorGradient inputs.</div></div>
@@ -7800,6 +8262,36 @@ The following table lists the available variables for customizing the Classic th
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the ColorGradient input labels.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-input-width</td>
+    <td>Number</td>
+    <td><code>42px</code></td>
+    <td><code>42px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorGradient input.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-input-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-input-width</code></td>
+    <td><code>46px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorGradient input.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-input-width</td>
+    <td>Number</td>
+    <td><code>62.5px</code></td>
+    <td><code>62.5px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorGradient input.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-contrast-ratio-font-weight</td>
     <td>String</td>
@@ -7820,6 +8312,41 @@ The following table lists the available variables for customizing the Classic th
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items in the ColorGradient contrast tool.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        width: $kendo-color-gradient-sm-width,
+        vertical-slider-height: $kendo-color-gradient-sm-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-sm-input-width,
+        gap: $kendo-color-gradient-sm-gap,
+        canvas-gap: $kendo-color-gradient-sm-canvas-gap
+    ),
+    md: (
+        width: $kendo-color-gradient-md-width,
+        vertical-slider-height: $kendo-color-gradient-md-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-md-input-width,
+        gap: $kendo-color-gradient-md-gap,
+        canvas-gap: $kendo-color-gradient-md-canvas-gap
+    ),
+    lg: (
+        width: $kendo-color-gradient-lg-width,
+        vertical-slider-height: $kendo-color-gradient-lg-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-lg-input-width,
+        gap: $kendo-color-gradient-lg-gap,
+        canvas-gap: $kendo-color-gradient-lg-canvas-gap
+    )
+)</code></td>
+    <td><ul><li>sm: "width":"226px","vertical-slider-height":"182px","rectangle-height":"182px","input-width":"42px","gap":"var(--kendo-spacing-3, 0.75rem)","canvas-gap":"var(--kendo-spacing-3, 0.75rem)"</li><li>md: "width":"272px","vertical-slider-height":"180px","rectangle-height":"180px","input-width":"46px","gap":"var(--kendo-spacing-3, 0.75rem)","canvas-gap":"var(--kendo-spacing-3, 0.75rem)"</li><li>lg: "width":"324px","vertical-slider-height":"268px","rectangle-height":"268px","input-width":"62.5px","gap":"var(--kendo-spacing-4\\.5, 1.125rem)","canvas-gap":"var(--kendo-spacing-4\\.5, 1.125rem)"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorGradient.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
@@ -7890,6 +8417,66 @@ The following table lists the available variables for customizing the Classic th
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the ColorPalette tile.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-palette-tile-sm-width</td>
+    <td>String</td>
+    <td><code>k-spacing(5.5)</code></td>
+    <td><code>var(--kendo-spacing-5\.5, 1.375rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-sm-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-sm-width</code></td>
+    <td><code>var(--kendo-spacing-5\.5, 1.375rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-md-width</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-width</code></td>
+    <td><code>var(--kendo-spacing-6, 1.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-md-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-height</code></td>
+    <td><code>var(--kendo-spacing-6, 1.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-lg-width</td>
+    <td>String</td>
+    <td><code>k-spacing(8)</code></td>
+    <td><code>var(--kendo-spacing-8, 2rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-lg-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-lg-width</code></td>
+    <td><code>var(--kendo-spacing-8, 2rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorPalette tile.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-palette-tile-focus-shadow</td>
     <td>List</td>
@@ -7920,6 +8507,29 @@ The following table lists the available variables for customizing the Classic th
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The shadow of the ColorPalette selected tile.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-palette-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        width: $kendo-color-palette-tile-sm-width,
+        height: $kendo-color-palette-tile-sm-height
+    ),
+    md: (
+        width: $kendo-color-palette-tile-md-width,
+        height: $kendo-color-palette-tile-md-height
+    ),
+    lg: (
+        width: $kendo-color-palette-tile-lg-width,
+        height: $kendo-color-palette-tile-lg-height
+    )
+)</code></td>
+    <td><ul><li>sm: "width":"var(--kendo-spacing-5\\.5, 1.375rem)","height":"var(--kendo-spacing-5\\.5, 1.375rem)"</li><li>md: "width":"var(--kendo-spacing-6, 1.5rem)","height":"var(--kendo-spacing-6, 1.5rem)"</li><li>lg: "width":"var(--kendo-spacing-8, 2rem)","height":"var(--kendo-spacing-8, 2rem)"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorPalette.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
diff --git a/packages/default/docs/customization-color-editor.md b/packages/default/docs/customization-color-editor.md
index 061a9e0840..2dd309c3b6 100644
--- a/packages/default/docs/customization-color-editor.md
+++ b/packages/default/docs/customization-color-editor.md
@@ -47,6 +47,36 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-min-width</td>
+    <td>Number</td>
+    <td><code>252px</code></td>
+    <td><code>252px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-min-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-min-width</code></td>
+    <td><code>272px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-min-width</td>
+    <td>Number</td>
+    <td><code>362px</code></td>
+    <td><code>362px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-border-width</td>
     <td>Number</td>
@@ -169,14 +199,74 @@ The following table lists the available variables for customization.
 </tr>
 <tr>
     <td>$kendo-color-editor-header-actions-gap</td>
-    <td>Calculation</td>
-    <td><code>calc( #{$kendo-color-editor-spacer} / 1.5 )</code></td>
-    <td><code>calc(var(--kendo-spacing-3, 0.75rem) / 1.5)</code></td>
+    <td>String</td>
+    <td><code>k-spacing(2)</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
 </tr>
 <tr>
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the ColorEditor header actions.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-header-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-y</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-header-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-x</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-header-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-y</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-header-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-x</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-header-padding-y</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-header-padding-x</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large ColorEditor header.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-color-preview-width</td>
     <td>Number</td>
@@ -207,6 +297,96 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the ColorEditor preview.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-preview-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(0.5)</code></td>
+    <td><code>var(--kendo-spacing-0\.5, 0.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-preview-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-preview-gap</code></td>
+    <td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-preview-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(1)</code></td>
+    <td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the large ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-color-preview-width</td>
+    <td>Number</td>
+    <td><code>34px</code></td>
+    <td><code>34px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-color-preview-height</td>
+    <td>Number</td>
+    <td><code>12px</code></td>
+    <td><code>12px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-color-preview-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-color-preview-width</code></td>
+    <td><code>32px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-color-preview-height</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-color-preview-height</code></td>
+    <td><code>12px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-color-preview-width</td>
+    <td>Number</td>
+    <td><code>44px</code></td>
+    <td><code>44px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-color-preview-height</td>
+    <td>Number</td>
+    <td><code>16px</code></td>
+    <td><code>16px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorEditor preview.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-views-padding-y</td>
     <td>String</td>
@@ -237,6 +417,96 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the ColorEditor views container.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-spacer</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-y</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-spacer</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-y</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-x</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-padding-y</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-padding-x</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-color-gradient-focus-outline-color</td>
     <td>Color</td>
@@ -267,6 +537,48 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The outline offset of the focused ColorGradient.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        min-width: $kendo-color-editor-sm-min-width,
+        header-padding-x: $kendo-color-editor-sm-header-padding-x,
+        header-padding-y: $kendo-color-editor-sm-header-padding-y,
+        views-padding-x: $kendo-color-editor-sm-views-padding-x,
+        views-padding-y: $kendo-color-editor-sm-views-padding-y,
+        preview-gap: $kendo-color-editor-sm-preview-gap,
+        preview-width: $kendo-color-editor-sm-color-preview-width,
+        preview-height: $kendo-color-editor-sm-color-preview-height,
+
+    ),
+    md: (
+        min-width: $kendo-color-editor-md-min-width,
+        header-padding-x: $kendo-color-editor-md-header-padding-x,
+        header-padding-y: $kendo-color-editor-md-header-padding-y,
+        views-padding-x: $kendo-color-editor-md-views-padding-x,
+        views-padding-y: $kendo-color-editor-md-views-padding-y,
+        preview-gap: $kendo-color-editor-md-preview-gap,
+        preview-width: $kendo-color-editor-md-color-preview-width,
+        preview-height: $kendo-color-editor-md-color-preview-height,
+    ),
+    lg: (
+        min-width: $kendo-color-editor-lg-min-width,
+        header-padding-x: $kendo-color-editor-lg-header-padding-x,
+        header-padding-y: $kendo-color-editor-lg-header-padding-y,
+        views-padding-x: $kendo-color-editor-lg-views-padding-x,
+        views-padding-y: $kendo-color-editor-lg-views-padding-y,
+        preview-gap: $kendo-color-editor-lg-preview-gap,
+        preview-width: $kendo-color-editor-lg-color-preview-width,
+        preview-height: $kendo-color-editor-lg-color-preview-height,
+    )
+)</code></td>
+    <td><ul><li>sm: "min-width":"252px","header-padding-x":"var(--kendo-spacing-3, 0.75rem)","header-padding-y":"var(--kendo-spacing-3, 0.75rem)","views-padding-x":"var(--kendo-spacing-3, 0.75rem)","views-padding-y":"var(--kendo-spacing-3, 0.75rem)","preview-gap":"var(--kendo-spacing-0\\.5, 0.125rem)","preview-width":"34px","preview-height":"12px"</li><li>md: "min-width":"272px","header-padding-x":"var(--kendo-spacing-3, 0.75rem)","header-padding-y":"var(--kendo-spacing-3, 0.75rem)","views-padding-x":"var(--kendo-spacing-3, 0.75rem)","views-padding-y":"var(--kendo-spacing-3, 0.75rem)","preview-gap":"var(--kendo-spacing-1, 0.25rem)","preview-width":"32px","preview-height":"12px"</li><li>lg: "min-width":"362px","header-padding-x":"var(--kendo-spacing-4\\.5, 1.125rem)","header-padding-y":"var(--kendo-spacing-4\\.5, 1.125rem)","views-padding-x":"var(--kendo-spacing-4\\.5, 1.125rem)","views-padding-y":"var(--kendo-spacing-4\\.5, 1.125rem)","preview-gap":"var(--kendo-spacing-1, 0.25rem)","preview-width":"44px","preview-height":"16px"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorEditor.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
diff --git a/packages/default/docs/customization-color-gradient.md b/packages/default/docs/customization-color-gradient.md
index 3ffd1e811a..343dabfe91 100644
--- a/packages/default/docs/customization-color-gradient.md
+++ b/packages/default/docs/customization-color-gradient.md
@@ -157,6 +157,66 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the ColorGradient.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-width</td>
+    <td>Number</td>
+    <td><code>226px</code></td>
+    <td><code>226px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-width</code></td>
+    <td><code>272px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-width</td>
+    <td>Number</td>
+    <td><code>324px</code></td>
+    <td><code>324px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-sm-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the small ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the medium ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the large ColorGradient.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-focus-border</td>
     <td>Null</td>
@@ -207,6 +267,66 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the ColorGradient canvas hsv rectangle.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>182px</code></td>
+    <td><code>182px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the small ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-canvas-rectangle-height</code></td>
+    <td><code>180px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the medium ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>268px</code></td>
+    <td><code>268px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the large ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-sm-canvas-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-canvas-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the small ColorGradient canvas.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-canvas-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-canvas-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the medium ColorGradient canvas.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-canvas-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the large ColorGradient canvas.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-slider-track-size</td>
     <td>Number</td>
@@ -267,6 +387,36 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background image of the ColorGradient alpha slider.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>182px</code></td>
+    <td><code>182px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-slider-vertical-size</code></td>
+    <td><code>180px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>268px</code></td>
+    <td><code>268px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-draghandle-width</td>
     <td>Number</td>
@@ -409,9 +559,9 @@ The following table lists the available variables for customization.
 </tr>
 <tr>
     <td>$kendo-color-gradient-input-gap</td>
-    <td>Calculation</td>
-    <td><code>calc( #{$kendo-color-gradient-spacer} / 1.5 )</code></td>
-    <td><code>calc(var(--kendo-spacing-3, 0.75rem) / 1.5)</code></td>
+    <td>String</td>
+    <td><code>k-spacing(2)</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
 </tr>
 <tr>
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the ColorGradient inputs.</div></div>
@@ -437,6 +587,36 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the ColorGradient input labels.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-input-width</td>
+    <td>Number</td>
+    <td><code>42px</code></td>
+    <td><code>42px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorGradient input.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-input-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-input-width</code></td>
+    <td><code>46px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorGradient input.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-input-width</td>
+    <td>Number</td>
+    <td><code>62.5px</code></td>
+    <td><code>62.5px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorGradient input.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-contrast-ratio-font-weight</td>
     <td>String</td>
@@ -457,6 +637,41 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items in the ColorGradient contrast tool.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        width: $kendo-color-gradient-sm-width,
+        vertical-slider-height: $kendo-color-gradient-sm-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-sm-input-width,
+        gap: $kendo-color-gradient-sm-gap,
+        canvas-gap: $kendo-color-gradient-sm-canvas-gap
+    ),
+    md: (
+        width: $kendo-color-gradient-md-width,
+        vertical-slider-height: $kendo-color-gradient-md-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-md-input-width,
+        gap: $kendo-color-gradient-md-gap,
+        canvas-gap: $kendo-color-gradient-md-canvas-gap
+    ),
+    lg: (
+        width: $kendo-color-gradient-lg-width,
+        vertical-slider-height: $kendo-color-gradient-lg-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-lg-input-width,
+        gap: $kendo-color-gradient-lg-gap,
+        canvas-gap: $kendo-color-gradient-lg-canvas-gap
+    )
+)</code></td>
+    <td><ul><li>sm: "width":"226px","vertical-slider-height":"182px","rectangle-height":"182px","input-width":"42px","gap":"var(--kendo-spacing-3, 0.75rem)","canvas-gap":"var(--kendo-spacing-3, 0.75rem)"</li><li>md: "width":"272px","vertical-slider-height":"180px","rectangle-height":"180px","input-width":"46px","gap":"var(--kendo-spacing-3, 0.75rem)","canvas-gap":"var(--kendo-spacing-3, 0.75rem)"</li><li>lg: "width":"324px","vertical-slider-height":"268px","rectangle-height":"268px","input-width":"62.5px","gap":"var(--kendo-spacing-4\\.5, 1.125rem)","canvas-gap":"var(--kendo-spacing-4\\.5, 1.125rem)"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorGradient.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
diff --git a/packages/default/docs/customization-color-palette.md b/packages/default/docs/customization-color-palette.md
index c9c6766049..d8e935f223 100644
--- a/packages/default/docs/customization-color-palette.md
+++ b/packages/default/docs/customization-color-palette.md
@@ -77,6 +77,66 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the ColorPalette tile.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-palette-tile-sm-width</td>
+    <td>String</td>
+    <td><code>k-spacing(5.5)</code></td>
+    <td><code>var(--kendo-spacing-5\.5, 1.375rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-sm-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-sm-width</code></td>
+    <td><code>var(--kendo-spacing-5\.5, 1.375rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-md-width</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-width</code></td>
+    <td><code>var(--kendo-spacing-6, 1.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-md-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-height</code></td>
+    <td><code>var(--kendo-spacing-6, 1.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-lg-width</td>
+    <td>String</td>
+    <td><code>k-spacing(8)</code></td>
+    <td><code>var(--kendo-spacing-8, 2rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-lg-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-lg-width</code></td>
+    <td><code>var(--kendo-spacing-8, 2rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorPalette tile.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-palette-tile-focus-shadow</td>
     <td>List</td>
@@ -107,6 +167,29 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The shadow of the ColorPalette selected tile.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-palette-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        width: $kendo-color-palette-tile-sm-width,
+        height: $kendo-color-palette-tile-sm-height
+    ),
+    md: (
+        width: $kendo-color-palette-tile-md-width,
+        height: $kendo-color-palette-tile-md-height
+    ),
+    lg: (
+        width: $kendo-color-palette-tile-lg-width,
+        height: $kendo-color-palette-tile-lg-height
+    )
+)</code></td>
+    <td><ul><li>sm: "width":"var(--kendo-spacing-5\\.5, 1.375rem)","height":"var(--kendo-spacing-5\\.5, 1.375rem)"</li><li>md: "width":"var(--kendo-spacing-6, 1.5rem)","height":"var(--kendo-spacing-6, 1.5rem)"</li><li>lg: "width":"var(--kendo-spacing-8, 2rem)","height":"var(--kendo-spacing-8, 2rem)"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorPalette.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
diff --git a/packages/default/docs/customization.md b/packages/default/docs/customization.md
index 08b01d37d7..d5400b4d76 100644
--- a/packages/default/docs/customization.md
+++ b/packages/default/docs/customization.md
@@ -6919,6 +6919,36 @@ The following table lists the available variables for customizing the Default th
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-min-width</td>
+    <td>Number</td>
+    <td><code>252px</code></td>
+    <td><code>252px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-min-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-min-width</code></td>
+    <td><code>272px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-min-width</td>
+    <td>Number</td>
+    <td><code>362px</code></td>
+    <td><code>362px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-border-width</td>
     <td>Number</td>
@@ -7041,14 +7071,74 @@ The following table lists the available variables for customizing the Default th
 </tr>
 <tr>
     <td>$kendo-color-editor-header-actions-gap</td>
-    <td>Calculation</td>
-    <td><code>calc( #{$kendo-color-editor-spacer} / 1.5 )</code></td>
-    <td><code>calc(var(--kendo-spacing-3, 0.75rem) / 1.5)</code></td>
+    <td>String</td>
+    <td><code>k-spacing(2)</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
 </tr>
 <tr>
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the ColorEditor header actions.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-header-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-y</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-header-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-x</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-header-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-y</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-header-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-x</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-header-padding-y</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-header-padding-x</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large ColorEditor header.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-color-preview-width</td>
     <td>Number</td>
@@ -7079,6 +7169,96 @@ The following table lists the available variables for customizing the Default th
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the ColorEditor preview.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-preview-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(0.5)</code></td>
+    <td><code>var(--kendo-spacing-0\.5, 0.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-preview-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-preview-gap</code></td>
+    <td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-preview-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(1)</code></td>
+    <td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the large ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-color-preview-width</td>
+    <td>Number</td>
+    <td><code>34px</code></td>
+    <td><code>34px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-color-preview-height</td>
+    <td>Number</td>
+    <td><code>12px</code></td>
+    <td><code>12px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-color-preview-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-color-preview-width</code></td>
+    <td><code>32px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-color-preview-height</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-color-preview-height</code></td>
+    <td><code>12px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-color-preview-width</td>
+    <td>Number</td>
+    <td><code>44px</code></td>
+    <td><code>44px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-color-preview-height</td>
+    <td>Number</td>
+    <td><code>16px</code></td>
+    <td><code>16px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorEditor preview.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-views-padding-y</td>
     <td>String</td>
@@ -7109,6 +7289,96 @@ The following table lists the available variables for customizing the Default th
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the ColorEditor views container.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-spacer</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-y</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-spacer</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-y</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-x</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-padding-y</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-padding-x</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-color-gradient-focus-outline-color</td>
     <td>Color</td>
@@ -7139,6 +7409,48 @@ The following table lists the available variables for customizing the Default th
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The outline offset of the focused ColorGradient.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        min-width: $kendo-color-editor-sm-min-width,
+        header-padding-x: $kendo-color-editor-sm-header-padding-x,
+        header-padding-y: $kendo-color-editor-sm-header-padding-y,
+        views-padding-x: $kendo-color-editor-sm-views-padding-x,
+        views-padding-y: $kendo-color-editor-sm-views-padding-y,
+        preview-gap: $kendo-color-editor-sm-preview-gap,
+        preview-width: $kendo-color-editor-sm-color-preview-width,
+        preview-height: $kendo-color-editor-sm-color-preview-height,
+
+    ),
+    md: (
+        min-width: $kendo-color-editor-md-min-width,
+        header-padding-x: $kendo-color-editor-md-header-padding-x,
+        header-padding-y: $kendo-color-editor-md-header-padding-y,
+        views-padding-x: $kendo-color-editor-md-views-padding-x,
+        views-padding-y: $kendo-color-editor-md-views-padding-y,
+        preview-gap: $kendo-color-editor-md-preview-gap,
+        preview-width: $kendo-color-editor-md-color-preview-width,
+        preview-height: $kendo-color-editor-md-color-preview-height,
+    ),
+    lg: (
+        min-width: $kendo-color-editor-lg-min-width,
+        header-padding-x: $kendo-color-editor-lg-header-padding-x,
+        header-padding-y: $kendo-color-editor-lg-header-padding-y,
+        views-padding-x: $kendo-color-editor-lg-views-padding-x,
+        views-padding-y: $kendo-color-editor-lg-views-padding-y,
+        preview-gap: $kendo-color-editor-lg-preview-gap,
+        preview-width: $kendo-color-editor-lg-color-preview-width,
+        preview-height: $kendo-color-editor-lg-color-preview-height,
+    )
+)</code></td>
+    <td><ul><li>sm: "min-width":"252px","header-padding-x":"var(--kendo-spacing-3, 0.75rem)","header-padding-y":"var(--kendo-spacing-3, 0.75rem)","views-padding-x":"var(--kendo-spacing-3, 0.75rem)","views-padding-y":"var(--kendo-spacing-3, 0.75rem)","preview-gap":"var(--kendo-spacing-0\\.5, 0.125rem)","preview-width":"34px","preview-height":"12px"</li><li>md: "min-width":"272px","header-padding-x":"var(--kendo-spacing-3, 0.75rem)","header-padding-y":"var(--kendo-spacing-3, 0.75rem)","views-padding-x":"var(--kendo-spacing-3, 0.75rem)","views-padding-y":"var(--kendo-spacing-3, 0.75rem)","preview-gap":"var(--kendo-spacing-1, 0.25rem)","preview-width":"32px","preview-height":"12px"</li><li>lg: "min-width":"362px","header-padding-x":"var(--kendo-spacing-4\\.5, 1.125rem)","header-padding-y":"var(--kendo-spacing-4\\.5, 1.125rem)","views-padding-x":"var(--kendo-spacing-4\\.5, 1.125rem)","views-padding-y":"var(--kendo-spacing-4\\.5, 1.125rem)","preview-gap":"var(--kendo-spacing-1, 0.25rem)","preview-width":"44px","preview-height":"16px"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorEditor.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
@@ -7289,6 +7601,66 @@ The following table lists the available variables for customizing the Default th
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the ColorGradient.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-width</td>
+    <td>Number</td>
+    <td><code>226px</code></td>
+    <td><code>226px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-width</code></td>
+    <td><code>272px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-width</td>
+    <td>Number</td>
+    <td><code>324px</code></td>
+    <td><code>324px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-sm-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the small ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the medium ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the large ColorGradient.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-focus-border</td>
     <td>Null</td>
@@ -7339,6 +7711,66 @@ The following table lists the available variables for customizing the Default th
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the ColorGradient canvas hsv rectangle.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>182px</code></td>
+    <td><code>182px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the small ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-canvas-rectangle-height</code></td>
+    <td><code>180px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the medium ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>268px</code></td>
+    <td><code>268px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the large ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-sm-canvas-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-canvas-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the small ColorGradient canvas.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-canvas-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-canvas-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the medium ColorGradient canvas.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-canvas-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the large ColorGradient canvas.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-slider-track-size</td>
     <td>Number</td>
@@ -7399,6 +7831,36 @@ The following table lists the available variables for customizing the Default th
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background image of the ColorGradient alpha slider.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>182px</code></td>
+    <td><code>182px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-slider-vertical-size</code></td>
+    <td><code>180px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>268px</code></td>
+    <td><code>268px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-draghandle-width</td>
     <td>Number</td>
@@ -7541,9 +8003,9 @@ The following table lists the available variables for customizing the Default th
 </tr>
 <tr>
     <td>$kendo-color-gradient-input-gap</td>
-    <td>Calculation</td>
-    <td><code>calc( #{$kendo-color-gradient-spacer} / 1.5 )</code></td>
-    <td><code>calc(var(--kendo-spacing-3, 0.75rem) / 1.5)</code></td>
+    <td>String</td>
+    <td><code>k-spacing(2)</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
 </tr>
 <tr>
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the ColorGradient inputs.</div></div>
@@ -7569,6 +8031,36 @@ The following table lists the available variables for customizing the Default th
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the ColorGradient input labels.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-input-width</td>
+    <td>Number</td>
+    <td><code>42px</code></td>
+    <td><code>42px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorGradient input.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-input-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-input-width</code></td>
+    <td><code>46px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorGradient input.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-input-width</td>
+    <td>Number</td>
+    <td><code>62.5px</code></td>
+    <td><code>62.5px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorGradient input.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-contrast-ratio-font-weight</td>
     <td>String</td>
@@ -7589,6 +8081,41 @@ The following table lists the available variables for customizing the Default th
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items in the ColorGradient contrast tool.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        width: $kendo-color-gradient-sm-width,
+        vertical-slider-height: $kendo-color-gradient-sm-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-sm-input-width,
+        gap: $kendo-color-gradient-sm-gap,
+        canvas-gap: $kendo-color-gradient-sm-canvas-gap
+    ),
+    md: (
+        width: $kendo-color-gradient-md-width,
+        vertical-slider-height: $kendo-color-gradient-md-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-md-input-width,
+        gap: $kendo-color-gradient-md-gap,
+        canvas-gap: $kendo-color-gradient-md-canvas-gap
+    ),
+    lg: (
+        width: $kendo-color-gradient-lg-width,
+        vertical-slider-height: $kendo-color-gradient-lg-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-lg-input-width,
+        gap: $kendo-color-gradient-lg-gap,
+        canvas-gap: $kendo-color-gradient-lg-canvas-gap
+    )
+)</code></td>
+    <td><ul><li>sm: "width":"226px","vertical-slider-height":"182px","rectangle-height":"182px","input-width":"42px","gap":"var(--kendo-spacing-3, 0.75rem)","canvas-gap":"var(--kendo-spacing-3, 0.75rem)"</li><li>md: "width":"272px","vertical-slider-height":"180px","rectangle-height":"180px","input-width":"46px","gap":"var(--kendo-spacing-3, 0.75rem)","canvas-gap":"var(--kendo-spacing-3, 0.75rem)"</li><li>lg: "width":"324px","vertical-slider-height":"268px","rectangle-height":"268px","input-width":"62.5px","gap":"var(--kendo-spacing-4\\.5, 1.125rem)","canvas-gap":"var(--kendo-spacing-4\\.5, 1.125rem)"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorGradient.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
@@ -7659,6 +8186,66 @@ The following table lists the available variables for customizing the Default th
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the ColorPalette tile.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-palette-tile-sm-width</td>
+    <td>String</td>
+    <td><code>k-spacing(5.5)</code></td>
+    <td><code>var(--kendo-spacing-5\.5, 1.375rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-sm-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-sm-width</code></td>
+    <td><code>var(--kendo-spacing-5\.5, 1.375rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-md-width</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-width</code></td>
+    <td><code>var(--kendo-spacing-6, 1.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-md-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-height</code></td>
+    <td><code>var(--kendo-spacing-6, 1.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-lg-width</td>
+    <td>String</td>
+    <td><code>k-spacing(8)</code></td>
+    <td><code>var(--kendo-spacing-8, 2rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-lg-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-lg-width</code></td>
+    <td><code>var(--kendo-spacing-8, 2rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorPalette tile.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-palette-tile-focus-shadow</td>
     <td>List</td>
@@ -7689,6 +8276,29 @@ The following table lists the available variables for customizing the Default th
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The shadow of the ColorPalette selected tile.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-palette-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        width: $kendo-color-palette-tile-sm-width,
+        height: $kendo-color-palette-tile-sm-height
+    ),
+    md: (
+        width: $kendo-color-palette-tile-md-width,
+        height: $kendo-color-palette-tile-md-height
+    ),
+    lg: (
+        width: $kendo-color-palette-tile-lg-width,
+        height: $kendo-color-palette-tile-lg-height
+    )
+)</code></td>
+    <td><ul><li>sm: "width":"var(--kendo-spacing-5\\.5, 1.375rem)","height":"var(--kendo-spacing-5\\.5, 1.375rem)"</li><li>md: "width":"var(--kendo-spacing-6, 1.5rem)","height":"var(--kendo-spacing-6, 1.5rem)"</li><li>lg: "width":"var(--kendo-spacing-8, 2rem)","height":"var(--kendo-spacing-8, 2rem)"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorPalette.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
diff --git a/packages/fluent/docs/customization-color-editor.md b/packages/fluent/docs/customization-color-editor.md
index 07ab5cda5b..01666a6051 100644
--- a/packages/fluent/docs/customization-color-editor.md
+++ b/packages/fluent/docs/customization-color-editor.md
@@ -47,6 +47,36 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-min-width</td>
+    <td>Number</td>
+    <td><code>236px</code></td>
+    <td><code>236px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-min-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-min-width</code></td>
+    <td><code>260px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-min-width</td>
+    <td>Number</td>
+    <td><code>360px</code></td>
+    <td><code>360px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-border-width</td>
     <td>Number</td>
@@ -187,6 +217,66 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the ColorEditor header actions.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-header-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-y</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-header-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-x</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-header-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-y</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-header-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-x</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-header-padding-y</td>
+    <td>String</td>
+    <td><code>k-spacing(4)</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-header-padding-x</td>
+    <td>String</td>
+    <td><code>k-spacing(4)</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large ColorEditor header.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-color-preview-width</td>
     <td>Number</td>
@@ -217,6 +307,96 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the ColorEditor preview.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-preview-spacing</td>
+    <td>String</td>
+    <td><code>k-spacing(1)</code></td>
+    <td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-preview-spacing</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-preview-spacing</code></td>
+    <td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-preview-spacing</td>
+    <td>String</td>
+    <td><code>k-spacing(1)</code></td>
+    <td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the large ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-color-preview-width</td>
+    <td>Number</td>
+    <td><code>34px</code></td>
+    <td><code>34px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-color-preview-height</td>
+    <td>Number</td>
+    <td><code>12px</code></td>
+    <td><code>12px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-color-preview-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-color-preview-width</code></td>
+    <td><code>34px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-color-preview-height</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-color-preview-height</code></td>
+    <td><code>14px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-color-preview-width</td>
+    <td>Number</td>
+    <td><code>34px</code></td>
+    <td><code>34px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-color-preview-height</td>
+    <td>Number</td>
+    <td><code>16px</code></td>
+    <td><code>16px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorEditor preview.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-views-padding-y</td>
     <td>String</td>
@@ -247,6 +427,96 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the ColorEditor views container.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-padding-y</td>
+    <td>String</td>
+    <td><code>k-spacing(2)</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-y</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-spacing</td>
+    <td>String</td>
+    <td><code>k-spacing(4)</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-y</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-x</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-spacing</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-spacing</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-padding-y</td>
+    <td>String</td>
+    <td><code>k-spacing(4)</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-padding-x</td>
+    <td>String</td>
+    <td><code>k-spacing(4)</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-spacing</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-footer-padding-y</td>
     <td>String</td>
@@ -297,6 +567,48 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The outline offset of the focused ColorGradient.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        min-width: $kendo-color-editor-sm-min-width,
+        header-padding-x: $kendo-color-editor-sm-header-padding-x,
+        header-padding-y: $kendo-color-editor-sm-header-padding-y,
+        views-padding-x: $kendo-color-editor-sm-views-padding-x,
+        views-padding-y: $kendo-color-editor-sm-views-padding-y,
+        preview-spacing: $kendo-color-editor-sm-preview-spacing,
+        preview-width: $kendo-color-editor-sm-color-preview-width,
+        preview-height: $kendo-color-editor-sm-color-preview-height,
+
+    ),
+    md: (
+        min-width: $kendo-color-editor-md-min-width,
+        header-padding-x: $kendo-color-editor-md-header-padding-x,
+        header-padding-y: $kendo-color-editor-md-header-padding-y,
+        views-padding-x: $kendo-color-editor-md-views-padding-x,
+        views-padding-y: $kendo-color-editor-md-views-padding-y,
+        preview-spacing: $kendo-color-editor-md-preview-spacing,
+        preview-width: $kendo-color-editor-md-color-preview-width,
+        preview-height: $kendo-color-editor-md-color-preview-height,
+    ),
+    lg: (
+        min-width: $kendo-color-editor-lg-min-width,
+        header-padding-x: $kendo-color-editor-lg-header-padding-x,
+        header-padding-y: $kendo-color-editor-lg-header-padding-y,
+        views-padding-x: $kendo-color-editor-lg-views-padding-x,
+        views-padding-y: $kendo-color-editor-lg-views-padding-y,
+        preview-spacing: $kendo-color-editor-lg-preview-spacing,
+        preview-width: $kendo-color-editor-lg-color-preview-width,
+        preview-height: $kendo-color-editor-lg-color-preview-height,
+    )
+)</code></td>
+    <td><ul><li>sm: "min-width":"236px","header-padding-x":"var(--kendo-spacing-2, 0.5rem)","header-padding-y":"var(--kendo-spacing-2, 0.5rem)","views-padding-x":"var(--kendo-spacing-2, 0.5rem)","views-padding-y":"var(--kendo-spacing-2, 0.5rem)","preview-spacing":"var(--kendo-spacing-1, 0.25rem)","preview-width":"34px","preview-height":"12px"</li><li>md: "min-width":"260px","header-padding-x":"var(--kendo-spacing-2, 0.5rem)","header-padding-y":"var(--kendo-spacing-2, 0.5rem)","views-padding-x":"var(--kendo-spacing-2, 0.5rem)","views-padding-y":"var(--kendo-spacing-2, 0.5rem)","preview-spacing":"var(--kendo-spacing-1, 0.25rem)","preview-width":"34px","preview-height":"14px"</li><li>lg: "min-width":"360px","header-padding-x":"var(--kendo-spacing-4, 1rem)","header-padding-y":"var(--kendo-spacing-4, 1rem)","views-padding-x":"var(--kendo-spacing-4, 1rem)","views-padding-y":"var(--kendo-spacing-4, 1rem)","preview-spacing":"var(--kendo-spacing-1, 0.25rem)","preview-width":"34px","preview-height":"16px"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorEditor preview.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
diff --git a/packages/fluent/docs/customization-color-gradient.md b/packages/fluent/docs/customization-color-gradient.md
index 973d6bd1fd..116d0dcca7 100644
--- a/packages/fluent/docs/customization-color-gradient.md
+++ b/packages/fluent/docs/customization-color-gradient.md
@@ -167,6 +167,66 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the ColorGradient.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-width</td>
+    <td>Number</td>
+    <td><code>226px</code></td>
+    <td><code>226px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-width</code></td>
+    <td><code>260px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-width</td>
+    <td>Number</td>
+    <td><code>360px</code></td>
+    <td><code>360px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-sm-spacing</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-spacing</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the small ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-spacing</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-spacing</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the medium ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-spacing</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the large ColorGradient.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-focus-border</td>
     <td>String</td>
@@ -209,9 +269,9 @@ The following table lists the available variables for customization.
 </tr>
 <tr>
     <td>$kendo-color-gradient-canvas-spacing</td>
-    <td>Calculation</td>
-    <td><code>calc( #{$kendo-color-gradient-spacer} / 2 )</code></td>
-    <td><code>calc(var(--kendo-spacing-4, 1rem) / 2)</code></td>
+    <td>String</td>
+    <td><code>k-spacing(2)</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
 </tr>
 <tr>
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the ColorGradient canvas.</div></div>
@@ -227,6 +287,66 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the ColorGradient canvas hsv rectangle.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>164px</code></td>
+    <td><code>164px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the small ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-canvas-rectangle-height</code></td>
+    <td><code>180px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the medium ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>256px</code></td>
+    <td><code>256px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the large ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-sm-canvas-spacing</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-canvas-spacing</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the small ColorGradient canvas.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-canvas-spacing</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-canvas-spacing</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the medium ColorGradient canvas.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-canvas-spacing</td>
+    <td>String</td>
+    <td><code>k-spacing(4)</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the large ColorGradient canvas.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-canvas-rectangle-border</td>
     <td>String</td>
@@ -317,6 +437,36 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background image of the ColorGradient alpha slider.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>164px</code></td>
+    <td><code>164px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-slider-vertical-size</code></td>
+    <td><code>180px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>256px</code></td>
+    <td><code>256px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-draghandle-width</td>
     <td>Number</td>
@@ -477,6 +627,36 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the ColorGradient input labels.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-input-width</td>
+    <td>Number</td>
+    <td><code>43.5px</code></td>
+    <td><code>43.5px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorGradient input.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-input-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-input-width</code></td>
+    <td><code>48px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorGradient input.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-input-width</td>
+    <td>Number</td>
+    <td><code>50.5px</code></td>
+    <td><code>50.5px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorGradient input.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-contrast-ratio-font-weight</td>
     <td>String</td>
@@ -497,6 +677,41 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items in the ColorGradient contrast tool.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        width: $kendo-color-gradient-sm-width,
+        vertical-slider-height: $kendo-color-gradient-sm-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-sm-input-width,
+        spacing: $kendo-color-gradient-sm-spacing,
+        canvas-spacing: $kendo-color-gradient-sm-canvas-spacing
+    ),
+    md: (
+        width: $kendo-color-gradient-md-width,
+        vertical-slider-height: $kendo-color-gradient-md-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-md-input-width,
+        spacing: $kendo-color-gradient-md-spacing,
+        canvas-spacing: $kendo-color-gradient-md-canvas-spacing
+    ),
+    lg: (
+        width: $kendo-color-gradient-lg-width,
+        vertical-slider-height: $kendo-color-gradient-lg-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-lg-input-width,
+        spacing: $kendo-color-gradient-lg-spacing,
+        canvas-spacing: $kendo-color-gradient-lg-canvas-spacing
+    )
+)</code></td>
+    <td><ul><li>sm: "width":"226px","vertical-slider-height":"164px","rectangle-height":"164px","input-width":"43.5px","spacing":"var(--kendo-spacing-4, 1rem)","canvas-spacing":"var(--kendo-spacing-2, 0.5rem)"</li><li>md: "width":"260px","vertical-slider-height":"180px","rectangle-height":"180px","input-width":"48px","spacing":"var(--kendo-spacing-4, 1rem)","canvas-spacing":"var(--kendo-spacing-2, 0.5rem)"</li><li>lg: "width":"360px","vertical-slider-height":"256px","rectangle-height":"256px","input-width":"50.5px","spacing":"var(--kendo-spacing-4\\.5, 1.125rem)","canvas-spacing":"var(--kendo-spacing-4, 1rem)"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorGradient.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
diff --git a/packages/fluent/docs/customization-color-palette.md b/packages/fluent/docs/customization-color-palette.md
index 1546d9deeb..f4122d7976 100644
--- a/packages/fluent/docs/customization-color-palette.md
+++ b/packages/fluent/docs/customization-color-palette.md
@@ -107,6 +107,66 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the ColorPalette tile.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-palette-tile-sm-width</td>
+    <td>String</td>
+    <td><code>k-spacing(5.5)</code></td>
+    <td><code>var(--kendo-spacing-5\.5, 1.375rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-sm-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-sm-width</code></td>
+    <td><code>var(--kendo-spacing-5\.5, 1.375rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-md-width</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-width</code></td>
+    <td><code>var(--kendo-spacing-6, 1.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-md-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-height</code></td>
+    <td><code>var(--kendo-spacing-6, 1.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-lg-width</td>
+    <td>String</td>
+    <td><code>k-spacing(8)</code></td>
+    <td><code>var(--kendo-spacing-8, 2rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-lg-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-lg-width</code></td>
+    <td><code>var(--kendo-spacing-8, 2rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorPalette tile.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-palette-tile-focus-outline</td>
     <td>String</td>
@@ -177,6 +237,29 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The outline color of the ColorPalette selected hover tile.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-palette-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        width: $kendo-color-palette-tile-sm-width,
+        height: $kendo-color-palette-tile-sm-height
+    ),
+    md: (
+        width: $kendo-color-palette-tile-md-width,
+        height: $kendo-color-palette-tile-md-height
+    ),
+    lg: (
+        width: $kendo-color-palette-tile-lg-width,
+        height: $kendo-color-palette-tile-lg-height
+    )
+)</code></td>
+    <td><ul><li>sm: "width":"var(--kendo-spacing-5\\.5, 1.375rem)","height":"var(--kendo-spacing-5\\.5, 1.375rem)"</li><li>md: "width":"var(--kendo-spacing-6, 1.5rem)","height":"var(--kendo-spacing-6, 1.5rem)"</li><li>lg: "width":"var(--kendo-spacing-8, 2rem)","height":"var(--kendo-spacing-8, 2rem)"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorPalette.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
diff --git a/packages/fluent/docs/customization.md b/packages/fluent/docs/customization.md
index bf752e3bd6..443359b44d 100644
--- a/packages/fluent/docs/customization.md
+++ b/packages/fluent/docs/customization.md
@@ -8101,6 +8101,36 @@ The following table lists the available variables for customizing the Fluent the
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-min-width</td>
+    <td>Number</td>
+    <td><code>236px</code></td>
+    <td><code>236px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-min-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-min-width</code></td>
+    <td><code>260px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-min-width</td>
+    <td>Number</td>
+    <td><code>360px</code></td>
+    <td><code>360px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-border-width</td>
     <td>Number</td>
@@ -8241,6 +8271,66 @@ The following table lists the available variables for customizing the Fluent the
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the ColorEditor header actions.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-header-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-y</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-header-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-x</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-header-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-y</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-header-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-x</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-header-padding-y</td>
+    <td>String</td>
+    <td><code>k-spacing(4)</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-header-padding-x</td>
+    <td>String</td>
+    <td><code>k-spacing(4)</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large ColorEditor header.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-color-preview-width</td>
     <td>Number</td>
@@ -8271,6 +8361,96 @@ The following table lists the available variables for customizing the Fluent the
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the ColorEditor preview.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-preview-spacing</td>
+    <td>String</td>
+    <td><code>k-spacing(1)</code></td>
+    <td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-preview-spacing</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-preview-spacing</code></td>
+    <td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-preview-spacing</td>
+    <td>String</td>
+    <td><code>k-spacing(1)</code></td>
+    <td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the large ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-color-preview-width</td>
+    <td>Number</td>
+    <td><code>34px</code></td>
+    <td><code>34px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-color-preview-height</td>
+    <td>Number</td>
+    <td><code>12px</code></td>
+    <td><code>12px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-color-preview-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-color-preview-width</code></td>
+    <td><code>34px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-color-preview-height</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-color-preview-height</code></td>
+    <td><code>14px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-color-preview-width</td>
+    <td>Number</td>
+    <td><code>34px</code></td>
+    <td><code>34px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-color-preview-height</td>
+    <td>Number</td>
+    <td><code>16px</code></td>
+    <td><code>16px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorEditor preview.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-views-padding-y</td>
     <td>String</td>
@@ -8301,6 +8481,96 @@ The following table lists the available variables for customizing the Fluent the
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the ColorEditor views container.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-padding-y</td>
+    <td>String</td>
+    <td><code>k-spacing(2)</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-y</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-spacing</td>
+    <td>String</td>
+    <td><code>k-spacing(4)</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-y</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-x</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-spacing</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-spacing</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-padding-y</td>
+    <td>String</td>
+    <td><code>k-spacing(4)</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-padding-x</td>
+    <td>String</td>
+    <td><code>k-spacing(4)</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-spacing</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-footer-padding-y</td>
     <td>String</td>
@@ -8351,6 +8621,48 @@ The following table lists the available variables for customizing the Fluent the
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The outline offset of the focused ColorGradient.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        min-width: $kendo-color-editor-sm-min-width,
+        header-padding-x: $kendo-color-editor-sm-header-padding-x,
+        header-padding-y: $kendo-color-editor-sm-header-padding-y,
+        views-padding-x: $kendo-color-editor-sm-views-padding-x,
+        views-padding-y: $kendo-color-editor-sm-views-padding-y,
+        preview-spacing: $kendo-color-editor-sm-preview-spacing,
+        preview-width: $kendo-color-editor-sm-color-preview-width,
+        preview-height: $kendo-color-editor-sm-color-preview-height,
+
+    ),
+    md: (
+        min-width: $kendo-color-editor-md-min-width,
+        header-padding-x: $kendo-color-editor-md-header-padding-x,
+        header-padding-y: $kendo-color-editor-md-header-padding-y,
+        views-padding-x: $kendo-color-editor-md-views-padding-x,
+        views-padding-y: $kendo-color-editor-md-views-padding-y,
+        preview-spacing: $kendo-color-editor-md-preview-spacing,
+        preview-width: $kendo-color-editor-md-color-preview-width,
+        preview-height: $kendo-color-editor-md-color-preview-height,
+    ),
+    lg: (
+        min-width: $kendo-color-editor-lg-min-width,
+        header-padding-x: $kendo-color-editor-lg-header-padding-x,
+        header-padding-y: $kendo-color-editor-lg-header-padding-y,
+        views-padding-x: $kendo-color-editor-lg-views-padding-x,
+        views-padding-y: $kendo-color-editor-lg-views-padding-y,
+        preview-spacing: $kendo-color-editor-lg-preview-spacing,
+        preview-width: $kendo-color-editor-lg-color-preview-width,
+        preview-height: $kendo-color-editor-lg-color-preview-height,
+    )
+)</code></td>
+    <td><ul><li>sm: "min-width":"236px","header-padding-x":"var(--kendo-spacing-2, 0.5rem)","header-padding-y":"var(--kendo-spacing-2, 0.5rem)","views-padding-x":"var(--kendo-spacing-2, 0.5rem)","views-padding-y":"var(--kendo-spacing-2, 0.5rem)","preview-spacing":"var(--kendo-spacing-1, 0.25rem)","preview-width":"34px","preview-height":"12px"</li><li>md: "min-width":"260px","header-padding-x":"var(--kendo-spacing-2, 0.5rem)","header-padding-y":"var(--kendo-spacing-2, 0.5rem)","views-padding-x":"var(--kendo-spacing-2, 0.5rem)","views-padding-y":"var(--kendo-spacing-2, 0.5rem)","preview-spacing":"var(--kendo-spacing-1, 0.25rem)","preview-width":"34px","preview-height":"14px"</li><li>lg: "min-width":"360px","header-padding-x":"var(--kendo-spacing-4, 1rem)","header-padding-y":"var(--kendo-spacing-4, 1rem)","views-padding-x":"var(--kendo-spacing-4, 1rem)","views-padding-y":"var(--kendo-spacing-4, 1rem)","preview-spacing":"var(--kendo-spacing-1, 0.25rem)","preview-width":"34px","preview-height":"16px"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorEditor preview.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
@@ -8511,6 +8823,66 @@ The following table lists the available variables for customizing the Fluent the
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The box shadow of the ColorGradient.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-width</td>
+    <td>Number</td>
+    <td><code>226px</code></td>
+    <td><code>226px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-width</code></td>
+    <td><code>260px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-width</td>
+    <td>Number</td>
+    <td><code>360px</code></td>
+    <td><code>360px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-sm-spacing</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-spacing</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the small ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-spacing</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-spacing</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the medium ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-spacing</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the large ColorGradient.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-focus-border</td>
     <td>String</td>
@@ -8553,9 +8925,9 @@ The following table lists the available variables for customizing the Fluent the
 </tr>
 <tr>
     <td>$kendo-color-gradient-canvas-spacing</td>
-    <td>Calculation</td>
-    <td><code>calc( #{$kendo-color-gradient-spacer} / 2 )</code></td>
-    <td><code>calc(var(--kendo-spacing-4, 1rem) / 2)</code></td>
+    <td>String</td>
+    <td><code>k-spacing(2)</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
 </tr>
 <tr>
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the ColorGradient canvas.</div></div>
@@ -8571,6 +8943,66 @@ The following table lists the available variables for customizing the Fluent the
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the ColorGradient canvas hsv rectangle.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>164px</code></td>
+    <td><code>164px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the small ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-canvas-rectangle-height</code></td>
+    <td><code>180px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the medium ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>256px</code></td>
+    <td><code>256px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the large ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-sm-canvas-spacing</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-canvas-spacing</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the small ColorGradient canvas.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-canvas-spacing</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-canvas-spacing</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the medium ColorGradient canvas.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-canvas-spacing</td>
+    <td>String</td>
+    <td><code>k-spacing(4)</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the large ColorGradient canvas.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-canvas-rectangle-border</td>
     <td>String</td>
@@ -8661,6 +9093,36 @@ The following table lists the available variables for customizing the Fluent the
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background image of the ColorGradient alpha slider.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>164px</code></td>
+    <td><code>164px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-slider-vertical-size</code></td>
+    <td><code>180px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>256px</code></td>
+    <td><code>256px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-draghandle-width</td>
     <td>Number</td>
@@ -8821,6 +9283,36 @@ The following table lists the available variables for customizing the Fluent the
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the ColorGradient input labels.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-input-width</td>
+    <td>Number</td>
+    <td><code>43.5px</code></td>
+    <td><code>43.5px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorGradient input.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-input-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-input-width</code></td>
+    <td><code>48px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorGradient input.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-input-width</td>
+    <td>Number</td>
+    <td><code>50.5px</code></td>
+    <td><code>50.5px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorGradient input.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-contrast-ratio-font-weight</td>
     <td>String</td>
@@ -8841,6 +9333,41 @@ The following table lists the available variables for customizing the Fluent the
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items in the ColorGradient contrast tool.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        width: $kendo-color-gradient-sm-width,
+        vertical-slider-height: $kendo-color-gradient-sm-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-sm-input-width,
+        spacing: $kendo-color-gradient-sm-spacing,
+        canvas-spacing: $kendo-color-gradient-sm-canvas-spacing
+    ),
+    md: (
+        width: $kendo-color-gradient-md-width,
+        vertical-slider-height: $kendo-color-gradient-md-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-md-input-width,
+        spacing: $kendo-color-gradient-md-spacing,
+        canvas-spacing: $kendo-color-gradient-md-canvas-spacing
+    ),
+    lg: (
+        width: $kendo-color-gradient-lg-width,
+        vertical-slider-height: $kendo-color-gradient-lg-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-lg-input-width,
+        spacing: $kendo-color-gradient-lg-spacing,
+        canvas-spacing: $kendo-color-gradient-lg-canvas-spacing
+    )
+)</code></td>
+    <td><ul><li>sm: "width":"226px","vertical-slider-height":"164px","rectangle-height":"164px","input-width":"43.5px","spacing":"var(--kendo-spacing-4, 1rem)","canvas-spacing":"var(--kendo-spacing-2, 0.5rem)"</li><li>md: "width":"260px","vertical-slider-height":"180px","rectangle-height":"180px","input-width":"48px","spacing":"var(--kendo-spacing-4, 1rem)","canvas-spacing":"var(--kendo-spacing-2, 0.5rem)"</li><li>lg: "width":"360px","vertical-slider-height":"256px","rectangle-height":"256px","input-width":"50.5px","spacing":"var(--kendo-spacing-4\\.5, 1.125rem)","canvas-spacing":"var(--kendo-spacing-4, 1rem)"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorGradient.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
@@ -8941,6 +9468,66 @@ The following table lists the available variables for customizing the Fluent the
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the ColorPalette tile.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-palette-tile-sm-width</td>
+    <td>String</td>
+    <td><code>k-spacing(5.5)</code></td>
+    <td><code>var(--kendo-spacing-5\.5, 1.375rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-sm-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-sm-width</code></td>
+    <td><code>var(--kendo-spacing-5\.5, 1.375rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-md-width</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-width</code></td>
+    <td><code>var(--kendo-spacing-6, 1.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-md-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-height</code></td>
+    <td><code>var(--kendo-spacing-6, 1.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-lg-width</td>
+    <td>String</td>
+    <td><code>k-spacing(8)</code></td>
+    <td><code>var(--kendo-spacing-8, 2rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-lg-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-lg-width</code></td>
+    <td><code>var(--kendo-spacing-8, 2rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorPalette tile.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-palette-tile-focus-outline</td>
     <td>String</td>
@@ -9011,6 +9598,29 @@ The following table lists the available variables for customizing the Fluent the
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The outline color of the ColorPalette selected hover tile.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-palette-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        width: $kendo-color-palette-tile-sm-width,
+        height: $kendo-color-palette-tile-sm-height
+    ),
+    md: (
+        width: $kendo-color-palette-tile-md-width,
+        height: $kendo-color-palette-tile-md-height
+    ),
+    lg: (
+        width: $kendo-color-palette-tile-lg-width,
+        height: $kendo-color-palette-tile-lg-height
+    )
+)</code></td>
+    <td><ul><li>sm: "width":"var(--kendo-spacing-5\\.5, 1.375rem)","height":"var(--kendo-spacing-5\\.5, 1.375rem)"</li><li>md: "width":"var(--kendo-spacing-6, 1.5rem)","height":"var(--kendo-spacing-6, 1.5rem)"</li><li>lg: "width":"var(--kendo-spacing-8, 2rem)","height":"var(--kendo-spacing-8, 2rem)"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorPalette.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
diff --git a/packages/material/docs/customization-color-editor.md b/packages/material/docs/customization-color-editor.md
index 3fe17a2e5c..7533fdf23c 100644
--- a/packages/material/docs/customization-color-editor.md
+++ b/packages/material/docs/customization-color-editor.md
@@ -47,6 +47,36 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-min-width</td>
+    <td>Number</td>
+    <td><code>278px</code></td>
+    <td><code>278px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-min-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-min-width</code></td>
+    <td><code>294px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-min-width</td>
+    <td>Number</td>
+    <td><code>364px</code></td>
+    <td><code>364px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-border-width</td>
     <td>Number</td>
@@ -177,6 +207,66 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the ColorEditor header actions.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-header-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-y</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-header-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-x</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-header-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-y</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-header-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-x</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-header-padding-y</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-header-padding-x</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large ColorEditor header.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-color-preview-width</td>
     <td>Number</td>
@@ -207,6 +297,96 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the ColorEditor preview.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-preview-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(2)</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-preview-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-preview-gap</code></td>
+    <td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-preview-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(2)</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the large ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-color-preview-width</td>
+    <td>Number</td>
+    <td><code>34px</code></td>
+    <td><code>34px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-color-preview-height</td>
+    <td>Number</td>
+    <td><code>12px</code></td>
+    <td><code>12px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-color-preview-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-color-preview-width</code></td>
+    <td><code>32px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-color-preview-height</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-color-preview-height</code></td>
+    <td><code>12px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-color-preview-width</td>
+    <td>Number</td>
+    <td><code>42px</code></td>
+    <td><code>42px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-color-preview-height</td>
+    <td>Number</td>
+    <td><code>16px</code></td>
+    <td><code>16px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorEditor preview.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-views-padding-y</td>
     <td>String</td>
@@ -237,6 +417,96 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the ColorEditor views container.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-spacer</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-y</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-spacer</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-y</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-x</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-padding-y</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-padding-x</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-color-gradient-focus-outline-color</td>
     <td>Color</td>
@@ -267,6 +537,48 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The outline offset of the focused ColorGradient.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        min-width: $kendo-color-editor-sm-min-width,
+        header-padding-x: $kendo-color-editor-sm-header-padding-x,
+        header-padding-y: $kendo-color-editor-sm-header-padding-y,
+        views-padding-x: $kendo-color-editor-sm-views-padding-x,
+        views-padding-y: $kendo-color-editor-sm-views-padding-y,
+        preview-gap: $kendo-color-editor-sm-preview-gap,
+        preview-width: $kendo-color-editor-sm-color-preview-width,
+        preview-height: $kendo-color-editor-sm-color-preview-height,
+
+    ),
+    md: (
+        min-width: $kendo-color-editor-md-min-width,
+        header-padding-x: $kendo-color-editor-md-header-padding-x,
+        header-padding-y: $kendo-color-editor-md-header-padding-y,
+        views-padding-x: $kendo-color-editor-md-views-padding-x,
+        views-padding-y: $kendo-color-editor-md-views-padding-y,
+        preview-gap: $kendo-color-editor-md-preview-gap,
+        preview-width: $kendo-color-editor-md-color-preview-width,
+        preview-height: $kendo-color-editor-md-color-preview-height,
+    ),
+    lg: (
+        min-width: $kendo-color-editor-lg-min-width,
+        header-padding-x: $kendo-color-editor-lg-header-padding-x,
+        header-padding-y: $kendo-color-editor-lg-header-padding-y,
+        views-padding-x: $kendo-color-editor-lg-views-padding-x,
+        views-padding-y: $kendo-color-editor-lg-views-padding-y,
+        preview-gap: $kendo-color-editor-lg-preview-gap,
+        preview-width: $kendo-color-editor-lg-color-preview-width,
+        preview-height: $kendo-color-editor-lg-color-preview-height,
+    )
+)</code></td>
+    <td><ul><li>sm: "min-width":"278px","header-padding-x":"var(--kendo-spacing-3, 0.75rem)","header-padding-y":"var(--kendo-spacing-3, 0.75rem)","views-padding-x":"var(--kendo-spacing-3, 0.75rem)","views-padding-y":"var(--kendo-spacing-3, 0.75rem)","preview-gap":"var(--kendo-spacing-2, 0.5rem)","preview-width":"34px","preview-height":"12px"</li><li>md: "min-width":"294px","header-padding-x":"var(--kendo-spacing-3, 0.75rem)","header-padding-y":"var(--kendo-spacing-3, 0.75rem)","views-padding-x":"var(--kendo-spacing-3, 0.75rem)","views-padding-y":"var(--kendo-spacing-3, 0.75rem)","preview-gap":"var(--kendo-spacing-1, 0.25rem)","preview-width":"32px","preview-height":"12px"</li><li>lg: "min-width":"364px","header-padding-x":"var(--kendo-spacing-4\\.5, 1.125rem)","header-padding-y":"var(--kendo-spacing-4\\.5, 1.125rem)","views-padding-x":"var(--kendo-spacing-4\\.5, 1.125rem)","views-padding-y":"var(--kendo-spacing-4\\.5, 1.125rem)","preview-gap":"var(--kendo-spacing-2, 0.5rem)","preview-width":"42px","preview-height":"16px"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorEditor.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
diff --git a/packages/material/docs/customization-color-gradient.md b/packages/material/docs/customization-color-gradient.md
index 86afa7b5f2..9acdcb1ef1 100644
--- a/packages/material/docs/customization-color-gradient.md
+++ b/packages/material/docs/customization-color-gradient.md
@@ -157,6 +157,66 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the ColorGradient.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-width</td>
+    <td>Number</td>
+    <td><code>254px</code></td>
+    <td><code>254px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-width</code></td>
+    <td><code>294px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-width</td>
+    <td>Number</td>
+    <td><code>328px</code></td>
+    <td><code>328px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-sm-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(2.5)</code></td>
+    <td><code>var(--kendo-spacing-2\.5, 0.625rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the small ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the medium ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(4)</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the large ColorGradient.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-focus-border</td>
     <td>String</td>
@@ -207,6 +267,66 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the ColorGradient canvas hsv rectangle.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>210px</code></td>
+    <td><code>210px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the small ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-canvas-rectangle-height</code></td>
+    <td><code>180px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the medium ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>266px</code></td>
+    <td><code>266px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the large ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-sm-canvas-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(2.5)</code></td>
+    <td><code>var(--kendo-spacing-2\.5, 0.625rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the small ColorGradient canvas.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-canvas-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-canvas-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the medium ColorGradient canvas.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-canvas-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(4)</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the large ColorGradient canvas.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-slider-track-size</td>
     <td>Number</td>
@@ -267,6 +387,36 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background image of the ColorGradient alpha slider.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>210px</code></td>
+    <td><code>210px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-slider-vertical-size</code></td>
+    <td><code>180px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>266px</code></td>
+    <td><code>266px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-draghandle-width</td>
     <td>Number</td>
@@ -437,6 +587,36 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the ColorGradient input labels.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-input-width</td>
+    <td>Number</td>
+    <td><code>46px</code></td>
+    <td><code>46px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorGradient input.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-input-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-input-width</code></td>
+    <td><code>50px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorGradient input.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-input-width</td>
+    <td>Number</td>
+    <td><code>62px</code></td>
+    <td><code>62px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorGradient input.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-contrast-ratio-font-weight</td>
     <td>String</td>
@@ -457,6 +637,41 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items in the ColorGradient contrast tool.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        width: $kendo-color-gradient-sm-width,
+        vertical-slider-height: $kendo-color-gradient-sm-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-sm-input-width,
+        gap: $kendo-color-gradient-sm-gap,
+        canvas-gap: $kendo-color-gradient-sm-canvas-gap
+    ),
+    md: (
+        width: $kendo-color-gradient-md-width,
+        vertical-slider-height: $kendo-color-gradient-md-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-md-input-width,
+        gap: $kendo-color-gradient-md-gap,
+        canvas-gap: $kendo-color-gradient-md-canvas-gap
+    ),
+    lg: (
+        width: $kendo-color-gradient-lg-width,
+        vertical-slider-height: $kendo-color-gradient-lg-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-lg-input-width,
+        gap: $kendo-color-gradient-lg-gap,
+        canvas-gap: $kendo-color-gradient-lg-canvas-gap
+    )
+)</code></td>
+    <td><ul><li>sm: "width":"254px","vertical-slider-height":"210px","rectangle-height":"210px","input-width":"46px","gap":"var(--kendo-spacing-2\\.5, 0.625rem)","canvas-gap":"var(--kendo-spacing-2\\.5, 0.625rem)"</li><li>md: "width":"294px","vertical-slider-height":"180px","rectangle-height":"180px","input-width":"50px","gap":"var(--kendo-spacing-3, 0.75rem)","canvas-gap":"var(--kendo-spacing-3, 0.75rem)"</li><li>lg: "width":"328px","vertical-slider-height":"266px","rectangle-height":"266px","input-width":"62px","gap":"var(--kendo-spacing-4, 1rem)","canvas-gap":"var(--kendo-spacing-4, 1rem)"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorGradient.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
diff --git a/packages/material/docs/customization-color-palette.md b/packages/material/docs/customization-color-palette.md
index b130617c4b..7662cb4daf 100644
--- a/packages/material/docs/customization-color-palette.md
+++ b/packages/material/docs/customization-color-palette.md
@@ -77,6 +77,66 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the ColorPalette tile.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-palette-tile-sm-width</td>
+    <td>String</td>
+    <td><code>k-spacing(5.5)</code></td>
+    <td><code>var(--kendo-spacing-5\.5, 1.375rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container">
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-sm-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-sm-width</code></td>
+    <td><code>var(--kendo-spacing-5\.5, 1.375rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-md-width</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-width</code></td>
+    <td><code>var(--kendo-spacing-6, 1.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-md-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-height</code></td>
+    <td><code>var(--kendo-spacing-6, 1.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-lg-width</td>
+    <td>String</td>
+    <td><code>k-spacing(8)</code></td>
+    <td><code>var(--kendo-spacing-8, 2rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-lg-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-lg-width</code></td>
+    <td><code>var(--kendo-spacing-8, 2rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorPalette tile.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-palette-tile-focus-shadow</td>
     <td>List</td>
@@ -107,6 +167,29 @@ The following table lists the available variables for customization.
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The shadow of the ColorPalette selected tile.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-palette-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        width: $kendo-color-palette-tile-sm-width,
+        height: $kendo-color-palette-tile-sm-height
+    ),
+    md: (
+        width: $kendo-color-palette-tile-md-width,
+        height: $kendo-color-palette-tile-md-height
+    ),
+    lg: (
+        width: $kendo-color-palette-tile-lg-width,
+        height: $kendo-color-palette-tile-lg-height
+    )
+)</code></td>
+    <td><ul><li>sm: "width":"var(--kendo-spacing-5\\.5, 1.375rem)","height":"var(--kendo-spacing-5\\.5, 1.375rem)"</li><li>md: "width":"var(--kendo-spacing-6, 1.5rem)","height":"var(--kendo-spacing-6, 1.5rem)"</li><li>lg: "width":"var(--kendo-spacing-8, 2rem)","height":"var(--kendo-spacing-8, 2rem)"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorPalette.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
diff --git a/packages/material/docs/customization.md b/packages/material/docs/customization.md
index 039350a50d..6f444ab3fb 100644
--- a/packages/material/docs/customization.md
+++ b/packages/material/docs/customization.md
@@ -6939,6 +6939,36 @@ The following table lists the available variables for customizing the Material t
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-min-width</td>
+    <td>Number</td>
+    <td><code>278px</code></td>
+    <td><code>278px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-min-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-min-width</code></td>
+    <td><code>294px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-min-width</td>
+    <td>Number</td>
+    <td><code>364px</code></td>
+    <td><code>364px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The minimum width of the ColorEditor.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-border-width</td>
     <td>Number</td>
@@ -7069,6 +7099,66 @@ The following table lists the available variables for customizing the Material t
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the ColorEditor header actions.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-header-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-y</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-header-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-x</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-header-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-y</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-header-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-header-padding-x</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-header-padding-y</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large ColorEditor header.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-header-padding-x</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large ColorEditor header.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-color-preview-width</td>
     <td>Number</td>
@@ -7099,6 +7189,96 @@ The following table lists the available variables for customizing the Material t
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the ColorEditor preview.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-preview-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(2)</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-preview-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-preview-gap</code></td>
+    <td><code>var(--kendo-spacing-1, 0.25rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-preview-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(2)</code></td>
+    <td><code>var(--kendo-spacing-2, 0.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the colors in the large ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-color-preview-width</td>
+    <td>Number</td>
+    <td><code>34px</code></td>
+    <td><code>34px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-color-preview-height</td>
+    <td>Number</td>
+    <td><code>12px</code></td>
+    <td><code>12px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-color-preview-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-color-preview-width</code></td>
+    <td><code>32px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-color-preview-height</td>
+    <td>Number</td>
+    <td><code>$kendo-color-editor-color-preview-height</code></td>
+    <td><code>12px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-color-preview-width</td>
+    <td>Number</td>
+    <td><code>42px</code></td>
+    <td><code>42px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorEditor preview.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-color-preview-height</td>
+    <td>Number</td>
+    <td><code>16px</code></td>
+    <td><code>16px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorEditor preview.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-views-padding-y</td>
     <td>String</td>
@@ -7129,6 +7309,96 @@ The following table lists the available variables for customizing the Material t
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the ColorEditor views container.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-spacer</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-y</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-sm-views-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-spacer</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the small ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-padding-y</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-y</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-padding-x</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-padding-x</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-md-views-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-editor-views-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the medium ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-padding-y</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The vertical padding of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-padding-x</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The horizontal padding of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-editor-lg-views-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(4.5)</code></td>
+    <td><code>var(--kendo-spacing-4\.5, 1.125rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing of the large ColorEditor views container.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-editor-color-gradient-focus-outline-color</td>
     <td>Color</td>
@@ -7159,6 +7429,48 @@ The following table lists the available variables for customizing the Material t
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The outline offset of the focused ColorGradient.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-editor-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        min-width: $kendo-color-editor-sm-min-width,
+        header-padding-x: $kendo-color-editor-sm-header-padding-x,
+        header-padding-y: $kendo-color-editor-sm-header-padding-y,
+        views-padding-x: $kendo-color-editor-sm-views-padding-x,
+        views-padding-y: $kendo-color-editor-sm-views-padding-y,
+        preview-gap: $kendo-color-editor-sm-preview-gap,
+        preview-width: $kendo-color-editor-sm-color-preview-width,
+        preview-height: $kendo-color-editor-sm-color-preview-height,
+
+    ),
+    md: (
+        min-width: $kendo-color-editor-md-min-width,
+        header-padding-x: $kendo-color-editor-md-header-padding-x,
+        header-padding-y: $kendo-color-editor-md-header-padding-y,
+        views-padding-x: $kendo-color-editor-md-views-padding-x,
+        views-padding-y: $kendo-color-editor-md-views-padding-y,
+        preview-gap: $kendo-color-editor-md-preview-gap,
+        preview-width: $kendo-color-editor-md-color-preview-width,
+        preview-height: $kendo-color-editor-md-color-preview-height,
+    ),
+    lg: (
+        min-width: $kendo-color-editor-lg-min-width,
+        header-padding-x: $kendo-color-editor-lg-header-padding-x,
+        header-padding-y: $kendo-color-editor-lg-header-padding-y,
+        views-padding-x: $kendo-color-editor-lg-views-padding-x,
+        views-padding-y: $kendo-color-editor-lg-views-padding-y,
+        preview-gap: $kendo-color-editor-lg-preview-gap,
+        preview-width: $kendo-color-editor-lg-color-preview-width,
+        preview-height: $kendo-color-editor-lg-color-preview-height,
+    )
+)</code></td>
+    <td><ul><li>sm: "min-width":"278px","header-padding-x":"var(--kendo-spacing-3, 0.75rem)","header-padding-y":"var(--kendo-spacing-3, 0.75rem)","views-padding-x":"var(--kendo-spacing-3, 0.75rem)","views-padding-y":"var(--kendo-spacing-3, 0.75rem)","preview-gap":"var(--kendo-spacing-2, 0.5rem)","preview-width":"34px","preview-height":"12px"</li><li>md: "min-width":"294px","header-padding-x":"var(--kendo-spacing-3, 0.75rem)","header-padding-y":"var(--kendo-spacing-3, 0.75rem)","views-padding-x":"var(--kendo-spacing-3, 0.75rem)","views-padding-y":"var(--kendo-spacing-3, 0.75rem)","preview-gap":"var(--kendo-spacing-1, 0.25rem)","preview-width":"32px","preview-height":"12px"</li><li>lg: "min-width":"364px","header-padding-x":"var(--kendo-spacing-4\\.5, 1.125rem)","header-padding-y":"var(--kendo-spacing-4\\.5, 1.125rem)","views-padding-x":"var(--kendo-spacing-4\\.5, 1.125rem)","views-padding-y":"var(--kendo-spacing-4\\.5, 1.125rem)","preview-gap":"var(--kendo-spacing-2, 0.5rem)","preview-width":"42px","preview-height":"16px"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorEditor.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
@@ -7309,6 +7621,66 @@ The following table lists the available variables for customizing the Material t
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the ColorGradient.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-width</td>
+    <td>Number</td>
+    <td><code>254px</code></td>
+    <td><code>254px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-width</code></td>
+    <td><code>294px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-width</td>
+    <td>Number</td>
+    <td><code>328px</code></td>
+    <td><code>328px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-sm-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(2.5)</code></td>
+    <td><code>var(--kendo-spacing-2\.5, 0.625rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the small ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the medium ColorGradient.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(4)</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the sections of the large ColorGradient.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-focus-border</td>
     <td>String</td>
@@ -7359,6 +7731,66 @@ The following table lists the available variables for customizing the Material t
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the ColorGradient canvas hsv rectangle.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>210px</code></td>
+    <td><code>210px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the small ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-canvas-rectangle-height</code></td>
+    <td><code>180px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the medium ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-canvas-rectangle-height</td>
+    <td>Number</td>
+    <td><code>266px</code></td>
+    <td><code>266px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height the large ColorGradient canvas hsv rectangle.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-sm-canvas-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(2.5)</code></td>
+    <td><code>var(--kendo-spacing-2\.5, 0.625rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the small ColorGradient canvas.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-canvas-gap</td>
+    <td>String</td>
+    <td><code>$kendo-color-gradient-canvas-gap</code></td>
+    <td><code>var(--kendo-spacing-3, 0.75rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the medium ColorGradient canvas.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-canvas-gap</td>
+    <td>String</td>
+    <td><code>k-spacing(4)</code></td>
+    <td><code>var(--kendo-spacing-4, 1rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items of the large ColorGradient canvas.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-slider-track-size</td>
     <td>Number</td>
@@ -7419,6 +7851,36 @@ The following table lists the available variables for customizing the Material t
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background image of the ColorGradient alpha slider.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>210px</code></td>
+    <td><code>210px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-slider-vertical-size</code></td>
+    <td><code>180px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-slider-vertical-size</td>
+    <td>Number</td>
+    <td><code>266px</code></td>
+    <td><code>266px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorGradient vertical slider.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-draghandle-width</td>
     <td>Number</td>
@@ -7589,6 +8051,36 @@ The following table lists the available variables for customizing the Material t
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the ColorGradient input labels.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sm-input-width</td>
+    <td>Number</td>
+    <td><code>46px</code></td>
+    <td><code>46px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the small ColorGradient input.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-md-input-width</td>
+    <td>Number</td>
+    <td><code>$kendo-color-gradient-input-width</code></td>
+    <td><code>50px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorGradient input.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-gradient-lg-input-width</td>
+    <td>Number</td>
+    <td><code>62px</code></td>
+    <td><code>62px</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorGradient input.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-gradient-contrast-ratio-font-weight</td>
     <td>String</td>
@@ -7609,6 +8101,41 @@ The following table lists the available variables for customizing the Material t
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The spacing between the items in the ColorGradient contrast tool.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-gradient-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        width: $kendo-color-gradient-sm-width,
+        vertical-slider-height: $kendo-color-gradient-sm-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-sm-input-width,
+        gap: $kendo-color-gradient-sm-gap,
+        canvas-gap: $kendo-color-gradient-sm-canvas-gap
+    ),
+    md: (
+        width: $kendo-color-gradient-md-width,
+        vertical-slider-height: $kendo-color-gradient-md-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-md-input-width,
+        gap: $kendo-color-gradient-md-gap,
+        canvas-gap: $kendo-color-gradient-md-canvas-gap
+    ),
+    lg: (
+        width: $kendo-color-gradient-lg-width,
+        vertical-slider-height: $kendo-color-gradient-lg-slider-vertical-size,
+        rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,
+        input-width: $kendo-color-gradient-lg-input-width,
+        gap: $kendo-color-gradient-lg-gap,
+        canvas-gap: $kendo-color-gradient-lg-canvas-gap
+    )
+)</code></td>
+    <td><ul><li>sm: "width":"254px","vertical-slider-height":"210px","rectangle-height":"210px","input-width":"46px","gap":"var(--kendo-spacing-2\\.5, 0.625rem)","canvas-gap":"var(--kendo-spacing-2\\.5, 0.625rem)"</li><li>md: "width":"294px","vertical-slider-height":"180px","rectangle-height":"180px","input-width":"50px","gap":"var(--kendo-spacing-3, 0.75rem)","canvas-gap":"var(--kendo-spacing-3, 0.75rem)"</li><li>lg: "width":"328px","vertical-slider-height":"266px","rectangle-height":"266px","input-width":"62px","gap":"var(--kendo-spacing-4, 1rem)","canvas-gap":"var(--kendo-spacing-4, 1rem)"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorGradient.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>
 
@@ -7679,6 +8206,66 @@ The following table lists the available variables for customizing the Material t
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the ColorPalette tile.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-palette-tile-sm-width</td>
+    <td>String</td>
+    <td><code>k-spacing(5.5)</code></td>
+    <td><code>var(--kendo-spacing-5\.5, 1.375rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container">
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-sm-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-sm-width</code></td>
+    <td><code>var(--kendo-spacing-5\.5, 1.375rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the small ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-md-width</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-width</code></td>
+    <td><code>var(--kendo-spacing-6, 1.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the medium ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-md-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-height</code></td>
+    <td><code>var(--kendo-spacing-6, 1.5rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the medium ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-lg-width</td>
+    <td>String</td>
+    <td><code>k-spacing(8)</code></td>
+    <td><code>var(--kendo-spacing-8, 2rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The width of the large ColorPalette tile.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$kendo-color-palette-tile-lg-height</td>
+    <td>String</td>
+    <td><code>$kendo-color-palette-tile-lg-width</code></td>
+    <td><code>var(--kendo-spacing-8, 2rem)</code></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The height of the large ColorPalette tile.</div></div>
+    </td>
+</tr>
 <tr>
     <td>$kendo-color-palette-tile-focus-shadow</td>
     <td>List</td>
@@ -7709,6 +8296,29 @@ The following table lists the available variables for customizing the Material t
     <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The shadow of the ColorPalette selected tile.</div></div>
     </td>
 </tr>
+<tr>
+    <td>$kendo-color-palette-sizes</td>
+    <td>Map</td>
+    <td><code>(
+    sm: (
+        width: $kendo-color-palette-tile-sm-width,
+        height: $kendo-color-palette-tile-sm-height
+    ),
+    md: (
+        width: $kendo-color-palette-tile-md-width,
+        height: $kendo-color-palette-tile-md-height
+    ),
+    lg: (
+        width: $kendo-color-palette-tile-lg-width,
+        height: $kendo-color-palette-tile-lg-height
+    )
+)</code></td>
+    <td><ul><li>sm: "width":"var(--kendo-spacing-5\\.5, 1.375rem)","height":"var(--kendo-spacing-5\\.5, 1.375rem)"</li><li>md: "width":"var(--kendo-spacing-6, 1.5rem)","height":"var(--kendo-spacing-6, 1.5rem)"</li><li>lg: "width":"var(--kendo-spacing-8, 2rem)","height":"var(--kendo-spacing-8, 2rem)"</li></ul></td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The size map of the ColorPalette.</div></div>
+    </td>
+</tr>
 </tbody>
 </table>