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

package/dist/meta/variables.json

@@ -35,26 +35,6 @@
         "type": "String",
         "value": "var(--kendo-elevation-8, none)"
     },
-    "kendo-enable-typography": {
-        "type": "Bool",
-        "value": "false"
-    },
-    "kendo-use-input-button-width": {
-        "type": "Bool",
-        "value": "true"
-    },
-    "kendo-use-input-spinner-width": {
-        "type": "Bool",
-        "value": "true"
-    },
-    "kendo-use-input-spinner-icon-offset": {
-        "type": "Bool",
-        "value": "false"
-    },
-    "kendo-transition": {
-        "type": "List",
-        "value": "(color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out)"
-    },
     "kendo-enable-color-system": {
         "type": "Bool",
         "value": "true"
@@ -91,6 +71,10 @@
         "type": "Number",
         "value": "4.5"
     },
+    "kendo-enable-typography": {
+        "type": "Bool",
+        "value": "false"
+    },
     "equilateral-index": {
         "type": "Number",
         "value": "1.7320508076"
@@ -1254,6 +1238,10 @@
             "full": "9999px"
         }
     },
+    "kendo-transition": {
+        "type": "List",
+        "value": "(color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out, width 0.2s ease-in-out, height 0.2s ease-in-out)"
+    },
     "kendo-body-bg": {
         "type": "String",
         "value": "var(--kendo-color-app-surface, #ffffff)"
@@ -5571,6 +5559,18 @@
         "type": "Number",
         "value": "1"
     },
+    "kendo-use-input-button-width": {
+        "type": "Bool",
+        "value": "true"
+    },
+    "kendo-use-input-spinner-width": {
+        "type": "Bool",
+        "value": "true"
+    },
+    "kendo-use-input-spinner-icon-offset": {
+        "type": "Bool",
+        "value": "false"
+    },
     "kendo-floating-label-scale": {
         "type": "Number",
         "value": "1"
@@ -17677,18 +17677,6 @@
         "type": "String",
         "value": "var(--kendo-font-size, inherit)"
     },
-    "kendo-chart-sm-font-size": {
-        "type": "String",
-        "value": "var(--kendo-font-size-sm, inherit)"
-    },
-    "kendo-chart-md-font-size": {
-        "type": "String",
-        "value": "var(--kendo-font-size, inherit)"
-    },
-    "kendo-chart-lg-font-size": {
-        "type": "String",
-        "value": "var(--kendo-font-size-lg, inherit)"
-    },
     "kendo-chart-line-height": {
         "type": "String",
         "value": "var(--kendo-line-height, normal)"
@@ -17703,7 +17691,7 @@
     },
     "kendo-chart-label-font-size": {
         "type": "String",
-        "value": "var(--kendo-font-size-sm, inherit)"
+        "value": "var(--kendo-font-size, inherit)"
     },
     "kendo-chart-title-font-size": {
         "type": "String",
@@ -17813,7 +17801,7 @@
         "type": "String",
         "value": "var(--kendo-hover-border, initial)"
     },
-    "kendo-color-error-bars-background": {
+    "kendo-chart-error-bars-background": {
         "type": "String",
         "value": "var(--kendo-color-error, #c2666b)"
     },

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "10.2.0-dev.0",
+    "version": "10.2.0-dev.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": "10.2.0-dev.0",
+    "version": "10.2.0-dev.2",
     "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.2.0-dev.0",
+    "version": "10.2.0-dev.2",
     "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.2.0-dev.0",
+  "version": "10.2.0-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -54,12 +54,12 @@
   },
   "dependencies": {
     "@progress/kendo-svg-icons": "^4.0.0",
-    "@progress/kendo-theme-core": "10.2.0-dev.0",
-    "@progress/kendo-theme-utils": "10.2.0-dev.0"
+    "@progress/kendo-theme-core": "10.2.0-dev.2",
+    "@progress/kendo-theme-utils": "10.2.0-dev.2"
   },
   "directories": {
     "doc": "docs",
     "lib": "lib"
   },
-  "gitHead": "8131b2e63fdb04068216ad13c1d1dfa74ed6cd97"
+  "gitHead": "7cacdcf5142972c051f1efeb0a7b1f2a9e11b0a2"
 }

package/scss/chart-wizard/_layout.scss

@@ -3,7 +3,6 @@
 @use "../expansion-panel/_variables.scss" as *;
 @use "../core/spacing/_index.scss" as *;
 
