@progress/kendo-theme-fluent 12.3.1-dev.9 → 13.0.0-dev.0

package/scss/input/_variables.scss

@@ -2,10 +2,26 @@
 @use "../core/_index.scss" as *;
 @use "../button/_variables.scss"as *;
 
+/// The default fill mode of the Input.
+/// @group input
+/// @role default
+$kendo-input-default-fill-mode: "solid" !default;
+/// The default roundness of the Input.
+/// @group input
+/// @role default
+$kendo-input-default-roundness: "md" !default;
+/// The default size of the Input.
+/// @group input
+/// @role default
+$kendo-input-default-size: "md" !default;
+
 /// The width of the Input components.
 /// @group input
 $kendo-input-width: var( --kendo-input-width, 100% ) !default;
 
+/// The border radius of the Input components.
+/// @group input
+$kendo-input-border-radius: null !default;
 /// The width of the border around the Input components.
 /// @group input
 $kendo-input-border-width: 1px !default;
@@ -229,172 +245,187 @@ $kendo-input-flat-disabled-bg: none !default;
 /// @group input
 $kendo-input-flat-disabled-border: color-mix(in srgb, k-color(on-app-surface) 14%, transparent) !default;
 
+/// The default fill mode of the Picker.
+/// @group picker
+/// @role default
+$kendo-picker-default-fill-mode: "solid" !default;
+
+/// The default roundness of the Picker.
+/// @group picker
+/// @role default
+$kendo-picker-default-roundness: "md" !default;
+
+/// The default size of the Picker.
+/// @group picker
+/// @role default
+$kendo-picker-default-size: "md" !default;
+
 /// The text color of the solid Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-text: var( --kendo-picker-text, k-color(on-app-surface) ) !default;
 
 /// The background color of the solid Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-bg: var( --kendo-picker-bg, k-color(surface-alt) ) !default;
 
 /// The border color of the solid Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-border: var( --kendo-picker-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 
 /// The text color of the hovered solid Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-hover-text: k-color(on-app-surface) !default;
 
 /// The background color of hovered the solid Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-hover-bg: k-color(surface-alt) !default;
 
 /// The border color of the hovered solid Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-hover-border: color-mix(in srgb, k-color(border) 34%, transparent) !default;
 
 /// The text color of the focused solid Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-focus-text: k-color(on-app-surface) !default;
 
 /// The background color of the focused solid Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-focus-bg: k-color(surface-alt) !default;
 
 /// The border color of the focused solid Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-focus-border: k-color(primary-on-surface) !default;
 
 /// The text color of the disabled solid Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-disabled-text: color-mix(in srgb, k-color(on-app-surface) 30%, transparent) !default;
 
 /// The background color of the disabled solid Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-disabled-bg: null !default;
 
 /// The border color of the disabled solid Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-disabled-border: color-mix(in srgb, k-color(on-app-surface) 14%, transparent ) !default;
 
 /// The text color of the outline Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-outline-text: var( --kendo-picker-outline-text, k-color(on-app-surface) ) !default;
 
 /// The background color of the outline Picker components.
