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

package/scss/filemanager/_variables.scss

@@ -105,9 +105,6 @@ $kendo-file-manager-listview-item-width: 120px !default;
 /// @group filemanager
 $kendo-file-manager-listview-item-height: 120px !default;
 
-/// Size of the listview item icon.
-/// @group filemanager
-$kendo-file-manager-listview-item-icon-size: calc( var( --kendo-icon-size, 1rem ) * 3 ) !default;
 /// Background color of the listview item icon.
 /// @group filemanager
 $kendo-file-manager-listview-item-icon-bg: transparent !default;
@@ -174,9 +171,6 @@ $kendo-file-manager-preview-text: inherit !default;
 /// @group filemanager
 $kendo-file-manager-preview-border: inherit !default;
 
-/// Size of the preview icon.
-/// @group filemanager
-$kendo-file-manager-preview-icon-size: calc( var( --kendo-icon-size, 1rem ) * 6 ) !default;
 /// Background color of the preview icon.
 /// @group filemanager
 $kendo-file-manager-preview-icon-bg: transparent !default;

package/scss/floating-label/_variables.scss

@@ -1,70 +1,70 @@
 @use "../core/" as *;
 @use "../input/_variables.scss" as *;
 
-/// The resize scale of the floating label
+/// The transformation scale of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-scale: 1 !default;
 
-/// The font size of the floating label
+/// The font size of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-font-size: var( --kendo-font-size, inherit ) !default;
 
-/// The max-width of the floating label
+/// The maximum width of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-max-width: 90% !default;
 
-/// The font weight of the floating label
+/// The font weight of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-font-weight: var( --kendo-font-weight-bold, inherit ) !default;
 
-/// The line height of the floating label
+/// The line height of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-line-height: var( --kendo-line-height, normal ) !default;
 
-/// The height of the floating label
+/// The height of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-height: calc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} ) !default;
 
-/// The horizontal offset of the floating label
+/// The horizontal offset of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-offset-x: calc( #{$kendo-input-md-padding-x} + #{$kendo-input-border-width} ) !default;
 
-/// The vertical offset of the floating label
+/// The vertical offset of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-offset-y: calc( #{$kendo-floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-md-padding-y} ) !default;
 
-/// The focus resize scale of the floating label
+/// The transformation scale of the focused Floating Label.
 /// @group floating-label
 $kendo-floating-label-focus-scale: 1 !default;
 
-/// The horizontal focus offset of the floating label
+/// The horizontal offset of the focused Floating Label.
 /// @group floating-label
 $kendo-floating-label-focus-offset-x: 0 !default;
 
-/// The vertical focus offset of the floating label
+/// The vertical offset of the focused Floating Label.
 /// @group floating-label
 $kendo-floating-label-focus-offset-y: 0 !default;
 
-/// The transition of the floating label
+/// The transition of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-transition: .2s ease-out !default;
 
-/// The background color of the floating label
+/// The background color of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-bg: inherit !default;
 
-/// The text color of the floating label
+/// The text color of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-text: inherit !default;
 
-/// The focus background color of the floating label
+/// The background color of the focused Floating Label.
 /// @group floating-label
 $kendo-floating-label-focus-bg: inherit !default;
 
-/// The focus text color of the floating label
+/// The text color of the focused Floating Label.
 /// @group floating-label
 $kendo-floating-label-focus-text: inherit !default;
 
-/// The invalid text color of the floating label
+/// The invalid text color of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-invalid-text: var( --kendo-invalid-text, #{$kendo-invalid-text} ) !default;

package/scss/forms/_variables.scss

@@ -1,63 +1,69 @@
 @use "sass:map";
 @use "../core/" as *;
 
-/// The padding of the inline form
+/// The padding of the inline Form.
 /// @group form
 $kendo-form-spacer: ( $kendo-padding-md-x * 2 ) !default;
 
-/// The font size of the form
+/// The font size of the Form.
 /// @group form
 $kendo-form-font-size: var( --kendo-font-size, inherit ) !default;
 
