diff --git a/packages/bootstrap/scss/coloreditor/_variables.scss b/packages/bootstrap/scss/coloreditor/_variables.scss
index 6ef8e4e4137..ab1cf5f3e67 100644
--- a/packages/bootstrap/scss/coloreditor/_variables.scss
+++ b/packages/bootstrap/scss/coloreditor/_variables.scss
@@ -9,6 +9,16 @@ $kendo-color-editor-spacer: k-spacing(4) !default;
 /// The minimum width of the ColorEditor.
 /// @group color-editor
 $kendo-color-editor-min-width: 328px !default;
+/// The minimum width of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-sm-min-width: 252px !default;
+/// The minimum width of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-md-min-width: $kendo-color-editor-min-width !default;
+/// The minimum width of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-lg-min-width: 362px !default;
+
 /// The width of the border around the ColorEditor.
 /// @group color-editor
 $kendo-color-editor-border-width: 1px !default;
@@ -50,6 +60,25 @@ $kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-y !defa
 /// The spacing between the ColorEditor header actions.
 /// @group color-editor
 $kendo-color-editor-header-actions-gap: calc( #{$kendo-color-editor-spacer} / 2 ) !default;
+/// The vertical padding of the small ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-sm-header-padding-y: $kendo-color-editor-header-padding-y !default;
+/// The horizontal padding of the small ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-sm-header-padding-x: $kendo-color-editor-header-padding-x !default;
+/// The vertical padding of the medium ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-md-header-padding-y: $kendo-color-editor-header-padding-y !default;
+/// The horizontal padding of the medium ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-md-header-padding-x: $kendo-color-editor-header-padding-x !default;
+/// The vertical padding of the large ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-lg-header-padding-y: k-spacing(4.5) !default;
+/// The horizontal padding of the large ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-lg-header-padding-x: k-spacing(4.5) !default;
+
 
 /// The width of the ColorEditor preview.
 /// @group color-editor
@@ -60,6 +89,34 @@ $kendo-color-editor-color-preview-height: 12px !default;
 /// The spacing between the colors in the ColorEditor preview.
 /// @group color-editor
 $kendo-color-editor-preview-gap: k-spacing(1) !default;
+/// The spacing between the colors in the small ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-sm-preview-gap: k-spacing(1) !default;
+/// The spacing between the colors in the medium ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-md-preview-gap: $kendo-color-editor-preview-gap !default;
+/// The spacing between the colors in the large ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-lg-preview-gap: k-spacing(1) !default;
+
+/// The width of the small ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-sm-width: 32px !default;
+/// The height of the small ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-sm-height: 10px !default;
+/// The width of the medium ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-md-width: $kendo-color-editor-color-preview-width !default;
+/// The height of the medium ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-md-height: $kendo-color-editor-color-preview-height !default;
+/// The width of the large ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-lg-width: 32px !default;
+/// The height of the large ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-lg-height: 12px !default;
 
 /// The vertical padding of the ColorEditor views container.
 /// @group color-editor
@@ -70,6 +127,33 @@ $kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-y !defaul
 /// The spacing of the ColorEditor views container.
 /// @group color-editor
 $kendo-color-editor-views-gap: $kendo-color-editor-spacer !default;
+/// The vertical padding of the small ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-sm-views-padding-y: $kendo-color-editor-spacer !default;
+/// The horizontal padding of the small ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-sm-views-padding-x: $kendo-color-editor-views-padding-y !default;
+/// The spacing of the small ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-sm-views-gap: $kendo-color-editor-spacer !default;
+/// The vertical padding of the medium ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-md-views-padding-y: $kendo-color-editor-views-padding-y !default;
+/// The horizontal padding of the medium ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-md-views-padding-x: $kendo-color-editor-views-padding-x !default;
+/// The spacing of the medium ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-md-views-gap: $kendo-color-editor-views-gap !default;
+/// The vertical padding of the large ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-lg-views-padding-y: k-spacing(4.5) !default;
+/// The horizontal padding of the large ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-lg-views-padding-x: k-spacing(4.5) !default;
+/// The spacing of the large ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-lg-views-gap: k-spacing(4.5) !default;
 
 /// The outline color of the focused ColorGradient.
 /// @group color-editor
@@ -82,9 +166,48 @@ $kendo-color-editor-color-gradient-focus-outline: 2px !default;
 $kendo-color-editor-color-gradient-focus-outline-offset: 2px !default;
 
 
+/// The size map of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-sizes: (
+    sm: (
+        min-width: $kendo-color-editor-sm-min-width,
+        width: $kendo-color-editor-color-preview-sm-width,
+        height: $kendo-color-editor-color-preview-sm-height,
+        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
+
+    ),
+    md: (
+        min-width: $kendo-color-editor-md-min-width,
+        width: $kendo-color-editor-color-preview-md-width,
+        height: $kendo-color-editor-color-preview-md-height,
+        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
+    ),
+    lg: (
+        min-width: $kendo-color-editor-lg-min-width,
+        width: $kendo-color-editor-color-preview-lg-width,
+        height: $kendo-color-editor-color-preview-lg-height,
+        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
+    )
+) !default;
+
 @forward "@progress/kendo-theme-default/scss/coloreditor/_variables.scss" with (
     $kendo-color-editor-spacer: $kendo-color-editor-spacer,
     $kendo-color-editor-min-width: $kendo-color-editor-min-width,
+    $kendo-color-editor-sm-min-width: $kendo-color-editor-sm-min-width,
+    $kendo-color-editor-md-min-width: $kendo-color-editor-md-min-width,
+    $kendo-color-editor-lg-min-width: $kendo-color-editor-lg-min-width,
     $kendo-color-editor-border-width: $kendo-color-editor-border-width,
     $kendo-color-editor-border-radius: $kendo-color-editor-border-radius,
     $kendo-color-editor-font-family: $kendo-color-editor-font-family,
@@ -97,13 +220,37 @@ $kendo-color-editor-color-gradient-focus-outline-offset: 2px !default;
     $kendo-color-editor-focus-shadow: $kendo-color-editor-focus-shadow,
     $kendo-color-editor-header-padding-y: $kendo-color-editor-header-padding-y,
     $kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-x,
+    $kendo-color-editor-sm-header-padding-y: $kendo-color-editor-sm-header-padding-y,
+    $kendo-color-editor-sm-header-padding-x: $kendo-color-editor-sm-header-padding-x,
+    $kendo-color-editor-md-header-padding-y: $kendo-color-editor-md-header-padding-y,
+    $kendo-color-editor-md-header-padding-x: $kendo-color-editor-md-header-padding-x,
+    $kendo-color-editor-lg-header-padding-y: $kendo-color-editor-lg-header-padding-y,
+    $kendo-color-editor-lg-header-padding-x: $kendo-color-editor-lg-header-padding-x,
     $kendo-color-editor-header-actions-gap: $kendo-color-editor-header-actions-gap,
     $kendo-color-editor-color-preview-width: $kendo-color-editor-color-preview-width,
     $kendo-color-editor-color-preview-height: $kendo-color-editor-color-preview-height,
     $kendo-color-editor-preview-gap: $kendo-color-editor-preview-gap,
+    $kendo-color-editor-sm-preview-gap: $kendo-color-editor-sm-preview-gap,
+    $kendo-color-editor-md-preview-gap: $kendo-color-editor-md-preview-gap,
+    $kendo-color-editor-lg-preview-gap: $kendo-color-editor-lg-preview-gap,
+    $kendo-color-editor-color-preview-sm-width: $kendo-color-editor-color-preview-sm-width,
+    $kendo-color-editor-color-preview-sm-height: $kendo-color-editor-color-preview-sm-height,
+    $kendo-color-editor-color-preview-md-width: $kendo-color-editor-color-preview-md-width,
+    $kendo-color-editor-color-preview-md-height: $kendo-color-editor-color-preview-md-height,
+    $kendo-color-editor-color-preview-lg-width: $kendo-color-editor-color-preview-lg-width,
+    $kendo-color-editor-color-preview-lg-height: $kendo-color-editor-color-preview-lg-height,
     $kendo-color-editor-views-padding-y: $kendo-color-editor-views-padding-y,
     $kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-x,
     $kendo-color-editor-views-gap: $kendo-color-editor-views-gap,
+    $kendo-color-editor-sm-views-padding-y: $kendo-color-editor-sm-views-padding-y,
+    $kendo-color-editor-sm-views-padding-x: $kendo-color-editor-sm-views-padding-x,
+    $kendo-color-editor-sm-views-gap: $kendo-color-editor-sm-views-gap,
+    $kendo-color-editor-md-views-padding-y: $kendo-color-editor-md-views-padding-y,
+    $kendo-color-editor-md-views-padding-x: $kendo-color-editor-md-views-padding-x,
+    $kendo-color-editor-md-views-gap: $kendo-color-editor-md-views-gap,
+    $kendo-color-editor-lg-views-padding-y: $kendo-color-editor-lg-views-padding-y,
+    $kendo-color-editor-lg-views-padding-x: $kendo-color-editor-lg-views-padding-x,
+    $kendo-color-editor-lg-views-gap: $kendo-color-editor-lg-views-gap,
     $kendo-color-editor-color-gradient-focus-outline-color: $kendo-color-editor-color-gradient-focus-outline-color,
     $kendo-color-editor-color-gradient-focus-outline: $kendo-color-editor-color-gradient-focus-outline,
     $kendo-color-editor-color-gradient-focus-outline-offset: $kendo-color-editor-color-gradient-focus-outline-offset
diff --git a/packages/bootstrap/scss/colorgradient/_variables.scss b/packages/bootstrap/scss/colorgradient/_variables.scss
index 90a83532f9d..838e25428a4 100644
--- a/packages/bootstrap/scss/colorgradient/_variables.scss
+++ b/packages/bootstrap/scss/colorgradient/_variables.scss
@@ -44,6 +44,26 @@ $kendo-color-gradient-bg: $kendo-component-bg !default;
 /// @group color-gradient
 $kendo-color-gradient-border: $kendo-component-border !default;
 
+/// The width of the small ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sm-width: 266px !default;
+/// The width of the medium ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-md-width: $kendo-color-gradient-width !default;
+/// The width of the large ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-lg-width: 362px !default;
+
+/// The spacing between the sections of the small ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sm-gap: $kendo-color-gradient-gap !default;
+/// The spacing between the sections of the medium ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-md-gap: $kendo-color-gradient-gap !default;
+/// The spacing between the sections of the large ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-lg-gap: k-spacing(4.5) !default;
+
 /// The border color of the focused ColorGradient.
 /// @group color-gradient
 $kendo-color-gradient-focus-border: $kendo-hover-border !default;
@@ -60,6 +80,25 @@ $kendo-color-gradient-canvas-gap: k-spacing(3) !default;
 /// The height the ColorGradient canvas hsv rectangle.
 /// @group color-gradient
 $kendo-color-gradient-canvas-rectangle-height: 180px !default;
+/// The height the small ColorGradient canvas hsv rectangle.
+/// @group color-gradient
+$kendo-color-gradient-sm-canvas-rectangle-height: 186px !default;
+/// The height the medium ColorGradient canvas hsv rectangle.
+/// @group color-gradient
+$kendo-color-gradient-md-canvas-rectangle-height: $kendo-color-gradient-canvas-rectangle-height !default;
+/// The height the large ColorGradient canvas hsv rectangle.
+/// @group color-gradient
+$kendo-color-gradient-lg-canvas-rectangle-height: 268px !default;
+
+/// The spacing between the items of the small ColorGradient canvas.
+/// @group color-gradient
+$kendo-color-gradient-sm-canvas-gap: k-spacing(3) !default;
+/// The spacing between the items of the medium ColorGradient canvas.
+/// @group color-gradient
+$kendo-color-gradient-md-canvas-gap: $kendo-color-gradient-canvas-gap !default;
+/// The spacing between the items of the large ColorGradient canvas.
+/// @group color-gradient
+$kendo-color-gradient-lg-canvas-gap: k-spacing(4.5) !default;
 
 /// The width of the ColorGradient slider.
 /// @group color-gradient
@@ -80,6 +119,15 @@ $kendo-color-gradient-slider-horizontal-size: 100% !default;
 /// The background image of the ColorGradient alpha slider.
 /// @group color-gradient
 $kendo-color-gradient-slider-alpha-bgr: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC" !default;
+/// The height of the small ColorGradient vertical slider.
+/// @group color-gradient
+$kendo-color-gradient-sm-slider-vertical-size: 186px !default;
+/// The height of the medium ColorGradient vertical slider.
+/// @group color-gradient
+$kendo-color-gradient-md-slider-vertical-size: $kendo-color-gradient-slider-vertical-size !default;
+/// The height of the large ColorGradient vertical slider.
+/// @group color-gradient
+$kendo-color-gradient-lg-slider-vertical-size: 268px !default;
 
 /// The width of the ColorGradient canvas drag handle.
 /// @group color-gradient
@@ -135,6 +183,16 @@ $kendo-color-gradient-input-label-gap: k-spacing(1) !default;
 /// @group color-gradient
 $kendo-color-gradient-input-label-text: if($kendo-enable-color-system, k-color( subtle ) , $kendo-subtle-text) !default;
 
+/// The width of the small ColorGradient input.
+/// @group color-gradient
+$kendo-color-gradient-sm-input-width: 42px !default;
+/// The width of the medium ColorGradient input.
+/// @group color-gradient
+$kendo-color-gradient-md-input-width: $kendo-color-gradient-input-width !default;
+/// The width of the large ColorGradient input.
+/// @group color-gradient
+$kendo-color-gradient-lg-input-width: 62.5px !default;
+
 /// The font weight of the ColorGradient contrast ratio text.
 /// @group color-gradient
 $kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-bold, normal ) !default;
