@progress/kendo-theme-fluent 11.0.1-dev.0 → 11.0.2

package/dist/meta/variables.json

@@ -8137,7 +8137,19 @@
     },
     "kendo-color-gradient-canvas-rectangle-height": {
         "type": "Number",
-        "value": "100%"
+        "value": "184px"
+    },
+    "kendo-color-gradient-sm-canvas-rectangle-height": {
+        "type": "Number",
+        "value": "160px"
+    },
+    "kendo-color-gradient-md-canvas-rectangle-height": {
+        "type": "Number",
+        "value": "184px"
+    },
+    "kendo-color-gradient-lg-canvas-rectangle-height": {
+        "type": "Number",
+        "value": "254px"
     },
     "kendo-color-gradient-sm-canvas-spacing": {
         "type": "String",
@@ -8177,7 +8189,7 @@
     },
     "kendo-color-gradient-slider-vertical-size": {
         "type": "Number",
-        "value": "100%"
+        "value": "184px"
     },
     "kendo-color-gradient-slider-horizontal-size": {
         "type": "Number",
@@ -8187,6 +8199,18 @@
         "type": "String",
         "value": "\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC\""
     },
+    "kendo-color-gradient-sm-slider-vertical-size": {
+        "type": "Number",
+        "value": "160px"
+    },
+    "kendo-color-gradient-md-slider-vertical-size": {
+        "type": "Number",
+        "value": "184px"
+    },
+    "kendo-color-gradient-lg-slider-vertical-size": {
+        "type": "Number",
+        "value": "254px"
+    },
     "kendo-color-gradient-draghandle-width": {
         "type": "Number",
         "value": "20px"
@@ -8273,10 +8297,12 @@
     },
     "kendo-color-gradient-sizes": {
         "type": "Map",
-        "value": "(sm: (width: 236px, 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, 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, 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)))",
+        "value": "(sm: (width: 236px, vertical-slider-height: 160px, rectangle-height: 160px, 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: 184px, rectangle-height: 184px, 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: 254px, rectangle-height: 254px, 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": "236px",
+                "vertical-slider-height": "160px",
+                "rectangle-height": "160px",
                 "input-width": "43px",
                 "spacing": "var(--kendo-spacing-4, 1rem)",
                 "canvas-spacing": "var(--kendo-spacing-2, 0.5rem)",
@@ -8285,6 +8311,8 @@
             },
             "md": {
                 "width": "260px",
+                "vertical-slider-height": "184px",
+                "rectangle-height": "184px",
                 "input-width": "48px",
                 "spacing": "var(--kendo-spacing-4, 1rem)",
                 "canvas-spacing": "var(--kendo-spacing-2, 0.5rem)",
@@ -8293,6 +8321,8 @@
             },
             "lg": {
                 "width": "362px",
+                "vertical-slider-height": "254px",
+                "rectangle-height": "254px",
                 "input-width": "68px",
                 "spacing": "var(--kendo-spacing-4\\.5, 1.125rem)",
                 "canvas-spacing": "var(--kendo-spacing-4, 1rem)",
@@ -17512,6 +17542,14 @@
         "type": "String",
         "value": "var(--kendo-spacing-25, 7rem)"
     },
