@progress/kendo-theme-default 7.1.0-dev.0 → 7.1.0-dev.10

package/scss/input/_theme.scss

@@ -70,6 +70,35 @@
             }
         }
 
+        // Valid
+        &.k-valid {
+            @include fill( $border: $kendo-input-valid-border );
+
+            .k-input-validation-icon {
+                color: $kendo-valid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include focus-indicator( $kendo-input-valid-shadow );
+            }
+            &:focus-within {
+                @include focus-indicator( $kendo-input-valid-shadow );
+            }
+        }
+
+        // Prefix & Suffix
+        .k-input-prefix {
+            color: $kendo-input-prefix-text;
+        }
+
+        .k-input-suffix {
+            color: $kendo-input-suffix-text;
+        }
+
+        .k-input-separator {
+            border-color: $kendo-input-separator-text;
+        }
     }
 
 
@@ -146,6 +175,23 @@
                 @include focus-indicator( $kendo-input-invalid-shadow );
             }
         }
+
+        // Valid
+        &.k-valid {
+            @include fill( $border: $kendo-input-valid-border );
+
+            .k-input-validation-icon {
+                color: $kendo-valid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include focus-indicator( $kendo-input-valid-shadow );
+            }
+            &:focus-within {
+                @include focus-indicator( $kendo-input-valid-shadow );
+            }
+        }
     }
 
 
@@ -231,6 +277,35 @@
             }
         }
 
+        // Valid
+        &.k-valid {
+            @include fill( $border: $kendo-input-valid-border );
+
+            .k-input-validation-icon {
+                color: $kendo-valid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include focus-indicator( $kendo-input-valid-shadow );
+            }
+            &:focus-within {
+                @include focus-indicator( $kendo-input-valid-shadow );
+            }
+        }
+
+        // Prefix & Suffix
+        .k-input-prefix {
+            color: $kendo-input-prefix-text;
+        }
+
+        .k-input-suffix {
+            color: $kendo-input-suffix-text;
+        }
+
+        .k-input-separator {
+            border-color: $kendo-input-separator-text;
+        }
     }
 
 
@@ -313,6 +388,23 @@
                 @include focus-indicator( $kendo-input-invalid-shadow );
             }
         }
+
+        // Valid
+        &.k-valid {
+            @include fill( $border: $kendo-input-valid-border );
+
+            .k-input-validation-icon {
+                color: $kendo-valid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include focus-indicator( $kendo-input-valid-shadow );
+            }
+            &:focus-within {
+                @include focus-indicator( $kendo-input-valid-shadow );
+            }
+        }
     }
 
 
@@ -384,6 +476,36 @@
                 @include focus-indicator( $kendo-input-invalid-shadow );
             }
         }
+
+        // Valid
+        &.k-valid {
+            @include fill( $border: $kendo-input-valid-border );
+
+            .k-input-validation-icon {
+                color: $kendo-valid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include focus-indicator( $kendo-input-valid-shadow );
+            }
+            &:focus-within {
+                @include focus-indicator( $kendo-input-valid-shadow );
+            }
+        }
+
+        // Prefix & Suffix
+        .k-input-prefix {
+            color: $kendo-input-prefix-text;
+        }
+
+        .k-input-suffix {
+            color: $kendo-input-suffix-text;
+        }
+
+        .k-input-separator {
+            border-color: $kendo-input-separator-text;
+        }
     }
 
 
@@ -466,6 +588,23 @@
                 @include focus-indicator( $kendo-input-invalid-shadow );
             }
         }
+
+        // Valid
+        &.k-valid {
+            @include fill( $border: $kendo-input-valid-border );
+
+            .k-input-validation-icon {
+                color: $kendo-valid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include focus-indicator( $kendo-input-valid-shadow );
+            }
+            &:focus-within {
+                @include focus-indicator( $kendo-input-valid-shadow );
+            }
+        }
     }
 
 }

package/scss/input/_variables.scss

@@ -118,7 +118,7 @@ $kendo-input-hover-bg: null !default;
 $kendo-input-hover-text: null !default;
 /// The border color of the hovered Input components.
 /// @group input
