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

package/scss/calendar/_variables.scss

@@ -6,29 +6,26 @@ $calendar-line-height: $line-height !default;
 
 $calendar-cell-size: 32px !default;
 
-$calendar-bg: $component-bg !default;
-$calendar-text: $component-text !default;
-$calendar-border: $component-border !default;
+$calendar-bg: $kendo-component-bg !default;
+$calendar-text: $kendo-component-text !default;
+$calendar-border: $kendo-component-border !default;
 
-$calendar-header-padding-x: k-map-get( $spacing, 1 ) !default;
-$calendar-header-padding-y: k-map-get( $spacing, 1 ) !default;
+$calendar-header-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$calendar-header-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 $calendar-header-border-width: 1px !default;
 
-$calendar-header-bg: $header-bg !default;
-$calendar-header-text: $header-text !default;
-$calendar-header-border: $header-border !default;
-$calendar-header-gradient: $header-gradient !default;
+$calendar-header-bg: $kendo-component-header-bg !default;
+$calendar-header-text: $kendo-component-header-text !default;
+$calendar-header-border: $kendo-component-header-border !default;
+$calendar-header-gradient: $kendo-component-header-gradient !default;
 $calendar-header-shadow: null !default;
 
-$calendar-nav-gap: k-map-get( $spacing, 1 ) !default;
+$calendar-nav-gap: null !default;
 
-$calendar-today-nav-text: $link-text !default;
-$calendar-today-nav-hover-text: $link-hover-text !default;
+$calendar-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$calendar-footer-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 
-$calendar-footer-padding-x: k-map-get( $spacing, 4 ) !default;
-$calendar-footer-padding-y: k-map-get( $spacing, 2 ) !default;
-
-$calendar-cell-padding-x: k-map-get( $spacing, 1 ) !default;
+$calendar-cell-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
 $calendar-cell-padding-y: $calendar-cell-padding-x !default;
 $calendar-cell-line-height: $calendar-line-height !default;
 $calendar-cell-border-radius: $kendo-border-radius-md !default;
@@ -40,11 +37,11 @@ $calendar-header-cell-height: $calendar-cell-size !default;
 $calendar-header-cell-font-size: $font-size-sm !default;
 $calendar-header-cell-line-height: 2 !default;
 $calendar-header-cell-bg: null !default;
-$calendar-header-cell-text: $subtle-text !default;
+$calendar-header-cell-text: $kendo-subtle-text !default;
 $calendar-header-cell-opacity: null !default;
 
-$calendar-caption-padding-x: k-map-get( $spacing, 2 ) !default;
-$calendar-caption-padding-y: k-map-get( $spacing, 1 ) !default;
+$calendar-caption-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$calendar-caption-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 $calendar-caption-height: $calendar-cell-size !default;
 $calendar-caption-font-size: null !default;
 $calendar-caption-line-height: null !default;
@@ -52,7 +49,7 @@ $calendar-caption-font-weight: bold !default;
 
 $calendar-view-width: ($calendar-cell-size * 8) !default;
 $calendar-view-height: ($calendar-cell-size * 7) !default;
-$calendar-view-gap: k-map-get( $spacing, 4 ) !default;
+$calendar-view-gap: k-map-get( $kendo-spacing, 4 ) !default;
 
 $calendar-weekend-bg: null !default;
 $calendar-weekend-text: null !default;
@@ -71,23 +68,23 @@ $calendar-cell-text: null !default;
 $calendar-cell-border: null !default;
 $calendar-cell-gradient: null !default;
 
-$calendar-cell-hover-bg: $hovered-bg !default;
-$calendar-cell-hover-text: $hovered-text !default;
-$calendar-cell-hover-border: $hovered-border !default;
+$calendar-cell-hover-bg: $kendo-hover-bg !default;
+$calendar-cell-hover-text: $kendo-hover-text !default;
+$calendar-cell-hover-border: $kendo-hover-border !default;
 $calendar-cell-hover-gradient: null !default;
 