-@use "../core/_variables.scss" as *;
 @use "./_variables.scss" as *;
 @use "../core/typography/_index.scss" as *;
 

package/scss/colorgradient/_layout.scss

@@ -64,6 +64,10 @@
             flex-shrink: 0;
             gap: var( --kendo-color-gradient-canvas-spacing, #{$kendo-color-gradient-canvas-spacing} );
         }
+
+        &.k-vstack {
+            padding-inline: calc( ($kendo-color-gradient-draghandle-width + $kendo-color-gradient-draghandle-border-width) / 2 );
+        }
     }
 
     // DragHandle

package/scss/core/_index.scss

@@ -16,8 +16,7 @@
 // Radii
 @use "./border-radii/_index.scss" as *;
 
-// Variables
-@forward "./_variables.scss";
+@use "./motion/_index.scss" as *;
 
 @forward "@progress/kendo-theme-core/scss/index.scss" with (
     $kendo-enable-color-system: $kendo-enable-color-system !default,
@@ -47,7 +46,8 @@
     $kendo-spacing: $kendo-spacing !default,
     // Radii
     $_default-border-radii: $kendo-border-radii,
-    $kendo-border-radii: $kendo-border-radii !default
+    $kendo-border-radii: $kendo-border-radii !default,
+    $kendo-transition: $kendo-transition !default,
 );
 
 @forward "./color-system/_swatch-legacy.scss";

package/scss/core/motion/_index.scss

@@ -0,0 +1,2 @@
+// Default transition
+$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out, opacity .2s ease-in-out, width .2s ease-in-out, height .2s ease-in-out !default;

package/scss/dataviz/_layout.scss

@@ -15,26 +15,6 @@
         }
     }
 
-    // Exported variables
-    // stylelint-disable selector-class-pattern
-    .k-var--chart-font {
-        font-size: var( --kendo-chart-font-size, #{$kendo-chart-font-size} );
-    }
-
-    .k-var--chart-title-font {
-        font-size: var( --kendo-chart-title-font-size, #{$kendo-chart-title-font-size} );
-    }
-
-    .k-var--chart-pane-title-font {
-        font-size: var( --kendo-chart-pane-title-font-size, #{$kendo-chart-pane-title-font-size} );
-        font-weight: var( --kendo-chart-pane-title-font-weight, #{$kendo-chart-pane-title-font-weight} );
-    }
-
-    .k-var--chart-label-font {
-        font-size: var( --kendo-chart-label-font-size, #{$kendo-chart-label-font-size} );
-    }
-    // stylelint-enable selector-class-pattern
-
     // Elements
     .k-chart,
     .k-sparkline,
@@ -422,19 +402,8 @@
         base: $kendo-component-bg,
         background: $kendo-component-bg,
 
-        border-radius: k-border-radius(md),
-
         normal-background: $kendo-component-bg,
         normal-text-color: $kendo-component-text,
-        hover-background: $kendo-hover-bg,
-        hover-text-color: $kendo-hover-text,
-        selected-background: $kendo-selected-bg,
-        selected-text-color: $kendo-selected-text,
-
-        success: if($kendo-enable-color-system, k-color( success ), k-get-theme-color( success, 100 )),
-        info: if($kendo-enable-color-system, k-color( info ), k-get-theme-color( info, 100 )),
-        warning: if($kendo-enable-color-system, k-color( warning ), k-get-theme-color( warning, 100 )),
-        error: if($kendo-enable-color-system, k-color( error ), k-get-theme-color( error, 100 )),
 
         series-a: $kendo-series-a,
         series-b: $kendo-series-b,
@@ -475,22 +444,112 @@
         series-30: $kendo-series-30,
 
         gauge-pointer: $kendo-series-f,
-        gauge-track: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-30 ))
+        gauge-track: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-30 )),
+
+        chart-font-size: $kendo-chart-font-size,
+        chart-title-font-size: $kendo-chart-title-font-size,
+        chart-pane-title-font-size: $kendo-chart-pane-title-font-size,
+        chart-pane-title-font-weight: $kendo-chart-pane-title-font-weight,
+        chart-label-font-size: $kendo-chart-label-font-size,
+
+        chart-inactive: $kendo-chart-inactive-bg,
+        chart-major-lines: $kendo-chart-major-lines,
+        chart-minor-lines: $kendo-chart-minor-lines,
+        chart-area-opacity: $kendo-chart-area-opacity,
+        chart-area-inactive-opacity: $kendo-chart-area-inactive-opacity,
+        chart-line-inactive-opacity: $kendo-chart-line-inactive-opacity,
+        chart-notes-background: $kendo-chart-notes-background,
+        chart-notes-border: $kendo-chart-notes-border,
+        chart-notes-lines: $kendo-chart-notes-lines,
+        chart-crosshair-background: $kendo-chart-crosshair-background,
+        chart-error-bars-background: $kendo-chart-error-bars-background,
+
     );
 
