@progress/kendo-theme-classic 6.5.0-dev.0 → 6.5.0-dev.2

package/scss/loader/_variables.scss

@@ -1,50 +1,126 @@
 // Loader
 
+/// The border radius of the Loader segment.
+/// @group loader
 $kendo-loader-segment-border-radius: 50% !default;
+
+/// The size of the small Loader segment.
+/// @group loader
 $kendo-loader-sm-segment-size: k-map-get( $kendo-spacing, 1 ) !default;
+/// The size of the medium Loader segment.
+/// @group loader
 $kendo-loader-md-segment-size: k-map-get( $kendo-spacing, 2 ) !default;
+/// The size of the large Loader segment.
+/// @group loader
 $kendo-loader-lg-segment-size: k-map-get( $kendo-spacing, 4 ) !default;
 
+/// The padding of the small Loader.
+/// @group loader
 $kendo-loader-sm-padding: k-math-div( $kendo-loader-sm-segment-size, 2 ) !default;
+/// The padding of the medium Loader.
+/// @group loader
 $kendo-loader-md-padding: k-math-div( $kendo-loader-md-segment-size, 2 ) !default;
+/// The padding of the large Loader.
+/// @group loader
 $kendo-loader-lg-padding: k-math-div( $kendo-loader-lg-segment-size, 2 ) !default;
 
+/// The width of the small spinner-3 Loader.
+/// @group loader
 $kendo-loader-sm-spinner-3-width: ( $kendo-loader-sm-segment-size * 4 ) !default;
-$kendo-loader-sm-spinner-3-height: ( $kendo-loader-sm-spinner-3-width * $equilateral-height ) !default;
+/// The width of the medium spinner-3 Loader.
+/// @group loader
 $kendo-loader-md-spinner-3-width: ( $kendo-loader-md-segment-size * 4 ) !default;
-$kendo-loader-md-spinner-3-height: ( $kendo-loader-md-spinner-3-width * $equilateral-height ) !default;
+/// The width of the large spinner-3 Loader.
+/// @group loader
 $kendo-loader-lg-spinner-3-width: ( $kendo-loader-lg-segment-size * 4 ) !default;
+
+/// The height of the small spinner-3 Loader.
+/// @group loader
+$kendo-loader-sm-spinner-3-height: ( $kendo-loader-sm-spinner-3-width * $equilateral-height ) !default;
+/// The height of the medium spinner-3 Loader.
+/// @group loader
+$kendo-loader-md-spinner-3-height: ( $kendo-loader-md-spinner-3-width * $equilateral-height ) !default;
+/// The height of the large spinner-3 Loader.
+/// @group loader
 $kendo-loader-lg-spinner-3-height: ( $kendo-loader-lg-spinner-3-width * $equilateral-height ) !default;
 
+/// The width of the small spinner-4 Loader.
+/// @group loader
 $kendo-loader-sm-spinner-4-width: $kendo-loader-sm-segment-size * 4 !default;
-$kendo-loader-sm-spinner-4-height: $kendo-loader-sm-spinner-4-width !default;
+/// The width of the medium spinner-4 Loader.
+/// @group loader
 $kendo-loader-md-spinner-4-width: $kendo-loader-md-segment-size * 4 !default;
-$kendo-loader-md-spinner-4-height: $kendo-loader-md-spinner-4-width !default;
+/// The width of the large spinner-4 Loader.
+/// @group loader
 $kendo-loader-lg-spinner-4-width: $kendo-loader-lg-segment-size * 4 !default;
+
+/// The height of the small spinner-4 Loader.
+/// @group loader
+$kendo-loader-sm-spinner-4-height: $kendo-loader-sm-spinner-4-width !default;
+/// The height of the medium spinner-4 Loader.
+/// @group loader
+$kendo-loader-md-spinner-4-height: $kendo-loader-md-spinner-4-width !default;
+/// The height of the large spinner-4 Loader.
+/// @group loader
 $kendo-loader-lg-spinner-4-height: $kendo-loader-lg-spinner-4-width !default;
 
