@progress/kendo-theme-fluent 6.4.0-dev.1 → 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.1",
+    "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.1",
+    "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.1",
+  "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.1",
-    "@progress/kendo-theme-utils": "6.4.0-dev.1"
+    "@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": "a4d65b253b00a333fea62e6217175ff79a8ac3b0"
+  "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;

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/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

@@ -195,16 +195,6 @@
             }
         }
 
-        .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

@@ -65,9 +65,6 @@ $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.
-/// @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;
@@ -77,7 +74,7 @@ $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/_variables.scss

@@ -3,121 +3,133 @@
 @use "../core/" as *;
 @use "../button/_variables.scss" as *;
 
-/// Width of the border around the FAB.
+/// The width of the border around the FAB.
 /// @group floating-action-button
 $kendo-fab-border-width: 1px !default;
-/// Border radius of the FAB.
+/// The border radius of the FAB.
 /// @group floating-action-button
 $kendo-fab-border-radius: var( --kendo-border-radius-md, 0 ) !default;
-/// Font family of the FAB.
+/// The font family of the FAB.
 /// @group floating-action-button
 $kendo-fab-font-family: var( --kendo-font-family, inherit ) !default;
-/// Font size of the FAB.
+/// The font size of the FAB.
 /// @group floating-action-button
 $kendo-fab-font-size: var( --kendo-font-size, inherit ) !default;
-/// Line height of the FAB.
+/// The line height of the FAB.
 /// @group floating-action-button
 $kendo-fab-line-height: var( --kendo-line-height, normal ) !default;
 
-/// Horizontal padding of the FAB.
+/// The horizontal padding of the FAB.
 /// @group floating-action-button
 $kendo-fab-padding-x: map.get( $kendo-spacing, 4 ) !default;
+/// The horizontal padding of the small FAB.
+/// @group floating-action-button
 $kendo-fab-sm-padding-x: math.div( $kendo-fab-padding-x, 2 ) !default;
+/// The horizontal padding of the medium FAB.
+/// @group floating-action-button
 $kendo-fab-md-padding-x: $kendo-fab-padding-x !default;
+/// The horizontal padding of the large FAB.
+/// @group floating-action-button
 $kendo-fab-lg-padding-x: ( $kendo-fab-padding-x * 1.5 ) !default;
 
-/// Vertical padding of the FAB.
+/// The vertical padding of the FAB.
 /// @group floating-action-button
 $kendo-fab-padding-y: $kendo-fab-padding-x !default;
+/// The vertical padding of the small FAB.
+/// @group floating-action-button
 $kendo-fab-sm-padding-y: math.div( $kendo-fab-padding-y, 2 ) !default;
+/// The vertical padding of the medium FAB.
+/// @group floating-action-button
 $kendo-fab-md-padding-y: $kendo-fab-padding-y !default;
+/// The vertical padding of the large FAB.
+/// @group floating-action-button
 $kendo-fab-lg-padding-y: ( $kendo-fab-padding-y * 1.5 ) !default;
 
-/// Offset of the focused FAB.
+/// The offset of the focused FAB.
 /// @group floating-action-button
 $kendo-fab-focus-offset: $kendo-button-focus-offset !default;
-/// Outline width of the focused FAB.
+/// The outline width of the focused FAB.
 /// @group floating-action-button
 $kendo-fab-focus-outline-width: $kendo-button-focus-outline-width !default;
-/// Outline style of the focused FAB.
+/// The outline style of the focused FAB.
 /// @group floating-action-button
 $kendo-fab-focus-outline-style: $kendo-button-focus-outline-style !default;
 
-/// Horizontal padding of the FAB icon.
+/// The horizontal padding of the FAB icon.
 /// @group floating-action-button
 $kendo-fab-icon-padding-x: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
-/// Vertical padding of the FAB icon.
+/// The vertical padding of the FAB icon.
 /// @group floating-action-button
 $kendo-fab-icon-padding-y: $kendo-fab-icon-padding-x !default;
-/// FAB icon spacing.
+/// The spacing of the FAB icon.
 /// @group floating-action-button
 $kendo-fab-icon-spacing: map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 
