@progress/kendo-theme-fluent 6.4.1-dev.1 → 6.5.0-dev.1

package/scss/scrollview/_variables.scss

@@ -1,106 +1,96 @@
 @use "../core/" as *;
 @use "../button/_variables.scss"as *;
 
-/// Width of the border around the scrollview.
+/// The width of the border around the ScrollView.
 /// @group scrollview
 $kendo-scrollview-border-width: 0px !default;
-/// Font family of the scrollview.
+/// The font family of the ScrollView.
 /// @group scrollview
 $kendo-scrollview-font-family: var( --kendo-font-family, inherit ) !default;
-/// Font size of the scrollview.
+/// The font size of the ScrollView.
 /// @group scrollview
 $kendo-scrollview-font-size: var( --kendo-font-size, inherit ) !default;
-/// Line height of the scrollview.
+/// The line height of the ScrollView.
 /// @group scrollview
 $kendo-scrollview-line-height: var( --kendo-line-height, normal ) !default;
 
-/// Background color of the scrollview.
-/// @group scrollview
-$kendo-scrollview-bg: var( --kendo-component-bg, inherit ) !default;
-/// Text color of the scrollview.
+/// The text color of the ScrollView.
 /// @group scrollview
 $kendo-scrollview-text: var( --kendo-component-text, inherit ) !default;
-/// Border color of the scrollview.
+/// The background color of the ScrollView.
+/// @group scrollview
+$kendo-scrollview-bg: var( --kendo-component-bg, inherit ) !default;
+/// The border color of the ScrollView.
 /// @group scrollview
 $kendo-scrollview-border: var( --kendo-component-border, inherit ) !default;
 
-/// Scrollview page button size.
+/// The size of the ScrollView page button.
 /// @group scrollview
 $kendo-scrollview-pagebutton-size: 10px !default;
-/// Scrollview page background color.
+/// The background color of the ScrollView page button.
 /// @group scrollview
 $kendo-scrollview-pagebutton-bg: $kendo-color-white !default;
-/// Scrollview page button border color.
+/// The border color of the ScrollView page button.
 /// @group scrollview
 $kendo-scrollview-pagebutton-border: $kendo-scrollview-pagebutton-bg !default;
-/// Scrollview page button primary background color.
+/// The primary background color of the ScrollView page button.
 /// @group scrollview
 $kendo-scrollview-pagebutton-primary-bg: get-theme-color-var( primary-100 ) !default;
-/// Scrollview page button primary border color.
+/// The primary border color of the ScrollView page button.
 /// @group scrollview
 $kendo-scrollview-pagebutton-primary-border: $kendo-scrollview-pagebutton-primary-bg !default;
-/// Scrollview page button hover shadow.
+/// The hover box shadow of the ScrollView page button.
 /// @group scrollview
 $kendo-scrollview-pagebutton-hover-shadow: 0 0 0 1px get-theme-color-var( neutral-30 ) !default;
-/// Scrollview page button focus shadow.
+/// The focus box shadow of the ScrollView page button.
 /// @group scrollview
 $kendo-scrollview-pagebutton-focus-shadow: 0 0 0 1px get-theme-color-var( neutral-130 ) !default;
-/// Scrollview page button primary hover shadow.
+/// The primary hover box shadow of the ScrollView page button.
 /// @group scrollview
 $kendo-scrollview-pagebutton-primary-hover-shadow: 0 0 0 2px get-theme-color-var( neutral-30 ) !default;
-/// Scrollview page button primary focus shadow.
+/// The primary focus box shadow of the ScrollView page button.
 /// @group scrollview
 $kendo-scrollview-pagebutton-primary-focus-shadow: 0 0 0 2px get-theme-color-var( neutral-130 ) !default;
 
-/// Scrollview pager offset.
+/// The offset of the ScrollView pager.
 /// @group scrollview
 $kendo-scrollview-pager-offset: 0px !default;
-/// Scrollview pager item spacing.
+/// The spacing between the ScrollView pager items.
 /// @group scrollview
 $kendo-scrollview-pager-item-spacing: 20px !default;