+/// The color of the Loader based on the secondary theme color.
+/// @group loader
 $kendo-loader-secondary-bg: #656565 !default;
 
+/// The border width of the container panel.
+/// @group loader
 $kendo-loader-container-panel-border-width: 1px !default;
+/// The border style of the container panel.
+/// @group loader
 $kendo-loader-container-panel-border-style: solid !default;
+/// The border color of the container panel.
+/// @group loader
 $kendo-loader-container-panel-border-color: $kendo-component-border !default;
+/// The border radius of the container panel.
+/// @group loader
 $kendo-loader-container-panel-border-radius: $kendo-border-radius-md !default;
+/// The background color of the container panel.
+/// @group loader
 $kendo-loader-container-panel-bg: $kendo-color-white !default;
 
+/// The padding of the small Loader container.
+/// @group loader
 $kendo-loader-sm-container-padding: 15px !default;
-$kendo-loader-sm-container-gap: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-loader-sm-container-font-size: $kendo-font-size-xs !default;
-
+/// The padding of the medium Loader container.
+/// @group loader
 $kendo-loader-md-container-padding: 20px !default;
-$kendo-loader-md-container-gap: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-loader-md-container-font-size: $kendo-font-size-md !default;
-
+/// The padding of the large Loader container.
+/// @group loader
 $kendo-loader-lg-container-padding: 25px !default;
+
+/// The gap of the small Loader container.
+/// @group loader
+$kendo-loader-sm-container-gap: k-map-get( $kendo-spacing, 1 ) !default;
+/// The gap of the medium Loader container.
+/// @group loader
+$kendo-loader-md-container-gap: k-map-get( $kendo-spacing, 2 ) !default;
+/// The gap of the large Loader container.
+/// @group loader
 $kendo-loader-lg-container-gap: k-map-get( $kendo-spacing, 3 ) !default;
-$kendo-loader-lg-container-font-size: $kendo-font-size-lg !default;
 
+/// The font size of the small Loader container.
+/// @group loader
+$kendo-loader-sm-container-font-size: $kendo-font-size-xs !default;
+/// The font size of the medium Loader container.
+/// @group loader
+$kendo-loader-md-container-font-size: $kendo-font-size-md !default;
+/// The font size of the large Loader container.
+/// @group loader
+$kendo-loader-lg-container-font-size: $kendo-font-size-lg !default;
 
-// Loading
+// Loading indicator
+/// The background color of the Loading indicator.
+/// @group loading
 $kendo-loading-bg: $kendo-component-bg !default;
+/// The text color of the Loading indicator.
+/// @group loading
 $kendo-loading-text: currentColor !default;
+/// The opacity of the Loading indicator.
+/// @group loading
 $kendo-loading-opacity: .3 !default;

package/scss/menu/_variables.scss

@@ -66,7 +66,7 @@ $kendo-menu-popup-border-width: $kendo-popup-border-width !default;
 $kendo-menu-popup-font-size: $kendo-font-size-md !default;
 $kendo-menu-popup-sm-font-size: $kendo-font-size-md !default;
 $kendo-menu-popup-md-font-size: $kendo-font-size-md !default;
-$kendo-menu-popup-lg-font-size: $kendo-font-size-md !default;
+$kendo-menu-popup-lg-font-size: $kendo-font-size-lg !default;
 
 /// Line heights used along with $kendo-font-size.
 /// @group menu

package/scss/notification/_variables.scss

@@ -1,43 +1,42 @@
 // Notification
 
-/// Vertical padding of the notification container.
+/// The horizontal padding of the Notification.
 /// @group notification
 $kendo-notification-padding-x: 8px !default;
-/// Horizontal padding of the notification.
+/// The vertical padding of the Notification.
 /// @group notification
 $kendo-notification-padding-y: 4px !default;
