@progress/kendo-theme-default 5.12.1-dev.1 → 5.12.1-dev.3

package/scss/gantt/_theme.scss

@@ -2,23 +2,23 @@
 
     .k-gantt {
         @include fill(
-            $gantt-text,
-            $gantt-bg,
-            $gantt-border
+            $kendo-gantt-text,
+            $kendo-gantt-bg,
+            $kendo-gantt-border
         );
 
         // React gantt
         .k-treelist-scrollable {
             .k-task-milestone .k-task-milestone-content {
                 @include fill(
-                    $bg: $gantt-milestone-bg,
-                    $border: $gantt-milestone-border
+                    $bg: $kendo-gantt-milestone-bg,
+                    $border: $kendo-gantt-milestone-border
                 );
             }
             .k-task-milestone.k-selected .k-task-milestone-content {
                 @include fill(
-                    $bg: $gantt-milestone-selected-bg,
-                    $border: $gantt-milestone-selected-border
+                    $bg: $kendo-gantt-milestone-selected-bg,
+                    $border: $kendo-gantt-milestone-selected-border
                 );
             }
         }
@@ -26,11 +26,11 @@
         .k-gantt-dependencies-svg {
             polyline {
                 fill: none;
-                stroke: $gantt-line-fill;
+                stroke: $kendo-gantt-line-fill;
             }
 
             polyline.k-selected {
-                stroke: $gantt-line-selected-fill;
+                stroke: $kendo-gantt-line-selected-fill;
             }
         }
     }
