@progress/kendo-theme-material 4.42.1-dev.2 → 5.0.0-alpha.2

package/scss/button/_variables.scss

@@ -1,132 +1,174 @@
 // Button
 
-/// Width of border around buttons
-/// @group buttons
-$button-border-width: 0px !default;
-/// Border radius of buttons
-/// @group buttons
-$button-border-radius: $border-radius !default;
-
-/// Horizontal padding of buttons
-/// @group buttons
-$button-padding-x: $padding-x !default;
-/// Vertical padding of buttons
-/// @group buttons
-$button-padding-y: 8px !default;
-$button-font-family: $font-family !default;
-$button-font-size: $font-size !default;
-$button-line-height: (20 / 14) !default;
-
-$button-padding-x-sm: $button-padding-x / 2 !default;
-$button-padding-y-sm: $button-padding-y / 2 !default;
-$button-line-height-sm: (20 / 14) !default;
-
-$button-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} + #{$button-border-width * 2} ) !default;
-$button-inner-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} ) !default;
-
-/// The background of the buttons.
-/// @group buttons
-$button-bg: $base-bg !default;
-/// The text color of the buttons.
-/// @group buttons
-$button-text: $base-text !default;
-/// The border color of the buttons.
-/// @group buttons
-$button-border: $button-bg !default;
-/// The background gradient of the buttons.
-/// @group buttons
-$button-gradient: null !default;
-$button-shadow: $box-shadow-depth-2 !default;
-
-/// The background of hovered buttons.
-/// @group buttons
-$button-hovered-bg: null !default;
-/// The text color of hovered buttons.
-/// @group buttons
-$button-hovered-text: null !default;
-/// The border color of hovered buttons.
-/// @group buttons
-$button-hovered-border: null !default;
-/// The background gradient of hovered buttons.
-/// @group buttons
-$button-hovered-gradient: null !default;
-$button-hovered-shadow: null !default;
-
-/// The background color of active buttons.
-/// @group buttons
-$button-active-bg: null !default;
-/// The text color of active buttons.
-/// @group buttons
-$button-active-text: null !default;
-/// The border color of active buttons.
-/// @group buttons
-$button-active-border: null !default;
-/// The background gradient of active buttons.
-/// @group buttons
-$button-active-gradient: null !default;
-$button-active-shadow: $box-shadow-depth-3 !default;
-
-/// The background color of selected buttons.
-/// @group buttons
-$button-selected-bg: $button-active-bg !default;
-/// The text color of selected buttons.
-/// @group buttons
-$button-selected-text: $button-active-text !default;
-/// The border color of selected buttons.
-/// @group buttons
-$button-selected-border: $button-active-bg !default;
-/// The background gradient of selected buttons.
-/// @group buttons
-$button-selected-gradient: null !default;
-$button-selected-shadow: null !default;
-
-/// The shadow of focused buttons.
-/// @group buttons
-$button-focused-shadow: null !default;
-
-
-// Disabled button
-$button-disabled-bg: try-shade( $body-bg, 12% ) !default;
-$button-disabled-text: $disabled-text !default;
-$button-disabled-border: null !default;
-$button-disabled-gradient: null !default;
-$button-disabled-shadow: none !default;
-
-
-// Primary button
-$primary-button-bg: $primary !default;
-$primary-button-text: $primary-contrast !default;
-$primary-button-border: $primary-button-bg !default;
-$primary-button-gradient: null !default;
-$primary-button-shadow: null !default;
-
-$primary-button-hovered-bg: null !default;
-$primary-button-hovered-text: null !default;
-$primary-button-hovered-border: null !default;
-$primary-button-hovered-gradient: null !default;
-$primary-button-hovered-shadow: null !default;
-
-$primary-button-active-bg: null !default;
-$primary-button-active-text: null !default;
-$primary-button-active-border: null !default;
-$primary-button-active-gradient: null !default;
-$primary-button-active-shadow: null !default;
-
-$primary-button-selected-bg: $primary-button-active-bg !default;
-$primary-button-selected-text: $primary-button-active-text !default;
-$primary-button-selected-border: $primary-button-active-gradient !default;
-$primary-button-selected-gradient: null !default;
-$primary-button-selected-shadow: null !default;
-
-$primary-button-focused-shadow: null !default;
-
-$button-group-focus-shadow: null !default;
-
-$flat-button-hover-opacity: .08 !default;
-$flat-button-focus-opacity: .12 !default;
-$flat-button-active-opacity: .16 !default;
-$flat-button-selected-opacity: .22 !default;
-
-$clear-button-text: inherit !default;
-$clear-button-hover-text: inherit !default;
-$clear-button-focused-opacity: .155 !default; // equal to 10% of black
+/// Width of the border around the button.
+/// @group button
+$kendo-button-border-width: 0px !default;
+
+/// Border radius of the button.
+/// @group button
+$kendo-button-border-radius: ( map-get( $spacing, 1 ) / 2 ) !default;
+$kendo-button-border-radius-sm: ( map-get( $spacing, 1 ) / 4 ) !default;
+$kendo-button-border-radius-md: ( map-get( $spacing, 1 ) / 2 ) !default;
+$kendo-button-border-radius-lg: map-get( $spacing, 1 ) !default;
+
+
+/// Horizontal padding of the button.
+/// @group button
+$kendo-button-padding-x: map-get( $spacing, 4 ) !default;
+$kendo-button-padding-x-sm: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-x-md: map-get( $spacing, 4 ) !default;
+$kendo-button-padding-x-lg: map-get( $spacing, 6 ) !default;
+
+
+/// Vertical padding of the button.
+/// @group button
+$kendo-button-padding-y: $kendo-button-padding-x / 2 !default;
+$kendo-button-padding-y-sm: $kendo-button-padding-x-sm / 2 !default;
+$kendo-button-padding-y-md: $kendo-button-padding-x-md / 2 !default;
+$kendo-button-padding-y-lg: $kendo-button-padding-x-lg / 2 !default;
+
+
+/// Font family of the button.
+/// @group button
+$kendo-button-font-family: $font-family !default;
+
+/// Font sizes of the button.
+/// @group button
+$kendo-button-font-size: $font-size !default;
+$kendo-button-font-size-sm: $font-size-sm !default;
+$kendo-button-font-size-md: $font-size !default;
+$kendo-button-font-size-lg: $font-size-lg !default;
+
+/// Line heights used along with $font-size.
+/// @group button
+$kendo-button-line-height: (20 / 14) !default;
+$kendo-button-line-height-sm: (20 / 14) !default;
+$kendo-button-line-height-md: (20 / 14) !default;
+$kendo-button-line-height-lg: $line-height-lg !default;
+
+/// Calculated height of the button.
+/// @group button
+$kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
+
+/// Calculated inner height of the button. Without the border width.
+/// @group button
+$kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
+
+/// Theme colors map for the button.
+/// @group button
+$kendo-button-theme-colors: map-merge((base: $base-bg), $theme-colors ) !default;
+
+/// The base background of the button.
+/// @group button
+$kendo-button-bg: $base-bg !default;
+/// The base text color of the button.
+/// @group button
+$kendo-button-text: $base-text !default;
+/// The base border color of the button.
+/// @group button
+$kendo-button-border: $kendo-button-bg !default;
+/// The base background gradient of the button.
+/// @group button
+$kendo-button-gradient: null !default;
+/// The base shadow of the button.
+/// @group button
+$kendo-button-shadow: $box-shadow-depth-2 !default;
+
+/// The base background of hovered button.
+/// @group button
+$kendo-button-hover-bg: null !default;
+/// The base text color of hovered button.
+/// @group button
+$kendo-button-hover-text: null !default;
+/// The base border color of hovered button.
+/// @group button
+$kendo-button-hover-border: null !default;
+/// The base background gradient of hovered button.
+/// @group button
+$kendo-button-hover-gradient: null !default;
+/// The base shadow of hovered button.
+/// @group button
+$kendo-button-hover-shadow: null !default;
+
+/// The base background color of active button.
+/// @group button
+$kendo-button-active-bg: null !default;
+/// The base text color of active button.
+/// @group button
+$kendo-button-active-text: null !default;
+/// The base border color of active button.
+/// @group button
+$kendo-button-active-border: null !default;
+/// The base background gradient of active button.
+/// @group button
+$kendo-button-active-gradient: null !default;
+/// The base shadow of active button.
+/// @group button
+$kendo-button-active-shadow: $box-shadow-depth-3 !default;
+
+/// The base background color of selected button.
+/// @group button
+$kendo-button-selected-bg: $kendo-button-active-bg !default;
+/// The base text color of selected button.
+/// @group button
+$kendo-button-selected-text: $kendo-button-active-text !default;
+/// The base border color of selected button.
+/// @group button
+$kendo-button-selected-border: $kendo-button-active-bg !default;
+/// The base background gradient of selected button.
+/// @group button
+$kendo-button-selected-gradient: null !default;
+/// The base shadow of selected button.
+/// @group button
+$kendo-button-selected-shadow: null !default;
+
+/// The base background of focused button.
+/// @group button
+$kendo-button-focus-bg: null !default;
+/// The base text color of focused button.
+/// @group button
+$kendo-button-focus-text: null !default;
+/// The base border color of focused button.
+/// @group button
+$kendo-button-focus-border: null !default;
+/// The base background gradient of focused button.
+/// @group button
+$kendo-button-focus-gradient: null !default;
+/// The base shadow of focused buttons.
+/// @group button
+$kendo-button-focus-shadow: null !default;
+
+/// The base background color of disabled button.
+/// @group button
+$kendo-button-disabled-bg: try-shade( $body-bg, 12% ) !default;
+/// The base text color of disabled button.
+/// @group button
+$kendo-button-disabled-text: $disabled-text !default;
+/// The base border color of disabled button.
+/// @group button
+$kendo-button-disabled-border: null !default;
+/// The base background gradient of disabled button.
+/// @group button
+$kendo-button-disabled-gradient: null !default;
+/// The base shadow of disabled button.
+/// @group button
+$kendo-button-disabled-shadow: none !default;
+
+/// The overlay opacity of hovered flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-hover-opacity: .08 !default;
+/// The overlay opacity of focused flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-focus-opacity: .12 !default;
+/// The overlay opacity of active flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-active-opacity: .16 !default;
+/// The overlay opacity of selected flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-selected-opacity: .22 !default;
+
+/// The color transition of the button.
+/// @group button
+$kendo-button-color-transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1) !default;
+
+$kendo-button-group-focus-shadow: null !default;