-/// Width of the border around the notification.
+/// The width of the border around the Notification.
 /// @group notification
 $kendo-notification-border-width: 1px !default;
-/// Border radius of the notification.
+/// The border radius of the Notification.
 /// @group notification
 $kendo-notification-border-radius: $kendo-border-radius-md !default;
-/// Box shadow of the notification.
-/// @group notification
-$kendo-notification-shadow: $kendo-popup-shadow !default;
-/// Font family of the notification.
+/// The font family of the Notification.
 /// @group notification
 $kendo-notification-font-family: $kendo-font-family !default;
-/// Font size of the notification.
+/// The font size of the Notification.
 /// @group notification
 $kendo-notification-font-size: $kendo-font-size-sm !default;
-/// Line height of the notification.
+/// The line height of the Notification.
 /// @group notification
 $kendo-notification-line-height: $kendo-line-height-md !default;
-
-/// Horizontal spacing of the notification icon.
-/// @group notification
-$kendo-notification-icon-spacing: $kendo-icon-spacing !default;
-
-/// Background color of the notification.
+/// The background color of the Notification.
 /// @group notification
 $kendo-notification-bg: $kendo-component-bg !default;
-/// Text color of the notification.
+/// The text color of the Notification.
 /// @group notification
 $kendo-notification-text: $kendo-component-text !default;
-/// Border color of the notification.
+/// The border color of the Notification.
 /// @group notification
 $kendo-notification-border: $kendo-component-border !default;
+/// The box shadow of the Notification.
+/// @group notification
+$kendo-notification-shadow: $kendo-popup-shadow !default;
+
+/// The horizontal spacing of the Notification icon.
+/// @group notification
+$kendo-notification-icon-spacing: $kendo-icon-spacing !default;
 
 @function notification-theme( $colors ) {
     $_theme: ();
@@ -53,7 +52,9 @@ $kendo-notification-border: $kendo-component-border !default;
     @return $_theme;
 }
 
-/// Theme colors of the notification.
+/// The theme colors map for the Notification.
 /// @group notification
 $kendo-notification-theme-colors: $kendo-theme-colors !default;
+/// The generated theme colors map for the Notification.
+/// @group notification
 $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors ) !default;

package/scss/popover/_variables.scss

@@ -1,31 +1,85 @@
 // Popover
+
+/// The width of the border around the Popover.
+/// @group popover
 $kendo-popover-border-width: $kendo-card-border-width !default;
+/// The style of the border around the Popover.
+/// @group popover
 $kendo-popover-border-style: solid !default;
+/// The radius of the border around the Popover.
+/// @group popover
 $kendo-popover-border-radius: $kendo-card-border-radius !default;
-$kendo-popover-font-size: $kendo-card-font-size !default;
+/// The font family of the Popover.
+/// @group popover
 $kendo-popover-font-family: $kendo-card-font-family !default;
+/// The font size of the Popover.
+/// @group popover
+$kendo-popover-font-size: $kendo-card-font-size !default;
+/// The line height of the Popover.
+/// @group popover
 $kendo-popover-line-height: $kendo-card-line-height !default;
-$kendo-popover-bg: $kendo-component-bg !default;
+
+/// The text color of the Popover.
+/// @group popover
 $kendo-popover-text: $kendo-component-text !default;
+/// The background color of the Popover.
+/// @group popover
+$kendo-popover-bg: $kendo-component-bg !default;
+/// The border color of the Popover.
+/// @group popover
 $kendo-popover-border: $kendo-component-border !default;
+/// The box shadow of the Popover.
+/// @group popover
 $kendo-popover-shadow: $kendo-popup-shadow !default;
 
-$kendo-popover-header-padding-y: $kendo-card-header-padding-y !default;
+/// The horizontal padding of the Popover header.
+/// @group popover
 $kendo-popover-header-padding-x: $kendo-card-header-padding-x !default;
