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

package/lib/swatches/all.json

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

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

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

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "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-fluent",
   "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
-  "version": "10.1.0-dev.5",
+  "version": "10.1.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -54,12 +54,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.0.0",
-    "@progress/kendo-theme-core": "10.1.0-dev.5",
-    "@progress/kendo-theme-utils": "10.1.0-dev.5"
+    "@progress/kendo-theme-core": "10.1.0",
+    "@progress/kendo-theme-utils": "10.1.0"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "eb34275876107de0d5b4c79eab212296aa0d5b88"
+  "gitHead": "b4794dd83d2266af0047608c0c03f9851121fd37"
 }

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

package/scss/checkbox/_layout.scss

@@ -23,10 +23,6 @@
         position: relative;
         cursor: pointer;
         -webkit-appearance: none;
-
-        @if $kendo-checkbox-indicator-type == "image" {
-            background-size: var( --INTERNAL--kendo-checkbox-indicator-size, 100% );
-        }
     }
 
 
@@ -59,6 +55,16 @@
             top: 50%;
             left: 50%;
         }
+
+        @if $kendo-checkbox-indicator-type == "image" {
+            content: "";
+            display: block;
+            width: 100%;
+            height: 100%;
+            mask-size: var( --INTERNAL--kendo-checkbox-indicator-size, 100% );
+            mask-position: center;
+            mask-repeat: no-repeat;
+        }
     }
 
 