-/// @group input
-$kendo-picker-outline-bg: var( --kendo-picker-outline-bg, none ) !default;
+/// @group picker
+$kendo-picker-outline-bg: var( --kendo-picker-outline-bg, transparent ) !default;
 
 /// The border color of the outline Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-outline-border: var( --kendo-picker-outline-border, color-mix( in srgb, k-color(border) 26%, transparent ) ) !default;
 
 /// The text color of the hovered outline Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-outline-hover-text: k-color(on-app-surface) !default;
 
 /// The background color of the hovered outline Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-outline-hover-bg: k-color(app-surface) !default;
 
 /// The border color of the hovered outline Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-outline-hover-border: color-mix( in srgb, k-color(border) 34%, transparent ) !default;
 
 /// The text color of the focused outline Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-outline-focus-text: k-color(on-app-surface) !default;
 
 /// The background color of the focused outline Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-outline-focus-bg: k-color(app-surface) !default;
 
 /// The border color of the focused outline Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-outline-focus-border: k-color(primary-on-surface) !default;
 
 /// The text color of the hovered and focused outline Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-outline-hover-focus-text: k-color(on-app-surface) !default;
 
 /// The background color of the hovered and focused outline Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-outline-hover-focus-bg: k-color(app-surface) !default;
 
 /// The border color of the hovered and focused outline Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-outline-hover-focus-border: k-color(primary-on-surface) !default;
 
 /// The text color of the disabled outline Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-outline-disabled-text: color-mix(in srgb, k-color(on-app-surface) 30%, transparent) !default;
 
 /// The background color of the disabled outline Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-outline-disabled-bg: none !default;
 
 /// The border color of the disabled outline Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-outline-disabled-border: $kendo-picker-outline-disabled-text!default;
 
 /// The text color of the flat Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-flat-text: var( --kendo-picker-flat-text, k-color(on-app-surface) ) !default;
 
 /// The background color of the flat Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-flat-bg: var( --kendo-picker-flat-bg, none ) !default;
 
 /// The border color of the flat Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-flat-border: var( --kendo-picker-flat-border, k-color(border) ) !default;
 
 /// The text color of the hovered flat Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-flat-hover-text: k-color(on-app-surface) !default;
 
 /// The background color of the hovered flat Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-flat-hover-bg: var( --kendo-picker-outline-bg, none ) !default;
 
 /// The border color of the hovered flat Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-flat-hover-border: k-color(border-alt) !default;
 
 /// The text color of the focused flat Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-flat-focus-text: k-color(on-app-surface) !default;
 
 /// The background color of the focused flat Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-flat-focus-bg: k-color(app-surface) !default;
 
 /// The border color of the focused flat Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-flat-focus-border: k-color(primary-on-surface) !default;
 
 /// The text color of the hovered and focused flat Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-flat-hover-focus-text: $kendo-picker-flat-hover-text !default;
 
 /// The background color of the hovered and focused flat Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-flat-hover-focus-bg: $kendo-picker-flat-hover-bg !default;
 
 /// The border color of the hovered and focused flat Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-flat-hover-focus-border: $kendo-picker-flat-border !default;
 
 /// The text color of the disabled flat Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-flat-disabled-text: color-mix(in srgb, k-color(on-app-surface) 30%, transparent) !default;
 
 /// The background color of the disabled flat Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-flat-disabled-bg: none !default;
 
 /// The border color of the disabled flat Picker components.
