@progress/kendo-theme-fluent 5.7.0 → 5.8.1-dev.1

package/scss/timeline/_variables.scss

@@ -0,0 +1,197 @@
+@use "sass:math";
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+@use "../card/_variables.scss" as *;
+
+// Timeline
+
+/// The horizontal spacing of the timeline.
+/// @group timeline
+$kendo-timeline-spacing-x: map-get( $kendo-spacing, 10 ) !default;
+/// The vertical spacing of the timeline.
+/// @group timeline
+$kendo-timeline-spacing-y: map-get( $kendo-spacing, 10 ) !default;
+/// The padding between the items in the timeline.
+/// @group timeline
+$kendo-timeline-items-padding: map-get( $kendo-spacing, 4 ) !default;
+
+/// The font family of the timeline.
+/// @group timeline
+$kendo-timeline-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the timeline.
+/// @group timeline
+$kendo-timeline-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the timeline.
+/// @group timeline
+$kendo-timeline-line-height: var( --kendo-line-height, normal ) !default;
+
+/// The horizontal mobile spacing of the timeline.
+/// @group timeline
+$kendo-timeline-mobile-spacing-x: map-get( $kendo-spacing, 4 ) !default;
+/// The vertical mobile spacing of the timeline.
+/// @group timeline
+$kendo-timeline-mobile-spacing-y: map-get( $kendo-spacing, 4 ) !default;
+
+/// The track arrow width of the timeline.
+/// @group timeline
+$kendo-timeline-track-arrow-width: ( map-get( $kendo-spacing, 7 ) + map-get( $kendo-spacing, thin ) ) !default;
+/// The track arrow height of the timeline.
+/// @group timeline
+$kendo-timeline-track-arrow-height: ( map-get( $kendo-spacing, 7 ) + map-get( $kendo-spacing, thin ) ) !default;
+
+/// The size of the track in the timeline.
+/// @group timeline
+$kendo-timeline-track-size: ( map-get( $kendo-spacing, 2 ) - map-get( $kendo-spacing, thin ) ) !default;
+/// The bottom padding of the wrapper of the track in the timeline.
+/// @group timeline
+$kendo-timeline-track-wrap-padding-bottom: math.div( $kendo-timeline-track-size, 2 ) !default;
+/// The border width of the track in the timeline.
+/// @group timeline
+$kendo-timeline-track-border-width: map-get( $kendo-spacing, hair ) !default;
+/// The bottom margin of the track in the timeline.
+/// @group timeline
+$kendo-timeline-track-margin-bottom: map-get( $kendo-spacing, 4 ) !default;
+/// The bottom of the track in the timeline.
+/// @group timeline
+$kendo-timeline-track-bottom-calc: calc( ( #{ $kendo-timeline-track-arrow-height } / 2 ) + #{ $kendo-timeline-track-wrap-padding-bottom } ) !default;
+/// The left of the track in the timeline.
+/// @group timeline
+$kendo-timeline-track-start-calc: calc( #{ $kendo-timeline-track-arrow-width } - 2 * #{ $kendo-timeline-track-border-width } ) !default;
+/// The right of the track in the timeline.
+/// @group timeline
+$kendo-timeline-track-end-calc: calc( #{ $kendo-timeline-track-arrow-width } - 2 * #{ $kendo-timeline-track-border-width } ) !default;
+/// The background of the track in the timeline.
+/// @group timeline
+$kendo-timeline-track-bg: get-theme-color-var( neutral-10 ) !default;
+/// The border color of the track in the timeline.
+/// @group timeline
+$kendo-timeline-track-border-color: get-theme-color-var( neutral-30 ) !default;
+
+/// The inset block end of the arrow in the timeline.
+/// @group timeline
+$kendo-timeline-arrow-inset-block-end: calc( #{ $kendo-timeline-track-size } + #{ $kendo-timeline-track-wrap-padding-bottom } + #{ $kendo-timeline-track-border-width } );
+/// The disabled background of the arrow in the timeline.
+/// @group timeline
+$kendo-timeline-track-arrow-disabled-bg: var( --kendo-disabled-bg, initial ) !default;
+/// The disabled text of the arrow in the timeline.
+/// @group timeline
+$kendo-timeline-track-arrow-disabled-text: var( --kendo-disabled-text, initial ) !default;
+/// The disabled border color of the arrow in the timeline.
+/// @group timeline
+$kendo-timeline-track-arrow-disabled-border: var( --kendo-disabled-border, initial) !default;
+
+/// The offset of the track event in the timeline.
+/// @group timeline
+$kendo-timeline-track-event-offset: ( map-get( $kendo-spacing, 10 ) - map-get( $kendo-spacing, 2 ) ) !default;
+
+/// The horizontal padding of the flag in the timeline.
+/// @group timeline
+$kendo-timeline-flag-padding-x: map-get( $kendo-spacing, 2 ) !default;
+/// The vertical padding of the flag in the timeline.
+/// @group timeline
+$kendo-timeline-flag-padding-y: map-get( $kendo-spacing, 2 ) !default;
+/// The border radius of the flag in the timeline.
+/// @group timeline
+$kendo-timeline-flag-border-radius: map-get( $kendo-spacing, thin ) !default;
+/// The line height of the flag in the timeline.
+/// @group timeline
+$kendo-timeline-flag-line-height: var( --kendo-line-height, normal ) !default;
+/// The box shadow of the flag in the timeline.
+/// @group timeline
+$kendo-timeline-flag-box-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
+/// The min widht of the flag in the timeline.
+/// @group timeline
+$kendo-timeline-flag-min-width: map-get( $kendo-spacing, 20 ) !default;
+/// The max width of the flag in the timeline.
+/// @group timeline
+$kendo-timeline-flag-max-width: calc( #{ $kendo-timeline-flag-min-width } + 2 * #{ $kendo-timeline-spacing-x } ) !default;
+/// The max width of the mobile flag in the timeline.
+/// @group timeline
+$kendo-timeline-mobile-flag-max-width: calc( #{ $kendo-timeline-flag-min-width } + 2 * #{ $kendo-timeline-mobile-spacing-x } ) !default;
+/// The min width of the horizontal flag in the timeline.
+/// @group timeline
+$kendo-timeline-horizontal-flag-min-width: map-get( $kendo-spacing, 15 ) !default;
+/// The background of the flag in the timeline.
+/// @group timeline
+$kendo-timeline-flag-bg: get-theme-color-var( primary-100 ) !default;
+/// The text of the flag in the timeline.
+/// @group timeline
+$kendo-timeline-flag-text: var( --kendo-component-bg, initial ) !default;
+/// The width of the flag callout in the timeline.
+/// @group timeline
+$kendo-timeline-flag-callout-width: ( map-get( $kendo-spacing, 2 ) + map-get( $kendo-spacing, thin ) ) !default;
+/// The height of the flag callout in the timeline.
+/// @group timeline
+$kendo-timeline-flag-callout-height: ( map-get( $kendo-spacing, 2 ) + map-get( $kendo-spacing, thin ) ) !default;
+/// The offset bottom of the flag in the timeline.
+/// @group timeline
+$kendo-timeline-flag-offset-bottom: map-get( $kendo-spacing, 1 ) !default;
+/// The bottom margin of the flag in the timeline.
+/// @group timeline
+$kendo-timeline-flag-margin-bottom-calc: calc( #{ $kendo-timeline-track-size } + 2 * #{ $kendo-timeline-track-border-width } + #{ $kendo-timeline-flag-offset-bottom } + #{ $kendo-timeline-flag-callout-height } ) !default;
+
+/// The background of the card header in the timeline.
+/// @group timeline
+$kendo-timeline-card-header-bg: var( --kendo-component-bg, initial ) !default;
+/// The text of the card header in the timeline.
+/// @group timeline
+$kendo-timeline-card-header-text: get-theme-color-var( neutral-160 ) !default;
+/// The border of the card body scroll in the timeline.
+/// @group timeline
+$kendo-timeline-card-body-scroll-border: get-theme-color-var( neutral-30 ) !default;
+/// The background of the card body scroll of the timeline.
+/// @group timeline
+$kendo-timeline-card-body-scroll-bg: var( --kendo-component-bg, initial ) !default;
+/// The hover of the card scroll thumb in the timeline.
+/// @group timeline
+$kendo-timeline-card-scroll-thumb-hover: var( --kendo-hover-border, initial ) !default;
+
+/// The text of the date body in the timeline.
+/// @group timeline
+$kendo-timeline-date-body-text: var( --kendo-body-text, initial ) !default;
+/// The width of the date in the timeline.
+/// @group timeline
+$kendo-timeline-date-width: ( map-get( $kendo-spacing, 12 ) + map-get( $kendo-spacing, thin ) ) !default;
+/// The bottom margin of the date in the timeline.
+/// @group timeline
+$kendo-timeline-date-margin-bottom: map-get( $kendo-spacing, 2 ) !default;
+
+/// The padding of the vertical timeline.
+/// @group timeline
+$kendo-timeline-vertical-padding-calc: calc( #{ $kendo-timeline-spacing-x } + ( #{ $kendo-timeline-flag-min-width } - #{ $kendo-timeline-track-size } ) / 2 ) !default;
+/// The padding of the vertical dates timeline.
+/// @group timeline
+$kendo-timeline-vertical-padding-with-dates-calc: calc( #{ $kendo-timeline-vertical-padding-calc } + #{ $kendo-timeline-date-width } ) !default;
+/// The border radius of the vertical timeline.
+/// @group timeline
+$kendo-timeline-vertical-border-radius: var( --kendo-border-radius-lg, 0 ) !default;
+/// The padding of the vertical mobile timeline.
+/// @group timeline
+$kendo-timeline-mobile-vertical-padding-calc: calc( #{ $kendo-timeline-mobile-spacing-x } + ( #{ $kendo-timeline-flag-min-width } - #{ $kendo-timeline-track-size } ) / 2 ) !default;
+/// The padding of the vertical mobile dates in the timeline.
+/// @group timeline
+$kendo-timeline-mobile-vertical-padding-with-dates-calc: calc( #{ $kendo-timeline-mobile-vertical-padding-calc } + #{ $kendo-timeline-date-width } ) !default;
+
+/// The width of the circle in the timeline
+/// @group timeline
+$kendo-timeline-circle-width: map-get( $kendo-spacing, 4 ) !default;
+/// The height of the circle in the timeline.
+/// @group timeline
+$kendo-timeline-circle-height: map-get( $kendo-spacing, 4 ) !default;
+/// The background of the circle in the timeline.
+/// @group timeline
+$kendo-timeline-circle-bg: get-theme-color-var( primary-100 ) !default;
+
+/// The width of the events in the timeline.
+/// @group timeline
+$kendo-timeline-event-width: 400px !default;
+/// The height of the events in the timeline.
+/// @group timeline
+$kendo-timeline-event-height: 600px !default;
+/// The min height of the events in the timeline.
+/// @group timeline
+$kendo-timeline-event-min-height-calc: calc( 2 * ( #{ $kendo-timeline-track-event-offset } - #{ $kendo-card-border-width } ) ) !default;
+
+/// The spacing of the icons in the timeline.
+/// @group timeline
+$kendo-timeline-icon-spacing: var( --kendo-icon-spacing, .5rem ) !default;

package/scss/timeline/index.scss

@@ -0,0 +1,27 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "timeline",
+    dependencies: (
+        'button',
+        'icon',
+        'card'
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "timeline" ) {
+        @include kendo-timeline--layout();
+        @include kendo-timeline--theme();
+    }
+}

package/scss/timeselector/_layout.scss

@@ -74,7 +74,7 @@
         border-style: solid;
         box-sizing: border-box;
         position: absolute;
-        top: calc( 50% + var( --kendo-time-list-title-height, $kendo-time-list-title-height ) / 2);
+        top: calc( 50% + var( --kendo-time-list-title-height, #{$kendo-time-list-title-height} ) / 2);
         left: 0;
         right: 0;
         transform: translateY(-50%);
@@ -114,14 +114,14 @@
                 width: 100%;
                 left: 0;
                 pointer-events: none;
-                height: calc( 50% - calc( var( --kendo-time-list-highlight-height, $kendo-time-list-highlight-height ) / 2) );
+                height: calc( 50% - ( var( --kendo-time-list-highlight-height, #{$kendo-time-list-highlight-height} ) / 2) );
                 box-sizing: border-box;
                 border-width: 0;
                 border-style: solid;
             }
 
             &::before {
-                top: calc( var( --kendo-time-list-title-spacing, $kendo-time-list-title-spacing ) + var( --kendo-time-list-title-height, $kendo-time-list-title-height ) );
+                top: calc( var( --kendo-time-list-title-spacing, #{$kendo-time-list-title-spacing} ) + var( --kendo-time-list-title-height, #{$kendo-time-list-title-height} ) );
             }
 
             &::after {
@@ -202,7 +202,7 @@
         align-items: center;
         position: relative;
         z-index: 11;
-        top: calc( var( --kendo-time-list-title-height, $kendo-time-list-title-height ) / 2);
+        top: calc( var( --kendo-time-list-title-height, #{$kendo-time-list-title-height} ) / 2);
     }
 
 

package/scss/timeselector/_variables.scss

@@ -51,7 +51,7 @@ $kendo-time-list-title-font-size: var( --kendo-font-size-xs, inherit ) !default;
 /// Line height of the time-selector titles.
 /// @group time-selector
 $kendo-time-list-title-line-height: var( --kendo-line-height-lg, inherit ) !default;
-$kendo-time-list-title-height: calc( $kendo-time-list-title-font-size * $kendo-time-list-title-line-height ) !default;
+$kendo-time-list-title-height: calc( #{$kendo-time-list-title-font-size} * #{$kendo-time-list-title-line-height} ) !default;
 /// Text color of the time-selector titles.
 /// @group time-selector
 $kendo-time-list-title-text: var( --kendo-subtle-text, inherit ) !default;

package/scss/tooltip/_layout.scss

@@ -62,8 +62,8 @@
 
     // Callout
     .k-callout {
-        width: calc( #{$kendo-tooltip-callout-size} * 2 );
-        height: calc( #{$kendo-tooltip-callout-size} * 2 );
+        width: ( $kendo-tooltip-callout-size * 2 );
+        height: ( $kendo-tooltip-callout-size * 2 );
         border-width: $kendo-tooltip-callout-size;
         border-style: solid;
         border-color: transparent;
@@ -79,7 +79,7 @@
     .k-callout-n {
         margin-inline-start: -$kendo-tooltip-callout-size;
         border-bottom-color: currentColor;
-        top: calc( -#{$kendo-tooltip-callout-size} * 2 );
+        top: ( -1 * $kendo-tooltip-callout-size * 2 );
         left: 50%;
         pointer-events: none;
     }
@@ -87,13 +87,13 @@
         margin-block-start: -$kendo-tooltip-callout-size;
         border-left-color: currentColor;
         top: 50%;
-        right: calc( -#{$kendo-tooltip-callout-size} * 2 );
+        right: ( -1 * $kendo-tooltip-callout-size * 2 );
         pointer-events: none;
     }
     .k-callout-s {
         margin-inline-start: -$kendo-tooltip-callout-size;
         border-top-color: currentColor;
-        bottom: calc( -#{$kendo-tooltip-callout-size} * 2 );
+        bottom: ( -1 * $kendo-tooltip-callout-size * 2 );
         left: 50%;
         pointer-events: none;
     }
@@ -101,7 +101,7 @@
         margin-block-start: -$kendo-tooltip-callout-size;
         border-right-color: currentColor;
         top: 50%;
-        left: calc( -#{$kendo-tooltip-callout-size} * 2 );
+        left: ( -1 * $kendo-tooltip-callout-size * 2 );
         pointer-events: none;
     }
 

package/scss/tooltip/_variables.scss

@@ -94,5 +94,3 @@ $kendo-tooltip-theme-colors: ();
         );
     };
 }
-
-

package/scss/treeview/_variables.scss

@@ -92,7 +92,7 @@ $kendo-treeview-item-border: inherit !default;
 $kendo-treeview-item-hover-bg: var( --kendo-hover-bg, inherit ) !default;
 /// Text color of hovered treeview items.
 /// @group treeview
-$kendo-treeview-item-hover-text: var(--kendo-hover-text, inherit ) !default;
+$kendo-treeview-item-hover-text: var( --kendo-hover-text, inherit ) !default;
 /// Border color of hovered treeview items.
 /// @group treeview
 $kendo-treeview-item-hover-border: inherit !default;
@@ -135,7 +135,7 @@ $kendo-treeview-item-disabled-border: inherit !default;
 $kendo-treeview-loadmore-bg: transparent !default;
 /// Text color of load more.
 /// @group treeview
-$kendo-treeview-loadmore-text: var(--kendo-link-text, initial ) !default;
+$kendo-treeview-loadmore-text: var( --kendo-link-text, initial ) !default;
 /// Border color of load more.
 /// @group treeview
 $kendo-treeview-loadmore-border: inherit !default;
@@ -145,7 +145,7 @@ $kendo-treeview-loadmore-border: inherit !default;
 $kendo-treeview-loadmore-hover-bg: transparent !default;
 /// Text color of a hovered load more.
 /// @group treeview
-$kendo-treeview-loadmore-hover-text: var(--kendo-link-hover-text, initial ) !default;
+$kendo-treeview-loadmore-hover-text: var( --kendo-link-hover-text, initial ) !default;
 /// Border color of a hovered load more.
 /// @group treeview
 $kendo-treeview-loadmore-hover-border: inherit !default;
@@ -155,7 +155,7 @@ $kendo-treeview-loadmore-hover-border: inherit !default;
 $kendo-treeview-loadmore-focus-bg: transparent !default;
 /// Text color of a focused load more.
 /// @group treeview
-$kendo-treeview-loadmore-focus-text: var(--kendo-link-hover-text, initial ) !default;
+$kendo-treeview-loadmore-focus-text: var( --kendo-link-hover-text, initial ) !default;
 /// Border color of a focused load more.
 /// @group treeview
 $kendo-treeview-loadmore-focus-border: inherit !default;

package/scss/typography/_layout.scss

@@ -17,7 +17,7 @@
 
     .k-body {
         p {
-            margin: var(--kendo-paragraph-margin, #{$kendo-paragraph-margin});
+            margin: var( --kendo-paragraph-margin, #{$kendo-paragraph-margin});
         }
     }
 
@@ -45,32 +45,32 @@
     // Paragraph
     .k-paragraph {
         @include typography(
-            var(--kendo-paragraph-font-size, #{$kendo-paragraph-font-size}),
-            var(--kendo-paragraph-font-family, #{$kendo-paragraph-font-family}),
-            var(--kendo-paragraph-line-height, #{$kendo-paragraph-line-height}),
-            var(--kendo-paragraph-font-weight, #{$kendo-paragraph-font-weight}),
-            var(--kendo-paragraph-letter-spacing, #{$kendo-paragraph-letter-spacing})
+            var( --kendo-paragraph-font-size, #{$kendo-paragraph-font-size}),
+            var( --kendo-paragraph-font-family, #{$kendo-paragraph-font-family}),
+            var( --kendo-paragraph-line-height, #{$kendo-paragraph-line-height}),
+            var( --kendo-paragraph-font-weight, #{$kendo-paragraph-font-weight}),
+            var( --kendo-paragraph-letter-spacing, #{$kendo-paragraph-letter-spacing})
         );
-        margin: var(--kendo-paragraph-margin, #{$kendo-paragraph-margin});
+        margin: var( --kendo-paragraph-margin, #{$kendo-paragraph-margin});
     }
 
     // Code snippet
     .k-pre,
     .k-code {
         @include typography(
-            var(--kendo-code-font-size, #{$kendo-code-font-size}),
-            var(--kendo-code-font-family, #{$kendo-code-font-family}),
-            var(--kendo-code-line-height, #{$kendo-code-line-height}),
-            var(--kendo-code-font-weight, #{$kendo-code-font-weight}),
-            var(--kendo-code-letter-spacing, #{$kendo-code-letter-spacing})
+            var( --kendo-code-font-size, #{$kendo-code-font-size}),
+            var( --kendo-code-font-family, #{$kendo-code-font-family}),
+            var( --kendo-code-line-height, #{$kendo-code-line-height}),
+            var( --kendo-code-font-weight, #{$kendo-code-font-weight}),
+            var( --kendo-code-letter-spacing, #{$kendo-code-letter-spacing})
         );
         border-style: solid;
-        border-width: var(--kendo-code-border-width, #{$kendo-code-border-width});
+        border-width: var( --kendo-code-border-width, #{$kendo-code-border-width});
     }
 
     .k-pre {
-        padding-inline: var(--kendo-pre-padding-x, #{$kendo-pre-padding-x});
-        padding-block: var(--kendo-pre-padding-y, #{$kendo-pre-padding-y});
+        padding-inline: var( --kendo-pre-padding-x, #{$kendo-pre-padding-x});
+        padding-block: var( --kendo-pre-padding-y, #{$kendo-pre-padding-y});
         overflow: auto;
     }
 
@@ -84,8 +84,8 @@
     }
 
     .k-code {
-        padding-inline: var(--kendo-code-padding-x, #{$kendo-code-padding-x});
-        padding-block: var(--kendo-code-padding-y, #{$kendo-code-padding-y});
+        padding-inline: var( --kendo-code-padding-x, #{$kendo-code-padding-x});
+        padding-block: var( --kendo-code-padding-y, #{$kendo-code-padding-y});
     }
 
     // Display

package/scss/typography/_variables.scss

@@ -17,70 +17,70 @@ $kendo-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto M
 $kendo-headings: (
     h1: (
         font-size: 42px,
-        font-family: var(--kendo-font-family, inherit ),
-        line-height: var(--kendo-line-height, normal ),
-        font-weight: var(--kendo-font-weight-bold, bold),
-        letter-spacing: var(--kendo-letter-spacing, normal),
-        margin: 0 0 var(--kendo-font-size, inherit)
+        font-family: var( --kendo-font-family, inherit ),
+        line-height: var( --kendo-line-height, normal ),
+        font-weight: var( --kendo-font-weight-bold, bold),
+        letter-spacing: var( --kendo-letter-spacing, normal),
+        margin: 0 0 var( --kendo-font-size, inherit)
     ),
     h2: (
         font-size: 32px,
-        font-family: var(--kendo-font-family, inherit ),
-        line-height: var(--kendo-line-height, normal ),
-        font-weight: var(--kendo-font-weight-bold, bold),
-        letter-spacing: var(--kendo-letter-spacing, normal),
-        margin: 0 0 var(--kendo-font-size, inherit)
+        font-family: var( --kendo-font-family, inherit ),
+        line-height: var( --kendo-line-height, normal ),
+        font-weight: var( --kendo-font-weight-bold, bold),
+        letter-spacing: var( --kendo-letter-spacing, normal),
+        margin: 0 0 var( --kendo-font-size, inherit)
     ),
     h3: (
         font-size: 28px,
-        font-family: var(--kendo-font-family, inherit ),
-        line-height: var(--kendo-line-height, normal ),
-        font-weight: var(--kendo-font-weight-bold, bold),
-        letter-spacing: var(--kendo-letter-spacing, normal),
-        margin: 0 0 var(--kendo-font-size, inherit)
+        font-family: var( --kendo-font-family, inherit ),
+        line-height: var( --kendo-line-height, normal ),
+        font-weight: var( --kendo-font-weight-bold, bold),
+        letter-spacing: var( --kendo-letter-spacing, normal),
+        margin: 0 0 var( --kendo-font-size, inherit)
     ),
     h4: (
         font-size: 20px,
-        font-family: var(--kendo-font-family, inherit ),
-        line-height: var(--kendo-line-height, normal ),
-        font-weight: var(--kendo-font-weight-bold, bold),
-        letter-spacing: var(--kendo-letter-spacing, normal),
-        margin: 0 0 var(--kendo-font-size, inherit)
+        font-family: var( --kendo-font-family, inherit ),
+        line-height: var( --kendo-line-height, normal ),
+        font-weight: var( --kendo-font-weight-bold, bold),
+        letter-spacing: var( --kendo-letter-spacing, normal),
+        margin: 0 0 var( --kendo-font-size, inherit)
     ),
     h5: (
         font-size: 18px,
-        font-family: var(--kendo-font-family, inherit ),
-        line-height: var(--kendo-line-height, normal ),
-        font-weight: var(--kendo-font-weight-bold, bold),
-        letter-spacing: var(--kendo-letter-spacing, normal),
-        margin: 0 0 var(--kendo-font-size, inherit)
+        font-family: var( --kendo-font-family, inherit ),
+        line-height: var( --kendo-line-height, normal ),
+        font-weight: var( --kendo-font-weight-bold, bold),
+        letter-spacing: var( --kendo-letter-spacing, normal),
+        margin: 0 0 var( --kendo-font-size, inherit)
     ),
     h6: (
         font-size: 16px,
-        font-family: var(--kendo-font-family, inherit ),
-        line-height: var(--kendo-line-height, normal ),
-        font-weight: var(--kendo-font-weight-bold, bold),
-        letter-spacing: var(--kendo-letter-spacing, normal),
-        margin: 0 0 var(--kendo-font-size, inherit)
+        font-family: var( --kendo-font-family, inherit ),
+        line-height: var( --kendo-line-height, normal ),
+        font-weight: var( --kendo-font-weight-bold, bold),
+        letter-spacing: var( --kendo-letter-spacing, normal),
+        margin: 0 0 var( --kendo-font-size, inherit)
     )
 ) !default;
 
 
 // Paragraph
-$kendo-paragraph-margin: 0 0 var(--kendo-font-size, inherit) !default;
-$kendo-paragraph-font-size: var(--kendo-font-size, inherit) !default;
-$kendo-paragraph-font-family: var(--kendo-font-family, inherit ) !default;
-$kendo-paragraph-line-height: var(--kendo-line-height, normal) !default;
-$kendo-paragraph-font-weight: var(--kendo-font-weight, normal) !default;
-$kendo-paragraph-letter-spacing: var(--kendo-letter-spacing, normal) !default;
+$kendo-paragraph-margin: 0 0 var( --kendo-font-size, inherit) !default;
+$kendo-paragraph-font-size: var( --kendo-font-size, inherit) !default;
+$kendo-paragraph-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-paragraph-line-height: var( --kendo-line-height, normal) !default;
+$kendo-paragraph-font-weight: var( --kendo-font-weight, normal) !default;
+$kendo-paragraph-letter-spacing: var( --kendo-letter-spacing, normal) !default;
 
 
 // Code
-$kendo-code-font-size: var(--kendo-font-size, inherit) !default;
+$kendo-code-font-size: var( --kendo-font-size, inherit) !default;
 $kendo-code-font-family: $kendo-font-family-monospace !default;
-$kendo-code-line-height: var(--kendo-line-height, normal) !default;
-$kendo-code-font-weight: var(--kendo-font-weight, normal) !default;
-$kendo-code-letter-spacing: var(--kendo-letter-spacing, normal) !default;
+$kendo-code-line-height: var( --kendo-line-height, normal) !default;
+$kendo-code-font-weight: var( --kendo-font-weight, normal) !default;
+$kendo-code-letter-spacing: var( --kendo-letter-spacing, normal) !default;
 
 $kendo-code-padding-x: map-get( $kendo-spacing, 1 ) !default;
 $kendo-code-padding-y: map-get( $kendo-spacing, 0 ) !default;
@@ -88,39 +88,39 @@ $kendo-pre-padding-x: map-get( $kendo-spacing, 6 ) !default;
 $kendo-pre-padding-y: map-get( $kendo-spacing, 4 ) !default;
 $kendo-code-border-width: 1px !default;
 
-$kendo-code-bg: var(--kendo-component-bg, initial) !default;
-$kendo-code-text: var(--kendo-component-text, initial) !default;
-$kendo-code-border: var(--kendo-component-border, initial) !default;
+$kendo-code-bg: var( --kendo-component-bg, initial) !default;
+$kendo-code-text: var( --kendo-component-text, initial) !default;
+$kendo-code-border: var( --kendo-component-border, initial) !default;
 
 
 // Display
 $kendo-display: (
     1: (
-        font-size: calc( var(--kendo-font-size, inherit) * 6 ),
-        font-family: var(--kendo-font-family, inherit ),
-        line-height: var(--kendo-line-height, normal ),
-        font-weight: var(--kendo-font-weight-bold, bold),
-        letter-spacing: var(--kendo-letter-spacing, normal)
+        font-size: calc( var( --kendo-font-size, inherit) * 6 ),
+        font-family: var( --kendo-font-family, inherit ),
+        line-height: var( --kendo-line-height, normal ),
+        font-weight: var( --kendo-font-weight-bold, bold),
+        letter-spacing: var( --kendo-letter-spacing, normal)
     ),
     2: (
-        font-size: calc(var(--kendo-font-size, inherit) * 5 ),
-        font-family: var(--kendo-font-family, inherit ),
-        line-height: var(--kendo-line-height, normal ),
-        font-weight: var(--kendo-font-weight-bold, bold),
-        letter-spacing: var(--kendo-letter-spacing, normal)
+        font-size: calc( var( --kendo-font-size, inherit) * 5 ),
+        font-family: var( --kendo-font-family, inherit ),
+        line-height: var( --kendo-line-height, normal ),
+        font-weight: var( --kendo-font-weight-bold, bold),
+        letter-spacing: var( --kendo-letter-spacing, normal)
     ),
     3: (
-        font-size: calc( var(--kendo-font-size, inherit) * 4 ),
-        font-family: var(--kendo-font-family, inherit ),
-        line-height: var(--kendo-line-height, normal ),
-        font-weight: var(--kendo-font-weight-bold, bold),
-        letter-spacing: var(--kendo-letter-spacing, normal)
+        font-size: calc( var( --kendo-font-size, inherit) * 4 ),
+        font-family: var( --kendo-font-family, inherit ),
+        line-height: var( --kendo-line-height, normal ),
+        font-weight: var( --kendo-font-weight-bold, bold),
+        letter-spacing: var( --kendo-letter-spacing, normal)
     ),
     4: (
-        font-size: calc(var(--kendo-font-size, inherit) * 3 ),
-        font-family: var(--kendo-font-family, inherit ),
-        line-height: var(--kendo-line-height, normal ),
-        font-weight: var(--kendo-font-weight-bold, bold),
-        letter-spacing: var(--kendo-letter-spacing, normal)
+        font-size: calc( var( --kendo-font-size, inherit) * 3 ),
+        font-family: var( --kendo-font-family, inherit ),
+        line-height: var( --kendo-line-height, normal ),
+        font-weight: var( --kendo-font-weight-bold, bold),
+        letter-spacing: var( --kendo-letter-spacing, normal)
     )
 ) !default;

package/scss/upload/_layout.scss

@@ -223,7 +223,7 @@
             position: absolute;
             bottom: calc( var( --kendo-upload-item-padding-y, #{$kendo-upload-item-padding-y} ) / 2 );
             // successed
-            width: calc(100% - var( --kendo-upload-item-padding-x, #{$kendo-upload-item-padding-x} ) * 2);
+            width: calc( 100% - var( --kendo-upload-item-padding-x, #{$kendo-upload-item-padding-x} ) * 2);
 
             .k-progress {
                 position: absolute;

package/scss/window/_layout.scss

@@ -69,7 +69,7 @@
     // Actions
     .k-window-actions {
         margin: -5em 0;
-        margin-inline-end: calc( #{$kendo-window-titlebar-padding-y} - #{$kendo-window-titlebar-padding-x} );
+        margin-inline-end: ( $kendo-window-titlebar-padding-y - $kendo-window-titlebar-padding-x );
         line-height: 1;
         display: flex;
         gap: var( --kendo-window-actions-gap, #{$kendo-window-actions-gap} );

package/scss/wizard/_layout.scss

@@ -46,7 +46,7 @@
 
         .k-wizard-content {
             padding-inline: var( --kendo-wizard-content-padding-x, #{$kendo-wizard-content-padding-x} );
-            padding-block: var( --kendo-wizard-content-padding-y, #{$kendo-wizard-content-padding-x} );
+            padding-block: var( --kendo-wizard-content-padding-y, #{$kendo-wizard-content-padding-y} );
             box-sizing: border-box;
             overflow-y: auto;
         }

package/scss/wizard/_variables.scss

@@ -30,10 +30,10 @@ $kendo-wizard-steps-padding-y: map-get( $kendo-spacing, 3 ) !default;
 
 /// Horizontal padding of the wizard content.
 /// @group wizard
-$kendo-wizard-content-padding-x: map-get( $kendo-spacing, 3 ) !default;
+$kendo-wizard-content-padding-x: 0px !default;
 /// Vertical padding of the wizard content.
 /// @group wizard
-$kendo-wizard-content-padding-y: map-get( $kendo-spacing, 3 ) !default;
+$kendo-wizard-content-padding-y: 0px !default;
 /// Text color of the wizard content.
 /// @group wizard
 $kendo-wizard-content-text: var( --kendo-component-text, initial ) !default;
@@ -51,4 +51,3 @@ $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;
-