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

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.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": "6.4.0-dev.0",
+    "version": "6.4.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": "6.4.0-dev.0",
+  "version": "6.4.0-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -40,6 +40,7 @@
   "scripts": {
     "build": "sass-build",
     "sass": "sass-build",
+    "sass:standalone": "sass-build -c sass-standalone.config.js",
     "docs": "node ../../scripts/sassdoc.js",
     "predocs": "npm run resolve-variables",
     "resolve-variables": "node ../../scripts/resolve-variables.js",
@@ -49,9 +50,9 @@
     "postpublish": "echo 'no postpublish for the Fluent theme'"
   },
   "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-font-icons": "1.5.0",
+    "@progress/kendo-theme-core": "6.4.0-dev.2",
+    "@progress/kendo-theme-utils": "6.4.0-dev.2"
   },
-  "gitHead": "862cb1931ece807ea4ae7496ce5033bf3f3eea30"
+  "gitHead": "f915877b18051b4fdbf50faad26b14ec73852e46"
 }

package/scss/action-sheet/_layout.scss

@@ -186,10 +186,6 @@
         gap: var( --kendo-actionsheet-item-spacing, #{$kendo-actionsheet-item-spacing} );
     }
 
-    .k-actionsheet-item-icon {
-        font-size: var( --kendo-actionsheet-item-icon-size, #{$kendo-actionsheet-item-icon-size} );
-    }
-
     .k-actionsheet-item-text {
         display: flex;
         flex-flow: column nowrap;
@@ -218,7 +214,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 +223,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 +359,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/action-sheet/_variables.scss

@@ -112,9 +112,6 @@ $kendo-actionsheet-item-border-width: 1px !default;
 /// @group action-sheet
 $kendo-actionsheet-item-spacing: map.get( $kendo-spacing, 2 ) !default;
 
-/// Size of the action sheet item icon.
-/// @group action-sheet
-$kendo-actionsheet-item-icon-size: var( --kendo-icon-size, 1rem ) !default;
 /// Color of the action sheet item icon.
 /// @group action-sheet
 $kendo-actionsheet-item-icon-color: get-theme-color-var( primary-110 ) !default;

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/avatar/_variables.scss

@@ -1,21 +1,21 @@
 @use "sass:map";
 @use "../core/" as *;
 
-/// Border width of the avatar.
+/// The border width of the Avatar.
 /// @group avatar
 $kendo-avatar-border-width: 1px !default;
 
-/// Font family of the avatar.
+/// The font family of the Avatar.
 /// @group avatar
 $kendo-avatar-font-family: var( --kendo-font-family, inherit ) !default;
-/// Font size of the avatar.
+/// The font size of the Avatar.
 /// @group avatar
 $kendo-avatar-font-size: var( --kendo-font-size, inherit ) !default;
-/// Line height of the avatar.
+/// The line height of the Avatar.
 /// @group avatar
 $kendo-avatar-line-height: var( --kendo-line-height, inherit ) !default;
 
-/// The sizes of the avatar.
+/// The sizes map of the Avatar.
 /// @group avatar
 $kendo-avatar-sizes: (
     sm: map.get( $kendo-spacing, 4 ),
@@ -23,7 +23,8 @@ $kendo-avatar-sizes: (
     lg: map.get( $kendo-spacing, 16 )
 ) !default;
 
-// Theme variations for the avatar.
+/// The theme variations for the Avatar.
+/// @group avatar
 $kendo-avatar-brand-colors: (
     primary: primary,
     error: error,
@@ -33,7 +34,7 @@ $kendo-avatar-brand-colors: (
     tertiary: tertiary,
  ) !default;
 
-// Matrix with avatar theme colors in the order: bg, color, border
+// Matrices with Avatar theme colors in the order: bg, color, border
 $_tc-avatar-matrix: (
     solid: (
         normal: (100, $kendo-color-white, 100)
@@ -70,7 +71,8 @@ $_tc-avatar-light-matrix: (
     )
 ) !default;
 
-/// Theme colors map for the avatar variations.
+/// The theme colors map for the Avatar variations.
+/// @group avatar
 $kendo-avatar-theme-colors: () !default;
 
 @each $fill-mode, $ui-states in $_tc-avatar-matrix {

package/scss/badge/_variables.scss

@@ -1,56 +1,76 @@
 @use "sass:map";
 @use "../core/" as *;
 
-/// Background color of the badge.
+/// The background color of the Badge.
 /// @group badge
 $kendo-badge-bg: var( --kendo-component-bg, initial ) !default;
-/// Text color of the badge.
+/// The text color of the Badge.
 /// @group badge
 $kendo-badge-text: var( --kendo-component-text, initial ) !default;
-/// Border color of the badge.
+/// The border color of the Badge.
 /// @group badge
 $kendo-badge-border: var( --kendo-component-border, initial ) !default;
 
-/// Border width of the badge.
+/// The border width of the Badge.
 /// @group badge
 $kendo-badge-border-width: 1px !default;
 
-/// Font weight of the badge.
+/// The font weight of the Badge.
 /// @group badge
 $kendo-badge-font-weight: var( --kendo-font-weight, normal ) !default;
 
-/// Horizontal padding of the badge.
+/// Horizontal padding of the small Badge.
 /// @group badge
 $kendo-badge-sm-padding-x: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+/// Horizontal padding of the medium Badge.
+/// @group badge
 $kendo-badge-md-padding-x: map.get( $kendo-spacing, 1 ) !default;
+/// Horizontal padding of the large Badge.
+/// @group badge
 $kendo-badge-lg-padding-x: map.get( $kendo-spacing, 1.5 ) !default;
 
-/// Vertical padding of the badge.
+/// Vertical padding of the small Badge.
 /// @group badge
 $kendo-badge-sm-padding-y: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+/// Vertical padding of the medium Badge.
+/// @group badge
 $kendo-badge-md-padding-y: map.get( $kendo-spacing, 1 ) !default;
+/// Vertical padding of the large Badge.
+/// @group badge
 $kendo-badge-lg-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
 
-/// Font sizes of the badge.
+/// The font size of the small Badge.
 /// @group badge
 $kendo-badge-sm-font-size: var( --kendo-font-size-xs, inherit ) !default;
+/// The font size of the medium Badge.
+/// @group badge
 $kendo-badge-md-font-size: var( --kendo-font-size-xs, inherit ) !default;
+/// The font size of the large Badge.
+/// @group badge
 $kendo-badge-lg-font-size: var( --kendo-font-size-xs, inherit ) !default;
 
-/// Line heights of the badge.
+/// The line height used along with the $kendo-font-size variable of the small Badge.
 /// @group badge
 $kendo-badge-sm-line-height: var( --kendo-line-height-xs, normal ) !default;
+/// The line height used along with the $kendo-font-size variable of the medium Badge.
+/// @group badge
 $kendo-badge-md-line-height: var( --kendo-line-height-xs, normal ) !default;
+/// The line height used along with the $kendo-font-size variable of the large Badge.
+/// @group badge
 $kendo-badge-lg-line-height: var( --kendo-line-height-xs, normal ) !default;
 
-/// Badge min width used for circle badge.
+/// The calculated minimum width of the small circular Badge.
 /// @group badge
 $kendo-badge-sm-min-width: calc( #{$kendo-badge-sm-line-height} * 1em + #{$kendo-badge-sm-padding-y} * 2 + #{$kendo-badge-border-width} * 2 ) !default;
+/// The calculated minimum width of the medium circular Badge.
+/// @group badge
 $kendo-badge-md-min-width: calc( #{$kendo-badge-md-line-height} * 1em + #{$kendo-badge-md-padding-y} * 2 + #{$kendo-badge-border-width} * 2 ) !default;
+/// The calculated minimum width of the large circular Badge.
+/// @group badge
 $kendo-badge-lg-min-width: calc( #{$kendo-badge-lg-line-height} * 1em + #{$kendo-badge-lg-padding-y} * 2 + #{$kendo-badge-border-width} * 2 ) !default;
 
 
-/// Sizes map for the badge.
+/// The sizes map for the Badge.
 /// @group badge
 $kendo-badge-sizes: (
     sm: (
@@ -77,7 +97,8 @@ $kendo-badge-sizes: (
 ) !default;
 
 
-/// Theme variations for the badge.
+/// The theme variations for the Badge.
+/// @group badge
 $kendo-badge-brand-colors: (
     primary: primary,
     error: error,
@@ -87,7 +108,7 @@ $kendo-badge-brand-colors: (
     tertiary: tertiary,
  ) !default;
 
-// Matrix with badge theme colors in the order: bg, color, border
+// Matrices with Badge theme colors in the order: bg, color, border
 $_tc-badge-matrix: (
     solid: (
         normal: (100, $kendo-color-white, 100)
@@ -124,7 +145,8 @@ $_tc-badge-light-matrix: (
     )
 ) !default;
 
-/// Theme colors map for the badge variations.
+/// The theme colors map for the Badge variations.
+/// @group badge
 $kendo-badge-theme-colors: () !default;
 
 @each $fill-mode, $ui-states in $_tc-badge-matrix {

package/scss/bottom-navigation/_layout.scss

@@ -101,10 +101,6 @@
         background-color: initial;
     }
 
-    .k-bottom-nav-item-icon {
-        font-size: var( --kendo-bottom-nav-item-icon-size, #{$kendo-bottom-nav-item-icon-size} );
-    }
-
     .k-bottom-nav-item-text {
         overflow: hidden;
         text-overflow: ellipsis;

package/scss/bottom-navigation/_variables.scss

@@ -26,10 +26,6 @@ $kendo-bottom-nav-line-height: var( --kendo-line-height-md, normal ) !default;
 /// @group bottom-navigation
 $kendo-bottom-nav-letter-spacing: .2px !default;
 
-/// Size of the focused bottom navigation item icon.
-/// @group bottom-nav
-$kendo-bottom-nav-item-icon-size: map.get( $kendo-spacing, 6 ) !default;
-
 /// Horizontal padding of the bottom navigation item.
 /// @group bottom-navigation
 $kendo-bottom-nav-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
@@ -44,7 +40,7 @@ $kendo-bottom-nav-item-min-width: 72px !default;
 $kendo-bottom-nav-item-max-width: none !default;
 /// Minimum height of the bottom navigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-min-height: calc( #{$kendo-bottom-nav-item-icon-size} + #{$kendo-bottom-nav-item-icon-size} + (#{$kendo-bottom-nav-item-padding-y} * 2) ) !default;
+$kendo-bottom-nav-item-min-height: calc( var( --kendo-icon-size, 1.5rem ) * 2 + (#{$kendo-bottom-nav-item-padding-y} * 2) ) !default;
 /// Border radius of the bottom navigation item.
 /// @group bottom-navigation
 $kendo-bottom-nav-item-border-radius: var( --kendo-border-radius-md, 0 ) !default;

package/scss/breadcrumb/_layout.scss

@@ -112,7 +112,6 @@
     .k-breadcrumb-delimiter,
     .k-breadcrumb-delimiter-icon {
         color: inherit;
-        font-size: var( --kendo-breadcrumb-delimiter-icon-font-size, #{$kendo-breadcrumb-delimiter-icon-font-size} );
     }
 
 

package/scss/breadcrumb/_variables.scss

@@ -166,10 +166,6 @@ $kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-link-padding-x !default
 /// @group breadcrumb
 $kendo-breadcrumb-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-x !default;
 
-/// The font size of the breadcrumb delimiter icon
-/// @group breadcrumb
-$kendo-breadcrumb-delimiter-icon-font-size: var( --kendo-font-size-sm, inherit ) !default;
-
 // Root link spacing
 $kendo-breadcrumb-root-link-spacing: 0px !default;
 $kendo-breadcrumb-link-icon-spacing: var( --kendo-icon-spacing, #{$kendo-icon-spacing} ) !default;

package/scss/button/_variables.scss

@@ -36,13 +36,13 @@ $kendo-button-md-font-size: var( --kendo-font-size, inherit ) !default;
 /// @group button
 $kendo-button-lg-font-size: var( --kendo-font-size, inherit ) !default;
 
-/// The line height used along with the $kendo-font-size of the small Button.
+/// The line height used along with the $kendo-font-size variable of the small Button.
 /// @group button
 $kendo-button-sm-line-height: var( --kendo-line-height, normal ) !default;
-/// The line height used along with the $kendo-font-size of the medium Button.
+/// The line height used along with the $kendo-font-size variable of the medium Button.
 /// @group button
 $kendo-button-md-line-height: var( --kendo-line-height, normal ) !default;
-/// The line height used along with the $kendo-font-size of the large Button.
+/// The line height used along with the $kendo-font-size variable of the large Button.
 /// @group button
 $kendo-button-lg-line-height: var( --kendo-line-height, normal ) !default;
 

package/scss/chip/_layout.scss

@@ -103,7 +103,6 @@
 
     // Chip icon
     .k-chip-icon {
-        font-size: inherit;
         display: flex;
         align-items: center;
         justify-content: center;

package/scss/drawer/_layout.scss

@@ -185,10 +185,10 @@
 
         .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;

package/scss/drawer/_variables.scss

@@ -65,13 +65,16 @@ $kendo-drawer-item-level-padding-x: $kendo-drawer-item-padding-x !default;
 /// @group drawer
 $kendo-drawer-item-level-count: 5 !default;
 
-/// Icon size of the drawer item.
+/// Horizontal padding of the drawer icon.
 /// @group drawer
-$kendo-drawer-icon-size: var( --kendo-icon-size, 1rem ) !default;
+$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
-$kendo-drawer-mini-initial-width: calc( 2 * #{$kendo-drawer-item-padding-x} + #{$kendo-drawer-icon-size} ) !default;
+$kendo-drawer-mini-initial-width: calc( 2 * #{$kendo-drawer-item-padding-x} + var( --kendo-icon-size, 1rem ) ) !default;
 
 /// The border width of the drawer item ripple
 /// @group drawer

package/scss/dropdowntree/_variables.scss

@@ -1,5 +1,9 @@
 @use "../core/" as *;
 @use "../popup/_variables.scss" as *;
 
+/// The horizontal padding of the DropdownTree popup
+/// @group dropdowntree
 $kendo-dropdowntree-popup-padding-x: $kendo-popup-content-padding-x !default;
+/// The vertical padding of the DropdownTree popup
+/// @group dropdowntree
 $kendo-dropdowntree-popup-padding-y: $kendo-popup-content-padding-y !default;

package/scss/dropzone/_layout.scss

@@ -26,15 +26,8 @@
         justify-content: center;
         position: relative;
 
-        .k-icon,
         .k-dropzone-icon {
             margin-block-end: var( --kendo-dropzone-icon-spacing, #{$kendo-dropzone-icon-spacing} );
-            font-size: var( --kendo-dropzone-icon-size, #{$kendo-dropzone-icon-size} );
-        }
-
-        .k-svg-icon {
-            width: var( --kendo-dropzone-icon-size, #{$kendo-dropzone-icon-size} );
-            height: var( --kendo-dropzone-icon-size, #{$kendo-dropzone-icon-size} );
         }
 
         .k-dropzone-hint {

package/scss/dropzone/_variables.scss

@@ -35,9 +35,6 @@ $kendo-dropzone-text: var( --kendo-component-text, inherit ) !default;
 /// @group dropzone
 $kendo-dropzone-border: var( --kendo-component-border, initial ) !default;
 
-/// Size of the icon.
-/// @group dropzone
-$kendo-dropzone-icon-size: calc( var( --kendo-icon-size, 1rem ) * 3 ) !default;
 /// Spacing below the icon.
 /// @group dropzone
 $kendo-dropzone-icon-spacing: map.get( $kendo-spacing, 6 ) !default;

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