@progress/kendo-theme-fluent 5.12.1-dev.0 → 5.12.1-dev.2

package/scss/window/_layout.scss

@@ -1,6 +1,5 @@
-@use "../core/mixins" as *;
-@use "../core/color-system" as *;
-@use "_variables.scss" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-window--layout() {
 
@@ -19,7 +18,7 @@
         position: absolute;
         z-index: 10002;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
     }
 
     .k-window.k-window-maximized {
@@ -67,7 +66,7 @@
 
 
     // Actions
-    .k-window-actions {
+    .k-window-titlebar-actions {
         margin: -5em 0;
         margin-inline-end: ( $kendo-window-titlebar-padding-y - $kendo-window-titlebar-padding-x );
         line-height: 1;
@@ -78,7 +77,7 @@
         align-items: center;
         vertical-align: top;
     }
-    .k-window-action {
+    .k-window-titlebar-action {
         flex-shrink: 0;
         opacity: var( --kendo-window-action-opacity, #{$kendo-window-action-opacity} );
 
@@ -93,7 +92,7 @@
     .k-window-content,
     .k-prompt-container {
         padding-inline: var( --kendo-window-inner-padding-x, #{$kendo-window-inner-padding-x} );
-        padding-block: 0 var( --kendo-window-inner-padding-y, #{$kendo-window-inner-padding-y} );
+        padding-block: var( --kendo-window-inner-padding-y, #{$kendo-window-inner-padding-y} );
         border-width: 0;
         border-color: inherit;
         color: inherit;
@@ -103,14 +102,9 @@
         position: relative;
         flex: 1 1 auto;
     }
+
     .k-window-content + .k-prompt-container {
-        margin-top: calc( -1 * var( --kendo-window-inner-padding-y, #{$kendo-window-inner-padding-y} ) / 2 );
-    }
-    .k-window-content:first-child {
-        padding-top: clamp( var( --kendo-window-inner-padding-y, #{$kendo-window-inner-padding-y} ), var( --kendo-window-titlebar-padding-y, #{$kendo-window-titlebar-padding-y} ), var( --kendo-window-titlebar-padding-y, #{$kendo-window-titlebar-padding-y} ));
-    }
-    .k-window-content:last-child {
-        padding-bottom: clamp( var( --kendo-window-inner-padding-y, #{$kendo-window-inner-padding-y} ), var( --kendo-window-titlebar-padding-y, #{$kendo-window-titlebar-padding-y} ), var( --kendo-window-titlebar-padding-y, #{$kendo-window-titlebar-padding-y} ));
+        margin-block-start: calc( -1 * var( --kendo-window-inner-padding-y, #{$kendo-window-inner-padding-y} ) / 2 );
     }
 
     .k-window-iframecontent {
@@ -126,8 +120,7 @@
     }
 
     // Buttons Layout
-    .k-window-buttons,
-    .k-window-buttongroup {
+    .k-window-actions {
         @include border-bottom-radius( var( --kendo-window-border-radius, #{$kendo-window-border-radius} ) );
         padding-inline: var( --kendo-window-buttongroup-padding-x, #{$kendo-window-buttongroup-padding-x} );
         padding-block: 0 var( --kendo-window-buttongroup-padding-y, #{$kendo-window-buttongroup-padding-y} );

package/scss/window/_theme.scss

@@ -1,5 +1,6 @@
-@use "../core/mixins" as *;
-@use "_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-window--theme() {
 
@@ -14,18 +15,37 @@
 
         &:focus,
         &.k-focus {
-            @include box-shadow( var( --kendo-window-focused-shadow, #{$kendo-window-focused-shadow} ) );
+            @include box-shadow( var( --kendo-window-focus-shadow, #{$kendo-window-focus-shadow} ) );
         }
     }
 
 
-    // Title
-    .k-window-title {
+    // Titlebar
+    .k-window-titlebar {
         @include fill(
-            var( --kendo-window-titlebar-text, #{$kendo-window-titlebar-text} ),
-            var( --kendo-window-titlebar-bg, #{$kendo-window-titlebar-bg} ),
-            var( --kendo-window-titlebar-border, #{$kendo-window-titlebar-border} )
+            $bg: var( --kendo-window-titlebar-bg, #{$kendo-window-titlebar-bg} ),
+            $border: var( --kendo-window-titlebar-border, #{$kendo-window-titlebar-border} )
         );
     }
 
+    .k-window-title {
+        color: var( --kendo-window-titlebar-text, #{$kendo-window-titlebar-text} ),
+    }
+
+    // Window theme colors
+    @each $theme-color, $color-props in $kendo-window-theme-colors {
+
+        $_text: map.get( $color-props, text );
+        $_bg: map.get( $color-props, bg );
+        $_border: map.get( $color-props, border );
+
+        .k-window-#{$theme-color} .k-window-titlebar {
+            color: var( --kendo-window-titlebar-text, #{$kendo-window-titlebar-text} );
+
+            --kendo-window-titlebar-text: var( --kendo-window-#{$theme-color}-text, #{$_text} );
+            --kendo-window-titlebar-bg: var( --kendo-window-#{$theme-color}-bg, #{$_bg} );
+            --kendo-window-titlebar-border: var( --kendo-window-#{$theme-color}-border, #{$_border} );
+        }
+    }
+
 }

package/scss/window/_variables.scss

@@ -1,9 +1,9 @@
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
 
 /// Width of the border around the window.
 /// @group window
-$kendo-window-border-width: map-get( $kendo-spacing, 1 ) 0 0 !default;
+$kendo-window-border-width: map.get( $kendo-spacing, 1 ) 0 0 !default;
 /// Border radius of the window.
 /// @group window
 $kendo-window-border-radius: var( --kendo-border-radius-md, 0 ) !default;
@@ -19,10 +19,10 @@ $kendo-window-line-height: var( --kendo-line-height, normal ) !default;
 
 /// Horizontal padding of the window titlebar.
 /// @group window
-$kendo-window-titlebar-padding-x: map-get( $kendo-spacing, 6 ) !default;
+$kendo-window-titlebar-padding-x: map.get( $kendo-spacing, 6 ) !default;
 /// Vertical padding of the window titlebar.
 /// @group window
-$kendo-window-titlebar-padding-y: map-get( $kendo-spacing, 5 ) !default;
+$kendo-window-titlebar-padding-y: map.get( $kendo-spacing, 5 ) !default;
 /// Width of the top border of the window titlebar.
 /// @group window
 $kendo-window-titlebar-border-width: 0 !default;
@@ -53,23 +53,23 @@ $kendo-window-action-hover-opacity: 1 !default;
 
 /// Horizontal padding of the content of the window.
 /// @group window
-$kendo-window-inner-padding-x: map-get( $kendo-spacing, 6 ) !default;
+$kendo-window-inner-padding-x: map.get( $kendo-spacing, 6 ) !default;
 /// Vertical padding of the content of the window.
 /// @group window
-$kendo-window-inner-padding-y: map-get( $kendo-spacing, 6 ) !default;
+$kendo-window-inner-padding-y: map.get( $kendo-spacing, 3 ) !default;
 
 /// Horizontal padding of the window action buttons.
 /// @group window
-$kendo-window-buttongroup-padding-x: map-get( $kendo-spacing, 6 ) !default; // $actions-padding-x
+$kendo-window-buttongroup-padding-x: map.get( $kendo-spacing, 6 ) !default; // $actions-padding-x
 /// Vertical padding of the window action buttons.
 /// @group window
-$kendo-window-buttongroup-padding-y: map-get( $kendo-spacing, 6 ) !default; // $actions-padding-y
+$kendo-window-buttongroup-padding-y: map.get( $kendo-spacing, 6 ) !default; // $actions-padding-y
 /// Width of the top border of the window action buttons.
 /// @group window
 $kendo-window-buttongroup-border-width: 0 !default;
 /// Spacing between the action buttons of the window.
 /// @group window
-$kendo-window-buttongroup-spacing: map-get( $kendo-spacing, 3 ) !default;
+$kendo-window-buttongroup-spacing: map.get( $kendo-spacing, 3 ) !default;
 
 /// Background color of the window.
 /// @group window
@@ -83,10 +83,10 @@ $kendo-window-border: get-theme-color-var( primary-100 ) !default;
 
 /// Background color of the window titlebar.
 /// @group window
-$kendo-window-titlebar-bg: var( --kendo-component-bg, initial ) !default; // $header-bg
+$kendo-window-titlebar-bg: var( --kendo-component-bg, initial ) !default; // $kendo-component-header-bg
 /// Text color of the window titlebar.
 /// @group window
-$kendo-window-titlebar-text: get-theme-color-var( primary-100 ) !default; // $header-text
+$kendo-window-titlebar-text: get-theme-color-var( primary-100 ) !default; // $kendo-component-header-text
 /// Border color of the window titlebar.
 /// @group window
 $kendo-window-titlebar-border: get-theme-color-var( primary-100 ) !default;
@@ -96,7 +96,7 @@ $kendo-window-titlebar-border: get-theme-color-var( primary-100 ) !default;
 $kendo-window-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
 /// Box shadow around the window when hovered.
 /// @group window
-$kendo-window-focused-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
+$kendo-window-focus-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
 
 /// Map of the width of the different window sizes.
 /// @group window
@@ -105,3 +105,47 @@ $kendo-window-sizes: (
     md: 800px,
     lg: 1200px
 ) !default;
+
+/// Theme variations for the window.
+$kendo-window-brand-colors: (
+    primary: primary
+ ) !default;
+
+// Matrix with window theme colors in the order: bg, color, border
+$_tc-window-matrix: (
+    (normal: (100, $kendo-color-white, 100)),
+) !default;
+
+$_tc-window-dark-matrix: (
+    (normal: (160, $kendo-color-white, 160)),
+) !default;
+
+$_tc-window-light-matrix: (
+    (normal: (50, 160, 50)),
+) !default;
+
+/// Theme colors map for the window variations.
+$kendo-window-theme-colors: () !default;
+
+@each $ui-states in $_tc-window-matrix {
+    @each $brand-color, $palette in $kendo-window-brand-colors {
+        $kendo-window-theme-colors: map.deep-merge(
+            $kendo-window-theme-colors,
+            generate-theme-variation( $brand-color, $palette, $ui-states )
+        );
+    };
+}
+
+@each $ui-states in $_tc-window-dark-matrix {
+    $kendo-window-theme-colors: map.deep-merge(
+        $kendo-window-theme-colors,
+        generate-theme-variation( dark, neutral, $ui-states )
+    );
+}
+
+@each $ui-states in $_tc-window-light-matrix {
+    $kendo-window-theme-colors: map.deep-merge(
+        $kendo-window-theme-colors,
+        generate-theme-variation( light, neutral, $ui-states )
+    );
+}

package/scss/window/index.scss

@@ -11,9 +11,9 @@ $_kendo-module-meta: (
 );
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/wizard/_layout.scss

@@ -1,5 +1,5 @@
-@use "_variables.scss" as *;
-@use "../core/color-system" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-wizard--layout() {
 

package/scss/wizard/_theme.scss

@@ -1,6 +1,5 @@
-@use "../core/color-system" as *;
-@use "_variables.scss" as *;
-@use "../core/mixins" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-wizard--theme() {
 
@@ -14,7 +13,7 @@
 
         &:focus,
         &.k-focus {
-            outline-color: var( --kendo-wizard-step-border-focused, #{$kendo-wizard-step-border-focused} );
+            outline-color: var( --kendo-wizard-step-focus-border, #{$kendo-wizard-step-focus-border} );
         }
     }
 

package/scss/wizard/_variables.scss

@@ -1,15 +1,15 @@
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
 
 /// Border width of the wizard.
 /// @group wizard
 $kendo-wizard-border-width: 0px !default;
 /// Horizontal padding of the wizard.
 /// @group wizard
-$kendo-wizard-padding-x: map-get( $kendo-spacing, 6 ) !default;
+$kendo-wizard-padding-x: map.get( $kendo-spacing, 6 ) !default;
 /// Vertical padding of the wizard.
 /// @group wizard
-$kendo-wizard-padding-y: map-get( $kendo-spacing, 6 ) !default;
+$kendo-wizard-padding-y: map.get( $kendo-spacing, 6 ) !default;
 /// Font size of the wizard.
 /// @group wizard
 $kendo-wizard-font-size: var( --kendo-font-size, inherit ) !default;
@@ -23,10 +23,10 @@ $kendo-wizard-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// Horizontal padding of the wizard steps.
 /// @group wizard
-$kendo-wizard-steps-padding-x: map-get( $kendo-spacing, 3 ) !default;
+$kendo-wizard-steps-padding-x: map.get( $kendo-spacing, 3 ) !default;
 /// Vertical padding of the wizard steps.
 /// @group wizard
-$kendo-wizard-steps-padding-y: map-get( $kendo-spacing, 3 ) !default;
+$kendo-wizard-steps-padding-y: map.get( $kendo-spacing, 3 ) !default;
 
 /// Horizontal padding of the wizard content.
 /// @group wizard
@@ -43,11 +43,11 @@ $kendo-wizard-content-bg: var( --kendo-component-bg, initial ) !default;
 
 /// Horizontal margin of the wizard buttons container.
 /// @group wizard
-$kendo-wizard-buttons-margin-x: map-get( $kendo-spacing, 7 ) !default;
+$kendo-wizard-buttons-margin-x: map.get( $kendo-spacing, 7 ) !default;
 /// Vertical margin of the wizard buttons container.
 /// @group wizard
-$kendo-wizard-buttons-margin-y: map-get( $kendo-spacing, 6 ) !default;
+$kendo-wizard-buttons-margin-y: map.get( $kendo-spacing, 6 ) !default;
 
 /// Outline of the focused wizard step.
 /// @group wizard
-$kendo-wizard-step-border-focused: get-theme-color-var( neutral-130 ) !default;
+$kendo-wizard-step-focus-border: get-theme-color-var( neutral-130 ) !default;

package/scss/wizard/index.scss

@@ -10,9 +10,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;