+/// The vertical padding of the Popover header.
+/// @group popover
+$kendo-popover-header-padding-y: $kendo-card-header-padding-y !default;
+/// The border width of the Popover header.
+/// @group popover
 $kendo-popover-header-border-width: $kendo-card-header-border-width !default;
+/// The border style of the Popover header.
+/// @group popover
 $kendo-popover-header-border-style: $kendo-popover-border-style !default;
-$kendo-popover-header-bg: $kendo-card-header-bg !default;
+/// The text color of the Popover header.
+/// @group popover
 $kendo-popover-header-text: $kendo-card-header-text !default;
+/// The background color of the Popover header.
+/// @group popover
+$kendo-popover-header-bg: $kendo-card-header-bg !default;
+/// The border color of the Popover header.
+/// @group popover
 $kendo-popover-header-border: $kendo-card-header-border !default;
 
-$kendo-popover-body-padding-y: $kendo-card-body-padding-y !default;
+/// The horizontal padding of the Popover body.
+/// @group popover
 $kendo-popover-body-padding-x: $kendo-card-body-padding-x !default;
+/// The vertical padding of the Popover body.
+/// @group popover
+$kendo-popover-body-padding-y: $kendo-card-body-padding-y !default;
 
+/// The border width of the Popover actions.
+/// @group popover
 $kendo-popover-actions-border-width: $kendo-popover-border-width !default;
 
+/// The width of the Popover callout.
+/// @group popover
 $kendo-popover-callout-width: $kendo-card-callout-width !default;
+/// The height of the Popover callout.
+/// @group popover
 $kendo-popover-callout-height: $kendo-card-callout-height !default;
+/// The border width of the Popover callout.
+/// @group popover
 $kendo-popover-callout-border-width: $kendo-popover-border-width !default;
+/// The border style of the Popover callout.
+/// @group popover
 $kendo-popover-callout-border-style: $kendo-popover-border-style !default;
+/// The background color of the Popover callout.
+/// @group popover
 $kendo-popover-callout-bg: $kendo-popover-bg !default;
-$kendo-popover-callout-border: $kendo-popover-border !default;
+/// The border color of the Popover callout.
+/// @group popover
+$kendo-popover-callout-border: $kendo-popover-border !default;

package/scss/progressbar/_variables.scss

@@ -1,73 +1,74 @@
-// Progressbar
+// ProgressBar
 
-/// Height of the progressbar.
+/// The height of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-height: 22px !default;
-/// Horizontal width of the progressbar.
+/// The horizontal width of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-horizontal-width: 100% !default;
-/// Animation timing of the progressbar.
+/// The animation timing of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-animation-timing: 1s linear infinite !default;
-/// Border width of the progressbar.
+/// The width of the border around the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-border-width: 0px !default;
-/// Font family of the progressbar.
+/// The font family of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-font-family: $kendo-font-family !default;
-/// Font size of the progressbar.
+/// The font size of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-font-size: $kendo-font-size-sm !default;
-/// Line height of the progressbar.
+/// The line height of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-line-height: 1 !default;
-/// Background color of the progressbar.
+
+/// The background color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-bg: k-try-shade( $kendo-component-bg, 1 ) !default;
-/// Text color of the progressbar.
+/// The text color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-text: $kendo-component-text !default;
-/// Border color of the progressbar.
+/// The border color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-border: $kendo-component-border !default;
-/// Background gradient of the progressbar.
+/// The background gradient of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-gradient: null !default;
 
-/// Progress background color of the progressbar.
+/// The progress background color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-value-bg: $kendo-color-primary !default;
-/// Progress text color of the progressbar.
+/// The progress text color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-value-text: k-contrast-legacy( $kendo-progressbar-value-bg ) !default;
-/// Progress border color of the progressbar.
+/// The progress border color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-value-border: k-try-shade( $kendo-progressbar-value-bg ) !default;
-/// Progress background gradient of the progressbar.
+/// The progress background gradient of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-value-gradient: null !default;
 
