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

package/scss/toolbar/_variables.scss

@@ -5,39 +5,39 @@
 $kendo-toolbar-padding-x: null !default;
 /// The horizontal padding of the small Toolbar.
 /// @group toolbar
-$kendo-toolbar-sm-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-toolbar-sm-padding-x: k-spacing(1) !default;
 /// The horizontal padding of the medium Toolbar.
 /// @group toolbar
-$kendo-toolbar-md-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-md-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the large Toolbar.
 /// @group toolbar
-$kendo-toolbar-lg-padding-x: k-map-get( $kendo-spacing, 2.5 ) !default;
+$kendo-toolbar-lg-padding-x: k-spacing(2.5) !default;
 
 /// The vertical padding of the Toolbar.
 /// @group toolbar
 $kendo-toolbar-padding-y: null !default;
 /// The vertical padding of the small Toolbar.
 /// @group toolbar
-$kendo-toolbar-sm-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-toolbar-sm-padding-y: k-spacing(1) !default;
 /// The vertical padding of the medium Toolbar.
 /// @group toolbar
-$kendo-toolbar-md-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-md-padding-y: k-spacing(2) !default;
 /// The vertical padding of the large Toolbar.
 /// @group toolbar
-$kendo-toolbar-lg-padding-y: k-map-get( $kendo-spacing, 2.5 ) !default;
+$kendo-toolbar-lg-padding-y: k-spacing(2.5) !default;
 
 /// The spacing between the Toolbar tools.
 /// @group toolbar
 $kendo-toolbar-spacing: null !default;
 /// The spacing between the tools of the small Toolbar.
 /// @group toolbar
-$kendo-toolbar-sm-spacing: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-toolbar-sm-spacing: k-spacing(1.5) !default;
 /// The spacing between the tools of the medium Toolbar.
 /// @group toolbar
-$kendo-toolbar-md-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-md-spacing: k-spacing(2) !default;
 /// The spacing between the tools of the large Toolbar.
 /// @group toolbar
-$kendo-toolbar-lg-spacing: k-map-get( $kendo-spacing, 2.5 ) !default;
+$kendo-toolbar-lg-spacing: k-spacing(2.5) !default;
 
 /// The width of the border around the Toolbar.
 /// @group toolbar
@@ -48,13 +48,13 @@ $kendo-toolbar-border-radius: null !default;
 
 /// The font family of the Toolbar.
 /// @group toolbar
-$kendo-toolbar-font-family: $kendo-font-family !default;
+$kendo-toolbar-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the Toolbar.
 /// @group toolbar
-$kendo-toolbar-font-size: $kendo-font-size-md !default;
+$kendo-toolbar-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the Toolbar.
 /// @group toolbar
-$kendo-toolbar-line-height: $kendo-line-height-md !default;
+$kendo-toolbar-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the Toolbar.
 /// @group toolbar

package/scss/tooltip/_layout.scss