-$kendo-input-hover-border: rgba( $kendo-input-border, .16 ) !default;
+$kendo-input-hover-border: if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-input-border, .16 )) !default;
 /// The shadow of the hovered Input components.
 /// @group input
 $kendo-input-hover-shadow: null !default;
@@ -134,7 +134,7 @@ $kendo-input-focus-text: null !default;
 $kendo-input-focus-border: $kendo-input-hover-border !default;
 /// The shadow of the focused Input components.
 /// @group input
-$kendo-input-focus-shadow: 0 0 0 2px rgba( $kendo-input-focus-border, .08 ) !default;
+$kendo-input-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( $kendo-input-focus-border, .08 )) !default;
 
 /// The background color of the selected Input components.
 /// @group input
@@ -167,7 +167,7 @@ $kendo-input-outline-bg: null !default;
 $kendo-input-outline-text: $kendo-input-text !default;
 /// The border color of the outline Input components.
 /// @group input
-$kendo-input-outline-border: rgba( $kendo-button-text, .5) !default;
+$kendo-input-outline-border: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .5 ), rgba( $kendo-button-text, .5)) !default;
 
 /// The background color of the outline hovered Input components.
 /// @group input
@@ -177,7 +177,7 @@ $kendo-input-outline-hover-bg: null !default;
 $kendo-input-outline-hover-text: null !default;
 /// The border color of the outline hovered Input components.
 /// @group input
-$kendo-input-outline-hover-border: rgba( $kendo-button-text, .8) !default;
+$kendo-input-outline-hover-border: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .8 ), rgba( $kendo-button-text, .8)) !default;
 
 /// The background color of the outline focused Input components.
 /// @group input
@@ -267,11 +267,25 @@ $kendo-input-spinner-icon-offset: null !default;
 
 /// The color of the Input separator.
 /// @group input
-$kendo-input-separator-color: $kendo-input-text !default;
+$kendo-input-separator-text: $kendo-input-border !default;
 /// The opacity of the Input separator.
 /// @group input
 $kendo-input-separator-opacity: .5 !default;
 
+/// The text color of the Input prefix.
+/// @group input
+$kendo-input-prefix-text: $kendo-subtle-text !default;
+/// The text color of the Input suffix.
+/// @group input
+$kendo-input-suffix-text: $kendo-subtle-text !default;
+
+/// The text color of the Input prefix.
+/// @group input
+$kendo-input-prefix-text: $kendo-subtle-text !default;
+/// The text color of the Input suffix.
+/// @group input
+$kendo-input-suffix-text: $kendo-subtle-text !default;
+
 /// The border color of the invalid Input components.
 /// @group input
 $kendo-input-invalid-border: $kendo-invalid-border !default;
@@ -279,6 +293,13 @@ $kendo-input-invalid-border: $kendo-invalid-border !default;
 /// @group input
 $kendo-input-invalid-shadow: $kendo-invalid-shadow !default;
 
+/// The border color of the valid Input components.
+/// @group input
+$kendo-input-valid-border: $kendo-valid-border !default;
+/// The shadow of the valid Input components.
+/// @group input
+$kendo-input-valid-shadow: $kendo-valid-shadow !default;
+
 /// The background color of the Picker components.
 /// @group picker
 $kendo-picker-bg: $kendo-button-bg !default;
@@ -351,14 +372,14 @@ $kendo-picker-outline-bg: null !default;
 $kendo-picker-outline-text: $kendo-button-text !default;
 /// The border color of the outline Picker components.
 /// @group picker
-$kendo-picker-outline-border: rgba( $kendo-picker-outline-text, .5) !default;
+$kendo-picker-outline-border: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .5 ), rgba( $kendo-picker-outline-text, .5)) !default;
 
 /// The background color of the outline hovered Picker components.
 /// @group picker
 $kendo-picker-outline-hover-bg: $kendo-picker-outline-text !default;
 /// The text color of the outline hovered Picker components.
 /// @group picker
-$kendo-picker-outline-hover-text: k-contrast-legacy( $kendo-picker-outline-hover-bg ) !default;
+$kendo-picker-outline-hover-text: if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-picker-outline-hover-bg )) !default;
 /// The border color of the outline hovered Picker components.
 /// @group picker
 $kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg !default;
