@progress/kendo-theme-material 10.1.0-dev.5 → 10.1.0

package/lib/swatches/material-aqua-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Aqua Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "10.1.0-dev.5",
+    "version": "10.1.0",
     "api": "modern",
     "previewColors": [
         "#121212",

package/lib/swatches/material-arctic.json

@@ -3,7 +3,7 @@
     "name": "Material Arctic",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "10.1.0-dev.5",
+    "version": "10.1.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/material-burnt-teal.json

@@ -3,7 +3,7 @@
     "name": "Material Burnt Teal",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "10.1.0-dev.5",
+    "version": "10.1.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/material-dataviz-v4.json

@@ -3,7 +3,7 @@
     "name": "Material Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "10.1.0-dev.5",
+    "version": "10.1.0",
     "api": "modern",
     "previewColors": [
         "#3f51b5",

package/lib/swatches/material-eggplant.json

@@ -3,7 +3,7 @@
     "name": "Material Eggplant",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "10.1.0-dev.5",
+    "version": "10.1.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/material-lime-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Lime Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "10.1.0-dev.5",
+    "version": "10.1.0",
     "api": "modern",
     "previewColors": [
         "#121212",

package/lib/swatches/material-lime.json

@@ -3,7 +3,7 @@
     "name": "Material Lime",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "10.1.0-dev.5",
+    "version": "10.1.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/material-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "10.1.0-dev.5",
+    "version": "10.1.0",
     "api": "modern",
     "previewColors": [
         "#121212",

package/lib/swatches/material-main.json

@@ -3,7 +3,7 @@
     "name": "Material Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "10.1.0-dev.5",
+    "version": "10.1.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/material-nova.json

@@ -3,7 +3,7 @@
     "name": "Material Nova",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "10.1.0-dev.5",
+    "version": "10.1.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/material-pacific-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Pacific Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "10.1.0-dev.5",
+    "version": "10.1.0",
     "api": "modern",
     "previewColors": [
         "#121212",

package/lib/swatches/material-pacific.json

@@ -3,7 +3,7 @@
     "name": "Material Pacific Light",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "10.1.0-dev.5",
+    "version": "10.1.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/material-sky-dark.json

@@ -3,7 +3,7 @@
     "name": "Material Sky Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "10.1.0-dev.5",
+    "version": "10.1.0",
     "api": "modern",
     "previewColors": [
         "#121212",

package/lib/swatches/material-sky.json

@@ -3,7 +3,7 @@
     "name": "Material Sky",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "10.1.0-dev.5",
+    "version": "10.1.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/lib/swatches/material-smoke.json

@@ -3,7 +3,7 @@
     "name": "Material Smoke",
     "product": "kendo",
     "base": "@progress/kendo-theme-material",
-    "version": "10.1.0-dev.5",
+    "version": "10.1.0",
     "api": "modern",
     "previewColors": [
         "#ffffff",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-material",
   "description": "Material theme for Kendo UI",
-  "version": "10.1.0-dev.5",
+  "version": "10.1.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -54,13 +54,13 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.0.0",
-    "@progress/kendo-theme-core": "10.1.0-dev.5",
-    "@progress/kendo-theme-default": "10.1.0-dev.5",
-    "@progress/kendo-theme-utils": "10.1.0-dev.5"
+    "@progress/kendo-theme-core": "10.1.0",
+    "@progress/kendo-theme-default": "10.1.0",
+    "@progress/kendo-theme-utils": "10.1.0"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "eb34275876107de0d5b4c79eab212296aa0d5b88"
+  "gitHead": "b4794dd83d2266af0047608c0c03f9851121fd37"
 }

package/scss/button/_variables.scss

@@ -71,17 +71,17 @@ $kendo-button-lg-line-height: math.div( 20, 14 ) !default;
 
 /// The calculated height of the Button.
 /// @group button
-$kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + calc( #{$kendo-button-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
-$kendo-button-sm-calc-size: calc( #{$kendo-button-sm-line-height * 1em} + calc( #{$kendo-button-sm-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
-$kendo-button-md-calc-size: calc( #{$kendo-button-md-line-height * 1em} + calc( #{$kendo-button-md-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
-$kendo-button-lg-calc-size: calc( #{$kendo-button-lg-line-height * 1em} + calc( #{$kendo-button-lg-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
+$kendo-button-calc-size: calc( ( #{$kendo-button-line-height} * 1em ) + ( #{$kendo-button-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
+$kendo-button-sm-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
+$kendo-button-md-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
+$kendo-button-lg-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) ) !default;
 
 /// The calculated inner height of the Button excluding the border width.
 /// @group button
-$kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + calc( #{$kendo-button-padding-y} * 2 ) ) !default;
-$kendo-button-sm-inner-calc-size: calc( #{$kendo-button-sm-line-height * 1em} + calc( #{$kendo-button-sm-padding-y} * 2 ) ) !default;
-$kendo-button-md-inner-calc-size: calc( #{$kendo-button-md-line-height * 1em} + calc( #{$kendo-button-md-padding-y} * 2 ) ) !default;
-$kendo-button-lg-inner-calc-size: calc( #{$kendo-button-lg-line-height * 1em} + calc( #{$kendo-button-lg-padding-y} * 2 ) ) !default;
+$kendo-button-inner-calc-size: calc( ( #{$kendo-button-line-height} * 1em ) + ( #{$kendo-button-padding-y} * 2 ) ) !default;
+$kendo-button-sm-inner-calc-size: calc( ( #{$kendo-button-sm-line-height} * 1em ) + ( #{$kendo-button-sm-padding-y} * 2 ) ) !default;
+$kendo-button-md-inner-calc-size: calc( ( #{$kendo-button-md-line-height} * 1em ) + ( #{$kendo-button-md-padding-y} * 2 ) ) !default;
+$kendo-button-lg-inner-calc-size: calc( ( #{$kendo-button-lg-line-height} * 1em ) + ( #{$kendo-button-lg-padding-y} * 2 ) ) !default;
 
 /// The sizes map for the Button.
 /// @group button

package/scss/checkbox/_variables.scss

@@ -127,7 +127,7 @@ $kendo-checkbox-disabled-border: if($kendo-enable-color-system, k-color( base-em
 $kendo-checkbox-disabled-checked-bg: $kendo-checkbox-disabled-border !default;
 /// The text color of the disabled and checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-text: if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-checkbox-disabled-checked-bg )) !default;
+$kendo-checkbox-disabled-checked-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-disabled-checked-bg )) !default;
 /// The border color of the disabled and checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-disabled-checked-border: $kendo-checkbox-disabled-checked-bg !default;
@@ -162,10 +162,10 @@ $kendo-checkbox-indeterminate-glyph: "\e121" !default;
 
 /// The image for a checked CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/></svg>") ) !default;
+$kendo-checkbox-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='#ffffff' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/></svg>") ) !default;
 /// The image for a indeterminate CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-width='3' d='M4 10h12'/></svg>") ) !default;
+$kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#ffffff' stroke-width='3' d='M4 10h12'/></svg>") ) !default;
 
 
 // CheckBox label

package/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-sm-color-preview-width: 34px !default;
+/// The height of the small ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-sm-color-preview-height: 12px !default;
+/// The width of the medium ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-md-color-preview-width: $kendo-color-editor-color-preview-width !default;
+/// The height of the medium ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-md-color-preview-height: $kendo-color-editor-color-preview-height !default;
+/// The width of the large ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-lg-color-preview-width: 42px !default;
+/// The height of the large ColorEditor preview.
+/// @group color-editor
+$kendo-color-editor-lg-color-preview-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,
+        header-padding-x: $kendo-color-editor-sm-header-padding-x,
+        header-padding-y: $kendo-color-editor-sm-header-padding-y,
+        views-padding-x: $kendo-color-editor-sm-views-padding-x,
+        views-padding-y: $kendo-color-editor-sm-views-padding-y,
+        preview-gap: $kendo-color-editor-sm-preview-gap,
+        preview-width: $kendo-color-editor-sm-color-preview-width,
+        preview-height: $kendo-color-editor-sm-color-preview-height,
+
+    ),
+    md: (
+        min-width: $kendo-color-editor-md-min-width,
+        header-padding-x: $kendo-color-editor-md-header-padding-x,
+        header-padding-y: $kendo-color-editor-md-header-padding-y,
+        views-padding-x: $kendo-color-editor-md-views-padding-x,
+        views-padding-y: $kendo-color-editor-md-views-padding-y,
+        preview-gap: $kendo-color-editor-md-preview-gap,
+        preview-width: $kendo-color-editor-md-color-preview-width,
+        preview-height: $kendo-color-editor-md-color-preview-height,
+    ),
+    lg: (
+        min-width: $kendo-color-editor-lg-min-width,
+        header-padding-x: $kendo-color-editor-lg-header-padding-x,
+        header-padding-y: $kendo-color-editor-lg-header-padding-y,
+        views-padding-x: $kendo-color-editor-lg-views-padding-x,
+        views-padding-y: $kendo-color-editor-lg-views-padding-y,
+        preview-gap: $kendo-color-editor-lg-preview-gap,
+        preview-width: $kendo-color-editor-lg-color-preview-width,
+        preview-height: $kendo-color-editor-lg-color-preview-height,
+    )
+) !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-sm-color-preview-width: $kendo-color-editor-sm-color-preview-width,
+    $kendo-color-editor-sm-color-preview-height: $kendo-color-editor-sm-color-preview-height,
+    $kendo-color-editor-md-color-preview-width: $kendo-color-editor-md-color-preview-width,
+    $kendo-color-editor-md-color-preview-height: $kendo-color-editor-md-color-preview-height,
+    $kendo-color-editor-lg-color-preview-width: $kendo-color-editor-lg-color-preview-width,
+    $kendo-color-editor-lg-color-preview-height: $kendo-color-editor-lg-color-preview-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

package/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
 );