-/// Background color of the indeterminate progressbar.
+/// The background color of the indeterminate ProgressBar.
 /// @group progressbar
 $kendo-progressbar-indeterminate-bg: $kendo-progressbar-bg !default;
-/// Text color of the indeterminate progressbar.
+/// The text color of the indeterminate ProgressBar.
 /// @group progressbar
 $kendo-progressbar-indeterminate-text: $kendo-progressbar-text !default;
-/// Border color of the indeterminate progressbar.
+/// The border color of the indeterminate ProgressBar.
 /// @group progressbar
 $kendo-progressbar-indeterminate-border: $kendo-progressbar-border !default;
-/// Background gradient of the indeterminate progressbar.
+/// The background gradient of the indeterminate ProgressBar.
 /// @group progressbar
 $kendo-progressbar-indeterminate-gradient: null !default;
 
-/// Border color of the chunk progressbar.
+/// The border color of the chunk ProgressBar.
 /// @group progressbar
 $kendo-progressbar-chunk-border: $kendo-body-bg !default;
 
 // Circular Progressbar
-/// Arc stroke color of the circular progressbar.
+/// The arc stroke color of the circular ProgressBar.
 /// @group progressbar
 $kendo-circular-progressbar-arc-stroke: $kendo-color-primary !default;
-/// Scale stroke background color of the circular progressbar.
+/// The scale stroke background color of the circular ProgressBar.
 /// @group progressbar
 $kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default;

package/scss/scrollview/_variables.scss

@@ -1,39 +1,92 @@
-// Scrollview
+// ScrollView
+
+/// The width of the border around the ScrollView.
+/// @group scrollview
 $kendo-scrollview-border-width: 1px !default;
+/// The font family of the ScrollView.
+/// @group scrollview
 $kendo-scrollview-font-family: $kendo-font-family !default;
+/// The font size of the ScrollView.
+/// @group scrollview
 $kendo-scrollview-font-size: $kendo-font-size-md !default;
+/// The line height of the ScrollView.
+/// @group scrollview
 $kendo-scrollview-line-height: $kendo-line-height-md !default;
 
-$kendo-scrollview-bg: $kendo-component-bg !default;
+/// The text color of the ScrollView.
+/// @group scrollview
 $kendo-scrollview-text: $kendo-component-text !default;
+/// The background color of the ScrollView.
+/// @group scrollview
+$kendo-scrollview-bg: $kendo-component-bg !default;
+/// The border color of the ScrollView.
+/// @group scrollview
 $kendo-scrollview-border: $kendo-component-border !default;
 
+/// The size of the ScrollView page button.
+/// @group scrollview
 $kendo-scrollview-pagebutton-size: 10px !default;
+/// The background color of the ScrollView page button.
+/// @group scrollview
 $kendo-scrollview-pagebutton-bg: $kendo-button-bg !default;
+/// The border color of the ScrollView page button.
+/// @group scrollview
 $kendo-scrollview-pagebutton-border: $kendo-button-border !default;
+/// The primary background color of the ScrollView page button.
+/// @group scrollview
 $kendo-scrollview-pagebutton-primary-bg: $kendo-color-primary !default;
+/// The primary border color of the ScrollView page button.
+/// @group scrollview
 $kendo-scrollview-pagebutton-primary-border: k-try-shade( $kendo-color-primary, 2 ) !default;
+/// The box shadow of the ScrollView page button.
+/// @group scrollview
 $kendo-scrollview-pagebutton-shadow: 0 0 0 2px rgba( black, .13 ) !default;
 
+/// The offset of the ScrollView pager.
+/// @group scrollview
 $kendo-scrollview-pager-offset: 0 !default;
+/// The spacing between the ScrollView pager items.
+/// @group scrollview
 $kendo-scrollview-pager-item-spacing: 20px !default;