@@ -398,13 +419,13 @@ $kendo-picker-flat-border: $kendo-button-border !default;
 
 /// The background color of the flat hovered Picker components.
 /// @group picker
-$kendo-picker-flat-hover-bg: rgba( $kendo-button-text, .04 ) !default;
+$kendo-picker-flat-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .04 ), rgba( $kendo-button-text, .04 )) !default;
 /// The text color of the flat hovered Picker components.
 /// @group picker
 $kendo-picker-flat-hover-text: null !default;
 /// The border color of the flat hovered Picker components.
 /// @group picker
-$kendo-picker-flat-hover-border: rgba( $kendo-button-border, .16 ) !default;
+$kendo-picker-flat-hover-border: if($kendo-enable-color-system, k-color( border-alt ), rgba( $kendo-button-border, .16 )) !default;
 
 /// The background color of the flat focused Picker components.
 /// @group picker

package/scss/list/_theme.scss

@@ -58,7 +58,7 @@
         &.k-selected:hover,
         &.k-selected.k-hover {
             color: $kendo-list-item-selected-text;
-            background-color: k-color-shade( $kendo-list-item-selected-bg );
+            background-color: if($kendo-enable-color-system, k-color( primary-hover ), k-color-shade( $kendo-list-item-selected-bg ));
         }
     }
 

package/scss/listview/_variables.scss

@@ -41,7 +41,7 @@ $kendo-listview-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 $kendo-listview-item-selected-text: null !default;
 /// The background color of the selected ListView items.
 /// @group listview
-$kendo-listview-item-selected-bg: rgba( $kendo-selected-bg, .25 ) !default;
+$kendo-listview-item-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25)) !default;
 /// The border color of the selected ListView items.
 /// @group listview
 $kendo-listview-item-selected-border: null !default;

package/scss/map/_variables.scss

@@ -25,6 +25,6 @@ $kendo-map-zoom-control-button-padding-y: $kendo-map-zoom-control-button-padding
 $kendo-map-attribution-padding-x: $kendo-padding-sm-x !default;
 $kendo-map-attribution-padding-y: $kendo-padding-sm-y !default;
 $kendo-map-attribution-font-size: ($kendo-map-font-size * .75) !default;
-$kendo-map-attribution-bg: rgba( $kendo-map-bg, .8 ) !default;
+$kendo-map-attribution-bg: if($kendo-enable-color-system, rgba( k-color( app-surface, true ), .8 ), rgba( $kendo-map-bg, .8 )) !default;
 
 $kendo-map-marker-fill: $kendo-color-primary !default;

package/scss/mediaplayer/_theme.scss

@@ -14,7 +14,7 @@
     .k-mediaplayer-titlebar {
         color: $kendo-media-player-titlebar-text;
         background-image: linear-gradient( $kendo-media-player-titlebar-gradient );
-        text-shadow: 0 0 2px rgba( $kendo-media-player-text, .5 );
+        text-shadow: 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-media-player-text, .5 ));
     }
 
 }

package/scss/mediaplayer/_variables.scss

@@ -13,4 +13,4 @@ $kendo-media-player-titlebar-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $kendo-media-player-titlebar-bg: null !default;
 $kendo-media-player-titlebar-text: $kendo-media-player-bg !default;
 $kendo-media-player-titlebar-border: null !default;
-$kendo-media-player-titlebar-gradient: rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) !default;
+$kendo-media-player-titlebar-gradient: if($kendo-enable-color-system, ( rgba( k-color( on-app-surface, true ), .7 ), rgba( k-color( on-app-surface, true ), 0 ) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) )) !default;

package/scss/messagebox/_theme.scss