@@ -142,10 +200,45 @@ $kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-bold,
 /// @group color-gradient
 $kendo-color-gradient-contrast-spacer: calc( #{$kendo-color-gradient-spacer} / 2 ) !default;
 
+/// The size map of the ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sizes: (
+    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
+    )
+) !default;
+
 
 @forward "@progress/kendo-theme-default/scss/colorgradient/_variables.scss" with (
     $kendo-color-gradient-spacer: $kendo-color-gradient-spacer,
     $kendo-color-gradient-width: $kendo-color-gradient-width,
+    $kendo-color-gradient-sm-width: $kendo-color-gradient-sm-width,
+    $kendo-color-gradient-md-width: $kendo-color-gradient-md-width,
+    $kendo-color-gradient-lg-width: $kendo-color-gradient-lg-width,
+    $kendo-color-gradient-sm-gap: $kendo-color-gradient-sm-gap,
+    $kendo-color-gradient-md-gap: $kendo-color-gradient-md-gap,
+    $kendo-color-gradient-lg-gap: $kendo-color-gradient-lg-gap,
     $kendo-color-gradient-border-width: $kendo-color-gradient-border-width,
     $kendo-color-gradient-border-radius: $kendo-color-gradient-border-radius,
     $kendo-color-gradient-padding-y: $kendo-color-gradient-padding-y,
@@ -162,12 +255,21 @@ $kendo-color-gradient-contrast-spacer: calc( #{$kendo-color-gradient-spacer} / 2
     $kendo-color-gradient-canvas-border-radius: $kendo-color-gradient-canvas-border-radius,
     $kendo-color-gradient-canvas-gap: $kendo-color-gradient-canvas-gap,
     $kendo-color-gradient-canvas-rectangle-height: $kendo-color-gradient-canvas-rectangle-height,
+    $kendo-color-gradient-sm-canvas-rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,
+    $kendo-color-gradient-md-canvas-rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,
+    $kendo-color-gradient-lg-canvas-rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,
+    $kendo-color-gradient-sm-canvas-gap: $kendo-color-gradient-sm-canvas-gap,
+    $kendo-color-gradient-md-canvas-gap: $kendo-color-gradient-md-canvas-gap,
+    $kendo-color-gradient-lg-canvas-gap: $kendo-color-gradient-lg-canvas-gap,
     $kendo-color-gradient-slider-track-size: $kendo-color-gradient-slider-track-size,
     $kendo-color-gradient-slider-border-radius: $kendo-color-gradient-slider-border-radius,
     $kendo-color-gradient-slider-draghandle-border-width: $kendo-color-gradient-slider-draghandle-border-width,
     $kendo-color-gradient-slider-vertical-size: $kendo-color-gradient-slider-vertical-size,
     $kendo-color-gradient-slider-horizontal-size: $kendo-color-gradient-slider-horizontal-size,
     $kendo-color-gradient-slider-alpha-bgr: $kendo-color-gradient-slider-alpha-bgr,
+    $kendo-color-gradient-sm-slider-vertical-size: $kendo-color-gradient-sm-slider-vertical-size,
+    $kendo-color-gradient-md-slider-vertical-size: $kendo-color-gradient-md-slider-vertical-size,
+    $kendo-color-gradient-lg-slider-vertical-size: $kendo-color-gradient-lg-slider-vertical-size,
     $kendo-color-gradient-draghandle-width: $kendo-color-gradient-draghandle-width,
     $kendo-color-gradient-draghandle-height: $kendo-color-gradient-draghandle-height,
     $kendo-color-gradient-draghandle-border-width: $kendo-color-gradient-draghandle-border-width,
@@ -186,6 +288,9 @@ $kendo-color-gradient-contrast-spacer: calc( #{$kendo-color-gradient-spacer} / 2
     $kendo-color-gradient-input-gap: $kendo-color-gradient-input-gap,
     $kendo-color-gradient-input-label-gap: $kendo-color-gradient-input-label-gap,
     $kendo-color-gradient-input-label-text: $kendo-color-gradient-input-label-text,
+    $kendo-color-gradient-sm-input-width: $kendo-color-gradient-sm-input-width,
+    $kendo-color-gradient-md-input-width: $kendo-color-gradient-md-input-width,
+    $kendo-color-gradient-lg-input-width: $kendo-color-gradient-lg-input-width,
     $kendo-color-gradient-contrast-ratio-font-weight: $kendo-color-gradient-contrast-ratio-font-weight,
     $kendo-color-gradient-contrast-spacer: $kendo-color-gradient-contrast-spacer
 );
diff --git a/packages/bootstrap/scss/colorpalette/_variables.scss b/packages/bootstrap/scss/colorpalette/_variables.scss
index 5bbe6de49e1..60f928b7e19 100644
--- a/packages/bootstrap/scss/colorpalette/_variables.scss
+++ b/packages/bootstrap/scss/colorpalette/_variables.scss
@@ -18,6 +18,24 @@ $kendo-color-palette-tile-width: k-spacing(6) !default;
 /// The height of the ColorPalette tile.
 /// @group color-palette
 $kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
+// The width of the small ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-sm-width: k-spacing(5.5) !default;
+/// The height of the small ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-sm-height: $kendo-color-palette-tile-sm-width !default;
+/// The width of the medium ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-md-width: $kendo-color-palette-tile-width !default;
+/// The height of the medium ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-md-height: $kendo-color-palette-tile-height !default;
+/// The width of the large ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-lg-width: k-spacing(8) !default;
+/// The height of the large ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-lg-height: $kendo-color-palette-tile-lg-width !default;
 /// The shadow of the ColorPalette focused tile.
 /// @group color-palette
 $kendo-color-palette-tile-focus-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 ) !default;
@@ -28,6 +46,22 @@ $kendo-color-palette-tile-hover-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0
 /// @group color-palette
 $kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;
 
+/// The size map of the ColorPalette.
+/// @group color-palette
+$kendo-color-palette-sizes: (
+    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
+    )
+) !default;
 
 @forward "@progress/kendo-theme-default/scss/colorpalette/_variables.scss" with (
     $kendo-color-palette-font-family: $kendo-color-palette-font-family,
@@ -35,6 +69,12 @@ $kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inse
     $kendo-color-palette-line-height: $kendo-color-palette-line-height,
     $kendo-color-palette-tile-width: $kendo-color-palette-tile-width,
     $kendo-color-palette-tile-height: $kendo-color-palette-tile-height,
+    $kendo-color-palette-tile-sm-width: $kendo-color-palette-tile-sm-width,
+    $kendo-color-palette-tile-sm-height: $kendo-color-palette-tile-sm-height,
+    $kendo-color-palette-tile-md-width: $kendo-color-palette-tile-md-width,
+    $kendo-color-palette-tile-md-height: $kendo-color-palette-tile-md-height,
+    $kendo-color-palette-tile-lg-width: $kendo-color-palette-tile-lg-width,
+    $kendo-color-palette-tile-lg-height: $kendo-color-palette-tile-lg-height,
     $kendo-color-palette-tile-focus-shadow: $kendo-color-palette-tile-focus-shadow,
     $kendo-color-palette-tile-hover-shadow: $kendo-color-palette-tile-hover-shadow,
     $kendo-color-palette-tile-selected-shadow: $kendo-color-palette-tile-selected-shadow
diff --git a/packages/classic/scss/coloreditor/_variables.scss b/packages/classic/scss/coloreditor/_variables.scss
index e5d491b9575..253b18a2123 100644
--- a/packages/classic/scss/coloreditor/_variables.scss
+++ b/packages/classic/scss/coloreditor/_variables.scss
@@ -9,6 +9,15 @@ $kendo-color-editor-spacer: k-spacing(3) !default;
 /// The minimum width of the ColorEditor.
 /// @group color-editor
 $kendo-color-editor-min-width: 272px !default;
+/// The minimum width of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-sm-min-width: 252px !default;
+/// The minimum width of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-md-min-width: $kendo-color-editor-min-width !default;
+/// The minimum width of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-lg-min-width: 362px !default;
 /// The width of the border around the ColorEditor.
 /// @group color-editor
 $kendo-color-editor-border-width: 1px !default;
@@ -49,7 +58,25 @@ $kendo-color-editor-header-padding-y: $kendo-color-editor-spacer !default;
 $kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-y !default;
 /// The spacing between the ColorEditor header actions.
 /// @group color-editor
-$kendo-color-editor-header-actions-gap: calc( #{$kendo-color-editor-spacer} / 1.5 ) !default;
+$kendo-color-editor-header-actions-gap: k-spacing(2) !default;
+/// The vertical padding of the small ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-sm-header-padding-y: $kendo-color-editor-header-padding-y !default;
+/// The horizontal padding of the small ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-sm-header-padding-x: $kendo-color-editor-header-padding-x !default;
+/// The vertical padding of the medium ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-md-header-padding-y: $kendo-color-editor-header-padding-y !default;
+/// The horizontal padding of the medium ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-md-header-padding-x: $kendo-color-editor-header-padding-x !default;
+/// The vertical padding of the large ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-lg-header-padding-y: k-spacing(4.5) !default;
+/// The horizontal padding of the large ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-lg-header-padding-x: k-spacing(4.5) !default;
 
 /// The width of the ColorEditor preview.
 /// @group color-editor
@@ -60,6 +87,34 @@ $kendo-color-editor-color-preview-height: 12px !default;
 /// The spacing between the colors in the ColorEditor preview.
 /// @group color-editor
 $kendo-color-editor-preview-gap: k-spacing(1) !default;
+/// The spacing between the colors in the small ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-sm-preview-gap: k-spacing(0.5) !default;
+/// The spacing between the colors in the medium ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-md-preview-gap: $kendo-color-editor-preview-gap !default;
+/// The spacing between the colors in the large ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-lg-preview-gap: k-spacing(1) !default;
+
+/// The width of the small ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-sm-width: 34px !default;
+/// The height of the small ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-sm-height: 12px !default;
+/// The width of the medium ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-md-width: $kendo-color-editor-color-preview-width !default;
+/// The height of the medium ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-md-height: $kendo-color-editor-color-preview-height !default;
+/// The width of the large ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-lg-width: 44px !default;
+/// The height of the large ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-lg-height: 16px !default;
 
 /// The vertical padding of the ColorEditor views container.
 /// @group color-editor
@@ -70,6 +125,33 @@ $kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-y !defaul
 /// The spacing of the ColorEditor views container.
 /// @group color-editor
 $kendo-color-editor-views-gap: $kendo-color-editor-spacer !default;
+/// The vertical padding of the small ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-sm-views-padding-y: $kendo-color-editor-spacer !default;
+/// The horizontal padding of the small ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-sm-views-padding-x: $kendo-color-editor-views-padding-y !default;
+/// The spacing of the small ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-sm-views-gap: $kendo-color-editor-spacer !default;
+/// The vertical padding of the medium ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-md-views-padding-y: $kendo-color-editor-views-padding-y !default;
+/// The horizontal padding of the medium ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-md-views-padding-x: $kendo-color-editor-views-padding-x !default;
+/// The spacing of the medium ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-md-views-gap: $kendo-color-editor-views-gap !default;
+/// The vertical padding of the large ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-lg-views-padding-y: k-spacing(4.5) !default;
+/// The horizontal padding of the large ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-lg-views-padding-x: k-spacing(4.5) !default;
+/// The spacing of the large ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-lg-views-gap: k-spacing(4.5) !default;
 
 /// The outline color of the focused ColorGradient.
 /// @group color-editor
@@ -81,10 +163,48 @@ $kendo-color-editor-color-gradient-focus-outline: 2px !default;
 /// @group color-editor
 $kendo-color-editor-color-gradient-focus-outline-offset: 4px !default;
 
+/// The size map of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-sizes: (
+    sm: (
+        min-width: $kendo-color-editor-sm-min-width,
+        width: $kendo-color-editor-color-preview-sm-width,
+        height: $kendo-color-editor-color-preview-sm-height,
+        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
+
+    ),
+    md: (
+        min-width: $kendo-color-editor-md-min-width,
+        width: $kendo-color-editor-color-preview-md-width,
+        height: $kendo-color-editor-color-preview-md-height,
+        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
+    ),
+    lg: (
+        min-width: $kendo-color-editor-lg-min-width,
+        width: $kendo-color-editor-color-preview-lg-width,
+        height: $kendo-color-editor-color-preview-lg-height,
+        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
+    )
+) !default;
 
 @forward "@progress/kendo-theme-default/scss/coloreditor/_variables.scss" with (
     $kendo-color-editor-spacer: $kendo-color-editor-spacer,
     $kendo-color-editor-min-width: $kendo-color-editor-min-width,
+    $kendo-color-editor-sm-min-width: $kendo-color-editor-sm-min-width,
+    $kendo-color-editor-md-min-width: $kendo-color-editor-md-min-width,
+    $kendo-color-editor-lg-min-width: $kendo-color-editor-lg-min-width,
     $kendo-color-editor-border-width: $kendo-color-editor-border-width,
     $kendo-color-editor-border-radius: $kendo-color-editor-border-radius,
     $kendo-color-editor-font-family: $kendo-color-editor-font-family,
@@ -97,13 +217,37 @@ $kendo-color-editor-color-gradient-focus-outline-offset: 4px !default;
     $kendo-color-editor-focus-shadow: $kendo-color-editor-focus-shadow,
     $kendo-color-editor-header-padding-y: $kendo-color-editor-header-padding-y,
     $kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-x,
+    $kendo-color-editor-sm-header-padding-y: $kendo-color-editor-sm-header-padding-y,
+    $kendo-color-editor-sm-header-padding-x: $kendo-color-editor-sm-header-padding-x,
+    $kendo-color-editor-md-header-padding-y: $kendo-color-editor-md-header-padding-y,
+    $kendo-color-editor-md-header-padding-x: $kendo-color-editor-md-header-padding-x,
+    $kendo-color-editor-lg-header-padding-y: $kendo-color-editor-lg-header-padding-y,
+    $kendo-color-editor-lg-header-padding-x: $kendo-color-editor-lg-header-padding-x,
     $kendo-color-editor-header-actions-gap: $kendo-color-editor-header-actions-gap,
     $kendo-color-editor-color-preview-width: $kendo-color-editor-color-preview-width,
     $kendo-color-editor-color-preview-height: $kendo-color-editor-color-preview-height,
     $kendo-color-editor-preview-gap: $kendo-color-editor-preview-gap,
+    $kendo-color-editor-sm-preview-gap: $kendo-color-editor-sm-preview-gap,
+    $kendo-color-editor-md-preview-gap: $kendo-color-editor-md-preview-gap,
+    $kendo-color-editor-lg-preview-gap: $kendo-color-editor-lg-preview-gap,
+    $kendo-color-editor-color-preview-sm-width: $kendo-color-editor-color-preview-sm-width,
+    $kendo-color-editor-color-preview-sm-height: $kendo-color-editor-color-preview-sm-height,
+    $kendo-color-editor-color-preview-md-width: $kendo-color-editor-color-preview-md-width,
+    $kendo-color-editor-color-preview-md-height: $kendo-color-editor-color-preview-md-height,
+    $kendo-color-editor-color-preview-lg-width: $kendo-color-editor-color-preview-lg-width,
+    $kendo-color-editor-color-preview-lg-height: $kendo-color-editor-color-preview-lg-height,
     $kendo-color-editor-views-padding-y: $kendo-color-editor-views-padding-y,
     $kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-x,
     $kendo-color-editor-views-gap: $kendo-color-editor-views-gap,
+    $kendo-color-editor-sm-views-padding-y: $kendo-color-editor-sm-views-padding-y,
+    $kendo-color-editor-sm-views-padding-x: $kendo-color-editor-sm-views-padding-x,
+    $kendo-color-editor-sm-views-gap: $kendo-color-editor-sm-views-gap,
+    $kendo-color-editor-md-views-padding-y: $kendo-color-editor-md-views-padding-y,
+    $kendo-color-editor-md-views-padding-x: $kendo-color-editor-md-views-padding-x,
+    $kendo-color-editor-md-views-gap: $kendo-color-editor-md-views-gap,
+    $kendo-color-editor-lg-views-padding-y: $kendo-color-editor-lg-views-padding-y,
+    $kendo-color-editor-lg-views-padding-x: $kendo-color-editor-lg-views-padding-x,
+    $kendo-color-editor-lg-views-gap: $kendo-color-editor-lg-views-gap,
     $kendo-color-editor-color-gradient-focus-outline-color: $kendo-color-editor-color-gradient-focus-outline-color,
     $kendo-color-editor-color-gradient-focus-outline: $kendo-color-editor-color-gradient-focus-outline,
     $kendo-color-editor-color-gradient-focus-outline-offset: $kendo-color-editor-color-gradient-focus-outline-offset
diff --git a/packages/classic/scss/colorgradient/_variables.scss b/packages/classic/scss/colorgradient/_variables.scss
index da4d9684a8f..b26e13e4c49 100644
--- a/packages/classic/scss/colorgradient/_variables.scss
+++ b/packages/classic/scss/colorgradient/_variables.scss
@@ -44,6 +44,26 @@ $kendo-color-gradient-bg: $kendo-component-bg !default;
 /// @group color-gradient
 $kendo-color-gradient-border: $kendo-component-border !default;
 
+/// The width of the small ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sm-width: 226px !default;
+/// The width of the medium ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-md-width: $kendo-color-gradient-width !default;
+/// The width of the large ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-lg-width: 324px !default;
+
+/// The spacing between the sections of the small ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sm-gap: $kendo-color-gradient-gap !default;
+/// The spacing between the sections of the medium ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-md-gap: $kendo-color-gradient-gap !default;
+/// The spacing between the sections of the large ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-lg-gap: k-spacing(4.5) !default;
+
 /// The border color of the focused ColorGradient.
 /// @group color-gradient
 $kendo-color-gradient-focus-border: null !default;
@@ -60,6 +80,25 @@ $kendo-color-gradient-canvas-gap: $kendo-color-gradient-spacer !default;
 /// The height the ColorGradient canvas hsv rectangle.
 /// @group color-gradient
 $kendo-color-gradient-canvas-rectangle-height: 180px !default;
+/// The height the small ColorGradient canvas hsv rectangle.
+/// @group color-gradient
+$kendo-color-gradient-sm-canvas-rectangle-height: 182px !default;
+/// The height the medium ColorGradient canvas hsv rectangle.
+/// @group color-gradient
+$kendo-color-gradient-md-canvas-rectangle-height: $kendo-color-gradient-canvas-rectangle-height !default;
+/// The height the large ColorGradient canvas hsv rectangle.
+/// @group color-gradient
+$kendo-color-gradient-lg-canvas-rectangle-height: 268px !default;
+
+/// The spacing between the items of the small ColorGradient canvas.
+/// @group color-gradient
+$kendo-color-gradient-sm-canvas-gap: $kendo-color-gradient-canvas-gap !default;
+/// The spacing between the items of the medium ColorGradient canvas.
+/// @group color-gradient
+$kendo-color-gradient-md-canvas-gap: $kendo-color-gradient-canvas-gap !default;
+/// The spacing between the items of the large ColorGradient canvas.
+/// @group color-gradient
+$kendo-color-gradient-lg-canvas-gap: k-spacing(4.5) !default;
 
 /// The width of the ColorGradient slider.
 /// @group color-gradient
@@ -81,6 +120,16 @@ $kendo-color-gradient-slider-horizontal-size: 100% !default;
 /// @group color-gradient
 $kendo-color-gradient-slider-alpha-bgr: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC" !default;
 
+/// The height of the small ColorGradient vertical slider.
+/// @group color-gradient
+$kendo-color-gradient-sm-slider-vertical-size: 182px !default;
+/// The height of the medium ColorGradient vertical slider.
+/// @group color-gradient
+$kendo-color-gradient-md-slider-vertical-size: $kendo-color-gradient-slider-vertical-size !default;
+/// The height of the large ColorGradient vertical slider.
+/// @group color-gradient
+$kendo-color-gradient-lg-slider-vertical-size: 268px !default;
+
 /// The width of the ColorGradient canvas drag handle.
 /// @group color-gradient
 $kendo-color-gradient-draghandle-width: 14px !default;
@@ -127,7 +176,7 @@ $kendo-color-gradient-canvas-draghandle-margin-x: - math.div( $kendo-color-gradi
 $kendo-color-gradient-input-width: 46px !default;
 /// The spacing between the ColorGradient inputs.
 /// @group color-gradient
-$kendo-color-gradient-input-gap: calc( #{$kendo-color-gradient-spacer} / 1.5 ) !default;
+$kendo-color-gradient-input-gap: k-spacing(2) !default;
 /// The spacing between the ColorGradient inputs and their labels.
 /// @group color-gradient
 $kendo-color-gradient-input-label-gap: calc( #{$kendo-color-gradient-spacer} / 3 ) !default;
@@ -135,6 +184,16 @@ $kendo-color-gradient-input-label-gap: calc( #{$kendo-color-gradient-spacer} / 3
 /// @group color-gradient
 $kendo-color-gradient-input-label-text: $kendo-subtle-text !default;
 
+/// The width of the small ColorGradient input.
+/// @group color-gradient
+$kendo-color-gradient-sm-input-width: 42px !default;
+/// The width of the medium ColorGradient input.
+/// @group color-gradient
+$kendo-color-gradient-md-input-width: $kendo-color-gradient-input-width !default;
+/// The width of the large ColorGradient input.
+/// @group color-gradient
+$kendo-color-gradient-lg-input-width: 62.5px !default;
+
 /// The font weight of the ColorGradient contrast ratio text.
 /// @group color-gradient
 $kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-bold, normal ) !default;
@@ -142,10 +201,44 @@ $kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-bold,
 /// @group color-gradient
 $kendo-color-gradient-contrast-spacer: calc( #{$kendo-color-gradient-spacer} / 1.5 ) !default;
 
+/// The size map of the ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sizes: (
+    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
+    )
+) !default;
 
 @forward "@progress/kendo-theme-default/scss/colorgradient/_variables.scss" with (
     $kendo-color-gradient-spacer: $kendo-color-gradient-spacer,
     $kendo-color-gradient-width: $kendo-color-gradient-width,
+    $kendo-color-gradient-sm-width: $kendo-color-gradient-sm-width,
+    $kendo-color-gradient-md-width: $kendo-color-gradient-md-width,
+    $kendo-color-gradient-lg-width: $kendo-color-gradient-lg-width,
+    $kendo-color-gradient-sm-gap: $kendo-color-gradient-sm-gap,
+    $kendo-color-gradient-md-gap: $kendo-color-gradient-md-gap,
+    $kendo-color-gradient-lg-gap: $kendo-color-gradient-lg-gap,
     $kendo-color-gradient-border-width: $kendo-color-gradient-border-width,
     $kendo-color-gradient-border-radius: $kendo-color-gradient-border-radius,
     $kendo-color-gradient-padding-y: $kendo-color-gradient-padding-y,
@@ -162,12 +255,21 @@ $kendo-color-gradient-contrast-spacer: calc( #{$kendo-color-gradient-spacer} / 1
     $kendo-color-gradient-canvas-border-radius: $kendo-color-gradient-canvas-border-radius,
     $kendo-color-gradient-canvas-gap: $kendo-color-gradient-canvas-gap,
     $kendo-color-gradient-canvas-rectangle-height: $kendo-color-gradient-canvas-rectangle-height,
+    $kendo-color-gradient-sm-canvas-rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,
+    $kendo-color-gradient-md-canvas-rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,
+    $kendo-color-gradient-lg-canvas-rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,
+    $kendo-color-gradient-sm-canvas-gap: $kendo-color-gradient-sm-canvas-gap,
+    $kendo-color-gradient-md-canvas-gap: $kendo-color-gradient-md-canvas-gap,
+    $kendo-color-gradient-lg-canvas-gap: $kendo-color-gradient-lg-canvas-gap,
     $kendo-color-gradient-slider-track-size: $kendo-color-gradient-slider-track-size,
     $kendo-color-gradient-slider-border-radius: $kendo-color-gradient-slider-border-radius,
     $kendo-color-gradient-slider-draghandle-border-width: $kendo-color-gradient-slider-draghandle-border-width,
     $kendo-color-gradient-slider-vertical-size: $kendo-color-gradient-slider-vertical-size,
     $kendo-color-gradient-slider-horizontal-size: $kendo-color-gradient-slider-horizontal-size,
     $kendo-color-gradient-slider-alpha-bgr: $kendo-color-gradient-slider-alpha-bgr,
+    $kendo-color-gradient-sm-slider-vertical-size: $kendo-color-gradient-sm-slider-vertical-size,
+    $kendo-color-gradient-md-slider-vertical-size: $kendo-color-gradient-md-slider-vertical-size,
+    $kendo-color-gradient-lg-slider-vertical-size: $kendo-color-gradient-lg-slider-vertical-size,
     $kendo-color-gradient-draghandle-width: $kendo-color-gradient-draghandle-width,
     $kendo-color-gradient-draghandle-height: $kendo-color-gradient-draghandle-height,
     $kendo-color-gradient-draghandle-border-width: $kendo-color-gradient-draghandle-border-width,
@@ -185,6 +287,9 @@ $kendo-color-gradient-contrast-spacer: calc( #{$kendo-color-gradient-spacer} / 1
     $kendo-color-gradient-input-gap: $kendo-color-gradient-input-gap,
     $kendo-color-gradient-input-label-gap: $kendo-color-gradient-input-label-gap,
     $kendo-color-gradient-input-label-text: $kendo-color-gradient-input-label-text,
+    $kendo-color-gradient-sm-input-width: $kendo-color-gradient-sm-input-width,
+    $kendo-color-gradient-md-input-width: $kendo-color-gradient-md-input-width,
+    $kendo-color-gradient-lg-input-width: $kendo-color-gradient-lg-input-width,
     $kendo-color-gradient-contrast-ratio-font-weight: $kendo-color-gradient-contrast-ratio-font-weight,
     $kendo-color-gradient-contrast-spacer: $kendo-color-gradient-contrast-spacer
 );
diff --git a/packages/classic/scss/colorpalette/_variables.scss b/packages/classic/scss/colorpalette/_variables.scss
index bd9fca19c44..8ab1682237a 100644
--- a/packages/classic/scss/colorpalette/_variables.scss
+++ b/packages/classic/scss/colorpalette/_variables.scss
@@ -18,6 +18,24 @@ $kendo-color-palette-tile-width: k-spacing(6) !default;
 /// The height of the ColorPalette tile.
 /// @group color-palette
 $kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
+/// The width of the small ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-sm-width: k-spacing(5.5) !default;
+/// The height of the small ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-sm-height: $kendo-color-palette-tile-sm-width !default;
+/// The width of the medium ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-md-width: $kendo-color-palette-tile-width !default;
+/// The height of the medium ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-md-height: $kendo-color-palette-tile-height !default;
+/// The width of the large ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-lg-width: k-spacing(8) !default;
+/// The height of the large ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-lg-height: $kendo-color-palette-tile-lg-width !default;
 /// The shadow of the ColorPalette focused tile.
 /// @group color-palette
 $kendo-color-palette-tile-focus-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 ) !default;
@@ -28,6 +46,22 @@ $kendo-color-palette-tile-hover-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0
 /// @group color-palette
 $kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;
 
+/// The size map of the ColorPalette.
+/// @group color-palette
+$kendo-color-palette-sizes: (
+    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
+    )
+) !default;
 
 @forward "@progress/kendo-theme-default/scss/colorpalette/_variables.scss" with (
     $kendo-color-palette-font-family: $kendo-color-palette-font-family,
@@ -35,6 +69,12 @@ $kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inse
     $kendo-color-palette-line-height: $kendo-color-palette-line-height,
     $kendo-color-palette-tile-width: $kendo-color-palette-tile-width,
     $kendo-color-palette-tile-height: $kendo-color-palette-tile-height,
+    $kendo-color-palette-tile-sm-width: $kendo-color-palette-tile-sm-width,
+    $kendo-color-palette-tile-sm-height: $kendo-color-palette-tile-sm-height,
+    $kendo-color-palette-tile-md-width: $kendo-color-palette-tile-md-width,
+    $kendo-color-palette-tile-md-height: $kendo-color-palette-tile-md-height,
+    $kendo-color-palette-tile-lg-width: $kendo-color-palette-tile-lg-width,
+    $kendo-color-palette-tile-lg-height: $kendo-color-palette-tile-lg-height,
     $kendo-color-palette-tile-focus-shadow: $kendo-color-palette-tile-focus-shadow,
     $kendo-color-palette-tile-hover-shadow: $kendo-color-palette-tile-hover-shadow,
     $kendo-color-palette-tile-selected-shadow: $kendo-color-palette-tile-selected-shadow
diff --git a/packages/default/scss/action-sheet/_layout.scss b/packages/default/scss/action-sheet/_layout.scss
index 5274c3bbac4..211466ed190 100644
--- a/packages/default/scss/action-sheet/_layout.scss
+++ b/packages/default/scss/action-sheet/_layout.scss
@@ -338,6 +338,33 @@
             display: flex;
             flex-flow: column nowrap;
         }
+
+        .k-coloreditor {
+            min-width: 100%;
+            height: 100%;
+            border: 0;
+            overflow: auto;
+            scrollbar-width: none;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            .k-coloreditor-header {
+                padding: 0;
+            }
+
+            .k-coloreditor-views {
+                padding-inline: 0;
+            }
+        }
+
+        .k-colorgradient-canvas {
+            .k-hsv-gradient {
+                aspect-ratio: 1;
+                height: 100%;
+            }
+        }
     }
 
 
diff --git a/packages/default/scss/coloreditor/_layout.scss b/packages/default/scss/coloreditor/_layout.scss
index a3162ff33d5..afe24c2b699 100644
--- a/packages/default/scss/coloreditor/_layout.scss
+++ b/packages/default/scss/coloreditor/_layout.scss
@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./variables.scss" as *;
 @use "../colorpalette/_variables.scss" as *;
@@ -7,7 +8,6 @@
     // ColorEditor/FlatColorPicker
     .k-coloreditor {
         @include border-radius( $kendo-color-editor-border-radius );
-        min-width: $kendo-color-editor-min-width;
         border-width: $kendo-color-editor-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -40,13 +40,44 @@
         flex-flow: column nowrap;
         align-items: stretch;
         justify-content: center;
-        gap: $kendo-color-editor-preview-gap;
         position: relative;
         z-index: 1;
     }
-    .k-coloreditor-preview .k-color-preview {
-        width: $kendo-color-editor-color-preview-width;
-        height: $kendo-color-editor-color-preview-height;
+
+    // ColorPreview sizes
+    @each $size, $size-props in $kendo-color-editor-sizes {
+        $_min-width: map.get( $size-props, min-width );
+        $_width: map.get( $size-props, width );
+        $_height: map.get( $size-props, height );
+        $_header-padding-x: map.get( $size-props, header-padding-x );
+        $_header-padding-y: map.get( $size-props, header-padding-y );
+        $_views-padding-x: map.get( $size-props, views-padding-x );
+        $_views-padding-y: map.get( $size-props, views-padding-y );
+        $_preview-gap: map.get( $size-props, preview-gap );
+
+        .k-coloreditor-#{$size} {
+            min-width: $_min-width;
+
+            .k-coloreditor-preview {
+                gap: $_preview-gap;
+            }
+        }
+
+        .k-coloreditor-preview .k-color-preview-#{$size} {
+            width: $_width;
+            height: $_height;
+        }
+
+        .k-coloreditor-#{$size} {
+            .k-coloreditor-header {
+                padding: $_header-padding-y $_header-padding-x 0;
+            }
+
+            .k-coloreditor-views {
+                padding-block: $_views-padding-y;
+                padding-inline: $_views-padding-x;
+            }
+        }
     }
 
     // Views
@@ -71,10 +102,18 @@
         .k-colorpalette {
             align-self: center;
         }
+    }
+
+    // ColorPalette sizes
+    @each $size, $size-props in $kendo-color-palette-sizes {
+        $_tile-width: map.get( $size-props, width );
+        $_tile-height: map.get( $size-props, height );
 
-        .k-colorpalette-tile {
-            width: var(--kendo-color-preview-width, $kendo-color-palette-tile-width);
-            height: var(--kendo-color-preview-height, $kendo-color-palette-tile-height);
+        .k-coloreditor-#{$size} {
+            .k-colorpalette-tile {
+                width: $_tile-width;
+                height: $_tile-height;
+            }
         }
     }
 
