@progress/kendo-theme-fluent 10.1.1-dev.1 → 10.2.0-dev.0

package/dist/meta/variables.json

@@ -8324,27 +8324,27 @@
         "type": "String",
         "value": "var(--kendo-spacing-6, 1.5rem)"
     },
-    "kendo-color-palette-tile-sm-width": {
+    "kendo-color-palette-sm-tile-width": {
         "type": "String",
         "value": "var(--kendo-spacing-5\\.5, 1.375rem)"
     },
-    "kendo-color-palette-tile-sm-height": {
+    "kendo-color-palette-sm-tile-height": {
         "type": "String",
         "value": "var(--kendo-spacing-5\\.5, 1.375rem)"
     },
-    "kendo-color-palette-tile-md-width": {
+    "kendo-color-palette-md-tile-width": {
         "type": "String",
         "value": "var(--kendo-spacing-6, 1.5rem)"
     },
-    "kendo-color-palette-tile-md-height": {
+    "kendo-color-palette-md-tile-height": {
         "type": "String",
         "value": "var(--kendo-spacing-6, 1.5rem)"
     },
-    "kendo-color-palette-tile-lg-width": {
+    "kendo-color-palette-lg-tile-width": {
         "type": "String",
         "value": "var(--kendo-spacing-8, 2rem)"
     },
-    "kendo-color-palette-tile-lg-height": {
+    "kendo-color-palette-lg-tile-height": {
         "type": "String",
         "value": "var(--kendo-spacing-8, 2rem)"
     },
@@ -8450,9 +8450,33 @@
         "type": "String",
         "value": "var(--kendo-box-shadow-depth-2, none)"
     },
+    "kendo-color-gradient-sm-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4, 1rem)"
+    },
+    "kendo-color-gradient-sm-padding-x": {
+        "type": "Calculation",
+        "value": "calc(var(--kendo-spacing-4, 1rem) / 2)"
+    },
+    "kendo-color-gradient-md-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4, 1rem)"
+    },
+    "kendo-color-gradient-md-padding-x": {
+        "type": "Calculation",
+        "value": "calc(var(--kendo-spacing-4, 1rem) / 2)"
+    },
+    "kendo-color-gradient-lg-padding-y": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4, 1rem)"
+    },
+    "kendo-color-gradient-lg-padding-x": {
+        "type": "String",
+        "value": "var(--kendo-spacing-4, 1rem)"
+    },
     "kendo-color-gradient-sm-width": {
         "type": "Number",
-        "value": "226px"
+        "value": "236px"
     },
     "kendo-color-gradient-md-width": {
         "type": "Number",
@@ -8460,7 +8484,7 @@
     },
     "kendo-color-gradient-lg-width": {
         "type": "Number",
-        "value": "360px"
+        "value": "362px"
     },
     "kendo-color-gradient-sm-spacing": {
         "type": "String",
@@ -8636,7 +8660,7 @@
     },
     "kendo-color-gradient-sm-input-width": {
         "type": "Number",
-        "value": "43.5px"
+        "value": "43px"
     },
     "kendo-color-gradient-md-input-width": {
         "type": "Number",
@@ -8644,7 +8668,7 @@
     },
     "kendo-color-gradient-lg-input-width": {
         "type": "Number",
-        "value": "50.5px"
+        "value": "68px"
     },
     "kendo-color-gradient-contrast-ratio-font-weight": {
         "type": "String",
@@ -8656,15 +8680,17 @@
     },
     "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)))",
+        "value": "(sm: (width: 236px, vertical-slider-height: 164px, rectangle-height: 164px, input-width: 43px, spacing: var(--kendo-spacing-4, 1rem), canvas-spacing: var(--kendo-spacing-2, 0.5rem), padding-x: calc(var(--kendo-spacing-4, 1rem) / 2), padding-y: var(--kendo-spacing-4, 1rem)), 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), padding-x: calc(var(--kendo-spacing-4, 1rem) / 2), padding-y: var(--kendo-spacing-4, 1rem)), lg: (width: 362px, vertical-slider-height: 256px, rectangle-height: 256px, input-width: 68px, spacing: var(--kendo-spacing-4\\.5, 1.125rem), canvas-spacing: var(--kendo-spacing-4, 1rem), padding-x: var(--kendo-spacing-4, 1rem), padding-y: var(--kendo-spacing-4, 1rem)))",
         "prettyValue": {
             "sm": {
-                "width": "226px",
+                "width": "236px",
                 "vertical-slider-height": "164px",
                 "rectangle-height": "164px",
-                "input-width": "43.5px",
+                "input-width": "43px",
                 "spacing": "var(--kendo-spacing-4, 1rem)",
-                "canvas-spacing": "var(--kendo-spacing-2, 0.5rem)"
+                "canvas-spacing": "var(--kendo-spacing-2, 0.5rem)",
+                "padding-x": "calc(var(--kendo-spacing-4, 1rem) / 2)",
+                "padding-y": "var(--kendo-spacing-4, 1rem)"
             },
             "md": {
                 "width": "260px",
@@ -8672,15 +8698,19 @@
                 "rectangle-height": "180px",
                 "input-width": "48px",
                 "spacing": "var(--kendo-spacing-4, 1rem)",
-                "canvas-spacing": "var(--kendo-spacing-2, 0.5rem)"
+                "canvas-spacing": "var(--kendo-spacing-2, 0.5rem)",
+                "padding-x": "calc(var(--kendo-spacing-4, 1rem) / 2)",
+                "padding-y": "var(--kendo-spacing-4, 1rem)"
             },
             "lg": {
-                "width": "360px",
+                "width": "362px",
                 "vertical-slider-height": "256px",
                 "rectangle-height": "256px",
-                "input-width": "50.5px",
+                "input-width": "68px",
                 "spacing": "var(--kendo-spacing-4\\.5, 1.125rem)",
-                "canvas-spacing": "var(--kendo-spacing-4, 1rem)"
+                "canvas-spacing": "var(--kendo-spacing-4, 1rem)",
+                "padding-x": "var(--kendo-spacing-4, 1rem)",
+                "padding-y": "var(--kendo-spacing-4, 1rem)"
             }
         }
     },
