@progress/kendo-theme-bootstrap 9.1.1-dev.2 → 10.0.0-dev.0

package/scss/card/_variables.scss

@@ -1,19 +1,22 @@
-@import "../button/_variables.scss";
+// @use "sass:map";
+@use "../core/_index.scss" as *;
+@use "../button/_variables.scss" as *;
+@use "../typography/_variables.scss" as *;
 
 // Card
 
 /// The horizontal padding of the Card.
 /// @group card
-$kendo-card-padding-x: $card-spacer-x !default;
+$kendo-card-padding-x: k-spacing(4) !default;
 /// The vertical padding of the Card.
 /// @group card
-$kendo-card-padding-y: $card-spacer-y !default;
+$kendo-card-padding-y: $kendo-card-padding-x !default;
 /// The width of the border around the Card.
 /// @group card
 $kendo-card-border-width: 1px !default;
 /// The border radius of the Card.
 /// @group card
-$kendo-card-border-radius: $card-border-radius !default;
+$kendo-card-border-radius: k-spacing(1.5) !default;
 /// The inner border radius of the Card.
 /// @group card
 $kendo-card-inner-border-radius: calc( #{$kendo-card-border-radius} - #{$kendo-card-border-width} ) !default;
@@ -52,7 +55,7 @@ $kendo-card-focus-bg: null !default;
 $kendo-card-focus-text: null !default;
 /// The border color of the focused Card.
 /// @group card
-$kendo-card-focus-border: null !default;
+$kendo-card-focus-border: $kendo-card-border !default;
 
 // TODO: double-check: the default theme is not supposed to elevate the Card on focus
 
@@ -113,13 +116,13 @@ $kendo-card-title-margin-bottom: k-spacing(3) !default;
 $kendo-card-title-font-size: var( --kendo-font-size-lg, inherit ) !default;
 /// The font family of the Card title.
 /// @group card
-$kendo-card-title-font-family: $headings-font-family !default;
+$kendo-card-title-font-family: null !default;
 /// The line height of the Card title.
 /// @group card
-$kendo-card-title-line-height: $headings-line-height !default;
+$kendo-card-title-line-height: 1.2 !default;
 /// The font weight of the Card title.
 /// @group card
-$kendo-card-title-font-weight: $headings-font-weight !default;
+$kendo-card-title-font-weight: $kendo-font-weight-medium !default;
 /// The letter spacing of the Card title.
 /// @group card
 $kendo-card-title-letter-spacing: null !default;
@@ -132,19 +135,19 @@ $kendo-card-subtitle-margin-bottom: k-spacing(3) !default;
 $kendo-card-subtitle-font-size: $kendo-h6-font-size !default;
 /// The font family of the Card subtitle.
 /// @group card
-$kendo-card-subtitle-font-family: $headings-font-family !default;
+$kendo-card-subtitle-font-family: null !default;
 /// The line height of the Card subtitle.
 /// @group card
-$kendo-card-subtitle-line-height: $headings-line-height !default;
+$kendo-card-subtitle-line-height: $kendo-card-title-line-height !default;
 /// The font weight of the Card subtitle.
 /// @group card
-$kendo-card-subtitle-font-weight: $headings-font-weight !default;
+$kendo-card-subtitle-font-weight: $kendo-card-title-font-weight !default;
 /// The letter spacing of the Card subtitle.
 /// @group card
 $kendo-card-subtitle-letter-spacing: null !default;
 /// The text color of the Card subtitle.
 /// @group card
-$kendo-card-subtitle-text: $kendo-subtle-text !default;
+$kendo-card-subtitle-text: if($kendo-enable-color-system, k-color( subtle ) , $kendo-subtle-text) !default;
 
 /// The maximum width of the Card image.
 /// @group card
@@ -182,3 +185,62 @@ $kendo-card-callout-width: 1.3em !default;
 /// The height of the Card callout.
 /// @group card
 $kendo-card-callout-height: 1.3em !default;
+
+
+@forward "@progress/kendo-theme-default/scss/card/_variables.scss" with (
+    $kendo-card-padding-x: $kendo-card-padding-x,
+    $kendo-card-padding-y: $kendo-card-padding-y,
+    $kendo-card-border-width: $kendo-card-border-width,
+    $kendo-card-border-radius: $kendo-card-border-radius,
+    $kendo-card-inner-border-radius: $kendo-card-inner-border-radius,
+    $kendo-card-font-family: $kendo-card-font-family,
+    $kendo-card-font-size: $kendo-card-font-size,
+    $kendo-card-line-height: $kendo-card-line-height,
+    $kendo-card-deck-gap: $kendo-card-deck-gap,
+    $kendo-card-bg: $kendo-card-bg,
+    $kendo-card-text: $kendo-card-text,
+    $kendo-card-border: $kendo-card-border,
+    $kendo-card-shadow: $kendo-card-shadow,
+    $kendo-card-focus-bg: $kendo-card-focus-bg,
+    $kendo-card-focus-text: $kendo-card-focus-text,
+    $kendo-card-focus-border: $kendo-card-focus-border,
+    $kendo-card-focus-shadow: $kendo-card-focus-shadow,
+    $kendo-card-header-padding-x: $kendo-card-header-padding-x,
+    $kendo-card-header-padding-y: $kendo-card-header-padding-y,
+    $kendo-card-header-border-width: $kendo-card-header-border-width,
+    $kendo-card-header-bg: $kendo-card-header-bg,
+    $kendo-card-header-text: $kendo-card-header-text,
+    $kendo-card-header-border: $kendo-card-header-border,
+    $kendo-card-body-padding-x: $kendo-card-body-padding-x,
+    $kendo-card-body-padding-y: $kendo-card-body-padding-y,
+    $kendo-card-footer-padding-x: $kendo-card-footer-padding-x,
+    $kendo-card-footer-padding-y: $kendo-card-footer-padding-y,
+    $kendo-card-footer-border-width: $kendo-card-footer-border-width,
+    $kendo-card-footer-bg: $kendo-card-footer-bg,
+    $kendo-card-footer-text: $kendo-card-footer-text,
+    $kendo-card-footer-border: $kendo-card-footer-border,
+    $kendo-card-title-margin-bottom: $kendo-card-title-margin-bottom,
+    $kendo-card-title-font-size: $kendo-card-title-font-size,
+    $kendo-card-title-font-family: $kendo-card-title-font-family,
+    $kendo-card-title-line-height: $kendo-card-title-line-height,
+    $kendo-card-title-font-weight: $kendo-card-title-font-weight,
+    $kendo-card-title-letter-spacing: $kendo-card-title-letter-spacing,
+    $kendo-card-subtitle-margin-bottom: $kendo-card-subtitle-margin-bottom,
+    $kendo-card-subtitle-font-size: $kendo-card-subtitle-font-size,
+    $kendo-card-subtitle-font-family: $kendo-card-subtitle-font-family,
+    $kendo-card-subtitle-line-height: $kendo-card-subtitle-line-height,
+    $kendo-card-subtitle-font-weight: $kendo-card-subtitle-font-weight,
+    $kendo-card-subtitle-letter-spacing: $kendo-card-subtitle-letter-spacing,
+    $kendo-card-subtitle-text: $kendo-card-subtitle-text,
+    $kendo-card-img-max-width: $kendo-card-img-max-width,
+    $kendo-card-avatar-size: $kendo-card-avatar-size,
+    $kendo-card-avatar-spacing: $kendo-card-avatar-spacing,
+    $kendo-card-actions-padding-x: $kendo-card-actions-padding-x,
+    $kendo-card-actions-padding-y: $kendo-card-actions-padding-y,
+    $kendo-card-actions-border-width: $kendo-card-actions-border-width,
+    $kendo-card-actions-gap: $kendo-card-actions-gap,
+    $kendo-card-deck-scroll-button-radius: $kendo-card-deck-scroll-button-radius,
+    $kendo-card-deck-scroll-button-offset: $kendo-card-deck-scroll-button-offset,
+    $kendo-card-callout-width: $kendo-card-callout-width,
+    $kendo-card-callout-height: $kendo-card-callout-height
+);

package/scss/chart-wizard/_index.scss

@@ -1,57 +1,37 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "chart-wizard",
-    dependencies: (
-        "icon",
-        "window",
-        "splitter",
-        "dataviz",
-        "expander",
-        "grid",
-        "tabstrip",
-        "listview",
-        "form",
-        "combobox"
-    )
-);
-
-
 // Dependencies
