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

package/scss/expansion-panel/_variables.scss

@@ -1,99 +1,102 @@
 @use "sass:map";
 @use "../core/" as *;
 
-/// Vertical margin of the expander.
+/// The vertical spacing of the ExpansionPanel.
 /// @group expander
 $kendo-expander-margin-y: map.get( $kendo-spacing, 2 ) !default;
-/// Border width of the expander.
+/// The width of the border around the ExpansionPanel.
 /// @group expander
 $kendo-expander-border-width: 1px !default;
-/// Background color of the expander.
+/// The font family of the ExpansionPanel.
 /// @group expander
 $kendo-expander-font-family: var( --kendo-font-family, inherit ) !default;
-/// Font size of the expander.
+/// The font size of the ExpansionPanel.
 /// @group expander
 $kendo-expander-font-size: var( --kendo-font-size, inherit ) !default;
-/// Line height of the expander.
+/// The hine height of the ExpansionPanel.
 /// @group expander
 $kendo-expander-line-height: var( --kendo-line-height, normal ) !default;
 
-/// Text color of the expander.
+/// The text color of the ExpansionPanel.
 /// @group expander
 $kendo-expander-text: var( --kendo-component-text, initial ) !default;
-/// Background color of the expander.
+/// The background color of the ExpansionPanel.
 /// @group expander
 $kendo-expander-bg: get-theme-color-var( neutral-10 ) !default;
-/// Border color of the expander.
+/// The border color of the ExpansionPanel.
 /// @group expander
 $kendo-expander-border: var( --kendo-component-border, initial ) !default;
-/// Box shadow of the expander.
+/// The box shadow of the ExpansionPanel.
 /// @group expander
 $kendo-expander-shadow: inset 0 0 0 2px get-theme-color-var( neutral-30 ) !default;
 
-/// Background color of the expanded expander.
+/// The background color of the expanded ExpansionPanel.
 /// @group expander
 $kendo-expander-expanded-bg: var( --kendo-component-bg, initial ) !default;
 
-/// Background color of the disabled expander.
-/// @group expander
-$kendo-expander-disabled-bg: var( --kendo-disabled-bg, initial ) !default;
-/// Text color of the disabled expander.
+/// The text color of the disabled ExpansionPanel.
 /// @group expander
 $kendo-expander-disabled-text: var( --kendo-disabled-text, initial ) !default;
-/// Offset of the focused expander.
+/// The background color of the disabled ExpansionPanel.
+/// @group expander
+$kendo-expander-disabled-bg: var( --kendo-disabled-bg, initial ) !default;
+
+/// The offset of the focused ExpansionPanel.
 /// @group expander
 $kendo-expander-focus-offset: 1px !default;
-/// Outline width of the focused expander.
+/// The outline width of the focused ExpansionPanel.
 /// @group expander
 $kendo-expander-focus-outline-width: 1px !default;
-/// Outline style of the focused expander.
+/// The outline style of the focused ExpansionPanel.
 /// @group expander
 $kendo-expander-focus-outline-style: solid !default;
-/// The focus outline color of the expander.
+/// The outline color of the focused ExpansionPanel.
 /// @group expander
 $kendo-expander-focus-outline: get-theme-color-var( neutral-130 ) !default;
 
-/// Background color of the focused expander.
+/// The background color of the focused ExpansionPanel.
 /// @group expander
 $kendo-expander-focus-bg: var( --kendo-component-bg, initial ) !default;
-/// Box shadow color of the focused expander.
+/// The box shadow of the focused ExpansionPanel.
 /// @group expander
 $kendo-expander-focus-shadow: inset 0px 0px 0px 2px get-theme-color-var( neutral-130 ) !default;
 
-/// Horizontal padding of the expander header.
+/// The horizontal padding of the ExpansionPanel header.
 /// @group expander
 $kendo-expander-header-padding-x: map.get( $kendo-spacing, 4 ) !default;
-/// Vertical padding of the expander header.
+/// The vertical padding of the ExpansionPanel header.
 /// @group expander
 $kendo-expander-header-padding-y: map.get( $kendo-spacing, 3 ) !default;
-/// Text color of the expander header.
+
+/// The text color of the ExpansionPanel header.
 /// @group expander
 $kendo-expander-header-text: get-theme-color-var( primary-100 ) !default;
