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

package/scss/pivotgrid/_variables.scss

@@ -1,5 +1,5 @@
 // Pivot grid
-$pivotgrid-spacer: map-get( $spacing, 4 ) !default;
+$pivotgrid-spacer: k-map-get( $kendo-spacing, 4 ) !default;
 $pivotgrid-padding-x: null !default;
 $pivotgrid-padding-y: null !default;
 $pivotgrid-font-family: $font-family !default;
@@ -11,29 +11,29 @@ $pivotgrid-icon-spacing: 8px !default;
 $pivotgrid-row-header-width: 300px !default;
 $pivotgrid-column-header-height: 75px !default;
 
-$pivotgrid-cell-padding-x: $table-cell-padding-x !default;
-$pivotgrid-cell-padding-y: $table-cell-padding-y !default;
+$pivotgrid-cell-padding-x: $kendo-table-cell-padding-x-md !default;
+$pivotgrid-cell-padding-y: $kendo-table-cell-padding-y-md !default;
 $pivotgrid-cell-border-width: 1px !default;
 
-$pivotgrid-bg: $component-bg !default;
-$pivotgrid-text: $component-text !default;
-$pivotgrid-border: $component-border !default;
+$pivotgrid-bg: $kendo-component-bg !default;
+$pivotgrid-text: $kendo-component-text !default;
+$pivotgrid-border: $kendo-component-border !default;
 
-$pivotgrid-alt-border: try-shade($pivotgrid-border, 2) !default;
+$pivotgrid-alt-border: k-try-shade($pivotgrid-border, 2) !default;
 
-$pivotgrid-headers-bg: $header-bg !default;
-$pivotgrid-headers-text: $header-text !default;
-$pivotgrid-headers-border: $header-border !default;
+$pivotgrid-headers-bg: $kendo-component-header-bg !default;
+$pivotgrid-headers-text: $kendo-component-header-text !default;
+$pivotgrid-headers-border: $kendo-component-header-border !default;
 
-$pivotgrid-total-bg: try-shade( $pivotgrid-bg, 1 ) !default;
-$pivotgrid-total-text: $header-text !default;
-$pivotgrid-total-border: $header-border !default;
+$pivotgrid-total-bg: k-try-shade( $pivotgrid-bg, 1 ) !default;
+$pivotgrid-total-text: $kendo-component-header-text !default;
+$pivotgrid-total-border: $kendo-component-header-border !default;
 
-$pivotgrid-hover-bg: darken($pivotgrid-bg, 7%) !default;
+$pivotgrid-hover-bg: k-color-darken($pivotgrid-bg, 7%) !default;
 $pivotgrid-hover-text: null !default;
 $pivotgrid-hover-border: null !default;
 
-$pivotgrid-selected-bg: rgba($selected-bg, .25) !default;
+$pivotgrid-selected-bg: rgba($kendo-selected-bg, .25) !default;
 $pivotgrid-selected-text: null !default;
 $pivotgrid-selected-border: null !default;
 
@@ -53,17 +53,17 @@ $pivotgrid-configurator-content-padding-x: $pivotgrid-spacer !default;
 $pivotgrid-configurator-content-padding-y: 2px !default;
 
 $pivotgrid-configurator-fields-margin-x: 0px !default;
-$pivotgrid-configurator-fields-margin-y: ( $pivotgrid-spacer / 2 ) !default;
+$pivotgrid-configurator-fields-margin-y: k-math-div( $pivotgrid-spacer, 2 ) !default;
 
 $pivotgrid-configurator-vertical-width: 320px !default;
 $pivotgrid-configurator-horizontal-height: 420px !default;
 
-$pivotgrid-configurator-bg: $component-bg !default;
-$pivotgrid-configurator-text: $component-text !default;
-$pivotgrid-configurator-border: $component-border !default;
+$pivotgrid-configurator-bg: $kendo-component-bg !default;
+$pivotgrid-configurator-text: $kendo-component-text !default;
+$pivotgrid-configurator-border: $kendo-component-border !default;
 
 $pivotgrid-configurator-header-bg: null !default;
