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

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.
+$kendo-loader-container-panel-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
+/// 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,14 +161,15 @@ $_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 {
     @each $brand-color, $palette in $kendo-loader-brand-colors {
         $kendo-loader-theme-colors: map.deep-merge(
             $kendo-loader-theme-colors,
-            generate-theme-variation( $brand-color, $palette, $ui-states )
+            k-generate-theme-variation( $brand-color, $palette, $ui-states )
         );
     };
 }
@@ -131,13 +177,13 @@ $kendo-loader-theme-colors: () !default;
 @each $ui-states in $_tc-loader-dark-matrix {
     $kendo-loader-theme-colors: map.deep-merge(
         $kendo-loader-theme-colors,
-        generate-theme-variation( dark, neutral, $ui-states )
+        k-generate-theme-variation( dark, neutral, $ui-states )
     );
 }
 
 @each $ui-states in $_tc-loader-light-matrix {
     $kendo-loader-theme-colors: map.deep-merge(
         $kendo-loader-theme-colors,
-        generate-theme-variation( light, neutral, $ui-states )
+        k-generate-theme-variation( light, neutral, $ui-states )
     );
 }

package/scss/map/_variables.scss

@@ -20,7 +20,7 @@ $kendo-map-bg: var( --kendo-component-bg, transparent ) !default;
 $kendo-map-text: var( --kendo-component-text, inherit ) !default;
 /// Border color of the map.
 /// @group map
-$kendo-map-border: get-theme-color-var( neutral-110 ) !default;
+$kendo-map-border: k-get-theme-color-var( neutral-110 ) !default;
 
 /// Border width of the map.
 /// @group map
@@ -52,10 +52,10 @@ $kendo-map-navigator-border-width: 1px !default;
 $kendo-map-navigator-bg: $kendo-color-white !default;
 /// Map navigator text color.
 /// @group map
-$kendo-map-navigator-text: get-theme-color-var( neutral-190 ) !default;
+$kendo-map-navigator-text: k-get-theme-color-var( neutral-190 ) !default;
 /// Map navigator border color.
 /// @group map
-$kendo-map-navigator-border: get-theme-color-var( neutral-110 ) !default;
+$kendo-map-navigator-border: k-get-theme-color-var( neutral-110 ) !default;
 
 /// Map zoom control margin.
 /// @group map
@@ -82,4 +82,4 @@ $kendo-map-attribution-bg: $kendo-color-white !default;
 
 /// Map marker fill color.
 /// @group map
-$kendo-map-marker-fill: get-theme-color-var( primary-100 ) !default;
+$kendo-map-marker-fill: k-get-theme-color-var( primary-100 ) !default;

package/scss/mediaplayer/_variables.scss

@@ -26,11 +26,11 @@ $kendo-media-player-border: var( --kendo-component-border, inherit ) !default;
 
 /// Mediaplayer overlay background color.
 /// @group mediaplayer
-$kendo-media-player-overlay-bg: get-theme-color-var( neutral-130 ) !default;
+$kendo-media-player-overlay-bg: k-get-theme-color-var( neutral-130 ) !default;
 
 /// Mediaplayer quality button border color.
 /// @group mediaplayer
-$kendo-media-player-quality-border: get-theme-color-var( neutral-110 ) !default;
+$kendo-media-player-quality-border: k-get-theme-color-var( neutral-110 ) !default;
 
 /// Media player title font size.
 /// @group mediaplayer

package/scss/menu/_variables.scss

@@ -108,7 +108,7 @@ $kendo-menu-popup-border-width: $kendo-popup-border-width !default;
 $kendo-menu-popup-font-size: var( --kendo-font-size-md, inherit ) !default;
 $kendo-menu-popup-sm-font-size: $kendo-menu-popup-font-size !default;
 $kendo-menu-popup-md-font-size: $kendo-menu-popup-font-size !default;
-$kendo-menu-popup-lg-font-size: $kendo-menu-popup-font-size !default;
+$kendo-menu-popup-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 
 /// Line heights used along with $kendo-font-size.
 /// @group menu