-/// Scrollview pager item border width.
+/// The border width of the ScrollView pager items.
 /// @group scrollview
 $kendo-scrollview-pager-item-border-width: 0px !default;
-/// Scrollview pager height.
+/// The height of the ScrollView pager.
 /// @group scrollview
 $kendo-scrollview-pager-height: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + #{$kendo-scrollview-pager-item-spacing * 2} ) !default;
 
-/// Scrollview pager multidot threshold.
-/// @group scrollview
-$kendo-scrollview-pager-multidot-threshold: 10 !default;
-/// Scrollview pager multidot intermediate.
-/// @group scrollview
-$kendo-scrollview-pager-multidot-intermediate: 3 !default;
-/// Scrollview pager multidot step.
-/// @group scrollview
-$kendo-scrollview-pager-multidot-step: 1px !default;
-
-/// Scrollview pager light background color.
-/// @group scrollview
-$kendo-scrollview-pager-light-bg: rgba( $kendo-color-white, .4 ) !default;
-/// Scrollview pager dark background color.
-/// @group scrollview
-$kendo-scrollview-pager-dark-bg: rgba( $kendo-color-black, .4 ) !default;
-
-/// Scrollview navigation text color.
+/// The color of the ScrollView navigation arrows.
 /// @group scrollview
 $kendo-scrollview-navigation-color: $kendo-color-white !default;
-/// Scrollview navigation arrows shadow.
+/// The box shadow of the ScrollView navigation arrows.
 /// @group scrollview
 $kendo-scrollview-navigation-arrow-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
-/// Scrollview navigation background color.
+/// The background color of the ScrollView navigation.
 /// @group scrollview
 $kendo-scrollview-navigation-bg: transparent !default;
-/// Scrollview navigation arrows focus shadow.
+/// The focus box shadow of the ScrollView navigation arrows.
 /// @group scrollview
 $kendo-scrollview-navigation-focus-shadow: 0 0 0 1px get-theme-color-var( neutral-130 ) !default;
-/// Scrollview navigation arrows hover shadow.
+/// The hover box shadow of the ScrollView navigation arrows.
 /// @group scrollview
 $kendo-scrollview-navigation-arrow-hover-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
 
-/// Scrollview transition duration.
+/// The background color of the ScrollView pager in light mode.
+/// @group scrollview
+$kendo-scrollview-pager-light-bg: rgba( $kendo-color-white, .4 ) !default;
+/// The background color of the ScrollView pager in dark mode.
+/// @group scrollview
+$kendo-scrollview-pager-dark-bg: rgba( $kendo-color-black, .4 ) !default;
+
+/// The duration of the ScrollView transition.
 /// @group scrollview
 $kendo-scrollview-transition-duration: .3s !default;
-/// Scrollview transition timing function.
+/// The timing function of the ScrollView transition.
 /// @group scrollview
 $kendo-scrollview-transition-timing-function: ease-in-out !default;

package/scss/splitter/_layout.scss

@@ -59,6 +59,7 @@
         .k-collapse-prev,
         .k-collapse-next {
             cursor: pointer;
+            padding: var( --kendo-splitter-collapse-icon-padding-y, #{$kendo-splitter-collapse-icon-padding-y} ) var( --kendo-splitter-collapse-icon-padding-x, #{$kendo-splitter-collapse-icon-padding-x} );
         }
 
     }

package/scss/splitter/_variables.scss

@@ -37,6 +37,13 @@ $kendo-splitter-drag-handle-thickness: map.get( $kendo-spacing, 0.5 ) !default;
 /// @group splitter
 $kendo-splitter-drag-icon-margin: map.get( $kendo-spacing, 2 ) !default;
 
+/// Horizontal padding of the collapse icon in the splitter.
+/// @group splitter
+$kendo-splitter-collapse-icon-padding-x: null !default;
+/// Vertical padding of the collapse icon in the splitter.
+/// @group splitter
+$kendo-splitter-collapse-icon-padding-y: map.get( $kendo-spacing, .5 ) !default;
+
 /// Background color of the splitter splitbar.
 /// @group splitter
 $kendo-splitbar-bg: get-theme-color-var( neutral-10 ) !default;

