@progress/kendo-theme-default 5.12.0 → 5.12.1-dev.1

package/scss/utils/_text.scss

@@ -21,39 +21,51 @@
 
     // Wrapping
 
-    /// @name k-text-nowrap
-    /// @description This is equivalent to `white-space: nowrap;`. Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
+    /// This is equivalent to `white-space: nowrap;`. Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
+    /// @name .k-text-nowrap
     /// @group text
     .k-text-nowrap                  { white-space: nowrap; }
     .\!k-text-nowrap                { white-space: nowrap !important; } // sass-lint:disable-line no-important
-    /// @name k-text-ellipsis
-    /// @description This is equivalent to `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`.
+    /// This is equivalent to `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`.
+    /// @name .k-text-ellipsis
     /// @group text
     .k-text-ellipsis                { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } // sass-lint:disable-line one-declaration-per-line
 
-    /// @name k-white-space-normal
-    /// @description This is equivalent to `white-space: normal;`. Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.
+    /// This is equivalent to `white-space: normal;`. Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.
+    /// @name .k-white-space-normal
     /// @group text
+    /// @contextType css
+    _ {}
 
-    /// @name k-white-space-nowrap
-    /// @description This is equivalent to `white-space: nowrap;`. Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
+    /// This is equivalent to `white-space: nowrap;`. Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
+    /// @name .k-white-space-nowrap
     /// @group text
+    /// @contextType css
+    _ {}
 
-    /// @name k-white-space-pre
-    /// @description This is equivalent to `white-space: pre;`. Sequences of white space are preserved. Lines are only broken at newline characters in the source and at <br> elements.
+    /// This is equivalent to `white-space: pre;`. Sequences of white space are preserved. Lines are only broken at newline characters in the source and at <br> elements.
+    /// @name .k-white-space-pre
     /// @group text
+    /// @contextType css
+    _ {}
 
-    /// @name k-white-space-pre-wrap
-    /// @description This is equivalent to `white-space: pre-wrap;`. Sequences of white space are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
+    /// This is equivalent to `white-space: pre-wrap;`. Sequences of white space are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
+    /// @name .k-white-space-pre-wrap
     /// @group text
+    /// @contextType css
+    _ {}
 
-    /// @name k-white-space-pre-line
-    /// @description This is equivalent to `white-space: pre-line;`. Sequences of white space are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
+    /// This is equivalent to `white-space: pre-line;`. Sequences of white space are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
+    /// @name .k-white-space-pre-line
     /// @group text
+    /// @contextType css
+    _ {}
 
-    /// @name k-white-space-break-spaces
-    /// @description This is equivalent to `white-space: break-spaces;`. Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
+    /// This is equivalent to `white-space: break-spaces;`. Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
+    /// @name .k-white-space-break-spaces
     /// @group text
