@progress/kendo-theme-fluent 10.1.0-dev.6 → 10.1.1-dev.0

package/dist/meta/variables.json

@@ -8324,6 +8324,30 @@
         "type": "String",
         "value": "var(--kendo-spacing-6, 1.5rem)"
     },
+    "kendo-color-palette-tile-sm-width": {
+        "type": "String",
+        "value": "var(--kendo-spacing-5\\.5, 1.375rem)"
+    },
+    "kendo-color-palette-tile-sm-height": {
+        "type": "String",
+        "value": "var(--kendo-spacing-5\\.5, 1.375rem)"
+    },
+    "kendo-color-palette-tile-md-width": {
+        "type": "String",
+        "value": "var(--kendo-spacing-6, 1.5rem)"
+    },
+    "kendo-color-palette-tile-md-height": {
+        "type": "String",
+        "value": "var(--kendo-spacing-6, 1.5rem)"
+    },
+    "kendo-color-palette-tile-lg-width": {
+        "type": "String",
+        "value": "var(--kendo-spacing-8, 2rem)"
+    },
+    "kendo-color-palette-tile-lg-height": {
+        "type": "String",
+        "value": "var(--kendo-spacing-8, 2rem)"
+    },
     "kendo-color-palette-tile-focus-outline": {
         "type": "String",
         "value": "var(--kendo-color-base-emphasis, #605e5c)"
@@ -8352,6 +8376,24 @@
         "type": "String",
         "value": "var(--kendo-color-base-emphasis, #605e5c)"
     },
+    "kendo-color-palette-sizes": {
+        "type": "Map",
+        "value": "(sm: (width: var(--kendo-spacing-5\\.5, 1.375rem), height: var(--kendo-spacing-5\\.5, 1.375rem)), md: (width: var(--kendo-spacing-6, 1.5rem), height: var(--kendo-spacing-6, 1.5rem)), lg: (width: var(--kendo-spacing-8, 2rem), height: var(--kendo-spacing-8, 2rem)))",
+        "prettyValue": {
+            "sm": {
+                "width": "var(--kendo-spacing-5\\.5, 1.375rem)",
+                "height": "var(--kendo-spacing-5\\.5, 1.375rem)"
+            },
+            "md": {
+                "width": "var(--kendo-spacing-6, 1.5rem)",
+                "height": "var(--kendo-spacing-6, 1.5rem)"
+            },
+            "lg": {
+                "width": "var(--kendo-spacing-8, 2rem)",
+                "height": "var(--kendo-spacing-8, 2rem)"
+            }
+        }
+    },
     "kendo-color-gradient-spacer": {
         "type": "String",
         "value": "var(--kendo-spacing-4, 1rem)"
@@ -8408,6 +8450,30 @@
         "type": "String",
         "value": "var(--kendo-box-shadow-depth-2, none)"
     },
+    "kendo-color-gradient-sm-width": {
+        "type": "Number",
+        "value": "226px"
+    },
+    "kendo-color-gradient-md-width": {
+        "type": "Number",
+        "value": "260px"
+    },
+    "kendo-color-gradient-lg-width": {
+        "type": "Number",
+        "value": "360px"
+    },
+    "kendo-color-gradient-sm-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4, 1rem)"
+    },
+    "kendo-color-gradient-md-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4, 1rem)"
+    },
+    "kendo-color-gradient-lg-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4\\.5, 1.125rem)"
+    },
     "kendo-color-gradient-focus-border": {
         "type": "String",
         "value": "color-mix(in srgb, var(--kendo-color-border, #8a8886) 10%, transparent)"
@@ -8425,13 +8491,37 @@
         "value": "var(--kendo-border-radius-md, 0.25rem)"
     },
     "kendo-color-gradient-canvas-spacing": {
-        "type": "Calculation",
-        "value": "calc(var(--kendo-spacing-4, 1rem) / 2)"
+        "type": "String",
+        "value": "var(--kendo-spacing-2, 0.5rem)"
     },
     "kendo-color-gradient-canvas-rectangle-height": {
         "type": "Number",
         "value": "180px"
     },
