@progress/kendo-theme-fluent 6.8.0-dev.2 → 7.0.0

package/lib/swatches/all.json

@@ -3,7 +3,7 @@
     "name": "All",
     "product": "kendo",
     "base": "@progress/kendo-theme-fluent",
-    "version": "6.8.0-dev.2",
+    "version": "7.0.0",
     "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.8.0-dev.2",
+    "version": "7.0.0",
     "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.8.0-dev.2",
+  "version": "7.0.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -51,9 +51,9 @@
     "postpublish": "echo 'no postpublish for the Fluent theme'"
   },
   "dependencies": {
-    "@progress/kendo-font-icons": "1.9.0",
-    "@progress/kendo-theme-core": "6.8.0-dev.2",
-    "@progress/kendo-theme-utils": "6.8.0-dev.2"
+    "@progress/kendo-svg-icons": "2.0.0",
+    "@progress/kendo-theme-core": "7.0.0",
+    "@progress/kendo-theme-utils": "7.0.0"
   },
-  "gitHead": "1d0254882897f857ca96fd31477a6e2c18d18433"
+  "gitHead": "61d73126ecd6c97602f73d0adf12a12bdafe4d0a"
 }

package/scss/action-sheet/_variables.scss

@@ -48,7 +48,7 @@ $kendo-actionsheet-text: var( --kendo-component-text, initial ) !default;
 $kendo-actionsheet-border: var( --kendo-component-border, initial ) !default;
 /// Box shadow of the action sheet.
 /// @group action-sheet
-$kendo-actionsheet-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
+$kendo-actionsheet-shadow: var( --kendo-box-shadow-depth-7, none ) !default;
 
 /// Horizontal padding of the action sheet header.
 /// @group action-sheet

package/scss/badge/_layout.scss

@@ -54,7 +54,7 @@
         max-height: 1em;
         font-size: inherit;
     }
-    .k-badge-icon.k-svg-icon svg {
+    .k-badge-icon svg {
         fill: currentColor;
     }
 

package/scss/bottom-navigation/_variables.scss

@@ -60,7 +60,7 @@ $kendo-bottom-nav-item-focus-outline-style: solid !default;
 
 /// The box shadow of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
+$kendo-bottom-nav-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
 
 /// The theme variations for the BottomNavigation.
 /// @group bottom-navigation
@@ -166,4 +166,4 @@ $kendo-bottom-nav-theme-colors: () !default;
         $kendo-bottom-nav-theme-colors,
         k-generate-fill-mode-theme-variation( $fill-mode, light, neutral, $ui-states )
     );
-}
+}

package/scss/breadcrumb/_layout.scss

@@ -94,8 +94,7 @@
     }
 
     .k-breadcrumb-link > .k-image,