@@ -2,11 +2,19 @@
 
     @each $color-name, $color in $kendo-theme-colors {
         .k-messagebox-#{$color-name} {
-            @include fill(
-                k-color-level( $color, $kendo-message-box-text-level ),
-                k-color-level( $color, $kendo-message-box-bg-level ),
-                k-color-level( $color, $kendo-message-box-border-level )
-            );
+            @if $color-name == "inverse" {
+                @include fill(
+                    if($kendo-enable-color-system, k-color( dark-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )),
+                    if($kendo-enable-color-system, k-color( dark-subtle ), k-color-level( $color, $kendo-message-box-bg-level )),
+                    if($kendo-enable-color-system, k-color( dark-hover ), k-color-level( $color, $kendo-message-box-border-level ))
+                );
+            } @else {
+                @include fill(
+                    if($kendo-enable-color-system, k-color( #{$color-name}-on-subtle ), k-color-level( $color, $kendo-message-box-text-level )),
+                    if($kendo-enable-color-system, k-color( #{$color-name}-subtle ), k-color-level( $color, $kendo-message-box-bg-level )),
+                    if($kendo-enable-color-system, k-color( #{$color-name}-emphasis ), k-color-level( $color, $kendo-message-box-border-level ))
+                );
+            }
         }
     }
 

package/scss/notification/_layout.scss

@@ -7,17 +7,12 @@
         flex-flow: column-reverse wrap;
         position: fixed;
         z-index: 1000;
+        gap: $kendo-notification-group-gap 0;
     }
 
-    .k-notification-container {
-        margin-block: k-math-div( $kendo-notification-padding-y, 2 );
-        margin-inline: 0;
-        display: inline-flex;
-        vertical-align: top;
-
-        &-animating {
-            overflow: hidden;
-        }
+    // Needed due to the specifics in the implementation of animations in Angular
+    .k-notification-container-animating {
+        overflow: hidden;
     }
 
     .k-notification {

package/scss/notification/_variables.scss

@@ -1,5 +1,9 @@
 // Notification
 
+/// The row-gap between the elements in the Notification group.
+/// @group notification
+$kendo-notification-group-gap: k-map-get( $kendo-spacing, 2 ) !default;
+
 /// The horizontal padding of the Notification.
 /// @group notification
 $kendo-notification-padding-x: 8px !default;
@@ -43,7 +47,7 @@ $kendo-notification-icon-spacing: $kendo-icon-spacing !default;
 
     @each $name, $color in $colors {
         $_theme: k-map-merge(( $name: (
-            color: k-contrast-legacy( $color ),
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
             background-color: $color,
             border: $color,
         )), $_theme );

package/scss/panelbar/_variables.scss

@@ -27,7 +27,7 @@ $kendo-panelbar-header-text: $kendo-link-text !default;
 $kendo-panelbar-header-border: null !default;
 $kendo-panelbar-header-gradient: null !default;
 
-$kendo-panelbar-header-hover-bg: k-try-shade( $kendo-panelbar-header-bg, .5 ) !default;
+$kendo-panelbar-header-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-header-bg, .5 )) !default;
 $kendo-panelbar-header-hover-text: null !default;
 $kendo-panelbar-header-hover-border: null !default;
 $kendo-panelbar-header-hover-gradient: null !default;
@@ -48,7 +48,7 @@ $kendo-panelbar-header-selected-text: $kendo-selected-text !default;
 $kendo-panelbar-header-selected-border: null !default;
 $kendo-panelbar-header-selected-gradient: null !default;
 
-$kendo-panelbar-header-selected-hover-bg: k-try-shade( $kendo-panelbar-header-selected-bg ) !default;
+$kendo-panelbar-header-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-header-selected-bg )) !default;
 $kendo-panelbar-header-selected-hover-text: null !default;
 $kendo-panelbar-header-selected-hover-border: null !default;
 $kendo-panelbar-header-selected-hover-gradient: null !default;
@@ -63,7 +63,7 @@ $kendo-panelbar-header-selected-hover-focus-text: null !default;
 $kendo-panelbar-header-selected-hover-focus-border: null !default;
 $kendo-panelbar-header-selected-hover-focus-gradient: null !default;
 
-$kendo-panelbar-item-hover-bg: k-try-shade( $kendo-panelbar-bg, .5 ) !default;
+$kendo-panelbar-item-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-panelbar-bg, .5 )) !default;
 $kendo-panelbar-item-hover-text: null !default;
 $kendo-panelbar-item-hover-border: null !default;
 $kendo-panelbar-item-hover-gradient: null !default;
@@ -84,7 +84,7 @@ $kendo-panelbar-item-selected-text: $kendo-selected-text !default;
 $kendo-panelbar-item-selected-border: null !default;
 $kendo-panelbar-item-selected-gradient: null !default;
 
-$kendo-panelbar-item-selected-hover-bg: k-try-shade( $kendo-panelbar-item-selected-bg ) !default;
+$kendo-panelbar-item-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-item-selected-bg )) !default;
 $kendo-panelbar-item-selected-hover-text: null !default;
 $kendo-panelbar-item-selected-hover-border: null !default;
 $kendo-panelbar-item-selected-hover-gradient: null !default;

