@progress/kendo-theme-bootstrap 12.3.1-dev.8 → 13.0.0-dev.0

package/scss/list/_variables.scss

@@ -3,6 +3,11 @@
 
 // List
 
+/// The default size of the List.
+/// @group list
+/// @role default
+$kendo-list-default-size: "md" !default;
+
 /// The font family of the List components.
 /// @group list
 $kendo-list-font-family: var( --kendo-font-family, inherit ) !default;
@@ -248,78 +253,6 @@ $kendo-list-item-group-label-md-padding-y: 0 !default;
 /// @group list
 $kendo-list-item-group-label-lg-padding-y: 0 !default;
 
-/// The map with the sizes of the List.
-/// @group list
-$kendo-list-sizes: (
-    sm: (
-        font-size: $kendo-list-sm-font-size,
-        line-height: $kendo-list-sm-line-height,
-        header-padding-x: $kendo-list-sm-header-padding-x,
-        header-padding-y: $kendo-list-sm-header-padding-y,
-        header-font-size: $kendo-list-sm-header-font-size,
-        header-line-height: $kendo-list-sm-header-line-height,
-        item-padding-x: $kendo-list-sm-item-padding-x,
-        item-padding-y: $kendo-list-sm-item-padding-y,
-        item-font-size: $kendo-list-sm-item-font-size,
-        item-line-height: $kendo-list-sm-item-line-height,
-        group-item-padding-x: $kendo-list-sm-group-item-padding-x,
-        group-item-padding-y: $kendo-list-sm-group-item-padding-y,
-        group-item-font-size: $kendo-list-sm-group-item-font-size,
-        group-item-line-height: $kendo-list-sm-group-item-line-height,
-        item-group-label-padding-x: $kendo-list-item-group-label-sm-padding-x,
-        item-group-label-padding-y: $kendo-list-item-group-label-sm-padding-y,
-        item-group-label-font-size: $kendo-list-item-group-label-sm-font-size,
-        item-group-label-line-height: $kendo-list-item-group-label-sm-line-height,
-        filter-padding-x: $kendo-list-sm-filter-padding-x,
-        filter-padding-y: $kendo-list-sm-filter-padding-y
-    ),
-    md: (
-        font-size: $kendo-list-md-font-size,
-        line-height: $kendo-list-md-line-height,
-        header-padding-x: $kendo-list-md-header-padding-x,
-        header-padding-y: $kendo-list-md-header-padding-y,
-        header-font-size: $kendo-list-md-header-font-size,
-        header-line-height: $kendo-list-md-header-line-height,
-        item-padding-x: $kendo-list-md-item-padding-x,
-        item-padding-y: $kendo-list-md-item-padding-y,
-        item-font-size: $kendo-list-md-item-font-size,
-        item-line-height: $kendo-list-md-item-line-height,
-        group-item-padding-x: $kendo-list-md-group-item-padding-x,
-        group-item-padding-y: $kendo-list-md-group-item-padding-y,
-        group-item-font-size: $kendo-list-md-group-item-font-size,
-        group-item-line-height: $kendo-list-md-group-item-line-height,
-        item-group-label-padding-x: $kendo-list-item-group-label-md-padding-x,
-        item-group-label-padding-y: $kendo-list-item-group-label-md-padding-y,
-        item-group-label-font-size: $kendo-list-item-group-label-md-font-size,
-        item-group-label-line-height: $kendo-list-item-group-label-md-line-height,
-        filter-padding-x: $kendo-list-md-filter-padding-x,
-        filter-padding-y: $kendo-list-md-filter-padding-y
-    ),
-    lg: (
-        font-size: $kendo-list-lg-font-size,
-        line-height: $kendo-list-lg-line-height,
-        header-padding-x: $kendo-list-lg-header-padding-x,
-        header-padding-y: $kendo-list-lg-header-padding-y,
-        header-font-size: $kendo-list-lg-header-font-size,
-        header-line-height: $kendo-list-lg-header-line-height,
-        item-padding-x: $kendo-list-lg-item-padding-x,
-        item-padding-y: $kendo-list-lg-item-padding-y,
-        item-font-size: $kendo-list-lg-item-font-size,
-        item-line-height: $kendo-list-lg-item-line-height,
-        group-item-padding-x: $kendo-list-lg-group-item-padding-x,
-        group-item-padding-y: $kendo-list-lg-group-item-padding-y,
-        group-item-font-size: $kendo-list-lg-group-item-font-size,
-        group-item-line-height: $kendo-list-lg-group-item-line-height,
-        item-group-label-padding-x: $kendo-list-item-group-label-lg-padding-x,
-        item-group-label-padding-y: $kendo-list-item-group-label-lg-padding-y,
-        item-group-label-font-size: $kendo-list-item-group-label-lg-font-size,
-        item-group-label-line-height: $kendo-list-item-group-label-lg-line-height,
-        filter-padding-x: $kendo-list-lg-filter-padding-x,
-        filter-padding-y: $kendo-list-lg-filter-padding-y
-    )
-) !default;
-
-
 /// The background color of the List component.
 /// @group list
 $kendo-list-bg: k-color(surface-alt) !default;