-/// FAB items horizontal padding.
+/// The horizontal padding of the FAB items.
 /// @group floating-action-button
 $kendo-fab-items-padding-x: 0px !default;
-/// FAB items vertical padding.
+/// The vertical padding of the FAB items.
 /// @group floating-action-button
 $kendo-fab-items-padding-y: map.get( $kendo-spacing, 4 ) !default;
 
-/// FAB item text horizontal padding.
+/// The horizontal padding of the FAB item text.
 /// @group floating-action-button
 $kendo-fab-item-text-padding-x: map.get( $kendo-spacing, 1 ) !default;
-/// FAB item text vertical padding.
+/// The vertical padding of the FAB item text.
 /// @group floating-action-button
 $kendo-fab-item-text-padding-y: map.get( $kendo-spacing, 1 ) !default;
-/// Width of the FAB item text border.
+/// The width of the FAB item text border.
 /// @group floating-action-button
 $kendo-fab-item-text-border-width: 1px !default;
-/// Border style of the FAB item text.
+/// The border style of the FAB item text.
 /// @group floating-action-button
 $kendo-fab-item-text-border-style: solid !default;
-/// Border radius of the FAB item text.
+/// The border radius of the FAB item text.
 /// @group floating-action-button
 $kendo-fab-item-text-border-radius: var( --kendo-border-radius-md, 0 ) !default;
-/// Font size of the FAB item text.
+/// The font size of the FAB item text.
 /// @group floating-action-button
 $kendo-fab-item-text-font-size: var( --kendo-font-size-sm, inherit ) !default;
-/// Line height of the FAB item text.
+/// The line height of the FAB item text.
 /// @group floating-action-button
 $kendo-fab-item-text-line-height: var( --kendo-line-height-sm, inherit ) !default;
-/// The bottom margin of the FAB item.
+/// The bottom margin of the FAB item text.
 /// @group floating-action-button
 $kendo-fab-item-text-offset-x: map.get( $kendo-spacing, 2 ) !default;
 
-/// Offset of the focused FAB item.
+/// The offset of the focused FAB item.
 /// @group floating-action-button
 $kendo-fab-item-focus-offset: $kendo-button-focus-offset !default;
-/// Outline width of the focused FAB item.
+/// The outline width of the focused FAB item.
 /// @group floating-action-button
 $kendo-fab-item-focus-outline-width: $kendo-button-focus-outline-width !default;
-/// Outline style of the focused FAB item.
+/// The outline style of the focused FAB item.
 /// @group floating-action-button
 $kendo-fab-item-focus-outline-style: $kendo-button-focus-outline-style !default;
 
-/// FAB item icon horizontal padding.
+/// The horizontal padding of the FAB item icon.
 /// @group floating-action-button
 $kendo-fab-item-icon-padding-x: map.get( $kendo-spacing, 2 ) + $kendo-fab-icon-padding-x !default;
-/// FAB item icon vertical padding.
+/// The vertical padding of the FAB item icon.
 /// @group floating-action-button
 $kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-x !default;
-/// Width of the FAB item icon border.
+/// The border width of the FAB item icon.
 /// @group floating-action-button
 $kendo-fab-item-icon-border-width: 1px !default;
-/// Border style of the FAB item icon.
+/// The border style of the FAB item icon.
 /// @group floating-action-button
 $kendo-fab-item-icon-border-style: solid !default;
-/// Border radius of the FAB item icon.
+/// The border radius of the FAB item icon.
 /// @group floating-action-button
 $kendo-fab-item-icon-border-radius: 50% !default;
 
-/// Theme colors map for the FAB.
+/// The theme colors map for the FAB.
 /// @group floating-action-button
 $kendo-fab-theme-colors: (
     solid: map.get( $kendo-button-theme-colors, "solid")
 ) !default;
 
