@progress/kendo-theme-material 5.12.1-dev.0 → 5.12.1-dev.2

package/scss/progressbar/_variables.scss

@@ -1,29 +1,73 @@
 // Progressbar
-$progressbar-height: 5px !default;
-$progressbar-horizontal-width: 100% !default;
-$progressbar-animation-timing: null !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: k-try-tint( $primary, 8 ) !default;
-$progressbar-text: $component-text !default;
-$progressbar-border: null !default;
-$progressbar-gradient: null !default;
+/// Height of the progressbar.
+/// @group progressbar
+$kendo-progressbar-height: 5px !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: null !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-tint( $kendo-color-primary, 8 ) !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: null !default;
+/// Background gradient of the progressbar.
+/// @group progressbar
+$kendo-progressbar-gradient: null !default;
 
-$progressbar-fill-bg: $primary !default;
-$progressbar-fill-text: $primary-contrast !default;
-$progressbar-fill-border: null !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: $kendo-color-primary-contrast !default;
+/// Progress border color of the progressbar.
+/// @group progressbar
+$kendo-progressbar-value-border: null !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: $component-bg !default;
+/// Border color of the chunk progressbar.
+/// @group progressbar
+$kendo-progressbar-chunk-border: $kendo-component-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

@@ -2,12 +2,9 @@
 
 
 // Dependencies
-@import "../typography/_variables.scss";
-@import "../list/_variables.scss";
-@import "../checkbox/_variables.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/radio/_layout.scss

@@ -1,4 +1,4 @@
-@import "~@progress/kendo-theme-default/scss/radio/_layout.scss";
+@import "@progress/kendo-theme-default/scss/radio/_layout.scss";
 
 @include exports( "radio/layout/material" ) {
 

package/scss/radio/_theme.scss

@@ -1,4 +1,4 @@
-@import "~@progress/kendo-theme-default/scss/radio/_theme.scss";
+@import "@progress/kendo-theme-default/scss/radio/_theme.scss";
 
 @include exports( "radio/theme/material" ) {
 
@@ -7,7 +7,7 @@
 
         // Disabled state
         .k-radio:disabled + & {
-            color: if($dark-theme, $light-secondary-text, $dark-secondary-text);
+            color: if( $dark-theme, $light-secondary-text, $dark-secondary-text );
             opacity: 1;
             filter: none;
         }

package/scss/radio/_variables.scss

@@ -1,3 +1,7 @@
+@import "../list/_variables.scss";
+@import "../checkbox/_variables.scss";
+
+
 // Radio button
 
 /// Border radius of radio button.
@@ -10,19 +14,19 @@ $kendo-radio-border-width: 2px !default;
 // Radio button sizes
 $kendo-radio-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;
 
@@ -51,7 +55,7 @@ $kendo-radio-hover-border: null !default;
 $kendo-radio-checked-bg: null !default;
 /// Color of checked radio button.
 /// @group radio
-$kendo-radio-checked-text: $primary !default;
+$kendo-radio-checked-text: $kendo-color-primary !default;
 /// Border color of checked radio button.
 /// @group radio
 $kendo-radio-checked-border: $kendo-radio-checked-text !default;
@@ -115,24 +119,24 @@ $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 12 12'><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 12 12'><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: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-disabled-checked-text}'/></svg>") ) !default;
+$kendo-radio-disabled-checked-image: k-escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-disabled-checked-text}'/></svg>") ) !default;
 
 
 // Radio label
 
 /// The horizontal margin of the radio button inside of a label.
 /// @group radio
-$kendo-radio-label-margin-x: k-map-get( $spacing, 1 ) !default;
+$kendo-radio-label-margin-x: k-map-get( $kendo-spacing, 1 ) !default;
 
 
 // Radio list
 
 /// Spacing between items of horizontal radio button list.
 /// @group radio
-$kendo-radio-list-spacing: k-map-get( $spacing, 4 ) !default;
+$kendo-radio-list-spacing: k-map-get( $kendo-spacing, 4 ) !default;
 /// Horizontal padding of radio button list items.
 /// @group radio
 $kendo-radio-list-item-padding-x: 0px !default;
