@progress/kendo-theme-fluent 11.2.1-dev.1 → 11.3.0-dev.0

package/scss/progressbar/_layout.scss

@@ -1,190 +1,59 @@
 @use "./_variables.scss" as *;
 @use "../core/_index.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/progressbar/_layout.scss" as *;
 
 @mixin kendo-progressbar--layout {
 
+    @include kendo-progressbar--layout-base();
+
     // Base
     .k-progressbar {
-        @include border-radius( var( --kendo-progressbar-border-radius, #{$kendo-progressbar-border-radius} ) );
-        --kendo-progressbar-value: 0;
-        border-width: var( --kendo-progressbar-border-width, #{$kendo-progressbar-border-width} );
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: var( --kendo-progressbar-font-family, #{$kendo-progressbar-font-family} );
-        font-size: var( --kendo-progressbar-font-size, #{$kendo-progressbar-font-size} );
-        line-height: var( --kendo-progressbar-line-height, #{$kendo-progressbar-line-height} );
-        display: inline-grid;
-        vertical-align: middle;
-        position: relative;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
-
-        // Selection
-        > .k-progressbar-value {
-            border-width: 0;
-            border-style: solid;
-            display: flex;
-            overflow: hidden;
-            grid-column: 1 / -1;
-            grid-row: 1 / -1;
-        }
-
-
-        // Chunks
-        > .k-progressbar-chunks {
-            border-width: inherit;
-            border-style: inherit;
-            white-space: nowrap;
-            display: flex;
-            align-items: stretch;
-            flex: 1;
-            gap: 1px;
-            grid-column: 1 / -1;
-            grid-row: 1 / -1;
-        }
-
-        .k-progressbar-chunk {
-            display: block;
-            border-width: 0;
-           flex: 1;
-        }
+        @include border-radius( $kendo-progressbar-border-radius );
+        overflow: visible;
     }
 
-
     // Status
     .k-progress-status-wrap {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        overflow: unset;
-        flex-shrink: 0;
+        align-items: flex-start;
         grid-column: 1/-1;
         grid-row: 2/-1;
-
-        &.k-progress-start { justify-content: flex-start; }
-        &.k-progress-center { justify-content: center; }
-        &.k-progress-end { justify-content: flex-end; }
     }
 
     .k-progress-status {
-        padding-inline: var( --kendo-progressbar-padding-x, #{$kendo-progressbar-padding-x} );
-        padding-block: var( --kendo-progressbar-padding-y, #{$kendo-progressbar-padding-y} );
-        min-width: 10px;
-        text-align: center;
-        display: inline-block;
-        white-space: nowrap;
+        padding-inline: $kendo-progressbar-padding-x;
+        padding-block: $kendo-progressbar-padding-y;
     }
 
 
     // Horizontal
     .k-progressbar-horizontal {
-        width: var( --kendo-progressbar-horizontal-width, #{$kendo-progressbar-horizontal-width} );
-        height: var( --kendo-progressbar-height, #{$kendo-progressbar-height} );
-        grid-template-columns: 1fr;
-        grid-template-rows: 100%;
 
         .k-progress-status-wrap {
-            margin-block-start: var( --kendo-progressbar-offset-y, #{$kendo-progressbar-offset-y} );
-        }
-
-        > .k-progressbar-value {
-            width: 0;
-            width: calc( var( --kendo-progressbar-value, 0 ) * 1% );
-            flex-direction: row;
-
-            > .k-progress-status-wrap {
-                width: calc( 100% * ( 100 / var( --kendo-progressbar-value, 1 ) ) );
-            }
-        }
-
-
-        // Chunks
-        > .k-progressbar-chunks {
-            flex-direction: row;
-        }
-
-        // Horizontal reverse
-        &.k-progressbar-reverse {
-
-            > .k-progressbar-value {
-                flex-direction: row-reverse;
-                justify-self: flex-end;
-            }
-
-            > .k-progressbar-chunks {
-                flex-direction: row-reverse;
-            }
+            margin-block-start: $kendo-progressbar-offset-y;
         }
     }
 
 
     // Vertical
     .k-progressbar-vertical {
-        width: var( --kendo-progressbar-height, #{$kendo-progressbar-height} );
-        height: 27em;
-        grid-template-columns: 100%;
-        grid-template-rows: 1fr;
 
         .k-progress-status-wrap {
             flex-direction: column;
             align-items: flex-start;
-            margin-inline-start: var( --kendo-progressbar-vertical-status-offset, #{$kendo-progressbar-vertical-status-offset} );
+            margin-inline-start: $kendo-progressbar-vertical-status-offset;
             grid-row: 1/-1;
             grid-column: -1/1;
         }
 
-        .k-progress-status {
-            writing-mode: vertical-lr;
-        }
-
         > .k-progressbar-value {
-            height: calc( var( --kendo-progressbar-value, 0 ) * 1% );
-            flex-direction: column-reverse;
-            align-self: flex-end;
-            align-items: flex-end;
-
-            > .k-progress-status-wrap {
-                height: calc( 100% * ( 100 / var( --kendo-progressbar-value, 1 ) ) );
-            }
 
             .k-progress-status {
                 display: none;
             }
         }
 
-
-        // Chunk
-        > .k-progressbar-chunks {
-            flex-direction: column-reverse;
-        }
-
-        // Vertical reverse
-        &.k-progressbar-reverse {
-
-            .k-progress-status-wrap {
-                flex-direction: column-reverse;
-            }
-
-            > .k-progressbar-value {
-                flex-direction: column;
-                align-self: flex-start;
-            }
-
-            > .k-progressbar-chunks {
-                flex-direction: column;
-            }
-        }
     }
 
-
     // Indeterminate
     .k-progressbar-indeterminate {
         overflow: hidden;
@@ -210,63 +79,8 @@
         }
 
         .k-reset,
-        .k-progress-status-wrap,
-        .k-progressbar-value,
-        .k-progress-chunk {
-            display: none;
-        }
-
         .k-progress-status {
             display: none;
         }
     }
-
-    // Blazor specific
-    .telerik-blazor.k-progressbar-horizontal {
-
-        > .k-progressbar-value,
-        > .k-progressbar-value > .k-progress-status-wrap {
-            transition: width .1s ease-in-out;
-        }
-    }
-
-
-    .k-circular-progressbar {
-        display: inline-block;
-        text-align: start;
-        position: relative;
-    }
-
-    .k-circular-progressbar-surface {
-        height: 100%;
-
-        & > div {
-            width: 100%;
-            height: 100%;
-        }
-
-        svg {
-            width: 100%;
-            height: 100%;
-        }
-    }
-
-    .k-circular-progressbar-scale {
-        fill: none;
-    }
-
-    .k-circular-progressbar-arc {
-        transform-box: fill-box;
-        transform-origin: center center;
-        transform: rotate(-90deg);
-        stroke-linecap: round;
-        fill: none;
-    }
-
-    .k-circular-progressbar-label {
-        position: absolute;
-        text-align: center;
-        padding: 0;
-        margin: 0;
-    }
 }

package/scss/progressbar/_theme.scss

@@ -1,8 +1,10 @@
 @use "../core/_index.scss" as *;
 @use "@progress/kendo-theme-core/scss/functions/index.import.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/progressbar/_theme.scss" as *;
 
 @mixin kendo-progressbar--theme {
+    @include kendo-progressbar--theme-base();
 
     @keyframes progressbar-indeterminate-animation-horizontal {
         from {
@@ -24,34 +26,17 @@
 
     .k-progressbar {
         &:not(.k-progressbar-indeterminate) {
-
-            @include fill(
-                var( --kendo-progressbar-text, #{$kendo-progressbar-text} ),
-                var( --kendo-progressbar-bg, #{$kendo-progressbar-bg} ),
-                var( --kendo-progressbar-border, #{$kendo-progressbar-border} ),
-                var( --kendo-progressbar-gradient, #{$kendo-progressbar-gradient} )
-            );
-
-            .k-selected {
-                @include fill(
-                    var( --kendo-progressbar-value-text, #{$kendo-progressbar-value-text} ),
-                    var( --kendo-progressbar-value-bg, #{$kendo-progressbar-value-bg} ),
-                    var( --kendo-progressbar-value-border, #{$kendo-progressbar-value-border} ),
-                    var( --kendo-progressbar-value-gradient, #{$kendo-progressbar-value-gradient} )
-                );
-            }
-
             &[disabled],
             &:disabled,
             &.k-disabled {
                 @include fill(
-                    var( --kendo-progressbar-disabled-text, #{$kendo-progressbar-disabled-text} ),
-                    var( --kendo-progressbar-disabled-bg, #{$kendo-progressbar-disabled-bg} ),
-                    var( --kendo-progressbar-disabled-border, #{$kendo-progressbar-disabled-border} )
+                    $kendo-progressbar-disabled-text,
+                    $kendo-progressbar-disabled-bg,
+                    $kendo-progressbar-disabled-border
                 );
 
                 .k-selected {
-                    background-color: var( --kendo-progressbar-value-disabled-bg, #{$kendo-progressbar-value-disabled-bg} );
+                    background-color: $kendo-progressbar-value-disabled-bg;
                 }
             }
         }
@@ -60,42 +45,22 @@
     .k-progressbar.k-chunk-progressbar:not(.k-progressbar-indeterminate) {
         background-color: k-if-var( $kendo-progressbar-chunk-border, transparent );
     }
-    .k-progressbar-chunk {
-        background-color: var( --kendo-progressbar-bg, #{$kendo-progressbar-bg} );
-
-        .k-selected {
-            background-color: var( --kendo-progressbar-value-bg, #{$kendo-progressbar-value-bg} );
-        }
-    }
 
     .k-progressbar-indeterminate {
-        @include fill(
-            var( --kendo-progressbar-indeterminate-text, #{$kendo-progressbar-indeterminate-text} ),
-            var( --kendo-progressbar-indeterminate-bg, #{$kendo-progressbar-indeterminate-bg} ),
-            var( --kendo-progressbar-indeterminate-border, #{$kendo-progressbar-indeterminate-border} )
-            );
+        background-image: none;
 
         &.k-progressbar-horizontal {
             &::after {
-                background: var( --kendo-progressbar-indeterminate-gradient-horizontal, #{$kendo-progressbar-indeterminate-gradient-horizontal} );
-                animation: var( --kendo-progressbar-indeterminate-animation-horizontal, #{$kendo-progressbar-indeterminate-animation-horizontal} );
+                background: $kendo-progressbar-indeterminate-gradient-horizontal;
+                animation: $kendo-progressbar-indeterminate-animation-horizontal;
             }
         }
 
         &.k-progressbar-vertical {
             &::after {
-                background: var( --kendo-progressbar-indeterminate-gradient-vertical, #{$kendo-progressbar-indeterminate-gradient-vertical} );
-                animation: var( --kendo-progressbar-indeterminate-animation-vertical, #{$kendo-progressbar-indeterminate-animation-vertical} );
+                background: $kendo-progressbar-indeterminate-gradient-vertical;
+                animation: $kendo-progressbar-indeterminate-animation-vertical;
             }
         }
     }
-
-    .k-circular-progressbar-scale {
-        stroke: var( --kendo-circular-progressbar-scale-stroke, #{$kendo-circular-progressbar-scale-stroke} );
-    }
-
-    .k-circular-progressbar-arc {
-        stroke: var( --kendo-circular-progressbar-arc-stroke, #{$kendo-circular-progressbar-arc-stroke} );
-        transition: stroke .5s ease;
-    }
 }

package/scss/progressbar/_variables.scss

@@ -3,112 +3,135 @@
 
 /// The height of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-height: 4px !default;
+$kendo-progressbar-height: var( --kendo-progressbar-height, 4px ) !default;
 /// The horizontal width of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-horizontal-width: 100% !default;
+$kendo-progressbar-horizontal-width: var( --kendo-progressbar-horizontal-width, 100% ) !default;
 /// The animation timing of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-animation-timing: 1s linear infinite !default;
+$kendo-progressbar-animation-timing: var( --kendo-progressbar-animation-timing, 1s linear infinite ) !default;
 /// The width of the border around the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-border-width: 0px !default;
+$kendo-progressbar-border-width: var( --kendo-progressbar-border-width, 0px ) !default;
 /// The border radius of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-border-radius: var( --kendo-border-radius-sm, initial ) !default;
+$kendo-progressbar-border-radius: var( --kendo-progressbar-border-radius, var( --kendo-border-radius-sm, initial ) ) !default;
 /// The font family of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-progressbar-font-family: var( --kendo-progressbar-font-family, var( --kendo-font-family, inherit ) ) !default;
 /// The font size of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-progressbar-font-size: var( --kendo-progressbar-font-size, var( --kendo-font-size-sm, inherit ) ) !default;
 /// The line height of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-line-height: var( --kendo-line-height, inherit ) !default;
+$kendo-progressbar-line-height: var( --kendo-progressbar-line-height, var( --kendo-line-height, inherit ) ) !default;
 /// The horizontal padding of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-padding-x: k-spacing(0) !default;
+$kendo-progressbar-padding-x: var( --kendo-progressbar-padding-x, #{k-spacing(0)} ) !default;
 /// The vertical padding of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-padding-y: k-spacing(0) !default;
+$kendo-progressbar-padding-y: var( --kendo-progressbar-padding-y, #{k-spacing(0)} ) !default;
 
 /// The background color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-bg: k-color(base-subtle) !default;
+$kendo-progressbar-bg: var( --kendo-progressbar-bg, #{k-color(base-subtle)} ) !default;
 /// The text color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-text: k-color(on-app-surface) !default;
+$kendo-progressbar-text: var( --kendo-progressbar-text, #{k-color(on-app-surface)} ) !default;
 /// The border color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-border: $kendo-progressbar-bg !default;
+$kendo-progressbar-border: var( --kendo-progressbar-border, #{$kendo-progressbar-bg} ) !default;
 /// The background gradient of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-gradient: null !default;
+$kendo-progressbar-gradient: var( --kendo-progressbar-gradient, null ) !default;
 
 /// The progress background color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-value-bg: k-color(primary) !default;
+$kendo-progressbar-value-bg: var( --kendo-progressbar-value-bg, #{k-color(primary)} ) !default;
 /// The progress text color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-value-text: k-color(on-app-surface) !default;
+$kendo-progressbar-value-text: var( --kendo-progressbar-value-text, #{k-color(on-app-surface)} ) !default;
 /// The progress border color of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-value-border: $kendo-progressbar-value-bg !default;
+$kendo-progressbar-value-border: var( --kendo-progressbar-value-border, #{$kendo-progressbar-value-bg} ) !default;
 /// The progress background gradient of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-value-gradient: null !default;
+$kendo-progressbar-value-gradient: var( --kendo-progressbar-value-gradient, null ) !default;
 
 /// The progress status offset of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-offset-y: k-spacing(2) !default;
+$kendo-progressbar-offset-y: var( --kendo-progressbar-offset-y, #{k-spacing(2)} ) !default;
 /// The progress status offset of the vertical ProgressBar.
 /// @group progressbar
-$kendo-progressbar-vertical-status-offset: calc( (#{$kendo-progressbar-font-size} * #{$kendo-progressbar-line-height} + #{$kendo-progressbar-offset-y}) * -1) !default;
+$kendo-progressbar-vertical-status-offset: var( --kendo-progressbar-vertical-status-offset, calc( (#{$kendo-progressbar-font-size} * #{$kendo-progressbar-line-height} + #{$kendo-progressbar-offset-y}) * -1) ) !default;
 
 /// The background color of the disabled ProgressBar.
 /// @group progressbar
-$kendo-progressbar-disabled-bg: color-mix(in srgb, k-color(on-app-surface) 6%, transparent) !default;
+$kendo-progressbar-disabled-bg: var( --kendo-progressbar-disabled-bg, #{color-mix(in srgb, k-color(on-app-surface) 6%, transparent)} ) !default;
 /// The text color of the disabled ProgressBar.
 /// @group progressbar
-$kendo-progressbar-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
+$kendo-progressbar-disabled-text: var( --kendo-progressbar-disabled-text, #{color-mix(in srgb, k-color(on-app-surface) 46%, transparent)} ) !default;
 /// The border color of the disabled ProgressBar.
 /// @group progressbar
-$kendo-progressbar-disabled-border: $kendo-progressbar-disabled-bg !default;
+$kendo-progressbar-disabled-border: var( --kendo-progressbar-disabled-border, #{$kendo-progressbar-disabled-bg} ) !default;
 
 /// The progress background color of the disabled ProgressBar.
 /// @group progressbar
-$kendo-progressbar-value-disabled-bg: k-color(primary-subtle) !default;
+$kendo-progressbar-value-disabled-bg: var( --kendo-progressbar-value-disabled-bg, #{k-color(primary-subtle)} ) !default;
 
 /// The background color of the indeterminate ProgressBar.
 /// @group progressbar
-$kendo-progressbar-indeterminate-bg: k-color(base-subtle) !default;
+$kendo-progressbar-indeterminate-bg: var( --kendo-progressbar-indeterminate-bg, #{k-color(base-subtle)} ) !default;
 /// The text color of the indeterminate ProgressBar.
 /// @group progressbar
-$kendo-progressbar-indeterminate-text: $kendo-progressbar-text !default;
+$kendo-progressbar-indeterminate-text: var( --kendo-progressbar-indeterminate-text, #{$kendo-progressbar-text} ) !default;
 /// The border color of the indeterminate ProgressBar.
 /// @group progressbar
-$kendo-progressbar-indeterminate-border: k-color(base-subtle) !default;
+$kendo-progressbar-indeterminate-border: var( --kendo-progressbar-indeterminate-border, #{k-color(base-subtle)} ) !default;
 /// The background gradient of the horizontal indeterminate ProgressBar.
 /// @group progressbar
-$kendo-progressbar-indeterminate-gradient-horizontal: linear-gradient(270deg, k-color(base-subtle) 15%, k-color(primary) 50%, k-color(base-subtle) 85%)  !default;
+$kendo-progressbar-indeterminate-gradient-horizontal: var( --kendo-progressbar-indeterminate-gradient-horizontal, linear-gradient(270deg, #{k-color(base-subtle)} 15%, #{k-color(primary)} 50%, #{k-color(base-subtle)} 85%) ) !default;
 /// The background gradient of the vertical indeterminate ProgressBar.
 /// @group progressbar
-$kendo-progressbar-indeterminate-gradient-vertical: linear-gradient(180deg, k-color(base-subtle) 15%, k-color(primary) 50% k-color(base-subtle) 85%) !default;
+$kendo-progressbar-indeterminate-gradient-vertical: var( --kendo-progressbar-indeterminate-gradient-vertical, linear-gradient(180deg, #{k-color(base-subtle)} 15%, #{k-color(primary)} 50% #{k-color(base-subtle)} 85%) ) !default;
 /// The gradient size of the horizontal indeterminate ProgressBar.
 /// @group progressbar
-$kendo-progressbar-indeterminate-animation-horizontal: 3s ease 0s infinite running progressbar-indeterminate-animation-horizontal !default;
+$kendo-progressbar-indeterminate-animation-horizontal: var( --kendo-progressbar-indeterminate-animation-horizontal, 3s ease 0s infinite running progressbar-indeterminate-animation-horizontal ) !default;
 /// The gradient size of the vertical indeterminate ProgressBar.
 /// @group progressbar
-$kendo-progressbar-indeterminate-animation-vertical: 3s ease 0s infinite running progressbar-indeterminate-animation-vertical !default;
+$kendo-progressbar-indeterminate-animation-vertical: var( --kendo-progressbar-indeterminate-animation-vertical, 3s ease 0s infinite running progressbar-indeterminate-animation-vertical ) !default;
 
 /// The border color of the chunk ProgressBar.
 /// @group progressbar
-$kendo-progressbar-chunk-border: k-color(app-surface) !default;
+$kendo-progressbar-chunk-border: var( --kendo-progressbar-chunk-border, #{k-color(app-surface)} ) !default;
 
 // Circular Progressbar
 /// The arc stroke color of the circular ProgressBar.
 /// @group progressbar
-$kendo-circular-progressbar-arc-stroke: k-color(primary) !default;
+$kendo-circular-progressbar-arc-stroke: var( --kendo-circular-progressbar-arc-stroke, #{k-color(primary)} ) !default;
 /// The scale stroke background color of the circular ProgressBar.
 /// @group progressbar
-$kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default;
+$kendo-circular-progressbar-scale-stroke: var( --kendo-circular-progressbar-scale-stroke, #{$kendo-progressbar-bg} ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/progressbar/_variables.scss" with (
+    $kendo-progressbar-height: $kendo-progressbar-height,
+    $kendo-progressbar-horizontal-width: $kendo-progressbar-horizontal-width,
+    $kendo-progressbar-animation-timing: $kendo-progressbar-animation-timing,
+    $kendo-progressbar-border-width: $kendo-progressbar-border-width,
+    $kendo-progressbar-font-family: $kendo-progressbar-font-family,
+    $kendo-progressbar-font-size: $kendo-progressbar-font-size,
+    $kendo-progressbar-line-height: $kendo-progressbar-line-height,
+    $kendo-progressbar-bg: $kendo-progressbar-bg,
+    $kendo-progressbar-text: $kendo-progressbar-text,
+    $kendo-progressbar-border: $kendo-progressbar-border,
+    $kendo-progressbar-gradient: $kendo-progressbar-gradient,
+    $kendo-progressbar-value-bg: $kendo-progressbar-value-bg,
+    $kendo-progressbar-value-text: $kendo-progressbar-value-text,
+    $kendo-progressbar-value-border: $kendo-progressbar-value-border,
+    $kendo-progressbar-value-gradient: $kendo-progressbar-value-gradient,
+    $kendo-progressbar-indeterminate-bg: $kendo-progressbar-indeterminate-bg,
+    $kendo-progressbar-indeterminate-text: $kendo-progressbar-indeterminate-text,
+    $kendo-progressbar-indeterminate-border: $kendo-progressbar-indeterminate-border,
+    $kendo-circular-progressbar-arc-stroke: $kendo-circular-progressbar-arc-stroke,
+    $kendo-circular-progressbar-scale-stroke: $kendo-circular-progressbar-scale-stroke
+);

package/scss/prompt/_layout.scss

@@ -1,80 +1,7 @@
 @use "./_variables.scss" as *;
 @use "../core/_index.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/prompt/_layout.scss" as *;
 
 @mixin kendo-prompt--layout {
-
-    // Prompt
-    .k-prompt {
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        overflow: hidden;
-        border-radius: inherit;
-
-        // Toolbar
-        .k-toolbar {
-            border-top-width: 0;
-            border-inline-width: 0;
-        }
-    }
-
-    // Content
-    .k-prompt-content {
-        padding-block: var( --kendo-prompt-content-padding-y, #{$kendo-prompt-content-padding-y} );
-        padding-inline: var( --kendo-prompt-content-padding-x, #{$kendo-prompt-content-padding-x} );
-        display: flex;
-        flex-flow: column nowrap;
-        flex: 1 1 auto;
-        gap: var( --kendo-prompt-content-spacing, #{$kendo-prompt-content-spacing} );
-        overflow: auto;
-    }
-
-    .k-prompt-view {
-        display: flex;
-        flex-direction: column;
-        flex: 1 1 auto;
-        gap: var( --kendo-prompt-content-spacing, #{$kendo-prompt-content-spacing} );
-    }
-
-    // Prompt Expander
-    .k-prompt-expander {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        align-items: flex-start;
-        gap: var( --kendo-prompt-expander-spacing, #{$kendo-prompt-expander-spacing} );
-    }
-
-    .k-prompt-expander-content {
-        display: flex;
-        flex-flow: column;
-        flex: 0 0 auto;
-        gap: var( --kendo-prompt-expander-spacing, #{$kendo-prompt-expander-spacing} );
-        align-self: stretch;
-    }
-
-    // Remove when k-suggestion is adopted
-    .k-prompt-suggestion {
-        border-width: 1px;
-        border-style: solid;
-        border-radius: var( --kendo-prompt-suggestion-border-radius, #{$kendo-prompt-suggestion-border-radius} );
-        padding-block: var( --kendo-prompt-suggestion-padding-y, #{$kendo-prompt-suggestion-padding-y} );
-        padding-inline: var( --kendo-prompt-suggestion-padding-x, #{$kendo-prompt-suggestion-padding-x} );
-        cursor: pointer;
-    }
-
-    .k-prompt-setting {
-        display: flex;
-        flex-direction: column;
-    }
-
-    // Actions
-    .k-prompt-actions.k-actions {
-        margin: 0;
-    }
-
-    // Stop FAB
-    .k-prompt-stop-fab {
-        z-index: 1;
-    }
+    @include kendo-prompt--layout-base();
 }

package/scss/prompt/_theme.scss

@@ -1,40 +1,7 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/prompt/_theme.scss" as *;
 
 @mixin kendo-prompt--theme {
-
-    .k-prompt {
-        @include fill(
-            var( --kendo-prompt-text, #{$kendo-prompt-text} ),
-            var( --kendo-prompt-bg, #{$kendo-prompt-bg} ),
-            var( --kendo-prompt-border, #{$kendo-prompt-border} )
-        );
-    }
-
-    .k-prompt-header {
-        @include fill(
-            var( --kendo-prompt-header-text, #{$kendo-prompt-header-text} ),
-            var( --kendo-prompt-header-bg, #{$kendo-prompt-header-bg} ),
-            var( --kendo-prompt-header-border, #{$kendo-prompt-header-border} )
-        );
-    }
-
-    .k-prompt-content {
-        @include fill(
-            var( --kendo-prompt-content-text, #{$kendo-prompt-content-text} ),
-            var( --kendo-prompt-content-bg, #{$kendo-prompt-content-bg} ),
-            var( --kendo-prompt-content-border, #{$kendo-prompt-content-border} )
-        );
-    }
-
-    // Remove when k-suggestion is adopted
-    .k-prompt-suggestion {
-        @include fill(
-            var( --kendo-prompt-suggestion-text, #{$kendo-prompt-suggestion-text} ),
-            var( --kendo-prompt-suggestion-bg, #{$kendo-prompt-suggestion-bg} ),
-            var( --kendo-prompt-suggestion-border, #{$kendo-prompt-suggestion-border} )
-        );
-        box-shadow: var( --kendo-prompt-suggestion-shadow, #{$kendo-prompt-suggestion-shadow} );
-    }
-
+    @include kendo-prompt--theme-base();
 }