@progress/kendo-theme-default 8.0.0-dev.0 → 8.0.0-dev.2

package/scss/typography/_layout.scss

@@ -17,11 +17,11 @@
     .k-body,
     .k-typography {
         @include typography(
-            $kendo-font-size-md,
-            $kendo-font-family,
-            $kendo-line-height-md,
-            $kendo-font-weight-normal,
-            $kendo-letter-spacing
+            var( --kendo-font-size, inherit ),
+            var( --kendo-font-family, inherit ),
+            var( --kendo-line-height, normal ),
+            var( --kendo-font-weight-normal, normal ),
+            var( --kendo-letter-spacing, normal )
         );
         margin: 0;
 
@@ -31,88 +31,47 @@
     }
 
     // Headings
-    .k-h1 {
-        @include typography(
-            $kendo-h1-font-size,
-            $kendo-h1-font-family,
-            $kendo-h1-line-height,
-            $kendo-h1-font-weight,
-            $kendo-h1-letter-spacing
-        );
-        margin: $kendo-h1-margin;
-    }
-    .k-h2 {
-        @include typography(
-            $kendo-h2-font-size,
-            $kendo-h2-font-family,
-            $kendo-h2-line-height,
-            $kendo-h2-font-weight,
-            $kendo-h2-letter-spacing
-        );
-        margin: $kendo-h2-margin;
-    }
-    .k-h3 {
-        @include typography(
-            $kendo-h3-font-size,
-            $kendo-h3-font-family,
-            $kendo-h3-line-height,
-            $kendo-h3-font-weight,
-            $kendo-h3-letter-spacing
-        );
-        margin: $kendo-h3-margin;
-    }
-    .k-h4 {
-        @include typography(
-            $kendo-h4-font-size,
-            $kendo-h4-font-family,
-            $kendo-h4-line-height,
-            $kendo-h4-font-weight,
-            $kendo-h4-letter-spacing
-        );
-        margin: $kendo-h4-margin;
-    }
-    .k-h5 {
-        @include typography(
-            $kendo-h5-font-size,
-            $kendo-h5-font-family,
-            $kendo-h5-line-height,
-            $kendo-h5-font-weight,
-            $kendo-h5-letter-spacing
-        );
-        margin: $kendo-h5-margin;
-    }
-    .k-h6 {
-        @include typography(
-            $kendo-h6-font-size,
-            $kendo-h6-font-family,
-            $kendo-h6-line-height,
-            $kendo-h6-font-weight,
-            $kendo-h6-letter-spacing
-        );
-        margin: $kendo-h6-margin;
+    @each $heading, $heading-props in $kendo-headings {
+        $_font-size: k-map-get( $heading-props, font-size );
+        $_font-family: k-map-get( $heading-props, font-family );
+        $_line-height: k-map-get( $heading-props, line-height );
+        $_font-weight: k-map-get( $heading-props, font-weight );
+        $_letter-spacing: k-map-get( $heading-props, letter-spacing );
+        $_margin: k-map-get( $heading-props, margin );
+
+        .k-#{$heading} {
+            @include typography(
+                var( --kendo-#{$heading}-font-size, #{$_font-size} ),
+                var( --kendo-#{$heading}-font-family, #{$_font-family} ),
+                var( --kendo-#{$heading}-line-height, #{$_line-height} ),
+                var( --kendo-#{$heading}-font-weight, #{$_font-weight} ),
+                var( --kendo-#{$heading}-letter-spacing, #{$_letter-spacing} ),
+            );
+            margin: var( --kendo-#{$heading}-margin, #{$_margin} );
+        }
     }
 
     // Paragraph
     .k-paragraph {
         @include typography(
-            $kendo-paragraph-font-size,
-            $kendo-paragraph-font-family,
-            $kendo-paragraph-line-height,
-            $kendo-paragraph-font-weight,
-            $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: $kendo-paragraph-margin;
+        margin: var( --kendo-paragraph-margin, #{$kendo-paragraph-margin});
     }
 
     // Code snippet
     .k-pre,
     .k-code {
         @include typography(
-            $kendo-code-font-size,
-            $kendo-code-font-family,
-            $kendo-code-line-height,
-            $kendo-code-font-weight,
-            $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: $kendo-code-border-width;
@@ -139,43 +98,24 @@
     }
 
     // Display
-    .k-display-1 {
-        @include typography(
-            $kendo-display1-font-size,
-            $kendo-display1-font-family,
-            $kendo-display1-line-height,
-            $kendo-display1-font-weight,
-            $kendo-display1-letter-spacing
-        );
-    }
-    .k-display-2 {
-        @include typography(
-            $kendo-display2-font-size,
-            $kendo-display2-font-family,
-            $kendo-display2-line-height,
-            $kendo-display2-font-weight,
-            $kendo-display2-letter-spacing
-        );
-    }
-    .k-display-3 {
-        @include typography(
-            $kendo-display3-font-size,
-            $kendo-display3-font-family,
-            $kendo-display3-line-height,
-            $kendo-display3-font-weight,
-            $kendo-display3-letter-spacing
-        );
-    }
-    .k-display-4 {
-        @include typography(
-            $kendo-display4-font-size,
-            $kendo-display4-font-family,
-            $kendo-display4-line-height,
-            $kendo-display4-font-weight,
-            $kendo-display4-letter-spacing
-        );
-    }
+    @each $display, $kendo-display-props in $kendo-display {
+        $_font-size: k-map-get( $kendo-display-props, font-size );
+        $_font-family: k-map-get( $kendo-display-props, font-family );
+        $_line-height: k-map-get( $kendo-display-props, line-height );
+        $_font-weight: k-map-get( $kendo-display-props, font-weight );
+        $_letter-spacing: k-map-get( $kendo-display-props, letter-spacing );
+        $_margin: k-map-get( $kendo-display-props, margin );
 
+        .k-display-#{$display} {
+            @include typography(
+                var( --kendo-display#{$display}-font-size, #{$_font-size} ),
+                var( --kendo-display#{$display}-font-family, #{$_font-family} ),
+                var( --kendo-display#{$display}-line-height, #{$_line-height} ),
+                var( --kendo-display#{$display}-font-weight, #{$_font-weight} ),
+                var( --kendo-display#{$display}-letter-spacing, #{$_letter-spacing} ),
+            );
+        }
+    }
 }
 
 

package/scss/typography/_variables.scss

@@ -2,33 +2,33 @@
 
 
 // Headings
-$kendo-h1-font-size: ($kendo-font-size-md * 3) !default;
-$kendo-h2-font-size: 34px !default;
-$kendo-h3-font-size: ($kendo-font-size-md * 2) !default;
-$kendo-h4-font-size: 22px !default;
-$kendo-h5-font-size: $kendo-font-size-lg !default;
-$kendo-h6-font-size: $kendo-font-size-md !default;
-
-$kendo-h1-font-family: $kendo-font-family !default;
-$kendo-h2-font-family: $kendo-font-family !default;
-$kendo-h3-font-family: $kendo-font-family !default;
-$kendo-h4-font-family: $kendo-font-family !default;
-$kendo-h5-font-family: $kendo-font-family !default;
-$kendo-h6-font-family: $kendo-font-family !default;
-
-$kendo-h1-line-height: 54px !default;
-$kendo-h2-line-height: 46px !default;
+$kendo-h1-font-size: calc( var( --kendo-font-size, inherit ) * 4 ) !default;
+$kendo-h2-font-size: calc( var( --kendo-font-size, inherit ) * 3 ) !default;
+$kendo-h3-font-size: calc( var( --kendo-font-size, inherit ) * 2.5 ) !default;
+$kendo-h4-font-size: calc( var( --kendo-font-size, inherit ) * 2 ) !default;
+$kendo-h5-font-size: calc( var( --kendo-font-size, inherit ) * 1.5 ) !default;
+$kendo-h6-font-size: var( --kendo-font-size, inherit ) !default;
+
+$kendo-h1-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-h2-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-h3-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-h4-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-h5-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-h6-font-family: var( --kendo-font-family, inherit ) !default;
+
+$kendo-h1-line-height: 74px !default;
+$kendo-h2-line-height: 56px !default;
 $kendo-h3-line-height: 42px !default;
-$kendo-h4-line-height: 32px !default;
-$kendo-h5-line-height: 26px !default;
+$kendo-h4-line-height: 40px !default;
+$kendo-h5-line-height: 28px !default;
 $kendo-h6-line-height: 20px !default;
 
-$kendo-h1-font-weight: $kendo-font-weight-normal !default;
-$kendo-h2-font-weight: $kendo-font-weight-normal !default;
-$kendo-h3-font-weight: $kendo-font-weight-normal !default;
-$kendo-h4-font-weight: $kendo-font-weight-bold !default;
-$kendo-h5-font-weight: $kendo-font-weight-bold !default;
-$kendo-h6-font-weight: $kendo-font-weight-bold !default;
+$kendo-h1-font-weight: var( --kendo-font-weight-normal, normal ) !default;
+$kendo-h2-font-weight: var( --kendo-font-weight-normal, normal ) !default;
+$kendo-h3-font-weight: var( --kendo-font-weight-normal, normal ) !default;
+$kendo-h4-font-weight: var( --kendo-font-weight-bold, normal ) !default;
+$kendo-h5-font-weight: var( --kendo-font-weight-bold, normal ) !default;
+$kendo-h6-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 
 $kendo-h1-letter-spacing: null !default;
 $kendo-h2-letter-spacing: null !default;
@@ -37,34 +37,86 @@ $kendo-h4-letter-spacing: null !default;
 $kendo-h5-letter-spacing: null !default;
 $kendo-h6-letter-spacing: null !default;
 
-$kendo-h1-margin: 0 0 $kendo-font-size-md !default;
-$kendo-h2-margin: 0 0 $kendo-font-size-md !default;
-$kendo-h3-margin: 0 0 $kendo-font-size-md !default;
-$kendo-h4-margin: 0 0 $kendo-font-size-md !default;
-$kendo-h5-margin: 0 0 $kendo-font-size-md !default;
-$kendo-h6-margin: 0 0 $kendo-font-size-md !default;
+$kendo-h1-margin: 0 0 var( --kendo-font-size, inherit ) !default;
+$kendo-h2-margin: 0 0 var( --kendo-font-size, inherit ) !default;
+$kendo-h3-margin: 0 0 var( --kendo-font-size, inherit ) !default;
+$kendo-h4-margin: 0 0 var( --kendo-font-size, inherit ) !default;
+$kendo-h5-margin: 0 0 var( --kendo-font-size, inherit ) !default;
+$kendo-h6-margin: 0 0 var( --kendo-font-size, inherit ) !default;
+
+$kendo-headings: (
+    h1: (
+        font-size: $kendo-h1-font-size,
+        font-family: $kendo-h1-font-family,
+        line-height: $kendo-h1-line-height,
+        font-weight: $kendo-h1-font-weight,
+        letter-spacing: $kendo-h1-letter-spacing,
+        margin: $kendo-h1-margin
+
+    ),
+    h2: (
+        font-size: $kendo-h2-font-size,
+        font-family: $kendo-h2-font-family,
+        line-height: $kendo-h2-line-height,
+        font-weight: $kendo-h2-font-weight,
+        letter-spacing: $kendo-h2-letter-spacing,
+        margin: $kendo-h2-margin
+    ),
+    h3: (
+        font-size: $kendo-h3-font-size,
+        font-family: $kendo-h3-font-family,
+        line-height: $kendo-h3-line-height,
+        font-weight: $kendo-h3-font-weight,
+        letter-spacing: $kendo-h3-letter-spacing,
+        margin: $kendo-h3-margin
+    ),
+    h4: (
+        font-size: $kendo-h4-font-size,
+        font-family: $kendo-h4-font-family,
+        line-height: $kendo-h4-line-height,
+        font-weight: $kendo-h4-font-weight,
+        letter-spacing: $kendo-h4-letter-spacing,
+        margin: $kendo-h4-margin
+    ),
+    h5: (
+        font-size: $kendo-h5-font-size,
+        font-family: $kendo-h5-font-family,
+        line-height: $kendo-h5-line-height,
+        font-weight: $kendo-h5-font-weight,
+        letter-spacing: $kendo-h5-letter-spacing,
+        margin: $kendo-h5-margin
+    ),
+    h6: (
+        font-size: $kendo-h6-font-size,
+        font-family: $kendo-h6-font-family,
+        line-height: $kendo-h6-line-height,
+        font-weight: $kendo-h6-font-weight,
+        letter-spacing: $kendo-h6-letter-spacing,
+        margin: $kendo-h6-margin
+    ),
+) !default;
 
 
 // Paragraph
-$kendo-paragraph-margin: 0 0 $kendo-font-size-md !default;
-$kendo-paragraph-font-size: $kendo-font-size-md !default;
-$kendo-paragraph-font-family: $kendo-font-family !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: 20px !default;
-$kendo-paragraph-font-weight: $kendo-font-weight-normal !default;
+$kendo-paragraph-font-weight: var( --kendo-font-weight-normal, normal ) !default;
 $kendo-paragraph-letter-spacing: null !default;
 
 
 // Code
-$kendo-code-font-size: $kendo-font-size-md !default;
-$kendo-code-font-family: $kendo-font-family-monospace !default;
+$kendo-code-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-code-font-family: var( --kendo-font-family-monospace, normal ) !default;
 $kendo-code-line-height: 20px !default;
-$kendo-code-font-weight: $kendo-font-weight-normal !default;
+$kendo-code-font-weight: var( --kendo-font-weight-normal, normal ) !default;
 $kendo-code-letter-spacing: null !default;
 
-$kendo-code-padding-x: 4px !default;
-$kendo-code-padding-y: 0px !default;
-$kendo-pre-padding-x: 24px !default;
-$kendo-pre-padding-y: 16px !default;
+$kendo-code-padding-x: k-spacing(1) !default;
+$kendo-code-padding-y: k-spacing(0) !default;
+$kendo-pre-padding-x: k-spacing(6) !default;
+$kendo-pre-padding-y: k-spacing(4) !default;
 $kendo-code-border-width: 1px !default;
 
 $kendo-code-bg: $kendo-base-bg !default;
@@ -73,27 +125,58 @@ $kendo-code-border: $kendo-component-border !default;
 
 
 // Display
-$kendo-display1-font-size: ($kendo-font-size-md * 6) !default;
-$kendo-display2-font-size: ($kendo-font-size-md * 5) !default;
-$kendo-display3-font-size: ($kendo-font-size-md * 4) !default;
-$kendo-display4-font-size: ($kendo-font-size-md * 3) !default;
+$kendo-display1-font-size: calc( var( --kendo-font-size, inherit ) * 8) !default;
+$kendo-display2-font-size: calc( var( --kendo-font-size, inherit ) * 7) !default;
+$kendo-display3-font-size: calc( var( --kendo-font-size, inherit ) * 6) !default;
+$kendo-display4-font-size: calc( var( --kendo-font-size, inherit ) * 5) !default;
 
-$kendo-display1-font-family: $kendo-font-family !default;
-$kendo-display2-font-family: $kendo-font-family !default;
-$kendo-display3-font-family: $kendo-font-family !default;
-$kendo-display4-font-family: $kendo-font-family !default;
+$kendo-display1-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-display2-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-display3-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-display4-font-family: var( --kendo-font-family, inherit ) !default;
 
 $kendo-display1-line-height: 1.2 !default;
 $kendo-display2-line-height: 1.2 !default;
 $kendo-display3-line-height: 1.2 !default;
 $kendo-display4-line-height: 1.2 !default;
 
-$kendo-display1-font-weight: $kendo-font-weight-light !default;
-$kendo-display2-font-weight: $kendo-font-weight-light !default;
-$kendo-display3-font-weight: $kendo-font-weight-light !default;
-$kendo-display4-font-weight: $kendo-font-weight-light !default;
+$kendo-display1-font-weight: var( --kendo-font-weight-light, normal ) !default;
+$kendo-display2-font-weight: var( --kendo-font-weight-light, normal ) !default;
+$kendo-display3-font-weight: var( --kendo-font-weight-light, normal ) !default;
+$kendo-display4-font-weight: var( --kendo-font-weight-light, normal ) !default;
 
 $kendo-display1-letter-spacing: null !default;
 $kendo-display2-letter-spacing: null !default;
 $kendo-display3-letter-spacing: null !default;
 $kendo-display4-letter-spacing: null !default;
+
+$kendo-display: (
+    1: (
+        font-size: $kendo-display1-font-size,
+        font-family: $kendo-display1-font-family,
+        line-height: $kendo-display1-line-height,
+        font-weight: $kendo-display1-font-weight,
+        letter-spacing: $kendo-display1-letter-spacing
+    ),
+    2: (
+        font-size: $kendo-display2-font-size,
+        font-family: $kendo-display2-font-family,
+        line-height: $kendo-display2-line-height,
+        font-weight: $kendo-display2-font-weight,
+        letter-spacing: $kendo-display2-letter-spacing
+    ),
+    3: (
+        font-size: $kendo-display3-font-size,
+        font-family: $kendo-display3-font-family,
+        line-height: $kendo-display3-line-height,
+        font-weight: $kendo-display3-font-weight,
+        letter-spacing: $kendo-display3-letter-spacing
+    ),
+    4: (
+        font-size: $kendo-display4-font-size,
+        font-family: $kendo-display4-font-family,
+        line-height: $kendo-display4-line-height,
+        font-weight: $kendo-display4-font-weight,
+        letter-spacing: $kendo-display4-letter-spacing
+    ),
+) !default;

package/scss/upload/_layout.scss

@@ -113,7 +113,7 @@
             }
 
             .k-filename {
-                margin-left: k-map-get( $kendo-spacing, 4 );
+                margin-left: k-spacing(4);
                 flex: 1;
                 overflow: hidden;
                 text-overflow: ellipsis;
@@ -197,7 +197,7 @@
             }
 
             .k-file-summary {
-                margin-top: - k-math-div($kendo-upload-multiple-items-spacing, 3);
+                margin-top: calc( calc( #{$kendo-upload-multiple-items-spacing} / 3) * -1 );
             }
         }
 
@@ -206,7 +206,7 @@
             position: absolute;
             left: $kendo-upload-item-padding-x;
             right: $kendo-upload-item-padding-x;
-            bottom: k-math-div( $kendo-upload-item-padding-y, 2 );
+            bottom: calc( #{$kendo-upload-item-padding-y} / 2 );
             width: auto;
         }
 

package/scss/upload/_variables.scss

@@ -5,13 +5,13 @@
 $kendo-upload-border-width: 1px !default;
 /// The font family of the Upload.
 /// @group upload
-$kendo-upload-font-family: $kendo-font-family !default;
+$kendo-upload-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the Upload.
 /// @group upload
-$kendo-upload-font-size: $kendo-font-size-md !default;
+$kendo-upload-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the Upload.
 /// @group upload
-$kendo-upload-line-height: $kendo-line-height-md !default;
+$kendo-upload-line-height: var( --kendo-line-height, normal ) !default;
 /// The maximum height of the list with uploaded items.
 /// @group upload
 $kendo-upload-max-height: 300px !default;
@@ -28,10 +28,10 @@ $kendo-upload-border: $kendo-component-border !default;
 
 /// The horizontal padding of the Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-upload-dropzone-padding-x: k-spacing(2) !default;
 /// The vertical padding of the Upload dropzone.
 /// @group upload
-$kendo-upload-dropzone-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-upload-dropzone-padding-y: k-spacing(2) !default;
 /// The text color of the Upload dropzone.
 /// @group upload
 $kendo-upload-dropzone-text: $kendo-component-header-text !default;
@@ -54,14 +54,14 @@ $kendo-upload-status-text-opacity: null !default;
 
 /// The horizontal padding of an uploaded item.
 /// @group upload
-$kendo-upload-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-upload-item-padding-x: k-spacing(2) !default;
 /// The vertical padding of an uploaded item.
 /// @group upload
-$kendo-upload-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-upload-item-padding-y: k-spacing(2) !default;
 
 /// The vertical spacing between uploaded batch items.
 /// @group upload
-$kendo-upload-multiple-items-spacing: 12px !default;
+$kendo-upload-multiple-items-spacing: k-spacing(3) !default;
 
 /// The font size of the Upload validation message.
 /// @group upload

package/scss/window/_variables.scss

@@ -10,20 +10,20 @@ $kendo-window-border-width: 0px !default;
 $kendo-window-border-radius: 0px !default;
 /// The font family of the Window.
 /// @group window
-$kendo-window-font-family: $kendo-font-family !default;
+$kendo-window-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the Window.
 /// @group window
-$kendo-window-font-size: $kendo-font-size-md !default;
+$kendo-window-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the Window.
 /// @group window
 $kendo-window-line-height: 1.25 !default;
 
 /// The horizontal padding of the Window titlebar.
 /// @group window
-$kendo-window-titlebar-padding-x: 16px !default;
+$kendo-window-titlebar-padding-x: k-spacing(4) !default;
 /// The vertical padding of the Window titlebar.
 /// @group window
-$kendo-window-titlebar-padding-y: 12px !default;
+$kendo-window-titlebar-padding-y: k-spacing(3) !default;
 /// The width of the border of the Window titlebar.
 /// @group window
 $kendo-window-titlebar-border-width: 0 0 1px !default;
@@ -33,7 +33,7 @@ $kendo-window-titlebar-border-style: solid !default;
 
 /// The font size of the title of the Window.
 /// @group window
-$kendo-window-title-font-size: $kendo-font-size-lg !default;
+$kendo-window-title-font-size: var( --kendo-font-size-lg, inherit ) !default;
 /// The line height of the title of the Window.
 /// @group window
 $kendo-window-title-line-height: 1.25 !default;
@@ -50,10 +50,10 @@ $kendo-window-action-hover-opacity: null !default;
 
 /// The horizontal padding of the content of the Window.
 /// @group window
-$kendo-window-inner-padding-x: 16px !default;
+$kendo-window-inner-padding-x: k-spacing(4) !default;
 /// The vertical padding of the content of the Window.
 /// @group window
-$kendo-window-inner-padding-y: 16px !default;
+$kendo-window-inner-padding-y: k-spacing(4) !default;
 
 /// The horizontal padding of the Window action buttons.
 /// @group window

package/scss/wizard/_variables.scss

@@ -2,32 +2,32 @@
 
 /// The horizontal padding of the Wizard.
 /// @group wizard
-$kendo-wizard-padding-x: $kendo-padding-md-x * 2.5 !default;
+$kendo-wizard-padding-x: calc( #{$kendo-padding-md-x} * 2.5 ) !default;
 /// The vertical padding of the Wizard.
 /// @group wizard
 $kendo-wizard-padding-y: $kendo-wizard-padding-x !default;
 /// The horizontal padding of the Wizard content.
 /// @group wizard
-$kendo-wizard-content-padding-x: $kendo-padding-md-x * 4 !default;
+$kendo-wizard-content-padding-x: calc( #{$kendo-padding-md-x} * 4 ) !default;
 /// The vertical padding of the Wizard content.
 /// @group wizard
-$kendo-wizard-content-padding-y: $kendo-padding-md-y * 8 !default;
+$kendo-wizard-content-padding-y: calc( #{$kendo-padding-md-y} * 8 ) !default;
 /// The horizontal margin of the Wizard's Button container.
 /// @group wizard
-$kendo-wizard-buttons-margin-x: 10px !default;
+$kendo-wizard-buttons-margin-x: k-spacing(2.5) !default;
 
 /// The border width of the Wizard.
 /// @group wizard
 $kendo-wizard-border-width: 0px !default;
 /// The font size of the Wizard.
 /// @group wizard
-$kendo-wizard-font-size: $kendo-font-size-md !default;
+$kendo-wizard-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the Wizard.
 /// @group wizard
-$kendo-wizard-line-height: $kendo-line-height-md !default;
+$kendo-wizard-line-height: var( --kendo-line-height, normal ) !default;
 /// The font family of the Wizard.
 /// @group wizard
-$kendo-wizard-font-family: $kendo-font-family !default;
+$kendo-wizard-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// The outline of the focused Wizard step.
 /// @group wizard