-$calendar-cell-selected-bg: $selected-bg !default;
-$calendar-cell-selected-text: $selected-text !default;
-$calendar-cell-selected-border: $selected-border !default;
+$calendar-cell-selected-bg: $kendo-selected-bg !default;
+$calendar-cell-selected-text: $kendo-selected-text !default;
+$calendar-cell-selected-border: $kendo-selected-border !default;
 $calendar-cell-selected-gradient: null !default;
 
-$calendar-cell-selected-hover-bg: $selected-hover-bg !default;
-$calendar-cell-selected-hover-text: $selected-hover-text !default;
-$calendar-cell-selected-hover-border: $selected-hover-border !default;
+$calendar-cell-selected-hover-bg: $kendo-selected-hover-bg !default;
+$calendar-cell-selected-hover-text: $kendo-selected-hover-text !default;
+$calendar-cell-selected-hover-border: $kendo-selected-hover-border !default;
 $calendar-cell-selected-hover-gradient: null !default;
 
-$calendar-cell-focused-shadow: inset 0 0 0 2px rgba( black, .08 ) !default;
-$calendar-cell-selected-focus-shadow: $calendar-cell-focused-shadow !default;
+$calendar-cell-focus-shadow: inset 0 0 0 2px rgba( black, .08 ) !default;
+$calendar-cell-selected-focus-shadow: $calendar-cell-focus-shadow !default;
 
 
 // Calendar navigation
@@ -98,12 +95,14 @@ $calendar-navigation-bg: $calendar-header-bg !default;
 $calendar-navigation-text: $calendar-header-text !default;
 $calendar-navigation-border: $calendar-header-border !default;
 
+$calendar-navigation-hover-text: $link-hover-text !default;
+
 
 // Infinite calendar
-$infinite-calendar-header-padding-x: k-map-get( $spacing, 4 ) !default;
-$infinite-calendar-header-padding-y: k-map-get( $spacing, 2 ) !default;
+$infinite-calendar-header-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$infinite-calendar-header-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 
-$infinite-calendar-view-padding-x: k-map-get( $spacing, 4 ) !default;
+$infinite-calendar-view-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
 $infinite-calendar-view-padding-y: 0px !default;
 $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
 
@@ -115,20 +114,20 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
 $kendo-calendar-sm-font-size: $font-size-md !default;
 $kendo-calendar-sm-line-height: $line-height-md !default;
 $kendo-calendar-sm-cell-size: 28px !default;
-$kendo-calendar-sm-cell-padding-x: k-map-get( $spacing, 1) - k-map-get( $spacing, thin ) !default;
-$kendo-calendar-sm-cell-padding-y: k-map-get( $spacing, 1) - k-map-get( $spacing, thin ) !default;
+$kendo-calendar-sm-cell-padding-x: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-calendar-sm-cell-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 
 $kendo-calendar-md-font-size: $font-size-md !default;
 $kendo-calendar-md-line-height: $line-height-md !default;
 $kendo-calendar-md-cell-size: 32px !default;
-$kendo-calendar-md-cell-padding-x: k-map-get( $spacing, 1 ) !default;
-$kendo-calendar-md-cell-padding-y: k-map-get( $spacing, 1 ) !default;
+$kendo-calendar-md-cell-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-md-cell-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 
 $kendo-calendar-lg-font-size: $font-size-lg !default;
 $kendo-calendar-lg-line-height: $line-height-lg !default;
 $kendo-calendar-lg-cell-size: 40px !default;