+    /// @contextType css
+    _ {}
 
     @each $wrap in $white-space {
         .k-white-space-#{$wrap}    { white-space: $wrap; }
@@ -63,21 +75,29 @@
 
     // Align
 
-    /// @name k-text-left
-    /// @description This is equivalent to `text-align: left;`. The inline contents are aligned to the left edge of the line box.
+    /// This is equivalent to `text-align: left;`. The inline contents are aligned to the left edge of the line box.
+    /// @name .k-text-left
     /// @group text
+    /// @contextType css
+    _ {}
 
-    /// @name k-text-right
-    /// @description This is equivalent to `text-align: right;`. The inline contents are aligned to the right edge of the line box.
+    /// This is equivalent to `text-align: right;`. The inline contents are aligned to the right edge of the line box.
+    /// @name .k-text-right
     /// @group text
+    /// @contextType css
+    _ {}
 
-    /// @name k-text-center
-    /// @description This is equivalent to `text-align: center;`. The inline contents are centered within the line box.
+    /// This is equivalent to `text-align: center;`. The inline contents are centered within the line box.
+    /// @name .k-text-center
     /// @group text
+    /// @contextType css
+    _ {}
 
-    /// @name k-text-justify
-    /// @description This is equivalent to `text-align: justify;`. The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.
+    /// This is equivalent to `text-align: justify;`. The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.
+    /// @name .k-text-justify
     /// @group text
+    /// @contextType css
+    _ {}
 
     @each $align in $text-align {
         .k-text-#{$align}           { text-align: $align; }
@@ -87,17 +107,23 @@
 
     // Transform
 
-    /// @name k-text-lowercase
-    /// @description This is equivalent to `text-transform: lowercase;`. Is a keyword that converts all characters to lowercase.
+    /// This is equivalent to `text-transform: lowercase;`. Is a keyword that converts all characters to lowercase.
+    /// @name .k-text-lowercase
     /// @group text
+    /// @contextType css
+    _ {}
 
-    /// @name k-text-uppercase
-    /// @description This is equivalent to `text-transform: uppercase;`. Is a keyword that converts all characters to uppercase.
+    /// This is equivalent to `text-transform: uppercase;`. Is a keyword that converts all characters to uppercase.
+    /// @name .k-text-uppercase
     /// @group text
+    /// @contextType css
+    _ {}
 
-    /// @name k-text-capitalize
-    /// @description This is equivalent to `text-transform: capitalize;`. Is a keyword that converts the first letter of each word to uppercase. Other characters remain unchanged (they retain their original case as written in the element's text).
+    /// This is equivalent to `text-transform: capitalize;`. Is a keyword that converts the first letter of each word to uppercase. Other characters remain unchanged (they retain their original case as written in the element's text).
+    /// @name .k-text-capitalize
     /// @group text
+    /// @contextType css
+    _ {}
 
     @each $transform in $text-transform {
         .k-text-#{$transform}       { text-transform: $transform; }
@@ -112,16 +138,16 @@
 
     // Named font-weight
 
-    /// @name k-font-weight-light
-    /// @description This is equivalent to `font-weight: 300;`. The value of `300` may be different for each Kendo UI Theme.
+    /// This is equivalent to `font-weight: 300;`. The value of `300` may be different for each Kendo UI Theme.
+    /// @name .k-font-weight-light
     /// @group text
     .k-font-weight-light            { font-weight: $font-weight-light !important; } // sass-lint:disable-line no-important
-    /// @name k-font-weight-normal
-    /// @description This is equivalent to `font-weight: 400;`. The value of `400` may be different for each Kendo UI Theme.
+    /// This is equivalent to `font-weight: 400;`. The value of `400` may be different for each Kendo UI Theme.
+    /// @name .k-font-weight-normal
     /// @group text
     .k-font-weight-normal           { font-weight: $font-weight-normal !important; } // sass-lint:disable-line no-important
-    /// @name k-font-weight-bold
-    /// @description This is equivalent to `font-weight: 700;`. The value of `700` may be different for each Kendo UI Theme.
+    /// This is equivalent to `font-weight: 700;`. The value of `700` may be different for each Kendo UI Theme.
+    /// @name .k-font-weight-bold
     /// @group text
     .k-font-weight-bold             { font-weight: $font-weight-bold !important; } // sass-lint:disable-line no-important
 

package/scss/utils/_touch-action.scss

@@ -2,14 +2,19 @@
 
     // Touch-action documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action.
 
-    // @name k-touch-action-none
-    // @description This is equivalent to `touch-action: none;`. Disable browser handling of all panning and zooming gestures.
-    // @group touch-action
+    /// This is equivalent to `touch-action: none;`. Disable browser handling of all panning and zooming gestures.
+    /// @name k-touch-action-none
+    /// @group touch-action
+    /// @contextType css
+    _ {}
 
-    // @name k-touch-action-auto
-    // @description This is equivalent to `touch-action: auto;`. Enable browser handling of all panning and zooming gestures.
-    // @group touch-action
+    /// This is equivalent to `touch-action: auto;`. Enable browser handling of all panning and zooming gestures.
+    /// @name k-touch-action-auto
+    /// @group touch-action
+    /// @contextType css
+    _ {}
 
+    // Touch-action utility classes
     $utils-touch-action: (
         none,
         auto

package/scss/utils/_transform.scss

@@ -4,12 +4,12 @@
 
     // Flip
 
-    /// @name k-flip-h
-    /// @description This is equivalent to `transform: scaleX( -1 );`. Flips the element horizontally.
+    /// This is equivalent to `transform: scaleX( -1 );`. Flips the element horizontally.
+    /// @name .k-flip-h
     /// @group transform
     .k-flip-h               { transform: scaleX( -1 ); }
-    /// @name k-flip-v
-    /// @description This is equivalent to `transform: scaleY( -1 );`. Flips the element vertically.
+    /// This is equivalent to `transform: scaleY( -1 );`. Flips the element vertically.
+    /// @name .k-flip-v
     /// @group transform
     .k-flip-v               { transform: scaleY( -1 ); }
     .k-flip-h.k-flip-v      { transform: scale( -1, -1 ); }
@@ -17,88 +17,88 @@
 
     // Rotate
 
-    /// @name k-rotate-45
-    /// @description This is equivalent to `transform: rotate( 45deg );`. Rotates the element by 45 degrees.
+    /// This is equivalent to `transform: rotate( 45deg );`. Rotates the element by 45 degrees.
+    /// @name .k-rotate-45
     /// @group transform
     .k-rotate-45            { transform: rotate( 45deg ); }
-    /// @name k-rotate-90
-    /// @description This is equivalent to `transform: rotate( 90deg );`. Rotates the element by 90 degrees.
+    /// This is equivalent to `transform: rotate( 90deg );`. Rotates the element by 90 degrees.
+    /// @name .k-rotate-90
     /// @group transform
     .k-rotate-90            { transform: rotate( 90deg ); }
-    /// @name k-rotate-135
-    /// @description This is equivalent to `transform: rotate( 135deg );`. Rotates the element by 135 degrees.
+    /// This is equivalent to `transform: rotate( 135deg );`. Rotates the element by 135 degrees.
+    /// @name .k-rotate-135
     /// @group transform
     .k-rotate-135           { transform: rotate( 135deg ); }
-    /// @name k-rotate-180
-    /// @description This is equivalent to `transform: rotate( 180deg );`. Rotates the element by 180 degrees.
+    /// This is equivalent to `transform: rotate( 180deg );`. Rotates the element by 180 degrees.
+    /// @name .k-rotate-180
     /// @group transform
     .k-rotate-180           { transform: rotate( 180deg ); }
-    /// @name k-rotate-225
-    /// @description This is equivalent to `transform: rotate( 225deg );`. Rotates the element by 225 degrees.
+    /// This is equivalent to `transform: rotate( 225deg );`. Rotates the element by 225 degrees.
+    /// @name .k-rotate-225
     /// @group transform
     .k-rotate-225           { transform: rotate( 225deg ); }
-    /// @name k-rotate-270
-    /// @description This is equivalent to `transform: rotate( 270deg );`. Rotates the element by 270 degrees.
+    /// This is equivalent to `transform: rotate( 270deg );`. Rotates the element by 270 degrees.
+    /// @name .k-rotate-270
     /// @group transform
     .k-rotate-270           { transform: rotate( 270deg ); }
-    /// @name k-rotate-315
-    /// @description This is equivalent to `transform: rotate( 315deg );`. Rotates the element by 315 degrees.
+    /// This is equivalent to `transform: rotate( 315deg );`. Rotates the element by 315 degrees.
+    /// @name .k-rotate-315
     /// @group transform
     .k-rotate-315           { transform: rotate( 315deg ); }
 
 
     // Scale
 
-    /// @name k-scale-0
-    /// @description This is equivalent to `transform: scale( 0, 0 );`. The element is shrunk and no longer visible.
+    /// This is equivalent to `transform: scale( 0, 0 );`. The element is shrunk and no longer visible.
+    /// @name .k-scale-0
     /// @group transform
     .k-scale-0              { transform: scale( 0, 0 ); }
-    /// @name k-scale-1
-    /// @description This is equivalent to `transform: scale( 1, 1 );`. The element has its default scale.
+    /// This is equivalent to `transform: scale( 1, 1 );`. The element has its default scale.
+    /// @name .k-scale-1
     /// @group transform
     .k-scale-1              { transform: scale( 1, 1 ); }
-    /// @name k-scale-2
-    /// @description This is equivalent to `transform: scale( 2, 2 );`. The element is scaling two times in both directions.
+    /// This is equivalent to `transform: scale( 2, 2 );`. The element is scaling two times in both directions.
+    /// @name .k-scale-2
     /// @group transform
     .k-scale-2              { transform: scale( 2, 2 ); }
 
 
     // Translate
 
-    /// @name k-translate-0
-    /// @description This is equivalent to `transform: translate( 0, 0 );`. The element does not move.
+    /// This is equivalent to `transform: translate( 0, 0 );`. The element does not move.
+    /// @name .k-translate-0
     /// @group transform
     .k-translate-0          { transform: translate( 0, 0 ); }
-    /// @name k-translate-0-50
-    /// @description This is equivalent to `transform: translate( 0, 50% );`. The element moves vertically by 50% of its height.
+    /// This is equivalent to `transform: translate( 0, 50% );`. The element moves vertically by 50% of its height.
+    /// @name .k-translate-0-50
     /// @group transform
     .k-translate-0-50       { transform: translate( 0, 50% ); }
-    /// @name k-translate-0-100
-    /// @description This is equivalent to `transform: translate( 0, 100% );`. The element moves vertically by 100% of its height.
+    /// This is equivalent to `transform: translate( 0, 100% );`. The element moves vertically by 100% of its height.
+    /// @name .k-translate-0-100
     /// @group transform
     .k-translate-0-100      { transform: translate( 0, 100% ); }
-    /// @name k-translate-50-0
-    /// @description This is equivalent to `transform: translate( 50%, 0 );`. The element moves horizontally by 50% of its width.
+    /// This is equivalent to `transform: translate( 50%, 0 );`. The element moves horizontally by 50% of its width.
+    /// @name .k-translate-50-0
     /// @group transform
     .k-translate-50-0       { transform: translate( 50%, 0 ); }
-    /// @name k-translate-50-50
-    /// @description This is equivalent to `transform: translate( 50%, 50% );`. The element moves horizontally by 50% of its width and vertically by 50% of its height.
+    /// This is equivalent to `transform: translate( 50%, 50% );`. The element moves horizontally by 50% of its width and vertically by 50% of its height.
+    /// @name .k-translate-50-50
     /// @group transform
     .k-translate-50-50      { transform: translate( 50%, 50% ); }
-    /// @name k-translate-50-100
-    /// @description This is equivalent to `transform: translate( 50%, 100% );`. The element moves horizontally by 50% of its width and vertically by 100% of its height.
+    /// This is equivalent to `transform: translate( 50%, 100% );`. The element moves horizontally by 50% of its width and vertically by 100% of its height.
+    /// @name .k-translate-50-100
     /// @group transform
     .k-translate-50-100     { transform: translate( 50%, 100% ); }
-    /// @name k-translate-100-0
-    /// @description This is equivalent to `transform: translate( 100%, 0 );`. The element moves horizontally by 100% of its width.
+    /// This is equivalent to `transform: translate( 100%, 0 );`. The element moves horizontally by 100% of its width.
+    /// @name .k-translate-100-0
     /// @group transform
     .k-translate-100-0      { transform: translate( 100%, 0 ); }
-    /// @name k-translate-100-50
-    /// @description This is equivalent to `transform: translate( 100%, 50% );`. The element moves horizontally by 100% of its width and vertically by 50% of its height.
+    /// This is equivalent to `transform: translate( 100%, 50% );`. The element moves horizontally by 100% of its width and vertically by 50% of its height.
+    /// @name .k-translate-100-50
     /// @group transform
     .k-translate-100-50     { transform: translate( 100%, 50% ); }
-    /// @name k-translate-100-100
-    /// @description This is equivalent to `transform: translate( 100%, 100% );`. The element moves horizontally by 100% of its width and vertically by 100% of its height.
+    /// This is equivalent to `transform: translate( 100%, 100% );`. The element moves horizontally by 100% of its width and vertically by 100% of its height.
+    /// @name .k-translate-100-100
     /// @group transform
     .k-translate-100-100    { transform: translate( 100%, 100% ); }
 

package/scss/utils/_user-select.scss

@@ -2,26 +2,37 @@
 
     // User-select documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/user-select.
 
-    // @name k-user-select-none
-    // @description This is equivalent to `user-select: none;`. The text of the element and its sub-elements is not selectable. Note that the Selection object can contain these elements.
-    // @group user-select
-
-    // @name k-user-select-auto
-    // @description This is equivalent to `user-select: auto;`. This is the default value of the `user-select` property.
-    // @group user-select
-
-    // @name k-user-select-text
-    // @description This is equivalent to `user-select: text;`. The text can be selected by the user.
-    // @group user-select
-
-    // @name k-user-select-all
-    // @description This is equivalent to `user-select: all;`. The content of the element shall be selected atomically: If a selection would contain part of the element, then the selection must contain the entire element including all its descendants.  If a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.
-    // @group user-select
-
-    // @name k-user-select-contain
-    // @description This is equivalent to `user-select: contain;`. Enables selection to start within the element; however, the selection will be contained by the bounds of that element.
-    // @group user-select
-
+    /// This is equivalent to `user-select: none;`. The text of the element and its sub-elements is not selectable. Note that the Selection object can contain these elements.
+    /// @name .k-user-select-none
+    /// @group user-select
+    /// @contextType css
+    _ {}
+
+    /// This is equivalent to `user-select: auto;`. This is the default value of the `user-select` property.
+    /// @name .k-user-select-auto
+    /// @group user-select
+    /// @contextType css
+    _ {}
+
+    /// This is equivalent to `user-select: text;`. The text can be selected by the user.
+    /// @name .k-user-select-text
+    /// @group user-select
+    /// @contextType css
+    _ {}
+
+    /// This is equivalent to `user-select: all;`. The content of the element shall be selected atomically: If a selection would contain part of the element, then the selection must contain the entire element including all its descendants.  If a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.
+    /// @name .k-user-select-all
+    /// @group user-select
+    /// @contextType css
+    _ {}
+
+    /// This is equivalent to `user-select: contain;`. Enables selection to start within the element; however, the selection will be contained by the bounds of that element.
+    /// @name .k-user-select-contain
+    /// @group user-select
+    /// @contextType css
+    _ {}
+
+    // User select utility classes
     $utils-user-select: (
         none,
         auto,

package/scss/validator/_index.scss

@@ -8,6 +8,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/virtual-scroller/_index.scss

@@ -5,6 +5,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/window/_index.scss

@@ -11,6 +11,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/window/_layout.scss

@@ -1,21 +1,21 @@
 @include exports("window/layout") {
 
     .k-window {
-        @include border-radius( $window-border-radius );
+        @include border-radius( $kendo-window-border-radius );
         padding: 0;
-        border-width: $window-border-width;
+        border-width: $kendo-window-border-width;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $window-font-family;
-        font-size: $window-font-size;
-        line-height: $window-line-height;
+        font-family: $kendo-window-font-family;
+        font-size: $kendo-window-font-size;
+        line-height: $kendo-window-line-height;
         display: inline-flex;
         flex-direction: column;
         position: absolute;
         z-index: 10002;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         // overlay during dragging
         // .k-overlay {
@@ -31,17 +31,17 @@
 
 
     // Window sizes
-    @each $size, $width in $window-sizes {
+    @each $size, $width in $kendo-window-sizes {
         .k-window-#{$size} { width: $width; }
     }
 
 
     // Title bar
     .k-window-titlebar {
-        @include border-top-radius( $window-border-radius );
-        padding: $window-titlebar-padding-y $window-titlebar-padding-x;
-        border-width: $window-titlebar-border-width;
-        border-style: $window-titlebar-border-style;
+        @include border-top-radius( $kendo-window-border-radius );
+        padding: $kendo-window-titlebar-padding-y $kendo-window-titlebar-padding-x;
+        border-width: $kendo-window-titlebar-border-width;
+        border-style: $kendo-window-titlebar-border-style;
         white-space: nowrap;
         display: flex;
         flex-direction: row;
@@ -57,8 +57,8 @@
     .k-window-title {
         padding: .5em 0;
         margin: -.5em 0;
-        font-size: $window-title-font-size;
-        line-height: $window-title-line-height;
+        font-size: $kendo-window-title-font-size;
+        line-height: $kendo-window-title-line-height;
         text-overflow: ellipsis;
         overflow: hidden;
         cursor: default;
@@ -73,30 +73,30 @@
 
 
     // Actions
-    .k-window-actions {
+    .k-window-titlebar-actions {
         margin: -5em 0;
-        margin-inline-end: calc( #{$window-titlebar-padding-y} - #{$window-titlebar-padding-x} );
+        margin-inline-end: calc( #{$kendo-window-titlebar-padding-y} - #{$kendo-window-titlebar-padding-x} );
         line-height: 1;
         display: flex;
-        gap: $window-actions-gap;
+        gap: $kendo-window-actions-gap;
         flex-flow: row nowrap;
         flex-shrink: 0;
         align-items: center;
         vertical-align: top;
     }
-    .k-window-action {
+    .k-window-titlebar-action {
         flex-shrink: 0;
-        opacity: $window-action-opacity;
+        opacity: $kendo-window-action-opacity;
     }
-    .k-window-action:hover {
-        opacity: $window-action-hover-opacity;
+    .k-window-titlebar-action:hover {
+        opacity: $kendo-window-action-hover-opacity;
     }
 
 
     // Content
     .k-window-content,
     .k-prompt-container {
-        padding: $window-inner-padding-y $window-inner-padding-x;
+        padding: $kendo-window-inner-padding-y $kendo-window-inner-padding-x;
         border-width: 0;
         border-color: inherit;
         color: inherit;
@@ -107,13 +107,13 @@
         flex: 1 1 auto;
     }
     .k-window-content + .k-prompt-container {
-        margin-top: -($window-inner-padding-y / 2);
+        margin-top: - k-math-div( $kendo-window-inner-padding-y, 2 );
     }
     .k-window-content:first-child {
-        padding-top: clamp( #{$window-inner-padding-y}, #{$window-titlebar-padding-y}, #{$window-titlebar-padding-y} );
+        padding-top: clamp( #{$kendo-window-inner-padding-y}, #{$kendo-window-titlebar-padding-y}, #{$kendo-window-titlebar-padding-y} );
     }
     .k-window-content:last-child {
-        padding-bottom: clamp( #{$window-inner-padding-y}, #{$window-titlebar-padding-y}, #{$window-titlebar-padding-y} );
+        padding-bottom: clamp( #{$kendo-window-inner-padding-y}, #{$kendo-window-titlebar-padding-y}, #{$kendo-window-titlebar-padding-y} );
     }
 
     .k-window-iframecontent {
@@ -129,11 +129,10 @@
     }
 
     // Buttons Layout
-    .k-window-buttons,
-    .k-window-buttongroup {
-        @include border-bottom-radius( $window-border-radius );
-        padding: $window-buttongroup-padding-y $window-buttongroup-padding-x;
-        border-width: $window-buttongroup-border-width 0 0;
+    .k-window-actions {
+        @include border-bottom-radius( $kendo-window-border-radius );
+        padding: $kendo-window-buttongroup-padding-y $kendo-window-buttongroup-padding-x;
+        border-width: $kendo-window-buttongroup-border-width 0 0;
         border-style: solid;
         border-color: inherit;
         flex: 0 0 auto;

package/scss/window/_theme.scss

@@ -3,17 +3,17 @@
     // Window
     .k-window {
         @include fill(
-            $window-text,
-            $window-bg,
-            $window-border
+            $kendo-window-text,
+            $kendo-window-bg,
+            $kendo-window-border
         );
-        @include box-shadow( $window-shadow );
+        @include box-shadow( $kendo-window-shadow );
     }
 
     .k-window {
         &:focus,
         &.k-focus {
-            @include box-shadow( $window-focused-shadow );
+            @include box-shadow( $kendo-window-focus-shadow );
         }
     }
 
@@ -21,11 +21,19 @@
     // Titlebar
     .k-window-titlebar {
         @include fill(
-            $window-titlebar-text,
-            $window-titlebar-bg,
-            $window-titlebar-border,
-            $window-titlebar-gradient
+            $kendo-window-titlebar-text,
+            $kendo-window-titlebar-bg,
+            $kendo-window-titlebar-border,
+            $kendo-window-titlebar-gradient
         );
     }
 
+    // Window theme colors
+    @each $name, $color in $kendo-window-theme-colors {
+        .k-window-#{$name} .k-window-titlebar {
+            color: k-contrast-legacy( $color );
+            background-color: $color;
+        }
+    }
+
 }