@@ -8702,7 +8732,7 @@
     },
     "kendo-color-editor-lg-min-width": {
         "type": "Number",
-        "value": "360px"
+        "value": "362px"
     },
     "kendo-color-editor-border-width": {
         "type": "Number",
@@ -8902,7 +8932,7 @@
     },
     "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))",
+        "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: 362px, 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",
@@ -8925,7 +8955,7 @@
                 "preview-height": "14px"
             },
             "lg": {
-                "min-width": "360px",
+                "min-width": "362px",
                 "header-padding-x": "var(--kendo-spacing-4, 1rem)",
                 "header-padding-y": "var(--kendo-spacing-4, 1rem)",
                 "views-padding-x": "var(--kendo-spacing-4, 1rem)",

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "10.1.1-dev.1",
+    "version": "10.2.0-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.1-dev.1",
+    "version": "10.2.0-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.1-dev.1",
+    "version": "10.2.0-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.1-dev.1",
+  "version": "10.2.0-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.1-dev.1",
-    "@progress/kendo-theme-utils": "10.1.1-dev.1"
+    "@progress/kendo-theme-core": "10.2.0-dev.0",
+    "@progress/kendo-theme-utils": "10.2.0-dev.0"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "25b2dddd209d358645e4cb0c2e5dfbad40927aec"
+  "gitHead": "8131b2e63fdb04068216ad13c1d1dfa74ed6cd97"
 }

package/scss/coloreditor/_layout.scss

@@ -112,24 +112,6 @@
             .k-colorpalette {
                 align-self: center;
             }
