@progress/kendo-theme-default 5.12.1-dev.2 → 5.12.1-dev.4

package/scss/timeselector/_variables.scss

@@ -1,56 +1,53 @@
-@import "../typography/_variables.scss";
-
-
 // Time selector
 
-$time-selector-border-width: 1px !default;
-$time-selector-font-family: $font-family !default;
-$time-selector-font-size: $font-size !default;
-$time-selector-line-height: $line-height !default;
+$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;
 
-$time-selector-bg: $kendo-component-bg !default;
-$time-selector-text: $kendo-component-text !default;
-$time-selector-border: $kendo-component-border !default;
+$kendo-time-selector-bg: $kendo-component-bg !default;
+$kendo-time-selector-text: $kendo-component-text !default;
+$kendo-time-selector-border: $kendo-component-border !default;
 
-$time-selector-header-padding-x: $actions-padding-x !default;
-$time-selector-header-padding-y: $actions-padding-y !default;
-$time-selector-header-border-width: 0px !default;
+$kendo-time-selector-header-padding-x: $kendo-actions-padding-x !default;
+$kendo-time-selector-header-padding-y: $kendo-actions-padding-y !default;
+$kendo-time-selector-header-border-width: 0px !default;
 
-$time-list-width: 4em !default;
-$time-list-height: 240px !default;
+$kendo-time-list-width: 4em !default;
+$kendo-time-list-height: 240px !default;
 
-$time-list-title-font-size: $font-size-sm !default;
-$time-list-title-line-height: 1.5 !default;
-$time-list-title-height: ( $time-list-title-font-size * $time-list-title-line-height) !default;
-$time-list-title-text: $kendo-subtle-text !default;
-$time-list-title-focus-text: $kendo-component-text !default;
+$kendo-time-list-title-font-size: $kendo-font-size-sm !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-text: $kendo-subtle-text !default;
+$kendo-time-list-title-focus-text: $kendo-component-text !default;
 
-$time-list-item-padding-x: $kendo-list-item-padding-x-md !default;
-$time-list-item-padding-y: $kendo-list-item-padding-y-md !default;
+$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;
 