+    // TODO: remove in favor of CSS variables once all suites are updated
     @each $name, $value in $exported {
         $type: meta.type-of($value);
 
         .k-var--#{$name} {
-            @if $type == "color" {
+            @if $type == "color" or $type == "string" and string.index($value, "color") {
                 // background-color can store any color
-                background-color: $value;
-            } @else if $type == "string" and string.slice( $value, 1, 4 ) == "var(" {
-                background-color: $value;
-            } @else if $type == "number" {
-                // margin-top can store positive & negative values
-                margin-top: $value;
+                background-color: #{$value};
+            } @else if string.index($name, "font-size") {
+                font-size: #{$value};
+            } @else if string.index($name, "font-weight") {
+                font-weight: #{$value};
+            } @else if string.index($name, "opacity") {
+                opacity: #{$value};
             }
+
+        }
+    }
+
+    $_css-vars: (
+        chart-primary-contrast: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white),
+        chart-bg: $kendo-chart-bg,
+        chart-text: $kendo-chart-text,
+
+        chart-font-size: $kendo-chart-font-size,
+        chart-title-font-size: $kendo-chart-title-font-size,
+        chart-pane-title-font-size: $kendo-chart-pane-title-font-size,
+        chart-pane-title-font-weight: $kendo-chart-pane-title-font-weight,
+        chart-label-font-size: $kendo-chart-label-font-size,
+
+        chart-inactive: $kendo-chart-inactive-bg,
+        chart-major-lines: $kendo-chart-major-lines,
+        chart-minor-lines: $kendo-chart-minor-lines,
+        chart-area-opacity: $kendo-chart-area-opacity,
+        chart-area-inactive-opacity: $kendo-chart-area-inactive-opacity,
+        chart-line-inactive-opacity: $kendo-chart-line-inactive-opacity,
+        chart-notes-bg: $kendo-chart-notes-background,
+        chart-notes-border: $kendo-chart-notes-border,
+        chart-notes-lines: $kendo-chart-notes-lines,
+        chart-crosshair-bg: $kendo-chart-crosshair-background,
+        chart-error-bars-bg: $kendo-chart-error-bars-background,
+
+        chart-series-1: $kendo-series-1,
+        chart-series-2: $kendo-series-2,
+        chart-series-3: $kendo-series-3,
+        chart-series-4: $kendo-series-4,
+        chart-series-5: $kendo-series-5,
+        chart-series-6: $kendo-series-6,
+        chart-series-7: $kendo-series-7,
+        chart-series-8: $kendo-series-8,
+        chart-series-9: $kendo-series-9,
+        chart-series-10: $kendo-series-10,
+        chart-series-11: $kendo-series-11,
+        chart-series-12: $kendo-series-12,
+        chart-series-13: $kendo-series-13,
+        chart-series-14: $kendo-series-14,
+        chart-series-15: $kendo-series-15,
+        chart-series-16: $kendo-series-16,
+        chart-series-17: $kendo-series-17,
+        chart-series-18: $kendo-series-18,
+        chart-series-19: $kendo-series-19,
+        chart-series-20: $kendo-series-20,
+        chart-series-21: $kendo-series-21,
+        chart-series-22: $kendo-series-22,
+        chart-series-23: $kendo-series-23,
+        chart-series-24: $kendo-series-24,
+        chart-series-25: $kendo-series-25,
+        chart-series-26: $kendo-series-26,
+        chart-series-27: $kendo-series-27,
+        chart-series-28: $kendo-series-28,
+        chart-series-29: $kendo-series-29,
+        chart-series-30: $kendo-series-30,
+
+        chart-gauge-pointer: $kendo-series-f,
+        chart-gauge-track: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-30 ))
+
+    );
+
+    .k-chart,
+    .k-diagram,
+    .k-gauge,
+    .k-sparkline {
+        @each $name, $value in $_css-vars {
+            --kendo-#{$name}: #{$value};
         }
     }
 

package/scss/dataviz/_theme.scss