@@ -402,6 +335,7 @@ $kendo-list-option-label-text: k-color(subtle) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/list/_variables.scss" with (
+    $kendo-list-default-size: $kendo-list-default-size,
     $kendo-list-font-family: $kendo-list-font-family,
     $kendo-list-font-size: $kendo-list-font-size,
     $kendo-list-sm-font-size: $kendo-list-sm-font-size,
@@ -475,7 +409,6 @@ $kendo-list-option-label-text: k-color(subtle) !default;
     $kendo-list-lg-filter-padding-x: $kendo-list-lg-filter-padding-x,
     $kendo-list-lg-filter-padding-y: $kendo-list-lg-filter-padding-y,
     $kendo-list-group-item-font-weight: $kendo-list-group-item-font-weight,
-    $kendo-list-sizes: $kendo-list-sizes,
     $kendo-list-bg: $kendo-list-bg,
     $kendo-list-text: $kendo-list-text,
     $kendo-list-border: $kendo-list-border,

package/scss/loader/_variables.scss

@@ -2,6 +2,16 @@
 
 // Loader
 
+/// The default size of the Loader.
+/// @group loader
+/// @role default
+$kendo-loader-default-size: "md" !default;
+
+/// The default theme color of the Loader.
+/// @group loader
+/// @role default
+$kendo-loader-default-theme-color: "primary" !default;
+
 /// The border radius of the Loader segment.
 /// @group loader
 $kendo-loader-segment-border-radius: 50% !default;
@@ -126,23 +136,10 @@ $kendo-loading-opacity: .3 !default;
 /// @group loading
 $kendo-zindex-loading: 100 !default;
 