@@ -82,7 +121,6 @@
     .k-coloreditor-footer.k-actions {
         margin: 0;
     }
-
 }
 
 
diff --git a/packages/default/scss/coloreditor/_variables.scss b/packages/default/scss/coloreditor/_variables.scss
index 32541721c8f..800946e59bf 100644
--- a/packages/default/scss/coloreditor/_variables.scss
+++ b/packages/default/scss/coloreditor/_variables.scss
@@ -9,6 +9,15 @@ $kendo-color-editor-spacer: k-spacing(3) !default;
 /// The minimum width of the ColorEditor.
 /// @group color-editor
 $kendo-color-editor-min-width: 272px !default;
+/// The minimum width of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-sm-min-width: 252px !default;
+/// The minimum width of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-md-min-width: $kendo-color-editor-min-width !default;
+/// The minimum width of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-lg-min-width: 362px !default;
 /// The width of the border around the ColorEditor.
 /// @group color-editor
 $kendo-color-editor-border-width: 1px !default;
@@ -50,7 +59,25 @@ $kendo-color-editor-header-padding-y: $kendo-color-editor-spacer !default;
 $kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-y !default;
 /// The spacing between the ColorEditor header actions.
 /// @group color-editor
-$kendo-color-editor-header-actions-gap: calc( #{$kendo-color-editor-spacer} / 1.5 ) !default;
+$kendo-color-editor-header-actions-gap: k-spacing(2) !default;
+/// The vertical padding of the small ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-sm-header-padding-y: $kendo-color-editor-header-padding-y !default;
+/// The horizontal padding of the small ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-sm-header-padding-x: $kendo-color-editor-header-padding-x !default;
+/// The vertical padding of the medium ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-md-header-padding-y: $kendo-color-editor-header-padding-y !default;
+/// The horizontal padding of the medium ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-md-header-padding-x: $kendo-color-editor-header-padding-x !default;
+/// The vertical padding of the large ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-lg-header-padding-y: k-spacing(4.5) !default;
+/// The horizontal padding of the large ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-lg-header-padding-x: k-spacing(4.5) !default;
 
 /// The width of the ColorEditor preview.
 /// @group color-editor
@@ -61,6 +88,34 @@ $kendo-color-editor-color-preview-height: 12px !default;
 /// The spacing between the colors in the ColorEditor preview.
 /// @group color-editor
 $kendo-color-editor-preview-gap: k-spacing(1) !default;
+/// The spacing between the colors in the small ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-sm-preview-gap: k-spacing(0.5) !default;
+/// The spacing between the colors in the medium ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-md-preview-gap: $kendo-color-editor-preview-gap !default;
+/// The spacing between the colors in the large ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-lg-preview-gap: k-spacing(1) !default;
+
+/// The width of the small ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-sm-width: 34px !default;
+/// The height of the small ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-sm-height: 12px !default;
+/// The width of the medium ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-md-width: $kendo-color-editor-color-preview-width !default;
+/// The height of the medium ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-md-height: $kendo-color-editor-color-preview-height !default;
+/// The width of the large ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-lg-width: 44px !default;
+/// The height of the large ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-lg-height: 16px !default;
 
 /// The vertical padding of the ColorEditor views container.
 /// @group color-editor
@@ -71,6 +126,33 @@ $kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-y !defaul
 /// The spacing of the ColorEditor views container.
 /// @group color-editor
 $kendo-color-editor-views-gap: $kendo-color-editor-spacer !default;
+/// The vertical padding of the small ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-sm-views-padding-y: $kendo-color-editor-spacer !default;
+/// The horizontal padding of the small ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-sm-views-padding-x: $kendo-color-editor-views-padding-y !default;
+/// The spacing of the small ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-sm-views-gap: $kendo-color-editor-spacer !default;
+/// The vertical padding of the medium ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-md-views-padding-y: $kendo-color-editor-views-padding-y !default;
+/// The horizontal padding of the medium ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-md-views-padding-x: $kendo-color-editor-views-padding-x !default;
+/// The spacing of the medium ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-md-views-gap: $kendo-color-editor-views-gap !default;
+/// The vertical padding of the large ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-lg-views-padding-y: k-spacing(4.5) !default;
+/// The horizontal padding of the large ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-lg-views-padding-x: k-spacing(4.5) !default;
+/// The spacing of the large ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-lg-views-gap: k-spacing(4.5) !default;
 
 /// The outline color of the focused ColorGradient.
 /// @group color-editor
@@ -81,3 +163,39 @@ $kendo-color-editor-color-gradient-focus-outline: 2px !default;
 /// The outline offset of the focused ColorGradient.
 /// @group color-editor
 $kendo-color-editor-color-gradient-focus-outline-offset: 4px !default;
+
+/// The size map of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-sizes: (
+    sm: (
+        min-width: $kendo-color-editor-sm-min-width,
+        width: $kendo-color-editor-color-preview-sm-width,
+        height: $kendo-color-editor-color-preview-sm-height,
+        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
+
+    ),
+    md: (
+        min-width: $kendo-color-editor-md-min-width,
+        width: $kendo-color-editor-color-preview-md-width,
+        height: $kendo-color-editor-color-preview-md-height,
+        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
+    ),
+    lg: (
+        min-width: $kendo-color-editor-lg-min-width,
+        width: $kendo-color-editor-color-preview-lg-width,
+        height: $kendo-color-editor-color-preview-lg-height,
+        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
+    )
+) !default;
diff --git a/packages/default/scss/colorgradient/_layout.scss b/packages/default/scss/colorgradient/_layout.scss
index df049736035..7a136bf2256 100644
--- a/packages/default/scss/colorgradient/_layout.scss
+++ b/packages/default/scss/colorgradient/_layout.scss
@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "sass:math";
 @use "../core/_index.scss" as *;
 @use "./variables.scss" as *;