-$time-list-highlight-border-width: 1px 0px !default;
-$time-list-highlight-height: calc( #{$time-selector-font-size * $time-selector-line-height} + #{ $time-list-item-padding-y * 2} ) !default;
-$time-list-highlight-bg: $kendo-component-bg !default;
-$time-list-highlight-border: $kendo-component-border !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-bg: $kendo-component-bg !default;
+$kendo-time-list-highlight-border: $kendo-component-border !default;
 
-$time-list-focus-bg: rgba(0, 0, 0, .04) !default;
+$kendo-time-list-focus-bg: rgba(0, 0, 0, .04) !default;
 
 
 // Time selector sizes
-$kendo-time-selector-sm-font-size: $kendo-list-font-size-sm !default;
-$kendo-time-selector-sm-line-height: $kendo-list-line-height-sm !default;
-$kendo-time-selector-sm-list-item-padding-x: $kendo-list-item-padding-x-sm !default;
-$kendo-time-selector-sm-list-item-padding-y: $kendo-list-item-padding-y-sm !default;
+$kendo-time-selector-sm-font-size: $kendo-list-sm-font-size !default;
+$kendo-time-selector-sm-line-height: $kendo-list-sm-line-height !default;
+$kendo-time-selector-sm-list-item-padding-x: $kendo-list-sm-item-padding-x !default;
+$kendo-time-selector-sm-list-item-padding-y: $kendo-list-sm-item-padding-y !default;
 
-$kendo-time-selector-md-font-size: $kendo-list-font-size-md !default;
-$kendo-time-selector-md-line-height: $kendo-list-line-height-md !default;
-$kendo-time-selector-md-list-item-padding-x: $kendo-list-item-padding-x-md !default;
-$kendo-time-selector-md-list-item-padding-y: $kendo-list-item-padding-y-md !default;
+$kendo-time-selector-md-font-size: $kendo-list-md-font-size !default;
+$kendo-time-selector-md-line-height: $kendo-list-md-line-height !default;
+$kendo-time-selector-md-list-item-padding-x: $kendo-list-md-item-padding-x !default;
+$kendo-time-selector-md-list-item-padding-y: $kendo-list-md-item-padding-y !default;
 
-$kendo-time-selector-lg-font-size: $kendo-list-font-size-lg !default;
-$kendo-time-selector-lg-line-height: $kendo-list-line-height-lg !default;
-$kendo-time-selector-lg-list-item-padding-x: $kendo-list-item-padding-x-lg !default;
-$kendo-time-selector-lg-list-item-padding-y: $kendo-list-item-padding-y-lg !default;
+$kendo-time-selector-lg-font-size: $kendo-list-lg-font-size !default;
+$kendo-time-selector-lg-line-height: $kendo-list-lg-line-height !default;
+$kendo-time-selector-lg-list-item-padding-x: $kendo-list-lg-item-padding-x !default;
+$kendo-time-selector-lg-list-item-padding-y: $kendo-list-lg-item-padding-y !default;
 
 $kendo-time-selector-sizes: (
     sm: (

package/scss/toolbar/_layout.scss

@@ -80,7 +80,7 @@
         .k-separator,
         .k-toolbar-separator {
             width: 0;
-            height: $line-height-em;
+            height: $kendo-line-height-em;
             border-width: 0 0 0 1px;
             border-style: solid;
             align-self: center;
@@ -89,7 +89,7 @@
 
         // Spacer
         .k-toolbar-spacer {
-            height: $line-height-em;
+            height: $kendo-line-height-em;
             flex: 1 0 0%;
         }
 
@@ -141,13 +141,13 @@
     }
     // Remove once we decide to not size empty containers
     .k-toolbar-sm::before {
-        height: $kendo-button-calc-size-sm;
+        height: $kendo-button-sm-calc-size;
     }
     .k-toolbar-md::before {
-        height: $kendo-button-calc-size-md;
+        height: $kendo-button-md-calc-size;
     }
     .k-toolbar-lg::before {
-        height: $kendo-button-calc-size-lg;
+        height: $kendo-button-lg-calc-size;
     }
 
 }
@@ -160,12 +160,12 @@
     // sass-lint:disable class-name-format
     .k-floating-toolbar,
     .editorToolbarWindow.k-window-content {
-        padding: $kendo-toolbar-padding-y-md $kendo-toolbar-padding-x-md !important; // sass-lint:disable-line no-important
+        padding: $kendo-toolbar-md-padding-y $kendo-toolbar-md-padding-x !important; // sass-lint:disable-line no-important
         border-width: $kendo-toolbar-border-width;
         border-style: solid;
         display: flex;
         flex-flow: row nowrap;
-        gap: $kendo-toolbar-spacing-md;
+        gap: $kendo-toolbar-md-spacing;
         align-items: center;
 
         .k-toolbar {
@@ -196,8 +196,8 @@
 
     // Overflow container
     .k-overflow-container {
-        font-size: $kendo-menu-popup-font-size-md;
-        line-height: $kendo-menu-popup-line-height-md;
+        font-size: $kendo-menu-popup-md-font-size;
+        line-height: $kendo-menu-popup-md-line-height;
 
         > .k-item {
             border-color: inherit;
@@ -214,7 +214,7 @@
 
         // Button
         .k-overflow-button {
-            padding: $kendo-menu-popup-item-padding-y-md $kendo-menu-popup-item-padding-x-md;
+            padding: $kendo-menu-popup-md-item-padding-y $kendo-menu-popup-md-item-padding-x;
             width: 100%;
             height: auto;
             border-width: 0;

package/scss/toolbar/_variables.scss

@@ -3,23 +3,23 @@
 /// The horizontal padding of the toolbar.
 /// @group toolbar
 $kendo-toolbar-padding-x: null !default;
-$kendo-toolbar-padding-x-sm: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-toolbar-padding-x-md: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-toolbar-padding-x-lg: k-map-get( $kendo-spacing, 2.5 ) !default;
+$kendo-toolbar-sm-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-toolbar-md-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-lg-padding-x: k-map-get( $kendo-spacing, 2.5 ) !default;
 
 /// The vertical padding of the toolbar.
 /// @group toolbar
 $kendo-toolbar-padding-y: null !default;
-$kendo-toolbar-padding-y-sm: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-toolbar-padding-y-md: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-toolbar-padding-y-lg: k-map-get( $kendo-spacing, 2.5 ) !default;
+$kendo-toolbar-sm-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-toolbar-md-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-lg-padding-y: k-map-get( $kendo-spacing, 2.5 ) !default;
 
 /// The spacing between the toolbar tools.
 /// @group toolbar
 $kendo-toolbar-spacing: null !default;
-$kendo-toolbar-spacing-sm: k-map-get( $kendo-spacing, 1.5 ) !default;
-$kendo-toolbar-spacing-md: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-toolbar-spacing-lg: k-map-get( $kendo-spacing, 2.5 ) !default;
+$kendo-toolbar-sm-spacing: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-toolbar-md-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-lg-spacing: k-map-get( $kendo-spacing, 2.5 ) !default;
 
 /// Width of the border around the toolbar.
 /// @group toolbar
@@ -30,23 +30,23 @@ $kendo-toolbar-border-radius: null !default;
 
 /// Font family of the toolbar.
 /// @group toolbar
-$kendo-toolbar-font-family: $font-family !default;
+$kendo-toolbar-font-family: $kendo-font-family !default;
 /// Font size of the toolbar.
 /// @group toolbar
-$kendo-toolbar-font-size: $font-size !default;
+$kendo-toolbar-font-size: $kendo-font-size-md !default;
 /// Line height of the toolbar.
 /// @group toolbar
-$kendo-toolbar-line-height: $line-height !default;
+$kendo-toolbar-line-height: $kendo-line-height-md !default;
 
 /// Background color of the toolbar.
 /// @group toolbar
-$kendo-toolbar-bg: $base-bg !default;
+$kendo-toolbar-bg: $kendo-base-bg !default;
 /// Text color of the toolbar.
 /// @group toolbar
-$kendo-toolbar-text: $base-text !default;
+$kendo-toolbar-text: $kendo-base-text !default;
 /// Color of the border around the toolbar.
 /// @group toolbar
-$kendo-toolbar-border: $base-border !default;
+$kendo-toolbar-border: $kendo-base-border !default;
 /// Gradient of the toolbar.
 /// @group toolbar
 $kendo-toolbar-gradient: null !default;
@@ -70,18 +70,18 @@ $kendo-toolbar-item-shadow: $kendo-button-focus-shadow !default;
 /// @group toolbar
 $kendo-toolbar-sizes: (
     sm: (
-        padding-x: $kendo-toolbar-padding-x-sm,
-        padding-y: $kendo-toolbar-padding-y-sm,
-        spacing: $kendo-toolbar-spacing-sm
+        padding-x: $kendo-toolbar-sm-padding-x,
+        padding-y: $kendo-toolbar-sm-padding-y,
+        spacing: $kendo-toolbar-sm-spacing
     ),
     md: (
-        padding-x: $kendo-toolbar-padding-x-md,
-        padding-y: $kendo-toolbar-padding-y-md,
-        spacing: $kendo-toolbar-spacing-md
+        padding-x: $kendo-toolbar-md-padding-x,
+        padding-y: $kendo-toolbar-md-padding-y,
+        spacing: $kendo-toolbar-md-spacing
     ),
     lg: (
-        padding-x: $kendo-toolbar-padding-x-lg,
-        padding-y: $kendo-toolbar-padding-y-lg,
-        spacing: $kendo-toolbar-spacing-lg
+        padding-x: $kendo-toolbar-lg-padding-x,
+        padding-y: $kendo-toolbar-lg-padding-y,
+        spacing: $kendo-toolbar-lg-spacing
     )
 ) !default;

package/scss/tooltip/_layout.scss

@@ -1,18 +1,18 @@
 @include exports("tooltip/layout") {
 
     .k-tooltip {
-        @include border-radius( $tooltip-border-radius );
+        @include border-radius( $kendo-tooltip-border-radius );
         margin: 0;
-        padding: $tooltip-padding-y $tooltip-padding-x;
-        // max-width: $tooltip-max-width;
-        border-width: $tooltip-border-width;
+        padding: $kendo-tooltip-padding-y $kendo-tooltip-padding-x;
+        // max-width: $kendo-tooltip-max-width;
+        border-width: $kendo-tooltip-border-width;
         border-style: solid;
         box-sizing: border-box;
         background-repeat: repeat-x;
         outline: 0;
-        font-family: $tooltip-font-family;
-        font-size: $tooltip-font-size;
-        line-height: $tooltip-line-height;
+        font-family: $kendo-tooltip-font-family;
+        font-size: $kendo-tooltip-font-size;
+        line-height: $kendo-tooltip-line-height;
         display: flex;
         flex-flow: row nowrap;
         align-items: flex-start;
@@ -35,8 +35,8 @@
 
     .k-tooltip-title {
         margin-bottom: .25em;
-        font-size: $tooltip-title-font-size;
-        line-height: $tooltip-title-line-height;
+        font-size: $kendo-tooltip-title-font-size;
+        line-height: $kendo-tooltip-title-line-height;
     }
 
     .k-tooltip-content {
@@ -59,9 +59,9 @@
 
     // Callout
     .k-callout {
-        width: ($tooltip-callout-size * 2);
-        height: ($tooltip-callout-size * 2);
-        border-width: $tooltip-callout-size;
+        width: ($kendo-tooltip-callout-size * 2);
+        height: ($kendo-tooltip-callout-size * 2);
+        border-width: $kendo-tooltip-callout-size;
         border-style: solid;
         border-color: transparent;
         position: absolute;
@@ -73,38 +73,38 @@
     // Remove margin tweaking and uncomment when their implementation is fixed.
 
     .k-callout-n {
-        margin-left: -$tooltip-callout-size;
+        margin-left: -$kendo-tooltip-callout-size;
         border-bottom-color: currentColor;
         // top: 0;
-        top: (-$tooltip-callout-size * 2);
+        top: (-$kendo-tooltip-callout-size * 2);
         left: 50%;
         // transform: translate(-50%, -100%);
         pointer-events: none;
     }
     .k-callout-e {
-        margin-top: -$tooltip-callout-size;
+        margin-top: -$kendo-tooltip-callout-size;
         border-left-color: currentColor;
         top: 50%;
         // right: 0;
-        right: (-$tooltip-callout-size * 2);
+        right: (-$kendo-tooltip-callout-size * 2);
         // transform: translate(100%, -50%);
         pointer-events: none;
     }
     .k-callout-s {
-        margin-left: -$tooltip-callout-size;
+        margin-left: -$kendo-tooltip-callout-size;
         border-top-color: currentColor;
         // bottom: 0;
-        bottom: (-$tooltip-callout-size * 2);
+        bottom: (-$kendo-tooltip-callout-size * 2);
         left: 50%;
         // transform: translate(-50%, 100%);
         pointer-events: none;
     }
     .k-callout-w {
-        margin-top: -$tooltip-callout-size;
+        margin-top: -$kendo-tooltip-callout-size;
         border-right-color: currentColor;
         top: 50%;
         // left: 0;
-        left: (-$tooltip-callout-size * 2);
+        left: (-$kendo-tooltip-callout-size * 2);
         // transform: translate(-100%, -50%);
         pointer-events: none;
     }

package/scss/tooltip/_theme.scss

@@ -1,7 +1,7 @@
 @include exports("tooltip/theme") {
     .k-tooltip-wrapper {
         .k-tooltip {
-            box-shadow: $popup-shadow;
+            box-shadow: $kendo-popup-shadow;
         }
     }
 
@@ -9,13 +9,13 @@
     // Default tooltip
     .k-tooltip {
         @include fill(
-            $tooltip-text,
-            $tooltip-bg,
-            $tooltip-border
+            $kendo-tooltip-text,
+            $kendo-tooltip-bg,
+            $kendo-tooltip-border
         );
 
         .k-callout {
-            color: $tooltip-bg;
+            color: $kendo-tooltip-bg;
         }
     }
 
@@ -23,57 +23,57 @@
     // Tooltip variants
     .k-tooltip-primary {
         @include fill(
-            $tooltip-primary-text,
-            $tooltip-primary-bg,
-            $tooltip-primary-border
+            $kendo-tooltip-primary-text,
+            $kendo-tooltip-primary-bg,
+            $kendo-tooltip-primary-border
         );
 
         .k-callout {
-            color: $tooltip-primary-bg;
+            color: $kendo-tooltip-primary-bg;
         }
     }
     .k-tooltip-info {
         @include fill(
-            $tooltip-info-text,
-            $tooltip-info-bg,
-            $tooltip-info-border
+            $kendo-tooltip-info-text,
+            $kendo-tooltip-info-bg,
+            $kendo-tooltip-info-border
         );
 
         .k-callout {
-            color: $tooltip-info-bg;
+            color: $kendo-tooltip-info-bg;
         }
     }
     .k-tooltip-success {
         @include fill(
-            $tooltip-success-text,
-            $tooltip-success-bg,
-            $tooltip-success-border
+            $kendo-tooltip-success-text,
+            $kendo-tooltip-success-bg,
+            $kendo-tooltip-success-border
         );
 
         .k-callout {
-            color: $tooltip-success-bg;
+            color: $kendo-tooltip-success-bg;
         }
     }
     .k-tooltip-warning {
         @include fill(
-            $tooltip-warning-text,
-            $tooltip-warning-bg,
-            $tooltip-warning-border
+            $kendo-tooltip-warning-text,
+            $kendo-tooltip-warning-bg,
+            $kendo-tooltip-warning-border
         );
 
         .k-callout {
-            color: $tooltip-warning-bg;
+            color: $kendo-tooltip-warning-bg;
         }
     }
     .k-tooltip-error {
         @include fill(
-            $tooltip-error-text,
-            $tooltip-error-bg,
-            $tooltip-error-border
+            $kendo-tooltip-error-text,
+            $kendo-tooltip-error-bg,
+            $kendo-tooltip-error-border
         );
 
         .k-callout {
-            color: $tooltip-error-bg;
+            color: $kendo-tooltip-error-bg;
         }
     }
 }

package/scss/tooltip/_variables.scss

@@ -1,35 +1,35 @@
 // Tooltip
-$tooltip-padding-y: $kendo-padding-md-y !default;
-$tooltip-padding-x: $kendo-padding-md-x !default;
-$tooltip-max-width: null !default;
-$tooltip-border-width: 0px !default;
-$tooltip-border-radius: $kendo-border-radius-md !default;
+$kendo-tooltip-padding-y: $kendo-padding-md-y !default;
+$kendo-tooltip-padding-x: $kendo-padding-md-x !default;
+$kendo-tooltip-max-width: null !default;
+$kendo-tooltip-border-width: 0px !default;
+$kendo-tooltip-border-radius: $kendo-border-radius-md !default;
 
-$tooltip-font-family: $font-family !default;
-$tooltip-font-size: $font-size !default;
-$tooltip-line-height: 1.25 !default;
+$kendo-tooltip-font-family: $kendo-font-family !default;
+$kendo-tooltip-font-size: $kendo-font-size-md !default;
+$kendo-tooltip-line-height: 1.25 !default;
 
-$tooltip-title-font-size: ($tooltip-font-size * 1.25) !default;
-$tooltip-title-line-height: 1 !default;
+$kendo-tooltip-title-font-size: ($kendo-tooltip-font-size * 1.25) !default;
+$kendo-tooltip-title-line-height: 1 !default;
 
-$tooltip-callout-size: 6px !default;
+$kendo-tooltip-callout-size: 6px !default;
 
-$tooltip-bg: rgba( k-contrast-legacy( $kendo-body-bg ), .75 ) !default;
-$tooltip-text: k-contrast-legacy( $tooltip-bg ) !default;
-$tooltip-border: $tooltip-bg !default;
+$kendo-tooltip-bg: rgba( k-contrast-legacy( $kendo-body-bg ), .75 ) !default;
+$kendo-tooltip-text: k-contrast-legacy( $kendo-tooltip-bg ) !default;
+$kendo-tooltip-border: $kendo-tooltip-bg !default;
 
-$tooltip-primary-bg: $kendo-color-primary !default;
-$tooltip-primary-text: k-contrast-legacy( $tooltip-primary-bg ) !default;
-$tooltip-primary-border: $tooltip-primary-bg !default;
-$tooltip-info-bg: $kendo-color-info !default;
-$tooltip-info-text: k-contrast-legacy( $tooltip-info-bg ) !default;
-$tooltip-info-border: $tooltip-info-bg !default;
-$tooltip-success-bg: $kendo-color-success !default;
-$tooltip-success-text: k-contrast-legacy( $tooltip-success-bg ) !default;
-$tooltip-success-border: $tooltip-success-bg !default;
-$tooltip-warning-bg: $kendo-color-warning !default;
-$tooltip-warning-text: k-contrast-legacy( $tooltip-warning-bg ) !default;
-$tooltip-warning-border: $tooltip-warning-bg !default;
-$tooltip-error-bg: $kendo-color-error !default;
-$tooltip-error-text: k-contrast-legacy( $tooltip-error-bg ) !default;
-$tooltip-error-border: $tooltip-error-bg !default;
+$kendo-tooltip-primary-bg: $kendo-color-primary !default;
+$kendo-tooltip-primary-text: k-contrast-legacy( $kendo-tooltip-primary-bg ) !default;
+$kendo-tooltip-primary-border: $kendo-tooltip-primary-bg !default;
+$kendo-tooltip-info-bg: $kendo-color-info !default;
+$kendo-tooltip-info-text: k-contrast-legacy( $kendo-tooltip-info-bg ) !default;
+$kendo-tooltip-info-border: $kendo-tooltip-info-bg !default;
+$kendo-tooltip-success-bg: $kendo-color-success !default;
+$kendo-tooltip-success-text: k-contrast-legacy( $kendo-tooltip-success-bg ) !default;
+$kendo-tooltip-success-border: $kendo-tooltip-success-bg !default;
+$kendo-tooltip-warning-bg: $kendo-color-warning !default;
+$kendo-tooltip-warning-text: k-contrast-legacy( $kendo-tooltip-warning-bg ) !default;
+$kendo-tooltip-warning-border: $kendo-tooltip-warning-bg !default;
+$kendo-tooltip-error-bg: $kendo-color-error !default;
+$kendo-tooltip-error-text: k-contrast-legacy( $kendo-tooltip-error-bg ) !default;
+$kendo-tooltip-error-border: $kendo-tooltip-error-bg !default;

package/scss/treelist/_layout.scss

@@ -33,6 +33,8 @@
             transform: translate(0, -50%);
         }
 
+        .k-table-row.k-footer td,
+        .k-table-row.k-footer-template td,
         .k-table-row.k-footer .k-table-td,
         .k-table-row.k-footer-template .k-table-td {
             border-width: $kendo-treelist-footer-row-border-width 0;
@@ -40,6 +42,7 @@
             font-weight: bold;
         }
 
+        .k-table-row.k-footer + .k-table-row.k-footer td,
         .k-table-row.k-footer + .k-table-row.k-footer .k-table-td {
             border-top-width: 0;
         }

package/scss/treeview/_variables.scss

@@ -1,23 +1,20 @@
-@import "../typography/_variables.scss";
-
-
 // Treeview
 
 /// Font family of the treeview component.
 /// @group treeview
-$kendo-treeview-font-family: $font-family !default;
+$kendo-treeview-font-family: $kendo-font-family !default;
 /// Font size of the treeview component.
 /// @group treeview
-$kendo-treeview-font-size: $font-size-md !default;
-$kendo-treeview-font-size-sm: $font-size-md !default;
-$kendo-treeview-font-size-md: $font-size-md !default;
-$kendo-treeview-font-size-lg: $font-size-lg !default;
+$kendo-treeview-font-size: $kendo-font-size-md !default;
+$kendo-treeview-sm-font-size: $kendo-font-size-md !default;
+$kendo-treeview-md-font-size: $kendo-font-size-md !default;
+$kendo-treeview-lg-font-size: $kendo-font-size-lg !default;
 /// Line height of the treeview component.
 /// @group treeview
-$kendo-treeview-line-height: $line-height-md !default;
-$kendo-treeview-line-height-sm: $line-height-md !default;
-$kendo-treeview-line-height-md: $line-height-md !default;
-$kendo-treeview-line-height-lg: $line-height-lg !default;
+$kendo-treeview-line-height: $kendo-line-height-md !default;
+$kendo-treeview-sm-line-height: $kendo-line-height-md !default;
+$kendo-treeview-md-line-height: $kendo-line-height-md !default;
+$kendo-treeview-lg-line-height: $kendo-line-height-lg !default;
 /// Indentation of child groups in treeview component.
 /// @group treeview
 $kendo-treeview-indent: 16px !default;
@@ -25,15 +22,15 @@ $kendo-treeview-indent: 16px !default;
 /// Horizontal padding of treeview items.
 /// @group treeview
 $kendo-treeview-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-treeview-item-padding-x-sm: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-treeview-item-padding-x-md: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-treeview-item-padding-x-lg: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-treeview-sm-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-md-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-lg-item-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
 /// Vertical padding of treeview items.
 /// @group treeview
 $kendo-treeview-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-treeview-item-padding-y-sm: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
-$kendo-treeview-item-padding-y-md: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-treeview-item-padding-y-lg: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-treeview-sm-item-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-treeview-md-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-treeview-lg-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 /// Border width of treeview items.
 /// @group treeview
 $kendo-treeview-item-border-width: 0px !default;
@@ -46,22 +43,22 @@ $kendo-treeview-item-border-radius: $kendo-border-radius-md !default;
 /// @group treeview
 $kendo-treeview-sizes: (
     sm: (
-        font-size: $kendo-treeview-font-size-sm,
-        line-height: $kendo-treeview-line-height-sm,
-        item-padding-x: $kendo-treeview-item-padding-x-sm,
-        item-padding-y: $kendo-treeview-item-padding-y-sm
+        font-size: $kendo-treeview-sm-font-size,
+        line-height: $kendo-treeview-sm-line-height,
+        item-padding-x: $kendo-treeview-sm-item-padding-x,
+        item-padding-y: $kendo-treeview-sm-item-padding-y
     ),
     md: (
-        font-size: $kendo-treeview-font-size-md,
-        line-height: $kendo-treeview-line-height-md,
-        item-padding-x: $kendo-treeview-item-padding-x-md,
-        item-padding-y: $kendo-treeview-item-padding-y-md
+        font-size: $kendo-treeview-md-font-size,
+        line-height: $kendo-treeview-md-line-height,
+        item-padding-x: $kendo-treeview-md-item-padding-x,
+        item-padding-y: $kendo-treeview-md-item-padding-y
     ),
     lg: (
-        font-size: $kendo-treeview-font-size-lg,
-        line-height: $kendo-treeview-line-height-lg,
-        item-padding-x: $kendo-treeview-item-padding-x-lg,
-        item-padding-y: $kendo-treeview-item-padding-y-lg
+        font-size: $kendo-treeview-lg-font-size,
+        line-height: $kendo-treeview-lg-line-height,
+        item-padding-x: $kendo-treeview-lg-item-padding-x,
+        item-padding-y: $kendo-treeview-lg-item-padding-y
     )
 ) !default;
 
@@ -111,7 +108,7 @@ $kendo-treeview-item-focus-shadow: $kendo-focus-shadow !default;
 $kendo-treeview-loadmore-bg: transparent !default;
 /// Text color of load more.
 /// @group treeview
-$kendo-treeview-loadmore-text: $link-text !default;
+$kendo-treeview-loadmore-text: $kendo-link-text !default;
 /// Border color of load more.
 /// @group treeview
 $kendo-treeview-loadmore-border: null !default;
@@ -121,7 +118,7 @@ $kendo-treeview-loadmore-border: null !default;
 $kendo-treeview-loadmore-hover-bg: transparent !default;
 /// Text color of a hovered load more.
 /// @group treeview
-$kendo-treeview-loadmore-hover-text: $link-hover-text !default;
+$kendo-treeview-loadmore-hover-text: $kendo-link-hover-text !default;
 /// Border color of a hovered load more.
 /// @group treeview
 $kendo-treeview-loadmore-hover-border: null !default;
@@ -131,7 +128,7 @@ $kendo-treeview-loadmore-hover-border: null !default;
 $kendo-treeview-loadmore-focus-bg: transparent !default;
 /// Text color of a focused load more.
 /// @group treeview
-$kendo-treeview-loadmore-focus-text: $link-hover-text !default;
+$kendo-treeview-loadmore-focus-text: $kendo-link-hover-text !default;
 /// Border color of a focused load more.
 /// @group treeview
 $kendo-treeview-loadmore-focus-border: null !default;