@@ -59,8 +59,8 @@
 
     // Callout
     .k-callout {
-        width: ($kendo-tooltip-callout-size * 2);
-        height: ($kendo-tooltip-callout-size * 2);
+        width: calc( #{$kendo-tooltip-callout-size} * 2);
+        height: calc( #{$kendo-tooltip-callout-size} * 2);
         border-width: $kendo-tooltip-callout-size;
         border-style: solid;
         border-color: transparent;
@@ -73,38 +73,38 @@
     // Remove margin tweaking and uncomment when their implementation is fixed.
 
     .k-callout-n {
-        margin-left: -$kendo-tooltip-callout-size;
+        margin-left: calc( #{$kendo-tooltip-callout-size} * -1 );
         border-bottom-color: currentColor;
         // top: 0;
-        top: (-$kendo-tooltip-callout-size * 2);
+        top: calc( calc( #{$kendo-tooltip-callout-size} * -1 ) * 2 );
         left: 50%;
         // transform: translate(-50%, -100%);
         pointer-events: none;
     }
     .k-callout-e {
-        margin-top: -$kendo-tooltip-callout-size;
+        margin-top: calc( #{$kendo-tooltip-callout-size} * -1 );
         border-left-color: currentColor;
         top: 50%;
         // right: 0;
-        right: (-$kendo-tooltip-callout-size * 2);
+        right: calc( calc( #{$kendo-tooltip-callout-size} * -1 ) * 2 );
         // transform: translate(100%, -50%);
         pointer-events: none;
     }
     .k-callout-s {
-        margin-left: -$kendo-tooltip-callout-size;
+        margin-left: calc( #{$kendo-tooltip-callout-size} * -1 );
         border-top-color: currentColor;
         // bottom: 0;
-        bottom: (-$kendo-tooltip-callout-size * 2);
+        bottom: calc( calc( #{$kendo-tooltip-callout-size} * -1 ) * 2);
         left: 50%;
         // transform: translate(-50%, 100%);
         pointer-events: none;
     }
     .k-callout-w {
-        margin-top: -$kendo-tooltip-callout-size;
+        margin-top: calc( #{$kendo-tooltip-callout-size} * -1 );
         border-right-color: currentColor;
         top: 50%;
         // left: 0;
-        left: (-$kendo-tooltip-callout-size * 2);
+        left: calc( calc( #{$kendo-tooltip-callout-size} * -1 ) * 2);
         // transform: translate(-100%, -50%);
         pointer-events: none;
     }

package/scss/tooltip/_variables.scss

@@ -11,21 +11,21 @@ $kendo-tooltip-padding-x: $kendo-padding-md-x !default;
 $kendo-tooltip-border-width: 0px !default;
 /// The border radius of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-border-radius: $kendo-border-radius-md !default;
+$kendo-tooltip-border-radius: k-border-radius(md) !default;
 
 /// The font family of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-font-family: $kendo-font-family !default;
+$kendo-tooltip-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-font-size: $kendo-font-size-md !default;
+$kendo-tooltip-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the Tooltip.
 /// @group tooltip
 $kendo-tooltip-line-height: 1.25 !default;
 
 /// The font size of the Tooltip title.
 /// @group tooltip
-$kendo-tooltip-title-font-size: ($kendo-tooltip-font-size * 1.25) !default;
+$kendo-tooltip-title-font-size: calc( ( var( --kendo-font-size, .875rem ) * 1.25 ) ) !default;
 /// The line height of the Tooltip title.
 /// @group tooltip
 $kendo-tooltip-title-line-height: 1 !default;

package/scss/treelist/_layout.scss

@@ -101,7 +101,7 @@
     }
 
     .k-treelist-toggle {
-        margin-block: -$kendo-icon-padding;
+        margin-block: calc( #{$kendo-icon-padding} * -1 );
         padding: $kendo-icon-padding;
         box-sizing: content-box;
         cursor: pointer;

package/scss/treelist/_variables.scss

@@ -1,3 +1,8 @@
 // Treelist
+
+/// The background color of the TreeList footer row.
+/// @group treelist
 $kendo-treelist-footer-row-bg: $kendo-grid-hover-bg !default;
+/// The border width of the TreeList footer row.
+/// @group treelist
 $kendo-treelist-footer-row-border-width: 1px !default;

package/scss/treeview/_layout.scss

@@ -27,7 +27,7 @@
 
     // Treeview filter
     .k-treeview-filter {
-        padding: k-map-get( $kendo-spacing, 2 );
+        padding: k-spacing(2);
         display: block;
         position: relative;
         flex: none;

package/scss/treeview/_variables.scss

@@ -2,69 +2,69 @@
 
 /// The font family of the TreeView.
 /// @group treeview
-$kendo-treeview-font-family: $kendo-font-family !default;
+$kendo-treeview-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the TreeView.
 /// @group treeview
-$kendo-treeview-font-size: $kendo-font-size-md !default;
+$kendo-treeview-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the small TreeView.
 /// @group treeview
-$kendo-treeview-sm-font-size: $kendo-font-size-md !default;
+$kendo-treeview-sm-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the medium TreeView.
 /// @group treeview
-$kendo-treeview-md-font-size: $kendo-font-size-md !default;
+$kendo-treeview-md-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the large TreeView.
 /// @group treeview
-$kendo-treeview-lg-font-size: $kendo-font-size-lg !default;
+$kendo-treeview-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 /// The line height of the TreeView.
 /// @group treeview
-$kendo-treeview-line-height: $kendo-line-height-md !default;
+$kendo-treeview-line-height: var( --kendo-line-height, normal ) !default;
 /// The line height of the small TreeView.
 /// @group treeview
-$kendo-treeview-sm-line-height: $kendo-line-height-md !default;
+$kendo-treeview-sm-line-height: var( --kendo-line-height, normal ) !default;
 /// The line height of the medium TreeView.
 /// @group treeview
-$kendo-treeview-md-line-height: $kendo-line-height-md !default;
+$kendo-treeview-md-line-height: var( --kendo-line-height, normal ) !default;
 /// The line height of the large TreeView.
 /// @group treeview
-$kendo-treeview-lg-line-height: $kendo-line-height-lg !default;
+$kendo-treeview-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
 /// The indentation of child groups in the TreeView.
 /// @group treeview
 $kendo-treeview-indent: 24px !default;
 
 /// The horizontal padding of the TreeView items.
 /// @group treeview
-$kendo-treeview-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-item-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the small TreeView items.
 /// @group treeview
-$kendo-treeview-sm-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-sm-item-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the medium TreeView items.
 /// @group treeview
-$kendo-treeview-md-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-md-item-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the large TreeView items.
 /// @group treeview
-$kendo-treeview-lg-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-lg-item-padding-x: k-spacing(2) !default;
 /// The vertical padding of the TreeView items.
 /// @group treeview
-$kendo-treeview-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-treeview-item-padding-y: k-spacing(1) !default;
 /// The vertical padding of the small TreeView items.
 /// @group treeview
-$kendo-treeview-sm-item-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default;
+$kendo-treeview-sm-item-padding-y: k-spacing(0.5) !default;
 /// The vertical padding of the medium TreeView items.
 /// @group treeview
-$kendo-treeview-md-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-treeview-md-item-padding-y: k-spacing(1) !default;
 /// The vertical padding of the large TreeView items.
 /// @group treeview
-$kendo-treeview-lg-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-lg-item-padding-y: k-spacing(2) !default;
 /// The border width of the TreeView items.
 /// @group treeview
 $kendo-treeview-item-border-width: 0px !default;
 /// The border radius of the TreeView items.
 /// @group treeview
-$kendo-treeview-item-border-radius: $kendo-border-radius-md !default;
+$kendo-treeview-item-border-radius: k-border-radius(md) !default;
 
 /// The horizontal padding of the checkbox in the small TreeView.
 /// @group treeview
-$kendo-treeview-sm-checkbox-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-treeview-sm-checkbox-padding-x: k-spacing(1) !default;
 /// The horizontal padding of the checkbox in the medium TreeView.
 /// @group treeview
 $kendo-treeview-md-checkbox-padding-x: $kendo-treeview-sm-checkbox-padding-x !default;
@@ -73,7 +73,7 @@ $kendo-treeview-md-checkbox-padding-x: $kendo-treeview-sm-checkbox-padding-x !de
 $kendo-treeview-lg-checkbox-padding-x: $kendo-treeview-sm-checkbox-padding-x !default;
 /// The vertical padding of the checkbox in the small TreeView.
 /// @group treeview
-$kendo-treeview-sm-checkbox-padding-y: k-map-get( $kendo-spacing, .5 ) !default;
+$kendo-treeview-sm-checkbox-padding-y: k-spacing(0.5) !default;
 /// The vertical padding of the checkbox in the medium TreeView.
 /// @group treeview
 $kendo-treeview-md-checkbox-padding-y: $kendo-treeview-sm-checkbox-padding-y !default;

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} ),
+            );
+        }
+    }
 }