+/// The border width of the ScrollView pager items.
+/// @group scrollview
 $kendo-scrollview-pager-item-border-width: 0px !default;
+/// 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;
 
-$kendo-scrollview-pager-multidot-threshold: 10 !default;
-$kendo-scrollview-pager-multidot-intermediate: 3 !default;
-$kendo-scrollview-pager-multidot-step: 1px !default;
-
+/// The text color of the highlight over the tapped ScrollView navigation arrows.
+/// @group scrollview
 $kendo-scrollview-arrow-tap-highlight-color: $kendo-color-rgba-transparent !default;
+/// The color of the ScrollView navigation arrows.
+/// @group scrollview
 $kendo-scrollview-navigation-color: white !default;
+/// The box shadow of the ScrollView navigation arrows.
+/// @group scrollview
 $kendo-scrollview-navigation-icon-shadow: rgba( black, .3 ) 0 0 15px !default;
+/// The background color of the ScrollView navigation.
+/// @group scrollview
 $kendo-scrollview-navigation-bg: rgba( black, 0 ) !default;
+/// The opacity of the ScrollView navigation.
+/// @group scrollview
 $kendo-scrollview-navigation-default-opacity: .7 !default;
+/// The hover opacity of the ScrollView navigation.
+/// @group scrollview
 $kendo-scrollview-navigation-hover-opacity: 1 !default;
+/// The hover background color of the ScrollView navigation arrows.
+/// @group scrollview
 $kendo-scrollview-navigation-hover-span-bg: null !default;
 
+/// The background color of the ScrollView pager in light mode.
+/// @group scrollview
 $kendo-scrollview-light-bg: rgba( white, .4 ) !default;
+/// The background color of the ScrollView pager in dark mode.
+/// @group scrollview
 $kendo-scrollview-dark-bg: rgba( black, .4 ) !default;
 
+/// The duration of the ScrollView transition.
+/// @group scrollview
 $kendo-scrollview-transition-duration: .3s !default;
+/// The timing function of the ScrollView transition.
+/// @group scrollview
 $kendo-scrollview-transition-timing-function: ease-in-out !default;

package/scss/tilelayout/_variables.scss

@@ -1,12 +1,29 @@
 // TileLayout
+
+/// The width of the border around the TileLayout.
+/// @group tilelayout
 $kendo-tile-layout-border-width: 0px !default;
+/// The background color of the TileLayout.
+/// @group tilelayout
+$kendo-tile-layout-bg: $kendo-base-bg !default;
+
+/// The width of the border around the TileLayout card.
+/// @group tilelayout
 $kendo-tile-layout-card-border-width: $kendo-card-border-width !default;
+/// The focus box shadow of the TileLayout card.
+/// @group tilelayout
 $kendo-tile-layout-card-focus-shadow: $kendo-card-focus-shadow !default;
 
+/// The width of the border around the TileLayout hint.
+/// @group tilelayout
 $kendo-tile-layout-hint-border-width: 1px !default;
+/// The radius of the border around the TileLayout hint.
+/// @group tilelayout
 $kendo-tile-layout-hint-border-radius: $kendo-border-radius-lg !default;
-
-$kendo-tile-layout-bg: $kendo-base-bg !default;
-
-$kendo-tile-layout-hint-bg: rgba( white, .2 ) !default;
+/// The color of the border around the TileLayout hint.
+/// @group tilelayout
 $kendo-tile-layout-hint-border: $kendo-component-border !default;
+/// The background color of the TileLayout hint.
+/// @group tilelayout
+$kendo-tile-layout-hint-bg: rgba( white, .2 ) !default;
+

package/scss/upload/_variables.scss

@@ -1,46 +1,99 @@
 // Upload
 
+/// The width of the border around the Upload.
+/// @group upload
 $kendo-upload-border-width: 1px !default;
+/// The font family of the Upload.
+/// @group upload
 $kendo-upload-font-family: $kendo-font-family !default;