@@ -46,9 +46,9 @@
     // Treelist
     .k-gantt-treelist {
         @include fill(
-            $gantt-treelist-text,
-            $gantt-treelist-bg,
-            $gantt-treelist-border
+            $kendo-gantt-treelist-text,
+            $kendo-gantt-treelist-bg,
+            $kendo-gantt-treelist-border
         );
 
         .k-treelist,
@@ -66,9 +66,9 @@
     // Non work hours
     .k-gantt .k-nonwork-hour {
         @include fill(
-            $gantt-nonwork-text,
-            $gantt-nonwork-bg,
-            $gantt-nonwork-border
+            $kendo-gantt-nonwork-text,
+            $kendo-gantt-nonwork-bg,
+            $kendo-gantt-nonwork-border
         );
     }
 
@@ -77,15 +77,15 @@
     .k-task-dot {}
     .k-task-dot::before {
         @include fill(
-            $bg: $gantt-dot-bg,
-            $border: $gantt-dot-border
+            $bg: $kendo-gantt-dot-bg,
+            $border: $kendo-gantt-dot-border
         );
     }
     .k-task-dot:hover::before,
     .k-task-dot.k-hover::before {
         @include fill(
-            $bg: $gantt-dot-hover-bg,
-            $border: $gantt-dot-hover-border
+            $bg: $kendo-gantt-dot-hover-bg,
+            $border: $kendo-gantt-dot-hover-border
         );
     }
 
@@ -93,55 +93,55 @@
     // Milestone
     .k-task-milestone {
         @include fill(
-            $bg: $gantt-milestone-bg,
-            $border: $gantt-milestone-border
+            $bg: $kendo-gantt-milestone-bg,
+            $border: $kendo-gantt-milestone-border
         );
 
         &.k-task-delayed {
-            @include repeating-striped-gradient($gantt-delayed-bg, $kendo-body-bg, 90deg, 4px, 2px);
+            @include repeating-striped-gradient($kendo-gantt-delayed-bg, $kendo-body-bg, 90deg, 4px, 2px);
         }
 
         &.k-task-advanced {
             @include fill(
-                $bg: $gantt-advanced-bg
+                $bg: $kendo-gantt-advanced-bg
             );
         }
     }
     .k-task-milestone.k-selected {
         background-image: none;
         @include fill(
-            $bg: $gantt-milestone-selected-bg,
-            $border: $gantt-milestone-selected-border
+            $bg: $kendo-gantt-milestone-selected-bg,
+            $border: $kendo-gantt-milestone-selected-border
         );
     }
 
 
     // Summary
     .k-task-summary {
-        color: $gantt-summary-bg;
+        color: $kendo-gantt-summary-bg;
 
         &.k-task-delayed {
-            color: $gantt-delayed-bg-lighter;
+            color: $kendo-gantt-delayed-bg-lighter;
         }
 
         &.k-task-advanced {
-            color: $gantt-advanced-bg-lighter;
+            color: $kendo-gantt-advanced-bg-lighter;
         }
     }
     .k-task-summary-complete {
-        color: $gantt-summary-progress-bg;
+        color: $kendo-gantt-summary-progress-bg;
     }
     .k-task-delayed .k-task-summary-complete {
-        color: $gantt-delayed-bg;
+        color: $kendo-gantt-delayed-bg;
     }
     .k-task-advanced .k-task-summary-complete {
-        color: $gantt-advanced-bg;
+        color: $kendo-gantt-advanced-bg;
     }
     .k-task-summary.k-selected {
-        color: $gantt-summary-selected-bg;
+        color: $kendo-gantt-summary-selected-bg;
 
         .k-task-summary-complete {
-            color: $gantt-summary-progress-selected-bg;
+            color: $kendo-gantt-summary-progress-selected-bg;
         }
     }
 
@@ -149,55 +149,55 @@
     // Tasks
     .k-task-single {
         @include fill(
-            $gantt-task-text,
-            $gantt-task-bg,
-            $gantt-task-border
+            $kendo-gantt-task-text,
+            $kendo-gantt-task-bg,
+            $kendo-gantt-task-border
         );
 
         &.k-task-delayed {
             @include fill(
-                $bg: $gantt-delayed-bg-lighter
+                $bg: $kendo-gantt-delayed-bg-lighter
             );
         }
 
         &.k-task-advanced {
             @include fill(
-                $bg: $gantt-advanced-bg-lighter
+                $bg: $kendo-gantt-advanced-bg-lighter
             );
         }
 
         .k-task-complete {
-            background-color: $gantt-task-progress-bg;
+            background-color: $kendo-gantt-task-progress-bg;
         }
     }
     .k-task-delayed .k-task-complete {
         @include fill(
-            $bg: $gantt-delayed-bg
+            $bg: $kendo-gantt-delayed-bg
         );
     }
     .k-task-advanced .k-task-complete {
         @include fill(
-            $bg: $gantt-advanced-bg
+            $bg: $kendo-gantt-advanced-bg
         );
     }
     .k-task-single.k-selected {
         @include fill(
-            $gantt-task-selected-text,
-            $gantt-task-selected-bg,
-            $gantt-task-selected-border
+            $kendo-gantt-task-selected-text,
+            $kendo-gantt-task-selected-bg,
+            $kendo-gantt-task-selected-border
         );
 
         .k-task-complete {
-            background-color: $gantt-task-progress-selected-bg;
+            background-color: $kendo-gantt-task-progress-selected-bg;
         }
     }
 
     // Dependency Lines
     .k-gantt-line {
-        color: $gantt-line-fill;
+        color: $kendo-gantt-line-fill;
     }
     .k-gantt-line.k-selected {
-        color: $gantt-line-selected-fill;
+        color: $kendo-gantt-line-selected-fill;
     }
 
     // Planned element
@@ -205,70 +205,70 @@
         .k-task-moment {
             @include fill(
                 $bg: transparent,
-                $border: $gantt-planned-border
+                $border: $kendo-gantt-planned-border
             );
         }
         .k-task-duration {
             @include fill(
-                $bg: $gantt-planned-bg
+                $bg: $kendo-gantt-planned-bg
             );
         }
         &:hover .k-task-moment {
             @include fill(
-                $bg: $gantt-planned-bg
+                $bg: $kendo-gantt-planned-bg
             );
         }
     }
 
     // Delay offset
     .k-task-offset {
-        @include repeating-striped-gradient($gantt-delayed-bg, $kendo-body-bg, 135deg, 4px, 2px);
+        @include repeating-striped-gradient($kendo-gantt-delayed-bg, $kendo-body-bg, 135deg, 4px, 2px);
 
         .k-resize-e::before {
             @include fill(
-                $border: $gantt-action-on-offset-text
+                $border: $kendo-gantt-action-on-offset-text
             );
         }
 
         .k-task-actions {
-            color: $gantt-action-on-offset-text;
+            color: $kendo-gantt-action-on-offset-text;
         }
     }
 
     .k-task-offset:hover {
-        @include repeating-striped-gradient($gantt-delayed-bg-lighter, $kendo-body-bg, 135deg, 4px, 2px);
+        @include repeating-striped-gradient($kendo-gantt-delayed-bg-lighter, $kendo-body-bg, 135deg, 4px, 2px);
     }
 
     .k-pdf-export .k-task-offset {
-        background-color: $gantt-delayed-bg;
+        background-color: $kendo-gantt-delayed-bg;
     }
 
     // Tooltips
     .k-offset-tooltip-delayed {
         @include fill(
-            $bg: $gantt-delayed-bg
+            $bg: $kendo-gantt-delayed-bg
         );
     }
 
     .k-planned-tooltip {
         @include fill(
-            $bg: $gantt-planned-bg
+            $bg: $kendo-gantt-planned-bg
         );
     }
 
     .k-gantt-tooltip-validation {
         &::before {
-            background-color: $gantt-validation-tooltip-border;
+            background-color: $kendo-gantt-validation-tooltip-border;
         }
     }
     .k-gantt-tooltip-valid {
         &::before {
-            background-color: $gantt-validation-tooltip-valid-border;
+            background-color: $kendo-gantt-validation-tooltip-valid-border;
         }
     }
     .k-gantt-tooltip-invalid {
         &::before {
-            background-color: $gantt-validation-tooltip-invalid-border;
+            background-color: $kendo-gantt-validation-tooltip-invalid-border;
         }
     }
 }