@@ -219,7 +219,7 @@ $kendo-menu-popup-item-focus-text: $kendo-menu-item-text !default;
 $kendo-menu-popup-item-focus-bg: $kendo-menu-item-bg !default;
 /// The outline of focused menu items.
 /// @group menu
-$kendo-menu-popup-item-focus-outline: get-theme-color-var( neutral-130 ) !default;
+$kendo-menu-popup-item-focus-outline: k-get-theme-color-var( neutral-130 ) !default;
 
 /// The text color of expanded menu item in popup.
 /// @group menu
@@ -251,4 +251,4 @@ $kendo-menu-scroll-button-hover-border: null !default;
 
 /// The color of menu items icon.
 /// @group menu
-$kendo-menu-icon-color: get-theme-color-var( primary-100 ) !default;
+$kendo-menu-icon-color: k-get-theme-color-var( primary-100 ) !default;

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,14 +74,15 @@ $_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 {
     @each $brand-color, $palette in $kendo-notification-brand-colors {
         $kendo-notification-theme-colors: map.deep-merge(
             $kendo-notification-theme-colors,
-            generate-theme-variation( $brand-color, $palette, $ui-states )
+            k-generate-theme-variation( $brand-color, $palette, $ui-states )
         );
     };
 }
@@ -88,13 +90,13 @@ $kendo-notification-theme-colors: () !default;
 @each $ui-states in $_tc-notification-dark-matrix {
     $kendo-notification-theme-colors: map.deep-merge(
         $kendo-notification-theme-colors,
-        generate-theme-variation( dark, neutral, $ui-states )
+        k-generate-theme-variation( dark, neutral, $ui-states )
     );
 }
 
 @each $ui-states in $_tc-notification-light-matrix {
     $kendo-notification-theme-colors: map.deep-merge(
         $kendo-notification-theme-colors,
-        generate-theme-variation( light, neutral, $ui-states )
+        k-generate-theme-variation( light, neutral, $ui-states )
     );
 }

package/scss/orgchart/_variables.scss

@@ -51,16 +51,16 @@ $kendo-orgchart-node-group-padding-x: $kendo-orgchart-node-group-padding-y !defa
 $kendo-orgchart-node-group-border-width: 1px !default;
 /// Border radius of the orgchart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+$kendo-orgchart-node-group-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
 /// Background color of the orgchart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-bg: get-theme-color-var( neutral-10 ) !default;
+$kendo-orgchart-node-group-bg: k-get-theme-color-var( neutral-10 ) !default;
 /// Text color of the orgchart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-text: get-theme-color-var( neutral-190 ) !default;
+$kendo-orgchart-node-group-text: k-get-theme-color-var( neutral-190 ) !default;
 /// Border color of the orgchart node group.
 /// @group orgchart
-$kendo-orgchart-node-group-border: get-theme-color-var( neutral-30 ) !default;
+$kendo-orgchart-node-group-border: k-get-theme-color-var( neutral-30 ) !default;
 /// Focus border color of the orgchart node group.
 /// @group orgchart
 $kendo-orgchart-node-group-focus-border: $kendo-card-focus-border !default;
@@ -146,7 +146,7 @@ $kendo-orgchart-card-body-vbox-min-height: $kendo-card-avatar-size !default;
 $kendo-orgchart-line-size: 1px !default;
 /// Fill color of the orgchart connecting line.
 /// @group orgchart
-$kendo-orgchart-line-text: get-theme-color-var( neutral-30 ) !default;
+$kendo-orgchart-line-text: k-get-theme-color-var( neutral-30 ) !default;
 /// Height of the orgchart connecting line.
 /// @group orgchart
 $kendo-orgchart-line-v-height: 25px !default;

package/scss/pager/_variables.scss

@@ -43,7 +43,7 @@ $kendo-pager-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the Pager.
 /// @group pager
-$kendo-pager-bg: get-theme-color-var( neutral-10 ) !default;
+$kendo-pager-bg: k-get-theme-color-var( neutral-10 ) !default;
 /// The text color of the Pager.
 /// @group pager
 $kendo-pager-text: var( --kendo-component-text, inherit ) !default;