@@ -145,7 +149,7 @@ $kendo-radio-list-item-padding-y: $kendo-list-item-padding-y-md !default;
 
 /// Background color of radio button ripple.
 /// @group radio
-$kendo-radio-ripple-bg: $primary !default;
+$kendo-radio-ripple-bg: $kendo-color-primary !default;
 /// Opacity of radio button ripple.
 /// @group radio
 $kendo-radio-ripple-opacity: .2 !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

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

package/scss/rating/_theme.scss

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

package/scss/rating/_variables.scss

@@ -1,23 +1,24 @@
 // Rating
+
 $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 / 2 !default;
+$rating-container-margin-x: k-math-div( $kendo-padding-sm-x, 2 ) !default;
 
-$rating-item-padding-x: $padding-x-sm / 2 !default;
-$rating-item-padding-y: $padding-y !default;
+$rating-item-padding-x: k-math-div( $kendo-padding-sm-x, 2 ) !default;
+$rating-item-padding-y: $kendo-padding-md-y !default;
 
-$rating-label-margin-x: $padding-x-sm !default;
-$rating-label-margin-y: $padding-y !default;
+$rating-label-margin-x: $kendo-padding-sm-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-size: ($kendo-icon-size * 1.5) !default;
 
-$rating-icon-text: $subtle-text !default;
-$rating-icon-selected-text: $primary-darker !default;
-$rating-icon-hover-text: $primary-darker !default;
-$rating-icon-focused-text: $primary-darker !default;
+$rating-icon-text: $kendo-subtle-text !default;
+$rating-icon-selected-text: $kendo-color-primary-darker !default;
+$rating-icon-hover-text: $kendo-color-primary-darker !default;
+$rating-icon-focus-text: $kendo-color-primary-darker !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( black, .1 ) !default;
+$rating-icon-focus-selected-shadow: 0 2px 4px rgba( 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/responsivepanel/_layout.scss

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

package/scss/responsivepanel/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/responsivepanel/_theme.scss";
+@import "@progress/kendo-theme-default/scss/responsivepanel/_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/ripple/_layout.scss

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

package/scss/ripple/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/ripple/_theme.scss";
+@import "@progress/kendo-theme-default/scss/ripple/_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

@@ -1,4 +1,4 @@
-@import "~@progress/kendo-theme-default/scss/scheduler/_layout.scss";
+@import "@progress/kendo-theme-default/scss/scheduler/_layout.scss";
 
 @include exports("scheduler/layout/material") {
 
@@ -46,17 +46,17 @@
         .k-event-template {
             // Angular fix for stronger selector and smaller padding
             & {
-                padding: $padding-y-sm $padding-x-sm;
+                padding: $kendo-padding-sm-y $kendo-padding-sm-x;
             }
         }
 
         .k-event-actions {
-            right: $padding-x-sm;
+            right: $kendo-padding-sm-x;
         }
     }
 
     $handle-size: 2px;
-    $handle-half-size: $handle-size / 2;
+    $handle-half-size: k-math-div( $handle-size, 2 );
     .k-event {
         .k-event-delete {
             border-radius: 50%;

package/scss/scheduler/_theme.scss

@@ -1,4 +1,4 @@
-@import "~@progress/kendo-theme-default/scss/scheduler/_theme.scss";
+@import "@progress/kendo-theme-default/scss/scheduler/_theme.scss";
 
 @include exports("scheduler/theme/material") {
 
@@ -14,7 +14,7 @@
 
         .k-resize-handle::before {
             // TODO: $scheduler-content-area-bg
-            background-color: $primary-contrast;
+            background-color: $kendo-color-primary-contrast;
         }
     }
 
@@ -32,4 +32,3 @@
     }
 
 }
-

package/scss/scheduler/_variables.scss

@@ -4,9 +4,9 @@ $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: k-try-shade( $kendo-button-bg, .5 ) !default;
 $scheduler-toolbar-text: null !default;
@@ -20,9 +20,9 @@ $scheduler-footer-gradient: null !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-sm}) ) !default;
+$scheduler-event-line-height: calc( #{$scheduler-event-min-height} - (2 * #{$kendo-padding-sm-y}) ) !default;
 
-$scheduler-event-bg: $primary !default;
+$scheduler-event-bg: $kendo-color-primary !default;
 $scheduler-event-text: k-contrast-color( $scheduler-event-bg ) !default;
 $scheduler-event-border: null !default;
 $scheduler-event-gradient: null !default;
@@ -34,7 +34,7 @@ $scheduler-event-hover-border: null !default;
 $scheduler-event-hover-gradient: null !default;
 $scheduler-event-hover-shadow: null !default;
 
-$scheduler-event-selected-bg: k-try-tint( $primary, 1 ) !default;
+$scheduler-event-selected-bg: k-try-tint( $kendo-color-primary, 1 ) !default;
 $scheduler-event-selected-text: k-contrast-color( $scheduler-event-selected-bg ) !default;
 $scheduler-event-selected-border: null !default;
 $scheduler-event-selected-gradient: null !default;
@@ -42,8 +42,8 @@ $scheduler-event-selected-shadow: $box-shadow-depth-3 !default;
 
 $scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
 
-$scheduler-cell-padding-x: k-map-get( $spacing, 2 ) !default;
-$scheduler-cell-padding-y: k-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 * 1rem !default;
 $scheduler-datecolumn-width: 12rem !default;
 $scheduler-timecolumn-width: 11rem !default;
@@ -59,36 +59,36 @@ $scheduler-weekend-text: null !default;
 $scheduler-othermonth-bg: k-try-shade( $scheduler-bg, .5 ) !default;
 $scheduler-othermonth-text: null !default;
 
-$scheduler-yearview-padding-x: k-map-get( $spacing, 5 ) !default;
+$scheduler-yearview-padding-x: k-map-get( $kendo-spacing, 5 ) !default;
 $scheduler-yearview-padding-y: $scheduler-yearview-padding-x !default;
 
-$scheduler-yearview-calendar-gap: k-map-get( $spacing, 5 ) !default;
+$scheduler-yearview-calendar-gap: k-map-get( $kendo-spacing, 5 ) !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-sm !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( black, .2 ) !default;
 
-$scheduler-tooltip-title-margin-y: k-map-get( $spacing, 2 ) !default;
+$scheduler-tooltip-title-margin-y: k-map-get( $kendo-spacing, 2 ) !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-sm !default;
-$scheduler-tooltip-event-padding-y: k-map-get( $spacing, 2 ) !default;
+$scheduler-tooltip-event-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$scheduler-tooltip-event-padding-y: k-map-get( $kendo-spacing, 2 ) !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, 2 ) !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/scroller/_layout.scss

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

package/scss/scroller/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/scroller/_theme.scss";
+@import "@progress/kendo-theme-default/scss/scroller/_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

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

package/scss/scrollview/_theme.scss

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

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( black, .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( black, .3 ) 0 0 15px !default;
 $scrollview-navigation-bg: rgba( black, 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/searchbox/_layout.scss

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

package/scss/searchbox/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/searchbox/_theme.scss";
+@import "@progress/kendo-theme-default/scss/searchbox/_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

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

package/scss/signature/_theme.scss

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

package/scss/signature/_variables.scss

@@ -1,15 +1,15 @@
 $kendo-signature-width: 246px !default;
 $kendo-signature-height: 108px !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: k-map-get( $spacing, 1 ) !default;
-$kendo-signature-padding-x-sm: k-map-get( $spacing, thin ) !default;
-$kendo-signature-padding-x-md: $kendo-signature-padding-x !default;
-$kendo-signature-padding-x-lg: k-map-get( $spacing, 1 ) + k-map-get( $spacing, thin ) !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, 1.5 ) !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: k-map-get( $spacing, 1 ) !default;
-$kendo-signature-maximized-line-width: k-map-get( $spacing, 1 ) - k-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";

package/scss/skeleton/_layout.scss

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