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

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "6.4.0-dev.0",
+    "version": "6.4.0-dev.1",
     "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": "6.4.0-dev.0",
+    "version": "6.4.0-dev.1",
     "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": "6.4.0-dev.0",
+  "version": "6.4.0-dev.1",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -50,8 +50,8 @@
   },
   "dependencies": {
     "@progress/kendo-font-icons": "1.4.2",
-    "@progress/kendo-theme-core": "6.4.0-dev.0",
-    "@progress/kendo-theme-utils": "6.4.0-dev.0"
+    "@progress/kendo-theme-core": "6.4.0-dev.1",
+    "@progress/kendo-theme-utils": "6.4.0-dev.1"
   },
-  "gitHead": "862cb1931ece807ea4ae7496ce5033bf3f3eea30"
+  "gitHead": "a4d65b253b00a333fea62e6217175ff79a8ac3b0"
 }

package/scss/action-sheet/_layout.scss

@@ -218,7 +218,7 @@
         border-width: var( --kendo-actionsheet-border-width, #{$kendo-actionsheet-border-width} );
         border-top-width: 0;
         top: 0;
-        left: 50%;
+        inset-inline-start: 50%;
         transform: translateX( -50% );
     }
 
@@ -227,7 +227,7 @@
         border-width: var( --kendo-actionsheet-border-width, #{$kendo-actionsheet-border-width} );
         border-bottom-width: 0;
         bottom: 0;
-        left: 50%;
+        inset-inline-start: 50%;
         transform: translateX( -50% );
     }
 
@@ -363,6 +363,15 @@
             flex-flow: column nowrap;
         }
     }