-/// Background color of the expander header.
+/// The background color of the ExpansionPanel header.
 /// @group expander
 $kendo-expander-header-bg: inherit !default;
-/// Background color of the hovered expander header.
+
+/// The background color of the hovered ExpansionPanel header.
 /// @group expander
 $kendo-expander-header-hover-bg: get-theme-color-var( neutral-20 ) !default;
 
-/// Text color of the expander title.
+/// The text color of the ExpansionPanel title.
 /// @group expander
 $kendo-expander-title-text: get-theme-color-var( primary-100 ) !default;
 
-/// Text color of the expander sub-title.
+/// The text color of the ExpansionPanel sub-title.
 /// @group expander
 $kendo-expander-header-sub-title-text: var( --kendo-subtle-text, initial ) !default;
 
-/// Horizontal margin of the expander indicator.
+/// The horizontal margin of the ExpansionPanel indicator.
 /// @group expander
 $kendo-expander-indicator-margin-x: map.get( $kendo-spacing, 2.5 ) !default;
-/// Text color of the expander indicator.
+/// The text color of the ExpansionPanel indicator.
 /// @group expander
 $kendo-expander-indicator-text: var( --kendo-expander-text, #{$kendo-expander-text} ) !default;
 
-/// Horizontal padding of the expander content.
+/// The horizontal padding of the ExpansionPanel content.
 /// @group expander
 $kendo-expander-content-padding-x: map.get( $kendo-spacing, 4 ) !default;
-/// Vertical padding of the expander content.
+/// The vertical padding of the ExpansionPanel content.
 /// @group expander
 $kendo-expander-content-padding-y: map.get( $kendo-spacing, 4 ) !default;

package/scss/filter/_variables.scss

@@ -1,38 +1,38 @@
 @use "../core/" as *;
 
-/// Horizontal padding of the filter.
+/// The horizontal padding of the Filter.
 /// @group filter
 $kendo-filter-padding-x: $kendo-padding-md-x !default;
-/// Vertical padding of the filter.
+/// The vertical padding of the Filter.
 /// @group filter
 $kendo-filter-padding-y: $kendo-padding-md-y !default;
 
-/// Bottom margin of the filter.
+/// The bottom margin of the Filter.
 /// @group filter
 $kendo-filter-bottom-margin: 30px !default;
-/// Width of the line that connects the filter items.
+/// The width of the line that connects the Filter items.
 /// @group filter
 $kendo-filter-line-size: 1px !default;
 
-/// Width of the dropdown elements in the filter items.
+/// The width of the dropdown elements in the Filter items.
 /// @group filter
 $kendo-filter-operator-dropdown-width: 15em !default;
 
-/// Text color of the preview field.
+/// The text color of the Filter.
+/// @group filter
+$kendo-filter-text: var( --kendo-component-text, initial ) !default;
+
+/// The text color of the Filter preview field.
 /// @group filter
 $kendo-filter-preview-field-text: get-theme-color-var( primary-100 ) !default;
-/// Text color of the preview operator.
+/// The text color of the Filter preview operator.
 /// @group filter
 $kendo-filter-preview-operator-text: get-theme-color-var( neutral-130 ) !default;
 
-/// Text color of the filter.
-/// @group filter
-$kendo-filter-text: var( --kendo-component-text, initial ) !default;
-
-/// Background color of the line that connects the filter items.
+/// The background color of the line that connects the Filter items.
 /// @group filter
 $kendo-filter-line-bg: var( --kendo-component-border, initial ) !default;
 
-/// Border color of the focused filter.
+/// The border color of the focused Filter.
 /// @group filter
-$kendo-filter-toolbar-focus-border: get-theme-color-var( neutral-130 ) !default;
+$kendo-filter-toolbar-focus-border: get-theme-color-var( neutral-130 ) !default;

package/scss/listbox/_variables.scss

@@ -1,45 +1,44 @@
 @use "sass:map";
 @use "../core/" as *;
 
-/// Margin between the listbox elements.
+/// The spacing between the ListBox elements.
 /// @group listbox
 $kendo-listbox-spacing: map.get( $kendo-spacing, 2 ) !default;
-/// Margin between the listbox buttons.
+/// The spacing between the ListBox buttons.
 /// @group listbox
 $kendo-listbox-button-spacing: map.get( $kendo-spacing, 2 ) !default;
-/// Width of the listbox.
+/// WThe width of the ListBox.
 /// @group listbox
 $kendo-listbox-width: 10em !default;
-/// Height of the listbox.
+/// The height of the ListBox.
 /// @group listbox
 $kendo-listbox-height: 200px !default;
-
-/// Border width of the listbox.
+/// The width of the border around the ListBox.
 /// @group listbox
 $kendo-listbox-border-width: 1px !default;
-/// Font family of the listbox.
+/// The font family of the ListBox.
 /// @group listbox
 $kendo-listbox-font-family: var( --kendo-font-family, normal ) !default;
-/// Font size of the listbox.
+/// The font size of the ListBox.
 /// @group listbox
 $kendo-listbox-font-size: var( --kendo-font-size, inherit ) !default;
-/// Line height of the listbox.
+/// The line height of the ListBox.
 /// @group listbox
 $kendo-listbox-line-height: var( --kendo-line-height, normal ) !default;
 
-/// Background color of the listbox component.
-/// @group listbox
-$kendo-listbox-bg: var( --kendo-component-bg, transparent ) !default;
-/// Text color of the listbox component.
+/// The text color of the ListBox.
 /// @group listbox
 $kendo-listbox-text: var( --kendo-component-text, inherit ) !default;
-/// Border color of the listbox component.
+/// The background color of the ListBox.
+/// @group listbox
+$kendo-listbox-bg: var( --kendo-component-bg, transparent ) !default;
+/// The border color of the ListBox.
 /// @group listbox
 $kendo-listbox-border: var( --kendo-component-border, inherit ) !default;
 
-/// Width of the drop hint.
+/// The width of the ListBox drop hint.
 /// @group listbox
 $kendo-listbox-drop-hint-width: 1px !default;
-/// Border color of the drop hint.
+/// The border color of the ListBox drop hint.
 /// @group listbox
 $kendo-listbox-drop-hint-border-color: get-theme-color-var( primary-100 ) !default;

package/scss/listview/_variables.scss

@@ -2,91 +2,91 @@
 @use "../core/" as *;
 @use "../list/_variables.scss"as *;
 
-/// Horizontal padding of listview.
+/// The horizontal padding of the ListView.
 /// @group listview
 $kendo-listview-padding-x: map.get( $kendo-spacing, 1 ) !default;
-/// Vertical padding of listview.
+/// The vertical padding of the ListView.
 /// @group listview
 $kendo-listview-padding-y: map.get( $kendo-spacing, 1 ) !default;
-/// Width of listview.
+/// The width of the border around bordered ListView.
 /// @group listview
 $kendo-listview-border-width: 1px !default;
 
-/// Horizontal padding of listview header.
+/// The horizontal padding of the ListView header.
 /// @group listview
 $kendo-listview-header-padding-x: map.get( $kendo-spacing, 4 ) !default;
-/// Vertical padding of listview header.
+/// The vertical padding of the ListView header.
 /// @group listview
 $kendo-listview-header-padding-y: map.get( $kendo-spacing, 2 ) !default;
 
-/// Horizontal padding of listview footer.
+/// The horizontal padding of the ListView footer.
 /// @group listview
 $kendo-listview-footer-padding-x: $kendo-listview-header-padding-x !default;
-/// Vertical padding of listview footer.
+/// The vertical padding of the ListView footer.
 /// @group listview
 $kendo-listview-footer-padding-y: $kendo-listview-header-padding-y !default;
 
-/// Horizontal padding of listview items.
+/// The horizontal padding of the ListView items.
 /// @group listview
 $kendo-listview-item-padding-x: map.get( $kendo-spacing, 1 ) !default;
-/// Vertical padding of listview items.
+/// The vertical padding of the ListView items.
 /// @group listview
 $kendo-listview-item-padding-y: map.get( $kendo-spacing, 1 ) !default;
 
-/// Font family of listview.
+/// The font family of the ListView.
 /// @group listview
 $kendo-listview-font-family: var( --kendo-font-family, initial ) !default;
-/// Font size of listview.
+/// The font size of the ListView.
 /// @group listview
 $kendo-listview-font-size: var( --kendo-font-size, initial ) !default;
-/// Line height of listview.
+/// The line height of the ListView.
 /// @group listview
 $kendo-listview-line-height: var( --kendo-line-height, initial ) !default;
 
-/// Gap between items of grid listview.
+/// The gap between items of ListView with grid layout.
 /// @group listview
 $kendo-listview-grid-gap: map.get( $kendo-spacing, 0 ) !default;
 
-/// Text color of listview.
+/// The text color of the ListView.
 /// @group listview
 $kendo-listview-text: var( --kendo-component-text, initial ) !default;
-/// Background color of listview.
+/// The background color of the ListView.
 /// @group listview
 $kendo-listview-bg: var( --kendo-component-bg, initial ) !default;
-/// Border color of listview.
+/// The border color of the ListView.
 /// @group listview
 $kendo-listview-border: var( --kendo-component-border, initial ) !default;
 
-/// Text color of focused listview items.
+/// The text color of the ListView header.
 /// @group listview
-$kendo-listview-item-focus-text: initial !default;
-/// Background color of focused listview items.
+$kendo-listview-header-text: initial !default;
+/// The background color of the ListView header.
 /// @group listview
-$kendo-listview-item-focus-bg: initial !default;
-/// Box shadow of focused listview items.
+$kendo-listview-header-bg: initial !default;
+/// The border color of the ListView header.
 /// @group listview
-$kendo-listview-item-focus-shadow: var( --kendo-list-item-focus-shadow, $kendo-list-item-focus-shadow ) !default;
+$kendo-listview-header-border: $kendo-listview-border !default;
 
-/// Text color of selected listview items.
+/// The text color of the ListView footer.
 /// @group listview
-$kendo-listview-item-selected-text: initial !default;
-/// Background color of selected listview items.
+$kendo-listview-footer-text: initial !default;
+/// The background color of the ListView footer.
 /// @group listview
-$kendo-listview-item-selected-bg: get-theme-color-var( neutral-20 ) !default;
+$kendo-listview-footer-bg: initial !default;
 
-/// Text color of listview header.
-/// @group listview
-$kendo-listview-header-text: initial !default;
-/// Background color of listview.
+/// The text color of the selected ListView items.
 /// @group listview
-$kendo-listview-header-bg: initial !default;
-/// Border color of listview.
+$kendo-listview-item-selected-text: initial !default;
+/// The background color of the selected ListView items.
 /// @group listview
-$kendo-listview-header-border: $kendo-listview-border !default;
+$kendo-listview-item-selected-bg: get-theme-color-var( neutral-20 ) !default;
 
-/// Text color of listview footer.
+/// The text color of the focused ListView items.
 /// @group listview
-$kendo-listview-footer-text: initial !default;
-/// Background color of listview.
+$kendo-listview-item-focus-text: initial !default;
+/// The background color of the focused ListView items.
 /// @group listview
-$kendo-listview-footer-bg: initial !default;
+$kendo-listview-item-focus-bg: initial !default;
+/// The box shadow of the focused ListView items.
+/// @group listview
+$kendo-listview-item-focus-shadow: var( --kendo-list-item-focus-shadow, $kendo-list-item-focus-shadow ) !default;

package/scss/loader/_variables.scss

@@ -2,97 +2,142 @@
 @use "sass:math";
 @use "../core/" as *;
 
-/// Border radius of the loader segment.
+/// The border radius of the Loader segment.
 /// @group loader
 $kendo-loader-segment-border-radius: 50% !default;
 
-/// Size of the loader segment.
+/// The size of the small Loader segment.
 /// @group loader
 $kendo-loader-sm-segment-size: map.get( $kendo-spacing, 1 ) !default;
+/// The size of the medium Loader segment.
+/// @group loader
 $kendo-loader-md-segment-size: map.get( $kendo-spacing, 2 ) !default;
+/// The size of the large Loader segment.
+/// @group loader
 $kendo-loader-lg-segment-size: map.get( $kendo-spacing, 4 ) !default;
 
-/// Horizontal padding of the loader.
+/// The horizontal padding of the small Loader.
 /// @group loader
 $kendo-loader-sm-padding-x: math.div( $kendo-loader-sm-segment-size, 2 ) !default;
+/// The horizontal padding of the medium Loader.
+/// @group loader
 $kendo-loader-md-padding-x: math.div( $kendo-loader-md-segment-size, 2 ) !default;
+/// The horizontal padding of the large Loader.
+/// @group loader
 $kendo-loader-lg-padding-x: math.div( $kendo-loader-lg-segment-size, 2 ) !default;
 
-/// Vertical padding of the loader.
+/// The vertical padding of the small Loader.
 /// @group loader
 $kendo-loader-sm-padding-y: math.div( $kendo-loader-sm-segment-size, 2 ) !default;
+/// The vertical padding of the medium Loader.
+/// @group loader
 $kendo-loader-md-padding-y: math.div( $kendo-loader-md-segment-size, 2 ) !default;
+/// The vertical padding of the large Loader.
+/// @group loader
 $kendo-loader-lg-padding-y: math.div( $kendo-loader-lg-segment-size, 2 ) !default;
 
-/// Equilateral height of the loader.
+/// The equilateral height of the Loader.
 /// @group loader
 $kendo-loader-equilateral-height: .8660 !default;
 
-/// Width of the spinner-3 loader.
+/// The width of the small spinner-3 Loader.
 /// @group loader
 $kendo-loader-sm-spinner-3-width: ( $kendo-loader-sm-segment-size * 4 ) !default;
+/// The width of the medium spinner-3 Loader.
+/// @group loader
 $kendo-loader-md-spinner-3-width: ( $kendo-loader-md-segment-size * 4 ) !default;
+/// The width of the large spinner-3 Loader.
+/// @group loader
 $kendo-loader-lg-spinner-3-width: ( $kendo-loader-lg-segment-size * 4 ) !default;
 
-/// Height of the spinner-3 loader.
+/// The height of the small spinner-3 Loader.
 /// @group loader
 $kendo-loader-sm-spinner-3-height: ( $kendo-loader-sm-spinner-3-width * $kendo-loader-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 * $kendo-loader-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 * $kendo-loader-equilateral-height ) !default;
 
-/// Width of the spinner-4 loader.
+/// The width of the small spinner-4 Loader.
 /// @group loader
 $kendo-loader-sm-spinner-4-width: ( $kendo-loader-sm-segment-size * 4 ) !default;
+/// The width of the medium spinner-4 Loader.
+/// @group loader
 $kendo-loader-md-spinner-4-width: ( $kendo-loader-md-segment-size * 4 ) !default;
+/// The width of the large spinner-4 Loader.
+/// @group loader
 $kendo-loader-lg-spinner-4-width: ( $kendo-loader-lg-segment-size * 4 ) !default;
 
-/// Height of the spinner-4 loader.
+/// 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;
 
-/// Border width of the container panel.
+/// The border width of the container panel.
 /// @group loader
 $kendo-loader-container-panel-border-width: 1px !default;
-/// Border style of the container panel.
+/// The border style of the container panel.
 /// @group loader
 $kendo-loader-container-panel-border-style: solid !default;
-/// Border color of the container panel.
+/// The border color of the container panel.
 /// @group loader
 $kendo-loader-container-panel-border-color: var( --kendo-component-border, initial ) !default;
-/// Border radius of the container panel.
+/// The border radius of the container panel.
 /// @group loader
 $kendo-loader-container-panel-border-radius: var( --kendo-border-radius-md, 0 ) !default;
-/// Background color of the container panel.
+/// The background color of the container panel.
 /// @group loader
 $kendo-loader-container-panel-bg: $kendo-color-white !default;
 
-/// Horizontal padding of the loader container.
+/// The horizontal padding of the small Loader container.
 /// @group loader
 $kendo-loader-sm-container-padding-x: map.get( $kendo-spacing, 4 ) !default;
+/// The horizontal padding of the medium Loader container.
+/// @group loader
 $kendo-loader-md-container-padding-x: map.get( $kendo-spacing, 5 ) !default;
+/// The horizontal padding of the large Loader container.
+/// @group loader
 $kendo-loader-lg-container-padding-x: map.get( $kendo-spacing, 6 ) !default;
 
-/// Vertical padding of the loader container.
+/// The vertical padding of the small Loader container.
 /// @group loader
 $kendo-loader-sm-container-padding-y: map.get( $kendo-spacing, 4 ) !default;
+/// The vertical padding of the medium Loader container.
+/// @group loader
 $kendo-loader-md-container-padding-y: map.get( $kendo-spacing, 5 ) !default;
+/// The vertical padding of the large Loader container.
+/// @group loader
 $kendo-loader-lg-container-padding-y: map.get( $kendo-spacing, 6 ) !default;
 
-/// Gap of the loader container.
+/// The gap of the small Loader container.
 /// @group loader
 $kendo-loader-sm-container-gap: map.get( $kendo-spacing, 1 ) !default;
+/// The gap of the medium Loader container.
+/// @group loader
 $kendo-loader-md-container-gap: map.get( $kendo-spacing, 2 ) !default;
+/// The gap of the large Loader container.
+/// @group loader
 $kendo-loader-lg-container-gap: map.get( $kendo-spacing, 3 ) !default;
 
-/// Font size of the loader container.
+/// The font size of the small Loader container.
 /// @group loader
 $kendo-loader-sm-container-font-size: var( --kendo-font-size-sm, inherit ) !default;
+/// The font size of the medium Loader container.
+/// @group loader
 $kendo-loader-md-container-font-size: var( --kendo-font-size-md, inherit ) !default;
+/// The font size of the large Loader container.
+/// @group loader
 $kendo-loader-lg-container-font-size: var( --kendo-font-size-lg, inherit ) !default;
 
-/// Theme variations for the loader.
+/// The theme variations for the Loader.
+/// @group loader
 $kendo-loader-brand-colors: (
     primary: primary,
     secondary: neutral,
@@ -116,7 +161,8 @@ $_tc-loader-light-matrix: (
     (normal: (50, null, null)),
 ) !default;
 
-/// Theme colors map for the loader variations.
+/// The theme colors map for the Loader variations.
+/// @group loader
 $kendo-loader-theme-colors: () !default;
 
 @each $ui-states in $_tc-loader-matrix {

package/scss/notification/_variables.scss

@@ -1,55 +1,56 @@
 @use "sass:map";
 @use "../core/" as *;
 
-/// Vertical padding of the notification container.
+/// The vertical padding of the Notification container.
 /// @group notification
 $kendo-notification-container-padding-y: $kendo-padding-sm-y !default;
 
-/// Horizontal padding of the notification.
+/// The horizontal padding of the Notification.
 /// @group notification
 $kendo-notification-padding-x: map.get( $kendo-spacing, 3 ) !default;
-/// Vertical padding of the notification.
+/// The vertical padding of the Notification.
 /// @group notification
 $kendo-notification-padding-y: map.get( $kendo-spacing, 2 ) !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: map.get( $kendo-spacing, 0.5 ) !default;
-/// Font family of the notification.
+/// The font family of the Notification.
 /// @group notification
 $kendo-notification-font-family: var( --kendo-font-family, inherit ) !default;
-/// Font size of the notification.
+/// The font size of the Notification.
 /// @group notification
 $kendo-notification-font-size: var( --kendo-font-size-sm, inherit ) !default;
-/// Line height of the notification.
+/// The line height of the Notification.
 /// @group notification
 $kendo-notification-line-height: var( --kendo-line-height, normal ) !default;
-/// Background color of the notification.
+/// The background color of the Notification.
 /// @group notification
 $kendo-notification-bg: var( --kendo-component-bg, inherit ) !default;
-/// Text color of the notification.
+/// The text color of the Notification.
 /// @group notification
 $kendo-notification-text: var( --kendo-component-text, inherit ) !default;
-/// Border color of the notification.
+/// The border color of the Notification.
 /// @group notification
 $kendo-notification-border: var( --kendo-component-border, inherit ) !default;
-/// Box shadow of the notification.
+/// The box shadow of the Notification.
 /// @group notification
 $kendo-notification-box-shadow: none !default;
 
-/// Horizontal spacing of the notification icon.
+/// The horizontal spacing of the Notification icon.
 /// @group notification
 $kendo-notification-icon-spacing: map.get( $kendo-spacing, 2 ) !default;
-/// Horizontal spacing of the notification close icon.
+/// The horizontal spacing of the Notification close icon.
 /// @group notification
 $kendo-notification-close-icon-spacing: map.get( $kendo-spacing, 4 ) !default;
-/// Color of the notification icon.
+/// The color of the Notification icon.
 /// @group notification
 $kendo-notification-icon-text: var( --kendo-component-text, inherit ) !default;
 
-/// Theme variations for the notification.
+/// The theme variations for the Notification.
+/// @group notification
 $kendo-notification-brand-colors: (
     primary: primary,
     error: error,
@@ -73,7 +74,8 @@ $_tc-notification-light-matrix: (
     (normal: (50, 160, 50)),
 ) !default;
 
-/// Theme colors map for the notification variations.
+/// The theme colors map for the Notification variations.
+/// @group notification
 $kendo-notification-theme-colors: () !default;
 
 @each $ui-states in $_tc-notification-matrix {