package/scss/pivotgrid/_variables.scss

@@ -22,21 +22,21 @@ $kendo-pivotgrid-bg: $kendo-component-bg !default;
 $kendo-pivotgrid-text: $kendo-component-text !default;
 $kendo-pivotgrid-border: $kendo-component-border !default;
 
-$kendo-pivotgrid-alt-border: k-try-shade($kendo-pivotgrid-border, 2) !default;
+$kendo-pivotgrid-alt-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade($kendo-pivotgrid-border, 2)) !default;
 
 $kendo-pivotgrid-headers-bg: $kendo-component-header-bg !default;
 $kendo-pivotgrid-headers-text: $kendo-component-header-text !default;
 $kendo-pivotgrid-headers-border: $kendo-component-header-border !default;
 
-$kendo-pivotgrid-total-bg: k-try-shade( $kendo-pivotgrid-bg, 1 ) !default;
+$kendo-pivotgrid-total-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-pivotgrid-bg, 1 )) !default;
 $kendo-pivotgrid-total-text: $kendo-component-header-text !default;
 $kendo-pivotgrid-total-border: $kendo-component-header-border !default;
 
-$kendo-pivotgrid-hover-bg: k-color-darken($kendo-pivotgrid-bg, 7%) !default;
+$kendo-pivotgrid-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken($kendo-pivotgrid-bg, 7%)) !default;
 $kendo-pivotgrid-hover-text: null !default;
 $kendo-pivotgrid-hover-border: null !default;
 
-$kendo-pivotgrid-selected-bg: rgba($kendo-selected-bg, .25) !default;
+$kendo-pivotgrid-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-selected-bg, .25)) !default;
 $kendo-pivotgrid-selected-text: null !default;
 $kendo-pivotgrid-selected-border: null !default;
 
@@ -105,7 +105,7 @@ $kendo-pivotgrid-alt-text: $kendo-grid-header-text !default;
 $kendo-pivotgrid-chrome-border: $kendo-grid-border !default;
 
 $kendo-pivotgrid-container-bg: $kendo-component-bg !default;
-$kendo-pivotgrid-row-headers-bg: k-try-shade( $kendo-component-bg, 1 ) !default;
+$kendo-pivotgrid-row-headers-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-component-bg, 1 )) !default;
 
 $kendo-pivotgrid-button-bg: null !default;
 $kendo-pivotgrid-button-text: null !default;

package/scss/progressbar/_theme.scss

@@ -29,7 +29,7 @@
 
     .k-progressbar-indeterminate {
         @include fill( $kendo-progressbar-indeterminate-text, $kendo-progressbar-indeterminate-bg, $kendo-progressbar-indeterminate-border );
-        @include striped-gradient( k-color-shade($kendo-progressbar-indeterminate-bg) );
+        @include striped-gradient( if($kendo-enable-color-system, rgba( k-color( base-emphasis, true ), .55 ), k-color-shade($kendo-progressbar-indeterminate-bg)) );
         background-size: $kendo-progressbar-height $kendo-progressbar-height;
         animation: kendo-progressbar-indeterminate-animation $kendo-progressbar-animation-timing;
     }

package/scss/progressbar/_variables.scss

@@ -24,7 +24,7 @@ $kendo-progressbar-line-height: 1 !default;
 
 /// The background color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-bg: k-try-shade( $kendo-component-bg, 1 ) !default;
+$kendo-progressbar-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-component-bg, 1 )) !default;
 /// The text color of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-text: $kendo-component-text !default;