+
+    // RTL
+    .k-rtl,
+    [dir="rtl"] {
+        .k-actionsheet-top,
+        .k-actionsheet-bottom {
+            transform: translateX( 50% );
+        }
+    }
 }
 
 @mixin kendo-action-sheet--layout-jq() {

package/scss/adaptive/_layout.scss

@@ -315,15 +315,11 @@
         .k-task {
             display: flex;
             align-items: center;
+            gap: .5em;
 
             .k-scheduler-mark {
                 border-radius: 50%;
-            }
-
-            .k-i-reload,
-            .k-i-arrow-rotate-cw {
-                font-size: 1em;
-                margin-right: .5em;
+                margin: 0;
             }
 
             .k-scheduler-task-text {

package/scss/drawer/_layout.scss

@@ -185,16 +185,26 @@
 
         .k-svg-icon,
         .k-icon {
-            height: auto;
-            font-size: var( --kendo-drawer-icon-size, #{$kendo-drawer-icon-size} );
-            line-height: var( --kendo-drawer-item-line-height, #{$kendo-drawer-item-line-height} );
             flex-shrink: 0;
+            padding-inline: var( --kendo-drawer-icon-padding-x, #{$kendo-drawer-icon-padding-x} );
+            padding-block: var( --kendo-drawer-icon-padding-y, #{$kendo-drawer-icon-padding-y} );
+            box-sizing: content-box;
 
             &.k-i-none {
                 margin: 0;
             }
         }
 
+        .k-icon {
+            height: auto;
+            font-size: var( --kendo-drawer-icon-size, #{$kendo-drawer-icon-size} );
+        }
+
+        .k-svg-icon {
+            width: var( --kendo-drawer-icon-size, #{$kendo-drawer-icon-size} );
+            height: var( --kendo-drawer-icon-size, #{$kendo-drawer-icon-size} );
+        }
+
         .k-item-text {
             display: inline-block;
             white-space: nowrap;

package/scss/drawer/_variables.scss

@@ -68,6 +68,12 @@ $kendo-drawer-item-level-count: 5 !default;
 /// Icon size of the drawer item.
 /// @group drawer
 $kendo-drawer-icon-size: var( --kendo-icon-size, 1rem ) !default;
+/// Horizontal padding of the drawer icon.
+/// @group drawer
+$kendo-drawer-icon-padding-x: 0 !default;
+/// Vertical padding of the drawer icon.
+/// @group drawer
+$kendo-drawer-icon-padding-y: map.get( $kendo-spacing, 1 ) !default;
 
 /// Initial width of the mini drawer.
 /// @group drawer

package/scss/fab/_layout.scss

@@ -55,8 +55,9 @@
 
     // FAB Icon
     .k-fab-icon {
-        width: var( --kendo-fab-icon-width, #{$kendo-fab-icon-width} );
-        height: var( --kendo-fab-icon-height, #{$kendo-fab-icon-height} );
+        padding-inline: var( --kendo-fab-icon-padding-x, #{$kendo-fab-icon-padding-x} );
+        padding-block: var( --kendo-fab-icon-padding-y, #{$kendo-fab-icon-padding-y} );
+        box-sizing: content-box;
 
         .k-icon-wrapper-host:not(:only-child) &,
         &:not(:only-child) {
@@ -154,8 +155,6 @@
     }
 
     .k-fab-item-icon {
-        width: var( --kendo-fab-item-icon-width, #{$kendo-fab-item-icon-width} );
-        height: var( --kendo-fab-item-icon-height, #{$kendo-fab-item-icon-height} );
         padding-inline: var( --kendo-fab-item-icon-padding-x, #{$kendo-fab-item-icon-padding-x} );
         padding-block: var( --kendo-fab-item-icon-padding-y, #{$kendo-fab-item-icon-padding-y} );
         border-width: var( --kendo-fab-item-icon-border-width, #{$kendo-fab-item-icon-border-width} );

package/scss/fab/_variables.scss

@@ -43,12 +43,12 @@ $kendo-fab-focus-outline-width: $kendo-button-focus-outline-width !default;
 /// @group floating-action-button
 $kendo-fab-focus-outline-style: $kendo-button-focus-outline-style !default;
 
-/// FAB icon width.
+/// Horizontal padding of the FAB icon.
 /// @group floating-action-button
-$kendo-fab-icon-width: 20px !default;
-/// FAB icon height.
+$kendo-fab-icon-padding-x: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+/// Vertical padding of the FAB icon.
 /// @group floating-action-button
-$kendo-fab-icon-height: $kendo-fab-icon-width !default;
+$kendo-fab-icon-padding-y: $kendo-fab-icon-padding-x !default;
 /// FAB icon spacing.
 /// @group floating-action-button
 $kendo-fab-icon-spacing: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
@@ -97,10 +97,10 @@ $kendo-fab-item-focus-outline-style: $kendo-button-focus-outline-style !default;
 
 /// FAB item icon horizontal padding.
 /// @group floating-action-button
-$kendo-fab-item-icon-padding-x: map.get( $kendo-spacing, 2 ) !default;
+$kendo-fab-item-icon-padding-x: map.get( $kendo-spacing, 2 ) + $kendo-fab-icon-padding-x !default;
 /// FAB item icon vertical padding.
 /// @group floating-action-button
-$kendo-fab-item-icon-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-x !default;
 /// Width of the FAB item icon border.
 /// @group floating-action-button
 $kendo-fab-item-icon-border-width: 1px !default;
@@ -110,12 +110,6 @@ $kendo-fab-item-icon-border-style: solid !default;
 /// Border radius of the FAB item icon.
 /// @group floating-action-button
 $kendo-fab-item-icon-border-radius: 50% !default;
-/// Width of the FAB item icon.
-/// @group floating-action-button
-$kendo-fab-item-icon-width: 20px !default;
-/// Height of the FAB item icon.
-/// @group floating-action-button
-$kendo-fab-item-icon-height: $kendo-fab-item-icon-width !default;
 
 /// Theme colors map for the FAB.
 /// @group floating-action-button

package/scss/icon/_layout.scss

@@ -28,13 +28,16 @@
     }
 
     // RTL icons
-    .k-rtl .k-i-indent-increase,
-    .k-rtl .k-i-indent-decrease,
-    .k-rtl .k-i-caret-alt-right,
-    .k-rtl .k-i-caret-alt-down,
-    [dir="rtl"] .k-i-caret-alt-right,
-    [dir="rtl"] .k-i-caret-alt-down {
-        transform: scaleX(-1);
+    .k-rtl,
+    [dir="rtl"] {
+        .k-i-indent-increase,
+        .k-i-indent-decrease,
+        .k-i-caret-alt-right,
+        .k-i-caret-alt-left,
+        .k-svg-i-caret-alt-right,
+        .k-svg-i-caret-alt-left {
+            transform: scaleX(-1);
+        }
     }
 
     .k-icon-action {

package/scss/input/_layout.scss

@@ -36,8 +36,8 @@
             box-sizing: border-box;
         }
 
-        .k-input,
-        .k-picker {
+        > .k-input,
+        > .k-picker {
             border-width: 0 !important; // sass-lint:disable-line no-important
             color: inherit;
             background: none;
@@ -226,14 +226,15 @@
     .k-input-prefix > .k-svg-icon,
     .k-input-suffix > .k-icon,
     .k-input-suffix > .k-svg-icon {
-        width: var( --INTERNAL--kendo-input-icon-size, min-content );
-        height: var( --INTERNAL--kendo-input-icon-size, min-content );
+        padding-inline: var( --INTERNAL--kendo-input-padding-y, #{$kendo-input-md-padding-y} );
+        padding-block: var( --INTERNAL--kendo-input-padding-y, #{$kendo-input-md-padding-y} );
         flex: none;
         align-self: center;
         display: inline-flex;
         flex-flow: row nowrap;
         align-items: center;
         justify-content: center;
+        box-sizing: content-box;
     }
 
     // Input with SVG icon

package/scss/input/_variables.scss

@@ -457,7 +457,7 @@ $kendo-input-sizes: (
         padding-y: $kendo-input-sm-padding-y,
         font-size: $kendo-input-sm-font-size,
         line-height: $kendo-input-sm-line-height,
-        icon-size: calc( var( --kendo-icon-size, 1rem ) + #{$kendo-input-sm-padding-y * 2} ),
+        icon-size: calc( var( --kendo-icon-size, 1rem ) + #{$kendo-input-md-padding-y * 2} ),
         button-padding-x: $kendo-input-sm-padding-y,
         button-padding-y: $kendo-input-sm-padding-y,
         button-width: $kendo-input-sm-button-width
@@ -467,7 +467,7 @@ $kendo-input-sizes: (
         padding-y: $kendo-input-md-padding-y,
         font-size: $kendo-input-md-font-size,
         line-height: $kendo-input-md-line-height,
-        icon-size: calc( var( --kendo-icon-size, 1rem ) + #{$kendo-input-md-padding-y * 2} ),
+        icon-size: calc( var( --kendo-icon-size, 1rem ) + #{$kendo-input-sm-padding-y * 2} ),
         button-padding-x: $kendo-input-md-padding-y,
         button-padding-y: $kendo-input-md-padding-y,
         button-width: $kendo-input-md-button-width

package/scss/listbox/_layout.scss

@@ -79,11 +79,8 @@
         &[dir="rtl"],
         [dir="rtl"] & {
 
-            &.k-listbox-toolbar-left,
-            &.k-listbox-toolbar-right {
-                .k-listbox-toolbar {
-                    transform: scaleX(-1);
-                }
+            .k-listbox-actions .k-button-icon {
+                transform: scaleX(-1);
             }
         }
     }

package/scss/pager/_layout.scss

@@ -35,18 +35,7 @@
         .k-rtl &,
         &[dir="rtl"],
         [dir="rtl"] & {
-            .k-i-caret-alt-to-left,
-            .k-i-caret-alt-to-right,
-            .k-i-caret-alt-left,
-            .k-i-caret-alt-right,
-            .k-i-arrow-end-left,
-            .k-i-arrow-60-left,
-            .k-i-arrow-60-right,
-            .k-i-arrow-end-right,
-            .k-i-seek-w,
-            .k-i-arrow-w,
-            .k-i-arrow-e,
-            .k-i-seek-e {
+            .k-pager-nav .k-button-icon {
                 transform: scaleX(-1);
             }
         }

package/scss/scrollview/_layout.scss

@@ -168,11 +168,11 @@
     }
 
     .k-scrollview-prev {
-        left: 0;
+        inset-inline-start: 0;
     }
 
     .k-scrollview-next {
-        right: 0;
+        inset-inline-end: 0;
     }
 
 
@@ -197,4 +197,15 @@
             pointer-events: none;
         }
     }
+
+    .k-rtl,
+    [dir="rtl"] {
+        .k-scrollview-prev,
+        .k-scrollview-next {
+            .k-icon,
+            .k-svg-icon {
+                transform: scaleX(-1);
+            }
+        }
+    }
 }

package/scss/spreadsheet/_layout.scss

@@ -132,7 +132,8 @@
         align-items: center;
         flex: 1;
 
-        > .k-i-formula-fx {
+        > .k-icon,
+        > .k-svg-icon {
             padding-inline: var( --kendo-padding-y, #{$kendo-padding-md-y} );
             padding-block: 0;
             box-sizing: content-box;