-@import "../icons/_index.scss";
-@import "../window/_index.scss";
-@import "../splitter/_index.scss";
-@import "../dataviz/_index.scss";
-@import "../expansion-panel/_index.scss";
-@import "../grid/_index.scss";
-@import "../tabstrip/_index.scss";
-@import "../listview/_index.scss";
-@import "../forms/_index.scss";
-@import "../combobox/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../window/_index.scss" as *;
+@use "../splitter/_index.scss" as *;
+@use "../dataviz/_index.scss" as *;
+@use "../expansion-panel/_index.scss" as *;
+@use "../grid/_index.scss" as *;
+@use "../tabstrip/_index.scss" as *;
+@use "../listview/_index.scss" as *;
+@use "../forms/_index.scss" as *;
+@use "../combobox/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-chart-wizard--styles() {
-    @include module-render( "chart-wizard" ) {
+    @include import-once( "chart-wizard" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-window--styles();
+        @include kendo-splitter--styles();
+        @include kendo-dataviz--styles();
+        @include kendo-expander--styles();
+        @include kendo-grid--styles();
+        @include kendo-tabstrip--styles();
+        @include kendo-listview--styles();
+        @include kendo-form--styles();
+        @include kendo-combobox--styles();
         @include kendo-chart-wizard--layout();
         @include kendo-chart-wizard--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-chart-wizard--styles();
-}

package/scss/chart-wizard/_layout.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/chart-wizard/_layout.scss";
+@use "@progress/kendo-theme-default/scss/chart-wizard/_layout.scss" as *;
 
 @mixin kendo-chart-wizard--layout() {
     @include kendo-chart-wizard--layout-base();

package/scss/chart-wizard/_theme.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/chart-wizard/_theme.scss";
+@use "@progress/kendo-theme-default/scss/chart-wizard/_theme.scss" as *;
 
 @mixin kendo-chart-wizard--theme() {
     @include kendo-chart-wizard--theme-base();

package/scss/chart-wizard/_variables.scss

@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+
 // Chart wizard
 
 /// The color of the area around the chart type icon.
@@ -36,3 +39,18 @@ $kendo-chart-wizard-chart-type-spacing: k-spacing(6) !default;
 /// The gap between the icon area and its text.
 /// @group chart-wizard
 $kendo-chart-wizard-icon-text-gap: k-spacing(3) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/chart-wizard/_variables.scss" with (
+    $kendo-chart-wizard-icon-area-color: $kendo-chart-wizard-icon-area-color,
+    $kendo-chart-wizard-icon-area-bg: $kendo-chart-wizard-icon-area-bg,
+    $kendo-chart-wizard-icon-area-border-radius: $kendo-chart-wizard-icon-area-border-radius,
+    $kendo-chart-wizard-icon-area-padding: $kendo-chart-wizard-icon-area-padding,
+    $kendo-chart-wizard-icon-area-focus-shadow: $kendo-chart-wizard-icon-area-focus-shadow,
+    $kendo-chart-wizard-icon-area-selected-shadow: $kendo-chart-wizard-icon-area-selected-shadow,
+    $kendo-chart-wizard-chart-type-selected-color: $kendo-chart-wizard-chart-type-selected-color,
+    $kendo-chart-wizard-preview-pane-padding: $kendo-chart-wizard-preview-pane-padding,
+    $kendo-chart-wizard-property-pane-padding: $kendo-chart-wizard-property-pane-padding,
+    $kendo-chart-wizard-chart-type-spacing: $kendo-chart-wizard-chart-type-spacing,
+    $kendo-chart-wizard-icon-text-gap: $kendo-chart-wizard-icon-text-gap
+);

package/scss/chat/_index.scss

@@ -1,46 +1,24 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "chat",
-    dependencies: (
-        "avatar",
-        "button",
-        "card",
-        "icon",
-        "input",
-        "toolbar"
-    )
-);
-
-
 // Dependencies
-@import "../input/_index.scss";
-@import "../card/_index.scss";
-@import "../icons/_index.scss";
-@import "../toolbar/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../card/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-chat--styles() {
-    @include module-render( "chat" ) {
+    @include import-once( "chat" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-card--styles();
+        @include kendo-icon--styles();
+        @include kendo-toolbar--styles();
         @include kendo-chat--layout();
         @include kendo-chat--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-chat--styles();
-}

package/scss/chat/_layout.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/chat/_layout.scss";
+@use "@progress/kendo-theme-default/scss/chat/_layout.scss" as *;
 
 
 @mixin kendo-chat--layout() {

package/scss/chat/_theme.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/chat/_theme.scss";
+@use "@progress/kendo-theme-default/scss/chat/_theme.scss" as *;
 
 
 @mixin kendo-chat--theme() {

package/scss/chat/_variables.scss

@@ -1,3 +1,8 @@
+@use "../core/_index.scss" as *;
+@use "../button/_variables.scss" as *;
+@use "../toolbar/_variables.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+
 // Chat
 
 /// The horizontal padding of the Chat.
@@ -53,7 +58,7 @@ $kendo-chat-timestamp-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-chat-timestamp-transform: uppercase !default;
 /// The text color of the Chat timestamp.
 /// @group chat
-$kendo-chat-timestamp-text: $kendo-subtle-text !default;
+$kendo-chat-timestamp-text: if($kendo-enable-color-system, k-color( subtle ) , $kendo-subtle-text) !default;
 /// The background color of the Chat timestamp.
 /// @group chat
 $kendo-chat-timestamp-bg: null !default;
@@ -166,7 +171,7 @@ $kendo-chat-bubble-selected-shadow: none !default;
 $kendo-chat-alt-bubble-bg: $kendo-color-primary !default;
 /// The text color of the Chat alt bubble.
 /// @group chat
-$kendo-chat-alt-bubble-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-chat-alt-bubble-bg )) !default;
+$kendo-chat-alt-bubble-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-chat-alt-bubble-bg )) !default;
 /// The border color of the Chat alt bubble.
 /// @group chat
 $kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-bg !default;