@@ -7,7 +8,6 @@
     // ColorGradient
     .k-colorgradient {
         @include border-radius( $kendo-color-gradient-border-radius );
-        width: $kendo-color-gradient-width;
         padding-block: $kendo-color-gradient-padding-y;
         padding-inline: $kendo-color-gradient-padding-x;
         border-style: solid;
@@ -20,7 +20,6 @@
         display: flex;
         flex-direction: column;
         align-items: stretch;
-        gap: $kendo-color-gradient-gap;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
@@ -44,7 +43,6 @@
 
         .k-hsv-gradient {
             @include border-radius( $kendo-color-gradient-canvas-border-radius );
-            height: $kendo-color-gradient-canvas-rectangle-height;
         }
 
         .k-hsv-draghandle {
@@ -60,7 +58,6 @@
         .k-hsv-controls {
             position: relative;
             flex-shrink: 0;
-            gap: $kendo-color-gradient-canvas-gap;
         }
     }
 
@@ -78,10 +75,8 @@
 
     // Sliders
     .k-colorgradient-slider {
-
         &.k-slider-vertical {
             width: $kendo-color-gradient-slider-track-size;
-            height: $kendo-color-gradient-slider-vertical-size;
             flex: 0 0 $kendo-color-gradient-slider-track-size;
         }
         &.k-slider-vertical .k-slider-track {
@@ -124,6 +119,44 @@
         }
     }
 
+    // ColorGradient sizes
+    @each $size, $size-props in $kendo-color-gradient-sizes {
+        $_width: map.get( $size-props, width );
+        $_gap: map.get( $size-props, gap );
+        $_vertical-slider-height: map.get( $size-props, vertical-slider-height );
+        $_rectangle-height: map.get( $size-props, rectangle-height );
+        $_input-width: map.get( $size-props, input-width );
+        $_canvas-gap: map.get( $size-props, canvas-gap );
+
+        .k-colorgradient-#{$size} {
+            width: $_width;
+            gap: $_gap;
+
+            .k-colorgradient-inputs {
+                .k-numerictextbox {
+                    width: $_input-width;
+                }
+            }
+
+            .k-colorgradient-canvas {
+                gap: $_canvas-gap;
+
+                .k-hsv-gradient {
+                    height: $_rectangle-height;
+                }
+
+                .k-slider-vertical {
+                    height: $_vertical-slider-height;
+                }
+
+                .k-hsv-controls {
+                    gap: $_canvas-gap;
+                }
+            }
+        }
+    }
+
+
     // Inputs
     .k-colorgradient-inputs {
         gap: $kendo-color-gradient-input-gap;
@@ -136,10 +169,6 @@
             gap: $kendo-color-gradient-input-label-gap;
         }
 