+    "kendo-color-gradient-sm-canvas-rectangle-height": {
+        "type": "Number",
+        "value": "164px"
+    },
+    "kendo-color-gradient-md-canvas-rectangle-height": {
+        "type": "Number",
+        "value": "180px"
+    },
+    "kendo-color-gradient-lg-canvas-rectangle-height": {
+        "type": "Number",
+        "value": "256px"
+    },
+    "kendo-color-gradient-sm-canvas-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2, 0.5rem)"
+    },
+    "kendo-color-gradient-md-canvas-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2, 0.5rem)"
+    },
+    "kendo-color-gradient-lg-canvas-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4, 1rem)"
+    },
     "kendo-color-gradient-canvas-rectangle-border": {
         "type": "String",
         "value": "color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent)"
@@ -8468,6 +8558,18 @@
         "type": "String",
         "value": "\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC\""
     },
+    "kendo-color-gradient-sm-slider-vertical-size": {
+        "type": "Number",
+        "value": "164px"
+    },
+    "kendo-color-gradient-md-slider-vertical-size": {
+        "type": "Number",
+        "value": "180px"
+    },
+    "kendo-color-gradient-lg-slider-vertical-size": {
+        "type": "Number",
+        "value": "256px"
+    },
     "kendo-color-gradient-draghandle-width": {
         "type": "Number",
         "value": "20px"
@@ -8532,6 +8634,18 @@
         "type": "String",
         "value": "var(--kendo-subtle-text, inherit)"
     },
+    "kendo-color-gradient-sm-input-width": {
+        "type": "Number",
+        "value": "43.5px"
+    },
+    "kendo-color-gradient-md-input-width": {
+        "type": "Number",
+        "value": "48px"
+    },
+    "kendo-color-gradient-lg-input-width": {
+        "type": "Number",
+        "value": "50.5px"
+    },
     "kendo-color-gradient-contrast-ratio-font-weight": {
         "type": "String",
         "value": "var(--kendo-font-weight-bold, normal)"
@@ -8540,6 +8654,36 @@
         "type": "Calculation",
         "value": "calc(var(--kendo-spacing-4, 1rem) / 1.5)"
     },
+    "kendo-color-gradient-sizes": {
+        "type": "Map",
+        "value": "(sm: (width: 226px, vertical-slider-height: 164px, rectangle-height: 164px, input-width: 43.5px, spacing: var(--kendo-spacing-4, 1rem), canvas-spacing: var(--kendo-spacing-2, 0.5rem)), md: (width: 260px, vertical-slider-height: 180px, rectangle-height: 180px, input-width: 48px, spacing: var(--kendo-spacing-4, 1rem), canvas-spacing: var(--kendo-spacing-2, 0.5rem)), lg: (width: 360px, vertical-slider-height: 256px, rectangle-height: 256px, input-width: 50.5px, spacing: var(--kendo-spacing-4\\.5, 1.125rem), canvas-spacing: var(--kendo-spacing-4, 1rem)))",
+        "prettyValue": {
+            "sm": {
+                "width": "226px",
+                "vertical-slider-height": "164px",
+                "rectangle-height": "164px",
+                "input-width": "43.5px",
+                "spacing": "var(--kendo-spacing-4, 1rem)",
+                "canvas-spacing": "var(--kendo-spacing-2, 0.5rem)"
+            },
+            "md": {
+                "width": "260px",
+                "vertical-slider-height": "180px",
+                "rectangle-height": "180px",
+                "input-width": "48px",
+                "spacing": "var(--kendo-spacing-4, 1rem)",
+                "canvas-spacing": "var(--kendo-spacing-2, 0.5rem)"
+            },
+            "lg": {
+                "width": "360px",
+                "vertical-slider-height": "256px",
+                "rectangle-height": "256px",
+                "input-width": "50.5px",
+                "spacing": "var(--kendo-spacing-4\\.5, 1.125rem)",
+                "canvas-spacing": "var(--kendo-spacing-4, 1rem)"
+            }
+        }
+    },
     "kendo-color-editor-spacer": {
         "type": "String",
         "value": "var(--kendo-spacing-2, 0.5rem)"
@@ -8548,6 +8692,18 @@
         "type": "Number",
         "value": "260px"
     },
