@progress/kendo-theme-core 13.2.0-dev.3 → 13.2.0-dev.4

package/scss/components/appbar/_theme.scss

@@ -16,12 +16,7 @@
                 @if $name == "inherit" {
                     color: inherit;
                     background-color: inherit;
-                } @else if $name == "dark" {
-                    color: $kendo-appbar-dark-text;
-                    background-color: $kendo-appbar-dark-bg;
-                } @else if $name == "light" {
-                    color: $kendo-appbar-light-text;
-                    background-color: $kendo-appbar-light-bg;
+
                 } @else {
                     color: k-color(on-#{$name});
                     background-color: k-color(#{$name});

package/scss/components/appbar/_variables.scss

@@ -15,15 +15,9 @@ $kendo-appbar-line-height: null !default;
 
 $kendo-appbar-gap: null !default;
 
-$kendo-appbar-light-bg: null !default;
-$kendo-appbar-light-text: null !default;
-
-$kendo-appbar-dark-bg: null !default;
-$kendo-appbar-dark-text: null !default;
-
 $kendo-appbar-box-shadow: null !default;
 $kendo-appbar-bottom-box-shadow: null !default;
 
 /// The theme colors map of the AppBar.
 /// @group appbar
-$kendo-appbar-theme-colors: ("inherit", "base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
+$kendo-appbar-theme-colors: ("base", "primary", "secondary", "tertiary", "inverse") !default;

package/scss/components/avatar/_variables.scss

@@ -31,4 +31,4 @@ $kendo-avatar-sizes: (
 
 /// The theme colors map of the Avatar.
 /// @group avatar
-$kendo-avatar-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
+$kendo-avatar-theme-colors: ("base", "primary", "secondary", "tertiary") !default;

package/scss/components/badge/_variables.scss

@@ -60,4 +60,4 @@ $kendo-badge-roundness: ( "none", "sm", "md", "lg", "full" ) !default;
 
 /// The theme colors map of the Badge.
 /// @group badge
-$kendo-badge-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
+$kendo-badge-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error") !default;

package/scss/components/bottom-navigation/_variables.scss

@@ -30,4 +30,4 @@ $kendo-bottom-nav-flat-border: null !default;
 
 /// The theme colors map of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-navigation-theme-colors: ("primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
+$kendo-bottom-navigation-theme-colors: ("base", "primary", "secondary", "tertiary", "inverse") !default;

package/scss/components/button/_variables.scss

@@ -113,7 +113,7 @@ $kendo-button-roundness: ("none", "sm", "md", "lg", "full") !default;
 
 /// The theme colors map of the Button.
 /// @group button
-$kendo-button-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
+$kendo-button-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "inverse") !default;
 
 /// The sizes map of the Button.
 /// @group button

package/scss/components/card/_theme.scss

@@ -34,21 +34,6 @@
             @include box-shadow( $kendo-card-focus-shadow );
         }
 
-
-        // Card theme colors
-        @each $name in $kendo-card-theme-colors {
-            #{k-when-default($kendo-card-default-theme-color, $name)}
-            &.k-card-#{$name} {
-                background-color: k-color(#{$name}-subtle);
-                color: k-color(#{$name}-on-subtle);
-                border-color: k-color(#{$name}-emphasis);
-
-                .k-card-subtitle {
-                    color: inherit;
-                }
-            }
-        }
-
     }
 
 

package/scss/components/card/_variables.scss

@@ -1,7 +1,5 @@
 // Card
 
-$kendo-card-default-theme-color: null !default;
-
 $kendo-card-padding-x: null !default;
 $kendo-card-padding-y: null !default;
 $kendo-card-border-width: null !default;
@@ -71,7 +69,3 @@ $kendo-card-deck-scroll-button-offset: null !default;
 
 $kendo-card-callout-width: null !default;
 $kendo-card-callout-height: null !default;
-
-/// The theme colors map of the Card.
-/// @group card
-$kendo-card-theme-colors: ("primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;

package/scss/components/dialog/_theme.scss

@@ -7,18 +7,6 @@
 @mixin kendo-dialog--theme-base() {
     .k-dialog {
         background-color: $kendo-dialog-bg;
-
-        // Dialog theme colors
-        @each $name in $kendo-dialog-theme-colors {
-
-            #{k-when-default($kendo-dialog-default-theme-color, $name)}
-            &.k-dialog-#{$name} {
-                .k-dialog-titlebar {
-                    color: k-color(on-#{$name});
-                    background-color: k-color(#{$name});
-                }
-            }
-        }
     }
 
     // Dialog titlebar

package/scss/components/dialog/_variables.scss

@@ -1,7 +1,5 @@
 // Dialog
 
-$kendo-dialog-default-theme-color: null !default;
-
 $kendo-dialog-titlebar-bg: null !default;
 $kendo-dialog-titlebar-text: null !default;
 $kendo-dialog-titlebar-border: null !default;
@@ -12,7 +10,3 @@ $kendo-dialog-buttongroup-border-width: null !default;
 $kendo-dialog-button-spacing: null !default;
 
 $kendo-dialog-bg: null !default;
-
-/// The theme colors map of the Dialog.
-/// @group dialog
-$kendo-dialog-theme-colors: ("primary", "light", "dark") !default;

package/scss/components/fab/_variables.scss

@@ -65,7 +65,7 @@ $kendo-fab-roundness: ( "none", "sm", "md", "lg", "full" ) !default;
 
 /// The theme colors map of the FloatingActionButton.
 /// @group floating-action-button
-$kendo-fab-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
+$kendo-fab-theme-colors: ("base", "primary", "secondary", "tertiary") !default;
 
 /// The sizes map of the FloatingActionButton.
 /// @group floating-action-button

package/scss/components/listbox/_layout.scss

@@ -51,6 +51,7 @@
 
         .k-list-scroller {
             width: 100%;
+            min-width: 0;
             min-height: 0;
             height: inherit;
             border-width: $kendo-listbox-border-width;

package/scss/components/loader/_layout.scss

@@ -420,8 +420,7 @@
 
     }
 
-    .k-loader-container,
-    .k-loader-container-overlay {
+    .k-loader-container {
         width: 100%;
         height: 100%;
         position: absolute;
@@ -431,10 +430,6 @@
         inset-inline-start: 0;
     }
 
-    // TODO: use k-overlay as a base class in rendering
-    .k-loader-container-overlay {
-        opacity: $kendo-overlay-opacity;
-    }
 
     .k-loader-container-inner {
         display: flex;
@@ -443,6 +438,14 @@
         z-index: k-z-index("base", 2);
     }
 
+    .k-loader-container-overlay {
+        position: absolute;
+    }
+
+    .k-loader-container-overlay + .k-loader-container-inner {
+        z-index: k-z-index("overlay");
+    }
+
     .k-loader-container-panel {
         border-width: $kendo-loader-container-panel-border-width;
         border-style: $kendo-loader-container-panel-border-style;

package/scss/components/loader/_variables.scss

@@ -56,4 +56,4 @@ $kendo-zindex-loading: null !default;
 
 /// The theme colors map of the Loader.
 /// @group loader
-$kendo-loader-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
+$kendo-loader-theme-colors: ("base", "primary", "secondary", "tertiary") !default;

package/scss/components/messagebox/_theme.scss

@@ -11,19 +11,11 @@
         .k-messagebox {
             #{k-when-default($kendo-message-box-default-theme-color, $color-name)}
             &.k-messagebox-#{$color-name} {
-                @if $color-name == "inverse" {
-                    @include fill(
-                        k-color(dark-on-subtle),
-                        k-color(dark-subtle),
-                        k-color(dark-hover)
-                    );
-                } @else {
-                    @include fill(
-                        k-color(#{$color-name}-on-subtle),
-                        k-color(#{$color-name}-subtle),
-                        k-color(#{$color-name}-emphasis)
-                    );
-                }
+                @include fill(
+                    k-color(#{$color-name}-on-subtle),
+                    k-color(#{$color-name}-subtle),
+                    k-color(#{$color-name}-emphasis)
+                );
             }
         }
     }

package/scss/components/messagebox/_variables.scss

@@ -19,4 +19,4 @@ $kendo-message-box-link-text-decoration: null !default;
 
 /// The theme colors map of the MessageBox.
 /// @group message-box
-$kendo-message-box-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "dark", "light", "inverse") !default;
+$kendo-message-box-theme-colors: ("base", "primary", "secondary", "tertiary", "info", "success", "warning", "error", "inverse") !default;

package/scss/components/overlay/_theme.scss

@@ -1,25 +1,8 @@
-@use "../../color-system/_functions.scss" as *;
-@use "../../functions/default.scss" as *;
 @use "./_variables.scss" as *;
 
 @mixin kendo-overlay--theme-base() {
     // Overlay
     .k-overlay {
-        @each $name in $kendo-overlay-theme-colors {
-            #{k-when-default($kendo-overlay-default-theme-color, $name)}
-            &.k-overlay-#{$name} {
-                background-color: k-color(#{$name});
-            }
-        }
-
         background-color: $kendo-overlay-bg;
     }
-
-    // Where single k-overlay-{color} is used as a theme element
-    @each $name in $kendo-overlay-theme-colors {
-        .k-overlay-#{$name} {
-            background-color: k-color(#{$name});
-        }
-    }
-
 }

package/scss/components/overlay/_variables.scss

@@ -1,8 +1,3 @@
-$kendo-overlay-default-theme-color: null !default;
-
 $kendo-overlay-bg: null !default;
 $kendo-overlay-opacity: null !default;
 
-/// The theme colors map of the Overlay.
-/// @group overlay
-$kendo-overlay-theme-colors: ("dark", "light", "inverse") !default;

package/scss/components/suggestion/_layout.scss

@@ -16,6 +16,7 @@
 
     .k-suggestion-group {
         padding-block: calc( #{$kendo-suggestion-padding-y} / 2 );
+        margin-inline: calc( #{$kendo-suggestion-padding-y} / -2 );
         display: flex;
         flex: 1;
         flex-wrap: wrap;
@@ -27,8 +28,12 @@
             flex-wrap: nowrap;
         }
 
+        &:not(:has(.k-suggestions-scroll)) {
+            padding-inline: calc( #{$kendo-suggestion-padding-y} / 2 );
+        }
+
         .k-suggestions-scroll {
-            padding-block: calc( #{$kendo-suggestion-padding-y} / 2 );
+            padding: calc( #{$kendo-suggestion-padding-y} / 2 );
             margin-block: calc( #{$kendo-suggestion-padding-y} / -2 );
             display: flex;
             overflow-x: auto;

package/scss/components/suggestion/_variables.scss

@@ -15,7 +15,7 @@ $kendo-suggestion-focus-shadow-color: null !default;
 
 /// The theme colors map of the Suggestion.
 /// @group suggestion
-$kendo-suggestion-theme-colors: ("base", "primary", "secondary") !default;
+$kendo-suggestion-theme-colors: ("base", "primary", "secondary", "tertiary") !default;
 
 $kendo-suggestion-default-theme-color: null !default;
 

package/scss/components/window/_theme.scss

@@ -14,18 +14,6 @@
             $kendo-window-border
         );
         @include box-shadow( $kendo-window-shadow );
-
-        // Window theme colors
-        @each $name in $kendo-window-theme-colors {
-
-            #{k-when-default($kendo-window-default-theme-color, $name)}
-            &.k-window-#{$name} {
-                .k-window-titlebar {
-                    color: k-color(on-#{$name});
-                    background-color: k-color(#{$name});
-                }
-            }
-        }
     }
 
     .k-window:focus,

package/scss/components/window/_variables.scss

@@ -1,6 +1,5 @@
 // Window
 
-$kendo-window-default-theme-color: null !default;
 $kendo-window-default-size: null !default;
 
 $kendo-window-border-width: null !default;
@@ -47,7 +46,3 @@ $kendo-window-sizes: (
     md: 800px,
     lg: 1200px
 ) !default;
-
-/// The theme colors map of the Window.
-/// @group window
-$kendo-window-theme-colors: ("primary", "light", "dark") !default;