-        .k-numerictextbox {
-            width: $kendo-color-gradient-input-width;
-        }
-
         .k-input-inner {
             padding-inline-start: 2px;
             padding-inline-end: 2px;
@@ -188,7 +217,6 @@
         overflow: visible;
         pointer-events: none;
     }
-
 }
 
 
diff --git a/packages/default/scss/colorgradient/_variables.scss b/packages/default/scss/colorgradient/_variables.scss
index d55d5285949..92321b96ce5 100644
--- a/packages/default/scss/colorgradient/_variables.scss
+++ b/packages/default/scss/colorgradient/_variables.scss
@@ -44,6 +44,26 @@ $kendo-color-gradient-bg: $kendo-component-bg !default;
 /// @group color-gradient
 $kendo-color-gradient-border: $kendo-component-border !default;
 
+/// The width of the small ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sm-width: 226px !default;
+/// The width of the medium ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-md-width: $kendo-color-gradient-width !default;
+/// The width of the large ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-lg-width: 324px !default;
+
+/// The spacing between the sections of the small ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sm-gap: $kendo-color-gradient-gap !default;
+/// The spacing between the sections of the medium ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-md-gap: $kendo-color-gradient-gap !default;
+/// The spacing between the sections of the large ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-lg-gap: k-spacing(4.5) !default;
+
 /// The border color of the focused ColorGradient.
 /// @group color-gradient
 $kendo-color-gradient-focus-border: null !default;
@@ -60,6 +80,25 @@ $kendo-color-gradient-canvas-gap: $kendo-color-gradient-spacer !default;
 /// The height the ColorGradient canvas hsv rectangle.
 /// @group color-gradient
 $kendo-color-gradient-canvas-rectangle-height: 180px !default;
+/// The height the small ColorGradient canvas hsv rectangle.
+/// @group color-gradient
+$kendo-color-gradient-sm-canvas-rectangle-height: 182px !default;
+/// The height the medium ColorGradient canvas hsv rectangle.
+/// @group color-gradient
+$kendo-color-gradient-md-canvas-rectangle-height: $kendo-color-gradient-canvas-rectangle-height !default;
+/// The height the large ColorGradient canvas hsv rectangle.
+/// @group color-gradient
+$kendo-color-gradient-lg-canvas-rectangle-height: 268px !default;
+
+/// The spacing between the items of the small ColorGradient canvas.
+/// @group color-gradient
+$kendo-color-gradient-sm-canvas-gap: $kendo-color-gradient-canvas-gap !default;
+/// The spacing between the items of the medium ColorGradient canvas.
+/// @group color-gradient
+$kendo-color-gradient-md-canvas-gap: $kendo-color-gradient-canvas-gap !default;
+/// The spacing between the items of the large ColorGradient canvas.
+/// @group color-gradient
+$kendo-color-gradient-lg-canvas-gap: k-spacing(4.5) !default;
 
 /// The width of the ColorGradient slider.
 /// @group color-gradient
@@ -80,6 +119,15 @@ $kendo-color-gradient-slider-horizontal-size: 100% !default;
 /// The background image of the ColorGradient alpha slider.
 /// @group color-gradient
 $kendo-color-gradient-slider-alpha-bgr: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC" !default;
+/// The height of the small ColorGradient vertical slider.
+/// @group color-gradient
+$kendo-color-gradient-sm-slider-vertical-size: 182px !default;
+/// The height of the medium ColorGradient vertical slider.
+/// @group color-gradient
+$kendo-color-gradient-md-slider-vertical-size: $kendo-color-gradient-slider-vertical-size !default;
+/// The height of the large ColorGradient vertical slider.
+/// @group color-gradient
+$kendo-color-gradient-lg-slider-vertical-size: 268px !default;
 
 /// The width of the ColorGradient canvas drag handle.
 /// @group color-gradient
@@ -127,7 +175,7 @@ $kendo-color-gradient-canvas-draghandle-margin-x: - math.div( $kendo-color-gradi
 $kendo-color-gradient-input-width: 46px !default;
 /// The spacing between the ColorGradient inputs.
 /// @group color-gradient
-$kendo-color-gradient-input-gap: calc( #{$kendo-color-gradient-spacer} / 1.5 ) !default;
+$kendo-color-gradient-input-gap: k-spacing(2) !default;
 /// The spacing between the ColorGradient inputs and their labels.
 /// @group color-gradient
 $kendo-color-gradient-input-label-gap: calc( #{$kendo-color-gradient-spacer} / 3 ) !default;
@@ -135,9 +183,48 @@ $kendo-color-gradient-input-label-gap: calc( #{$kendo-color-gradient-spacer} / 3
 /// @group color-gradient
 $kendo-color-gradient-input-label-text: $kendo-subtle-text !default;
 
+/// The width of the small ColorGradient input.
+/// @group color-gradient
+$kendo-color-gradient-sm-input-width: 42px !default;
+/// The width of the medium ColorGradient input.
+/// @group color-gradient
+$kendo-color-gradient-md-input-width: $kendo-color-gradient-input-width !default;
+/// The width of the large ColorGradient input.
+/// @group color-gradient
+$kendo-color-gradient-lg-input-width: 62.5px !default;
+
 /// The font weight of the ColorGradient contrast ratio text.
 /// @group color-gradient
 $kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 /// The spacing between the items in the ColorGradient contrast tool.
 /// @group color-gradient
 $kendo-color-gradient-contrast-spacer: calc( #{$kendo-color-gradient-spacer} / 1.5 ) !default;
+
+/// The size map of the ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sizes: (
+    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
+    )
+) !default;
diff --git a/packages/default/scss/colorpalette/_variables.scss b/packages/default/scss/colorpalette/_variables.scss
index 77ae1460393..2cce2dd477c 100644
--- a/packages/default/scss/colorpalette/_variables.scss
+++ b/packages/default/scss/colorpalette/_variables.scss
@@ -18,6 +18,25 @@ $kendo-color-palette-tile-width: k-spacing(6) !default;
 /// The height of the ColorPalette tile.
 /// @group color-palette
 $kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
+/// The width of the small ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-sm-width: k-spacing(5.5) !default;
+/// The height of the small ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-sm-height: $kendo-color-palette-tile-sm-width !default;
+/// The width of the medium ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-md-width: $kendo-color-palette-tile-width !default;
+/// The height of the medium ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-md-height: $kendo-color-palette-tile-height !default;
+/// The width of the large ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-lg-width: k-spacing(8) !default;
+/// The height of the large ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-lg-height: $kendo-color-palette-tile-lg-width !default;
+
 /// The shadow of the ColorPalette focused tile.
 /// @group color-palette
 $kendo-color-palette-tile-focus-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 ) !default;
@@ -27,3 +46,20 @@ $kendo-color-palette-tile-hover-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0
 /// The shadow of the ColorPalette selected tile.
 /// @group color-palette
 $kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;
+
+/// The size map of the ColorPalette.
+/// @group color-palette
+$kendo-color-palette-sizes: (
+    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
+    )
+) !default;
diff --git a/packages/fluent/scss/action-sheet/_layout.scss b/packages/fluent/scss/action-sheet/_layout.scss
index 73dfcfc461d..f62ddf076df 100644
--- a/packages/fluent/scss/action-sheet/_layout.scss
+++ b/packages/fluent/scss/action-sheet/_layout.scss
@@ -365,6 +365,34 @@
             display: flex;
             flex-flow: column nowrap;
         }
+
+        .k-coloreditor {
+            min-width: 100%;
+            height: 100%;
+            border: 0;
+            overflow: auto;
+            scrollbar-width: none;
+            box-shadow: none;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+
+            .k-coloreditor-header {
+                padding: 0;
+            }
+
+            .k-coloreditor-views {
+                padding-inline: 0;
+            }
+        }
+
+        .k-colorgradient-canvas {
+            .k-hsv-gradient {
+                aspect-ratio: 1;
+                height: 100%;
+            }
+        }
     }
 
     // RTL
diff --git a/packages/fluent/scss/coloreditor/_layout.scss b/packages/fluent/scss/coloreditor/_layout.scss
index 1a3d60f8253..1c7d98c09d9 100644
--- a/packages/fluent/scss/coloreditor/_layout.scss
+++ b/packages/fluent/scss/coloreditor/_layout.scss
@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../core/_index.scss" as *;
 @use "../colorpalette/_variables.scss" as *;
 @use "./_variables.scss" as *;