-/// The line heights of the form
+/// The line height of the Form.
 /// @group form
 $kendo-form-line-height: var( --kendo-line-height, normal ) !default;
+/// The line height of the Form in em units.
+/// @group form
 $kendo-form-line-height-em: $kendo-line-height-em !default;
+/// The line height of the small Form.
+/// @group form
 $kendo-form-sm-line-height: var( --kendo-line-height-sm, normal ) !default;
+/// The line height of the large Form.
+/// @group form
 $kendo-form-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
 
-/// The margin of the form fieldset
+/// The margin of the Form fieldset.
 /// @group form
 $kendo-form-fieldset-margin: 2em 0 0 !default;
 
-/// The padding of the form fieldset
+/// The padding of the Form fieldset.
 /// @group form
 $kendo-form-fieldset-padding: 0px !default;
 
-/// The margin of the form legend
+/// The margin of the Form legend.
 /// @group form
 $kendo-form-legend-margin: 0 0 map.get( $kendo-spacing, 3 ) !default;
 
-/// The padding of the form legend
+/// The padding of the Form legend.
 /// @group form
 $kendo-form-legend-padding: 0px !default;
 
-/// The border width of the form legend
+/// The border width of the Form legend.
 /// @group form
 $kendo-form-legend-border-width: 0 0 map.get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 
-/// The border style of the form legend
+/// The border style of the Form legend.
 /// @group form
 $kendo-form-legend-border-style: solid !default;
 
-/// The border color of the form legend
+/// The border color of the Form legend.
 /// @group form
 $kendo-form-legend-border-color: var( --kendo-component-border, initial ) !default;
 
-/// The width of the form legend
+/// The width of the Form legend.
 /// @group form
 $kendo-form-legend-width: 100% !default;
 
-/// The font size of the form legend
+/// The font size of the Form legend.
 /// @group form
 $kendo-form-legend-font-size: var( --kendo-font-size, inherit ) !default;
 
-/// The text capitalization of the form legend
+/// The text capitalization of the Form legend.
 /// @group form
 $kendo-form-legend-text-transform: uppercase !default;
 
 
-/// The bottom margin of the form label
+/// The bottom margin of the Form label.
 /// @group form
 $kendo-form-label-margin-bottom: map.get( $kendo-spacing, 2 ) !default;
 
@@ -65,91 +71,113 @@ $kendo-form-label-margin-bottom: map.get( $kendo-spacing, 2 ) !default;
 /// @group form
 $kendo-form-label-font-weight: var( --kendo-font-weight-bold, inherit ) !default;
 
-/// The horizontal margin of the form button
+/// The horizontal margin of the Form buttons.
 /// @group form
 $kendo-form-button-margin-x: map.get( $kendo-spacing, 2 ) !default;
 
-/// The font size of the form hint
+/// The font size of the Form hint.
 /// @group form
 $kendo-form-hint-font-size: var( --kendo-font-size-sm, inherit ) !default;
 
-/// The font style of the form hint
+/// The font style of the Form hint.
 /// @group form
 $kendo-form-hint-font-style: normal !default;
 
-/// The top margin of the form hint
+/// The top margin of the Form hint.
 /// @group form
 $kendo-form-hint-margin-top: map.get( $kendo-spacing, 1 ) !default;
 
-/// The text color of the font hint
+/// The text color of the Form hint.
 /// @group form
 $kendo-form-hint-text: get-theme-color-var( neutral-130 ) !default;
 
-/// Form row small size spacing
+/// The row spacing of the small Form.
 /// @group form
 $kendo-form-sm-rows-spacing: map.get( $kendo-spacing, 3 ) !default;
-/// Form row medium size spacing
+/// The row spacing of the medium Form.
 /// @group form
 $kendo-form-md-rows-spacing: $kendo-form-sm-rows-spacing !default;
-/// Form row large size spacing
+/// The row spacing of the large Form.
 /// @group form
 $kendo-form-lg-rows-spacing: $kendo-form-sm-rows-spacing !default;
 