package/scss/tilelayout/_variables.scss

@@ -2,22 +2,22 @@
 @use "../core/" as *;
 @use "../card/_variables.scss" as *;
 
-/// Width of the border around the tilelayout.
+/// The width of the border around the TileLayout.
 /// @group tilelayout
 $kendo-tile-layout-border-width: 0px !default;
-/// Background color of the tilelayout.
+/// The background color of the TileLayout.
 /// @group tilelayout
 $kendo-tile-layout-bg: get-theme-color-var( neutral-10 ) !default;
 
-/// Width of the border around the tilelayout hint.
+/// The width of the border around the TileLayout hint.
 /// @group tilelayout
 $kendo-tile-layout-hint-border-width: 1px !default;
-/// Color of the border around the tilelayout hint.
-/// @group tilelayout
-$kendo-tile-layout-hint-border: var( --kendo-component-border, initial ) !default;
-/// Radius of the border around the tilelayout hint.
+/// The radius of the border around the TileLayout hint.
 /// @group tilelayout
 $kendo-tile-layout-hint-border-radius: var( --kendo-border-radius-lg, initial ) !default;
-/// Background color of the tilelayout hint.
+/// The color of the border around the TileLayout hint.
+/// @group tilelayout
+$kendo-tile-layout-hint-border: var( --kendo-component-border, initial ) !default;
+/// The background color of the TileLayout hint.
 /// @group tilelayout
 $kendo-tile-layout-hint-bg: rgba(255, 255, 255, .2) !default;

package/scss/treelist/_layout.scss

@@ -96,4 +96,10 @@
         margin-inline: .5em;
     }
 
+    .k-treelist-toggle {
+        margin-block: calc( var( --kendo-icon-padding ) * -1 );
+        padding: var( --kendo-icon-padding, .25rem );
+        cursor: pointer;
+    }
+
 }

package/scss/treeview/_layout.scss

@@ -84,6 +84,11 @@
         align-items: center;
         cursor: pointer;
     }
+    .k-treeview-toggle .k-icon,
+    .k-treeview-toggle .k-svg-icon {
+        padding: var( --kendo-icon-padding, .25rem );
+        box-sizing: content-box;
+    }
 
 
     // Loading icon