-/// Sizes map for the FAB.
+/// The size map for the FAB.
 /// @group floating-action-button
 $kendo-fab-sizes: (
     sm: (
@@ -146,30 +158,30 @@ $kendo-fab-item-bg: var( --kendo-component-bg, inherit ) !default;
 /// The base border color of the FAB item.
 /// @group floating-action-button
 $kendo-fab-item-border: get-theme-color-var( neutral-110 ) !default;
-/// The hover text color of the FAB item.
+/// The text color of the hovered FAB item.
 /// @group floating-action-button
 $kendo-fab-item-hover-text: var( --kendo-hover-text, inherit ) !default;
-/// The hover background color of the FAB item.
+/// The background color of the hovered FAB item.
 /// @group floating-action-button
 $kendo-fab-item-hover-bg: var( --kendo-hover-bg, inherit ) !default;
-/// The hover border color of the FAB item.
+/// The border color of the hovered FAB item.
 /// @group floating-action-button
 $kendo-fab-item-hover-border: get-theme-color-var( neutral-110 ) !default;
-/// The focus text color of the FAB item.
+/// The text color of the focused FAB item.
 /// @group floating-action-button
 $kendo-fab-item-focus-text: get-theme-color-var( neutral-160 ) !default;
-/// The focus background color of the FAB item.
+/// The background color of the focused FAB item.
 /// @group floating-action-button
 $kendo-fab-item-focus-bg: var( --kendo-component-bg, inherit ) !default;
-/// The focus border color of the FAB item.
+/// The border color of the focused FAB item.
 /// @group floating-action-button
 $kendo-fab-item-focus-border: get-theme-color-var( neutral-110 ) !default;
-/// The active text color of the FAB item.
+/// The text color of the active FAB item.
 /// @group floating-action-button
 $kendo-fab-item-active-text: var( --kendo-selected-text, inherit ) !default;
-/// The active background color of the FAB item.
+/// The background color of the active FAB item.
 /// @group floating-action-button
 $kendo-fab-item-active-bg: var( --kendo-selected-bg, inherit ) !default;
-/// The active border color of the FAB item.
+/// The border color of the active FAB item.
 /// @group floating-action-button
 $kendo-fab-item-active-border: get-theme-color-var( neutral-110 ) !default;

package/scss/filemanager/_layout.scss

@@ -1,4 +1,4 @@
-@use "../icon/_variables.scss"as *;
+@use "../icon/_variables.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-file-manager--layout() {
@@ -104,11 +104,6 @@
             justify-content: center;
         }
 
-        // File icon
-        .k-file-icon {
-            font-size: var( --kendo-file-manager-listview-item-icon-size, #{$kendo-file-manager-listview-item-icon-size} );
-        }
-
         // File name
         .k-file-name {
             margin-block-start: calc( var( --kendo-file-manager-spacer, #{$kendo-file-manager-spacer} ) / 2 );
@@ -155,7 +150,7 @@
         padding-block-start:  calc( var( --kendo-file-manager-preview-padding-y, #{$kendo-file-manager-preview-padding-y} ) * 3 );
         padding-block-end: var( --kendo-file-manager-preview-padding-y, #{$kendo-file-manager-preview-padding-y} );
         width: var( --kendo-file-manager-preview-width, #{$kendo-file-manager-preview-width} );
-        min-height: calc( ( var( --kendo-file-manager-preview-padding-y, #{$kendo-file-manager-preview-padding-y} ) * 4 ) + ( var( --kendo-file-manager-preview-icon-size, #{$kendo-file-manager-preview-icon-size} ) * 2 ) + ( var( --kendo-file-manager-preview-spacing, #{$kendo-file-manager-preview-spacing} ) * 3 ) );
+        min-height: calc( ( var( --kendo-file-manager-preview-padding-y, #{$kendo-file-manager-preview-padding-y} ) * 4 ) + var( --kendo-icon-size, 1rem ) * 2 + ( var( --kendo-file-manager-preview-spacing, #{$kendo-file-manager-preview-spacing} ) * 3 ) );
         border-width: 0;
         border-left-width: var( --kendo-file-manager-preview-border-width, #{$kendo-file-manager-preview-border-width} );
         border-style: solid;
@@ -172,11 +167,6 @@
             justify-content: center;
         }
 
-        // File icon
-        .k-file-icon {
-            font-size: var( --kendo-file-manager-preview-icon-size, #{$kendo-file-manager-preview-icon-size} );
-        }
-
         // File name
         .k-file-name {
             margin-block-start: var( --kendo-file-manager-preview-spacing, #{$kendo-file-manager-preview-spacing} );