package/scss/calendar/_layout.scss

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

package/scss/calendar/_theme.scss

@@ -1,4 +1,4 @@
-@import "../../modules/@progress/kendo-theme-default/scss/calendar/_theme.scss";
+@import "~@progress/kendo-theme-default/scss/calendar/_theme.scss";
 
 @include exports("calendar/theme/material") {
 

package/scss/captcha/_layout.scss

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

package/scss/card/_layout.scss

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

package/scss/chat/_layout.scss

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

package/scss/chat/_variables.scss

@@ -32,13 +32,13 @@ $chat-bubble-border-radius-sm: 2px !default;
 $chat-avatar-size: 32px !default;
 $chat-avatar-spacing: $chat-item-spacing-x !default;
 
-$chat-message-box-padding-x: $input-padding-x !default;
-$chat-message-box-padding-y: $input-padding-y !default;
+$chat-message-box-padding-x: $kendo-input-padding-x !default;
+$chat-message-box-padding-y: $kendo-input-padding-y !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: try-shade( $button-bg, .5 ) !default;
+$chat-toolbar-bg: try-shade( $kendo-button-bg, .5 ) !default;
 $chat-toolbar-text: $toolbar-text !default;
 $chat-toolbar-border: inherit !default;
 
@@ -75,9 +75,9 @@ $chat-quick-reply-hover-text: $primary-contrast !default;
 $chat-quick-reply-hover-border: $primary !default;
 
 $chat-message-box-bg: $component-bg !default;
-$chat-message-box-text: $input-text !default;
+$chat-message-box-text: $kendo-input-text !default;
 $chat-message-box-border: inherit !default;
-$chat-message-box-focus-shadow: 0 0 40px rgba( $input-text, .1 ) !default;
+$chat-message-box-focus-shadow: 0 0 40px rgba( $kendo-input-text, .1 ) !default;
 
 $chat-message-box-button-hover-text: $primary !default;
 

package/scss/checkbox/_layout.scss

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

package/scss/checkbox/_theme.scss

@@ -1,4 +1,4 @@
-@import "../../modules/@progress/kendo-theme-default/scss/checkbox/_theme.scss";
+@import "~@progress/kendo-theme-default/scss/checkbox/_theme.scss";
 
 @include exports("checkbox/theme/material") {
 
@@ -16,7 +16,7 @@
         // Ripple
         .k-ripple-blob {
             opacity: .2;
-            background-color: $checkbox-checked-bg;
+            background-color: $kendo-checkbox-checked-bg;
         }
 
     }

package/scss/checkbox/_variables.scss

@@ -1,73 +1,168 @@
 // Checkbox
-$checkbox-size: map-get( $spacing, 4 ) !default;
-$checkbox-radius: map-get( $spacing, thin ) !default;
-$checkbox-border-width: 2px !default;
-$checkbox-line-height: calc( #{$checkbox-size} + #{$checkbox-border-width} ) !default;
 
-$checkbox-bg: null !default;
-$checkbox-text: transparent !default;
-$checkbox-border: rgba( if( $dark-theme, $white, $black ), .54 ) !default;
-
-$checkbox-hovered-bg: null !default;
-$checkbox-hovered-text: null !default;
-$checkbox-hovered-border: rgba( if( $dark-theme, $white, $black ), .87 ) !default;
-
-$checkbox-checked-bg: $primary !default;
-$checkbox-checked-text: contrast-wcag( $checkbox-checked-bg ) !default;
-$checkbox-checked-border: $checkbox-checked-bg !default;
-
-$checkbox-indeterminate-bg: $checkbox-checked-bg !default;
-$checkbox-indeterminate-text: $checkbox-checked-text !default;
-$checkbox-indeterminate-border: $checkbox-checked-border !default;
-
-$checkbox-focused-border: $checkbox-border !default;
-$checkbox-focused-shadow: none !default;
-$checkbox-focused-checked-border: $checkbox-checked-border !default;
-$checkbox-focused-checked-shadow: none !default;
-
-$checkbox-disabled-bg: null !default;
-$checkbox-disabled-text: null !default;
-$checkbox-disabled-border: try-shade( $component-bg, 4 ) !default;
-
-$checkbox-disabled-checked-bg: $checkbox-disabled-border !default;
-$checkbox-disabled-checked-text: contrast-wcag( $checkbox-disabled-checked-bg ) !default;
-$checkbox-disabled-checked-border: $checkbox-disabled-checked-bg !default;
-
-$checkbox-invalid-bg: null !default;
-$checkbox-invalid-text: $invalid-text !default;
-$checkbox-invalid-border: $invalid-border !default;
+/// The sizes of checkbox.
+/// @group checkbox
+$kendo-checkbox-sizes: (
+    sm: map-get( $spacing, 3 ),
+    md: map-get( $spacing, 4 ),
+    lg: map-get( $spacing, 6 )
+) !default;
+
+/// The  border width of checkbox.
+/// @group checkbox
+$kendo-checkbox-border-width: 2px !default;
+/// The line height of checkbox.
+/// @group checkbox
+$kendo-checkbox-line-height: calc( #{map-get( $kendo-checkbox-sizes, "md" )} + #{$kendo-checkbox-border-width} ) !default;
+
+/// The background of checkbox.
+/// @group checkbox
+$kendo-checkbox-bg: null !default;
+/// The background of checkbox.
+/// @group checkbox
+$kendo-checkbox-text: transparent !default;
+/// The border of checkbox.
+/// @group checkbox
+$kendo-checkbox-border: rgba( if( $dark-theme, $white, $black ), .54 ) !default;
+
+/// The background of hovered checkbox.
+/// @group checkbox
+$kendo-checkbox-hover-bg: null !default;
+/// The text of hovered checkbox.
+/// @group checkbox
+$kendo-checkbox-hover-text: null !default;
+/// The border of hovered checkbox.
+/// @group checkbox
+$kendo-checkbox-hover-border: rgba( if( $dark-theme, $white, $black ), .87 ) !default;
+
+/// The background of checked checkbox.
+/// @group checkbox
+$kendo-checkbox-checked-bg: $primary !default;
+/// The text of checked checkbox.
+/// @group checkbox
+$kendo-checkbox-checked-text: contrast-wcag( $kendo-checkbox-checked-bg ) !default;
+/// The border of checked checkbox.
+/// @group checkbox
+$kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
+
+/// The background of indeterminate checkbox.
+/// @group checkbox
+$kendo-checkbox-indeterminate-bg: $kendo-checkbox-checked-bg !default;
+/// The text of indeterminate checkbox.
+/// @group checkbox
+$kendo-checkbox-indeterminate-text: $kendo-checkbox-checked-text !default;
+/// The border of indeterminate checkbox.
+/// @group checkbox
+$kendo-checkbox-indeterminate-border: $kendo-checkbox-checked-border !default;
+
+/// The border of focused checkbox.
+/// @group checkbox
+$kendo-checkbox-focus-border: $kendo-checkbox-border !default;
+/// The shadow of focused checkbox.
+/// @group checkbox
+$kendo-checkbox-focus-shadow: none !default;
+/// The border of focused and checked checkbox.
+/// @group checkbox
+$kendo-checkbox-focus-checked-border: $kendo-checkbox-checked-border !default;
+/// The shadow of focused and checked checkbox.
+/// @group checkbox
+$kendo-checkbox-focus-checked-shadow: none !default;
+
+/// The background of disabled checkbox.
+/// @group checkbox
+$kendo-checkbox-disabled-bg: null !default;
+/// The text of disabled checkbox.
+/// @group checkbox
+$kendo-checkbox-disabled-text: null !default;
+/// The border of disabled checkbox.
+/// @group checkbox
+$kendo-checkbox-disabled-border: try-shade( $component-bg, 4 ) !default;
+
+/// The background of disabled and checked checkbox.
+/// @group checkbox
+$kendo-checkbox-disabled-checked-bg: $kendo-checkbox-disabled-border !default;
+/// The text of disabled and checked checkbox.
+/// @group checkbox
+$kendo-checkbox-disabled-checked-text: contrast-wcag( $kendo-checkbox-disabled-checked-bg ) !default;
+/// The border of disabled and checked checkbox.
+/// @group checkbox
+$kendo-checkbox-disabled-checked-border: $kendo-checkbox-disabled-checked-bg !default;
+
+/// The background of invalid checkbox.
+/// @group checkbox
+$kendo-checkbox-invalid-bg: null !default;
+/// The text of invalid checkbox.
+/// @group checkbox
+$kendo-checkbox-invalid-text: $invalid-text !default;
+/// The border of invalid checkbox.
+/// @group checkbox
+$kendo-checkbox-invalid-border: $invalid-border !default;
 
 
 // Checkbox indicator
-$checkbox-icon-type: image !default;
 
-$checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
-$checkbox-glyph-size: 10px !default;
-$checkbox-checked-glyph: "\e118" !default;
-$checkbox-indeterminate-glyph: "\e121" !default;
+/// The icon type of checked checkbox.
+/// @group checkbox
+$kendo-checkbox-icon-type: image !default;
 
-$checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='#{$checkbox-checked-text}' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/></svg>") ) !default;
-$checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$checkbox-indeterminate-text}' stroke-width='3' d='M4 10h12'/></svg>") ) !default;
+/// The glyph font family of checkbox.
+/// @group checkbox
+$kendo-checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
+/// The glyph of checked checkbox.
+/// @group checkbox
+$kendo-checkbox-checked-glyph: "\e118" !default;
+/// The glyph of indeterminate checkbox.
+/// @group checkbox
+$kendo-checkbox-indeterminate-glyph: "\e121" !default;
 
-$checkbox-marker-checked-width: 10px !default;
-$checkbox-marker-checked-height: 10px !default;
-$checkbox-marker-indeterminate-width: 10px !default;
-$checkbox-marker-indeterminate-height: 2px !default;
+$kendo-checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/></svg>") ) !default;
+/// The image of indeterminate checkbox.
+/// @group checkbox
+$kendo-checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-width='3' d='M4 10h12'/></svg>") ) !default;
 
 
 // Checkbox label
-$checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
+
+/// The horizontal margin of the checkbox inside a label.
+/// @group checkbox
+$kendo-checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
 
 
 // Checkbox list
-$checkbox-list-margin: 0px !default;
-$checkbox-list-padding: 0px !default;
-$checkbox-list-item-padding-x: 0px !default;
-$checkbox-list-item-padding-y: $list-item-padding-y !default;
-$checkbox-list-horizontal-item-margin-x: 32px !default;
+
+/// The list margin checkbox.
+/// @group checkbox
+$kendo-checkbox-list-margin: 0px !default;
+/// The list padding checkbox.
+/// @group checkbox
+$kendo-checkbox-list-padding: 0px !default;
+/// The horizontal list item padding of checkbox.
+/// @group checkbox
+$kendo-checkbox-list-item-padding-x: 0px !default;
+/// The vertical list item padding of checkbox.
+/// @group checkbox
+$kendo-checkbox-list-item-padding-y: $list-item-padding-y !default;
+/// The horizontal margin of list item of checkbox.
+/// @group checkbox
+$kendo-checkbox-list-horizontal-item-margin-x: 32px !default;
 
 
 // Checkbox ripple
-$checkbox-ripple-size: $checkbox-size * 3 !default;
-$checkbox-ripple-margin: calc(-1 * (#{$checkbox-size} + #{$checkbox-border-width})) !default;
-$checkbox-ripple-opacity: .38 !default;
+
+/// The ripple size of checkbox.
+/// @group checkbox
+$kendo-checkbox-ripple-size: (
+    sm: (map-get( $kendo-checkbox-sizes, "sm" ) * 3),
+    md: (map-get( $kendo-checkbox-sizes, "md" ) * 3),
+    lg: (map-get( $kendo-checkbox-sizes, "lg" ) * 3)
+) !default;
+/// The ripple margin of checkbox.
+/// @group checkbox
+$kendo-checkbox-ripple-margin: (
+    sm: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "sm" )} + #{$kendo-checkbox-border-width})),
+    md: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "md" )} + #{$kendo-checkbox-border-width})),
+    lg: calc(-1 * (#{map-get( $kendo-checkbox-sizes, "lg" )} + #{$kendo-checkbox-border-width}))
+) !default;
+/// The ripple opacity of checkbox.
+/// @group checkbox
+$kendo-checkbox-ripple-opacity: .38 !default;

package/scss/chip/_layout.scss

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

package/scss/color-preview/_layout.scss

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