@progress/kendo-theme-bootstrap 7.3.0-dev.1 → 8.0.0-dev.1

package/scss/table/_variables.scss

@@ -29,33 +29,33 @@ $kendo-table-cell-padding-x: null !default;
 /// @group table
 $kendo-table-cell-padding-y: null !default;
 
-$kendo-table-sm-cell-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-table-sm-cell-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-table-sm-cell-padding-x: k-spacing(2) !default;
+$kendo-table-sm-cell-padding-y: k-spacing(1) !default;
 
 $kendo-table-md-cell-padding-x: $table-cell-padding-x !default;
 $kendo-table-md-cell-padding-y: $table-cell-padding-y !default;
 
-$kendo-table-lg-cell-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-table-lg-cell-padding-y: k-map-get( $kendo-spacing, 2.5 ) !default;
+$kendo-table-lg-cell-padding-x: k-spacing(2) !default;
+$kendo-table-lg-cell-padding-y: k-spacing(2.5) !default;
 
 /// The sizes of the table.
 /// @group table
 $kendo-table-sizes: (
     sm: (
-        font-size: $kendo-font-size-md,
-        line-height: $kendo-line-height-md,
+        font-size: var( --kendo-font-size, inherit ) ,
+        line-height: var( --kendo-line-height, normal ),
         cell-padding-x: $kendo-table-sm-cell-padding-x,
         cell-padding-y: $kendo-table-sm-cell-padding-y
     ),
     md: (
-        font-size: $kendo-font-size-md,
-        line-height: $kendo-line-height-md,
+        font-size: var( --kendo-font-size, inherit ) ,
+        line-height: var( --kendo-line-height, normal ),
         cell-padding-x: $kendo-table-md-cell-padding-x,
         cell-padding-y: $kendo-table-md-cell-padding-y
     ),
     lg: (
-        font-size: $kendo-font-size-md,
-        line-height: $kendo-line-height-md,
+        font-size: var( --kendo-font-size, inherit ) ,
+        line-height: var( --kendo-line-height, normal ),
         cell-padding-x: $kendo-table-lg-cell-padding-x,
         cell-padding-y: $kendo-table-lg-cell-padding-y
     )

package/scss/tabstrip/_variables.scss

@@ -1,12 +1,12 @@
 // Tabstrip
 
-$kendo-tabstrip-wrapper-padding-x: 0px !default;
-$kendo-tabstrip-wrapper-padding-y: 0px !default;
+$kendo-tabstrip-wrapper-padding-x: k-spacing(0) !default;
+$kendo-tabstrip-wrapper-padding-y: k-spacing(0) !default;
 $kendo-tabstrip-wrapper-border-width: 0px !default;
 
-$kendo-tabstrip-font-family: $kendo-font-family !default;
-$kendo-tabstrip-font-size: $kendo-font-size-md !default;
-$kendo-tabstrip-line-height: $kendo-line-height-md !default;
+$kendo-tabstrip-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-tabstrip-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-tabstrip-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-tabstrip-border-width: 1px !default;
 
 $kendo-tabstrip-wrapper-bg: null !default;
@@ -34,10 +34,10 @@ $kendo-tabstrip-item-padding-y: $nav-link-padding-y !default;
 $kendo-tabstrip-item-border-width: 1px !default;
 /// Border radius of tabs
 /// @group tabstrip
-$kendo-tabstrip-item-border-radius: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-tabstrip-item-border-radius: k-spacing(1) !default;
 /// Spacing between tabs
 /// @group tabstrip
-$kendo-tabstrip-item-gap: 0 !default;
+$kendo-tabstrip-item-gap: k-spacing(0) !default;
 
 /// Background color of tabs
 /// @group tabstrip
@@ -94,10 +94,10 @@ $kendo-tabstrip-indicator-color: null !default;
 
 /// Horizontal padding of tabstrip content
 /// @group tabstrip
-$kendo-tabstrip-content-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-tabstrip-content-padding-x: k-spacing(4) !default;
 /// Vertical padding of tabstrip content
 /// @group tabstrip
-$kendo-tabstrip-content-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-tabstrip-content-padding-y: k-spacing(4) !default;
 /// Width of border around tabstrip content
 /// @group tabstrip
 $kendo-tabstrip-content-border-width: $kendo-tabstrip-border-width !default;

package/scss/taskboard/_variables.scss

@@ -2,7 +2,7 @@
 
 /// The spacing index of the TaskBoard.
 /// @group taskboard
-$kendo-taskboard-spacer: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-taskboard-spacer: k-spacing(4) !default;
 /// The vertical padding of the TaskBoard.
 /// @group taskboard
 $kendo-taskboard-padding-y: null !default;
@@ -11,13 +11,13 @@ $kendo-taskboard-padding-y: null !default;
 $kendo-taskboard-padding-x: null !default;
 /// The font family of the TaskBoard.
 /// @group taskboard
-$kendo-taskboard-font-family: $kendo-font-family !default;
+$kendo-taskboard-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the TaskBoard.
 /// @group taskboard
-$kendo-taskboard-font-size: $kendo-font-size-md !default;
+$kendo-taskboard-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the TaskBoard.
 /// @group taskboard
-$kendo-taskboard-line-height: $kendo-line-height-md !default;
+$kendo-taskboard-line-height: var( --kendo-line-height, normal ) !default;
 /// The background color of the TaskBoard.
 /// @group taskboard
 $kendo-taskboard-bg: null !default;
@@ -56,13 +56,13 @@ $kendo-taskboard-content-padding-x: $kendo-taskboard-content-padding-y !default;
 
 /// The vertical spacing of the TaskBoard column container.
 /// @group taskboard
-$kendo-taskboard-column-container-spacing-y: $kendo-taskboard-spacer * .75 !default;
+$kendo-taskboard-column-container-spacing-y: calc( #{$kendo-taskboard-spacer} * .75 ) !default;
 /// The vertical padding of the TaskBoard column container.
 /// @group taskboard
-$kendo-taskboard-column-container-padding-y: 0px !default;
+$kendo-taskboard-column-container-padding-y: k-spacing(0) !default;
 /// The horizontal padding of the TaskBoard column container.
 /// @group taskboard
-$kendo-taskboard-column-container-padding-x: $kendo-taskboard-spacer * .75 !default;
+$kendo-taskboard-column-container-padding-x: calc( #{$kendo-taskboard-spacer} * .75 ) !default;
 /// The spacing of the TaskBoard columns container.
 /// @group taskboard
 $kendo-taskboard-columns-container-gap: $kendo-taskboard-spacer !default;
@@ -75,7 +75,7 @@ $kendo-taskboard-column-width: 320px !default;
 $kendo-taskboard-column-border-width: 1px !default;
 /// The border radius of the TaskBoard column.
 /// @group taskboard
-$kendo-taskboard-column-border-radius: $kendo-border-radius-sm !default;
+$kendo-taskboard-column-border-radius: k-border-radius(sm) !default;
 /// The background color of the TaskBoard column.
 /// @group taskboard
 $kendo-taskboard-column-bg: if($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $gray-900, $gray-100 )) !default;
@@ -98,16 +98,16 @@ $kendo-taskboard-column-focus-border: if($kendo-enable-color-system, k-color( bo
 
 /// The vertical padding of the TaskBoard column header.
 /// @group taskboard
-$kendo-taskboard-column-header-padding-y: $kendo-taskboard-spacer * .75 !default;
+$kendo-taskboard-column-header-padding-y: calc( #{$kendo-taskboard-spacer} * .75 ) !default;
 /// The horizontal padding of the TaskBoard column header.
 /// @group taskboard
 $kendo-taskboard-column-header-padding-x: $kendo-taskboard-column-header-padding-y !default;
 /// The spacing of the TaskBoard column header.
 /// @group taskboard
-$kendo-taskboard-column-header-gap: k-math-div( $kendo-taskboard-spacer, 4 ) !default;
+$kendo-taskboard-column-header-gap: calc( #{$kendo-taskboard-spacer} / 4 ) !default;
 /// The spacing of the TaskBoard column header actions.
 /// @group taskboard
-$kendo-taskboard-column-header-actions-gap: k-math-div( $kendo-taskboard-spacer, 2 ) !default;
+$kendo-taskboard-column-header-actions-gap: calc( #{$kendo-taskboard-spacer} / 2 ) !default;
 /// The font weight of the TaskBoard column header.
 /// @group taskboard
 $kendo-taskboard-column-header-font-weight: 500 !default;
@@ -117,13 +117,13 @@ $kendo-taskboard-column-header-text: $kendo-component-header-text !default;
 
 /// The vertical padding of the TaskBoard column Card wrapper.
 /// @group taskboard
-$kendo-taskboard-column-cards-padding-y: $kendo-taskboard-spacer * .25 !default;
+$kendo-taskboard-column-cards-padding-y: calc( #{$kendo-taskboard-spacer} * .25 ) !default;
 /// The horizontal padding of the TaskBoard column Card wrapper.
 /// @group taskboard
-$kendo-taskboard-column-cards-padding-x: 0px !default;
+$kendo-taskboard-column-cards-padding-x: k-spacing(0) !default;
 /// The spacing of the TaskBoard column Card wrapper.
 /// @group taskboard
-$kendo-taskboard-column-cards-gap: $kendo-taskboard-spacer * .75 !default;
+$kendo-taskboard-column-cards-gap: calc( #{$kendo-taskboard-spacer} * .75 ) !default;
 
 /// The default width of the TaskBoard pane.
 /// @group taskboard
@@ -149,7 +149,7 @@ $kendo-taskboard-pane-border: $kendo-component-border !default;
 
 /// The vertical padding of the TaskBoard pane header.
 /// @group taskboard
-$kendo-taskboard-pane-header-padding-y: ( $kendo-taskboard-spacer * .75 ) !default;
+$kendo-taskboard-pane-header-padding-y: calc( #{$kendo-taskboard-spacer} * .75 ) !default;
 /// The horizontal padding of the TaskBoard pane header.
 /// @group taskboard
 $kendo-taskboard-pane-header-padding-x: $kendo-taskboard-spacer !default;
@@ -162,14 +162,14 @@ $kendo-taskboard-pane-header-text: $kendo-component-header-text !default;
 
 /// The vertical padding of the TaskBoard pane content.
 /// @group taskboard
-$kendo-taskboard-pane-content-padding-y: 0px !default;
+$kendo-taskboard-pane-content-padding-y: k-spacing(0) !default;
 /// The horizontal padding of the TaskBoard pane content.
 /// @group taskboard
 $kendo-taskboard-pane-content-padding-x: $kendo-taskboard-spacer !default;
 
 /// The vertical padding of the TaskBoard pane actions.
 /// @group taskboard
-$kendo-taskboard-pane-actions-padding-y: ( $kendo-taskboard-spacer * .75 ) !default;
+$kendo-taskboard-pane-actions-padding-y: calc( #{$kendo-taskboard-spacer} * .75 ) !default;
 /// The horizontal padding of the TaskBoard pane actions.
 /// @group taskboard
 $kendo-taskboard-pane-actions-padding-x: $kendo-taskboard-spacer !default;

package/scss/tilelayout/_variables.scss

@@ -9,7 +9,7 @@ $kendo-tile-layout-bg: $gray-100 !default;
 
 /// The horizontal padding of the TileLayout.
 /// @group tilelayout
-$kendo-tile-layout-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-tile-layout-padding-x: k-spacing(4) !default;
 
 /// The vertical padding of the TileLayout
 /// @group tilelayout

package/scss/timeline/_variables.scss

@@ -2,23 +2,23 @@
 
 /// The horizontal spacing of the Timeline.
 /// @group timeline
-$kendo-timeline-spacing-x: 40px !default;
+$kendo-timeline-spacing-x: k-spacing(10) !default;
 /// The vertical spacing of the Timeline.
 /// @group timeline
-$kendo-timeline-spacing-y: 40px !default;
+$kendo-timeline-spacing-y: k-spacing(10) !default;
 /// The padding between the Timeline's track items.
 /// @group timeline
 $kendo-timeline-items-padding: $kendo-padding-md-x !default;
 
 /// The font family of the Timeline.
 /// @group timeline
-$kendo-timeline-font-family: $kendo-font-family !default;
+$kendo-timeline-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the Timeline.
 /// @group timeline
-$kendo-timeline-font-size: $kendo-font-size-md !default;
+$kendo-timeline-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the Timeline.
 /// @group timeline
-$kendo-timeline-line-height: $kendo-line-height-md !default;
+$kendo-timeline-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The horizontal spacing of the mobile Timeline.
 /// @group timeline
@@ -55,7 +55,7 @@ $kendo-timeline-track-wrap-padding-bottom: k-math-div( $kendo-timeline-track-siz
 $kendo-timeline-track-border-width: 1px !default;
 /// The bottom margin of the Timeline track.
 /// @group timeline
-$kendo-timeline-track-margin-bottom: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-timeline-track-margin-bottom: k-spacing(4) !default;
 /// The bottom offset of the Timeline track.
 /// @group timeline
 $kendo-timeline-track-bottom-calc: calc(#{k-math-div( $kendo-timeline-track-arrow-height, 2 )} + #{$kendo-timeline-track-wrap-padding-bottom}) !default;
@@ -127,7 +127,7 @@ $kendo-timeline-flag-margin-bottom-calc: calc(#{$kendo-timeline-track-size} + 2
 $kendo-timeline-date-width: 50px !default;
 /// The bottom margin of the Timeline date.
 /// @group timeline
-$kendo-timeline-date-margin-bottom: 10px !default;
+$kendo-timeline-date-margin-bottom: k-spacing(2.5) !default;
 
 /// The padding of the vertical Timeline.
 /// @group timeline

package/scss/timeselector/_variables.scss

@@ -1,9 +1,9 @@
 // Time selector
 
 $kendo-time-selector-border-width: 1px !default;
-$kendo-time-selector-font-family: $kendo-font-family !default;
-$kendo-time-selector-font-size: $kendo-font-size-md !default;
-$kendo-time-selector-line-height: $kendo-line-height-md !default;
+$kendo-time-selector-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-time-selector-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-time-selector-line-height: var( --kendo-line-height, normal ) !default;
 
 $kendo-time-selector-bg: $kendo-component-bg !default;
 $kendo-time-selector-text: $kendo-component-text !default;
@@ -16,9 +16,9 @@ $kendo-time-selector-header-border-width: 0px !default;
 $kendo-time-list-width: 4em !default;
 $kendo-time-list-height: 240px !default;
 
-$kendo-time-list-title-font-size: $kendo-font-size-sm !default;
+$kendo-time-list-title-font-size: var( --kendo-font-size-sm, inherit ) !default;
 $kendo-time-list-title-line-height: 1.5 !default;
-$kendo-time-list-title-height: ( $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;
 $kendo-time-list-title-text: $kendo-subtle-text !default;
 $kendo-time-list-title-focus-text: $kendo-component-text !default;
 
@@ -26,7 +26,7 @@ $kendo-time-list-item-padding-x: $kendo-list-md-item-padding-x !default;
 $kendo-time-list-item-padding-y: $kendo-list-md-item-padding-y !default;
 
 $kendo-time-list-highlight-border-width: 1px 0px !default;
-$kendo-time-list-highlight-height: calc( #{$kendo-time-selector-font-size * $kendo-time-selector-line-height} + #{ $kendo-time-list-item-padding-y * 2} ) !default;
+$kendo-time-list-highlight-height: calc( calc( #{$kendo-time-selector-font-size} * #{$kendo-time-selector-line-height} ) + calc( #{$kendo-time-list-item-padding-y} * 2 ) ) !default;
 $kendo-time-list-highlight-bg: $kendo-component-bg !default;
 $kendo-time-list-highlight-border: $kendo-component-border !default;
 

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/_variables.scss

@@ -15,17 +15,17 @@ $kendo-tooltip-border-radius: $tooltip-border-radius !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-sm !default;
+$kendo-tooltip-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The line height of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-line-height: $kendo-line-height-md !default;
+$kendo-tooltip-line-height: var( --kendo-line-height, normal ) !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( #{$kendo-tooltip-font-size} * 1.25 ) !default;
 /// The line height of the Tooltip title.
 /// @group tooltip
 $kendo-tooltip-title-line-height: 1 !default;

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-header-bg !default;
+/// The border width of the TreeList footer row.
+/// @group treelist
 $kendo-treelist-footer-row-border-width: 1px !default;

package/scss/treeview/_variables.scss

@@ -2,31 +2,31 @@
 
 /// 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-sm !default;
+$kendo-treeview-sm-font-size: var( --kendo-font-size-sm, 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-md !default;
+$kendo-treeview-lg-font-size: var( --kendo-font-size, 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: k-math-div( 20, 14 ) !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-md !default;
+$kendo-treeview-lg-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The indentation of child groups in the TreeView.
 /// @group treeview
@@ -34,38 +34,38 @@ $kendo-treeview-indent: 24px !default;
 
 /// The horizontal padding of the TreeView items.
 /// @group treeview
-$kendo-treeview-item-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-treeview-item-padding-x: k-spacing(3) !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, 3 ) !default;
+$kendo-treeview-md-item-padding-x: k-spacing(3) !default;
 /// The horizontal padding of the large TreeView items.
 /// @group treeview
-$kendo-treeview-lg-item-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-treeview-lg-item-padding-x: k-spacing(3) !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, 1 ) !default;
+$kendo-treeview-sm-item-padding-y: k-spacing(1) !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: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-treeview-item-border-radius: k-spacing(1) !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;
@@ -74,7 +74,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: null !default;

package/scss/typography/_variables.scss

@@ -44,27 +44,79 @@ $kendo-h4-margin: 0 0 $headings-margin-bottom !default;
 $kendo-h5-margin: 0 0 $headings-margin-bottom !default;
 $kendo-h6-margin: 0 0 $headings-margin-bottom !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 $paragraph-margin-bottom !default;
-$kendo-paragraph-font-size: $kendo-font-size-md !default;
-$kendo-paragraph-font-family: $kendo-font-family !default;
-$kendo-paragraph-line-height: $kendo-line-height-md !default;
-$kendo-paragraph-font-weight: $kendo-font-weight-normal !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, normal ) !default;
 $kendo-paragraph-letter-spacing: null !default;
 
 
 // Code
-$kendo-code-font-size: $kendo-font-size-sm !default;
-$kendo-code-font-family: $kendo-font-family-monospace !default;
-$kendo-code-line-height: $kendo-line-height-md !default;
-$kendo-code-font-weight: $kendo-font-weight-normal !default;
+$kendo-code-font-size: var( --kendo-font-size-sm, inherit )!default;
+$kendo-code-font-family: var( --kendo-font-family-monospace, normal ) !default;
+$kendo-code-line-height: var( --kendo-line-height, 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;
@@ -97,3 +149,34 @@ $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;