-
-            .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;
-                }
-            }
         }
 
         // Footer

package/scss/coloreditor/_variables.scss

@@ -17,7 +17,7 @@ $kendo-color-editor-sm-min-width: 236px !default;
 $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;
+$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;

package/scss/colorgradient/_layout.scss

@@ -138,10 +138,14 @@
         $_rectangle-height: map.get( $size-props, rectangle-height );
         $_input-width: map.get( $size-props, input-width );
         $_canvas-spacing: map.get( $size-props, canvas-spacing );
+        $_padding-x: map.get( $size-props, padding-x );
+        $_padding-y: map.get( $size-props, padding-y );
 
         .k-colorgradient-#{$size} {
             width: $_width;
             gap: $_spacing;
+            padding-block: $_padding-y;
+            padding-inline: $_padding-x;
 
             .k-colorgradient-inputs {
                 .k-numerictextbox {

package/scss/colorgradient/_variables.scss

@@ -47,15 +47,34 @@ $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 vertical padding of the small ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sm-padding-y: $kendo-color-gradient-padding-y !default;
+/// The horizontal padding of the small ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-sm-padding-x: $kendo-color-gradient-padding-x !default;
+/// The vertical padding of the medium ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-md-padding-y: $kendo-color-gradient-padding-y !default;
+/// The horizontal padding of the medium ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-md-padding-x: $kendo-color-gradient-padding-x !default;
+/// The vertical padding of the large ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-lg-padding-y: k-spacing(4) !default;
+/// The horizontal padding of the large ColorGradient.
+/// @group color-gradient
+$kendo-color-gradient-lg-padding-x: k-spacing(4) !default;
+
 /// The width of the small ColorGradient.
 /// @group color-gradient
-$kendo-color-gradient-sm-width: 226px !default;
+$kendo-color-gradient-sm-width: 236px !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;
+$kendo-color-gradient-lg-width: 362px !default;
 
 /// The spacing between the sections of the small ColorGradient.
 /// @group color-gradient
@@ -198,13 +217,13 @@ $kendo-color-gradient-input-label-text: var( --kendo-subtle-text, inherit ) !def
 
 /// The width of the small ColorGradient input.
 /// @group color-gradient
-$kendo-color-gradient-sm-input-width: 43.5px !default;
+$kendo-color-gradient-sm-input-width: 43px !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;
+$kendo-color-gradient-lg-input-width: 68px !default;
 
 /// The font weight of the ColorGradient contrast ratio text.
 /// @group color-gradient
@@ -222,7 +241,9 @@ $kendo-color-gradient-sizes: (
         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
+        canvas-spacing: $kendo-color-gradient-sm-canvas-spacing,
+        padding-x: $kendo-color-gradient-sm-padding-x,
+        padding-y: $kendo-color-gradient-sm-padding-y
     ),
     md: (
         width: $kendo-color-gradient-md-width,
@@ -230,7 +251,9 @@ $kendo-color-gradient-sizes: (
         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
+        canvas-spacing: $kendo-color-gradient-md-canvas-spacing,
+        padding-x: $kendo-color-gradient-md-padding-x,
+        padding-y: $kendo-color-gradient-md-padding-y
     ),
     lg: (
         width: $kendo-color-gradient-lg-width,
@@ -238,6 +261,8 @@ $kendo-color-gradient-sizes: (
         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
+        canvas-spacing: $kendo-color-gradient-lg-canvas-spacing,
+        padding-x: $kendo-color-gradient-lg-padding-x,
+        padding-y: $kendo-color-gradient-lg-padding-y
     )
 ) !default;

package/scss/colorpalette/_layout.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
 
@@ -60,4 +61,17 @@
         }
     }
 
+    // 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-#{$size} {
+            .k-colorpalette-tile {
+                width: $_tile-width;
+                height: $_tile-height;
+            }
+        }
+    }
+
 }

package/scss/colorpalette/_variables.scss