@@ -40,10 +40,10 @@ $kendo-progressbar-gradient: null !default;
 $kendo-progressbar-value-bg: $kendo-color-primary !default;
 /// The progress text color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-value-text: k-contrast-legacy( $kendo-progressbar-value-bg ) !default;
+$kendo-progressbar-value-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-progressbar-value-bg )) !default;
 /// The progress border color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-value-border: k-try-shade( $kendo-progressbar-value-bg ) !default;
+$kendo-progressbar-value-border: if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-progressbar-value-bg )) !default;
 /// The progress background gradient of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-value-gradient: null !default;

package/scss/prompt/_index.scss

@@ -0,0 +1,37 @@
+@import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "prompt",
+    dependencies: ()
+);
+
+
+// Dependencies
+@import "../common/_index.scss";
+
+
+// Component
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";
+
+
+// Register
+@import "../core/module-system/index.import.scss";
+@include module-register( $_kendo-module-meta... );
+
+
+// Expose
+@mixin kendo-prompt--styles() {
+    @include module-render( "prompt" ) {
+        @include kendo-prompt--layout();
+        @include kendo-prompt--theme();
+    }
+}
+
+@if $kendo-auto-bootstrap {
+    @include kendo-prompt--styles();
+}

package/scss/prompt/_layout.scss

@@ -0,0 +1,70 @@
+@mixin kendo-prompt--layout-base() {
+
+    // Prompt
+    .k-prompt {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        overflow: hidden;
+    }
+
+    // Content
+    .k-prompt-content {
+        padding-block: $kendo-prompt-content-padding-y;
+        padding-inline: $kendo-prompt-content-padding-x;
+        display: flex;
+        flex-flow: column nowrap;
+        flex: 1 1 auto;
+        gap: $kendo-prompt-content-spacing;
+        overflow: auto;
+    }
+
+    .k-prompt-view {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        gap: $kendo-prompt-content-spacing;
+    }
+
+    // Prompt Expander
+    .k-prompt-expander {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        align-items: start;
+        gap: $kendo-prompt-expander-spacing;
+    }
+
+    .k-prompt-expander-content {
+        display: flex;
+        flex-flow: column;
+        flex: 0 0 auto;
+        gap: $kendo-prompt-expander-spacing;
+        align-self: stretch;
+    }
+
+    .k-prompt-suggestion {
+        border-width: 1px;
+        border-style: solid;
+        border-radius: $kendo-prompt-suggestion-border-radius;
+        padding-block: $kendo-prompt-suggestion-padding-y;
+        padding-inline: $kendo-prompt-suggestion-padding-x;
+        cursor: pointer;
+    }
+
+    .k-prompt-setting {
+        display: flex;
+        flex-direction: column;
+    }
+
+    // Actions
+    .k-prompt-actions.k-actions {
+        margin: 0;
+    }
+
+}
+
+
+@mixin kendo-prompt--layout() {
+    @include kendo-prompt--layout-base();
+}

package/scss/prompt/_theme.scss

@@ -0,0 +1,41 @@
+@mixin kendo-prompt--theme-base() {
+
+    .k-prompt {
+        @include fill(
+            $kendo-prompt-text,
+            $kendo-prompt-bg,
+            $kendo-prompt-border
+        );
+    }
+
+    .k-prompt-header {
+        @include fill(
+            $kendo-prompt-header-text,
+            $kendo-prompt-header-bg,
+            $kendo-prompt-header-border
+        );
+    }
+
+    .k-prompt-content {
+        @include fill(
+            $kendo-prompt-content-text,
+            $kendo-prompt-content-bg,
+            $kendo-prompt-content-border
+        );
+    }
+
+    .k-prompt-suggestion {
+        @include fill(
+            $kendo-prompt-suggestion-text,
+            $kendo-prompt-suggestion-bg,
+            $kendo-prompt-suggestion-border
+        );
+        @include box-shadow( $kendo-prompt-suggestion-shadow );
+    }
+
+}
+
+
+@mixin kendo-prompt--theme() {
+    @include kendo-prompt--theme-base();
+}