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

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/list/_layout.scss

@@ -19,6 +19,7 @@
         margin: 0;
         padding: 0;
         box-sizing: border-box;
+        font-family: var( --kendo-list-font-family, #{$kendo-list-font-family} );
         font-size: var( --INTERNAL--kendo-list-font-size, 1rem );
         line-height: var( --INTERNAL--kendo-list-line-height, normal );
         display: flex;
@@ -124,6 +125,7 @@
     }
     .k-list-optionlabel {
         @extend .k-list-item !optional;
+        column-gap: 0;
     }
 
 

package/scss/list/_theme.scss

@@ -76,6 +76,21 @@
         );
     }
 
+    // Option Label
+    .k-list-optionlabel,
+    .k-list-optionlabel.k-hover,
+    .k-list-optionlabel:hover {
+        @include fill(
+            $color: var( --kendo-list-option-label-text, #{$kendo-list-option-label-text} )
+        );
+    }
+
+    .k-list-optionlabel:disabled,
+    .k-list-optionlabel.k-disabled {
+            @include fill(
+                $color: var( --kendo-list-option-label-disabled-text, #{$kendo-list-option-label-disabled-text} )
+            )
+    }
 
     // List group item
     .k-list-group-item {

package/scss/list/_variables.scss

@@ -1,6 +1,10 @@
 @use "sass:map";
 @use "../core/" as *;
 
+/// The font family of the List components.
+/// @group list
+$kendo-list-font-family: var( --kendo-font-family, inherit) !default;
+
 /// The font size of the List component.
 /// @group list
 $kendo-list-sm-font-size: var( --kendo-font-size, inherit ) !default;
@@ -272,3 +276,10 @@ $kendo-list-group-item-shadow: none !default;
 /// The text color of the 'No Data' text.
 /// @group list
 $kendo-list-no-data-text: get-theme-color-var( neutral-160 ) !default;
+
+/// The color of the 'Option Label' text.
+/// @group list
+$kendo-list-option-label-text: $kendo-subtle-text !default;
+/// The color of the disabled 'Option Label' text.
+/// @group list
+$kendo-list-option-label-disabled-text: $kendo-disabled-text !default;

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/map/_layout.scss

@@ -39,7 +39,6 @@
         // Marker
         .k-marker {
             transform: translate(-50%, -100%);
-            font-size: var( --kendo-map-marker-size, #{$kendo-map-marker-size} );
             cursor: pointer;
             position: absolute;
             overflow: visible;

package/scss/map/_variables.scss

@@ -80,9 +80,6 @@ $kendo-map-attribution-font-size: calc( #{$kendo-map-font-size} * .75 ) !default
 /// @group map
 $kendo-map-attribution-bg: $kendo-color-white !default;
 
-/// Map marker size.
-/// @group map
-$kendo-map-marker-size: var( --kendo-icon-size-xxl, 2rem ) !default;
 /// Map marker fill color.
 /// @group map
 $kendo-map-marker-fill: get-theme-color-var( primary-100 ) !default;

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

@@ -2,86 +2,102 @@
 @use "../core/" as *;
 @use "../button/_variables.scss" as *;
 
-/// Horizontal padding of the pager.
+/// The horizontal padding of the Pager.
 /// @group pager
 $kendo-pager-padding-x: map.get( $kendo-spacing, 2 ) !default;
+/// The horizontal padding of the small Pager.
+/// @group pager
 $kendo-pager-sm-padding-x: map.get( $kendo-spacing, 1.5 ) !default;
+/// The horizontal padding of the medium Pager.
+/// @group pager
 $kendo-pager-md-padding-x: map.get( $kendo-spacing, 2 ) !default;
+/// The horizontal padding of the large Pager.
+/// @group pager
 $kendo-pager-lg-padding-x: map.get( $kendo-spacing, 2.5 ) !default;
 
-/// Vertical padding of the pager.
+/// The vertical padding of the Pager.
 /// @group pager
 $kendo-pager-padding-y: map.get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of the small Pager.
+/// @group pager
 $kendo-pager-sm-padding-y: $kendo-pager-sm-padding-x !default;
+/// The vertical padding of the medium Pager.
+/// @group pager
 $kendo-pager-md-padding-y: $kendo-pager-md-padding-x !default;
+/// The vertical padding of the large Pager.
+/// @group pager
 $kendo-pager-lg-padding-y: $kendo-pager-lg-padding-x !default;
-/// Border width of the pager.
+/// The border width of the Pager.
 /// @group pager
 $kendo-pager-border-width: 1px !default;
 
-/// Font family of the pager.
+/// The font family of the Pager.
 /// @group pager
 $kendo-pager-font-family: var( --kendo-font-family, normal ) !default;
-/// Font size of the pager.
+/// The font size of the Pager.
 /// @group pager
 $kendo-pager-font-size: var( --kendo-font-size, inherit ) !default;
-/// Line height of the pager.
+/// The line height of the Pager.
 /// @group pager
 $kendo-pager-line-height: var( --kendo-line-height, normal ) !default;
 
-/// Background color of the pager.
+/// The background color of the Pager.
 /// @group pager
 $kendo-pager-bg: get-theme-color-var( neutral-10 ) !default;
-/// Text color of the pager.
+/// The text color of the Pager.
 /// @group pager
 $kendo-pager-text: var( --kendo-component-text, inherit ) !default;
-/// Border color of the pager.
+/// The border color of the Pager.
 /// @group pager
 $kendo-pager-border: var( --kendo-component-border, inherit ) !default;
 
-/// Background color of the focused pager.
+/// The background color of the focused Pager.
 /// @group pager
 $kendo-pager-focus-bg: var( --kendo-pager-bg, #{$kendo-pager-bg}) !default;
-/// Text color of the focused pager.
+/// The text color of the focused Pager.
 /// @group pager
 $kendo-pager-focus-text: var( --kendo-pager-text, #{$kendo-pager-text}) !default;
-/// Border color of the focused pager.
+/// The border color of the focused Pager.
 /// @group pager
 $kendo-pager-focus-border: get-theme-color-var( neutral-130 ) !default;
 
-/// Spacing between the pager sections.
+/// The spacing between the Pager sections.
 /// @group pager
 $kendo-pager-section-spacing: 1em !default;
 
-/// Border radius of the pager items.
+/// The border radius of the Pager items.
 /// @group pager
 $kendo-pager-item-border-radius: 0 !default;
-/// Spacing around the pager items.
+/// The spacing around the Pager items.
 /// @group pager
 $kendo-pager-item-spacing: null !default;
 
-/// Spacing between the pager item groups according to the pager size.
+/// The spacing between the item groups of the small Pager.
 /// @group pager
 $kendo-pager-sm-item-group-spacing: map.get( $kendo-spacing, 2 ) !default;
+/// The spacing between the item groups of the medium Pager.
+/// @group pager
 $kendo-pager-md-item-group-spacing: map.get( $kendo-spacing, 2 ) !default;
+/// The spacing between the item groups of the large Pager.
+/// @group pager
 $kendo-pager-lg-item-group-spacing: map.get( $kendo-spacing, 2 ) !default;
 
-/// Text color of the pager sizes label.
+/// The text color of the Pagers' sizes label.
 /// @group pager
 $kendo-pager-sizes-label-text: get-theme-color-var( neutral-190 ) !default;
 
-/// Text color of the pager info label.
+/// The text color of the Pagers' info label.
 /// @group pager
 $kendo-pager-info-label-text: get-theme-color-var( neutral-130 ) !default;
 
-/// Width of the pager inputs.
+/// The width of the Inputs in the Pager.
 /// @group pager
 $kendo-pager-input-width: 5em !default;
-/// Width of the pager dropdowns.
+/// The width of the DropDowns in the Pager.
 /// @group pager
 $kendo-pager-dropdown-width: 5em !default;
 
-/// Sizes map of the pager.
+/// The sizes map of the Pager.
 /// @group pager
 $kendo-pager-sizes: (
     sm: (

package/scss/pdf-viewer/_layout.scss

@@ -114,15 +114,6 @@
                 border: 0;
                 background: none;
             }
-
-            > .k-icon {
-                font-size: var( --kendo-pdf-viewer-icon-size, #{$kendo-pdf-viewer-icon-size} );
-            }
-
-            > .k-svg-icon {
-                width: var( --kendo-pdf-viewer-icon-size, #{$kendo-pdf-viewer-icon-size} );
-                height: var( --kendo-pdf-viewer-icon-size, #{$kendo-pdf-viewer-icon-size} );
-            }
         }
 
     }

package/scss/pdf-viewer/_variables.scss

@@ -97,9 +97,6 @@ $kendo-pdf-viewer-search-highlight-bg: var( --kendo-component-text, inherit ) !d
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-highlight-mark-bg: yellow !default;
 
-/// Size of the PDF viewer icon.
-/// @group pdf-viewer
-$kendo-pdf-viewer-icon-size: $kendo-dropzone-icon-size !default;
 /// Text color of the PDF viewer icon.
 /// @group pdf-viewer
 $kendo-pdf-viewer-icon-text: $kendo-dropzone-icon-text !default;

package/scss/rating/_layout.scss

@@ -53,15 +53,6 @@
             pointer-events: none;
         }
 
-        .k-icon {
-            font-size: var( --kendo-rating-icon-size, #{$kendo-rating-icon-size} );
-        }
-
-        .k-svg-icon {
-            width: var( --kendo-rating-icon-size, #{$kendo-rating-icon-size} );
-            height: var( --kendo-rating-icon-size, #{$kendo-rating-icon-size} );
-        }
-
         svg {
             fill: currentColor;
         }

package/scss/rating/_variables.scss

@@ -45,7 +45,3 @@ $kendo-rating-item-selected-text: get-theme-color-var( neutral-160 ) !default;
 /// Selected hover color of the rating item.
 /// @group rating
 $kendo-rating-item-selected-hover-text: get-theme-color-var( primary-120 ) !default;
-
-/// Icon size of the rating.
-/// @group rating
-$kendo-rating-icon-size: calc( var( --kendo-icon-size, 1rem ) * #{$kendo-line-height-md} ) !default;

package/scss/scrollview/_layout.scss

@@ -157,22 +157,16 @@
             margin: 0;
             padding: 0;
             vertical-align: middle;
-            font-size: var( --kendo-scrollview-arrow-icon-size, #{$kendo-scrollview-arrow-icon-size} );
             font-weight: normal;
         }
-
-        .k-svg-icon {
-            width: var( --kendo-scrollview-arrow-icon-size, #{$kendo-scrollview-arrow-icon-size} );
-            height: var( --kendo-scrollview-arrow-icon-size, #{$kendo-scrollview-arrow-icon-size} );
-        }
     }
 
     .k-scrollview-prev {
-        left: 0;
+        inset-inline-start: 0;
     }
 
     .k-scrollview-next {
-        right: 0;
+        inset-inline-end: 0;
     }
 
 
@@ -197,4 +191,15 @@
             pointer-events: none;
         }
     }
+
+    .k-rtl,
+    [dir="rtl"] {
+        .k-scrollview-prev,
+        .k-scrollview-next {
+            .k-icon,
+            .k-svg-icon {
+                transform: scaleX(-1);
+            }
+        }
+    }
 }

package/scss/scrollview/_variables.scss

@@ -82,9 +82,6 @@ $kendo-scrollview-pager-light-bg: rgba( $kendo-color-white, .4 ) !default;
 /// @group scrollview
 $kendo-scrollview-pager-dark-bg: rgba( $kendo-color-black, .4 ) !default;
 
-/// Scrollview arrow arrows size.
-/// @group scrollview
-$kendo-scrollview-arrow-icon-size: calc( var( --kendo-icon-size-xxl, 2rem ) * 2 ) !default;
 /// Scrollview navigation text color.
 /// @group scrollview
 $kendo-scrollview-navigation-color: $kendo-color-white !default;

package/scss/splitter/_layout.scss

@@ -61,15 +61,6 @@
             cursor: pointer;
         }
 
-        .k-icon {
-            font-size: var( --kendo-splitter-resize-icon-size, #{$kendo-splitter-resize-icon-size} );
-        }
-
-        .k-svg-icon {
-            width: var( --kendo-splitter-resize-icon-size, #{$kendo-splitter-resize-icon-size} );
-            height: var( --kendo-splitter-resize-icon-size, #{$kendo-splitter-resize-icon-size} );
-        }
-
     }
 
     .k-splitbar-draggable-horizontal { cursor: col-resize; }

package/scss/splitter/_variables.scss

@@ -26,10 +26,7 @@ $kendo-splitter-border: var( --kendo-component-border, initial ) !default;
 
 /// Size of the splitter splitbar.
 /// @group splitter
-$kendo-splitter-splitbar-size: map.get( $kendo-spacing, 2 ) !default;
-/// Icon size of the splitter splitbar.
-/// @group splitter
-$kendo-splitter-resize-icon-size: map.get( $kendo-spacing, 2.5 ) !default;
+$kendo-splitter-splitbar-size: map.get( $kendo-spacing, 3 ) !default;
 /// Length of the splitter drag handle.
 /// @group splitter
 $kendo-splitter-drag-handle-length: map.get( $kendo-spacing, 5 ) !default;

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;

package/scss/toolbar/_variables.scss

@@ -1,67 +1,79 @@
 @use "sass:map";
 @use "../core/" as *;
 
-/// The horizontal padding of the toolbar.
+/// The horizontal padding of the small Toolbar.
 /// @group toolbar
 $kendo-toolbar-sm-padding-x: map.get( $kendo-spacing, 1 ) !default;
+/// The horizontal padding of the medium Toolbar.
+/// @group toolbar
 $kendo-toolbar-md-padding-x: map.get( $kendo-spacing, 2 ) !default;
+/// The horizontal padding of the large Toolbar.
+/// @group toolbar
 $kendo-toolbar-lg-padding-x: map.get( $kendo-spacing, 2.5 ) !default;
 
-/// The vertical padding of the toolbar.
+/// The vertical padding of the small Toolbar.
 /// @group toolbar
 $kendo-toolbar-sm-padding-y: map.get( $kendo-spacing, 1 ) !default;
+/// The vertical padding of the medium Toolbar.
+/// @group toolbar
 $kendo-toolbar-md-padding-y: map.get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of the large Toolbar.
+/// @group toolbar
 $kendo-toolbar-lg-padding-y: map.get( $kendo-spacing, 2.5 ) !default;
 
-/// The spacing between the toolbar tools.
+/// The spacing between the tools of the small Toolbar.
 /// @group toolbar
 $kendo-toolbar-sm-spacing: map.get( $kendo-spacing, 2 ) !default;
+/// The spacing between the tools of the medium Toolbar.
+/// @group toolbar
 $kendo-toolbar-md-spacing: map.get( $kendo-spacing, 2 ) !default;
+/// The spacing between the tools of the large Toolbar.
+/// @group toolbar
 $kendo-toolbar-lg-spacing: map.get( $kendo-spacing, 2 ) !default;
 
-/// Width of the border around the toolbar.
+/// The width of the border around the Toolbar.
 /// @group toolbar
 $kendo-toolbar-border-width: 1px !default;
 
-/// Font family of the toolbar.
+/// The font family of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-font-family: var( --kendo-font-family, inherit ) !default;
-/// Font size of the toolbar.
+/// The font size of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-font-size: var( --kendo-font-size, inherit ) !default;
-/// Line height of the toolbar.
+/// The line height of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-line-height: var( --kendo-line-height, normal ) !default;
 
-/// Background color of the toolbar.
+/// The background color of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-bg: get-theme-color-var( neutral-10 ) !default;
-/// Text color of the toolbar.
+/// The text color of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-text: var( --kendo-component-text, inherit ) !default;
-/// Color of the border around the toolbar.
+/// The color of the border around the Toolbar.
 /// @group toolbar
 $kendo-toolbar-border: var( --kendo-component-border, initial ) !default;
 
-/// Color of the separator border of the toolbar.
+/// The color of the separator border of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-separator-border: get-theme-color-var( neutral-60 ) !default;
 
-/// The width of the input in the toolbar.
+/// The width of the input in the Toolbar.
 /// @group toolbar
 $kendo-toolbar-input-width: 10em !default;
 
-/// Border width of the focused toolbar item.
+/// The border width of the focused Toolbar item.
 /// @group toolbar
 $kendo-toolbar-item-focus-outline-width: 1px !default;
-/// Border style of the focused toolbar item.
+/// The border style of the focused Toolbar item.
 /// @group toolbar
 $kendo-toolbar-item-focus-outline-style: solid !default;
-/// Border color of the focused toolbar item.
+/// The border color of the focused Toolbar item.
 /// @group toolbar
 $kendo-toolbar-item-focus-outline-color: get-theme-color-var( neutral-130 ) !default;
 
-/// Sizes map for the toolbar.
+/// The sizes map for the Toolbar.
 /// @group toolbar
 $kendo-toolbar-sizes: (
     sm: (