@@ -59,7 +59,7 @@ $kendo-pager-focus-bg: var( --kendo-pager-bg, #{$kendo-pager-bg}) !default;
 $kendo-pager-focus-text: var( --kendo-pager-text, #{$kendo-pager-text}) !default;
 /// The border color of the focused Pager.
 /// @group pager
-$kendo-pager-focus-border: get-theme-color-var( neutral-130 ) !default;
+$kendo-pager-focus-border: k-get-theme-color-var( neutral-130 ) !default;
 
 /// The spacing between the Pager sections.
 /// @group pager
@@ -84,11 +84,11 @@ $kendo-pager-lg-item-group-spacing: map.get( $kendo-spacing, 2 ) !default;
 
 /// The text color of the Pagers' sizes label.
 /// @group pager
-$kendo-pager-sizes-label-text: get-theme-color-var( neutral-190 ) !default;
+$kendo-pager-sizes-label-text: k-get-theme-color-var( neutral-190 ) !default;
 
 /// The text color of the Pagers' info label.
 /// @group pager
-$kendo-pager-info-label-text: get-theme-color-var( neutral-130 ) !default;
+$kendo-pager-info-label-text: k-get-theme-color-var( neutral-130 ) !default;
 
 /// The width of the Inputs in the Pager.
 /// @group pager

package/scss/panelbar/_variables.scss

@@ -80,7 +80,7 @@ $kendo-panelbar-header-border: inherit !default;
 $kendo-panelbar-header-hover-bg: var( --kendo-hover-bg, inherit ) !default;
 /// Text color of the panelbar header when hovered.
 /// @group panelbar
-$kendo-panelbar-header-hover-text: get-theme-color-var( primary-110 ) !default;
+$kendo-panelbar-header-hover-text: k-get-theme-color-var( primary-110 ) !default;
 /// Border color of the panelbar header when hovered.
 /// @group panelbar
 $kendo-panelbar-header-hover-border: inherit !default;
@@ -119,7 +119,7 @@ $kendo-panelbar-header-selected-text: $kendo-color-black !default;
 $kendo-panelbar-header-selected-border: inherit !default;
 /// Color of the marker of the panelbar header when selected.
 /// @group panelbar
-$kendo-panelbar-selected-marker: get-theme-color-var( primary-100 ) !default;
+$kendo-panelbar-selected-marker: k-get-theme-color-var( primary-100 ) !default;
 
 /// Background color of the panelbar header when selected and hovered.
 /// @group panelbar
@@ -166,7 +166,7 @@ $kendo-panelbar-header-expanded-border: inherit !default;
 $kendo-panelbar-item-hover-bg: var( --kendo-hover-bg, inherit ) !default;
 /// Text color of the panelbar item when hovered.
 /// @group panelbar
-$kendo-panelbar-item-hover-text: get-theme-color-var( primary-110 ) !default;
+$kendo-panelbar-item-hover-text: k-get-theme-color-var( primary-110 ) !default;
 /// Border color of the panelbar item when hovered.
 /// @group panelbar
 $kendo-panelbar-item-hover-border: inherit !default;

package/scss/pdf-viewer/_variables.scss

@@ -27,7 +27,7 @@ $kendo-pdf-viewer-border: var( --kendo-component-border, initial ) !default;
 
 /// Background color of the PDF viewer canvas.
 /// @group pdf-viewer
-$kendo-pdf-viewer-canvas-bg: get-theme-color-var( neutral-10 ) !default;
+$kendo-pdf-viewer-canvas-bg: k-get-theme-color-var( neutral-10 ) !default;
 /// Text color of the PDF viewer canvas.
 /// @group pdf-viewer
 $kendo-pdf-viewer-canvas-text: var( --kendo-component-text, inherit ) !default;
@@ -66,7 +66,7 @@ $kendo-pdf-viewer-search-dialog-spacing: map.get( $kendo-spacing, 2 ) !default;
 $kendo-pdf-viewer-search-panel-border-width: 1px !default;
 /// Border radius of the PDF viewer search panel.
 /// @group pdf-viewer
-$kendo-pdf-viewer-search-panel-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+$kendo-pdf-viewer-search-panel-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
 /// Background color of the PDF viewer search panel.
 /// @group pdf-viewer
 $kendo-pdf-viewer-search-panel-bg: var( --kendo-component-bg, inherit ) !default;

package/scss/pivotgrid/_variables.scss

@@ -66,14 +66,14 @@ $kendo-pivotgrid-cell-border-width: 1px !default;
 $kendo-pivotgrid-headers-bg: var( --kendo-component-bg, inherit ) !default;
 /// Text color of the PivotGrid header.
 /// @group pivotgrid
-$kendo-pivotgrid-headers-text: get-theme-color-var( neutral-190 ) !default;
+$kendo-pivotgrid-headers-text: k-get-theme-color-var( neutral-190 ) !default;
 /// Border color of the PivotGrid header.
 /// @group pivotgrid
 $kendo-pivotgrid-headers-border: var( --kendo-component-border, inherit ) !default;
 
 /// Background color of the PivotGrid total cells.
 /// @group pivotgrid
-$kendo-pivotgrid-total-bg: get-theme-color-var( neutral-20 ) !default;
+$kendo-pivotgrid-total-bg: k-get-theme-color-var( neutral-20 ) !default;
 /// Text color of the PivotGrid total cells.
 /// @group pivotgrid
 $kendo-pivotgrid-total-text: var( --kendo-component-text, inherit ) !default;
@@ -157,7 +157,7 @@ $kendo-pivotgrid-configurator-horizontal-height: 420px !default;
 $kendo-pivotgrid-configurator-bg: var( --kendo-component-bg, inherit ) !default;
 /// Text color of the PivotGrid configurator.
 /// @group pivotgrid
-$kendo-pivotgrid-configurator-text: get-theme-color-var( neutral-190 ) !default;
+$kendo-pivotgrid-configurator-text: k-get-theme-color-var( neutral-190 ) !default;
 /// Border color of the PivotGrid configurator.
 /// @group pivotgrid
 $kendo-pivotgrid-configurator-border: var( --kendo-component-border, inherit )!default;
@@ -199,7 +199,7 @@ $kendo-pivotgrid-calculated-field-padding-y: $kendo-pivotgrid-spacer !default;
 $kendo-pivotgrid-calculated-field-border-width: 1px !default;
 /// Border radius of the PivotGrid calculated field.
 /// @group pivotgrid
-$kendo-pivotgrid-calculated-field-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+$kendo-pivotgrid-calculated-field-border-radius: var( --kendo-border-radius-md, #{$kendo-border-radius-md} ) !default;
 /// Spacing of the PivotGrid calculated field.
 /// @group pivotgrid
 $kendo-pivotgrid-calculated-field-gap: $kendo-pivotgrid-spacer !default;

package/scss/popover/_variables.scss

@@ -3,89 +3,89 @@
 @use "../window/_variables.scss"as *;
 @use "../dialog/_variables.scss"as *;
 
-/// Border width around the popover.
+/// The width of the border around the Popover.
 /// @group popover
 $kendo-popover-border-width: $kendo-dialog-border-width !default;
-/// Border style around the popover.
+/// The style of the border around the Popover.
 /// @group popover
 $kendo-popover-border-style: solid !default;
-/// Border radius around the popover.
+/// The radius of the border around the Popover.
 /// @group popover
 $kendo-popover-border-radius: $kendo-window-border-radius !default;
-/// Font size of the popover.
-/// @group popover
-$kendo-popover-font-size: $kendo-window-font-size !default;
-/// Font family of the popover.
+/// The font family of the Popover.
 /// @group popover
 $kendo-popover-font-family: $kendo-window-font-family !default;
-/// Line height of the popover.
+/// The font size of the Popover.
+/// @group popover
+$kendo-popover-font-size: $kendo-window-font-size !default;
+/// The line height of the Popover.
 /// @group popover
 $kendo-popover-line-height: $kendo-window-line-height !default;
 
-/// Background color of the popover.
-/// @group popover
-$kendo-popover-bg: var( --kendo-component-bg, initial ) !default;
-/// Text color of the popover.
+/// The text color of the Popover.
 /// @group popover
 $kendo-popover-text: var( --kendo-component-text, initial ) !default;
-/// Border color of the popover.
+/// The background color of the Popover.
+/// @group popover
+$kendo-popover-bg: var( --kendo-component-bg, initial ) !default;
+/// The border color of the Popover.
 /// @group popover
 $kendo-popover-border: var( --kendo-component-border, initial ) !default;
-/// Shadow of the popover.
+/// The box shadow of the Popover.
 /// @group popover
 $kendo-popover-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
 
-/// Horizontal padding of the popover header.
+/// The horizontal padding of the Popover header.
 /// @group popover
 $kendo-popover-header-padding-x: $kendo-dialog-titlebar-padding-x !default;
-/// Vertical padding of the popover header.
+/// The vertical padding of the Popover header.
 /// @group popover
 $kendo-popover-header-padding-y: $kendo-dialog-titlebar-padding-y !default;
-/// Border width of the popover header.
+/// The border width of the Popover header.
 /// @group popover
 $kendo-popover-header-border-width: $kendo-dialog-titlebar-border-width !default;
-/// Border style of the popover header.
+/// The border style of the Popover header.
 /// @group popover
 $kendo-popover-header-border-style: $kendo-popover-border-style !default;
-/// Background color of the popover header.
-/// @group popover
-$kendo-popover-header-bg: $kendo-dialog-titlebar-bg !default;
-/// Text color of the popover header.
+/// The text color of the Popover header.
 /// @group popover
 $kendo-popover-header-text: $kendo-dialog-titlebar-text !default;
-/// Border color of the popover header.
+/// The background color of the Popover header.
+/// @group popover
+$kendo-popover-header-bg: $kendo-dialog-titlebar-bg !default;
+/// The border color of the Popover header.
 /// @group popover
 $kendo-popover-header-border: $kendo-dialog-titlebar-border !default;
 
-/// Horizontal padding of the popover body.
+/// The horizontal padding of the Popover body.
 /// @group popover
 $kendo-popover-body-padding-x: $kendo-window-inner-padding-x !default;
-/// Vertical padding of the popover body.
+/// The vertical padding of the Popover body.
 /// @group popover
 $kendo-popover-body-padding-y: $kendo-window-inner-padding-y !default;
 
-/// Border width of the popover actions.
+/// The border width of the Popover actions.
 /// @group popover
 $kendo-popover-actions-border-width: 0 !default;
-/// Horizontal padding of the popover actions.
+/// The horizontal padding of the Popover actions.
 /// @group popover
 $kendo-popover-actions-padding-x: $kendo-popover-body-padding-x !default;
-/// Vertical padding of the popover actions.
+/// The vertical padding of the Popover actions.
 /// @group popover
 $kendo-popover-actions-padding-y: $kendo-popover-body-padding-y !default;
-/// Gap of the popover actions.
+/// The spacing between the Popover actions.
 /// @group popover
 $kendo-popover-actions-gap: map.get( $kendo-spacing, 3 ) !default;
 
-/// Width of the popover callout.
+/// The width of the Popover callout.
 /// @group popover
 $kendo-popover-callout-width: map.get( $kendo-spacing, 5 ) !default;
-/// Height of the popover callout.
+/// The height of the Popover callout.
 /// @group popover
 $kendo-popover-callout-height: $kendo-popover-callout-width !default;
-/// Border width of the popover callout.
+/// The border width of the Popover callout.
 /// @group popover
 $kendo-popover-callout-border-width: $kendo-popover-border-width !default;
-/// Border style of the popover callout.
+/// The border style of the Popover callout.
 /// @group popover
-$kendo-popover-callout-border-style: $kendo-popover-border-style !default;
+$kendo-popover-callout-border-style: $kendo-popover-border-style !default;