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

package/scss/radio/_variables.scss

@@ -10,19 +10,19 @@ $kendo-radio-border-width: 1px !default;
 // Radio button sizes
 $kendo-radio-sizes: (
     sm: (
-        size: map-get( $spacing, 3 ),
-        glyph-size: ( map-get( $spacing, 3 ) - map-get( $spacing, thin ) ),
-        ripple-size: map-get( $spacing, 3 ) * 3
+        size: k-map-get( $kendo-spacing, 3 ),
+        glyph-size: k-map-get( $kendo-spacing, 2.5 ),
+        ripple-size: 300%
     ),
     md: (
-        size: map-get( $spacing, 4 ),
-        glyph-size: ( map-get( $spacing, 4 ) - map-get( $spacing, thin ) ),
-        ripple-size: map-get( $spacing, 4 ) * 3
+        size: k-map-get( $kendo-spacing, 4 ),
+        glyph-size: k-map-get( $kendo-spacing, 3.5 ),
+        ripple-size: 300%
     ),
     lg: (
-        size: map-get( $spacing, 5 ),
-        glyph-size: ( map-get( $spacing, 5 ) - map-get( $spacing, thin ) ),
-        ripple-size: map-get( $spacing, 5 ) * 3
+        size: k-map-get( $kendo-spacing, 5 ),
+        glyph-size: k-map-get( $kendo-spacing, 4.5 ),
+        ripple-size: 300%
     )
 ) !default;
 
@@ -115,7 +115,7 @@ $kendo-radio-checked-glyph: "\e308" !default;
 
 /// Image of checked radio button indicator.
 /// @group radio
-$kendo-radio-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-checked-text}'/></svg>") ) !default;
+$kendo-radio-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-checked-text}'/></svg>") ) !default;
 /// Image of disabled and checked radio button indicator.
 /// @group radio
 $kendo-radio-disabled-checked-image: null !default;
@@ -125,14 +125,14 @@ $kendo-radio-disabled-checked-image: null !default;
 
 /// The horizontal margin of the radio button inside of a label.
 /// @group radio
-$kendo-radio-label-margin-x: map-get( $spacing, 1 ) !default;
+$kendo-radio-label-margin-x: k-map-get( $kendo-spacing, 1 ) !default;
 
 
 // Radio list
 
 /// The horizontal list item margin of radio button.
 /// @group radio
-$kendo-radio-list-spacing: map-get( $spacing, 4 ) !default;
+$kendo-radio-list-spacing: k-map-get( $kendo-spacing, 4 ) !default;
 /// The horizontal list item padding of radio button.
 /// @group radio
 $kendo-radio-list-item-padding-x: 0px !default;

package/scss/rating/_index.scss

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

package/scss/rating/_layout.scss

@@ -12,7 +12,7 @@
         line-height: $rating-line-height;
         display: inline-flex;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,

package/scss/rating/_theme.scss