@@ -6,7 +7,6 @@
 
         .k-coloreditor {
             @include border-radius( var( --kendo-color-editor-border-radius, #{$kendo-color-editor-border-radius} ) );
-            min-width: var( --kendo-color-editor-min-width, #{$kendo-color-editor-min-width} );
             border-width: var( --kendo-color-editor-border-width, #{$kendo-color-editor-border-width} );
             border-style: solid;
             box-sizing: border-box;
@@ -47,13 +47,45 @@
             flex-flow: column nowrap;
             align-items: stretch;
             justify-content: space-between;
-            gap: var( --kendo-color-editor-preview-spacing, #{$kendo-color-editor-preview-spacing} );
             position: relative;
             z-index: 1;
         }
-        .k-coloreditor-preview .k-color-preview {
-            width: var( --kendo-color-editor-color-preview-width, #{$kendo-color-editor-color-preview-width} );
-            height: var( --kendo-color-editor-color-preview-height, #{$kendo-color-editor-color-preview-height} );
+
+        // ColorPreview sizes
+        @each $size, $size-props in $kendo-color-editor-sizes {
+            $_min-width: map.get( $size-props, min-width );
+            $_width: map.get( $size-props, width );
+            $_height: map.get( $size-props, height );
+            $_header-padding-x: map.get( $size-props, header-padding-x );
+            $_header-padding-y: map.get( $size-props, header-padding-y );
+            $_views-padding-x: map.get( $size-props, views-padding-x );
+            $_views-padding-y: map.get( $size-props, views-padding-y );
+            $_preview-spacing: map.get( $size-props, preview-spacing );
+
+            .k-coloreditor-#{$size} {
+                min-width: $_min-width;
+
+                .k-coloreditor-preview {
+                    gap: $_preview-spacing;
+                }
+            }
+
+            .k-coloreditor-preview .k-color-preview-#{$size} {
+                width: $_width;
+                height: $_height;
+            }
+
+            .k-coloreditor-#{$size} {
+                .k-coloreditor-header {
+                    padding: $_header-padding-y $_header-padding-x 0;
+                }
+
+                .k-coloreditor-views {
+                    padding-block-start: calc($_views-padding-y * 2);
+                    padding-block-end: $_views-padding-y;
+                    padding-inline: $_views-padding-x;
+                }
+            }
         }
 
         // Views
@@ -75,9 +107,22 @@
                 align-self: center;
             }
 
-            .k-colorpalette-tile {
+            /* .k-colorpalette-tile {
                 width: var( --kendo-color-preview-width, $kendo-color-palette-tile-width );
                 height: var( --kendo-color-preview-height, $kendo-color-palette-tile-height );
+            } */
+        }
+
+        // ColorPalette sizes
+        @each $size, $size-props in $kendo-color-palette-sizes {
+            $_tile-width: map.get( $size-props, width );
+            $_tile-height: map.get( $size-props, height );
+
+            .k-coloreditor-#{$size} {
+                .k-colorpalette-tile {
+                    width: $_tile-width;
+                    height: $_tile-height;
+                }
             }
         }
 
diff --git a/packages/fluent/scss/coloreditor/_variables.scss b/packages/fluent/scss/coloreditor/_variables.scss
index 0d24123ff44..c131752f7da 100644
--- a/packages/fluent/scss/coloreditor/_variables.scss
+++ b/packages/fluent/scss/coloreditor/_variables.scss
@@ -9,6 +9,15 @@ $kendo-color-editor-spacer: k-spacing(2) !default;
 /// The minimum width of the ColorEditor.
 /// @group color-editor
 $kendo-color-editor-min-width: 260px !default;
+/// The minimum width of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-sm-min-width: 236px !default;
+/// The minimum width of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-md-min-width: $kendo-color-editor-min-width !default;
+/// The minimum width of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-lg-min-width: 360px !default;
 /// The width of the border around the ColorEditor.
 /// @group color-editor
 $kendo-color-editor-border-width: 1px !default;
@@ -50,10 +59,30 @@ $kendo-color-editor-header-padding-y: $kendo-color-editor-spacer !default;
 /// The horizontal padding of the ColorEditor header.
 /// @group color-editor
 $kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-y !default;
+
 /// The spacing between the ColorEditor header actions.
 /// @group color-editor
 $kendo-color-editor-header-actions-spacing: calc( #{$kendo-color-editor-spacer} / 2 ) !default;
 
+/// The vertical padding of the small ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-sm-header-padding-y: $kendo-color-editor-header-padding-y !default;
+/// The horizontal padding of the small ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-sm-header-padding-x: $kendo-color-editor-header-padding-x !default;
+/// The vertical padding of the medium ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-md-header-padding-y: $kendo-color-editor-header-padding-y !default;
+/// The horizontal padding of the medium ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-md-header-padding-x: $kendo-color-editor-header-padding-x !default;
+/// The vertical padding of the large ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-lg-header-padding-y: k-spacing(4) !default;
+/// The horizontal padding of the large ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-lg-header-padding-x: k-spacing(4) !default;
+
 /// The width of the ColorEditor preview.
 /// @group color-editor
 $kendo-color-editor-color-preview-width: 34px !default;
@@ -64,6 +93,35 @@ $kendo-color-editor-color-preview-height: 14px !default;
 /// @group color-editor
 $kendo-color-editor-preview-spacing: k-spacing(1) !default;
 
+/// The spacing between the colors in the small ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-sm-preview-spacing: k-spacing(1) !default;
+/// The spacing between the colors in the medium ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-md-preview-spacing: $kendo-color-editor-preview-spacing !default;
+/// The spacing between the colors in the large ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-lg-preview-spacing: k-spacing(1) !default;
+
+/// The width of the small ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-sm-width: 34px !default;
+/// The height of the small ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-sm-height: 12px !default;
+/// The width of the medium ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-md-width: $kendo-color-editor-color-preview-width !default;
+/// The height of the medium ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-md-height: $kendo-color-editor-color-preview-height !default;
+/// The width of the large ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-lg-width: 34px !default;
+/// The height of the large ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-lg-height: 16px !default;
+
 /// The vertical padding of the ColorEditor views container.
 /// @group color-editor
 $kendo-color-editor-views-padding-y: $kendo-color-editor-spacer !default;
@@ -74,6 +132,34 @@ $kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-y !defaul
 /// @group color-editor
 $kendo-color-editor-views-spacing: $kendo-color-editor-spacer !default;
 
+/// The vertical padding of the small ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-sm-views-padding-y: k-spacing(4) !default;
+/// The horizontal padding of the small ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-sm-views-padding-x: $kendo-color-editor-views-padding-y !default;
+/// The spacing of the small ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-sm-views-spacing: k-spacing(4) !default;
+/// The vertical padding of the medium ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-md-views-padding-y: $kendo-color-editor-views-padding-y !default;
+/// The horizontal padding of the medium ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-md-views-padding-x: $kendo-color-editor-views-padding-x !default;
+/// The spacing of the medium ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-md-views-spacing: $kendo-color-editor-views-spacing !default;
+/// The vertical padding of the large ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-lg-views-padding-y: k-spacing(4) !default;
+/// The horizontal padding of the large ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-lg-views-padding-x: k-spacing(4) !default;
+/// The spacing of the large ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-lg-views-spacing: k-spacing(4.5) !default;
+
 /// The vertical padding of the ColorEditor footer.
 /// @group color-editor
 $kendo-color-editor-footer-padding-y: k-spacing(2) !default;
@@ -90,3 +176,39 @@ $kendo-color-editor-color-gradient-focus-outline: 2px !default;
 /// The outline offset of the focused ColorGradient.
 /// @group color-editor
 $kendo-color-editor-color-gradient-focus-outline-offset: 2px !default;
+
+/// The size map of the ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-sizes: (
+    sm: (
+        min-width: $kendo-color-editor-sm-min-width,
+        width: $kendo-color-editor-color-preview-sm-width,
+        height: $kendo-color-editor-color-preview-sm-height,
+        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
+
+    ),
+    md: (
+        min-width: $kendo-color-editor-md-min-width,
+        width: $kendo-color-editor-color-preview-md-width,
+        height: $kendo-color-editor-color-preview-md-height,
+        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
+    ),
+    lg: (
+        min-width: $kendo-color-editor-lg-min-width,
+        width: $kendo-color-editor-color-preview-lg-width,
+        height: $kendo-color-editor-color-preview-lg-height,
+        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
+    )
+) !default;
diff --git a/packages/fluent/scss/colorgradient/_layout.scss b/packages/fluent/scss/colorgradient/_layout.scss
index e160f05d33f..2690648fd43 100644
--- a/packages/fluent/scss/colorgradient/_layout.scss
+++ b/packages/fluent/scss/colorgradient/_layout.scss
@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 
@@ -6,7 +7,6 @@
     // ColorGradient
     .k-colorgradient {
         @include border-radius( var( --kendo-color-gradient-border-radius, #{$kendo-color-gradient-border-radius} ) );
-        width: var( --kendo-color-gradient-width, #{$kendo-color-gradient-width} );
         padding-inline: var( --kendo-color-gradient-padding-x, #{$kendo-color-gradient-padding-x} );
         padding-block: var( --kendo-color-gradient-padding-y, #{$kendo-color-gradient-padding-y} );
         border-style: solid;
@@ -19,7 +19,6 @@
         display: flex;
         flex-direction: column;
         align-items: stretch;
-        gap: var( --kendo-color-gradient-spacing, #{$kendo-color-gradient-spacing} );
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
@@ -43,10 +42,6 @@
             user-select: none;
         }
 
-        .k-hsv-gradient {
-            height: var( --kendo-color-gradient-canvas-rectangle-height, #{$kendo-color-gradient-canvas-rectangle-height} );
-        }
-
         .k-hsv-draghandle {
             margin-block-start: var( --kendo-color-gradient-canvas-draghandle-offset-y, #{$kendo-color-gradient-canvas-draghandle-offset-y} );
             margin-inline-start: var( --kendo-color-gradient-canvas-draghandle--offset-x, #{$kendo-color-gradient-canvas-draghandle-offset-x} );
@@ -61,7 +56,6 @@
         .k-hsv-controls {
             position: relative;
             flex-shrink: 0;
-            gap: var( --kendo-color-gradient-canvas-spacing, #{$kendo-color-gradient-canvas-spacing} );
         }
     }
 
@@ -80,7 +74,6 @@
 
         &.k-slider-vertical {
             width: var( --kendo-color-gradient-slider-track-size, #{$kendo-color-gradient-slider-track-size} );
-            height: var( --kendo-color-gradient-slider-vertical-size, #{$kendo-color-gradient-slider-vertical-size} );
             flex: 0 0 var( --kendo-color-gradient-slider-track-size, #{$kendo-color-gradient-slider-track-size} );
         }
         &.k-slider-vertical .k-slider-track {
@@ -129,6 +122,43 @@
 
     }
 
+    // ColorGradient sizes
+    @each $size, $size-props in $kendo-color-gradient-sizes {
+        $_width: map.get( $size-props, width );
+        $_spacing: map.get( $size-props, spacing );
+        $_vertical-slider-height: map.get( $size-props, vertical-slider-height );
+        $_rectangle-height: map.get( $size-props, rectangle-height );
+        $_input-width: map.get( $size-props, input-width );
+        $_canvas-spacing: map.get( $size-props, canvas-spacing );
+
+        .k-colorgradient-#{$size} {
+            width: $_width;
+            gap: $_spacing;
+
+            .k-colorgradient-inputs {
+                .k-numerictextbox {
+                    width: $_input-width;
+                }
+            }
+
+            .k-colorgradient-canvas {
+                gap: $_canvas-spacing;
+
+                .k-hsv-gradient {
+                    height: $_rectangle-height;
+                }
+
+                .k-slider-vertical {
+                    height: $_vertical-slider-height;
+                }
+
+                .k-hsv-controls {
+                    gap: $_canvas-spacing;
+                }
+            }
+        }
+    }
+
     // Inputs
     .k-colorgradient-inputs {
         gap: var( --kendo-color-gradient-input-spacing, #{$kendo-color-gradient-input-spacing} );
@@ -141,10 +171,6 @@
         > .k-vstack {
             gap: var( --kendo-color-gradient-input-label-spacing, #{$kendo-color-gradient-input-label-spacing} );
         }
-
-        .k-numerictextbox {
-            width: var( --kendo-color-gradient-input-width, #{$kendo-color-gradient-input-width} );
-        }
     }
 
     // Contrast
diff --git a/packages/fluent/scss/colorgradient/_variables.scss b/packages/fluent/scss/colorgradient/_variables.scss
index ba139c4daa2..90e931b5a2c 100644
--- a/packages/fluent/scss/colorgradient/_variables.scss
+++ b/packages/fluent/scss/colorgradient/_variables.scss
@@ -47,6 +47,26 @@ $kendo-color-gradient-border: var( --kendo-component-border, initial ) !default;
 /// @group color-gradient
 $kendo-color-gradient-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 
+/// The width of the small ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sm-width: 226px !default;
+/// The width of the medium ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-md-width: $kendo-color-gradient-width !default;
+/// The width of the large ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-lg-width: 360px !default;
+
+/// The spacing between the sections of the small ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sm-spacing: $kendo-color-gradient-spacing !default;
+/// The spacing between the sections of the medium ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-md-spacing: $kendo-color-gradient-spacing !default;
+/// The spacing between the sections of the large ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-lg-spacing: k-spacing(4.5) !default;
+
 /// The border color of the focused ColorGradient.
 /// @group color-gradient
 $kendo-color-gradient-focus-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 )) !default;
@@ -62,10 +82,30 @@ $kendo-color-gradient-canvas-border-width: 0 !default;
 $kendo-color-gradient-canvas-border-radius: k-border-radius(md) !default;
 /// The spacing between the items of the ColorGradient canvas.
 /// @group color-gradient
-$kendo-color-gradient-canvas-spacing: calc( #{$kendo-color-gradient-spacer} / 2 ) !default;
+$kendo-color-gradient-canvas-spacing: k-spacing(2) !default;
 /// The height the ColorGradient canvas hsv rectangle.
 /// @group color-gradient
 $kendo-color-gradient-canvas-rectangle-height: 180px !default;
+/// The height the small ColorGradient canvas hsv rectangle.
+/// @group color-gradient
+$kendo-color-gradient-sm-canvas-rectangle-height: 164px !default;
+/// The height the medium ColorGradient canvas hsv rectangle.
+/// @group color-gradient
+$kendo-color-gradient-md-canvas-rectangle-height: $kendo-color-gradient-canvas-rectangle-height !default;
+/// The height the large ColorGradient canvas hsv rectangle.
+/// @group color-gradient
+$kendo-color-gradient-lg-canvas-rectangle-height: 256px !default;
+
+/// The spacing between the items of the small ColorGradient canvas.
+/// @group color-gradient
+$kendo-color-gradient-sm-canvas-spacing: $kendo-color-gradient-canvas-spacing !default;
+/// The spacing between the items of the medium ColorGradient canvas.
+/// @group color-gradient
+$kendo-color-gradient-md-canvas-spacing: $kendo-color-gradient-canvas-spacing !default;
+/// The spacing between the items of the large ColorGradient canvas.
+/// @group color-gradient
+$kendo-color-gradient-lg-canvas-spacing: k-spacing(4) !default;
+
 /// The border color of the ColorGradient canvas hsv rectangle.
 /// @group color-gradient
 $kendo-color-gradient-canvas-rectangle-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
@@ -95,6 +135,15 @@ $kendo-color-gradient-slider-horizontal-size: 100% !default;
 /// The background image of the ColorGradient alpha slider.
 /// @group color-gradient
 $kendo-color-gradient-slider-alpha-bgr: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC" !default;
+/// The height of the small ColorGradient vertical slider.
+/// @group color-gradient
+$kendo-color-gradient-sm-slider-vertical-size: 164px !default;
+/// The height of the medium ColorGradient vertical slider.
+/// @group color-gradient
+$kendo-color-gradient-md-slider-vertical-size: $kendo-color-gradient-slider-vertical-size !default;
+/// The height of the large ColorGradient vertical slider.
+/// @group color-gradient
+$kendo-color-gradient-lg-slider-vertical-size: 256px !default;
 
 /// The width of the ColorGradient canvas drag handle.
 /// @group color-gradient
@@ -147,9 +196,48 @@ $kendo-color-gradient-input-label-spacing: calc( #{$kendo-color-gradient-spacer}
 /// @group color-gradient
 $kendo-color-gradient-input-label-text: var( --kendo-subtle-text, inherit ) !default;
 
+/// The width of the small ColorGradient input.
+/// @group color-gradient
+$kendo-color-gradient-sm-input-width: 43.5px !default;
+/// The width of the medium ColorGradient input.
+/// @group color-gradient
+$kendo-color-gradient-md-input-width: $kendo-color-gradient-input-width !default;
+/// The width of the large ColorGradient input.
+/// @group color-gradient
+$kendo-color-gradient-lg-input-width: 50.5px !default;
+
 /// The font weight of the ColorGradient contrast ratio text.
 /// @group color-gradient
 $kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 /// The spacing between the items in the ColorGradient contrast tool.
 /// @group color-gradient
 $kendo-color-gradient-contrast-spacing: calc( #{$kendo-color-gradient-spacer} / 1.5 ) !default;
+
+/// The size map of the ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sizes: (
+    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
+    )
+) !default;
diff --git a/packages/fluent/scss/colorpalette/_variables.scss b/packages/fluent/scss/colorpalette/_variables.scss
index 08cc121e89f..c214898f2cc 100644
--- a/packages/fluent/scss/colorpalette/_variables.scss
+++ b/packages/fluent/scss/colorpalette/_variables.scss
@@ -26,6 +26,25 @@ $kendo-color-palette-tile-width: k-spacing(6) !default;
 /// The height of the ColorPalette tile.
 /// @group color-palette
 $kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
+/// The width of the small ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-sm-width: k-spacing(5.5) !default;
+/// The height of the small ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-sm-height: $kendo-color-palette-tile-sm-width !default;
+/// The width of the medium ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-md-width: $kendo-color-palette-tile-width !default;
+/// The height of the medium ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-md-height: $kendo-color-palette-tile-height !default;
+/// The width of the large ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-lg-width: k-spacing(8) !default;
+/// The height of the large ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-lg-height: $kendo-color-palette-tile-lg-width !default;
+
 /// The outline color of the ColorPalette focused tile.
 /// @group color-palette
 $kendo-color-palette-tile-focus-outline: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
@@ -47,3 +66,20 @@ $kendo-color-palette-tile-selected-shadow: $kendo-color-palette-tile-hover-shado
 /// The outline color of the ColorPalette selected hover tile.
 /// @group color-palette
 $kendo-color-palette-tile-selected-hover-outline: $kendo-color-palette-tile-focus-outline !default;
+
+/// The size map of the ColorPalette.
+/// @group color-palette
+$kendo-color-palette-sizes: (
+    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
+    )
+) !default;
diff --git a/packages/material/scss/coloreditor/_variables.scss b/packages/material/scss/coloreditor/_variables.scss
index f38cfbf9915..b8ba78111fb 100644
--- a/packages/material/scss/coloreditor/_variables.scss
+++ b/packages/material/scss/coloreditor/_variables.scss
@@ -9,6 +9,16 @@ $kendo-color-editor-spacer: k-spacing(3) !default;
 /// The minimum width of the ColorEditor.
 /// @group color-editor
 $kendo-color-editor-min-width: 294px !default;
+/// The minimum width of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-sm-min-width: 278px !default;
+/// The minimum width of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-md-min-width: $kendo-color-editor-min-width !default;
+/// The minimum width of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-lg-min-width: 364px !default;
+
 /// The width of the border around the ColorEditor.
 /// @group color-editor
 $kendo-color-editor-border-width: 1px !default;
@@ -50,6 +60,24 @@ $kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-y !defa
 /// The spacing between the ColorEditor header actions.
 /// @group color-editor
 $kendo-color-editor-header-actions-gap: k-spacing(2) !default;
+/// The vertical padding of the small ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-sm-header-padding-y: $kendo-color-editor-header-padding-y !default;
+/// The horizontal padding of the small ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-sm-header-padding-x: $kendo-color-editor-header-padding-x !default;
+/// The vertical padding of the medium ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-md-header-padding-y: $kendo-color-editor-header-padding-y !default;
+/// The horizontal padding of the medium ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-md-header-padding-x: $kendo-color-editor-header-padding-x !default;
+/// The vertical padding of the large ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-lg-header-padding-y: k-spacing(4.5) !default;
+/// The horizontal padding of the large ColorEditor header.
+/// @group color-editor
+$kendo-color-editor-lg-header-padding-x: k-spacing(4.5) !default;
 
 /// The width of the ColorEditor preview.
 /// @group color-editor
@@ -60,6 +88,34 @@ $kendo-color-editor-color-preview-height: 12px !default;
 /// The spacing between the colors in the ColorEditor preview.
 /// @group color-editor
 $kendo-color-editor-preview-gap: k-spacing(1) !default;
+/// The spacing between the colors in the small ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-sm-preview-gap: k-spacing(2) !default;
+/// The spacing between the colors in the medium ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-md-preview-gap: $kendo-color-editor-preview-gap !default;
+/// The spacing between the colors in the large ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-lg-preview-gap: k-spacing(2) !default;
+
+/// The width of the small ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-sm-width: 34px !default;
+/// The height of the small ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-sm-height: 12px !default;
+/// The width of the medium ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-md-width: $kendo-color-editor-color-preview-width !default;
+/// The height of the medium ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-md-height: $kendo-color-editor-color-preview-height !default;
+/// The width of the large ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-lg-width: 42px !default;
+/// The height of the large ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-color-preview-lg-height: 16px !default;
 
 /// The vertical padding of the ColorEditor views container.
 /// @group color-editor
@@ -70,6 +126,33 @@ $kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-y !defaul
 /// The spacing of the ColorEditor views container.
 /// @group color-editor
 $kendo-color-editor-views-gap: $kendo-color-editor-spacer !default;
+/// The vertical padding of the small ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-sm-views-padding-y: $kendo-color-editor-spacer !default;
+/// The horizontal padding of the small ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-sm-views-padding-x: $kendo-color-editor-views-padding-y !default;
+/// The spacing of the small ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-sm-views-gap: $kendo-color-editor-spacer !default;
+/// The vertical padding of the medium ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-md-views-padding-y: $kendo-color-editor-views-padding-y !default;
+/// The horizontal padding of the medium ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-md-views-padding-x: $kendo-color-editor-views-padding-x !default;
+/// The spacing of the medium ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-md-views-gap: $kendo-color-editor-views-gap !default;
+/// The vertical padding of the large ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-lg-views-padding-y: k-spacing(4.5) !default;
+/// The horizontal padding of the large ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-lg-views-padding-x: k-spacing(4.5) !default;
+/// The spacing of the large ColorEditor views container.
+/// @group color-editor
+$kendo-color-editor-lg-views-gap: k-spacing(4.5) !default;
 
 /// The outline color of the focused ColorGradient.
 /// @group color-editor
@@ -81,9 +164,48 @@ $kendo-color-editor-color-gradient-focus-outline: 2px !default;
 /// @group color-editor
 $kendo-color-editor-color-gradient-focus-outline-offset: 2px !default;
 
+/// The size map of the ColorEditor.
+/// @group color-editor
+$kendo-color-editor-sizes: (
+    sm: (
+        min-width: $kendo-color-editor-sm-min-width,
+        width: $kendo-color-editor-color-preview-sm-width,
+        height: $kendo-color-editor-color-preview-sm-height,
+        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
+
+    ),
+    md: (
+        min-width: $kendo-color-editor-md-min-width,
+        width: $kendo-color-editor-color-preview-md-width,
+        height: $kendo-color-editor-color-preview-md-height,
+        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
+    ),
+    lg: (
+        min-width: $kendo-color-editor-lg-min-width,
+        width: $kendo-color-editor-color-preview-lg-width,
+        height: $kendo-color-editor-color-preview-lg-height,
+        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
+    )
+) !default;
+
 @forward "@progress/kendo-theme-default/scss/coloreditor/_variables.scss" with (
     $kendo-color-editor-spacer: $kendo-color-editor-spacer,
     $kendo-color-editor-min-width: $kendo-color-editor-min-width,
+    $kendo-color-editor-sm-min-width: $kendo-color-editor-sm-min-width,
+    $kendo-color-editor-md-min-width: $kendo-color-editor-md-min-width,
+    $kendo-color-editor-lg-min-width: $kendo-color-editor-lg-min-width,
     $kendo-color-editor-border-width: $kendo-color-editor-border-width,
     $kendo-color-editor-border-radius: $kendo-color-editor-border-radius,
     $kendo-color-editor-font-family: $kendo-color-editor-font-family,
@@ -96,13 +218,37 @@ $kendo-color-editor-color-gradient-focus-outline-offset: 2px !default;
     $kendo-color-editor-focus-shadow: $kendo-color-editor-focus-shadow,
     $kendo-color-editor-header-padding-y: $kendo-color-editor-header-padding-y,
     $kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-x,
+    $kendo-color-editor-sm-header-padding-y: $kendo-color-editor-sm-header-padding-y,
+    $kendo-color-editor-sm-header-padding-x: $kendo-color-editor-sm-header-padding-x,
+    $kendo-color-editor-md-header-padding-y: $kendo-color-editor-md-header-padding-y,
+    $kendo-color-editor-md-header-padding-x: $kendo-color-editor-md-header-padding-x,
+    $kendo-color-editor-lg-header-padding-y: $kendo-color-editor-lg-header-padding-y,
+    $kendo-color-editor-lg-header-padding-x: $kendo-color-editor-lg-header-padding-x,
     $kendo-color-editor-header-actions-gap: $kendo-color-editor-header-actions-gap,
     $kendo-color-editor-color-preview-width: $kendo-color-editor-color-preview-width,
     $kendo-color-editor-color-preview-height: $kendo-color-editor-color-preview-height,
     $kendo-color-editor-preview-gap: $kendo-color-editor-preview-gap,
+    $kendo-color-editor-sm-preview-gap: $kendo-color-editor-sm-preview-gap,
+    $kendo-color-editor-md-preview-gap: $kendo-color-editor-md-preview-gap,
+    $kendo-color-editor-lg-preview-gap: $kendo-color-editor-lg-preview-gap,
+    $kendo-color-editor-color-preview-sm-width: $kendo-color-editor-color-preview-sm-width,
+    $kendo-color-editor-color-preview-sm-height: $kendo-color-editor-color-preview-sm-height,
+    $kendo-color-editor-color-preview-md-width: $kendo-color-editor-color-preview-md-width,
+    $kendo-color-editor-color-preview-md-height: $kendo-color-editor-color-preview-md-height,
+    $kendo-color-editor-color-preview-lg-width: $kendo-color-editor-color-preview-lg-width,
+    $kendo-color-editor-color-preview-lg-height: $kendo-color-editor-color-preview-lg-height,
     $kendo-color-editor-views-padding-y: $kendo-color-editor-views-padding-y,
     $kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-x,
     $kendo-color-editor-views-gap: $kendo-color-editor-views-gap,
+    $kendo-color-editor-sm-views-padding-y: $kendo-color-editor-sm-views-padding-y,
+    $kendo-color-editor-sm-views-padding-x: $kendo-color-editor-sm-views-padding-x,
+    $kendo-color-editor-sm-views-gap: $kendo-color-editor-sm-views-gap,
+    $kendo-color-editor-md-views-padding-y: $kendo-color-editor-md-views-padding-y,
+    $kendo-color-editor-md-views-padding-x: $kendo-color-editor-md-views-padding-x,
+    $kendo-color-editor-md-views-gap: $kendo-color-editor-md-views-gap,
+    $kendo-color-editor-lg-views-padding-y: $kendo-color-editor-lg-views-padding-y,
+    $kendo-color-editor-lg-views-padding-x: $kendo-color-editor-lg-views-padding-x,
+    $kendo-color-editor-lg-views-gap: $kendo-color-editor-lg-views-gap,
     $kendo-color-editor-color-gradient-focus-outline-color: $kendo-color-editor-color-gradient-focus-outline-color,
     $kendo-color-editor-color-gradient-focus-outline: $kendo-color-editor-color-gradient-focus-outline,
     $kendo-color-editor-color-gradient-focus-outline-offset: $kendo-color-editor-color-gradient-focus-outline-offset
diff --git a/packages/material/scss/colorgradient/_variables.scss b/packages/material/scss/colorgradient/_variables.scss
index babc087ca15..97511dd16ae 100644
--- a/packages/material/scss/colorgradient/_variables.scss
+++ b/packages/material/scss/colorgradient/_variables.scss
@@ -43,6 +43,25 @@ $kendo-color-gradient-bg: $kendo-component-bg !default;
 /// The border color of the ColorGradient.
 /// @group color-gradient
 $kendo-color-gradient-border: $kendo-component-border !default;
+/// The width of the small ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sm-width: 254px !default;
+/// The width of the medium ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-md-width: $kendo-color-gradient-width !default;
+/// The width of the large ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-lg-width: 328px !default;
+
+/// The spacing between the sections of the small ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sm-gap: k-spacing(2.5) !default;
+/// The spacing between the sections of the medium ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-md-gap: $kendo-color-gradient-gap !default;
+/// The spacing between the sections of the large ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-lg-gap: k-spacing(4) !default;
 
 /// The border color of the focused ColorGradient.
 /// @group color-gradient
@@ -60,6 +79,25 @@ $kendo-color-gradient-canvas-gap: $kendo-color-gradient-spacer !default;
 /// The height the ColorGradient canvas hsv rectangle.
 /// @group color-gradient
 $kendo-color-gradient-canvas-rectangle-height: 180px !default;
+/// The height the small ColorGradient canvas hsv rectangle.
+/// @group color-gradient
+$kendo-color-gradient-sm-canvas-rectangle-height: 210px !default;
+/// The height the medium ColorGradient canvas hsv rectangle.
+/// @group color-gradient
+$kendo-color-gradient-md-canvas-rectangle-height: $kendo-color-gradient-canvas-rectangle-height !default;
+/// The height the large ColorGradient canvas hsv rectangle.
+/// @group color-gradient
+$kendo-color-gradient-lg-canvas-rectangle-height: 266px !default;
+
+/// The spacing between the items of the small ColorGradient canvas.
+/// @group color-gradient
+$kendo-color-gradient-sm-canvas-gap: k-spacing(2.5) !default;
+/// The spacing between the items of the medium ColorGradient canvas.
+/// @group color-gradient
+$kendo-color-gradient-md-canvas-gap: $kendo-color-gradient-canvas-gap !default;
+/// The spacing between the items of the large ColorGradient canvas.
+/// @group color-gradient
+$kendo-color-gradient-lg-canvas-gap: k-spacing(4) !default;
 
 /// The width of the ColorGradient slider.
 /// @group color-gradient
@@ -80,6 +118,15 @@ $kendo-color-gradient-slider-horizontal-size: 100% !default;
 /// The background image of the ColorGradient alpha slider.
 /// @group color-gradient
 $kendo-color-gradient-slider-alpha-bgr: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC" !default;
+/// The height of the small ColorGradient vertical slider.
+/// @group color-gradient
+$kendo-color-gradient-sm-slider-vertical-size: 210px !default;
+/// The height of the medium ColorGradient vertical slider.
+/// @group color-gradient
+$kendo-color-gradient-md-slider-vertical-size: $kendo-color-gradient-slider-vertical-size !default;
+/// The height of the large ColorGradient vertical slider.
+/// @group color-gradient
+$kendo-color-gradient-lg-slider-vertical-size: 266px !default;
 
 /// The width of the ColorGradient canvas drag handle.
 /// @group color-gradient
@@ -135,6 +182,16 @@ $kendo-color-gradient-input-label-gap: k-spacing(1) !default;
 /// @group color-gradient
 $kendo-color-gradient-input-label-text: $kendo-subtle-text !default;
 
+/// The width of the small ColorGradient input.
+/// @group color-gradient
+$kendo-color-gradient-sm-input-width: 46px !default;
+/// The width of the medium ColorGradient input.
+/// @group color-gradient
+$kendo-color-gradient-md-input-width: $kendo-color-gradient-input-width !default;
+/// The width of the large ColorGradient input.
+/// @group color-gradient
+$kendo-color-gradient-lg-input-width: 62px !default;
+
 /// The font weight of the ColorGradient contrast ratio text.
 /// @group color-gradient
 $kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-medium, normal ) !default;
@@ -142,9 +199,44 @@ $kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-mediu
 /// @group color-gradient
 $kendo-color-gradient-contrast-spacer: k-spacing(2) !default;
 
+/// The size map of the ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sizes: (
+    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
+    )
+) !default;
+
 @forward "@progress/kendo-theme-default/scss/colorgradient/_variables.scss" with (
     $kendo-color-gradient-spacer: $kendo-color-gradient-spacer,
     $kendo-color-gradient-width: $kendo-color-gradient-width,
+    $kendo-color-gradient-sm-width: $kendo-color-gradient-sm-width,
+    $kendo-color-gradient-md-width: $kendo-color-gradient-md-width,
+    $kendo-color-gradient-lg-width: $kendo-color-gradient-lg-width,
+    $kendo-color-gradient-sm-gap: $kendo-color-gradient-sm-gap,
+    $kendo-color-gradient-md-gap: $kendo-color-gradient-md-gap,
+    $kendo-color-gradient-lg-gap: $kendo-color-gradient-lg-gap,
     $kendo-color-gradient-border-width: $kendo-color-gradient-border-width,
     $kendo-color-gradient-border-radius: $kendo-color-gradient-border-radius,
     $kendo-color-gradient-padding-y: $kendo-color-gradient-padding-y,
@@ -161,12 +253,21 @@ $kendo-color-gradient-contrast-spacer: k-spacing(2) !default;
     $kendo-color-gradient-canvas-border-radius: $kendo-color-gradient-canvas-border-radius,
     $kendo-color-gradient-canvas-gap: $kendo-color-gradient-canvas-gap,
     $kendo-color-gradient-canvas-rectangle-height: $kendo-color-gradient-canvas-rectangle-height,
+    $kendo-color-gradient-sm-canvas-rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,
+    $kendo-color-gradient-md-canvas-rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,
+    $kendo-color-gradient-lg-canvas-rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,
+    $kendo-color-gradient-sm-canvas-gap: $kendo-color-gradient-sm-canvas-gap,
+    $kendo-color-gradient-md-canvas-gap: $kendo-color-gradient-md-canvas-gap,
+    $kendo-color-gradient-lg-canvas-gap: $kendo-color-gradient-lg-canvas-gap,
     $kendo-color-gradient-slider-track-size: $kendo-color-gradient-slider-track-size,
     $kendo-color-gradient-slider-border-radius: $kendo-color-gradient-slider-border-radius,
     $kendo-color-gradient-slider-draghandle-border-width: $kendo-color-gradient-slider-draghandle-border-width,
     $kendo-color-gradient-slider-vertical-size: $kendo-color-gradient-slider-vertical-size,
     $kendo-color-gradient-slider-horizontal-size: $kendo-color-gradient-slider-horizontal-size,
     $kendo-color-gradient-slider-alpha-bgr: $kendo-color-gradient-slider-alpha-bgr,
+    $kendo-color-gradient-sm-slider-vertical-size: $kendo-color-gradient-sm-slider-vertical-size,
+    $kendo-color-gradient-md-slider-vertical-size: $kendo-color-gradient-md-slider-vertical-size,
+    $kendo-color-gradient-lg-slider-vertical-size: $kendo-color-gradient-lg-slider-vertical-size,
     $kendo-color-gradient-draghandle-width: $kendo-color-gradient-draghandle-width,
     $kendo-color-gradient-draghandle-height: $kendo-color-gradient-draghandle-height,
     $kendo-color-gradient-draghandle-border-width: $kendo-color-gradient-draghandle-border-width,
@@ -184,6 +285,9 @@ $kendo-color-gradient-contrast-spacer: k-spacing(2) !default;
     $kendo-color-gradient-input-gap: $kendo-color-gradient-input-gap,
     $kendo-color-gradient-input-label-gap: $kendo-color-gradient-input-label-gap,
     $kendo-color-gradient-input-label-text: $kendo-color-gradient-input-label-text,
+    $kendo-color-gradient-sm-input-width: $kendo-color-gradient-sm-input-width,
+    $kendo-color-gradient-md-input-width: $kendo-color-gradient-md-input-width,
+    $kendo-color-gradient-lg-input-width: $kendo-color-gradient-lg-input-width,
     $kendo-color-gradient-contrast-ratio-font-weight: $kendo-color-gradient-contrast-ratio-font-weight,
     $kendo-color-gradient-contrast-spacer: $kendo-color-gradient-contrast-spacer
 );
diff --git a/packages/material/scss/colorpalette/_variables.scss b/packages/material/scss/colorpalette/_variables.scss
index 64c35adabba..60f928b7e19 100644
--- a/packages/material/scss/colorpalette/_variables.scss
+++ b/packages/material/scss/colorpalette/_variables.scss
@@ -18,6 +18,24 @@ $kendo-color-palette-tile-width: k-spacing(6) !default;
 /// The height of the ColorPalette tile.
 /// @group color-palette
 $kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
+// The width of the small ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-sm-width: k-spacing(5.5) !default;
+/// The height of the small ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-sm-height: $kendo-color-palette-tile-sm-width !default;
+/// The width of the medium ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-md-width: $kendo-color-palette-tile-width !default;
+/// The height of the medium ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-md-height: $kendo-color-palette-tile-height !default;
+/// The width of the large ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-lg-width: k-spacing(8) !default;
+/// The height of the large ColorPalette tile.
+/// @group color-palette
+$kendo-color-palette-tile-lg-height: $kendo-color-palette-tile-lg-width !default;
 /// The shadow of the ColorPalette focused tile.
 /// @group color-palette
 $kendo-color-palette-tile-focus-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 ) !default;
@@ -28,12 +46,35 @@ $kendo-color-palette-tile-hover-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0
 /// @group color-palette
 $kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;
 
+/// The size map of the ColorPalette.
+/// @group color-palette
+$kendo-color-palette-sizes: (
+    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
+    )
+) !default;
+
 @forward "@progress/kendo-theme-default/scss/colorpalette/_variables.scss" with (
     $kendo-color-palette-font-family: $kendo-color-palette-font-family,
     $kendo-color-palette-font-size: $kendo-color-palette-font-size,
     $kendo-color-palette-line-height: $kendo-color-palette-line-height,
     $kendo-color-palette-tile-width: $kendo-color-palette-tile-width,
     $kendo-color-palette-tile-height: $kendo-color-palette-tile-height,
+    $kendo-color-palette-tile-sm-width: $kendo-color-palette-tile-sm-width,
+    $kendo-color-palette-tile-sm-height: $kendo-color-palette-tile-sm-height,
+    $kendo-color-palette-tile-md-width: $kendo-color-palette-tile-md-width,
+    $kendo-color-palette-tile-md-height: $kendo-color-palette-tile-md-height,
+    $kendo-color-palette-tile-lg-width: $kendo-color-palette-tile-lg-width,
+    $kendo-color-palette-tile-lg-height: $kendo-color-palette-tile-lg-height,
     $kendo-color-palette-tile-focus-shadow: $kendo-color-palette-tile-focus-shadow,
     $kendo-color-palette-tile-hover-shadow: $kendo-color-palette-tile-hover-shadow,
     $kendo-color-palette-tile-selected-shadow: $kendo-color-palette-tile-selected-shadow