@@ -209,3 +214,71 @@ $kendo-chat-quick-reply-shadow-spread: .25rem !default;
 /// The shadow opacity of the focused Chat quick reply.
 /// @group chat
 $kendo-chat-quick-reply-shadow-opacity: .5 !default;
+
+
+@forward "@progress/kendo-theme-default/scss/chat/_variables.scss" with (
+    $kendo-chat-padding-x: $kendo-chat-padding-x,
+    $kendo-chat-padding-y: $kendo-chat-padding-y,
+    $kendo-chat-width: $kendo-chat-width,
+    $kendo-chat-height: $kendo-chat-height,
+    $kendo-chat-border-width: $kendo-chat-border-width,
+    $kendo-chat-font-family: $kendo-chat-font-family,
+    $kendo-chat-font-size: $kendo-chat-font-size,
+    $kendo-chat-line-height: $kendo-chat-line-height,
+    $kendo-chat-item-spacing-x: $kendo-chat-item-spacing-x,
+    $kendo-chat-item-spacing-y: $kendo-chat-item-spacing-y,
+    $kendo-chat-message-list-padding-x: $kendo-chat-message-list-padding-x,
+    $kendo-chat-message-list-padding-y: $kendo-chat-message-list-padding-y,
+    $kendo-chat-message-list-spacing: $kendo-chat-message-list-spacing,
+    $kendo-chat-timestamp-font-size: $kendo-chat-timestamp-font-size,
+    $kendo-chat-timestamp-line-height: $kendo-chat-timestamp-line-height,
+    $kendo-chat-timestamp-transform: $kendo-chat-timestamp-transform,
+    $kendo-chat-timestamp-text: $kendo-chat-timestamp-text,
+    $kendo-chat-timestamp-bg: $kendo-chat-timestamp-bg,
+    $kendo-chat-message-meta-font-size: $kendo-chat-message-meta-font-size,
+    $kendo-chat-message-meta-line-height: $kendo-chat-message-meta-line-height,
+    $kendo-chat-author-font-size: $kendo-chat-author-font-size,
+    $kendo-chat-author-line-height: $kendo-chat-author-line-height,
+    $kendo-chat-bubble-padding-x: $kendo-chat-bubble-padding-x,
+    $kendo-chat-bubble-padding-y: $kendo-chat-bubble-padding-y,
+    $kendo-chat-bubble-spacing: $kendo-chat-bubble-spacing,
+    $kendo-chat-bubble-line-height: $kendo-chat-bubble-line-height,
+    $kendo-chat-bubble-border-radius: $kendo-chat-bubble-border-radius,
+    $kendo-chat-bubble-border-radius-sm: $kendo-chat-bubble-border-radius-sm,
+    $kendo-chat-avatar-size: $kendo-chat-avatar-size,
+    $kendo-chat-avatar-spacing: $kendo-chat-avatar-spacing,
+    $kendo-chat-toolbar-padding-x: $kendo-chat-toolbar-padding-x,
+    $kendo-chat-toolbar-padding-y: $kendo-chat-toolbar-padding-y,
+    $kendo-chat-toolbar-spacing: $kendo-chat-toolbar-spacing,
+    $kendo-chat-toolbar-bg: $kendo-chat-toolbar-bg,
+    $kendo-chat-toolbar-text: $kendo-chat-toolbar-text,
+    $kendo-chat-toolbar-border: $kendo-chat-toolbar-border,
+    $kendo-chat-quick-reply-padding-x: $kendo-chat-quick-reply-padding-x,
+    $kendo-chat-quick-reply-padding-y: $kendo-chat-quick-reply-padding-y,
+    $kendo-chat-quick-reply-spacing: $kendo-chat-quick-reply-spacing,
+    $kendo-chat-quick-reply-line-height: $kendo-chat-quick-reply-line-height,
+    $kendo-chat-bg: $kendo-chat-bg,
+    $kendo-chat-text: $kendo-chat-text,
+    $kendo-chat-border: $kendo-chat-border,
+    $kendo-chat-bubble-bg: $kendo-chat-bubble-bg,
+    $kendo-chat-bubble-text: $kendo-chat-bubble-text,
+    $kendo-chat-bubble-border: $kendo-chat-bubble-border,
+    $kendo-chat-bubble-shadow: $kendo-chat-bubble-shadow,
+    $kendo-chat-bubble-hover-shadow: $kendo-chat-bubble-hover-shadow,
+    $kendo-chat-bubble-selected-shadow: $kendo-chat-bubble-selected-shadow,
+    $kendo-chat-alt-bubble-bg: $kendo-chat-alt-bubble-bg,
+    $kendo-chat-alt-bubble-text: $kendo-chat-alt-bubble-text,
+    $kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-border,
+    $kendo-chat-alt-bubble-shadow: $kendo-chat-alt-bubble-shadow,
+    $kendo-chat-alt-bubble-hover-shadow: $kendo-chat-alt-bubble-hover-shadow,
+    $kendo-chat-alt-bubble-selected-shadow: $kendo-chat-alt-bubble-selected-shadow,
+    $kendo-chat-quick-reply-bg: $kendo-chat-quick-reply-bg,
+    $kendo-chat-quick-reply-text: $kendo-chat-quick-reply-text,
+    $kendo-chat-quick-reply-border: $kendo-chat-quick-reply-border,
+    $kendo-chat-quick-reply-hover-bg: $kendo-chat-quick-reply-hover-bg,
+    $kendo-chat-quick-reply-hover-text: $kendo-chat-quick-reply-hover-text,
+    $kendo-chat-quick-reply-hover-border: $kendo-chat-quick-reply-hover-border,
+    $kendo-chat-quick-reply-shadow-blur: $kendo-chat-quick-reply-shadow-blur,
+    $kendo-chat-quick-reply-shadow-spread: $kendo-chat-quick-reply-shadow-spread,
+    $kendo-chat-quick-reply-shadow-opacity: $kendo-chat-quick-reply-shadow-opacity
+);