+    "kendo-gauge-pointer-bg": {
+        "type": "String",
+        "value": "var(--kendo-color-series-f, #00cc6a)"
+    },
+    "kendo-gauge-track-bg": {
+        "type": "String",
+        "value": "var(--kendo-color-base-emphasis, #605e5c)"
+    },
     "kendo-chart-wizard-icon-area-color": {
         "type": "String",
         "value": "var(--kendo-color-primary, #0078d4)"

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "11.0.1-dev.0",
+    "version": "11.0.2",
     "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": "11.0.1-dev.0",
+    "version": "11.0.2",
     "previewColors": [
         "#1b1a19",
         "#21201f",

package/lib/swatches/fluent-main.json

@@ -3,7 +3,7 @@
     "name": "Fluent Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "11.0.1-dev.0",
+    "version": "11.0.2",
     "previewColors": [
         "#ffffff",
         "#faf9f8",

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": "11.0.1-dev.0",
+  "version": "11.0.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -54,12 +54,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.1.0",
-    "@progress/kendo-theme-core": "11.0.1-dev.0",
-    "@progress/kendo-theme-utils": "11.0.1-dev.0"
+    "@progress/kendo-theme-core": "11.0.2",
+    "@progress/kendo-theme-utils": "11.0.2"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "5633339861ff4f55226365721cdba7e278a65fb8"
+  "gitHead": "cccbf30304aeae423354f56ad98d4b544756f73d"
 }

package/scss/colorgradient/_layout.scss

@@ -46,7 +46,6 @@
 
         .k-hsv-gradient {
             height: var( --kendo-color-gradient-canvas-rectangle-height, #{$kendo-color-gradient-canvas-rectangle-height} );
-            aspect-ratio: 1;
         }
 
         .k-hsv-draghandle {
@@ -139,6 +138,8 @@
     @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 );
         $_padding-x: map.get( $size-props, padding-x );
@@ -159,6 +160,14 @@
             .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;
                 }

package/scss/colorgradient/_variables.scss

@@ -104,7 +104,16 @@ $kendo-color-gradient-canvas-border-radius: k-border-radius(md) !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: 100% !default;
+$kendo-color-gradient-canvas-rectangle-height: 184px !default;
+/// The height the small ColorGradient canvas hsv rectangle.
+/// @group color-gradient
+$kendo-color-gradient-sm-canvas-rectangle-height: 160px !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: 254px !default;
 
 /// The spacing between the items of the small ColorGradient canvas.
 /// @group color-gradient
@@ -138,7 +147,7 @@ $kendo-color-gradient-slider-border: color-mix(in srgb, k-color(border) 16%, tra
 
 /// The height of the ColorGradient vertical slider.
 /// @group color-gradient
-$kendo-color-gradient-slider-vertical-size: 100% !default;
+$kendo-color-gradient-slider-vertical-size: $kendo-color-gradient-canvas-rectangle-height !default;
 /// The width of the ColorGradient horizontal slider.
 /// @group color-gradient
 $kendo-color-gradient-slider-horizontal-size: 100% !default;
@@ -146,6 +155,16 @@ $kendo-color-gradient-slider-horizontal-size: 100% !default;
 /// @group color-gradient
 $kendo-color-gradient-slider-alpha-bgr: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC" !default;
 
+/// The height of the small ColorGradient vertical slider.
+/// @group color-gradient
+$kendo-color-gradient-sm-slider-vertical-size: $kendo-color-gradient-sm-canvas-rectangle-height !default;
+/// The height of the medium ColorGradient vertical slider.
+/// @group color-gradient
+$kendo-color-gradient-md-slider-vertical-size: $kendo-color-gradient-md-canvas-rectangle-height !default;
+/// The height of the large ColorGradient vertical slider.
+/// @group color-gradient
+$kendo-color-gradient-lg-slider-vertical-size: $kendo-color-gradient-lg-canvas-rectangle-height !default;
+
 /// The width of the ColorGradient canvas drag handle.
 /// @group color-gradient
 $kendo-color-gradient-draghandle-width: 20px !default;
@@ -219,6 +238,8 @@ $kendo-color-gradient-contrast-spacing: calc( #{$kendo-color-gradient-spacer} /
 $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,
@@ -227,6 +248,8 @@ $kendo-color-gradient-sizes: (
     ),
     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,
@@ -235,6 +258,8 @@ $kendo-color-gradient-sizes: (
     ),
     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,

package/scss/dataviz/_layout.scss

@@ -443,8 +443,8 @@
         series-29: $kendo-series-29,
         series-30: $kendo-series-30,
 
-        gauge-pointer: $kendo-series-f,
-        gauge-track: k-color(base-emphasis),
+        gauge-pointer: $kendo-gauge-pointer-bg,
+        gauge-track: $kendo-gauge-track-bg,
 
         chart-font-size: $kendo-chart-font-size,
         chart-title-font-size: $kendo-chart-title-font-size,
@@ -539,8 +539,8 @@
         chart-series-29: $kendo-series-29,
         chart-series-30: $kendo-series-30,
 
-        chart-gauge-pointer: $kendo-series-f,
-        chart-gauge-track: k-color(base-emphasis)
+        chart-gauge-pointer: $kendo-gauge-pointer-bg,
+        chart-gauge-track: $kendo-gauge-track-bg
 
     );
 

package/scss/dataviz/_variables.scss

@@ -261,3 +261,11 @@ $kendo-chart-no-data-text: k-color(on-app-surface) !default;
 /// The vertical padding of the Chart no data message.
 /// @group charts
 $kendo-chart-no-data-padding-y: k-spacing( 25 ) !default;
+
+// Gauge
+/// Color of the Gauge Pointer.
+/// @group charts
+$kendo-gauge-pointer-bg: $kendo-series-f !default;
+/// Color of the Gauge Track.
+/// @group charts
+$kendo-gauge-track-bg: k-color(base-emphasis) !default;

package/scss/pager/_layout.scss

@@ -35,6 +35,9 @@
 
     }
 
+    .k-pager-responsive {
+        flex-wrap: nowrap;
+    }
 
     // Base pager section
     %base-pager-section {