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

package/scss/fab/_variables.scss

@@ -3,6 +3,23 @@
 
 // Floating Action Button
 
+/// The default theme color of the FAB.
+/// @group floating-action-button
+/// @role default
+$kendo-fab-default-theme-color: "primary" !default;
+/// The default fill mode of the FAB.
+/// @group floating-action-button
+/// @role default
+$kendo-fab-default-fill-mode: "solid" !default;
+/// The default roundness of the FAB.
+/// @group floating-action-button
+/// @role default
+$kendo-fab-default-roundness: "full" !default;
+/// The default size of the FAB.
+/// @group floating-action-button
+/// @role default
+$kendo-fab-default-size: "md" !default;
+
 /// The width of the border around the FAB.
 /// @group floating-action-button
 $kendo-fab-border-width: 1px !default;
@@ -89,37 +106,6 @@ $kendo-fab-item-icon-border-width: 0 !default;
 /// @group floating-action-button
 $kendo-fab-item-icon-border-radius: 50% !default;
 
-/// The theme colors map for the FAB.
-/// @group floating-action-button
-$kendo-fab-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;
-
-/// The size map for the FAB.
-/// @group floating-action-button
-$kendo-fab-sizes: (
-    sm: (
-        padding-x: $kendo-fab-sm-padding-x,
-        padding-y: $kendo-fab-sm-padding-y
-    ),
-    md: (
-        padding-x: $kendo-fab-md-padding-x,
-        padding-y: $kendo-fab-md-padding-y
-    ),
-    lg: (
-        padding-x: $kendo-fab-lg-padding-x,
-        padding-y: $kendo-fab-lg-padding-y
-    )
-) !default;
 
 /// The base shadow of the FAB.
 /// @group floating-action-button
@@ -181,6 +167,10 @@ $kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default;
 $kendo-fab-generating-opacity: 40% !default;
 
 @forward "@progress/kendo-theme-core/scss/components/fab/_variables.scss" with (
+    $kendo-fab-default-theme-color: $kendo-fab-default-theme-color,
+    $kendo-fab-default-fill-mode: $kendo-fab-default-fill-mode,
+    $kendo-fab-default-roundness: $kendo-fab-default-roundness,
+    $kendo-fab-default-size: $kendo-fab-default-size,
     $kendo-fab-border-width: $kendo-fab-border-width,
     $kendo-fab-font-family: $kendo-fab-font-family,
     $kendo-fab-font-size: $kendo-fab-font-size,
@@ -206,8 +196,6 @@ $kendo-fab-generating-opacity: 40% !default;
     $kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-y,
     $kendo-fab-item-icon-border-width: $kendo-fab-item-icon-border-width,
     $kendo-fab-item-icon-border-radius: $kendo-fab-item-icon-border-radius,
-    $kendo-fab-theme-colors: $kendo-fab-theme-colors,
-    $kendo-fab-sizes: $kendo-fab-sizes,
     $kendo-fab-shadow: $kendo-fab-shadow,
     $kendo-fab-disabled-shadow: $kendo-fab-disabled-shadow,
     $kendo-fab-active-shadow: $kendo-fab-active-shadow,

package/scss/floating-label/_variables.scss

@@ -8,13 +8,13 @@
 $kendo-floating-label-scale: 1 !default;
 /// The font size of the Floating Label.
 /// @group floating-label
-$kendo-floating-label-font-size: $kendo-input-font-size !default;
+$kendo-floating-label-font-size: $kendo-input-md-font-size !default;
 /// The maximum width of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-max-width: 90% !default;
 /// The line height of the Floating Label.
 /// @group floating-label
-$kendo-floating-label-line-height: $kendo-input-line-height !default;
+$kendo-floating-label-line-height: $kendo-input-md-line-height !default;
 /// The height of the Floating Label.
 /// @group floating-label
 $kendo-floating-label-height: calc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} ) !default;

package/scss/forms/_variables.scss

@@ -7,6 +7,11 @@
 
 // Forms
 