-$pivotgrid-configurator-header-text: $header-text !default;
+$pivotgrid-configurator-header-text: $kendo-component-header-text !default;
 $pivotgrid-configurator-header-border: null !default;
 
 $pivotgrid-configurator-end-shadow: -3px 0px 6px rgba(0, 0, 0, .16) !default;
@@ -71,8 +71,8 @@ $pivotgrid-configurator-start-shadow: 3px 0px 6px rgba(0, 0, 0, .16) !default;
 $pivotgrid-configurator-top-shadow: 0px -3px 6px rgba(0, 0, 0, .16) !default;
 $pivotgrid-configurator-bottom-shadow: 0px 3px 6px rgba(0, 0, 0, .16) !default;
 
-$pivotgrid-configurator-button-padding-x: map-get($spacing, 1) !default;
-$pivotgrid-configurator-button-padding-y: map-get($spacing, 1) !default;
+$pivotgrid-configurator-button-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$pivotgrid-configurator-button-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 $pivotgrid-configurator-button-border-width: 1px !default;
 $pivotgrid-configurator-button-size: calc( #{$pivotgrid-line-height * 1em} + #{$pivotgrid-configurator-button-padding-y * 2} + #{$pivotgrid-configurator-button-border-width * 2} ) !default;
 
@@ -83,25 +83,25 @@ $pivotgrid-calculated-field-border-width: 1px !default;
 $pivotgrid-calculated-field-border-radius: $kendo-border-radius-md !default;
 $pivotgrid-calculated-field-gap: $pivotgrid-spacer !default;
 
-$pivotgrid-calculated-field-bg: $component-bg !default;
-$pivotgrid-calculated-field-text: $component-text !default;
-$pivotgrid-calculated-field-border: $component-border !default;
+$pivotgrid-calculated-field-bg: $kendo-component-bg !default;
+$pivotgrid-calculated-field-text: $kendo-component-text !default;
+$pivotgrid-calculated-field-border: $kendo-component-border !default;
 
 $pivotgrid-calculated-field-header-bg: null !default;
-$pivotgrid-calculated-field-header-text: $header-text !default;
+$pivotgrid-calculated-field-header-text: $kendo-component-header-text !default;
 $pivotgrid-calculated-field-header-border: null !default;
 
 
-$pivotgrid-treeview-padding-x: ( $pivotgrid-spacer / 2 ) !default;
+$pivotgrid-treeview-padding-x: k-math-div( $pivotgrid-spacer, 2 ) !default;
 $pivotgrid-treeview-padding-y: 0px !default;
 
 // Legacy variables
-$pivotgrid-alt-bg: $grid-header-bg !default;
-$pivotgrid-alt-text: $grid-header-text !default;
-$pivotgrid-chrome-border: $grid-border !default;
+$pivotgrid-alt-bg: $kendo-grid-header-bg !default;
+$pivotgrid-alt-text: $kendo-grid-header-text !default;
+$pivotgrid-chrome-border: $kendo-grid-border !default;
 
-$pivotgrid-container-bg: $component-bg !default;
-$pivotgrid-row-headers-bg: try-shade( $component-bg, 1 ) !default;
+$pivotgrid-container-bg: $kendo-component-bg !default;
+$pivotgrid-row-headers-bg: k-try-shade( $kendo-component-bg, 1 ) !default;
 
 $pivotgrid-button-bg: null !default;
 $pivotgrid-button-text: null !default;

package/scss/popover/_index.scss

@@ -8,6 +8,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/popover/_layout.scss

@@ -15,7 +15,7 @@
         flex-flow: column nowrap;
         z-index: 12000;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,

package/scss/popover/_variables.scss

@@ -5,9 +5,9 @@ $popover-border-radius: $card-border-radius !default;
 $popover-font-size: $card-font-size !default;
 $popover-font-family: $card-font-family !default;
 $popover-line-height: $card-line-height !default;
-$popover-bg: $component-bg !default;
-$popover-text: $component-text !default;
-$popover-border: $component-border !default;
+$popover-bg: $kendo-component-bg !default;
+$popover-text: $kendo-component-text !default;
+$popover-border: $kendo-component-border !default;
 $popover-shadow: $popup-shadow !default;
 
 $popover-header-padding-y: $card-header-padding-y !default;

package/scss/popup/_index.scss

@@ -6,6 +6,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/popup/_variables.scss

@@ -7,10 +7,10 @@ $popup-border-radius: null !default;
 $popup-font-size: $font-size !default;
 $popup-line-height: $line-height !default;
 
-$popup-content-padding-x: map-get( $spacing, 2 ) !default;
-$popup-content-padding-y: map-get( $spacing, 2 ) !default;
+$popup-content-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$popup-content-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 
-$popup-bg: $component-bg !default;
-$popup-text: $component-text !default;
-$popup-border: $component-border !default;
+$popup-bg: $kendo-component-bg !default;
+$popup-text: $kendo-component-text !default;
+$popup-border: $kendo-component-border !default;
 $popup-shadow: 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04) !default;