package/scss/checkbox/_index.scss

@@ -1,35 +1,16 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "checkbox",
-    dependencies: ()
-);
-
-
 // Dependencies
-
+@use "../core/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-checkbox--styles() {
-    @include module-render( "checkbox" ) {
+    @include import-once( "checkbox" ) {
+        @include core-styles();
         @include kendo-checkbox--layout();
         @include kendo-checkbox--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-checkbox--styles();
-}

package/scss/checkbox/_layout.scss

@@ -1,4 +1,5 @@
-@import "@progress/kendo-theme-default/scss/checkbox/_layout.scss";
+@use "../core/_index.scss" as *;
+@use "@progress/kendo-theme-default/scss/checkbox/_layout.scss" as *;
 
 
 @mixin kendo-checkbox--layout() {

package/scss/checkbox/_theme.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/checkbox/_theme.scss";
+@use "@progress/kendo-theme-default/scss/checkbox/_theme.scss" as *;
 
 
 @mixin kendo-checkbox--theme() {

package/scss/checkbox/_variables.scss

@@ -1,5 +1,6 @@
-@import "../list/_variables.scss";
-
+@use "../core/_index.scss" as *;
+@use "../list/_variables.scss" as *;
+@use "../core/functions/index.import.scss" as *;
 
 // CheckBox
 
@@ -64,7 +65,7 @@ $kendo-checkbox-bg: $kendo-component-bg !default;
 $kendo-checkbox-text: null !default;
 /// The border color of CheckBox.
 /// @group checkbox
-$kendo-checkbox-border: if($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-checkbox-bg ), $gray-400, $gray-600 )) !default;
+$kendo-checkbox-border: if($kendo-enable-color-system, k-color( border-alt ), if( k-is-light( $kendo-checkbox-bg ), #ced4da, #6c757d )) !default;
 
 /// The background color of the hovered CheckBox.
 /// @group checkbox
@@ -81,7 +82,7 @@ $kendo-checkbox-hover-border: null !default;
 $kendo-checkbox-checked-bg: $kendo-color-primary !default;
 /// The color of the checked CheckBox.
 /// @group checkbox
-$kendo-checkbox-checked-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-checked-bg )) !default;
+$kendo-checkbox-checked-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-checkbox-checked-bg )) !default;
 /// The border color of the checked CheckBox.
 /// @group checkbox
 $kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