-/// The theme colors of the Loader.
-/// @group loader
-$kendo-loader-theme-colors: (
-    "primary": k-color(primary),
-    "secondary": k-color(secondary),
-    "tertiary": k-color(tertiary),
-    "info": k-color(info),
-    "success": k-color(success),
-    "warning": k-color(warning),
-    "error": k-color(error),
-    "dark": k-color(dark),
-    "light": k-color(light),
-    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark))
-) !default;
-
 
 @forward "@progress/kendo-theme-core/scss/components/loader/_variables.scss" with (
+    $kendo-loader-default-size: $kendo-loader-default-size,
+    $kendo-loader-default-theme-color: $kendo-loader-default-theme-color,
     $kendo-loader-segment-border-radius: $kendo-loader-segment-border-radius,
     $kendo-loader-sm-segment-size: $kendo-loader-sm-segment-size,
     $kendo-loader-md-segment-size: $kendo-loader-md-segment-size,
@@ -179,6 +176,5 @@ $kendo-loader-theme-colors: (
     $kendo-loading-bg: $kendo-loading-bg,
     $kendo-loading-text: $kendo-loading-text,
     $kendo-loading-opacity: $kendo-loading-opacity,
-    $kendo-zindex-loading: $kendo-zindex-loading,
-    $kendo-loader-theme-colors: $kendo-loader-theme-colors
+    $kendo-zindex-loading: $kendo-zindex-loading
 );

package/scss/menu/_variables.scss

@@ -6,6 +6,11 @@
 
 // Menu
 
+/// The default size of the Menu group.
+/// @group menu
+/// @role default
+$kendo-menu-group-default-size: "md" !default;
+
 /// The width of the border around the Menu.
 /// @group menu
 $kendo-menu-border-width: 0px !default;
@@ -303,6 +308,7 @@ $kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/menu/_variables.scss" with (
+    $kendo-menu-group-default-size: $kendo-menu-group-default-size,
     $kendo-menu-border-width: $kendo-menu-border-width,
     $kendo-menu-font-family: $kendo-menu-font-family,
     $kendo-menu-font-size: $kendo-menu-font-size,

package/scss/messagebox/_variables.scss

@@ -1,6 +1,12 @@
 @use "../core/_index.scss" as *;
 
 // Message box
+
+/// The default theme color of the MessageBox.
+/// @group messagebox
+/// @role default
+$kendo-message-box-default-theme-color: null !default;
+
 /// The margin of the MessageBox.
 /// @group messagebox
 $kendo-message-box-margin: 0 0 k-spacing(4) 0 !default;
@@ -38,22 +44,8 @@ $kendo-message-box-link-font-style: normal !default;
 /// @group messagebox
 $kendo-message-box-link-text-decoration: underline !default;
 
-/// The theme colors map for the MessageBox.
-/// @group messagebox
-$kendo-message-box-theme-colors: (
-    "primary": k-color(primary),
-     "secondary": k-color(secondary),
-     "tertiary": k-color(tertiary),
-     "info": k-color(info),
-     "success": k-color(success),
-     "warning": k-color(warning),
-     "error": k-color(error),
-     "dark": k-color(dark),
-     "light": k-color(light),
-     "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark)),
-) !default;
-
 @forward "@progress/kendo-theme-core/scss/components/messagebox/_variables.scss" with (
+    $kendo-message-box-default-theme-color: $kendo-message-box-default-theme-color,
     $kendo-message-box-margin: $kendo-message-box-margin,
     $kendo-message-box-padding-x: $kendo-message-box-padding-x,
     $kendo-message-box-padding-y: $kendo-message-box-padding-y,
@@ -64,6 +56,5 @@ $kendo-message-box-theme-colors: (
     $kendo-message-box-text-level: $kendo-message-box-text-level,
     $kendo-message-box-border-level: $kendo-message-box-border-level,
     $kendo-message-box-link-font-style: $kendo-message-box-link-font-style,
-    $kendo-message-box-link-text-decoration: $kendo-message-box-link-text-decoration,
-    $kendo-message-box-theme-colors: $kendo-message-box-theme-colors
+    $kendo-message-box-link-text-decoration: $kendo-message-box-link-text-decoration
 );

package/scss/notification/_functions.scss

@@ -5,7 +5,7 @@
 @function notification-theme( $colors ) {
     $_theme: ();
 
-    @each $name, $color in $colors {
+    @each $name in $colors {
         $_theme: map.merge(( $name: (
             color: k-color(#{$name}-on-subtle),
             background-color: k-color(#{$name}-subtle),

package/scss/notification/_variables.scss

@@ -5,6 +5,11 @@
 
 // Notification
 
+/// The default theme color of the Notification.
+/// @group notification
+/// @role default
+$kendo-notification-default-theme-color: null !default;
+
 /// The row-gap between the elements in the Notification group.
 /// @group notification
 $kendo-notification-group-gap: k-spacing(3) !default;
@@ -55,24 +60,14 @@ $kendo-notification-icon-spacing: $kendo-icon-spacing !default;
 
 /// The theme colors map for the Notification.
 /// @group notification
-$kendo-notification-theme-colors: (
-    "primary": k-color(primary),
-    "secondary": k-color(secondary),
-    "tertiary": k-color(tertiary),
-    "info": k-color(info),
-    "success": k-color(success),
-    "warning": k-color(warning),
-    "error": k-color(error),
-    "dark": k-color(dark),
-    "light": k-color(light),
-    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark))
-) !default;
+$kendo-notification-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
 /// The generated theme colors map for the Notification.
 /// @group notification
 $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors ) !default;
 
 
 @forward "@progress/kendo-theme-core/scss/components/notification/_variables.scss" with (
+    $kendo-notification-default-theme-color: $kendo-notification-default-theme-color,
     $kendo-notification-group-gap: $kendo-notification-group-gap,
     $kendo-notification-padding-x: $kendo-notification-padding-x,
     $kendo-notification-padding-y: $kendo-notification-padding-y,
@@ -88,6 +83,5 @@ $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors
     $kendo-notification-border: $kendo-notification-border,
     $kendo-notification-shadow: $kendo-notification-shadow,
     $kendo-notification-icon-spacing: $kendo-notification-icon-spacing,
-    $kendo-notification-theme-colors: $kendo-notification-theme-colors,
     $kendo-notification-theme: $kendo-notification-theme
 );

package/scss/otp/_variables.scss

@@ -33,26 +33,6 @@ $kendo-otp-md-input-width: $kendo-input-md-calc-size !default;
 /// @group one-time-password
 $kendo-otp-lg-input-width: $kendo-input-lg-calc-size !default;
 
-/// The sizes map of the OTP.
-/// @group otp
-$kendo-otp-sizes: (
-    sm: (
-        gap: $kendo-otp-sm-gap,
-        separator-padding-x: $kendo-otp-sm-separator-padding-x,
-        input-width: $kendo-otp-sm-input-width
-    ),
-    md: (
-        gap: $kendo-otp-md-gap,
-        separator-padding-x: $kendo-otp-md-separator-padding-x,
-        input-width: $kendo-otp-md-input-width
-    ),
-    lg: (
-        gap: $kendo-otp-lg-gap,
-        separator-padding-x: $kendo-otp-lg-separator-padding-x,
-        input-width: $kendo-otp-lg-input-width
-    )
-) !default;
-
 @forward "@progress/kendo-theme-core/scss/components/otp/_variables.scss" with (
     $kendo-otp-sm-gap: $kendo-otp-sm-gap,
     $kendo-otp-md-gap: $kendo-otp-md-gap,
@@ -62,6 +42,5 @@ $kendo-otp-sizes: (
     $kendo-otp-lg-separator-padding-x: $kendo-otp-lg-separator-padding-x,
     $kendo-otp-sm-input-width: $kendo-otp-sm-input-width,
     $kendo-otp-md-input-width: $kendo-otp-md-input-width,
-    $kendo-otp-lg-input-width: $kendo-otp-lg-input-width,
-    $kendo-otp-sizes: $kendo-otp-sizes
+    $kendo-otp-lg-input-width: $kendo-otp-lg-input-width
 );

package/scss/overlay/_variables.scss

@@ -1,29 +1,17 @@
-@use "../core/_index.scss" as *;
-
-/// The theme colors map for the Overlay.
+/// The default theme color of the Overlay.
 /// @group overlay
-$kendo-overlay-theme-colors: (
-    "primary": k-color(primary),
-    "secondary": k-color(secondary),
-    "tertiary": k-color(tertiary),
-    "info": k-color(info),
-    "success": k-color(success),
-    "warning": k-color(warning),
-    "error": k-color(error),
-    "dark": k-color(dark),
-    "light": k-color(light),
-    "inverse": if($kendo-is-dark-theme, k-color(light), k-color(dark)),
-) !default;
+/// @role default
+$kendo-overlay-default-theme-color: "inverse" !default;
 
 /// The background color of the Overlay.
 /// @group overlay
-$kendo-overlay-bg: k-color(inverse) !default;
+$kendo-overlay-bg: null !default;
 /// The opacity of the Overlay.
 /// @group overlay
 $kendo-overlay-opacity: .5 !default;
 
 @forward "@progress/kendo-theme-core/scss/components/overlay/_variables.scss" with (
-    $kendo-overlay-theme-colors: $kendo-overlay-theme-colors,
+    $kendo-overlay-default-theme-color: $kendo-overlay-default-theme-color,
     $kendo-overlay-bg: $kendo-overlay-bg,
-    $kendo-overlay-opacity: $kendo-overlay-opacity,
+    $kendo-overlay-opacity: $kendo-overlay-opacity
 );

package/scss/pager/_variables.scss

@@ -4,6 +4,11 @@
 
 // Pager
 
+/// The default size of the Pager.
+/// @group pager
+/// @role default
+$kendo-pager-default-size: "md" !default;
+
 /// The horizontal padding of the small Pager.
 /// @group pager
 $kendo-pager-sm-padding-x: k-spacing(1) !default;
@@ -100,31 +105,8 @@ $kendo-pager-input-width: 5em !default;
 /// @group pager
 $kendo-pager-dropdown-width: 5em !default;
 
-/// The sizes map of the Pager.
-/// @group pager
-$kendo-pager-sizes: (
-    sm: (
-        padding-x: $kendo-pager-sm-padding-x,
-        padding-y: $kendo-pager-sm-padding-y,
-        item-group-spacing: $kendo-pager-sm-item-group-spacing,
-        item-min-width: $kendo-pager-sm-item-min-width,
-    ),
-    md: (
-        padding-x: $kendo-pager-md-padding-x,
-        padding-y: $kendo-pager-md-padding-y,
-        item-group-spacing: $kendo-pager-md-item-group-spacing,
-        item-min-width: $kendo-pager-md-item-min-width,
-    ),
-    lg: (
-        padding-x: $kendo-pager-lg-padding-x,
-        padding-y: $kendo-pager-lg-padding-y,
-        item-group-spacing: $kendo-pager-lg-item-group-spacing,
-        item-min-width: $kendo-pager-lg-item-min-width,
-    )
-) !default;
-
-
 @forward "@progress/kendo-theme-core/scss/components/pager/_variables.scss" with (
+    $kendo-pager-default-size: $kendo-pager-default-size,
     $kendo-pager-sm-padding-x: $kendo-pager-sm-padding-x,
     $kendo-pager-md-padding-x: $kendo-pager-md-padding-x,
     $kendo-pager-lg-padding-x: $kendo-pager-lg-padding-x,
@@ -149,6 +131,5 @@ $kendo-pager-sizes: (
     $kendo-pager-item-border-width: $kendo-pager-item-border-width,
     $kendo-pager-item-spacing: $kendo-pager-item-spacing,
     $kendo-pager-input-width: $kendo-pager-input-width,
-    $kendo-pager-dropdown-width: $kendo-pager-dropdown-width,
-    $kendo-pager-sizes: $kendo-pager-sizes
+    $kendo-pager-dropdown-width: $kendo-pager-dropdown-width
 );

package/scss/radio/_variables.scss

@@ -42,26 +42,6 @@ $kendo-radio-md-ripple-size: 300% !default;
 /// @group radio
 $kendo-radio-lg-ripple-size: 300% !default;
 
-/// The map with the different RadioButton sizes.
-/// @group radio
-$kendo-radio-sizes: (
-    sm: (
-        size: $kendo-radio-sm-size,
-        glyph-size: $kendo-radio-sm-glyph-size,
-        ripple-size: $kendo-radio-sm-ripple-size
-    ),
-    md: (
-        size: $kendo-radio-md-size,
-        glyph-size: $kendo-radio-md-glyph-size,
-        ripple-size: $kendo-radio-md-ripple-size
-    ),
-    lg: (
-        size: $kendo-radio-lg-size,
-        glyph-size: $kendo-radio-lg-glyph-size,
-        ripple-size: $kendo-radio-lg-ripple-size
-    )
-) !default;
-
 /// The background color of the RadioButton.
 /// @group radio
 $kendo-radio-bg: $kendo-checkbox-bg !default;
@@ -183,6 +163,11 @@ $kendo-radio-ripple-bg: $kendo-radio-checked-bg !default;
 /// @group radio
 $kendo-radio-ripple-opacity: .25 !default;
 
+/// The default size of the RadioButton.
+/// @group radio
+/// @role default
+$kendo-radio-default-size: "md" !default;
+
 
 @forward "@progress/kendo-theme-core/scss/components/radio/_variables.scss" with (
     $kendo-radio-radius: $kendo-radio-radius,
@@ -196,7 +181,6 @@ $kendo-radio-ripple-opacity: .25 !default;
     $kendo-radio-sm-ripple-size: $kendo-radio-sm-ripple-size,
     $kendo-radio-md-ripple-size: $kendo-radio-md-ripple-size,
     $kendo-radio-lg-ripple-size: $kendo-radio-lg-ripple-size,
-    $kendo-radio-sizes: $kendo-radio-sizes,
     $kendo-radio-bg: $kendo-radio-bg,
     $kendo-radio-text: $kendo-radio-text,
     $kendo-radio-border: $kendo-radio-border,
@@ -228,5 +212,6 @@ $kendo-radio-ripple-opacity: .25 !default;
     $kendo-radio-list-item-padding-x: $kendo-radio-list-item-padding-x,
     $kendo-radio-list-item-padding-y: $kendo-radio-list-item-padding-y,
     $kendo-radio-ripple-bg: $kendo-radio-ripple-bg,
-    $kendo-radio-ripple-opacity: $kendo-radio-ripple-opacity
+    $kendo-radio-ripple-opacity: $kendo-radio-ripple-opacity,
+    $kendo-radio-default-size: $kendo-radio-default-size
 );

package/scss/signature/_variables.scss

@@ -64,26 +64,6 @@ $kendo-signature-lg-line-size: calc( 100% - 2 * #{$kendo-signature-lg-padding-x}
 /// @group signature
 $kendo-signature-line-bottom-offset: 33% !default;
 
-/// The sizes map for the Signature.
-/// @group signature
-$kendo-signature-sizes: (
-    sm: (
-        padding-x: $kendo-signature-sm-padding-x,
-        padding-y: $kendo-signature-sm-padding-y,
-        line-size: $kendo-signature-sm-line-size
-    ),
-    md: (
-        padding-x: $kendo-signature-md-padding-x,
-        padding-y: $kendo-signature-md-padding-y,
-        line-size: $kendo-signature-md-line-size
-    ),
-    lg: (
-        padding-x: $kendo-signature-lg-padding-x,
-        padding-y: $kendo-signature-lg-padding-y,
-        line-size: $kendo-signature-lg-line-size
-    )
-) !default;
-
 /// The gap between the Signature actions.
 /// @group signature
 $kendo-signature-actions-gap: k-spacing(1) !default;
@@ -111,7 +91,6 @@ $kendo-signature-maximized-line-width: 3px !default;
     $kendo-signature-md-line-size: $kendo-signature-md-line-size,
     $kendo-signature-lg-line-size: $kendo-signature-lg-line-size,
     $kendo-signature-line-bottom-offset: $kendo-signature-line-bottom-offset,
-    $kendo-signature-sizes: $kendo-signature-sizes,
     $kendo-signature-actions-gap: $kendo-signature-actions-gap,
     $kendo-signature-maximized-line-width: $kendo-signature-maximized-line-width
 );

package/scss/split-button/_variables.scss

@@ -8,7 +8,7 @@ $kendo-split-button-focus-shadow: $kendo-button-focus-shadow !default;
 
 /// The horizontal padding of the arrow Button.
 /// @group split-button
-$kendo-split-button-arrow-padding-x: $kendo-button-md-padding-y !default;
+$kendo-split-button-arrow-padding-x: null !default;
 /// The horizontal padding of the small arrow Button.
 /// @group split-button
 $kendo-split-button-sm-arrow-padding-x: $kendo-button-sm-padding-y !default;
@@ -21,7 +21,7 @@ $kendo-split-button-lg-arrow-padding-x: $kendo-button-lg-padding-y !default;
 
 /// The vertical padding of the arrow Button.
 /// @group split-button
-$kendo-split-button-arrow-padding-y: $kendo-button-md-padding-y !default;
+$kendo-split-button-arrow-padding-y: null !default;
 /// The vertical padding of the small arrow Button.
 /// @group split-button
 $kendo-split-button-sm-arrow-padding-y: $kendo-button-sm-padding-y !default;

package/scss/spreadsheet/_variables.scss

@@ -84,7 +84,7 @@ $kendo-spreadsheet-formula-input-padding-x: $kendo-input-md-padding-x !default;
 $kendo-spreadsheet-formula-input-padding-y: $kendo-input-md-padding-y !default;
 /// The line height of the Spreadsheet formula input.
 /// @group spreadsheet
-$kendo-spreadsheet-formula-input-line-height: $kendo-input-line-height !default;
+$kendo-spreadsheet-formula-input-line-height: $kendo-input-md-line-height !default;
 
 /// The padding of the Spreadsheet formula bar icon.
 /// @group spreadsheet

package/scss/suggestion/_variables.scss

@@ -24,36 +24,6 @@ $kendo-suggestion-line-height: var( --kendo-line-height, normal ) !default;
 /// @group suggestion
 $kendo-suggestion-border-radius: k-border-radius(xl) !default;
 
-/// The background color of the Suggestion.
-/// @group suggestion
-$kendo-suggestion-bg: k-color(base-subtle) !default;
-/// The text color of the Suggestion.
-/// @group suggestion
-$kendo-suggestion-text: k-color(base-on-subtle) !default;
-/// The border color of the Suggestion.
-/// @group suggestion
-$kendo-suggestion-border: k-color(base-emphasis) !default;
-
-/// The background color of the hovered Suggestion.
-/// @group suggestion
-$kendo-suggestion-hover-bg: k-color(base-subtle-hover) !default;
-/// The text color of the hovered Suggestion.
-/// @group suggestion
-$kendo-suggestion-hover-text: k-color(base-on-subtle) !default;
-/// The border color of the hovered Suggestion.
-/// @group suggestion
-$kendo-suggestion-hover-border: k-color(base-emphasis) !default;
-
-/// The background color of the active Suggestion.
-/// @group suggestion
-$kendo-suggestion-active-bg: k-color(base-subtle-active) !default;
-/// The text color of the active Suggestion.
-/// @group suggestion
-$kendo-suggestion-active-text: k-color(base-on-subtle) !default;
-/// The border color of the active Suggestion.
-/// @group suggestion
-$kendo-suggestion-active-border: k-color(base-emphasis) !default;
-
 /// The shadow blur of the focused Suggestion.
 /// @group suggestion
 $kendo-suggestion-focus-shadow-blur: 0 !default;
@@ -64,12 +34,10 @@ $kendo-suggestion-focus-shadow-spread: 2px !default;
 /// @group suggestion
 $kendo-suggestion-focus-shadow-color: color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
 
-/// The theme colors map of the Suggestion.
+/// The default theme color of the Suggestion.
 /// @group suggestion
-$kendo-suggestion-theme-colors: (
-    "primary": k-color(primary),
-    "secondary": k-color(secondary)
-) !default;
+/// @role default
+$kendo-suggestion-default-theme-color: "base" !default;
 
 @forward "@progress/kendo-theme-core/scss/components/suggestion/_variables.scss" with (
     $kendo-suggestion-padding-y: $kendo-suggestion-padding-y,
@@ -79,17 +47,8 @@ $kendo-suggestion-theme-colors: (
     $kendo-suggestion-border-style: $kendo-suggestion-border-style,
     $kendo-suggestion-line-height: $kendo-suggestion-line-height,
     $kendo-suggestion-border-radius: $kendo-suggestion-border-radius,
-    $kendo-suggestion-bg: $kendo-suggestion-bg,
-    $kendo-suggestion-text: $kendo-suggestion-text,
-    $kendo-suggestion-border: $kendo-suggestion-border,
-    $kendo-suggestion-hover-bg: $kendo-suggestion-hover-bg,
-    $kendo-suggestion-hover-text: $kendo-suggestion-hover-text,
-    $kendo-suggestion-hover-border: $kendo-suggestion-hover-border,
-    $kendo-suggestion-active-bg: $kendo-suggestion-active-bg,
-    $kendo-suggestion-active-text: $kendo-suggestion-active-text,
-    $kendo-suggestion-active-border: $kendo-suggestion-active-border,
     $kendo-suggestion-focus-shadow-blur: $kendo-suggestion-focus-shadow-blur,
     $kendo-suggestion-focus-shadow-spread: $kendo-suggestion-focus-shadow-spread,
     $kendo-suggestion-focus-shadow-color: $kendo-suggestion-focus-shadow-color,
-    $kendo-suggestion-theme-colors: $kendo-suggestion-theme-colors
+    $kendo-suggestion-default-theme-color: $kendo-suggestion-default-theme-color
 );