@progress/kendo-theme-fluent 14.4.0-dev.2 → 14.4.0-dev.4

package/scss/pdf-viewer/_variables.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
 @use "../button/_variables.scss" as *;
 @use "../dropzone/_variables.scss" as *;
 
@@ -83,7 +84,7 @@ $kendo-pdf-viewer-search-panel-border: var( --kendo-pdf-viewer-search-panel-bord
 $kendo-pdf-viewer-search-panel-shadow: var( --kendo-pdf-viewer-search-panel-shadow, none ) !default;
 /// The spacing of the matches container in the PDFViewer search panel.
 /// @group pdf-viewer
-$kendo-pdf-viewer-search-panel-matches-spacing: var( --kendo-pdf-viewer-search-panel-matches-spacing, var( --kendo-icon-spacing, .5rem ) ) !default;
+$kendo-pdf-viewer-search-panel-matches-spacing: var( --kendo-pdf-viewer-search-panel-matches-spacing, #{$kendo-icon-spacing} ) !default;
 /// The vertical margin of the PDFViewer search panel.
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-margin-y: var( --kendo-pdf-viewer-search-panel-margin-y ,calc( ( #{$kendo-button-calc-size} + ( 2 * #{$kendo-pdf-viewer-search-panel-border-width} ) + ( 2 * #{$kendo-pdf-viewer-search-panel-padding-y} ) ) * -1 )) !default;

package/scss/pivotgrid/_layout.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
 @use "./_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/pivotgrid/_layout.scss" as *;
 
@@ -109,7 +110,7 @@
     }
 
     .k-pivotgrid-toggle {
-        margin-block: calc( var( --kendo-icon-padding ) * -1 );
-        padding: var( --kendo-icon-padding, .25rem );
+        margin-block: calc( #{k-spacing(1)} * -1 );
+        padding: k-spacing(1);
     }
 }

package/scss/scheduler/_variables.scss

@@ -260,6 +260,10 @@ $kendo-scheduler-more-btn-height: var( --kendo-scheduler-more-btn-height, 13px )
 /// The color of the Scheduler marquee.
 /// @group scheduler
 $kendo-scheduler-marquee-color: var( --kendo-scheduler-marquee-color, k-color(primary) ) !default;
+
+/// The spacing between icon and text in Scheduler navigation items.
+/// @group scheduler
+$kendo-scheduler-nav-item-icon-spacing: var( --kendo-scheduler-nav-item-icon-spacing, #{k-spacing(2)} ) !default;
 // Adaptive
 $kendo-scheduler-adaptive-bg: var( --kendo-scheduler-adaptive-bg, #{k-color(surface-alt)} ) !default;
 $kendo-scheduler-adaptive-text: var( --kendo-scheduler-adaptive-text, #{k-color(on-app-surface)} ) !default;
@@ -349,6 +353,7 @@ $kendo-scheduler-adaptive-subtle-text: var( --kendo-scheduler-adaptive-subtle-te
     $kendo-scheduler-tooltip-event-border-radius: $kendo-scheduler-tooltip-event-border-radius,
     $kendo-scheduler-tooltip-event-gap: $kendo-scheduler-tooltip-event-gap,
     $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-callout-color,
+    $kendo-scheduler-nav-item-icon-spacing: $kendo-scheduler-nav-item-icon-spacing,
     $kendo-scheduler-adaptive-bg: $kendo-scheduler-adaptive-bg,
     $kendo-scheduler-adaptive-text: $kendo-scheduler-adaptive-text,
     $kendo-scheduler-adaptive-border: $kendo-scheduler-adaptive-border,

package/scss/spreadsheet/_variables.scss

@@ -1,6 +1,7 @@
 @use "sass:color";
 @use "sass:map";
 @use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
 @use "../table/_variables.scss" as *;
 @use "../input/_variables.scss" as *;
 @use "../core/spacing/_index.scss" as *;
@@ -210,7 +211,7 @@ $kendo-spreadsheet-sheets-remove-inline-end: var( --kendo-spreadsheet-sheets-rem
 
 /// The left padding of the Spreadsheet sheets menu.
 /// @group spreadsheet
-$kendo-filter-menu-padding-left: var( --kendo-filter-menu-padding-left, calc( var( --kendo-icon-size, 1rem ) + 2 * k-spacing(1) ) ) !default;
+$kendo-filter-menu-padding-left: var( --kendo-filter-menu-padding-left, calc( #{$kendo-icon-size} + 2 * k-spacing(1) ) ) !default;
 
 /// The padding of the Spreadsheet filter.
 /// @group spreadsheet

package/scss/stepper/_variables.scss

@@ -37,6 +37,10 @@ $kendo-stepper-label-padding-y: var( --kendo-stepper-label-padding-y, k-spacing(
 /// @group stepper
 $kendo-stepper-label-border-radius: var( --kendo-stepper-label-border-radius, k-border-radius(xxl) ) !default;
 
+/// The spacing between icon and text in Stepper labels.
+/// @group stepper
+$kendo-stepper-label-icon-spacing: var( --kendo-stepper-label-icon-spacing, #{k-spacing(2)} ) !default;
+
 /// The horizontal padding of the Stepper content.
 /// @group stepper
 $kendo-stepper-inline-content-padding-x: var( --kendo-stepper-inline-content-padding-x, k-spacing(5) ) !default;
@@ -208,6 +212,7 @@ $kendo-stepper-content-transition-timing-function: var( --kendo-stepper-content-
     $kendo-stepper-label-padding-x: $kendo-stepper-label-padding-x,
     $kendo-stepper-label-padding-y: $kendo-stepper-label-padding-y,
     $kendo-stepper-label-border-radius: $kendo-stepper-label-border-radius,
+    $kendo-stepper-label-icon-spacing: $kendo-stepper-label-icon-spacing,
     $kendo-stepper-border-width: $kendo-stepper-border-width,
     $kendo-stepper-inline-content-padding-x: $kendo-stepper-inline-content-padding-x,
     $kendo-stepper-inline-content-padding-y: $kendo-stepper-inline-content-padding-y,

package/scss/tabstrip/_variables.scss

@@ -79,6 +79,10 @@ $kendo-tabstrip-item-border-radius: var( --kendo-tabstrip-item-border-radius, #{
 /// @group tabstrip
 $kendo-tabstrip-item-gap: var( --kendo-tabstrip-item-gap, #{k-spacing(2)} ) !default;
 
+/// The spacing between icon and text in TabStrip tab items.
+/// @group tabstrip
+$kendo-tabstrip-item-icon-spacing: var( --kendo-tabstrip-item-icon-spacing, #{k-spacing(2)} ) !default;
+
 /// The horizontal spacing of the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-spacing-x: var( --kendo-tabstrip-item-spacing-x, #{k-spacing(1)} ) !default;
@@ -219,6 +223,7 @@ $kendo-tabstrip-scroll-button-spacing: var( --kendo-tabstrip-scroll-button-spaci
     $kendo-tabstrip-item-border-width: $kendo-tabstrip-item-border-width,
     $kendo-tabstrip-item-border-radius: $kendo-tabstrip-item-border-radius,
     $kendo-tabstrip-item-gap: $kendo-tabstrip-item-gap,
+    $kendo-tabstrip-item-icon-spacing: $kendo-tabstrip-item-icon-spacing,
     $kendo-tabstrip-item-spacing-x: $kendo-tabstrip-item-spacing-x,
     $kendo-tabstrip-sm-item-padding-x: $kendo-tabstrip-sm-item-padding-x,
     $kendo-tabstrip-sm-item-padding-y: $kendo-tabstrip-sm-item-padding-y,

package/scss/toolbar/_variables.scss

@@ -41,6 +41,10 @@ $kendo-toolbar-md-spacing: var( --kendo-toolbar-md-spacing, #{k-spacing(3)} ) !d
 /// @group toolbar
 $kendo-toolbar-lg-spacing: var( --kendo-toolbar-lg-spacing, #{k-spacing(3)} ) !default;
 
+/// The spacing between icon and text in Toolbar items.
+/// @group toolbar
+$kendo-toolbar-item-icon-spacing: var( --kendo-toolbar-item-icon-spacing, #{k-spacing(2)} ) !default;
+
 /// The height of the small Toolbar button separator.
 /// @group toolbar
 $kendo-toolbar-sm-separator-height: var( --kendo-toolbar-sm-separator-height, #{$kendo-button-sm-calc-size} ) !default;
@@ -141,6 +145,7 @@ $kendo-floating-toolbar-border-radius: var( --kendo-floating-toolbar-border-radi
     $kendo-toolbar-sm-spacing: $kendo-toolbar-sm-spacing,
     $kendo-toolbar-md-spacing: $kendo-toolbar-md-spacing,
     $kendo-toolbar-lg-spacing: $kendo-toolbar-lg-spacing,
+    $kendo-toolbar-item-icon-spacing: $kendo-toolbar-item-icon-spacing,
     $kendo-toolbar-sm-separator-height: $kendo-toolbar-sm-separator-height,
     $kendo-toolbar-md-separator-height: $kendo-toolbar-md-separator-height,
     $kendo-toolbar-lg-separator-height: $kendo-toolbar-lg-separator-height,

package/scss/tooltip/_variables.scss

@@ -8,6 +8,10 @@ $kendo-tooltip-border-radius: var( --kendo-tooltip-border-radius, #{k-border-rad
 /// The horizontal padding of the Tooltip.
 /// @group tooltip
 $kendo-tooltip-padding-x: var( --kendo-tooltip-padding-x, #{k-spacing(3)} ) !default;
+
+/// The spacing between icon and tooltip text/button.
+/// @group tooltip
+$kendo-tooltip-icon-spacing: var( --kendo-tooltip-icon-spacing, #{k-spacing(2)} ) !default;
 /// The vertical padding of the Tooltip.
 /// @group tooltip
 $kendo-tooltip-padding-y: var( --kendo-tooltip-padding-y, #{k-spacing(1.5)} ) !default;
@@ -66,6 +70,7 @@ $kendo-tooltip-theme: tooltip-theme( $kendo-tooltip-theme-colors ) !default;
 @forward "@progress/kendo-theme-core/scss/components/tooltip/_variables.scss" with (
     $kendo-tooltip-padding-y: $kendo-tooltip-padding-y,
     $kendo-tooltip-padding-x: $kendo-tooltip-padding-x,
+    $kendo-tooltip-icon-spacing: $kendo-tooltip-icon-spacing,
     $kendo-tooltip-border-width: $kendo-tooltip-border-width,
     $kendo-tooltip-border-radius: $kendo-tooltip-border-radius,
     $kendo-tooltip-font-family: $kendo-tooltip-font-family,

package/scss/treelist/_layout.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
 @use "./_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/treelist/_layout.scss" as *;
 
@@ -22,6 +23,6 @@
     }
 
     .k-treelist-toggle {
-        padding: var( --kendo-icon-padding, k-spacing(1) );
+        padding: k-spacing(1);
     }
 }

package/scss/treeview/_layout.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
 @use "./_variables.scss" as *;
 @use "@progress/kendo-theme-core/scss/components/treeview/_layout.scss" as *;
 
@@ -12,18 +13,18 @@
     }
 
     .k-treeview-toggle .k-icon {
-        padding: var( --kendo-icon-padding, k-spacing(1) );
+        padding: k-spacing(1);
     }
 
     .k-treeview-loading {
-        margin-inline-end: var( --kendo-icon-spacing, k-spacing(2) );
+        margin-inline-end: $kendo-treeview-item-icon-spacing;
     }
 
     .k-treeview-leaf {
         .k-icon,
         .k-image,
         .k-sprite {
-            margin-inline-end: var( --kendo-icon-spacing, k-spacing(2) );
+            margin-inline-end: $kendo-treeview-item-icon-spacing;
         }
     }
 }

package/scss/treeview/_variables.scss

@@ -8,6 +8,10 @@ $kendo-treeview-default-size: "md" !default;
 /// The gap of the TreeView.
 /// @group treeview
 $kendo-treeview-gap: var( --kendo-treeview-gap, k-spacing(0.5) ) !default;
+
+/// The spacing between icon and text in TreeView items.
+/// @group treeview
+$kendo-treeview-item-icon-spacing: var( --kendo-treeview-item-icon-spacing, #{k-spacing(2)} ) !default;
 /// The border radius of the TreeView.
 /// @group treeview
 $kendo-treeview-border-radius: var( --kendo-treeview-border-radius, k-border-radius(md) ) !default;
@@ -184,6 +188,7 @@ $kendo-treeview-loadmore-focus-shadow: var( --kendo-treeview-loadmore-focus-shad
 @forward "@progress/kendo-theme-core/scss/components/treeview/_variables.scss" with (
     $kendo-treeview-default-size: $kendo-treeview-default-size,
     $kendo-treeview-gap: $kendo-treeview-gap,
+    $kendo-treeview-item-icon-spacing: $kendo-treeview-item-icon-spacing,
     $kendo-treeview-border-radius: $kendo-treeview-border-radius,
     $kendo-treeview-font-family: $kendo-treeview-font-family,
     $kendo-treeview-sm-font-size: $kendo-treeview-sm-font-size,

package/scss/upload/_variables.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
 
 /// The width of the border around the Upload.
 /// @group upload
@@ -72,7 +73,7 @@ $kendo-upload-multiple-items-spacing: var( --kendo-upload-multiple-items-spacing
 $kendo-upload-validation-font-size: var( --kendo-upload-validation-font-size, var(--kendo-font-size-xs) ) !default;
 /// The horizontal spacing of the Upload status icon.
 /// @group upload
-$kendo-upload-icon-spacing: var( --kendo-upload-icon-spacing, var( --kendo-icon-spacing, .5rem ) ) !default;
+$kendo-upload-icon-spacing: var( --kendo-upload-icon-spacing, #{$kendo-icon-spacing} ) !default;
 /// The color of the uploaded items icon.
 /// @group upload
 $kendo-upload-icon-color: var( --kendo-upload-icon-color, k-color(subtle) ) !default;