@@ -66,7 +72,10 @@
     .k-checkbox:hover,
     .k-checkbox.k-hover {
         @if $kendo-checkbox-indicator-type == "image" {
-            background-image: var( --kendo-checkbox-hover-image, #{ $kendo-checkbox-hover-image } );
+            &::before {
+                background-color: currentColor;
+                mask-image: var( --kendo-checkbox-hover-image, #{ $kendo-checkbox-hover-image } );
+            }
         }
 
         @if $kendo-checkbox-indicator-type == "pseudo" {
@@ -94,7 +103,10 @@
     .k-checkbox:checked,
     .k-checkbox.k-checked {
         @if $kendo-checkbox-indicator-type == "image" {
-            background-image: var( --kendo-checkbox-checked-image, #{ $kendo-checkbox-checked-image } );
+            &::before {
+                background-color: currentColor;
+                mask-image: var( --kendo-checkbox-checked-image, #{ $kendo-checkbox-checked-image } );
+            }
         }
 
         @if $kendo-checkbox-indicator-type == "pseudo" {
@@ -115,8 +127,11 @@
     .k-checkbox:indeterminate,
     .k-checkbox.k-indeterminate {
         @if $kendo-checkbox-indicator-type == "image" {
-            background-image: var( --kendo-checkbox-indeterminate-image, #{ $kendo-checkbox-indeterminate-image } );
-            background-size: var( --INTERNAL--kendo-checkbox-indeterminate-size, 100% );
+            &::before {
+                background-color: currentColor;
+                mask-image: var( --kendo-checkbox-indeterminate-image, #{ $kendo-checkbox-indeterminate-image } );
+                mask-size: var( --INTERNAL--kendo-checkbox-indeterminate-size, 100% );
+            }
         }
 
         @if $kendo-checkbox-indicator-type == "pseudo" {
@@ -136,7 +151,11 @@
     .k-checkbox:indeterminate:hover,
     .k-checkbox.k-indeterminate.k-hover {
         @if $kendo-checkbox-indicator-type == "image" {
-            background-image: var( --kendo-checkbox-hover-indeterminate-image, #{ $kendo-checkbox-hover-indeterminate-image } );
+            &::before {
+                background-color: currentColor;
+                mask-image: var( --kendo-checkbox-hover-indeterminate-image, #{ $kendo-checkbox-hover-indeterminate-image } );
+            }
+
         }
     }
 
@@ -145,13 +164,19 @@
     .k-checkbox:checked:disabled,
     .k-checkbox.k-checked.k-disabled {
         @if $kendo-checkbox-indicator-type == "image" {
-            background-image: var( --kendo-checkbox-disabled-checked-image, #{ $kendo-checkbox-disabled-checked-image } );
+            &::before {
+                background-color: currentColor;
+                mask-image: var( --kendo-checkbox-disabled-checked-image, #{ $kendo-checkbox-disabled-checked-image } );
+            }
         }
     }
     .k-checkbox:indeterminate:disabled,
     .k-checkbox.k-indeterminate.k-disabled {
         @if $kendo-checkbox-indicator-type == "image" {
-            background-image: var( --kendo-checkbox-disabled-indeterminate-image, #{ $kendo-checkbox-disabled-indeterminate-image } );
+            &::before {
+                background-color: currentColor;
+                mask-image: var( --kendo-checkbox-disabled-indeterminate-image, #{ $kendo-checkbox-disabled-indeterminate-image } );
+            }
         }
     }
 

package/scss/checkbox/_variables.scss

@@ -168,25 +168,25 @@ $kendo-checkbox-indeterminate-glyph: "\e121" !default;
 
 /// The image of the hovered CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-hover-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-hover-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+$kendo-checkbox-hover-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#323130' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
 /// The image of the 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 16 16'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></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 16 16'><path fill='none' stroke='#ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
 /// The image of the 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 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#{$kendo-checkbox-indeterminate-text}'/></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 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#0078d4'/></svg>") ) !default;
 /// The image of the hovered and checked CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-hover-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-hover-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+$kendo-checkbox-hover-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
 /// The image of the hovered and indeterminate CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-hover-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#{$kendo-checkbox-hover-indeterminate-text}'/></svg>") ) !default;
+$kendo-checkbox-hover-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#106ebe'/></svg>") ) !default;
 /// The image of the checked CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-disabled-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-disabled-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+$kendo-checkbox-disabled-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
 /// The image of the indeterminate CheckBox indicator.
 /// @group checkbox
-$kendo-checkbox-disabled-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#{$kendo-checkbox-disabled-indeterminate-text}'/></svg>") ) !default;
+$kendo-checkbox-disabled-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='3' width='10' height='10' rx='2' fill='#323130'/></svg>") ) !default;
 
 
 // Checkbox label

package/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 *;
@@ -51,11 +52,48 @@
             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 );
+            $_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 );
+            $_preview-width: map.get( $size-props, preview-width );
+            $_preview-height: map.get( $size-props, preview-height );
+
+            .k-coloreditor-#{$size} {
+                min-width: $_min-width;
+
+                .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;
+                }
+
+                .k-coloreditor-preview {
+                    gap: $_preview-spacing;
+
+                    .k-color-preview {
+                        width: $_preview-width;
+                        height: $_preview-height;
+                    }
+                }
+            }
+
+        }
+
         // Views
         .k-coloreditor-views {
             min-width: calc( var( --kendo-color-preview-width, #{$kendo-color-palette-tile-width}) * var( --kendo-color-preview-columns, 10) );
@@ -81,6 +119,19 @@
             }
         }
 
+        // 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;
+                }
+            }
+        }
+
         // Footer
         .k-coloreditor-footer.k-actions {
             padding-block: var( --kendo-color-editor-footer-padding-y, #{$kendo-color-editor-footer-padding-y} );

package/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-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: 34px !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
 $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(2) !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,
+        header-padding-x: $kendo-color-editor-sm-header-padding-x,
+        header-padding-y: $kendo-color-editor-sm-header-padding-y,
+        views-padding-x: $kendo-color-editor-sm-views-padding-x,
+        views-padding-y: $kendo-color-editor-sm-views-padding-y,
+        preview-spacing: $kendo-color-editor-sm-preview-spacing,
+        preview-width: $kendo-color-editor-sm-color-preview-width,
+        preview-height: $kendo-color-editor-sm-color-preview-height,
+
+    ),
+    md: (
+        min-width: $kendo-color-editor-md-min-width,
+        header-padding-x: $kendo-color-editor-md-header-padding-x,
+        header-padding-y: $kendo-color-editor-md-header-padding-y,
+        views-padding-x: $kendo-color-editor-md-views-padding-x,
+        views-padding-y: $kendo-color-editor-md-views-padding-y,
+        preview-spacing: $kendo-color-editor-md-preview-spacing,
+        preview-width: $kendo-color-editor-md-color-preview-width,
+        preview-height: $kendo-color-editor-md-color-preview-height,
+    ),
+    lg: (
+        min-width: $kendo-color-editor-lg-min-width,
+        header-padding-x: $kendo-color-editor-lg-header-padding-x,
+        header-padding-y: $kendo-color-editor-lg-header-padding-y,
+        views-padding-x: $kendo-color-editor-lg-views-padding-x,
+        views-padding-y: $kendo-color-editor-lg-views-padding-y,
+        preview-spacing: $kendo-color-editor-lg-preview-spacing,
+        preview-width: $kendo-color-editor-lg-color-preview-width,
+        preview-height: $kendo-color-editor-lg-color-preview-height,
+    )
+) !default;

package/scss/colorgradient/_layout.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 
@@ -129,6 +130,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} );

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