+    "kendo-color-editor-sm-min-width": {
+        "type": "Number",
+        "value": "236px"
+    },
+    "kendo-color-editor-md-min-width": {
+        "type": "Number",
+        "value": "260px"
+    },
+    "kendo-color-editor-lg-min-width": {
+        "type": "Number",
+        "value": "360px"
+    },
     "kendo-color-editor-border-width": {
         "type": "Number",
         "value": "1px"
@@ -8604,6 +8760,30 @@
         "type": "Calculation",
         "value": "calc(var(--kendo-spacing-2, 0.5rem) / 2)"
     },
+    "kendo-color-editor-sm-header-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2, 0.5rem)"
+    },
+    "kendo-color-editor-sm-header-padding-x": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2, 0.5rem)"
+    },
+    "kendo-color-editor-md-header-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2, 0.5rem)"
+    },
+    "kendo-color-editor-md-header-padding-x": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2, 0.5rem)"
+    },
+    "kendo-color-editor-lg-header-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4, 1rem)"
+    },
+    "kendo-color-editor-lg-header-padding-x": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4, 1rem)"
+    },
     "kendo-color-editor-color-preview-width": {
         "type": "Number",
         "value": "34px"
@@ -8616,6 +8796,42 @@
         "type": "String",
         "value": "var(--kendo-spacing-1, 0.25rem)"
     },
+    "kendo-color-editor-sm-preview-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-1, 0.25rem)"
+    },
+    "kendo-color-editor-md-preview-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-1, 0.25rem)"
+    },
+    "kendo-color-editor-lg-preview-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-1, 0.25rem)"
+    },
+    "kendo-color-editor-sm-color-preview-width": {
+        "type": "Number",
+        "value": "34px"
+    },
+    "kendo-color-editor-sm-color-preview-height": {
+        "type": "Number",
+        "value": "12px"
+    },
+    "kendo-color-editor-md-color-preview-width": {
+        "type": "Number",
+        "value": "34px"
+    },
+    "kendo-color-editor-md-color-preview-height": {
+        "type": "Number",
+        "value": "14px"
+    },
+    "kendo-color-editor-lg-color-preview-width": {
+        "type": "Number",
+        "value": "34px"
+    },
+    "kendo-color-editor-lg-color-preview-height": {
+        "type": "Number",
+        "value": "16px"
+    },
     "kendo-color-editor-views-padding-y": {
         "type": "String",
         "value": "var(--kendo-spacing-2, 0.5rem)"
@@ -8628,6 +8844,42 @@
         "type": "String",
         "value": "var(--kendo-spacing-2, 0.5rem)"
     },
+    "kendo-color-editor-sm-views-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2, 0.5rem)"
+    },
+    "kendo-color-editor-sm-views-padding-x": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2, 0.5rem)"
+    },
+    "kendo-color-editor-sm-views-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4, 1rem)"
+    },
+    "kendo-color-editor-md-views-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2, 0.5rem)"
+    },
+    "kendo-color-editor-md-views-padding-x": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2, 0.5rem)"
+    },
+    "kendo-color-editor-md-views-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-2, 0.5rem)"
+    },
+    "kendo-color-editor-lg-views-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4, 1rem)"
+    },
+    "kendo-color-editor-lg-views-padding-x": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4, 1rem)"
+    },
+    "kendo-color-editor-lg-views-spacing": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4\\.5, 1.125rem)"
+    },
     "kendo-color-editor-footer-padding-y": {
         "type": "String",
         "value": "var(--kendo-spacing-2, 0.5rem)"
@@ -8648,6 +8900,42 @@
         "type": "Number",
         "value": "2px"
     },