@@ -95,8 +100,7 @@
     // Checkbox
     .k-treeview .k-checkbox-wrap,
     .k-treeview .k-checkbox-wrapper {
-        margin-inline-start: var( --kendo-icon-spacing, .5rem );
-        margin-inline-end: var( --kendo-icon-spacing, .5rem );
+        padding: var( --kendo-treeview-checkbox-wrap-padding, #{$kendo-treeview-checkbox-wrap-padding} );
         align-self: center;
     }
 

package/scss/treeview/_variables.scss

@@ -24,7 +24,7 @@ $kendo-treeview-md-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-treeview-lg-line-height: var( --kendo-line-height, normal ) !default;
 /// The indentation of child groups in the TreeView.
 /// @group treeview
-$kendo-treeview-indent: map.get( $kendo-spacing, 4 ) !default;
+$kendo-treeview-indent: map.get( $kendo-spacing, 6 ) !default;
 
 /// The horizontal padding of the small TreeView items.
 /// @group treeview
@@ -178,3 +178,7 @@ $kendo-treeview-loadmore-focus-border: inherit !default;
 /// The box shadow of the focused Load More button in the TreeView.
 /// @group treeview
 $kendo-treeview-loadmore-focus-shadow: $kendo-treeview-item-focus-shadow !default;
+
+/// The padding of the checkbox wrapper in the TreeView.
+/// @group treeview
+$kendo-treeview-checkbox-wrap-padding: map.get( $kendo-spacing, .5 ) !default;

package/scss/upload/_variables.scss

@@ -1,100 +1,100 @@
 @use "sass:map";
 @use "../core/" as *;
 
-/// Width of the border around the upload.
+/// The width of the border around the Upload.
 /// @group upload
 $kendo-upload-border-width: 1px !default;
-/// Font family of the upload.
+/// The font family of the Upload.
 /// @group upload
 $kendo-upload-font-family: var( --kendo-font-family, inherit ) !default;
-/// Font size of the upload.
+/// The font size of the Upload.
 /// @group upload
 $kendo-upload-font-size: var( --kendo-font-size, inherit ) !default;
-/// Line height of the upload.
+/// The line height of the Upload.
 /// @group upload
 $kendo-upload-line-height: var( --kendo-line-height, normal ) !default;
-/// Maximum height of the upload.
+/// The maximum height of the list with uploaded items.
 /// @group upload
 $kendo-upload-max-height: 300px !default;
 
-/// Background color of the upload.
-/// @group upload
-$kendo-upload-bg: var( --kendo-component-bg, initial ) !default;
-/// Text color of the upload.
+/// The text color of the Upload.
 /// @group upload
 $kendo-upload-text: var( --kendo-component-text, initial ) !default;
-/// Border color of the upload.
+/// The background color of the Upload.
+/// @group upload
+$kendo-upload-bg: var( --kendo-component-bg, initial ) !default;
+/// The border color of the Upload.
 /// @group upload
 $kendo-upload-border: var( --kendo-component-border, initial ) !default;
 
-/// Horizontal padding of the upload dropzone.
+/// The horizontal padding of the Upload dropzone.
 /// @group upload
 $kendo-upload-dropzone-padding-x: map.get( $kendo-spacing, 2 ) !default;
-/// Vertical padding of the upload dropzone.
+/// The vertical padding of the Upload dropzone.
 /// @group upload
 $kendo-upload-dropzone-padding-y: map.get( $kendo-spacing, 2 ) !default;
-/// Background color of the upload dropzone.
-/// @group upload
-$kendo-upload-dropzone-bg: get-theme-color-var( neutral-10 ) !default;
-/// Text color of the upload dropzone.
+/// The text color of the Upload dropzone.
 /// @group upload
 $kendo-upload-dropzone-text: get-theme-color-var( neutral-130 ) !default;
-/// Border color of the upload dropzone.
+/// The background color of the Upload dropzone.
+/// @group upload
+$kendo-upload-dropzone-bg: get-theme-color-var( neutral-10 ) !default;
+/// The border color of the Upload dropzone.
 /// @group upload
 $kendo-upload-dropzone-border: get-theme-color-var( neutral-30 ) !default;
-/// Background color of the hovered upload dropzone.
+/// The background color of the hovered Upload dropzone.
 /// @group upload
 $kendo-upload-dropzone-hover-bg: var( --kendo-hover-bg, inherit ) !default;
 
-/// Text color of the file status message in the upload.
+/// The text color of the Upload status message.
 /// @group upload
 $kendo-upload-status-text: var( --kendo-subtle-text, inherit ) !default;
-/// Opacity of the file status message in the upload.
+/// The opacity of the Upload status message.
 /// @group upload
 $kendo-upload-status-text-opacity: null !default;
 
-/// Horizontal padding of the upload items.
+/// The horizontal padding of an uploaded item.
 /// @group upload
 $kendo-upload-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
-/// Vertical padding of the upload items.
+/// The vertical padding of an uploaded item.
 /// @group upload
 $kendo-upload-item-padding-y: map.get( $kendo-spacing, 2 ) !default;
 
-/// Spacing between multiple items in the upload.
+/// The vertical spacing between uploaded batch items.
 /// @group upload
 $kendo-upload-multiple-items-spacing: map.get( $kendo-spacing, 4 ) !default;
 
-/// Font size of the upload validation message.
+/// The font size of the Upload validation message.
 /// @group upload
 $kendo-upload-validation-font-size: var( --kendo-font-size-xs, inherit ) !default;
-/// Spacing between the icon and text in the upload.
+/// The horizontal spacing of the Upload status icon.
 /// @group upload
 $kendo-upload-icon-spacing: var( --kendo-icon-spacing, .5rem ) !default;
-/// Color of the icons in the upload.
+/// The color of the uploaded items icon.
 /// @group upload
 $kendo-upload-icon-color: var( --kendo-subtle-text, inherit ) !default;
 
-/// Thickness of the upload progress bar.
+/// The thickness of the Upload progress bar.
 /// @group upload
 $kendo-upload-progress-thickness: 2px !default;
-/// Background color of the upload progress bar.
+/// The background color of the Upload progress bar.
 /// @group upload
 $kendo-upload-progress-bg: get-theme-color-var( primary-100 ) !default;
 
-/// Success background color of the upload.
-/// @group upload
-$kendo-upload-success-bg: get-theme-color-var( success-190 ) !default;
-/// Success text color of the upload.
+/// The success text color of the Upload.
 /// @group upload
 $kendo-upload-success-text: get-theme-color-var( success-190 ) !default;
-
-/// Error background color of the upload.
+/// The success background color of the Upload progress bar.
 /// @group upload
-$kendo-upload-error-bg: get-theme-color-var( error-190 ) !default;
-/// Error text color of the upload.
+$kendo-upload-success-bg: get-theme-color-var( success-190 ) !default;
+
+/// The error text color of the Upload.
 /// @group upload
 $kendo-upload-error-text: get-theme-color-var( error-190 ) !default;
+/// The error background color of the Upload progress bar.
+/// @group upload
+$kendo-upload-error-bg: get-theme-color-var( error-190 ) !default;
 
-/// Focus shadow of the upload when focused.
+/// The shadow of the focused Upload button, actions and uploaded items.
 /// @group upload
 $kendo-upload-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;

package/scss/window/_variables.scss

@@ -1,104 +1,102 @@
 @use "sass:map";
 @use "../core/" as *;
 
-/// Width of the border around the window.
+/// The width of the border around the Window.
 /// @group window
 $kendo-window-border-width: map.get( $kendo-spacing, 1 ) 0 0 !default;
-/// Border radius of the window.
+/// The border radius of the Window.
 /// @group window
 $kendo-window-border-radius: var( --kendo-border-radius-md, 0 ) !default;
-/// Font family of the window.
+/// The font family of the Window.
 /// @group window
 $kendo-window-font-family: var( --kendo-font-family, inherit ) !default;
-/// Font size of the window.
+/// The font size of the Window.
 /// @group window
 $kendo-window-font-size: var( --kendo-font-size, inherit ) !default;
-/// Line height of the window.
+/// The line height of the Window.
 /// @group window
 $kendo-window-line-height: var( --kendo-line-height, normal ) !default;
 
-/// Horizontal padding of the window titlebar.
+/// The horizontal padding of the Window titlebar.
 /// @group window
 $kendo-window-titlebar-padding-x: map.get( $kendo-spacing, 6 ) !default;
-/// Vertical padding of the window titlebar.
+/// The vertical padding of the Window titlebar.
 /// @group window
 $kendo-window-titlebar-padding-y: map.get( $kendo-spacing, 5 ) !default;
-/// Width of the top border of the window titlebar.
+/// The width of the border of the Window titlebar.
 /// @group window
 $kendo-window-titlebar-border-width: 0 !default;
-/// Style of the top border of the window titlebar.
+/// The style of the border of the Window titlebar.
 /// @group window
 $kendo-window-titlebar-border-style: solid !default;
 
-/// Font size of the title of the window.
+/// The font size of the title of the Window.
 /// @group window
 $kendo-window-title-font-size: var( --kendo-font-size-xl, inherit ) !default;
-/// Line height of the title of the window.
+/// The line height of the title of the Window.
 /// @group window
 $kendo-window-title-line-height: var( --kendo-line-height, normal ) !default;
-/// Font weight of the title of the window.
+/// The font weight of the title of the Window.
 /// @group window
 $kendo-window-title-font-weight: var( --kendo-font-weight-bold, bold ) !default;
 
-/// Spacing between the buttons in the header of the window.
+/// The spacing between the buttons in the Window titlebar.
 /// @group window
 $kendo-window-actions-gap: 0px !default;
-
-/// Opacity of the buttons in the header of the window.
+/// OThe opacity of the buttons in the Window titlebar.
 /// @group window
 $kendo-window-action-opacity: 1 !default;
-/// Opacity of the buttons when hovered in the header of the window.
+/// The opacity of the hovered buttons in the Window titlebar.
 /// @group window
 $kendo-window-action-hover-opacity: 1 !default;
 
-/// Horizontal padding of the content of the window.
+/// The horizontal padding of the content of the Window.
 /// @group window
 $kendo-window-inner-padding-x: map.get( $kendo-spacing, 6 ) !default;
-/// Vertical padding of the content of the window.
+/// The vertical padding of the content of the Window.
 /// @group window
 $kendo-window-inner-padding-y: map.get( $kendo-spacing, 3 ) !default;
 
-/// Horizontal padding of the window action buttons.
+/// The horizontal padding of the Window action buttons.
 /// @group window
 $kendo-window-buttongroup-padding-x: map.get( $kendo-spacing, 6 ) !default; // $kendo-actions-padding-x
-/// Vertical padding of the window action buttons.
+/// The vertical padding of the Window action buttons.
 /// @group window
 $kendo-window-buttongroup-padding-y: map.get( $kendo-spacing, 6 ) !default; // $kendo-actions-padding-y
-/// Width of the top border of the window action buttons.
+/// The width of the top border of the Window action buttons.
 /// @group window
 $kendo-window-buttongroup-border-width: 0 !default;
-/// Spacing between the action buttons of the window.
+/// The spacing between the Window action buttons.
 /// @group window
 $kendo-window-buttongroup-spacing: map.get( $kendo-spacing, 3 ) !default;
 
-/// Background color of the window.
+/// The background color of the Window.
 /// @group window
 $kendo-window-bg: var( --kendo-component-bg, initial ) !default;
-/// Text color of the window.
+/// The text color of the Window.
 /// @group window
 $kendo-window-text: var( --kendo-component-text, initial ) !default;
-/// Border color of the window.
+/// The border color of the Window.
 /// @group window
 $kendo-window-border: get-theme-color-var( primary-100 ) !default;
+/// The box shadow of the Window.
+/// @group window
+$kendo-window-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
+/// The box shadow of the focused Window.
+/// @group window
+$kendo-window-focus-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
 
-/// Background color of the window titlebar.
+/// The background color of the Window titlebar.
 /// @group window
 $kendo-window-titlebar-bg: var( --kendo-component-bg, initial ) !default; // $kendo-component-header-bg
-/// Text color of the window titlebar.
+/// The text color of the Window titlebar.
 /// @group window
 $kendo-window-titlebar-text: get-theme-color-var( primary-100 ) !default; // $kendo-component-header-text
-/// Border color of the window titlebar.
+/// The border color of the Window titlebar.
 /// @group window
 $kendo-window-titlebar-border: get-theme-color-var( primary-100 ) !default;
 
-/// Box shadow around the window.
-/// @group window
-$kendo-window-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
-/// Box shadow around the window when hovered.
-/// @group window
-$kendo-window-focus-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
-
-/// Map of the width of the different window sizes.
+/// The map of the width of the different Window sizes.
 /// @group window
 $kendo-window-sizes: (
     sm: 300px,
@@ -106,7 +104,8 @@ $kendo-window-sizes: (
     lg: 1200px
 ) !default;
 
-/// Theme variations for the window.
+/// The theme variations for the Window.
+/// @group window
 $kendo-window-brand-colors: (
     primary: primary
  ) !default;
@@ -124,7 +123,8 @@ $_tc-window-light-matrix: (
     (normal: (50, 160, 50)),
 ) !default;
 
-/// Theme colors map for the window variations.
+/// The theme colors map for the Window.
+/// @group window
 $kendo-window-theme-colors: () !default;
 
 @each $ui-states in $_tc-window-matrix {