-$kendo-calendar-lg-cell-padding-x: k-map-get( $spacing, 2 ) !default;
-$kendo-calendar-lg-cell-padding-y: k-map-get( $spacing, 2 ) !default;
+$kendo-calendar-lg-cell-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-calendar-lg-cell-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 
 $kendo-calendar-sizes: (
     sm: (

package/scss/captcha/_index.scss

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

package/scss/captcha/_layout.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/captcha/_layout.scss";
+@import "@progress/kendo-theme-default/scss/captcha/_layout.scss";

package/scss/captcha/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/captcha/_theme.scss";
+@import "@progress/kendo-theme-default/scss/captcha/_theme.scss";

package/scss/captcha/_variables.scss

@@ -1,14 +1,14 @@
 // Captcha
-$captcha-spacer: k-map-get( $spacing, 2 ) !default;
+$captcha-spacer: k-map-get( $kendo-spacing, 2 ) !default;
 
 $captcha-width: 280px !default;
 $captcha-font-family: $font-family !default;
 $captcha-font-size: $font-size !default;
 $captcha-line-height: $line-height !default;
 $captcha-gap: $captcha-spacer !default;
-$captcha-bg: $component-bg !default;
-$captcha-text: $component-bg !default;
-$captcha-border: $component-bg !default;
+$captcha-bg: $kendo-component-bg !default;
+$captcha-text: $kendo-component-bg !default;
+$captcha-border: $kendo-component-bg !default;
 
 $captcha-image-wrap-gap: $captcha-spacer !default;
 

package/scss/card/_index.scss

@@ -5,13 +5,12 @@
 @import "../common/_index.scss";
 @import "../utils/_flex.scss";
 @import "../utils/_grid.scss";
-@import "../styling/_index.scss";
 @import "../action-buttons/_index.scss";
 @import "../icons/_index.scss";
 @import "../typography/_index.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/card/_layout.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/card/_layout.scss";
+@import "@progress/kendo-theme-default/scss/card/_layout.scss";

package/scss/card/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/card/_theme.scss";
+@import "@progress/kendo-theme-default/scss/card/_theme.scss";

package/scss/card/_variables.scss

@@ -1,6 +1,6 @@
 // Card
-$card-padding-x: k-map-get( $spacing, lg ) !default;
-$card-padding-y: k-map-get( $spacing, md ) !default;
+$card-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$card-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
 $card-border-width: 1px !default;
 $card-border-radius: $kendo-border-radius-lg !default;
 $card-inner-border-radius: calc( #{$card-border-radius} - #{$card-border-width} ) !default;
@@ -8,11 +8,11 @@ $card-font-family: $font-family !default;
 $card-font-size: $font-size !default;
 $card-line-height: $line-height !default;
 
-$card-deck-gap: k-map-get( $spacing, lg ) !default;
+$card-deck-gap: k-map-get( $kendo-spacing, 4 ) !default;
 
-$card-bg: $component-bg !default;
-$card-text: $component-text !default;
-$card-border: $component-border !default;
+$card-bg: $kendo-component-bg !default;
+$card-text: $kendo-component-text !default;
+$card-border: $kendo-component-border !default;
 $card-shadow: null !default;
 
 $card-focus-bg: null !default;
@@ -24,42 +24,42 @@ $card-header-padding-x: $card-padding-x !default;
 $card-header-padding-y: $card-padding-y !default;
 $card-header-border-width: 1px !default;
 $card-header-bg: null !default;
-$card-header-text: $header-text !default;
-$card-header-border: $header-border !default;
+$card-header-text: $kendo-component-header-text !default;
+$card-header-border: $kendo-component-header-border !default;
 
-$card-body-padding-x: k-map-get( $spacing, lg ) !default;
-$card-body-padding-y: k-map-get( $spacing, lg ) !default;
+$card-body-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$card-body-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
 
 $card-footer-padding-x: $card-padding-x !default;
 $card-footer-padding-y: $card-padding-y !default;
 $card-footer-border-width: 1px !default;
 $card-footer-bg: null !default;
-$card-footer-text: $header-text !default;
-$card-footer-border: $header-border !default;
+$card-footer-text: $kendo-component-header-text !default;
+$card-footer-border: $kendo-component-header-border !default;
 
-$card-title-margin-bottom: k-map-get( $spacing, sm ) !default;
+$card-title-margin-bottom: k-map-get( $kendo-spacing, 2 ) !default;
 $card-title-font-size: $h5-font-size !default;
 $card-title-font-family: null !default;
 $card-title-line-height: 1.25 !default;
 $card-title-font-weight: $font-weight-normal !default;
 $card-title-letter-spacing: null !default;
 
-$card-subtitle-margin-bottom: k-map-get( $spacing, sm ) !default;
+$card-subtitle-margin-bottom: k-map-get( $kendo-spacing, 2 ) !default;
 $card-subtitle-font-size: $font-size-sm !default;
 $card-subtitle-font-family: null !default;
 $card-subtitle-line-height: normal !default;
 $card-subtitle-font-weight: $font-weight-normal !default;
 $card-subtitle-letter-spacing: null !default;
-$card-subtitle-text: $subtle-text !default;
+$card-subtitle-text: $kendo-subtle-text !default;
 
 $card-img-max-width: 100px !default;
 $card-avatar-size: 45px !default;
 $card-avatar-spacing: $card-header-padding-x !default;
 
-$card-actions-padding-x: k-map-get( $spacing, 2 ) !default;
-$card-actions-padding-y: k-map-get( $spacing, 2 ) !default;
+$card-actions-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$card-actions-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 $card-actions-border-width: 1px !default;
-$card-actions-gap: k-map-get( $spacing, 2 ) !default;
+$card-actions-gap: k-map-get( $kendo-spacing, 2 ) !default;
 
 $card-deck-scroll-button-radius: 0px !default;
 $card-deck-scroll-button-offset: -$kendo-button-border-width !default;

package/scss/chat/_index.scss

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

package/scss/chat/_layout.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/chat/_layout.scss";
+@import "@progress/kendo-theme-default/scss/chat/_layout.scss";

package/scss/chat/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/chat/_theme.scss";
+@import "@progress/kendo-theme-default/scss/chat/_theme.scss";

package/scss/chat/_variables.scss

@@ -18,7 +18,7 @@ $chat-message-list-spacing: $chat-item-spacing-y !default;
 $chat-timestamp-font-size: smaller !default;
 $chat-timestamp-line-height: null !default;
 $chat-timestamp-transform: uppercase !default;
-$chat-timestamp-text: $subtle-text !default;
+$chat-timestamp-text: $kendo-subtle-text !default;
 $chat-timestamp-bg: null !default;
 
 $chat-bubble-padding-x: 12px !default;
@@ -32,11 +32,11 @@ $chat-bubble-border-radius-sm: 2px !default;
 $chat-avatar-size: 32px !default;
 $chat-avatar-spacing: $chat-item-spacing-x !default;
 
-$chat-toolbar-padding-x: $toolbar-padding-x !default;
-$chat-toolbar-padding-y: $toolbar-padding-y !default;
-$chat-toolbar-spacing: $toolbar-spacing !default;
-$chat-toolbar-bg: $toolbar-bg !default;
-$chat-toolbar-text: $toolbar-text !default;
+$chat-toolbar-padding-x: $kendo-toolbar-padding-x-md !default;
+$chat-toolbar-padding-y: $kendo-toolbar-padding-y-md !default;
+$chat-toolbar-spacing: $kendo-toolbar-spacing-md !default;
+$chat-toolbar-bg: $kendo-toolbar-bg !default;
+$chat-toolbar-text: $kendo-toolbar-text !default;
 $chat-toolbar-border: inherit !default;
 
 $chat-quick-reply-padding-x: 12px !default;
@@ -45,28 +45,28 @@ $chat-quick-reply-spacing: 8px !default;
 $chat-quick-reply-line-height: $chat-bubble-line-height !default;
 
 
-$chat-bg: $app-bg !default;
-$chat-text: $app-text !default;
-$chat-border: $app-border !default;
+$chat-bg: $kendo-app-bg !default;
+$chat-text: $kendo-app-text !default;
+$chat-border: $kendo-app-border !default;
 
-$chat-bubble-bg: $component-bg !default;
-$chat-bubble-text: $component-text !default;
+$chat-bubble-bg: $kendo-component-bg !default;
+$chat-bubble-text: $kendo-component-text !default;
 $chat-bubble-border: $chat-bubble-bg !default;
 $chat-bubble-shadow: 0 1px 2px rgba( black, .08 ) !default;
 $chat-bubble-hover-shadow: 0 1px 2px rgba( black, .16 ) !default;
 $chat-bubble-selected-shadow: 0 3px 10px rgba( black, .16 ) !default;
 
-$chat-alt-bubble-bg: $primary !default;
-$chat-alt-bubble-text: contrast-wcag( $chat-alt-bubble-bg ) !default;
+$chat-alt-bubble-bg: $kendo-color-primary !default;
+$chat-alt-bubble-text: k-contrast-legacy( $chat-alt-bubble-bg ) !default;
 $chat-alt-bubble-border: $chat-alt-bubble-bg !default;
 $chat-alt-bubble-shadow: 0 1px 2px rgba( $chat-alt-bubble-bg, .2 ) !default;
 $chat-alt-bubble-hover-shadow: 0 1px 2px rgba( $chat-alt-bubble-bg, .2 ) !default;
 $chat-alt-bubble-selected-shadow: 0 3px 10px rgba( $chat-alt-bubble-bg, .4 ) !default;
 
 $chat-quick-reply-bg: transparent !default;
-$chat-quick-reply-text: $primary !default;
-$chat-quick-reply-border: $primary !default;
+$chat-quick-reply-text: $kendo-color-primary !default;
+$chat-quick-reply-border: $kendo-color-primary !default;
 
-$chat-quick-reply-hover-bg: $primary !default;
-$chat-quick-reply-hover-text: $primary-contrast !default;
-$chat-quick-reply-hover-border: $primary !default;
+$chat-quick-reply-hover-bg: $kendo-color-primary !default;
+$chat-quick-reply-hover-text: $kendo-color-primary-contrast !default;
+$chat-quick-reply-hover-border: $kendo-color-primary !default;

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

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/checkbox/_layout.scss";
+@import "@progress/kendo-theme-default/scss/checkbox/_layout.scss";

package/scss/checkbox/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/checkbox/_theme.scss";
+@import "@progress/kendo-theme-default/scss/checkbox/_theme.scss";

package/scss/checkbox/_variables.scss

@@ -7,31 +7,31 @@ $kendo-checkbox-border-width: 1px !default;
 // Checkbox sizes
 $kendo-checkbox-sizes: (
     sm: (
-        size: k-map-get( $spacing, 3 ),
-        glyph-size: ( k-map-get( $spacing, 3 ) - k-map-get( $spacing, thin ) ),
-        ripple-size: k-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: k-map-get( $spacing, 4 ),
-        glyph-size: ( k-map-get( $spacing, 4 ) - k-map-get( $spacing, thin ) ),
-        ripple-size: k-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: k-map-get( $spacing, 5 ),
-        glyph-size: ( k-map-get( $spacing, 5 ) - k-map-get( $spacing, thin ) ),
-        ripple-size: k-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;
 
 /// Background color of checkbox.
 /// @group checkbox
-$kendo-checkbox-bg: $component-bg !default;
+$kendo-checkbox-bg: $kendo-component-bg !default;
 /// Color of checkbox.
 /// @group checkbox
 $kendo-checkbox-text: null !default;
 /// Border color of checkbox.
 /// @group checkbox
-$kendo-checkbox-border: $component-border !default;
+$kendo-checkbox-border: $kendo-component-border !default;
 
 /// Background color of hovered checkbox.
 /// @group checkbox
@@ -45,10 +45,10 @@ $kendo-checkbox-hover-border: null !default;
 
 /// Background color of checked checkbox.
 /// @group checkbox
-$kendo-checkbox-checked-bg: $primary !default;
+$kendo-checkbox-checked-bg: $kendo-color-primary !default;
 /// Color of checked checkbox.
 /// @group checkbox
-$kendo-checkbox-checked-text: contrast-wcag( $kendo-checkbox-checked-bg ) !default;
+$kendo-checkbox-checked-text: k-contrast-legacy( $kendo-checkbox-checked-bg ) !default;
 /// Border color of checked checkbox.
 /// @group checkbox
 $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
@@ -74,7 +74,7 @@ $kendo-checkbox-focus-shadow: 0 0 0 2px rgba( black, .06 ) !default;
 $kendo-checkbox-focus-checked-border: null !default;
 /// Box shadow of focused and checked checkbox.
 /// @group checkbox
-$kendo-checkbox-focus-checked-shadow: 0 0 0 2px rgba( $primary, .3 ) !default;
+$kendo-checkbox-focus-checked-shadow: 0 0 0 2px rgba( $kendo-color-primary, .3 ) !default;
 
 /// Background color of disabled checkbox.
 /// @group checkbox
@@ -101,10 +101,10 @@ $kendo-checkbox-disabled-checked-border: null !default;
 $kendo-checkbox-invalid-bg: null !default;
 /// Color of invalid checkbox.
 /// @group checkbox
-$kendo-checkbox-invalid-text: $invalid-text !default;
+$kendo-checkbox-invalid-text: $kendo-invalid-text !default;
 /// Border color of invalid checkbox.
 /// @group checkbox
-$kendo-checkbox-invalid-border: $invalid-border !default;
+$kendo-checkbox-invalid-border: $kendo-invalid-border !default;
 
 
 // Checkbox indicator
@@ -125,24 +125,24 @@ $kendo-checkbox-indeterminate-glyph: "\e121" !default;
 
 /// Image of checked checkbox indicator.
 /// @group checkbox
-$kendo-checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
+$kendo-checkbox-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/></svg>") ) !default;
 /// Image image of checked checkbox indicator.
 /// @group checkbox
-$kendo-checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>") ) !default;
+$kendo-checkbox-indeterminate-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M4,8 h8'/></svg>") ) !default;
 
 
 // Checkbox label
 
 /// The horizontal margin of the checkbox inside a label.
 /// @group checkbox
-$kendo-checkbox-label-margin-x: k-map-get( $spacing, 1 ) !default;
+$kendo-checkbox-label-margin-x: k-map-get( $kendo-spacing, 1 ) !default;
 
 
 // Checkbox list
 
 /// Spacing between items of horizontal checkbox list.
 /// @group checkbox
-$kendo-checkbox-list-spacing: k-map-get( $spacing, 4 ) !default;
+$kendo-checkbox-list-spacing: k-map-get( $kendo-spacing, 4 ) !default;
 /// Horizontal padding of checkbox list items.
 /// @group checkbox
 $kendo-checkbox-list-item-padding-x: 0px !default;

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

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/chip/_layout.scss";
+@import "@progress/kendo-theme-default/scss/chip/_layout.scss";

package/scss/chip/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/chip/_theme.scss";
+@import "@progress/kendo-theme-default/scss/chip/_theme.scss";

package/scss/chip/_variables.scss

@@ -5,21 +5,21 @@
 $kendo-chip-border-width: 1px !default;
 /// The spacing between the text and the icons of the chip.
 /// @group chip
-$kendo-chip-spacing: k-map-get( $spacing, 1 ) !default;
+$kendo-chip-spacing: k-map-get( $kendo-spacing, 1 ) !default;
 
 /// Horizontal padding of the chip.
 /// @group chip
-$kendo-chip-padding-x: k-map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-x-sm: k-map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-x-md: k-map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-x-lg: k-map-get( $spacing, 1 ) !default;
+$kendo-chip-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-padding-x-sm: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-padding-x-md: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-padding-x-lg: k-map-get( $kendo-spacing, 1 ) !default;
 
 /// Vertical padding of the chip.
 /// @group chip
-$kendo-chip-padding-y: k-map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-y-sm: k-map-get( $spacing, 1 ) - k-map-get( $spacing, thin )  !default;
-$kendo-chip-padding-y-md: k-map-get( $spacing, 1 ) !default;
-$kendo-chip-padding-y-lg: k-map-get( $spacing, 1 ) + k-map-get( $spacing, thin ) !default;
+$kendo-chip-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-padding-y-sm: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-chip-padding-y-md: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-chip-padding-y-lg: k-map-get( $kendo-spacing, 1.5 ) !default;
 
 /// Font sizes of the chip.
 /// @group chip
@@ -35,6 +35,11 @@ $kendo-chip-line-height-sm: $kendo-chip-line-height !default;
 $kendo-chip-line-height-md: $kendo-chip-line-height !default;
 $kendo-chip-line-height-lg: $kendo-chip-line-height !default;
 
+/// Calculated height of the chip.
+/// @group chip
+$kendo-chip-calc-size: calc( #{$kendo-chip-line-height * 1em} + #{$kendo-chip-padding-y * 2} + #{$kendo-chip-border-width * 2} ) !default;
+$kendo-chip-calc-size-sm: calc( #{$kendo-chip-line-height-sm * 1em} + #{$kendo-chip-padding-y-sm * 2} + #{$kendo-chip-border-width * 2} ) !default;
+
 /// Sizes map for the chip.
 /// @group chip
 $kendo-chip-sizes: (
@@ -83,7 +88,7 @@ $kendo-chip-solid-text: $kendo-button-text !default;
 $kendo-chip-solid-border: $kendo-button-border !default;
 /// The base shadow of solid chip.
 /// @group chip
-$kendo-chip-solid-shadow: 0 0 0 2px if($dark-theme, rgba( 255, 255, 255, .16 ), rgba( 0, 0, 0, .16 )) !default;
+$kendo-chip-solid-shadow: 0 0 0 2px if( $dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) ) !default;
 /// The base gradient of solid chip.
 /// @group chip
 $kendo-chip-solid-gradient: $kendo-button-gradient !default;
@@ -111,7 +116,7 @@ $kendo-chip-solid-selected-text: null !default;
 
 /// The base background color of outline chip.
 /// @group chip
-$kendo-chip-outline-bg: $component-bg !default;
+$kendo-chip-outline-bg: $kendo-component-bg !default;
 /// The base text color of outline chip.
 /// @group chip
 $kendo-chip-outline-text: $kendo-chip-solid-text !default;
@@ -120,14 +125,14 @@ $kendo-chip-outline-text: $kendo-chip-solid-text !default;
 $kendo-chip-outline-border: $kendo-chip-outline-text !default;
 /// The base shadow of outline chip.
 /// @group chip
-$kendo-chip-outline-shadow: 0 0 0 2px if($dark-theme, rgba( 255, 255, 255, .16 ), rgba( 0, 0, 0, .16 )) !default;
+$kendo-chip-outline-shadow: 0 0 0 2px if( $dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) ) !default;
 
 /// The base background color of hovered outline chip.
 /// @group chip
 $kendo-chip-outline-hover-bg: $kendo-chip-outline-text !default;
 /// The base text color of hovered outline chip.
 /// @group chip
-$kendo-chip-outline-hover-text: contrast-wcag( $kendo-chip-outline-hover-bg ) !default;
+$kendo-chip-outline-hover-text: k-contrast-legacy( $kendo-chip-outline-hover-bg ) !default;
 
 /// The base background color of selected outline chip.
 /// @group chip
@@ -141,7 +146,7 @@ $kendo-chip-outline-selected-text: $kendo-chip-outline-hover-text !default;
 /// The sizes of the chip list.
 /// @group chip
 $kendo-chip-list-sizes: (
-    sm: k-map-get( $spacing, 1 ),
-    md: k-map-get( $spacing, 1 ),
-    lg: k-map-get( $spacing, 1 )
+    sm: k-map-get( $kendo-spacing, 1 ),
+    md: k-map-get( $kendo-spacing, 1 ),
+    lg: k-map-get( $kendo-spacing, 1 )
 ) !default;

package/scss/color-preview/_index.scss

@@ -6,6 +6,6 @@
 
 // Component
 @import "../colorgradient/images/alpha-slider-bgr.scss";
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/color-preview/_layout.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/color-preview/_layout.scss";
+@import "@progress/kendo-theme-default/scss/color-preview/_layout.scss";

package/scss/color-preview/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/color-preview/_theme.scss";
+@import "@progress/kendo-theme-default/scss/color-preview/_theme.scss";