package/scss/progressbar/_index.scss

@@ -6,6 +6,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/progressbar/_layout.scss

@@ -3,20 +3,20 @@
     // Base
     .k-progressbar {
         @include border-radius( $kendo-border-radius );
-        --kendo-progressbar-progress: 0;
-        border-width: $progressbar-border-width;
+        --kendo-progressbar-value: 0;
+        border-width: $kendo-progressbar-border-width;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $progressbar-font-family;
-        font-size: $progressbar-font-size;
-        line-height: $progressbar-line-height;
+        font-family: $kendo-progressbar-font-family;
+        font-size: $kendo-progressbar-font-size;
+        line-height: $kendo-progressbar-line-height;
         display: inline-grid;
         vertical-align: middle;
         position: relative;
         overflow: hidden;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -26,7 +26,7 @@
 
 
         // Selection
-        > .k-selected {
+        > .k-progressbar-value {
             border-width: 0;
             border-style: solid;
             display: flex;
@@ -37,21 +37,21 @@
 
 
         // Chunks
-        > ul {
+        > .k-progressbar-chunks {
             border-width: inherit;
             border-style: inherit;
             white-space: nowrap;
             display: flex;
             align-items: stretch;
             flex: 1;
+            gap: 1px;
             grid-column: 1 / -1;
             grid-row: 1 / -1;
         }
-        .k-item {
+        .k-progressbar-chunk {
             display: block;
             border-width: 0;
-            border-style: solid;
-            border-color: transparent;
+            flex: 1;
         }
 
     }
@@ -72,11 +72,8 @@
         &.k-progress-end { justify-content: flex-end; }
     }
     .k-progress-status {
-        padding: 0 ($spacer-x / 2);
-        padding-block-start: 0;
-        padding-block-end: 0;
-        padding-inline-start: ($spacer-x / 2);
-        padding-inline-end: ($spacer-x / 2);
+        padding-block: 0;
+        padding-inline: k-math-div( $spacer-x, 2 );
         min-width: 10px;
         text-align: center;
         display: inline-block;
@@ -86,8 +83,8 @@
 
     // Horizontal
     .k-progressbar-horizontal {
-        width: $progressbar-horizontal-width;
-        height: $progressbar-height;
+        width: $kendo-progressbar-horizontal-width;
+        height: var( --kendo-progressbar-height, #{$kendo-progressbar-height} );
         grid-template-columns: 1fr;
         grid-template-rows: 100%;
 
@@ -96,44 +93,39 @@
             flex-direction: row;
         }
 
-        > .k-selected {
-            width: 0;
-            width: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
+        > .k-progressbar-value {
+            width: calc( var( --kendo-progressbar-value, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
             flex-direction: row;
 
             > .k-progress-status-wrap {
-                width: calc( 100% * ( 100 / var( --kendo-progressbar-progress, 1 ) ) );
+                width: calc( 100% * ( 100 / var( --kendo-progressbar-value, 1 ) ) );
             }
         }
 
 
         // Chunks
-        > ul {
+        > .k-progressbar-chunks {
             flex-direction: row;
         }
-        .k-item {}
-        .k-item + .k-item {
-            border-left-width: 1px;
-            border-inline-start-width: 1px;
-            border-inline-end-width: 0;
-        }
-
 
         // Horizontal reverse
         &.k-progressbar-reverse {
 
-            > .k-selected {
+            > .k-progressbar-value {
                 flex-direction: row-reverse;
                 justify-self: flex-end;
             }
 
+            > .k-progressbar-chunks {
+                flex-direction: row-reverse;
+            }
         }
     }
 
 
     // Vertical
     .k-progressbar-vertical {
-        width: $progressbar-height;
+        width: var( --kendo-progressbar-height, #{$kendo-progressbar-height} );
         height: 27em;
         grid-template-columns: 100%;
         grid-template-rows: 1fr;
@@ -146,39 +138,35 @@
             writing-mode: vertical-lr;
         }
 
-        > .k-selected {
-            height: 0;
-            height: calc( var( --kendo-progressbar-progress, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
+        > .k-progressbar-value {
+            height: calc( var( --kendo-progressbar-value, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
             flex-direction: column-reverse;
             align-self: flex-end;
             align-items: flex-end;
 
             > .k-progress-status-wrap {
-                height: calc( 100% * ( 100 / var( --kendo-progressbar-progress, 1 ) ) ); // sass-lint:disable-line no-duplicate-properties
+                height: calc( 100% * ( 100 / var( --kendo-progressbar-value, 1 ) ) ); // sass-lint:disable-line no-duplicate-properties
             }
         }
 
 
         // Chunk
-        > ul {
-            flex-direction: column;
-        }
-        .k-item {}
-        .k-item + .k-item {
-            border-top-width: 1px;
-            border-block-start-width: 1px;
-            border-block-end-width: 0;
+        > .k-progressbar-chunks {
+            flex-direction: column-reverse;
         }
 
-
         // Vertical reverse
         &.k-progressbar-reverse {
             flex-direction: column;
 
-            > .k-selected {
+            > .k-progressbar-value {
                 flex-direction: column;
                 align-self: flex-start;
             }
+
+            > .k-progressbar-chunks {
+                flex-direction: column;
+            }
         }
     }
 
@@ -186,8 +174,8 @@
     // Indeterminate
     .k-progressbar-indeterminate {
         .k-progress-status-wrap,
-        .k-selected,
-        .k-item {
+        .k-progressbar-value,
+        .k-progressbar-chunk {
             display: none;
         }
     }
@@ -196,8 +184,8 @@
     // Blazor specific
     .telerik-blazor.k-progressbar-horizontal {
 
-        > .k-selected,
-        > .k-selected > .k-progress-status-wrap {
+        > .k-progressbar-value,
+        > .k-progressbar-value > .k-progress-status-wrap {
             transition: width .1s ease-in-out;
         }
     }
@@ -216,43 +204,6 @@
 
 }
 
-
-
-
-@include exports("progressbar/layout/ie11") {
-
-    .k-progressbar {
-        display: -ms-inline-grid;
-
-        > .k-progress-status-wrap,
-        > .k-selected {
-            -ms-grid-column: 1;
-            -ms-grid-row: 1;
-        }
-    }
-    .k-progressbar-horizontal {
-        -ms-grid-columns: 1fr;
-        -ms-grid-rows: $progressbar-height;
-
-        &.k-progressbar-reverse > .k-selected {
-            -ms-grid-column-align: end;
-        }
-    }
-    .k-progressbar-vertical {
-        -ms-grid-columns: $progressbar-height;
-        -ms-grid-rows: 1fr;
-
-        > .k-selected {
-            -ms-grid-row-align: end;
-        }
-
-        &.k-progressbar-reverse > .k-selected {
-            -ms-grid-row-align: start;
-        }
-    }
-
-}
-
 @include exports("circular-progressbar/layout") {
 
     .k-circular-progressbar {

package/scss/progressbar/_theme.scss

@@ -1,27 +1,37 @@
 @include exports("progressbar/theme") {
 
-    @keyframes progressbar-indeterminate-animation {
+    @keyframes kendo-progressbar-indeterminate-animation {
         from { background-position: 0 0; }
-        to { background-position: $progressbar-height 0; }
+        to { background-position: $kendo-progressbar-height 0; }
     }
 
     .k-progressbar {
-        @include fill( $progressbar-text, $progressbar-bg, $progressbar-border, $progressbar-gradient );
+        @include fill( $kendo-progressbar-text, $kendo-progressbar-bg, $kendo-progressbar-border, $kendo-progressbar-gradient );
 
         .k-selected {
-            @include fill( $progressbar-fill-text, $progressbar-fill-bg, $progressbar-fill-border, $progressbar-fill-gradient );
+            @include fill( $kendo-progressbar-value-text, $kendo-progressbar-value-bg, $kendo-progressbar-value-border, $kendo-progressbar-value-gradient );
         }
+    }
+
+    // Chunk progressbar
+    .k-chunk-progressbar {
+        // TODO uncomment for 2023 R1
+        // background-color: k-if-var( $progressbar-chunk-border, transparent );
+        background-color: transparent;
+    }
+    .k-progressbar-chunk {
+        background-color: $kendo-progressbar-bg;
 
-        .k-item {
-            border-color: $progressbar-chunk-border;
+        .k-selected {
+            background-color: $kendo-progressbar-value-bg;
         }
     }
 
     .k-progressbar-indeterminate {
-        @include fill( $progressbar-indeterminate-text, $progressbar-indeterminate-bg, $progressbar-indeterminate-border );
-        @include striped-gradient( shade($progressbar-indeterminate-bg) );
-        background-size: $progressbar-height $progressbar-height;
-        animation: progressbar-indeterminate-animation $progressbar-animation-timing;
+        @include fill( $kendo-progressbar-indeterminate-text, $kendo-progressbar-indeterminate-bg, $kendo-progressbar-indeterminate-border );
+        @include striped-gradient( k-color-shade($kendo-progressbar-indeterminate-bg) );
+        background-size: $kendo-progressbar-height $kendo-progressbar-height;
+        animation: kendo-progressbar-indeterminate-animation $kendo-progressbar-animation-timing;
     }
 
 }

package/scss/progressbar/_variables.scss

@@ -1,29 +1,73 @@
 // Progressbar
-$progressbar-height: 22px !default;
-$progressbar-horizontal-width: 100% !default;
-$progressbar-animation-timing: 1s linear infinite !default;
-$progressbar-border-width: 0px !default;
-$progressbar-font-family: $font-family !default;
-$progressbar-font-size: $font-size-sm !default;
-$progressbar-line-height: 1 !default;
 
-$progressbar-bg: try-shade( $component-bg, 1 ) !default;
-$progressbar-text: $component-text !default;
-$progressbar-border: $component-border !default;
-$progressbar-gradient: null !default;
+/// Height of the progressbar.
+/// @group progressbar
+$kendo-progressbar-height: 22px !default;
+/// Horizontal width of the progressbar.
+/// @group progressbar
+$kendo-progressbar-horizontal-width: 100% !default;
+/// Animation timing of the progressbar.
+/// @group progressbar
+$kendo-progressbar-animation-timing: 1s linear infinite !default;
+/// Border width of the progressbar.
+/// @group progressbar
+$kendo-progressbar-border-width: 0px !default;
+/// Font family of the progressbar.
+/// @group progressbar
+$kendo-progressbar-font-family: $font-family !default;
+/// Font size of the progressbar.
+/// @group progressbar
+$kendo-progressbar-font-size: $font-size-sm !default;
+/// Line height of the progressbar.
+/// @group progressbar
+$kendo-progressbar-line-height: 1 !default;
+/// Background color of the progressbar.
+/// @group progressbar
+$kendo-progressbar-bg: k-try-shade( $kendo-component-bg, 1 ) !default;
+/// Text color of the progressbar.
+/// @group progressbar
+$kendo-progressbar-text: $kendo-component-text !default;
+/// Border color of the progressbar.
+/// @group progressbar
+$kendo-progressbar-border: $kendo-component-border !default;
+/// Background gradient of the progressbar.
+/// @group progressbar
+$kendo-progressbar-gradient: null !default;
 
-$progressbar-fill-bg: $primary !default;
-$progressbar-fill-text: contrast-wcag( $progressbar-fill-bg ) !default;
-$progressbar-fill-border: try-shade( $progressbar-fill-bg ) !default;
-$progressbar-fill-gradient: null !default;
+/// Progress background color of the progressbar.
+/// @group progressbar
+$kendo-progressbar-value-bg: $kendo-color-primary !default;
+/// Progress text color of the progressbar.
+/// @group progressbar
+$kendo-progressbar-value-text: k-contrast-legacy( $kendo-progressbar-value-bg ) !default;
+/// Progress border color of the progressbar.
+/// @group progressbar
+$kendo-progressbar-value-border: k-try-shade( $kendo-progressbar-value-bg ) !default;
+/// Progress background gradient of the progressbar.
+/// @group progressbar
+$kendo-progressbar-value-gradient: null !default;
 
-$progressbar-indeterminate-bg: $progressbar-bg !default;
-$progressbar-indeterminate-text: $progressbar-text !default;
-$progressbar-indeterminate-border: $progressbar-border !default;
-$progressbar-indeterminate-gradient: null !default;
+/// Background color of the indeterminate progressbar.
+/// @group progressbar
+$kendo-progressbar-indeterminate-bg: $kendo-progressbar-bg !default;
+/// Text color of the indeterminate progressbar.
+/// @group progressbar
+$kendo-progressbar-indeterminate-text: $kendo-progressbar-text !default;
+/// Border color of the indeterminate progressbar.
+/// @group progressbar
+$kendo-progressbar-indeterminate-border: $kendo-progressbar-border !default;
+/// Background gradient of the indeterminate progressbar.
+/// @group progressbar
+$kendo-progressbar-indeterminate-gradient: null !default;
 
-$progressbar-chunk-border: $body-bg !default;
+/// Border color of the chunk progressbar.
+/// @group progressbar
+$kendo-progressbar-chunk-border: $kendo-body-bg !default;
 
 // Circular Progressbar
-$kendo-circular-progressbar-arc-stroke: $primary !default;
-$kendo-circular-progressbar-scale-stroke: $progressbar-bg !default;
+/// Arc stroke color of the circular progressbar.
+/// @group progressbar
+$kendo-circular-progressbar-arc-stroke: $kendo-color-primary !default;
+/// Scale stroke background color of the circular progressbar.
+/// @group progressbar
+$kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default;

package/scss/radio/_index.scss

@@ -8,6 +8,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/radio/_layout.scss

@@ -57,7 +57,7 @@
     // Disabled state
     .k-radio:disabled,
     .k-radio.k-disabled {
-        @include disabled( $disabled-styling );
+        @include disabled( $kendo-disabled-styling );
     }
     .k-radio:disabled:checked,
     .k-radio.k-disabled.k-checked {
@@ -139,7 +139,7 @@
         flex-flow: row nowrap;
         align-items: center;
         align-content: center;
-        gap: map-get( $spacing, 1 );
+        gap: k-map-get( $kendo-spacing, 1 );
 
         .k-radio-label {
             margin: 0;
@@ -187,9 +187,9 @@
 
     // Radio size
     @each $size, $size-props in $kendo-radio-sizes {
-        $_size: map-get( $size-props, size );
-        $_glyph-size: map-get( $size-props, glyph-size );
-        $_ripple-size: map-get( $size-props, ripple-size );
+        $_size: k-map-get( $size-props, size );
+        $_glyph-size: k-map-get( $size-props, glyph-size );
+        $_ripple-size: k-map-get( $size-props, ripple-size );
 
         .k-radio-#{$size} {
             width: $_size;