-/// The margin of the form separator
+/// The margin of the Form separator.
 /// @group form
 $kendo-form-separator-margin: map.get( $kendo-spacing, 3 ) 0 0 !default;
 
-/// The border color of the form separator
+/// The border color of the Form separator.
 /// @group form
 $kendo-form-separator-border-color: $kendo-form-legend-border-color !default;
 
-/// The top padding of the horizontal form label
+/// The top padding of the label in the horizontal Form.
 /// @group form
 $kendo-horizontal-form-label-padding-top: map.get( $kendo-spacing, 1.5 ) !default;
 
-/// The horizontal margin of the horizontal form
+/// The horizontal margin of the label in the horizontal Form.
 /// @group form
 $kendo-horizontal-form-label-margin-x: map.get( $kendo-spacing, 2 ) !default;
 
-/// The width of the horizontal form label
+/// The width of the label in the horizontal Form.
 /// @group form
 $kendo-horizontal-form-label-width: 25% !default;
 
-/// The horizontal alignment of the form label
+/// The horizontal alignment of the label in the horizontal Form.
+/// @group form
 $kendo-horizontal-form-label-align: flex-end !default;
 
-/// The max-width of the horizontal form
+/// The maximum width of the field wrap in the horizontal Form.
 /// @group form
 $kendo-horizontal-form-field-wrap-max-width: calc( ( 100% - #{$kendo-horizontal-form-label-width} ) - #{$kendo-horizontal-form-label-margin-x} ) !default;
 
-/// The width of the element of the inline form
+/// The width of the inline Form element.
 /// @group form
 $kendo-inline-form-element-width: 25% !default;
 
-/// The invalid text color of the form
+/// The invalid text color of the Form.
 /// @group form
 $kendo-forms-invalid-color: var( --kendo-invalid-text, initial ) !default;
 
 
-// Label
+/// The horizontal margin of the optional label in the Form.
+/// @group form
 $kendo-label-optional-margin-x: map.get( $kendo-spacing, 1.5 ) !default;
+/// The font size of the optional label in the Form.
+/// @group form
 $kendo-label-optional-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// The font style of the optional label in the Form.
+/// @group form
 $kendo-label-optional-font-style: normal !default;
 
 
-// Fieldset
+/// The margin of the Form fieldset.
+/// @group form
 $kendo-fieldset-margin: map.get( $kendo-spacing, 7.5 ) !default;
+/// The font size of the Form fieldset.
+/// @group form
 $kendo-fieldset-font-size: var( --kendo-font-size-xl, inherit ) !default;
 
+/// The background color of the Form fieldset.
+/// @group form
 $kendo-fieldset-bg: transparent !default;
+/// The text color of the Form fieldset.
+/// @group form
 $kendo-fieldset-text: inherit !default;
+/// The border color of the Form fieldset.
+/// @group form
 $kendo-fieldset-border: initial !default;
 
+/// The background color of the Form legend.
+/// @group form
 $kendo-fieldset-legend-bg: transparent !default;
+/// The text color of the Form legend.
+/// @group form
 $kendo-fieldset-legend-text: get-theme-color-var( neutral-130 ) !default;
+/// The border color of the Form legend.
+/// @group form
 $kendo-fieldset-legend-border: initial !default;
 
-// Sizes
+/// The sizes map for the Form.
+/// @group form
 $kendo-form-sizes: (
     sm: (
         form-rows-spacing: $kendo-form-sm-rows-spacing

package/scss/grid/_layout.scss

@@ -190,11 +190,15 @@
             > .k-svg-icon {
                 padding-inline: 0;
                 padding-block: var( --INTERNAL--kendo-grid-cell-padding-y, 0 );
-                width: 100%;
-                height: 100%;
                 display: inline-block;
                 outline: 0;
             }
+
+            > .k-icon {
+                width: 100%;
+                height: 100%;
+            }
+
         }
 
         .k-hierarchy-cell + .k-grid-content-sticky {

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/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/_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,14 +157,8 @@
             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 {

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