-/// @group input
+/// @group picker
 $kendo-picker-flat-disabled-border: $kendo-picker-flat-disabled-text !default;
 
 $kendo-input-calc-size: calc( ( #{$kendo-input-md-line-height} * 1em ) + ( #{$kendo-input-md-padding-y} * 2 ) + calc( #{$kendo-input-border-width} * 2 ) ) !default;
@@ -495,7 +526,11 @@ $kendo-use-input-spinner-width: true !default;
 $kendo-use-input-spinner-icon-offset: false !default;
 
 @forward "@progress/kendo-theme-core/scss/components/input/_variables.scss" with (
+    $kendo-input-default-fill-mode: $kendo-input-default-fill-mode,
+    $kendo-input-default-roundness: $kendo-input-default-roundness,
+    $kendo-input-default-size: $kendo-input-default-size,
     $kendo-input-default-width: $kendo-input-width,
+    $kendo-input-border-radius: $kendo-input-border-radius,
     $kendo-input-border-width: $kendo-input-border-width,
     $kendo-input-sm-padding-x: $kendo-input-sm-padding-x,
     $kendo-input-md-padding-x: $kendo-input-md-padding-x,
@@ -556,6 +591,9 @@ $kendo-use-input-spinner-icon-offset: false !default;
     $kendo-input-prefix-text: $kendo-input-prefix-text,
     $kendo-input-suffix-text: $kendo-input-suffix-text,
     $kendo-input-invalid-border: $kendo-input-invalid-border,
+    $kendo-picker-default-fill-mode: $kendo-picker-default-fill-mode,
+    $kendo-picker-default-roundness: $kendo-picker-default-roundness,
+    $kendo-picker-default-size: $kendo-picker-default-size,
     $kendo-picker-bg: $kendo-picker-bg,
     $kendo-picker-text: $kendo-picker-text,
     $kendo-picker-border: $kendo-picker-border,

package/scss/list/_variables.scss

@@ -1,6 +1,11 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 
+/// 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-list-font-family, var(--kendo-font-family, inherit) ) !default;
@@ -226,75 +231,6 @@ $kendo-list-item-border-radius: var( --kendo-list-item-border-radius, #{k-border
 /// @group list
 $kendo-list-item-spacing: var( --kendo-list-item-spacing, #{k-spacing(0.5)} ) !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,
-        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,
-        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,
-        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,
-        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,
-        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,
-        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,
-        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,
-        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,
-        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: var( --kendo-list-bg, #{k-color(surface-alt)} ) !default;
@@ -386,6 +322,7 @@ $kendo-list-option-label-text: var( --kendo-list-option-label-text, #{k-color(su
 $kendo-list-option-label-disabled-text: var( --kendo-list-option-label-disabled-text, #{color-mix(in srgb, k-color(on-app-surface) 46%, transparent)} ) !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-sm-font-size: $kendo-list-sm-font-size,
     $kendo-list-md-font-size: $kendo-list-md-font-size,
@@ -448,7 +385,6 @@ $kendo-list-option-label-disabled-text: var( --kendo-list-option-label-disabled-
     $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 @@
 @use "sass:math";
 @use "../core/_index.scss" as *;
 
+/// 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: var( --kendo-loader-segment-border-radius, 50% ) !default;
@@ -136,21 +146,6 @@ $kendo-loader-md-container-font-size: var( --kendo-loader-md-container-font-size
 /// @group loader
 $kendo-loader-lg-container-font-size: var( --kendo-loader-lg-container-font-size, var( --kendo-font-size-xl, inherit ) ) !default;
 
-/// The theme colors map for the Loader variations.
-/// @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;
-
 // Loading indicator
 /// The background color of the Loading indicator.
 /// @group loading
@@ -166,6 +161,8 @@ $kendo-loading-opacity: var( --kendo-loading-opacity, .3 ) !default;
 $kendo-zindex-loading: var( --kendo-zindex-loading, 100 ) !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,
@@ -196,6 +193,5 @@ $kendo-zindex-loading: var( --kendo-zindex-loading, 100 ) !default;
     $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

@@ -3,6 +3,11 @@
 @use "../list/_variables.scss"as *;
 @use "../popup/_variables.scss"as *;
 
+/// 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: var( --kendo-menu-border-width, #{k-spacing(0)} ) !default;
@@ -217,38 +222,6 @@ $kendo-menu-popup-lg-item-icon-margin-end: calc( -1 * (var( --kendo-icon-size, 1
 /// @group menu
 $kendo-menu-popup-item-spacing: var( --kendo-menu-popup-item-spacing, #{k-spacing(0)} ) !default;
 
-/// The sizes map for the Menu.
-/// @group menu
-$kendo-menu-sizes: (
-    sm: (
-        group-font-size: $kendo-menu-popup-sm-font-size,
-        group-line-height: $kendo-menu-popup-sm-line-height,
-        link-padding-x: $kendo-menu-popup-sm-item-padding-x,
-        link-padding-y: $kendo-menu-popup-sm-item-padding-y,
-        link-padding-inline-end: $kendo-menu-popup-sm-item-padding-end,
-        arrow-margin-inline-start: $kendo-menu-popup-sm-item-icon-margin-start,
-        arrow-margin-inline-end: $kendo-menu-popup-sm-item-icon-margin-end,
-    ),
-    md: (
-        group-font-size: $kendo-menu-popup-md-font-size,
-        group-line-height: $kendo-menu-popup-md-line-height,
-        link-padding-x: $kendo-menu-popup-md-item-padding-x,
-        link-padding-y: $kendo-menu-popup-md-item-padding-y,
-        link-padding-inline-end: $kendo-menu-popup-md-item-padding-end,
-        arrow-margin-inline-start: $kendo-menu-popup-item-icon-md-margin-start,
-        arrow-margin-inline-end: $kendo-menu-popup-item-icon-md-margin-end,
-    ),
-    lg: (
-        group-font-size: $kendo-menu-popup-lg-font-size,
-        group-line-height: $kendo-menu-popup-lg-line-height,
-        link-padding-x: $kendo-menu-popup-lg-item-padding-x,
-        link-padding-y: $kendo-menu-popup-lg-item-padding-y,
-        link-padding-inline-end: $kendo-menu-popup-lg-item-padding-end,
-        arrow-margin-inline-start: $kendo-menu-popup-lg-item-icon-margin-start,
-        arrow-margin-inline-end: $kendo-menu-popup-lg-item-icon-margin-end
-    )
-) !default;
-
 /// The text color of the Menu item in popup.
 /// @group menu
 $kendo-menu-popup-item-text: var( --kendo-menu-popup-item-text, #{$kendo-list-item-text} ) !default;
@@ -300,6 +273,7 @@ $kendo-menu-scroll-button-hover-border: var( --kendo-menu-scroll-button-hover-bo
 $kendo-menu-icon-color: var( --kendo-menu-icon-color, #{k-color(primary)} ) !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,11 @@
 @use "sass:map";
 @use "../core/_index.scss" as *;
 
+/// The default theme color of the MessageBox.
+/// @group messagebox
+/// @role default
+$kendo-message-box-default-theme-color: null !default;
+
 /// Margin around the message box.
 /// @group messagebox
 $kendo-message-box-margin: var( --kendo-message-box-margin, 0 0 k-spacing(3) 0 ) !default;
@@ -42,28 +47,13 @@ $kendo-message-box-link-text: var( --kendo-message-box-link-text, k-color(primar
 /// @group messagebox
 $kendo-message-box-link-hover-text: var( --kendo-message-box-link-hover-text, k-color(primary-hover) ) !default;
 
-/// The theme colors of the Messagebox.
-/// @group messagebox
-$kendo-messagebox-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,
     $kendo-message-box-border-width: $kendo-message-box-border-width,
     $kendo-message-box-font-size: $kendo-message-box-font-size,
     $kendo-message-box-line-height: $kendo-message-box-line-height,
-    $kendo-message-box-link-font-style: $kendo-message-box-link-font-style,
-    $kendo-message-box-theme-colors: $kendo-messagebox-theme-colors
+    $kendo-message-box-link-font-style: $kendo-message-box-link-font-style
 );

package/scss/notification/_functions.scss

@@ -5,10 +5,10 @@
 @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: $color,
+            background-color: k-color(#{$name}-subtle),
             border: k-color(#{$name}-emphasis),
         )), $_theme );
     }

package/scss/notification/_variables.scss

@@ -2,6 +2,11 @@
 @use "./_functions.scss" as *;
 @use "../core/_index.scss" as *;
 
+/// 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: var( --kendo-notification-group-gap, #{k-spacing(2)} ) !default;
@@ -48,26 +53,16 @@ $kendo-notification-border: var( --kendo-notification-border, color-mix(in srgb,
 /// @group notification
 $kendo-notification-icon-spacing: var( --kendo-notification-icon-spacing, #{k-spacing(2)} ) !default;
 
-/// The theme colors map for the Notification variations.
-/// @group notification
-$kendo-notification-theme-colors: (
-    "primary": k-color(primary-subtle),
-    "secondary": k-color(secondary-subtle),
-    "tertiary": k-color(tertiary-subtle),
-    "info": k-color(info-subtle),
-    "success": k-color(success-subtle),
-    "warning": k-color(warning-subtle),
-    "error": k-color(error-subtle),
-    "dark": k-color(dark-subtle),
-    "light": k-color(light-subtle),
-    "inverse": if($kendo-is-dark-theme, k-color(light-subtle), k-color(dark-subtle))
-) !default;
+/// The theme colors map for the Notification.
+/// @group notification
+$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,
@@ -82,6 +77,5 @@ $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors
     $kendo-notification-text: $kendo-notification-text,
     $kendo-notification-border: $kendo-notification-border,
     $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

@@ -42,26 +42,6 @@ $kendo-otp-md-input-width: var( --kendo-otp-md-input-width, #{$kendo-otp-input-w
 /// @group one-time-password
 $kendo-otp-lg-input-width: var( --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,
@@ -71,6 +51,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/_theme.scss

@@ -3,13 +3,4 @@
 
 @mixin kendo-overlay--theme() {
     @include kendo-overlay--theme-base();
-
-    .k-overlay,
-    .k-overlay-dark {
-        background-color: $kendo-overlay-dark;
-    }
-
-    .k-overlay-light {
-        background-color: $kendo-overlay-light;
-    }
 }