+/// The font size of the Upload.
+/// @group upload
 $kendo-upload-font-size: $kendo-font-size-md !default;
+/// The line height of the Upload.
+/// @group upload
 $kendo-upload-line-height: $kendo-line-height-md !default;
+/// The maximum height of the list with uploaded items.
+/// @group upload
 $kendo-upload-max-height: 300px !default;
 
-$kendo-upload-bg: $kendo-component-bg !default;
+/// The text color of the Upload.
+/// @group upload
 $kendo-upload-text: $kendo-component-text !default;
+/// The background color of the Upload.
+/// @group upload
+$kendo-upload-bg: $kendo-component-bg !default;
+/// The border color of the Upload.
+/// @group upload
 $kendo-upload-border: $kendo-component-border !default;
 
+/// The horizontal padding of the Upload dropzone.
+/// @group upload
 $kendo-upload-dropzone-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of the Upload dropzone.
+/// @group upload
 $kendo-upload-dropzone-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-upload-dropzone-bg: $kendo-component-header-bg !default;
+/// The text color of the Upload dropzone.
+/// @group upload
 $kendo-upload-dropzone-text: $kendo-component-header-text !default;
+/// The background color of the Upload dropzone.
+/// @group upload
+$kendo-upload-dropzone-bg: $kendo-component-header-bg !default;
+/// The border color of the Upload dropzone.
+/// @group upload
 $kendo-upload-dropzone-border: $kendo-upload-border !default;
+/// The background color of the hovered Upload dropzone.
+/// @group upload
 $kendo-upload-dropzone-hover-bg: $kendo-hover-bg !default;
 
+/// The text color of the Upload status message.
+/// @group upload
 $kendo-upload-status-text: $kendo-subtle-text !default;
+/// The opacity of the Upload status message.
+/// @group upload
 $kendo-upload-status-text-opacity: null !default;
 
+/// The horizontal padding of an uploaded item.
+/// @group upload
 $kendo-upload-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of an uploaded item.
+/// @group upload
 $kendo-upload-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 
+/// The vertical spacing between uploaded batch items.
+/// @group upload
 $kendo-upload-multiple-items-spacing: 12px !default;
 
+/// The font size of the Upload validation message.
+/// @group upload
 $kendo-upload-validation-font-size: 11px !default;
+/// The horizontal spacing of the Upload status icon.
+/// @group upload
 $kendo-upload-icon-spacing: $kendo-icon-spacing !default;
+/// The color of the uploaded items icon.
+/// @group upload
 $kendo-upload-icon-color: $kendo-subtle-text !default;
 
-$kendo-upload-item-image-width: 30px !default;
-$kendo-upload-item-image-height: 30px !default;
-$kendo-upload-item-image-border: 0px !default; // TODO: remove
-
+/// The thickness of the Upload progress bar.
+/// @group upload
 $kendo-upload-progress-thickness: 2px !default;
+/// The background color of the Upload progress bar.
+/// @group upload
 $kendo-upload-progress-bg: $kendo-color-info !default;
 
-$kendo-upload-success-bg: $kendo-color-success !default;
+/// The success text color of the Upload.
+/// @group upload
 $kendo-upload-success-text: $kendo-color-success !default;
+/// The success background color of the Upload progress bar.
+/// @group upload
+$kendo-upload-success-bg: $kendo-color-success !default;
 
-$kendo-upload-error-bg: $kendo-color-error !default;
+/// The error text color of the Upload.
+/// @group upload
 $kendo-upload-error-text: $kendo-color-error !default;
-$kendo-upload-error-border: $kendo-color-error !default;
+/// The error background color of the Upload progress bar.
+/// @group upload
+$kendo-upload-error-bg: $kendo-color-error !default;
 
+/// The shadow of the focused Upload button, actions and uploaded items.
+/// @group upload
 $kendo-upload-focus-shadow: 0 0 0 2px rgba( black, .13 ) !default;