package/scss/gantt/_variables.scss

@@ -1,93 +1,97 @@
+@import "../table/_variables.scss";
+
+
 // Gantt
-$gantt-border-width: 1px !default;
-$gantt-font-family: $font-family !default;
-$gantt-font-size: $font-size !default;
-$gantt-line-height: $line-height !default;
-
-$gantt-bg: $kendo-component-bg !default;
-$gantt-text: $kendo-component-text !default;
-$gantt-border: $kendo-component-border !default;
-
-$gantt-treelist-bg: null !default;
-$gantt-treelist-text: null !default;
-$gantt-treelist-border: null !default;
-
-$gantt-nonwork-bg: rgba( k-contrast-legacy( $gantt-bg ), .025 ) !default;
-$gantt-nonwork-text: null !default;
-$gantt-nonwork-border: null !default;
-
-$gantt-line-size: 2px !default;
-$gantt-line-fill: k-contrast-legacy( $gantt-bg ) !default;
-$gantt-line-selected-fill: $kendo-color-primary !default;
-
-$gantt-dot-size: 8px !default;
-$gantt-dot-spacing: 4px !default;
-$gantt-dot-bg: $gantt-text !default;
-$gantt-dot-border: null !default;
-$gantt-dot-hover-bg: $gantt-bg !default;
-$gantt-dot-hover-border: $gantt-text !default;
-
-$gantt-milestone-bg: $gantt-text !default;
-$gantt-milestone-border: $gantt-border !default;
-$gantt-milestone-selected-bg: $kendo-selected-bg !default;
-$gantt-milestone-selected-border: $kendo-selected-border !default;
-
-$gantt-summary-bg: k-try-tint( $gantt-text, 1 ) !default;
-$gantt-summary-progress-bg: k-try-shade( $gantt-text, 5 ) !default;
-$gantt-summary-selected-bg: k-try-tint( $kendo-selected-bg, 6 ) !default;
-$gantt-summary-progress-selected-bg: $kendo-selected-bg !default;
-
-$gantt-task-border-width: 0px !default;
-$gantt-task-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$gantt-task-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
-$gantt-task-bg: k-try-tint( $gantt-text, 2 ) !default;
-$gantt-task-text: k-contrast-legacy( $gantt-text ) !default;
-$gantt-task-border: null !default;
-$gantt-task-progress-bg: $gantt-text !default;
-$gantt-task-selected-bg: k-try-tint( $kendo-selected-bg, 6 ) !default;
-$gantt-task-selected-text: $kendo-selected-text !default;
-$gantt-task-selected-border: null !default;
-$gantt-task-progress-selected-bg: $kendo-selected-bg !default;
-
-$gantt-planned-margin-y: .35em !default;
-$gantt-planned-border-width: 2px !default;
-$gantt-planned-line-height: .75em !default;
-
-$gantt-planned-dependency-margin-y: .55em !default;
-
-$gantt-planned-moment-width: 6px !default;
-$gantt-planned-moment-height: $gantt-planned-moment-width !default;
-$gantt-planned-moment-border-radius: calc( ( #{$gantt-planned-border-width * 2} + #{$gantt-planned-moment-width} ) / 2 ) !default;
-$gantt-planned-moment-left-margin-x: calc( #{k-math-div( $gantt-planned-border-width, 2 )} - #{$gantt-planned-moment-border-radius} ) !default;
-$gantt-planned-milestone-moment-margin-x: k-math-div( $gantt-planned-moment-width, 2 ) !default;
-
-$gantt-planned-duration-height: $gantt-planned-border-width !default;
-$gantt-planned-duration-hover-height: calc( #{$gantt-planned-border-width} + 1px ) !default;
-
-$gantt-planned-single-drag-hint-top: 0 !default;
-$gantt-planned-summary-drag-hint-top: .5em !default;
-$gantt-planned-milestone-drag-hint-top: .3em !default;
-
-$gantt-rtl-milestone-wrap-margin-x: -2.4em !default;
-$gantt-rtl-milestone-planned-moment-margin-x: .2em !default;
-$gantt-rtl-milestone-dot-start-margin-x: -.1em !default;
-
-$gantt-planned-offset-resize-handler-margin-x: 1.4em !default;
-
-$gantt-planned-bg: $kendo-color-primary !default;
-$gantt-planned-border: $gantt-planned-bg !default;
-
-$gantt-delayed-bg: $kendo-color-error !default;
-$gantt-delayed-bg-lighter: k-color-tint($gantt-delayed-bg, 5) !default;
-
-$gantt-advanced-bg: $kendo-color-success !default;
-$gantt-advanced-bg-lighter: k-color-tint($gantt-advanced-bg, 5) !default;
-
-$gantt-action-on-offset-text: #000000 !default;
-$gantt-offset-resize-handler-top: 50% !default;
-
-$gantt-validation-tooltip-width: 200px !default;
-$gantt-validation-tooltip-label-width: 50px !default;
-$gantt-validation-tooltip-border: #656565 !default;
-$gantt-validation-tooltip-valid-border: $kendo-color-success !default;
-$gantt-validation-tooltip-invalid-border: $kendo-color-error !default;
+
+$kendo-gantt-border-width: 1px !default;
+$kendo-gantt-font-family: $kendo-font-family !default;
+$kendo-gantt-font-size: $kendo-font-size-md !default;
+$kendo-gantt-line-height: $kendo-line-height-md !default;
+
+$kendo-gantt-bg: $kendo-component-bg !default;
+$kendo-gantt-text: $kendo-component-text !default;
+$kendo-gantt-border: $kendo-component-border !default;
+
+$kendo-gantt-treelist-bg: null !default;
+$kendo-gantt-treelist-text: null !default;
+$kendo-gantt-treelist-border: null !default;
+
+$kendo-gantt-nonwork-bg: rgba( k-contrast-legacy( $kendo-gantt-bg ), .025 ) !default;
+$kendo-gantt-nonwork-text: null !default;
+$kendo-gantt-nonwork-border: null !default;
+
+$kendo-gantt-line-size: 2px !default;
+$kendo-gantt-line-fill: k-contrast-legacy( $kendo-gantt-bg ) !default;
+$kendo-gantt-line-selected-fill: $kendo-color-primary !default;
+
+$kendo-gantt-dot-size: 8px !default;
+$kendo-gantt-dot-spacing: 4px !default;
+$kendo-gantt-dot-bg: $kendo-gantt-text !default;
+$kendo-gantt-dot-border: null !default;
+$kendo-gantt-dot-hover-bg: $kendo-gantt-bg !default;
+$kendo-gantt-dot-hover-border: $kendo-gantt-text !default;
+
+$kendo-gantt-milestone-bg: $kendo-gantt-text !default;
+$kendo-gantt-milestone-border: $kendo-gantt-border !default;
+$kendo-gantt-milestone-selected-bg: $kendo-selected-bg !default;
+$kendo-gantt-milestone-selected-border: $kendo-selected-border !default;
+
+$kendo-gantt-summary-bg: k-try-tint( $kendo-gantt-text, 1 ) !default;
+$kendo-gantt-summary-progress-bg: k-try-shade( $kendo-gantt-text, 5 ) !default;
+$kendo-gantt-summary-selected-bg: k-try-tint( $kendo-selected-bg, 6 ) !default;
+$kendo-gantt-summary-progress-selected-bg: $kendo-selected-bg !default;
+
+$kendo-gantt-task-border-width: 0px !default;
+$kendo-gantt-task-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-gantt-task-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-gantt-task-bg: k-try-tint( $kendo-gantt-text, 2 ) !default;
+$kendo-gantt-task-text: k-contrast-legacy( $kendo-gantt-text ) !default;
+$kendo-gantt-task-border: null !default;
+$kendo-gantt-task-progress-bg: $kendo-gantt-text !default;
+$kendo-gantt-task-selected-bg: k-try-tint( $kendo-selected-bg, 6 ) !default;
+$kendo-gantt-task-selected-text: $kendo-selected-text !default;
+$kendo-gantt-task-selected-border: null !default;
+$kendo-gantt-task-progress-selected-bg: $kendo-selected-bg !default;
+
+$kendo-gantt-planned-margin-y: .35em !default;
+$kendo-gantt-planned-border-width: 2px !default;
+$kendo-gantt-planned-line-height: .75em !default;
+
+$kendo-gantt-planned-dependency-margin-y: .55em !default;
+
+$kendo-gantt-planned-moment-width: 6px !default;
+$kendo-gantt-planned-moment-height: $kendo-gantt-planned-moment-width !default;
+$kendo-gantt-planned-moment-border-radius: calc( ( #{$kendo-gantt-planned-border-width * 2} + #{$kendo-gantt-planned-moment-width} ) / 2 ) !default;
+$kendo-gantt-planned-moment-left-margin-x: calc( #{k-math-div( $kendo-gantt-planned-border-width, 2 )} - #{$kendo-gantt-planned-moment-border-radius} ) !default;
+$kendo-gantt-planned-milestone-moment-margin-x: k-math-div( $kendo-gantt-planned-moment-width, 2 ) !default;
+
+$kendo-gantt-planned-duration-height: $kendo-gantt-planned-border-width !default;
+$kendo-gantt-planned-duration-hover-height: calc( #{$kendo-gantt-planned-border-width} + 1px ) !default;
+
+$kendo-gantt-planned-single-drag-hint-top: 0 !default;
+$kendo-gantt-planned-summary-drag-hint-top: .5em !default;
+$kendo-gantt-planned-milestone-drag-hint-top: .3em !default;
+
+$kendo-gantt-rtl-milestone-wrap-margin-x: -2.4em !default;
+$kendo-gantt-rtl-milestone-planned-moment-margin-x: .2em !default;
+$kendo-gantt-rtl-milestone-dot-start-margin-x: -.1em !default;
+
+$kendo-gantt-planned-offset-resize-handler-margin-x: 1.4em !default;
+
+$kendo-gantt-planned-bg: $kendo-color-primary !default;
+$kendo-gantt-planned-border: $kendo-gantt-planned-bg !default;
+
+$kendo-gantt-delayed-bg: $kendo-color-error !default;
+$kendo-gantt-delayed-bg-lighter: k-color-tint($kendo-gantt-delayed-bg, 5) !default;
+
+$kendo-gantt-advanced-bg: $kendo-color-success !default;
+$kendo-gantt-advanced-bg-lighter: k-color-tint($kendo-gantt-advanced-bg, 5) !default;
+
+$kendo-gantt-action-on-offset-text: #000000 !default;
+$kendo-gantt-offset-resize-handler-top: 50% !default;
+
+$kendo-gantt-validation-tooltip-width: 200px !default;
+$kendo-gantt-validation-tooltip-label-width: 50px !default;
+$kendo-gantt-validation-tooltip-border: #656565 !default;
+$kendo-gantt-validation-tooltip-valid-border: $kendo-color-success !default;
+$kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;

package/scss/grid/_index.scss

@@ -22,8 +22,8 @@
 @import "../pager/_index.scss";
 @import "../chip/_index.scss";
 @import "../skeleton/_index.scss";
-@import "../utils/_float.scss";
-@import "../utils/_spacer.scss";
+// @import "../utils/_float.scss";
+// @import "../utils/_spacer.scss";
 @import "../list/_index.scss";
 @import "../table/_index.scss";
 

package/scss/grid/_layout.scss

@@ -194,7 +194,7 @@
             .k-sort-order {
                 display: inline-block;
                 vertical-align: top;
-                height: $icon-size;
+                height: $kendo-icon-size;
                 font-size: $kendo-grid-sorting-index-font-size;
                 margin-top: $kendo-grid-sorting-index-spacing-y;
                 margin-inline-start: $kendo-grid-sorting-index-spacing-x;
@@ -273,8 +273,8 @@
         }
 
         .k-grouping-row .k-icon {
-            margin-inline-start: calc( #{k-math-div( $icon-size, 2 )} - #{$kendo-grid-cell-padding-x} );
-            margin-inline-end: k-math-div( $icon-size, 2 );
+            margin-inline-start: calc( #{k-math-div( $kendo-icon-size, 2 )} - #{$kendo-grid-cell-padding-x} );
+            margin-inline-end: k-math-div( $kendo-icon-size, 2 );
             text-decoration: none;
         }
 
@@ -298,7 +298,7 @@
                 height: 100%;
                 // That causes an issue with grid material. Commenting it for now
                 // -- joneff
-                // line-height: $line-height;
+                // line-height: $kendo-line-height-md;
                 display: inline-block;
                 outline: 0;
             }
@@ -410,9 +410,9 @@
     }
 
     .k-grouping-dropclue {
-        width: ($kendo-grid-group-dropclue-size * 2);
+        width: ($kendo-grid-group-drop-hint-size * 2);
         position: absolute;
-        top: $kendo-grid-group-dropclue-top;
+        top: $kendo-grid-group-drop-hint-top;
         box-sizing: content-box;
 
         &::before,
@@ -423,7 +423,7 @@
         }
 
         &::before {
-            border-width: $kendo-grid-group-dropclue-size;
+            border-width: $kendo-grid-group-drop-hint-size;
             border-style: solid;
             border-left-color: transparent;
             border-right-color: transparent;
@@ -432,10 +432,10 @@
         }
 
         &::after {
-            width: $kendo-grid-group-dropclue-line-size;
-            height: calc(100% - #{$kendo-grid-group-dropclue-size});
-            top: $kendo-grid-group-dropclue-size;
-            inset-inline-start: calc( #{$kendo-grid-group-dropclue-size} - #{k-math-div( $kendo-grid-group-dropclue-line-size, 2 )} );
+            width: $kendo-grid-group-drop-hint-line-size;
+            height: calc(100% - #{$kendo-grid-group-drop-hint-size});
+            top: $kendo-grid-group-drop-hint-size;
+            inset-inline-start: calc( #{$kendo-grid-group-drop-hint-size} - #{k-math-div( $kendo-grid-group-drop-hint-line-size, 2 )} );
         }
     }
 
@@ -443,7 +443,7 @@
     // Grid header / footer
     .k-grid-header-wrap,
     .k-grid-footer-wrap {
-        margin-inline-end: - $kendo-grid-cell-vertical-border-width;
+        margin-inline-end: -#{$kendo-grid-cell-vertical-border-width};
         width: 100%;
         border-width: 0;
         border-inline-end-width: $kendo-grid-cell-vertical-border-width;
@@ -460,7 +460,7 @@
     .k-grid-header,
     .k-grid-footer {
         padding-inline-start: 0;
-        padding-inline-end: var(--kendo-scrollbar-width, #{$default-scrollbar-width});
+        padding-inline-end: var(--kendo-scrollbar-width, #{$kendo-scrollbar-width});
         border-width: 0;
         border-style: solid;
         border-color: inherit;
@@ -488,7 +488,7 @@
         border-top-width: 1px;
 
         .k-table-td {
-            height: $line-height-em;
+            height: $kendo-line-height-em;
         }
     }
 
@@ -647,7 +647,7 @@
     .k-pager-input {
         .k-numerictextbox {
             margin-block: 0;
-            margin-inline: k-math-div( $font-size, 2 );
+            margin-inline: k-math-div( $kendo-font-size-md, 2 );
             width: 3em;
         }
     }
@@ -910,7 +910,7 @@
                     width: $_button-calc-size;
                     height: $_button-calc-size;
                     line-height: $_button-line-height;
-                    bottom: calc( #{$_header-padding-y} + #{k-math-div( $line-height-em, 2)} - #{k-math-div( $kendo-button-inner-calc-size, 2 )} );
+                    bottom: calc( #{$_header-padding-y} + #{k-math-div( $kendo-line-height-em, 2)} - #{k-math-div( $kendo-button-inner-calc-size, 2 )} );
                 }
             }
 
@@ -925,7 +925,7 @@
             }
 
             .k-grouping-row .k-icon {
-                margin-inline-start: calc( #{k-math-div( $icon-size, 2 )} - #{$_cell-padding-x} );
+                margin-inline-start: calc( #{k-math-div( $kendo-icon-size, 2 )} - #{$_cell-padding-x} );
             }
 
             .k-grouping-dropclue {
@@ -1209,13 +1209,13 @@
         cursor: pointer;
 
         > .k-icon {
-            margin-inline-end: $icon-spacing;
+            margin-inline-end: $kendo-icon-spacing;
         }
     }
 
     .k-columnmenu-item-wrapper + .k-columnmenu-item-wrapper {
         border-top: 1px solid;
-        border-top-color: $popup-border;
+        border-top-color: $kendo-popup-border;
     }
 
     .k-columnmenu-item-content {