@@ -192,3 +193,55 @@ $kendo-checkbox-ripple-bg: $kendo-checkbox-checked-bg !default;
 /// The opacity of the CheckBox' ripple.
 /// @group checkbox
 $kendo-checkbox-ripple-opacity: .25 !default;
+
+
+@forward "@progress/kendo-theme-default/scss/checkbox/_variables.scss" with (
+    $kendo-checkbox-border-width: $kendo-checkbox-border-width,
+    $kendo-checkbox-sm-size: $kendo-checkbox-sm-size,
+    $kendo-checkbox-md-size: $kendo-checkbox-md-size,
+    $kendo-checkbox-lg-size: $kendo-checkbox-lg-size,
+    $kendo-checkbox-sm-glyph-size: $kendo-checkbox-sm-glyph-size,
+    $kendo-checkbox-md-glyph-size: $kendo-checkbox-md-glyph-size,
+    $kendo-checkbox-lg-glyph-size: $kendo-checkbox-lg-glyph-size,
+    $kendo-checkbox-sm-ripple-size: $kendo-checkbox-sm-ripple-size,
+    $kendo-checkbox-md-ripple-size: $kendo-checkbox-md-ripple-size,
+    $kendo-checkbox-lg-ripple-size: $kendo-checkbox-lg-ripple-size,
+    $kendo-checkbox-sizes: $kendo-checkbox-sizes,
+    $kendo-checkbox-bg: $kendo-checkbox-bg,
+    $kendo-checkbox-text: $kendo-checkbox-text,
+    $kendo-checkbox-border: $kendo-checkbox-border,
+    $kendo-checkbox-hover-bg: $kendo-checkbox-hover-bg,
+    $kendo-checkbox-hover-text: $kendo-checkbox-hover-text,
+    $kendo-checkbox-hover-border: $kendo-checkbox-hover-border,
+    $kendo-checkbox-checked-bg: $kendo-checkbox-checked-bg,
+    $kendo-checkbox-checked-text: $kendo-checkbox-checked-text,
+    $kendo-checkbox-checked-border: $kendo-checkbox-checked-border,
+    $kendo-checkbox-indeterminate-bg: $kendo-checkbox-indeterminate-bg,
+    $kendo-checkbox-indeterminate-text: $kendo-checkbox-indeterminate-text,
+    $kendo-checkbox-indeterminate-border: $kendo-checkbox-indeterminate-border,
+    $kendo-checkbox-focus-border: $kendo-checkbox-focus-border,
+    $kendo-checkbox-focus-shadow: $kendo-checkbox-focus-shadow,
+    $kendo-checkbox-focus-checked-border: $kendo-checkbox-focus-checked-border,
+    $kendo-checkbox-focus-checked-shadow: $kendo-checkbox-focus-checked-shadow,
+    $kendo-checkbox-disabled-bg: $kendo-checkbox-disabled-bg,
+    $kendo-checkbox-disabled-text: $kendo-checkbox-disabled-text,
+    $kendo-checkbox-disabled-border: $kendo-checkbox-disabled-border,
+    $kendo-checkbox-disabled-checked-bg: $kendo-checkbox-disabled-checked-bg,
+    $kendo-checkbox-disabled-checked-text: $kendo-checkbox-disabled-checked-text,
+    $kendo-checkbox-disabled-checked-border: $kendo-checkbox-disabled-checked-border,
+    $kendo-checkbox-invalid-bg: $kendo-checkbox-invalid-bg,
+    $kendo-checkbox-invalid-text: $kendo-checkbox-invalid-text,
+    $kendo-checkbox-invalid-border: $kendo-checkbox-invalid-border,
+    $kendo-checkbox-indicator-type: $kendo-checkbox-indicator-type,
+    $kendo-checkbox-glyph-font-family: $kendo-checkbox-glyph-font-family,
+    $kendo-checkbox-checked-glyph: $kendo-checkbox-checked-glyph,
+    $kendo-checkbox-indeterminate-glyph: $kendo-checkbox-indeterminate-glyph,
+    $kendo-checkbox-checked-image: $kendo-checkbox-checked-image,
+    $kendo-checkbox-indeterminate-image: $kendo-checkbox-indeterminate-image,
+    $kendo-checkbox-label-margin-x: $kendo-checkbox-label-margin-x,
+    $kendo-checkbox-list-spacing: $kendo-checkbox-list-spacing,
+    $kendo-checkbox-list-item-padding-x: $kendo-checkbox-list-item-padding-x,
+    $kendo-checkbox-list-item-padding-y: $kendo-checkbox-list-item-padding-y,
+    $kendo-checkbox-ripple-bg: $kendo-checkbox-ripple-bg,
+    $kendo-checkbox-ripple-opacity: $kendo-checkbox-ripple-opacity
+);

package/scss/chip/_index.scss

@@ -1,41 +1,20 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "chip",
-    dependencies: (
-        "avatar",
-        "icon"
-    )
-);
-
-
 // Dependencies
-@import "../icons/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
 
 // Component
-@import "./_variables.scss";
-@import "./_layout.scss";
-@import "./_theme.scss";
-
-
-// Register
-@import "../core/module-system/index.import.scss";
-@include module-register( $_kendo-module-meta... );
-
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Expose
 @mixin kendo-chip--styles() {
-    @include module-render( "chip" ) {
+    @include import-once( "chip" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
         @include kendo-chip--layout();
         @include kendo-chip--theme();
         @include kendo-utils--typography--text-overflow();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-chip--styles();
-}

package/scss/chip/_layout.scss

@@ -1,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/chip/_layout.scss";
+@use "@progress/kendo-theme-default/scss/chip/_layout.scss" as *;
 
 
 @mixin kendo-chip--layout() {

package/scss/chip/_theme.scss

@@ -1,4 +1,6 @@
-@import "@progress/kendo-theme-default/scss/chip/_theme.scss";
+@use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
+@use "@progress/kendo-theme-default/scss/chip/_theme.scss" as *;
 
 @mixin kendo-chip--theme() {