@@ -3,53 +3,6 @@
 
 @mixin kendo-dataviz--theme() {
 
-    // Exported variables
-    // stylelint-disable selector-class-pattern
-    .k-var--chart-inactive {
-        @include fill( $bg: var( --kendo-chart-inactive-bg, #{$kendo-chart-inactive-bg} ) );
-    }
-
-    .k-var--chart-major-lines {
-        @include fill( $bg: var( --kendo-chart-major-lines, #{$kendo-chart-major-lines} ) );
-    }
-
-    .k-var--chart-minor-lines {
-        @include fill( $bg: var( --kendo-chart-minor-lines, #{$kendo-chart-minor-lines} ) );
-    }
-
-    .k-var--chart-area-opacity {
-        opacity: var( --kendo-chart-area-opacity, #{$kendo-chart-area-opacity} );
-    }
-
-    .k-var--chart-area-inactive-opacity {
-        opacity: var( --kendo-chart-area-inactive-opacity, #{$kendo-chart-area-inactive-opacity} );
-    }
-
-    .k-var--chart-line-inactive-opacity {
-        opacity: var( --kendo-chart-line-inactive-opacity, #{$kendo-chart-line-inactive-opacity} );
-    }
-
-    .k-var--chart-notes-background {
-        @include fill( $bg: var( --kendo-chart-notes-background, #{$kendo-chart-notes-background} ) );
-    }
-
-    .k-var--chart-notes-border {
-        @include fill( $bg: var( --kendo-chart-notes-border, #{$kendo-chart-notes-border} ) );
-    }
-
-    .k-var--chart-notes-lines {
-        @include fill( $bg: var( --kendo-chart-notes-lines, #{$kendo-chart-notes-lines} ) );
-    }
-
-    .k-var--chart-crosshair-background {
-        @include fill( $bg: var( --kendo-chart-crosshair-background, #{$kendo-chart-crosshair-background} ) );
-    }
-
-    .k-var--chart-error-bars-background {
-        @include fill( $bg: var( --kendo-error-bars-background, #{$kendo-color-error-bars-background} ) );
-    }
-    // stylelint-enable selector-class-pattern
-
     // Elements
     .k-chart,
     .k-sparkline,

package/scss/dataviz/_variables.scss

@@ -92,9 +92,6 @@ $kendo-chart-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font-size of the chart component.
 /// @group charts
 $kendo-chart-font-size: var( --kendo-font-size, inherit ) !default;
-$kendo-chart-sm-font-size: var( --kendo-font-size-sm, inherit ) !default;
-$kendo-chart-md-font-size: var( --kendo-font-size, inherit ) !default;
-$kendo-chart-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 /// The line-height of the chart component.
 /// @group charts
 $kendo-chart-line-height: var( --kendo-line-height, normal ) !default;
@@ -108,7 +105,7 @@ $kendo-chart-tooltip-line-height: var( --kendo-line-height-sm, normal ) !default
 
 /// The font-size of the label of the chart component.
 /// @group chart
-$kendo-chart-label-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-chart-label-font-size: var( --kendo-font-size, inherit ) !default;
 
 /// The font-size of the title of the chart component.
 /// @group charts
@@ -204,7 +201,7 @@ $kendo-chart-handle-hover-border: var( --kendo-hover-border, initial ) !default;
 
 /// The color of the chart error bars.
 /// @group charts
-$kendo-color-error-bars-background: if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( neutral-110 )) !default;
+$kendo-chart-error-bars-background: if($kendo-enable-color-system, k-color( error ), k-get-theme-color-var( neutral-110 )) !default;
 
 /// The size of the selection handle of the chart component.
 /// @group charts

package/scss/dock-manager/_layout.scss

@@ -1,4 +1,3 @@
-@use "../core/_variables.scss" as *;
 @use "./_variables.scss" as *;
 @use "../core/typography/_index.scss" as *;
 

package/scss/input/_variables.scss

@@ -660,3 +660,7 @@ $kendo-input-clear-value-hover-text: inherit !default;
 /// The opacity of the hovered Input clear value icon.
 /// @group input
 $kendo-input-clear-value-hover-opacity: 1 !default;
+
+$kendo-use-input-button-width: true !default;
+$kendo-use-input-spinner-width: true !default;
+$kendo-use-input-spinner-icon-offset: false !default;

package/scss/tabstrip/_layout.scss

@@ -46,6 +46,7 @@
         border-style: solid;
         border-color: inherit;
         position: relative;
+        flex-shrink: 0;
     }
 
 

package/scss/tabstrip/_theme.scss

@@ -129,19 +129,16 @@
     }
 
     // RTL
-    .k-rtl,
-    [dir="rtl"] {
-        &.k-tabstrip-scrollable-overlay {
-            &.k-tabstrip-top,
-            &.k-tabstrip-bottom {
-                .k-tabstrip-items-wrapper {
-                    &::before {
-                        background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay);
-                    }
-
-                    &::after {
-                        background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay);
-                    }
+    :is(.k-rtl .k-tabstrip-scrollable-overlay, [dir="rtl"] .k-tabstrip-scrollable-overlay, .k-tabstrip-scrollable-overlay.k-rtl, .k-tabstrip-scrollable-overlay[dir="rtl"] ) {
+        &.k-tabstrip-top,
+        &.k-tabstrip-bottom {
+            .k-tabstrip-items-wrapper {
+                &::before {
+                    background: linear-gradient(270deg, $kendo-tabstrip-scroll-overlay);
+                }
+
+                &::after {
+                    background: linear-gradient(90deg, $kendo-tabstrip-scroll-overlay);
                 }
             }
         }

package/scss/toolbar/_theme.scss

@@ -146,35 +146,32 @@
     }
 
     // RTL
-    .k-rtl,
-    [dir="rtl"] {
-        .k-toolbar-scrollable-overlay {
+    :is(.k-rtl .k-toolbar-scrollable-overlay, [dir="rtl"] .k-toolbar-scrollable-overlay, .k-toolbar-scrollable-overlay.k-rtl, .k-toolbar-scrollable-overlay[dir="rtl"] ) {
+        &::before {
+            background: linear-gradient(270deg, var(--kendo-toolbar-scroll-overlay, #{$kendo-toolbar-scroll-overlay}));
+        }
+
+        &::after {
+            background: linear-gradient(90deg, var(--kendo-toolbar-scroll-overlay, #{$kendo-toolbar-scroll-overlay}));
+        }
+
+        &.k-toolbar-outline {
             &::before {
-                background: linear-gradient(270deg, var( --kendo-toolbar-scroll-overlay, #{$kendo-toolbar-scroll-overlay} ));
+                background: linear-gradient(270deg, var(--kendo-toolbar-outline-scroll-overlay, #{$kendo-toolbar-outline-scroll-overlay}));
             }
 
             &::after {
-                background: linear-gradient(90deg, var( --kendo-toolbar-scroll-overlay, #{$kendo-toolbar-scroll-overlay} ));
+                background: linear-gradient(90deg, var(--kendo-toolbar-outline-scroll-overlay, #{$kendo-toolbar-outline-scroll-overlay}));
             }
+        }
 
-            &.k-toolbar-outline {
-                &::before {
-                    background: linear-gradient(270deg, var( --kendo-toolbar-outline-scroll-overlay, #{$kendo-toolbar-outline-scroll-overlay} ));
-                }
-
-                &::after {
-                    background: linear-gradient(90deg, var( --kendo-toolbar-outline-scroll-overlay, #{$kendo-toolbar-outline-scroll-overlay} ));
-                }
+        &.k-toolbar-flat {
+            &::before {
+                background: linear-gradient(270deg, var(--kendo-toolbar-flat-scroll-overlay, #{$kendo-toolbar-flat-scroll-overlay}));
             }
 
-            &.k-toolbar-flat {
-                &::before {
-                    background: linear-gradient(270deg, var( --kendo-toolbar-flat-scroll-overlay, #{$kendo-toolbar-flat-scroll-overlay} ));
-                }
-
-                &::after {
-                    background: linear-gradient(90deg, var( --kendo-toolbar-flat-scroll-overlay, #{$kendo-toolbar-flat-scroll-overlay} ));
-                }
+            &::after {
+                background: linear-gradient(90deg, var(--kendo-toolbar-flat-scroll-overlay, #{$kendo-toolbar-flat-scroll-overlay}));
             }
         }
     }

package/scss/core/_variables.scss

@@ -1,15 +0,0 @@
-// Options
-$kendo-enable-typography: false !default;
-
-$kendo-use-input-button-width: true !default;
-$kendo-use-input-spinner-width: true !default;
-$kendo-use-input-spinner-icon-offset: false !default;
-
-// Default transition
-$kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out, opacity .2s ease-in-out, width .2s ease-in-out, height .2s ease-in-out !default;
-
-@mixin kendo-transition--styles() {
-    :root {
-        --kendo-transition: #{$kendo-transition};
-    }
-}