@@ -28,22 +28,22 @@ $kendo-color-palette-tile-width: k-spacing(6) !default;
 $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;
+$kendo-color-palette-sm-tile-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;
+$kendo-color-palette-sm-tile-height: $kendo-color-palette-sm-tile-width !default;
 /// The width of the medium ColorPalette tile.
 /// @group color-palette
-$kendo-color-palette-tile-md-width: $kendo-color-palette-tile-width !default;
+$kendo-color-palette-md-tile-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;
+$kendo-color-palette-md-tile-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;
+$kendo-color-palette-lg-tile-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;
+$kendo-color-palette-lg-tile-height: $kendo-color-palette-lg-tile-width !default;
 
 /// The outline color of the ColorPalette focused tile.
 /// @group color-palette
@@ -71,15 +71,15 @@ $kendo-color-palette-tile-selected-hover-outline: $kendo-color-palette-tile-focu
 /// @group color-palette
 $kendo-color-palette-sizes: (
     sm: (
-        width: $kendo-color-palette-tile-sm-width,
-        height: $kendo-color-palette-tile-sm-height
+        width: $kendo-color-palette-sm-tile-width,
+        height: $kendo-color-palette-sm-tile-height
     ),
     md: (
-        width: $kendo-color-palette-tile-md-width,
-        height: $kendo-color-palette-tile-md-height
+        width: $kendo-color-palette-md-tile-width,
+        height: $kendo-color-palette-md-tile-height
     ),
     lg: (
-        width: $kendo-color-palette-tile-lg-width,
-        height: $kendo-color-palette-tile-lg-height
+        width: $kendo-color-palette-lg-tile-width,
+        height: $kendo-color-palette-lg-tile-height
     )
 ) !default;

package/scss/tabstrip/_layout.scss

@@ -271,6 +271,10 @@
 
             .k-item {
                 margin-block-end: calc( var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} ) * -1 );
+
+                .k-link {
+                    justify-content: center;
+                }
             }
 
         }
@@ -282,8 +286,11 @@
 
             .k-item {
                 margin-block-start: calc( var( --kendo-tabstrip-border-width, #{$kendo-tabstrip-border-width} ) * -1 );
-            }
 
+                .k-link {
+                    justify-content: center;
+                }
+            }
         }
     }
     .k-tabstrip-left {
@@ -338,7 +345,6 @@
         flex: 1 0 0;
     }
 
-
     // Selected indicator
     @if ($kendo-tabstrip-indicator-size) {
 

package/scss/toolbar/_layout.scss

@@ -43,30 +43,30 @@
             flex-wrap: nowrap;
             position: relative;
             margin-inline-start: calc( var( --INTERNAL--kendo-toolbar-spacing, 0 ) * -1 );
+        }
+
+        &.k-toolbar-scrollable-overlay {
+
+            &::before,
+            &::after {
+                content: '';
+                height: 100%;
+                aspect-ratio: 1;
+                position: absolute;
+                z-index: 3;
+            }
+
+            &::before {
+                inset-inline-start: var( --INTERNAL--kendo-toolbar-spacing, 0 );
+            }
+
+            &::after {
+                inset-inline-end: 0;
+            }
 
-            &.k-toolbar-scrollable-overlay {
-                &::before {
-                    content: '';
-                    height: 100%;
-                    aspect-ratio: 1;
-                    position: absolute;
-                    inset-inline-start: 0;
-                    z-index: 3;
-                }
-
-                &::after {
-                    content: '';
-                    height: 100%;
-                    aspect-ratio: 1;
-                    position: absolute;
-                    inset-inline-end: 0;
-                    z-index: 3;
-                }
-
-                &.k-toolbar-scrollable-start::before,
-                &.k-toolbar-scrollable-end::after {
-                    display: none;
-                }
+            &.k-toolbar-scrollable-start::before,
+            &.k-toolbar-scrollable-end::after {
+                display: none;
             }
         }