-    .k-breadcrumb-icontext-link .k-icon,
-    .k-breadcrumb-icontext-link .k-svg-icon {
+    .k-breadcrumb-icontext-link .k-icon {
         margin-inline-end: var( --kendo-breadcrumb-link-icon-spacing, #{$kendo-breadcrumb-link-icon-spacing} );
     }
 

package/scss/chat/_variables.scss

@@ -168,7 +168,7 @@ $kendo-chat-bubble-border: $kendo-chat-bubble-bg !default;
 $kendo-chat-bubble-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
 /// The hover shadow of the bubble in the chat.
 /// @group chat
-$kendo-chat-bubble-hover-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
+$kendo-chat-bubble-hover-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 /// The selected shadow of the bubble in the chat.
 /// @group chat
 $kendo-chat-bubble-selected-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
@@ -187,10 +187,10 @@ $kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-bg !default;
 $kendo-chat-alt-bubble-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
 /// The hover shadow of the alt bubble in the chat.
 /// @group chat
-$kendo-chat-alt-bubble-hover-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
+$kendo-chat-alt-bubble-hover-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 /// The selected shadow of the alt bubble in the chat.
 /// @group chat
-$kendo-chat-alt-bubble-selected-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
+$kendo-chat-alt-bubble-selected-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
 
 /// The background of quick reply in the chat.
 /// @group chat

package/scss/colorgradient/_layout.scss

@@ -70,6 +70,8 @@
         width: var( --kendo-color-gradient-draghandle-width, #{$kendo-color-gradient-draghandle-width} );
         height: var( --kendo-color-gradient-draghandle-height, #{$kendo-color-gradient-draghandle-height} );
         border-width: var( --kendo-color-gradient-draghandle-border-width, #{$kendo-color-gradient-draghandle-border-width} );
+        outline-width: var( --kendo-color-gradient-draghandle-outline-width, #{$kendo-color-gradient-draghandle-outline-width} );
+        outline-style: solid;
         box-sizing: border-box;
     }
 
@@ -168,14 +170,12 @@
             align-items: center;
             gap: calc( var( --kendo-color-gradient-contrast-spacing,  #{$kendo-color-gradient-contrast-spacing} ) / 2 );
 
-            .k-icon,
-            .k-svg-icon {
+            .k-icon {
                 vertical-align: middle;
             }
 
             // Needed for the double check icons
             .k-icon + .k-icon,
-            .k-svg-icon + .k-svg-icon,
             .k-icon-wrapper-host + .k-icon-wrapper-host .k-icon {
                 margin-inline-start: -13px;
             }

package/scss/colorgradient/_theme.scss

@@ -20,9 +20,6 @@
         @include fill(
             $border: var( --kendo-color-gradient-focus-border, #{$kendo-color-gradient-focus-border} )
         );
-        @include box-shadow(
-            var( --kendo-color-gradient-focus-shadow, #{$kendo-color-gradient-focus-shadow} )
-        );
     }
 
     // Canvas
@@ -43,6 +40,7 @@
         @include fill(
             $border: var( --kendo-color-gradient-draghandle-border, #{$kendo-color-gradient-draghandle-border })
         );
+        outline-color: $kendo-color-gradient-draghandle-focus-shadow;
         @include box-shadow(
             var( --kendo-color-gradient-draghandle-shadow, #{$kendo-color-gradient-draghandle-shadow} )
         );
@@ -52,38 +50,13 @@
             @include fill(
                 $border: var( --kendo-color-gradient-draghandle-focus-border, #{$kendo-color-gradient-draghandle-focus-border} )
             );
-            @include box-shadow(
-                var( --kendo-color-gradient-draghandle-focus-shadow, #{$kendo-color-gradient-draghandle-focus-shadow} )
-            );
+            outline-color: $kendo-color-gradient-draghandle-focus-shadow;
         }
 
         &:active,
         &:hover,
         &.k-hover {
-            @include box-shadow(
-                var( --kendo-color-gradient-draghandle-hover-shadow, #{$kendo-color-gradient-draghandle-hover-shadow} )
-            );
-        }
-    }
-
-    .k-colorgradient .k-hsv-draghandle {
-        @include box-shadow(
-            var( --kendo-color-gradient-canvas-draghandle-shadow, #{$kendo-color-gradient-canvas-draghandle-shadow} )
-        );
-
-        &:focus,
-        &.k-focus {
-            @include box-shadow(
-                var( --kendo-color-gradient-canvas-draghandle-shadow, #{$kendo-color-gradient-canvas-draghandle-shadow} )
-            );
-        }
-
-        &:active,
-        &:hover,
-        &.k-hover {
-            @include box-shadow(
-                var( --kendo-color-gradient-canvas-draghandle-shadow, #{$kendo-color-gradient-canvas-draghandle-shadow} )
-            );
+            outline-color: $kendo-color-gradient-draghandle-hover-shadow;
         }
     }
 

package/scss/colorgradient/_variables.scss

@@ -11,7 +11,7 @@ $kendo-color-gradient-spacer: map.get( $kendo-spacing, 4 ) !default;
 $kendo-color-gradient-width: 260px !default;
 /// The width of the border around the ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-border-width: 1px !default;
+$kendo-color-gradient-border-width: 2px !default;
 /// The border radius of the ColorGradient.
 /// @group cologradient
 $kendo-color-gradient-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
@@ -71,7 +71,7 @@ $kendo-color-gradient-canvas-rectangle-height: 180px !default;
 $kendo-color-gradient-canvas-rectangle-border: k-get-theme-color-var( neutral-30 ) !default;
 /// The box shadow of the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-canvas-draghandle-shadow: 0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13), inset 0px 0px 0px 3px #FFFFFF !default;
+$kendo-color-gradient-canvas-draghandle-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 
 /// The width of the ColorGradient slider.
 /// @group cologradient
@@ -104,22 +104,28 @@ $kendo-color-gradient-draghandle-width: 20px !default;
 $kendo-color-gradient-draghandle-height: 20px !default;
 /// The width of the border around the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-border-width: 1px !default;
+$kendo-color-gradient-draghandle-border-width: 2px !default;
+/// The width of the outline around the ColorGradient canvas drag handle.
+/// @group cologradient
+$kendo-color-gradient-draghandle-outline-width: 1px !default;
 /// The color of the border around the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-border: k-get-theme-color-var( neutral-110 ) !default;
+$kendo-color-gradient-draghandle-border: $kendo-color-white !default;
+/// The color of the outline around the ColorGradient canvas drag handle.
+/// @group cologradient
+$kendo-color-gradient-draghandle-shadow: k-get-theme-color-var( neutral-110 ) !default;
 /// The box shadow of the ColorGradient canvas drag handle.
 /// @group cologradient
 $kendo-color-gradient-draghandle-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 /// The color of the border around the focused ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-focus-border: k-get-theme-color-var( neutral-160 ) !default;
-/// The box shadow of the focused ColorGradient canvas drag handle.
+$kendo-color-gradient-draghandle-focus-border: $kendo-color-white !default;
+/// The focus color of the outline around the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-focus-shadow: $kendo-color-gradient-draghandle-shadow !default;
-/// The box shadow of the hovered ColorGradient canvas drag handle.
+$kendo-color-gradient-draghandle-focus-shadow: k-get-theme-color-var( neutral-130 ) !default;
+/// The hover color of the outline around the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-hover-shadow: $kendo-color-gradient-draghandle-focus-shadow !default;
+$kendo-color-gradient-draghandle-hover-shadow: k-get-theme-color-var( neutral-130 ) !default;
 
 /// The vertical offset of the ColorGradient canvas drag handle.
 /// @group cologradient
@@ -149,4 +155,4 @@ $kendo-color-gradient-input-label-text: var( --kendo-subtle-text, inherit ) !def
 $kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 /// The spacing between the items in the ColorGradient contrast tool.
 /// @group cologradient
-$kendo-color-gradient-contrast-spacing: math.div( $kendo-color-gradient-spacer, 1.5 ) !default;
+$kendo-color-gradient-contrast-spacing: math.div( $kendo-color-gradient-spacer, 1.5 ) !default;

package/scss/core/_index.scss

@@ -4,11 +4,17 @@
 @forward "./color-system/palettes";
 @use "./color-system/palettes" as *;
 
+// Elevation
+@use "./elevation" as *;
+@forward "./elevation/legacy";
+
 // Variables
 @forward "./variables";
 
-@forward "@progress/kendo-theme-core/scss/index.import.scss" with (
-    $kendo-palettes: $kendo-fluent-palettes
+@forward "@progress/kendo-theme-core/scss/index.import.scss"  with (
+    $kendo-palettes: $kendo-fluent-palettes,
+    $_default-elevation: $kendo-elevation,
+    $kendo-elevation: $kendo-elevation !default,
 );
 
 // Helpers
@@ -21,7 +27,7 @@ $components: null !default;
 
 @mixin core-configure($config: null) {
     @if $config {
-        $_components: map.get( $config, "components" );
+        $_components: map.get($config, "components");
 
         @if ($_components) {
             module.$components: $_components;

package/scss/core/_legacy.scss

@@ -0,0 +1,4 @@
+@use "./index" as *;
+@forward "./elevation" with (
+    $kendo-elevation: $kendo-elevation
+)

package/scss/core/elevation/_index.scss

@@ -0,0 +1,44 @@
+@use "sass:map";
+
+$_default-elevation: (
+    1: (
+        0 0.3px 0.9px rgba(0, 0, 0, 0.1),
+        0 1.6px 3.6px rgba(0, 0, 0, 0.13),
+    ),
+    2: (
+        0 0.6px 1.8px rgba(0, 0, 0, 0.1),
+        0 3.2px 7.2px rgba(0, 0, 0, 0.13),
+    ),
+    3: (
+        0 0.9px 2.7px rgba(0, 0, 0, 0.1),
+        0 4.8px 10.8px rgba(0, 0, 0, 0.13),
+    ),
+    4: (
+        0 1.2px 3.6px rgba(0, 0, 0, 0.1),
+        0 6.4px 14.4px rgba(0, 0, 0, 0.13),
+    ),
+    5: (
+        0 1.8px 5.4px rgba(0, 0, 0, 0.1),
+        0 9.6px 21.6px rgba(0, 0, 0, 0.13),
+    ),
+    6: (
+        0 2.4px 7.2px rgba(0, 0, 0, 0.18),
+        0 12.8px 28.8px rgba(0, 0, 0, 0.22),
+    ),
+    7: (
+        0 3.2px 10.8px rgba(0, 0, 0, 0.18),
+        0 19.2px 43.2px rgba(0, 0, 0, 0.22),
+    ),
+    8: (
+        0 4.8px 14.4px rgba(0, 0, 0, 0.18),
+        0 25.6px 57.6px rgba(0, 0, 0, 0.22),
+    ),
+    9: (
+        0 6.4px 18px rgba(0, 0, 0, 0.18),
+        0 32px 72px rgba(0, 0, 0, 0.22),
+    ),
+);
+
+/// Global Elevation.
+/// @group elevation
+$kendo-elevation: $_default-elevation !default;

package/scss/core/elevation/_legacy.scss

@@ -0,0 +1,48 @@
+@use "sass:map";
+@use "./index" as *;
+
+/// Shadow for cards and grid item thumbnails.
+/// Equivalent to fluent depth 4.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-1: var( --kendo-elevation-1, none ) !default;
+/// Shadow for color gradient drag handle.
+/// Equivalent to fluent depth 8.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-2: var( --kendo-elevation-2, none ) !default;
+/// Shadow for focus card.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-3: var( --kendo-elevation-3, none ) !default;
+/// Shadow for panels.
+/// Equivalent to fluent depth 16.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-4: var( --kendo-elevation-4, none ) !default;
+/// Shadow for floating action button.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-5: var( --kendo-elevation-5, none ) !default;
+/// Shadow for pop up.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-6: var( --kendo-elevation-6, none ) !default;
+/// Shadow for action sheet.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-7: var( --kendo-elevation-7, none ) !default;
+/// Shadow for dialogs and window.
+/// Equivalent to fluent depth 64.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-8: var( --kendo-elevation-8, none ) !default;
+/// Shadow for focus window.
+/// @deprecated Use the `$kendo-elevation` map instead.
+$kendo-box-shadow-depth-9: var( --kendo-elevation-8, none ) !default;
+
+@mixin elevation--styles-legacy() {
+    :root {
+        --kendo-box-shadow-depth-1: #{$kendo-box-shadow-depth-1};
+        --kendo-box-shadow-depth-2: #{$kendo-box-shadow-depth-2};
+        --kendo-box-shadow-depth-3: #{$kendo-box-shadow-depth-3};
+        --kendo-box-shadow-depth-4: #{$kendo-box-shadow-depth-4};
+        --kendo-box-shadow-depth-5: #{$kendo-box-shadow-depth-5};
+        --kendo-box-shadow-depth-6: #{$kendo-box-shadow-depth-6};
+        --kendo-box-shadow-depth-7: #{$kendo-box-shadow-depth-7};
+        --kendo-box-shadow-depth-8: #{$kendo-box-shadow-depth-8};
+        --kendo-box-shadow-depth-9: #{$kendo-box-shadow-depth-9};
+    }
+}

package/scss/core/helpers/_index.scss

@@ -1,6 +1,7 @@
 @use "./asp-fallback";
 @use "./animations";
 @use "./extra";
+@use "./indicators";
 @use "./reset";
 @use "./normalize";
 @use "./resizing";

package/scss/core/helpers/_indicators.scss

@@ -0,0 +1,35 @@
+$kendo-current-time-width: 1px !default;
+$kendo-current-time-color: #ff0000 !default;
+
+// Layout
+.k-current-time {
+    width: var( --kendo-current-time-width, #{$kendo-current-time-width} );
+    position: absolute;
+
+    &.k-current-time-arrow-left,
+    &.k-current-time-arrow-right,
+    &.k-current-time-arrow-down {
+        width: 0;
+        height: 0;
+        background: transparent;
+        border: 4px solid transparent;
+    }
+}
+
+
+// Theme
+.k-current-time {
+    background: var( --kendo-current-time-color, #{$kendo-current-time-color} );
+
+    &.k-current-time-arrow-left {
+        border-right-color: var( --kendo-current-time-color, #{$kendo-current-time-color} );
+    }
+
+    &.k-current-time-arrow-right {
+        border-left-color: var( --kendo-current-time-color, #{$kendo-current-time-color} );
+    }
+
+    &.k-current-time-arrow-down {
+        border-top-color: var( --kendo-current-time-color, #{$kendo-current-time-color} );
+    }
+}

package/scss/dataviz/_variables.scss

@@ -218,7 +218,7 @@ $kendo-selection-border-color: var( --kendo-component-border, initial ) !default
 $kendo-treemap-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font-size of the treemap.
 /// @group charts
-$kendo-treemap-font-size: var( -kendo-font-size, inherit ) !default;
+$kendo-treemap-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line-height of the treemap.
 /// @group charts
 $kendo-treemap-line-height: var( --kendo-line-height, normal ) !default;

package/scss/dialog/_variables.scss

@@ -50,7 +50,7 @@ $kendo-dialog-button-spacing: map.get( $kendo-spacing, 2 ) !default; // $kendo-a
 
 /// The box shadow around the Dialog.
 /// @group dialog
-$kendo-dialog-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
+$kendo-dialog-shadow: var( --kendo-box-shadow-depth-8, none ) !default;
 
 /// The theme variations for the Dialog.
 $kendo-dialog-brand-colors: (

package/scss/drawer/_layout.scss

@@ -183,7 +183,6 @@
             gap: var( --kendo-drawer-item-padding-x, #{$kendo-drawer-item-padding-x} );
         }
 
-        .k-svg-icon,
         .k-icon {
             flex-shrink: 0;
             padding-inline: var( --kendo-drawer-icon-padding-x, #{$kendo-drawer-icon-padding-x} );

package/scss/drawer/_theme.scss

@@ -31,7 +31,6 @@
             var( --kendo-drawer-item-bg, #{$kendo-drawer-item-bg} )
         );
 
-        .k-svg-icon,
         .k-icon {
             color: var( --kendo-drawer-item-icon-text, #{$kendo-drawer-item-icon-text} );
         }
@@ -43,7 +42,6 @@
                 var( --kendo-drawer-item-hover-bg, #{$kendo-drawer-item-hover-bg} )
             );
 
-            .k-svg-icon,
             .k-icon {
                 color: var( --kendo-drawer-item-hover-icon-text, #{$kendo-drawer-item-hover-icon-text} );
             }
@@ -57,7 +55,6 @@
             );
             box-shadow: var( --kendo-drawer-item-focus-shadow, #{$kendo-drawer-item-focus-shadow} );
 
-            .k-svg-icon,
             .k-icon {
                 color: var( --kendo-drawer-item-focus-icon-text, #{$kendo-drawer-item-focus-icon-text} );
             }
@@ -77,7 +74,6 @@
                 var( --kendo-drawer-item-selected-bg, #{$kendo-drawer-item-selected-bg} )
             );
 
-            .k-svg-icon,
             .k-icon {
                 color: var( --kendo-drawer-item-selected-icon-text, #{$kendo-drawer-item-selected-icon-text} );
             }

package/scss/dropzone/_theme.scss

@@ -12,7 +12,6 @@
         );
 
         .k-icon,
-        .k-svg-icon,
         .k-dropzone-icon {
             color: var( --kendo-dropzone-icon-text, #{$kendo-dropzone-icon-text} );
         }
@@ -28,7 +27,6 @@
     // Hover
     .k-external-dropzone-hover {
         .k-icon,
-        .k-svg-icon,
         .k-dropzone-icon {
             color: var( --kendo-dropzone-icon-hover-text, #{$kendo-dropzone-icon-hover-text} );
         }

package/scss/editor/_layout.scss

@@ -150,13 +150,11 @@
         flex-shrink: 0;
 
         .k-editor-export {
-            .k-icon,
-            .k-svg-icon {
+            .k-icon {
                 margin-inline-end: var( --kendo-editor-export-tool-icon-margin-x, #{$kendo-editor-export-tool-icon-margin-x} );
             }
 
             .k-icon,
-            .k-svg-icon,
             .k-export-tool-text {
                 vertical-align: middle;
             }
@@ -364,8 +362,7 @@
                 flex: 1;
                 width: 100px; // fix width for Edge
             }
-            .k-icon,
-            .k-svg-icon {
+            .k-icon {
                 margin: 0;
                 position: static;
             }
@@ -463,8 +460,7 @@
             inset-inline-start: $kendo-input-md-padding-x;
             inset-block-start: $kendo-input-md-padding-y;
 
-            .k-icon,
-            .k-svg-icon {
+            .k-icon {
                 position: static;
                 margin-block-start: 0;
             }

package/scss/filemanager/_layout.scss

@@ -232,8 +232,7 @@
         align-items: center;
     }
 
-    .k-filemanager-drag-hint .k-icon,
-    .k-filemanager-drag-hint .k-svg-icon {
+    .k-filemanager-drag-hint .k-icon {
         margin-inline-end: var( --kendo-icon-spacing, .5rem );
 
     }

package/scss/grid/_layout.scss

@@ -157,8 +157,7 @@
             text-overflow: clip;
         }
 
-        .k-grouping-row .k-icon,
-        .k-grouping-row .k-svg-icon {
+        .k-grouping-row .k-icon {
             margin-inline-start: calc( ( var( --kendo-icon-size, 1rem ) / 2 ) - var( --INTERNAL--kendo-grid-cell-padding-x, 0 ) );
             margin-inline-end: calc( var( --kendo-icon-size, 1rem ) / 2 );
             text-decoration: none;
@@ -182,15 +181,14 @@
             padding: 0;
             overflow: visible;
 
-            > .k-icon,
-            > .k-svg-icon {
+            > .k-icon {
                 padding-inline: 0;
                 padding-block: var( --INTERNAL--kendo-grid-cell-padding-y, 0 );
                 display: inline-block;
                 outline: 0;
             }
 
-            > .k-icon {
+            > .k-font-icon {
                 width: 100%;
                 height: 100%;
             }
@@ -240,8 +238,7 @@
         .k-grid-filter,
         .k-header-column-menu,
         .k-grid-header-menu,
-        .k-hierarchy-cell .k-icon,
-        .k-hierarchy-cell .k-svg-icon {
+        .k-hierarchy-cell .k-icon {
             border-width: 0;
         }
 
@@ -416,8 +413,7 @@
             text-overflow: ellipsis;
             outline: 0;
 
-            > .k-icon,
-            > .k-svg-icon {
+            > .k-icon {
                 margin-inline-start: var( --kendo-grid-sort-icon-spacing, #{$kendo-grid-sort-icon-spacing} );
             }
         }
@@ -452,7 +448,6 @@
         }
 
         .k-cell-inner > .k-link > .k-icon,
-        .k-cell-inner > .k-link > .k-svg-icon,
         .k-cell-inner > .k-link > .k-sort-icon {
             vertical-align: text-top;
             margin-inline-start: var( --kendo-grid-sort-icon-spacing, #{$kendo-grid-sort-icon-spacing} );
@@ -960,8 +955,7 @@
             flex: 1;
             overflow: hidden;
 
-            > .k-icon,
-            > .k-svg-icon {
+            > .k-icon {
                 margin-left: 0;
                 display: inline-block;
                 flex-shrink: 0;
@@ -984,8 +978,7 @@
         .k-grid-filter,
         .k-header-column-menu,
         .k-grid-header-menu,
-        .k-hierarchy-cell .k-icon,
-        .k-hierarchy-cell .k-svg-icon {
+        .k-hierarchy-cell .k-icon {
             text-align: center;
             display: inline-block;
             flex-shrink: 0;
@@ -1306,7 +1299,6 @@
         cursor: pointer;
 
         > .k-icon,
-        > .k-svg-icon,
         > .k-expander-indicator {
             margin-inline-end: var( --kendo-grid-column-menu-item-icon-spacing, #{$kendo-grid-column-menu-item-icon-spacing} );
         }