+/// The default size of the Form.
+/// @group form
+/// @role default
+$kendo-form-default-size: "md" !default;
+
 /// The padding of the inline Form.
 /// @group form
 $kendo-form-spacer: calc( #{k-spacing(2)} * 2 ) !default;
@@ -144,22 +149,9 @@ $kendo-form-field-info-margin: k-spacing(2) !default;
 /// @group form
 $kendo-fieldset-legend-text: k-color(on-app-surface) !default;
 
-/// The sizes map for the Form.
-/// @group form
-$kendo-form-sizes: (
-    sm: (
-        form-rows-spacing: $kendo-form-sm-rows-spacing
-    ),
-    md: (
-        form-rows-spacing: $kendo-form-md-rows-spacing
-    ),
-    lg: (
-        form-rows-spacing: $kendo-form-lg-rows-spacing
-    )
-) !default;
-
 
 @forward "@progress/kendo-theme-core/scss/components/forms/_variables.scss" with (
+    $kendo-form-default-size: $kendo-form-default-size,
     $kendo-form-spacer: $kendo-form-spacer,
     $kendo-form-font-size: $kendo-form-font-size,
     $kendo-form-line-height: $kendo-form-line-height,
@@ -198,6 +190,5 @@ $kendo-form-sizes: (
     $kendo-fieldset-legend-margin: $kendo-fieldset-legend-margin,
     $kendo-form-alert-error-margin: $kendo-form-alert-error-margin,
     $kendo-form-field-info-margin: $kendo-form-field-info-margin,
-    $kendo-fieldset-legend-text: $kendo-fieldset-legend-text,
-    $kendo-form-sizes: $kendo-form-sizes
+    $kendo-fieldset-legend-text: $kendo-fieldset-legend-text
 );

package/scss/grid/_variables.scss

@@ -10,6 +10,12 @@
 @use "../popup/_variables.scss" as *;
 
 // Grid
+
+/// The default size of the Grid.
+/// @group grid
+/// @role default
+$kendo-grid-default-size: "md" !default;
+
 /// The width of the border around the Grid.
 /// @group grid
 $kendo-grid-border-width: 1px !default;
@@ -171,46 +177,6 @@ $kendo-grid-md-selection-aggregates-padding-x: $kendo-grid-padding-y !default;
 $kendo-grid-md-selection-aggregates-padding-y: $kendo-grid-padding-y !default;
 
 
-// Kendo Grid sizes
-/// The sizes of the Grid.
-/// @group grid
-$kendo-grid-sizes: (
-    sm: (
-        header-padding-x: $kendo-grid-sm-header-padding-x,
-        header-padding-y: $kendo-grid-sm-header-padding-y,
-        grouping-header-padding-x: $kendo-grid-sm-grouping-header-padding-x,
-        grouping-header-padding-y: $kendo-grid-sm-grouping-header-padding-y,
-        cell-padding-x: $kendo-grid-sm-cell-padding-x,
-        cell-padding-y: $kendo-grid-sm-cell-padding-y,
-        filter-cell-padding-x: $kendo-grid-sm-filter-cell-padding-x,
-        filter-cell-padding-y: $kendo-grid-sm-filter-cell-padding-y,
-        edit-cell-padding-x: $kendo-grid-sm-edit-cell-padding-x,
-        edit-cell-padding-y: $kendo-grid-sm-edit-cell-padding-y,
-        button-padding-y: $kendo-button-sm-padding-y,
-        button-calc-size: $kendo-button-sm-calc-size,
-        group-dropclue-height: $kendo-grid-sm-group-dropclue-height,
-        selection-aggregates-padding-x: $kendo-grid-sm-selection-aggregates-padding-x,
-        selection-aggregates-padding-y: $kendo-grid-sm-selection-aggregates-padding-y
-    ),
-    md: (
-        header-padding-x: $kendo-grid-md-header-padding-x,
-        header-padding-y: $kendo-grid-md-header-padding-y,
-        grouping-header-padding-x: $kendo-grid-md-grouping-header-padding-x,
-        grouping-header-padding-y: $kendo-grid-md-grouping-header-padding-y,
-        cell-padding-x: $kendo-grid-md-cell-padding-x,
-        cell-padding-y: $kendo-grid-md-cell-padding-y,
-        filter-cell-padding-x: $kendo-grid-md-filter-cell-padding-x,
-        filter-cell-padding-y: $kendo-grid-md-filter-cell-padding-y,
-        edit-cell-padding-x: $kendo-grid-md-edit-cell-padding-x,
-        edit-cell-padding-y: $kendo-grid-md-edit-cell-padding-y,
-        button-padding-y: $kendo-button-md-padding-y,
-        button-calc-size: $kendo-button-md-calc-size,
-        group-dropclue-height: $kendo-grid-md-group-dropclue-height,
-        selection-aggregates-padding-x: $kendo-grid-md-selection-aggregates-padding-x,
-        selection-aggregates-padding-y: $kendo-grid-md-selection-aggregates-padding-y
-    ),
-) !default;
-
 /// The font size of the Grid header.
 /// @group grid
 $kendo-grid-header-font-size: null !default;
@@ -519,6 +485,7 @@ $kendo-grid-stack-focus-outline: color-mix(in srgb, k-color(on-app-surface) 12%,
 $kendo-grid-stack-expandable-shadow: k-elevation(2) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/grid/_variables.scss" with (
+    $kendo-grid-default-size: $kendo-grid-default-size,
     $kendo-grid-border-width: $kendo-grid-border-width,
     $kendo-grid-font-family: $kendo-grid-font-family,
     $kendo-grid-font-size: $kendo-grid-font-size,
@@ -569,7 +536,6 @@ $kendo-grid-stack-expandable-shadow: k-elevation(2) !default;
     $kendo-grid-md-group-dropclue-height: $kendo-grid-md-group-dropclue-height,
     $kendo-grid-md-selection-aggregates-padding-x: $kendo-grid-md-selection-aggregates-padding-x,
     $kendo-grid-md-selection-aggregates-padding-y: $kendo-grid-md-selection-aggregates-padding-y,
-    $kendo-grid-sizes: $kendo-grid-sizes,
     $kendo-grid-header-font-size: $kendo-grid-header-font-size,
     $kendo-grid-header-first-border: $kendo-grid-header-first-border,
     $kendo-grid-header-menu-icon-spacing: $kendo-grid-header-menu-icon-spacing,

package/scss/icons/_variables.scss

@@ -1,5 +1,10 @@
 @use "../core/_index.scss" as *;
 
+/// The default size of the Icon.
+/// @group icon
+/// @role default
+$kendo-icon-default-size: "md" !default;
+
 /// The default size icon size.
 /// @group icon
 $kendo-icon-size: 16px !default;
@@ -32,6 +37,7 @@ $kendo-icon-spacing: k-spacing(1) !default;
 $kendo-icon-padding: k-spacing(1) !default;
 
 @forward "@progress/kendo-theme-core/scss/components/icons/_variables.scss" with (
+    $kendo-icon-default-size: $kendo-icon-default-size,
     $kendo-icon-size: $kendo-icon-size,
     $kendo-icon-size-xs: $kendo-icon-size-xs,
     $kendo-icon-size-sm: $kendo-icon-size-sm,

package/scss/input/_variables.scss

@@ -3,6 +3,19 @@
 
 // Input
 
+/// 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 default width of the Input components.
 /// @group input
 $kendo-input-default-width: 100% !default;
@@ -40,26 +53,26 @@ $kendo-input-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// The font size of the Input components.
 /// @group input
-$kendo-input-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-input-font-size: null !default;
 /// The font size of the small Input components.
 /// @group input
 $kendo-input-sm-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the medium Input components.
 /// @group input
-$kendo-input-md-font-size: $kendo-input-font-size !default;
+$kendo-input-md-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the large Input components.
 /// @group input
 $kendo-input-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 
 /// The line height of the Input components.
 /// @group input
-$kendo-input-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-input-line-height: null !default;
 /// The line height of the small Input components.
 /// @group input
 $kendo-input-sm-line-height: var( --kendo-line-height, normal ) !default;
 /// The line height of the medium Input components.
 /// @group input
-$kendo-input-md-line-height: $kendo-input-line-height !default;
+$kendo-input-md-line-height: var( --kendo-line-height, normal ) !default;
 /// The line height of the large Input components.
 /// @group input
 $kendo-input-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
@@ -68,35 +81,6 @@ $kendo-input-sm-calc-size: calc( ( #{$kendo-input-sm-line-height} * 1em ) + ( #{
 $kendo-input-md-calc-size: calc( ( #{$kendo-input-md-line-height} * 1em ) + ( #{$kendo-input-md-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
 $kendo-input-lg-calc-size: calc( ( #{$kendo-input-lg-line-height} * 1em ) + ( #{$kendo-input-lg-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) ) !default;
 
-/// The sizes map for the Input components.
-/// @group input
-$kendo-input-sizes: (
-    sm: (
-        padding-x: $kendo-input-sm-padding-x,
-        padding-y: $kendo-input-sm-padding-y,
-        font-size: $kendo-input-sm-font-size,
-        line-height: $kendo-input-sm-line-height,
-        button-padding-x: $kendo-input-sm-padding-y,
-        button-padding-y: $kendo-input-sm-padding-y
-    ),
-    md: (
-        padding-x: $kendo-input-md-padding-x,
-        padding-y: $kendo-input-md-padding-y,
-        font-size: $kendo-input-md-font-size,
-        line-height: $kendo-input-md-line-height,
-        button-padding-x: $kendo-input-md-padding-y,
-        button-padding-y: $kendo-input-md-padding-y
-    ),
-    lg: (
-        padding-x: $kendo-input-lg-padding-x,
-        padding-y: $kendo-input-lg-padding-y,
-        font-size: $kendo-input-lg-font-size,
-        line-height: $kendo-input-lg-line-height,
-        button-padding-x: $kendo-input-lg-padding-y,
-        button-padding-y: $kendo-input-lg-padding-y
-    )
-) !default;
-
 /// The background color of the Input components.
 /// @group input
 $kendo-input-bg: k-color(surface-alt) !default;
@@ -275,6 +259,19 @@ $kendo-input-invalid-border: k-color(error-on-surface) !default;
 /// @group input
 $kendo-input-invalid-shadow: null !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 background color of the Picker components.
 /// @group picker
 $kendo-picker-bg: $kendo-button-bg !default;
@@ -341,7 +338,7 @@ $kendo-picker-disabled-shadow: null !default;
 
 /// The background color of the outline Picker components.
 /// @group picker
-$kendo-picker-outline-bg: null !default;
+$kendo-picker-outline-bg: transparent !default;
 /// The text color of the outline Picker components.
 /// @group picker
 $kendo-picker-outline-text: k-color(on-app-surface) !default;
@@ -384,7 +381,7 @@ $kendo-picker-outline-hover-focus-border: null !default;
 
 /// The background color of the flat Picker components.
 /// @group picker
-$kendo-picker-flat-bg: null !default;
+$kendo-picker-flat-bg: transparent !default;
 /// The text color of the flat Picker components.
 /// @group picker
 $kendo-picker-flat-text: k-color(on-app-surface) !default;
@@ -430,6 +427,9 @@ $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-default-width,
     $kendo-input-border-width: $kendo-input-border-width,
     $kendo-input-border-radius: $kendo-input-border-radius,
@@ -451,7 +451,6 @@ $kendo-use-input-spinner-icon-offset: false !default;
     $kendo-input-sm-calc-size: $kendo-input-sm-calc-size,
     $kendo-input-md-calc-size: $kendo-input-md-calc-size,
     $kendo-input-lg-calc-size: $kendo-input-lg-calc-size,
-    $kendo-input-sizes: $kendo-input-sizes,
     $kendo-input-bg: $kendo-input-bg,
     $kendo-input-text: $kendo-input-text,
     $kendo-input-border: $kendo-input-border,
@@ -506,6 +505,9 @@ $kendo-use-input-spinner-icon-offset: false !default;
     $kendo-input-suffix-bg: $kendo-input-suffix-bg,
     $kendo-input-invalid-border: $kendo-input-invalid-border,
     $kendo-input-invalid-shadow: $kendo-input-invalid-shadow,
+    $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,12 @@
 @use "../core/_index.scss" as *;
+
 // 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;
@@ -245,77 +251,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
@@ -398,6 +333,7 @@ $kendo-list-group-item-shadow: null !default;
 $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,
@@ -471,7 +407,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,22 +136,9 @@ $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,
@@ -178,6 +175,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;
@@ -302,6 +307,7 @@ $kendo-menu-popup-item-active-gradient: null !default;
 $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: italic !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,11 +5,11 @@
 @function notification-theme( $colors ) {
     $_theme: ();
 
-    @each $name, $color in $colors {
+    @each $name in $colors {
         $_theme: map.merge(( $name: (
             color: k-color(on-#{$name}),
-            background-color: $color,
-            border: $color,
+            background-color: k-color(#{$name}),
+            border: k-color(#{$name}),
         )), $_theme );
     }
 

package/scss/notification/_variables.scss

@@ -6,6 +6,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(2) !default;
@@ -57,23 +62,13 @@ $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,
@@ -89,6 +84,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
 );