@@ -1,18 +1,18 @@
 @include exports("rating/theme") {
 
     .k-rating {
-        color: $component-text;
+        color: $kendo-component-text;
 
         &:focus,
         &.k-focus {
 
             .k-rating-item {
                 > .k-icon {
-                    text-shadow: $rating-icon-focused-shadow;
+                    text-shadow: $rating-icon-focus-shadow;
                 }
 
                 &.k-selected > .k-icon {
-                    text-shadow: $rating-icon-focused-selected-shadow;
+                    text-shadow: $rating-icon-focus-selected-shadow;
                 }
             }
         }
@@ -26,7 +26,7 @@
 
             &:focus,
             &.k-focus {
-                color: $rating-icon-focused-text;
+                color: $rating-icon-focus-text;
             }
         }
 

package/scss/rating/_variables.scss

@@ -3,21 +3,21 @@ $rating-font-family: $font-family !default;
 $rating-font-size: $font-size !default;
 $rating-line-height: $line-height !default;
 
-$rating-container-margin-x: $padding-x-sm !default;
+$rating-container-margin-x: $kendo-padding-sm-x !default;
 
-$rating-item-padding-x: $padding-x-sm !default;
-$rating-item-padding-y: $padding-y !default;
+$rating-item-padding-x: $kendo-padding-sm-x !default;
+$rating-item-padding-y: $kendo-padding-md-y !default;
 
-$rating-label-margin-x: $padding-x !default;
-$rating-label-margin-y: $padding-y !default;
+$rating-label-margin-x: $kendo-padding-md-x !default;
+$rating-label-margin-y: $kendo-padding-md-y !default;
 $rating-label-line-height: $line-height-lg !default;
 
 $rating-icon-size: ($icon-size * 1.5) !default;
 
-$rating-icon-text: $component-text !default;
-$rating-icon-selected-text: $selected-bg !default;
-$rating-icon-hover-text: $selected-bg !default;
-$rating-icon-focused-text: $selected-bg !default;
+$rating-icon-text: $kendo-component-text !default;
+$rating-icon-selected-text: $kendo-selected-bg !default;
+$rating-icon-hover-text: $kendo-selected-bg !default;
+$rating-icon-focus-text: $kendo-selected-bg !default;
 
-$rating-icon-focused-shadow: 0 2px 4px rgba( $black, .1 ) !default;
-$rating-icon-focused-selected-shadow: 0 2px 4px rgba( $black, .1) !default;
+$rating-icon-focus-shadow: 0 2px 4px rgba( $kendo-color-black, .1 ) !default;
+$rating-icon-focus-selected-shadow: 0 2px 4px rgba( $kendo-color-black, .1) !default;

package/scss/responsivepanel/_index.scss

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

package/scss/ripple/_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/scheduler/_index.scss

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

package/scss/scheduler/_layout.scss

@@ -13,7 +13,7 @@
         display: flex;
         flex-direction: column;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         table,
         thead,
@@ -202,7 +202,7 @@
     // Header and footer
     .k-scheduler-toolbar {
         border-width: 0;
-        border-bottom-width: $toolbar-border-width;
+        border-bottom-width: $kendo-toolbar-border-width;
         white-space: nowrap;
         flex-shrink: 0;
         position: relative;
@@ -277,7 +277,7 @@
     .k-scheduler-footer {
         @include box-shadow( none );
         border-width: 0;
-        border-top-width: $toolbar-border-width;
+        border-top-width: $kendo-toolbar-border-width;
         white-space: nowrap;
         flex-shrink: 0;
         position: relative;
@@ -413,7 +413,7 @@
         cursor: default;
         position: absolute;
         overflow: hidden;
-        padding-right: $padding-x;
+        padding-right: $kendo-padding-md-x;
 
         > div {
             position: relative;
@@ -423,9 +423,9 @@
         // Template
         .k-event-template {
             line-height: $scheduler-event-line-height;
-            padding: $padding-y $padding-x;
+            padding: $kendo-padding-md-y $kendo-padding-md-x;
             // TODO: incompatible units
-            // padding-right: $padding-x-sm + $spacer;
+            // padding-right: $kendo-padding-sm-x + $spacer;
         }
         .k-event-time {
             padding-bottom: 0;
@@ -441,7 +441,7 @@
             position: absolute;
             top: 0;
             bottom: 0;
-            right: $padding-x;
+            right: $kendo-padding-md-x;
             z-index: 2;
 
             .k-event-delete {
@@ -467,7 +467,7 @@
 
         // Indicators
         .k-event-actions:first-child {
-            margin: $padding-y-sm .4ex 0 $padding-x-sm;
+            margin: $kendo-padding-sm-y .4ex 0 $kendo-padding-sm-x;
             top: 0;
             right: 0;
             float: left;
@@ -613,12 +613,12 @@
             position: absolute;
         }
         .k-label-top {
-            left: $padding-x-sm;
-            top: $padding-y-sm;
+            left: $kendo-padding-sm-x;
+            top: $kendo-padding-sm-y;
         }
         .k-label-bottom {
-            right: $padding-x-sm;
-            bottom: $padding-y-sm;
+            right: $kendo-padding-sm-x;
+            bottom: $kendo-padding-sm-y;
         }
 
         // Angle tingie
@@ -767,8 +767,8 @@
         .k-task > .k-event-delete {
             color: inherit;
             position: absolute;
-            top: $padding-y-sm;
-            right: $padding-y-sm;
+            top: $kendo-padding-sm-y;
+            right: $kendo-padding-sm-y;
             opacity: .5;
             visibility: hidden;
         }
@@ -965,7 +965,7 @@
         .k-scheduler-datetime-picker {
             display: flex;
             flex-flow: row nowrap;
-            gap: map-get( $spacing, 2 );
+            gap: k-map-get( $kendo-spacing, 2 );
         }
 
     }
@@ -1004,7 +1004,7 @@
         .k-event {
             text-align: right;
             padding-right: 0;
-            padding-left: $padding-x;
+            padding-left: $kendo-padding-md-x;
 
             .k-resize-w {
                 left: auto;
@@ -1022,7 +1022,7 @@
             }
 
             .k-event-actions:first-child {
-                margin: $padding-y-sm $padding-x-sm 0 .4ex;
+                margin: $kendo-padding-sm-y $kendo-padding-sm-x 0 .4ex;
                 float: right;
             }
         }
@@ -1095,14 +1095,14 @@
 
 @include exports("scheduler/layout/compatibility") {
 
-    .k-ie,
     .k-safari {
         .k-scheduler-tooltip .k-tooltip-event:not(:last-child) {
             margin-bottom: $scheduler-tooltip-event-gap;
         }
 
         .k-scheduler-yearview .k-calendar-view .k-month {
-            margin: 0 ($scheduler-yearview-calendar-gap / 2);
+            margin-block: 0;
+            margin-inline: k-math-div( $scheduler-yearview-calendar-gap, 2 );
         }
     }
 

package/scss/scheduler/_theme.scss

@@ -84,7 +84,7 @@
 
     .k-scheduler-layout td.k-selected,
     .k-scheduler-layout .k-scheduler-cell.k-selected {
-        background-color: rgba($selected-bg, .25);
+        background-color: rgba($kendo-selected-bg, .25);
     }
 
     .k-scheduler-layout-flex {
@@ -127,7 +127,7 @@
         }
     }
     .k-event-inverse {
-        color: contrast-wcag( $scheduler-event-text );
+        color: k-contrast-legacy( $scheduler-event-text );
     }
     .k-event-ongoing {
         @include box-shadow( $scheduler-event-ongoing-shadow );
@@ -142,12 +142,12 @@
     .k-scheduler-marquee {}
     .k-scheduler-marquee::before,
     .k-scheduler-marquee::after {
-        border-color: $primary;
+        border-color: $kendo-color-primary;
     }
 
     // Edit dialog
     .k-scheduler-edit-dialog {
-        .k-dialog-buttongroup {
+        .k-dialog-actions {
             border-color: $scheduler-border;
         }
     }
@@ -186,10 +186,10 @@
         .k-scheduler-content .k-scheduler-row:hover,
         .k-scheduler-content .k-scheduler-row.k-hover {
             @include fill(
-                $hovered-text,
-                $hovered-bg,
-                $hovered-border,
-                $hovered-gradient
+                $kendo-hover-text,
+                $kendo-hover-bg,
+                $kendo-hover-border,
+                $kendo-hover-gradient
             );
         }
 
@@ -206,7 +206,7 @@
 
         // Selected
         .k-scheduler-content tr.k-selected {
-            background-color: rgba($selected-bg, .25);
+            background-color: rgba($kendo-selected-bg, .25);
         }
         .k-scheduler-content tr.k-selected .k-scheduler-datecolumn,
         .k-scheduler-content tr.k-selected .k-scheduler-groupcolumn {

package/scss/scheduler/_variables.scss

@@ -4,26 +4,26 @@ $scheduler-font-family: $font-family !default;
 $scheduler-font-size: $font-size !default;
 $scheduler-line-height: $line-height !default;
 
-$scheduler-bg: $component-bg !default;
-$scheduler-text: $component-text !default;
-$scheduler-border: $component-border !default;
+$scheduler-bg: $kendo-component-bg !default;
+$scheduler-text: $kendo-component-text !default;
+$scheduler-border: $kendo-component-border !default;
 
-$scheduler-toolbar-bg: $toolbar-bg !default;
-$scheduler-toolbar-text: $toolbar-text !default;
-$scheduler-toolbar-border: $toolbar-border !default;
-$scheduler-toolbar-gradient: $toolbar-gradient !default;
+$scheduler-toolbar-bg: $kendo-toolbar-bg !default;
+$scheduler-toolbar-text: $kendo-toolbar-text !default;
+$scheduler-toolbar-border: $kendo-toolbar-border !default;
+$scheduler-toolbar-gradient: $kendo-toolbar-gradient !default;
 
-$scheduler-footer-bg: $toolbar-bg !default;
-$scheduler-footer-text: $toolbar-text !default;
-$scheduler-footer-border: $toolbar-border !default;
-$scheduler-footer-gradient: $toolbar-gradient !default;
+$scheduler-footer-bg: $kendo-toolbar-bg !default;
+$scheduler-footer-text: $kendo-toolbar-text !default;
+$scheduler-footer-border: $kendo-toolbar-border !default;
+$scheduler-footer-gradient: $kendo-toolbar-gradient !default;
 
 $scheduler-event-min-height: 25px !default;
 $scheduler-event-border-radius: $kendo-border-radius-md !default;
-$scheduler-event-line-height: calc( #{$scheduler-event-min-height} - (2 * #{$padding-y}) ) !default;
+$scheduler-event-line-height: calc( #{$scheduler-event-min-height} - (2 * #{$kendo-padding-md-y}) ) !default;
 
-$scheduler-event-bg: tint( $selected-bg, 2 ) !default;
-$scheduler-event-text: $selected-text !default;
+$scheduler-event-bg: k-color-tint( $kendo-selected-bg, 2 ) !default;
+$scheduler-event-text: $kendo-selected-text !default;
 $scheduler-event-border: null !default;
 $scheduler-event-gradient: null !default;
 $scheduler-event-shadow: null !default;
@@ -34,61 +34,61 @@ $scheduler-event-hover-border: null !default;
 $scheduler-event-hover-gradient: null !default;
 $scheduler-event-hover-shadow: null !default;
 
-$scheduler-event-selected-bg: $selected-bg !default;
-$scheduler-event-selected-text: $selected-text !default;
+$scheduler-event-selected-bg: $kendo-selected-bg !default;
+$scheduler-event-selected-text: $kendo-selected-text !default;
 $scheduler-event-selected-border: null !default;
 $scheduler-event-selected-gradient: null !default;
 $scheduler-event-selected-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
 
 $scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
 
-$scheduler-cell-padding-x: map-get( $spacing, 2 ) !default;
-$scheduler-cell-padding-y: map-get( $spacing, 2 ) !default;
+$scheduler-cell-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$scheduler-cell-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $scheduler-cell-height: $line-height-em !default;
 $scheduler-datecolumn-width: 12em !default;
 $scheduler-timecolumn-width: 11em !default;
 
 $scheduler-current-time-color: #ff0000 !default;
 
-$scheduler-nonwork-bg: try-shade( $scheduler-bg, .5 ) !default;
+$scheduler-nonwork-bg: k-try-shade( $scheduler-bg, .5 ) !default;
 $scheduler-nonwork-text: null !default;
 
 $scheduler-weekend-bg: null !default;
 $scheduler-weekend-text: null !default;
 
-$scheduler-othermonth-bg: try-shade( $scheduler-bg, .5 ) !default;
+$scheduler-othermonth-bg: k-try-shade( $scheduler-bg, .5 ) !default;
 $scheduler-othermonth-text: null !default;
 
-$scheduler-yearview-padding-x: map-get( $spacing, 3 ) !default;
+$scheduler-yearview-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
 $scheduler-yearview-padding-y: $scheduler-yearview-padding-x !default;
 
-$scheduler-yearview-calendar-gap: map-get( $spacing, 3 ) !default;
+$scheduler-yearview-calendar-gap: k-map-get( $kendo-spacing, 3 ) !default;
 
 $scheduler-yearview-indicator-size: 3px !default;
 $scheduler-yearview-indicator-calc-offset-top: calc( #{$calendar-cell-size} - (#{$calendar-cell-padding-y} * 2)) !default;
-$scheduler-yearview-indicator-calc-offset-left: calc( 50% - (#{$scheduler-yearview-indicator-size} / 2) ) !default;
+$scheduler-yearview-indicator-calc-offset-left: calc( 50% - #{k-math-div( $scheduler-yearview-indicator-size, 2 )} ) !default;
 $scheduler-yearview-indicator-border-radius: 50% !default;
-$scheduler-yearview-indicator-bg: $primary !default;
-$scheduler-yearview-indicator-selected-bg: $primary-contrast !default;
+$scheduler-yearview-indicator-bg: $kendo-color-primary !default;
+$scheduler-yearview-indicator-selected-bg: $kendo-color-primary-contrast !default;
 
-$scheduler-tooltip-padding-x: $padding-x !default;
-$scheduler-tooltip-padding-y: $scheduler-tooltip-padding-x !default;
+$scheduler-tooltip-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$scheduler-tooltip-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $scheduler-tooltip-border-width: 0 !default;
-$scheduler-tooltip-bg: $primary-contrast !default;
+$scheduler-tooltip-bg: $kendo-color-primary-contrast !default;
 $scheduler-tooltip-text: $base-text !default;
 $scheduler-tooltip-border: null !default;
 $scheduler-tooltip-shadow: 0px 0px 10px rgba(0, 0, 0, .2) !default;
 
-$scheduler-tooltip-title-margin-y: map-get( $spacing, 3 ) !default;
+$scheduler-tooltip-title-margin-y: k-map-get( $kendo-spacing, 3 ) !default;
 $scheduler-tooltip-month-font-size: $font-size-sm !default;
 $scheduler-tooltip-day-font-size: $scheduler-tooltip-month-font-size * 2 !default;
 
 $scheduler-tooltip-events-max-height: 250px !default;
-$scheduler-tooltip-events-gap: $padding-y !default;
+$scheduler-tooltip-events-gap: k-map-get( $kendo-spacing, 1 ) !default;
 
-$scheduler-tooltip-event-padding-x: $padding-x !default;
-$scheduler-tooltip-event-padding-y: $padding-y !default;
+$scheduler-tooltip-event-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$scheduler-tooltip-event-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 $scheduler-tooltip-event-border-radius: $kendo-border-radius-md !default;
-$scheduler-tooltip-event-gap: $padding-x-sm !default;
+$scheduler-tooltip-event-gap: k-map-get( $kendo-spacing, 1 ) !default;
 
 $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;

package/scss/scroller/_index.scss

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

package/scss/scrollview/_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/scrollview/_layout.scss

@@ -14,7 +14,7 @@
         overflow: hidden;
         display: block;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
     }
 
     .k-scrollview-wrap .k-scrollview,
@@ -115,7 +115,8 @@
 
     .k-scrollview-pageable > .k-button,
     .k-scrollview-nav > .k-link {
-        margin: 0 ($scrollview-pager-item-spacing / 2);
+        margin-block: 0;
+        margin-inline: k-math-div( $scrollview-pager-item-spacing, 2 );
         padding: 0;
         width: $scrollview-pagebutton-size;
         height: $scrollview-pagebutton-size;

package/scss/scrollview/_variables.scss

@@ -4,15 +4,15 @@ $scrollview-font-family: $font-family !default;
 $scrollview-font-size: $font-size !default;
 $scrollview-line-height: $line-height !default;
 
-$scrollview-bg: $component-bg !default;
-$scrollview-text: $component-text !default;
-$scrollview-border: $component-border !default;
+$scrollview-bg: $kendo-component-bg !default;
+$scrollview-text: $kendo-component-text !default;
+$scrollview-border: $kendo-component-border !default;
 
 $scrollview-pagebutton-size: 10px !default;
 $scrollview-pagebutton-bg: $kendo-button-bg !default;
 $scrollview-pagebutton-border: $kendo-button-border !default;
-$scrollview-pagebutton-primary-bg: $primary !default;
-$scrollview-pagebutton-primary-border: $primary !default;
+$scrollview-pagebutton-primary-bg: $kendo-color-primary !default;
+$scrollview-pagebutton-primary-border: $kendo-color-primary !default;
 $scrollview-pagebutton-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
 
 $scrollview-pager-offset: 0 !default;
@@ -25,7 +25,7 @@ $scrollview-pager-multidot-intermediate: 3 !default;
 $scrollview-pager-multidot-step: 1px !default;
 
 $scrollview-arrow-icon-size: 4.5em !default;
-$scrollview-arrow-tap-highlight-color: $rgba-transparent !default;
+$scrollview-arrow-tap-highlight-color: $kendo-color-rgba-transparent !default;
 $scrollview-navigation-color: white !default;
 $scrollview-navigation-icon-shadow: rgba(0, 0, 0, .3) 0 0 15px !default;
 $scrollview-navigation-bg: rgba(0, 0, 0, 0) !default;

package/scss/searchbox/_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/signature/_index.scss

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

package/scss/signature/_layout.scss

@@ -49,10 +49,10 @@
 
     // Sizes
     @each $size, $size-props in $kendo-signature-sizes {
-        $_padding-x: map-get($size-props, padding-x);
-        $_padding-y: map-get($size-props, padding-y);
-        $_line-size: map-get($size-props, line-size);
-        $_line-offset: map-get($size-props, line-offset);
+        $_padding-x: k-map-get($size-props, padding-x);
+        $_padding-y: k-map-get($size-props, padding-y);
+        $_line-size: k-map-get($size-props, line-size);
+        $_line-offset: k-map-get($size-props, line-offset);
 
         .k-signature-#{$size} {
             padding-inline: $_padding-x;

package/scss/signature/_variables.scss

@@ -1,15 +1,15 @@
 $kendo-signature-width: 250px !default;
 $kendo-signature-height: 84px !default;
 
-$kendo-signature-lg-min-height: 110px;
+$kendo-signature-lg-min-height: 110px !default;
 
 $kendo-signature-maximized-width: 750px !default;
 $kendo-signature-maximized-height: 252px !default;
 
-$kendo-signature-padding-x: map-get( $spacing, 1 ) !default;
-$kendo-signature-padding-x-sm: map-get( $spacing, 1 ) - map-get($spacing, thin) !default;
-$kendo-signature-padding-x-md: $kendo-signature-padding-x !default;
-$kendo-signature-padding-x-lg: map-get( $spacing, 2 ) !default;
+$kendo-signature-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-signature-padding-x-sm: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-signature-padding-x-md: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-signature-padding-x-lg: k-map-get( $kendo-spacing, 2 ) !default;
 
 $kendo-signature-padding-y: $kendo-signature-padding-x !default;
 $kendo-signature-padding-y-sm: $kendo-signature-padding-x-sm !default;
@@ -18,7 +18,7 @@ $kendo-signature-padding-y-lg: $kendo-signature-padding-x-lg !default;
 
 $kendo-signature-line-width: 1px !default;
 $kendo-signature-line-style: dashed !default;
-$kendo-signature-line-color: rgba( $info, .24 ) !default;
+$kendo-signature-line-color: rgba( $kendo-color-info, .24 ) !default;
 
 $kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding-x} ) !default;
 $kendo-signature-line-size-sm: calc( 100% - 2 * #{$kendo-signature-padding-x-sm} ) !default;
@@ -45,5 +45,5 @@ $kendo-signature-sizes: (
     )
 ) !default;
 
-$kendo-signature-actions-gap: map-get( $spacing, 1 ) !default;
-$kendo-signature-maximized-line-width: map-get( $spacing, 1 ) - map-get( $spacing, hair ) !default;
+$kendo-signature-actions-gap: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-signature-maximized-line-width: 3px !default;

package/scss/skeleton/_index.scss

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