+    "kendo-color-editor-sizes": {
+        "type": "Map",
+        "value": "(sm: (min-width: 236px, header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-2, 0.5rem), views-padding-x: var(--kendo-spacing-2, 0.5rem), views-padding-y: var(--kendo-spacing-2, 0.5rem), preview-spacing: var(--kendo-spacing-1, 0.25rem), preview-width: 34px, preview-height: 12px), md: (min-width: 260px, header-padding-x: var(--kendo-spacing-2, 0.5rem), header-padding-y: var(--kendo-spacing-2, 0.5rem), views-padding-x: var(--kendo-spacing-2, 0.5rem), views-padding-y: var(--kendo-spacing-2, 0.5rem), preview-spacing: var(--kendo-spacing-1, 0.25rem), preview-width: 34px, preview-height: 14px), lg: (min-width: 360px, header-padding-x: var(--kendo-spacing-4, 1rem), header-padding-y: var(--kendo-spacing-4, 1rem), views-padding-x: var(--kendo-spacing-4, 1rem), views-padding-y: var(--kendo-spacing-4, 1rem), preview-spacing: var(--kendo-spacing-1, 0.25rem), preview-width: 34px, preview-height: 16px))",
+        "prettyValue": {
+            "sm": {
+                "min-width": "236px",
+                "header-padding-x": "var(--kendo-spacing-2, 0.5rem)",
+                "header-padding-y": "var(--kendo-spacing-2, 0.5rem)",
+                "views-padding-x": "var(--kendo-spacing-2, 0.5rem)",
+                "views-padding-y": "var(--kendo-spacing-2, 0.5rem)",
+                "preview-spacing": "var(--kendo-spacing-1, 0.25rem)",
+                "preview-width": "34px",
+                "preview-height": "12px"
+            },
+            "md": {
+                "min-width": "260px",
+                "header-padding-x": "var(--kendo-spacing-2, 0.5rem)",
+                "header-padding-y": "var(--kendo-spacing-2, 0.5rem)",
+                "views-padding-x": "var(--kendo-spacing-2, 0.5rem)",
+                "views-padding-y": "var(--kendo-spacing-2, 0.5rem)",
+                "preview-spacing": "var(--kendo-spacing-1, 0.25rem)",
+                "preview-width": "34px",
+                "preview-height": "14px"
+            },
+            "lg": {
+                "min-width": "360px",
+                "header-padding-x": "var(--kendo-spacing-4, 1rem)",
+                "header-padding-y": "var(--kendo-spacing-4, 1rem)",
+                "views-padding-x": "var(--kendo-spacing-4, 1rem)",
+                "views-padding-y": "var(--kendo-spacing-4, 1rem)",
+                "preview-spacing": "var(--kendo-spacing-1, 0.25rem)",
+                "preview-width": "34px",
+                "preview-height": "16px"
+            }
+        }
+    },
     "kendo-datetime-width": {
         "type": "Calculation",
         "value": "calc(224px + var(--kendo-spacing-3, 0.75rem) * 2)"

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "10.1.0-dev.6",
+    "version": "10.1.1-dev.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.6",
+    "version": "10.1.1-dev.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.6",
+    "version": "10.1.1-dev.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.6",
+  "version": "10.1.1-dev.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.6",
-    "@progress/kendo-theme-utils": "10.1.0-dev.6"
+    "@progress/kendo-theme-core": "10.1.1-dev.0",
+    "@progress/kendo-theme-utils": "10.1.1-dev.0"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "202e78d7f12ef7ae4a2f25de43f1216470d378f2"
+  "gitHead": "462767332d935e8ff5cc24a210024d62f95c5e69"
 }

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