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

package/scss/button/_variables.scss

@@ -1,8 +1,13 @@
+@use "sass:map";
+@use "sass:math";
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+
 // Button
 
 /// The width of the border around the Button.
 /// @group button
-$kendo-button-border-width: $btn-border-width !default;
+$kendo-button-border-width: 1px !default;
 
 /// The border radius of the Button.
 /// @group button
@@ -10,29 +15,29 @@ $kendo-button-border-radius: null !default;
 
 /// The horizontal padding of the Button.
 /// @group button
-$kendo-button-padding-x: $btn-padding-x !default;
+$kendo-button-padding-x: k-spacing(3) !default;
 /// The horizontal padding of the small Button.
 /// @group button
-$kendo-button-sm-padding-x: $btn-padding-x-sm !default;
+$kendo-button-sm-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the medium Button.
 /// @group button
-$kendo-button-md-padding-x: $btn-padding-x !default;
+$kendo-button-md-padding-x: k-spacing(3) !default;
 /// The horizontal padding of the large Button.
 /// @group button
-$kendo-button-lg-padding-x: $btn-padding-x-lg !default;
+$kendo-button-lg-padding-x: k-spacing(4) !default;
 
 /// The vertical padding of the Button.
 /// @group button
-$kendo-button-padding-y: $btn-padding-y !default;
+$kendo-button-padding-y: k-spacing(1.5) !default;
 /// The vertical padding of the small Button.
 /// @group button
-$kendo-button-sm-padding-y: $btn-padding-y-sm !default;
+$kendo-button-sm-padding-y: k-spacing(1) !default;
 /// The vertical padding of the medium Button.
 /// @group button
-$kendo-button-md-padding-y: $btn-padding-y !default;
+$kendo-button-md-padding-y: k-spacing(1.5) !default;
 /// The vertical padding of the large Button.
 /// @group button
-$kendo-button-lg-padding-y: $btn-padding-y-lg !default;
+$kendo-button-lg-padding-y: k-spacing(2) !default;
 
 /// The font family of the Button.
 /// @group button
@@ -40,7 +45,7 @@ $kendo-button-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// The font size of the Button.
 /// @group button
-$kendo-button-font-size: $btn-font-size !default;
+$kendo-button-font-size: $kendo-font-size !default;
 /// The font size of the small Button.
 /// @group button
 $kendo-button-sm-font-size: var( --kendo-font-size-sm, inherit ) !default;
@@ -53,10 +58,10 @@ $kendo-button-lg-font-size: var( --kendo-font-size, inherit ) !default;
 
 /// The line height used along with the $kendo-font-size variable.
 /// @group button
-$kendo-button-line-height: $btn-line-height !default;
+$kendo-button-line-height: $kendo-line-height !default;
 /// The line height used along with the $kendo-font-size variable of the small Button.
 /// @group button
-$kendo-button-sm-line-height: k-math-div( 20, 14 ) !default;
+$kendo-button-sm-line-height: math.div( 20, 14 ) !default;
 /// The line height used along with the $kendo-font-size variable of the medium Button.
 /// @group button
 $kendo-button-md-line-height: var( --kendo-line-height, normal ) !default;
@@ -103,7 +108,7 @@ $kendo-button-sizes: (
 
 /// The theme colors map for the Button.
 /// @group button
-$kendo-button-theme-colors: k-map-merge(
+$kendo-button-theme-colors: map.merge(
     $kendo-theme-colors,
     ( "base": if($kendo-enable-color-system, k-color( base ), #e4e7eb) )
 ) !default;
@@ -113,13 +118,13 @@ $kendo-button-theme-colors: k-map-merge(
 $kendo-button-bg: if($kendo-enable-color-system, k-color( base ), #e4e7eb) !default;
 /// The base text color of the Button.
 /// @group button
-$kendo-button-text: if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-button-bg, $gray-900 )) !default;
+$kendo-button-text: if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-button-bg, $kendo-color-dark )) !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;
+$kendo-button-gradient: none !default;
 /// The base shadow of the Button.
 /// @group button
 $kendo-button-shadow: null !default;
@@ -135,7 +140,7 @@ $kendo-button-hover-text: null !default;
 $kendo-button-hover-border: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken( $kendo-button-bg, 10% )) !default;
 /// The base background gradient of the hovered Button.
 /// @group button
-$kendo-button-hover-gradient: null !default;
+$kendo-button-hover-gradient: none !default;
 /// The base shadow of the hovered Button.
 /// @group button
 $kendo-button-hover-shadow: null !default;
@@ -205,7 +210,7 @@ $kendo-button-disabled-gradient: null !default;
 $kendo-button-disabled-shadow: null !default;
 
 // Solid Button
-$kendo-solid-button-gradient: null !default;
+$kendo-solid-button-gradient: none !default;
 $kendo-solid-button-shade-function: "k-color-darken" !default;
 $kendo-solid-button-shade-text-amount: 0 !default;
 $kendo-solid-button-shade-bg-amount: 0 !default;
@@ -255,3 +260,96 @@ $kendo-flat-button-focus-ring-opacity: .12 !default;
 /// The color transition of the Button.
 /// @group button
 $kendo-button-transition: $kendo-transition !default;
+
+
+@forward "@progress/kendo-theme-default/scss/button/_variables.scss" with (
+    $kendo-button-border-width: $kendo-button-border-width,
+    $kendo-button-border-radius: $kendo-button-border-radius,
+    $kendo-button-padding-x: $kendo-button-padding-x,
+    $kendo-button-sm-padding-x: $kendo-button-sm-padding-x,
+    $kendo-button-md-padding-x: $kendo-button-md-padding-x,
+    $kendo-button-lg-padding-x: $kendo-button-lg-padding-x,
+    $kendo-button-padding-y: $kendo-button-padding-y,
+    $kendo-button-sm-padding-y: $kendo-button-sm-padding-y,
+    $kendo-button-md-padding-y: $kendo-button-md-padding-y,
+    $kendo-button-lg-padding-y: $kendo-button-lg-padding-y,
+    $kendo-button-font-family: $kendo-button-font-family,
+    $kendo-button-font-size: $kendo-button-font-size,
+    $kendo-button-sm-font-size: $kendo-button-sm-font-size,
+    $kendo-button-md-font-size: $kendo-button-md-font-size,
+    $kendo-button-lg-font-size: $kendo-button-lg-font-size,
+    $kendo-button-line-height: $kendo-button-line-height,
+    $kendo-button-sm-line-height: $kendo-button-sm-line-height,
+    $kendo-button-md-line-height: $kendo-button-md-line-height,
+    $kendo-button-lg-line-height: $kendo-button-lg-line-height,
+    $kendo-button-calc-size: $kendo-button-calc-size,
+    $kendo-button-sm-calc-size: $kendo-button-sm-calc-size,
+    $kendo-button-md-calc-size: $kendo-button-md-calc-size,
+    $kendo-button-lg-calc-size: $kendo-button-lg-calc-size,
+    $kendo-button-inner-calc-size: $kendo-button-inner-calc-size,
+    $kendo-button-sm-inner-calc-size: $kendo-button-sm-inner-calc-size,
+    $kendo-button-md-inner-calc-size: $kendo-button-md-inner-calc-size,
+    $kendo-button-lg-inner-calc-size: $kendo-button-lg-inner-calc-size,
+    $kendo-button-sizes: $kendo-button-sizes,
+    $kendo-button-theme-colors: $kendo-button-theme-colors,
+    $kendo-button-bg: $kendo-button-bg,
+    $kendo-button-text: $kendo-button-text,
+    $kendo-button-border: $kendo-button-border,
+    $kendo-button-gradient: $kendo-button-gradient,
+    $kendo-button-shadow: $kendo-button-shadow,
+    $kendo-button-hover-bg: $kendo-button-hover-bg,
+    $kendo-button-hover-text: $kendo-button-hover-text,
+    $kendo-button-hover-border: $kendo-button-hover-border,
+    $kendo-button-hover-gradient: $kendo-button-hover-gradient,
+    $kendo-button-hover-shadow: $kendo-button-hover-shadow,
+    $kendo-button-active-bg: $kendo-button-active-bg,
+    $kendo-button-active-text: $kendo-button-active-text,
+    $kendo-button-active-border: $kendo-button-active-border,
+    $kendo-button-active-gradient: $kendo-button-active-gradient,
+    $kendo-button-active-shadow: $kendo-button-active-shadow,
+    $kendo-button-selected-bg: $kendo-button-selected-bg,
+    $kendo-button-selected-text: $kendo-button-selected-text,
+    $kendo-button-selected-border: $kendo-button-selected-border,
+    $kendo-button-selected-gradient: $kendo-button-selected-gradient,
+    $kendo-button-selected-shadow: $kendo-button-selected-shadow,
+    $kendo-button-focus-bg: $kendo-button-focus-bg,
+    $kendo-button-focus-text: $kendo-button-focus-text,
+    $kendo-button-focus-border: $kendo-button-focus-border,
+    $kendo-button-focus-gradient: $kendo-button-focus-gradient,
+    $kendo-button-focus-shadow: $kendo-button-focus-shadow,
+    $kendo-button-disabled-bg: $kendo-button-disabled-bg,
+    $kendo-button-disabled-text: $kendo-button-disabled-text,
+    $kendo-button-disabled-border: $kendo-button-disabled-border,
+    $kendo-button-disabled-gradient: $kendo-button-disabled-gradient,
+    $kendo-button-disabled-shadow: $kendo-button-disabled-shadow,
+    $kendo-solid-button-gradient: $kendo-solid-button-gradient,
+    $kendo-solid-button-shade-function: $kendo-solid-button-shade-function,
+    $kendo-solid-button-shade-text-amount: $kendo-solid-button-shade-text-amount,
+    $kendo-solid-button-shade-bg-amount: $kendo-solid-button-shade-bg-amount,
+    $kendo-solid-button-shade-border-amount: $kendo-solid-button-shade-border-amount,
+    $kendo-solid-button-hover-shade-text-amount: $kendo-solid-button-hover-shade-text-amount,
+    $kendo-solid-button-hover-shade-bg-amount: $kendo-solid-button-hover-shade-bg-amount,
+    $kendo-solid-button-hover-shade-border-amount: $kendo-solid-button-hover-shade-border-amount,
+    $kendo-solid-button-active-shade-text-amount: $kendo-solid-button-active-shade-text-amount,
+    $kendo-solid-button-active-shade-bg-amount: $kendo-solid-button-active-shade-bg-amount,
+    $kendo-solid-button-active-shade-border-amount: $kendo-solid-button-active-shade-border-amount,
+    $kendo-solid-button-shadow: $kendo-solid-button-shadow,
+    $kendo-solid-button-shadow-blur: $kendo-solid-button-shadow-blur,
+    $kendo-solid-button-shadow-spread: $kendo-solid-button-shadow-spread,
+    $kendo-solid-button-shadow-opacity: $kendo-solid-button-shadow-opacity,
+    $kendo-outline-button-shadow: $kendo-outline-button-shadow,
+    $kendo-outline-button-shadow-blur: $kendo-outline-button-shadow-blur,
+    $kendo-outline-button-shadow-spread: $kendo-outline-button-shadow-spread,
+    $kendo-outline-button-shadow-opacity: $kendo-outline-button-shadow-opacity,
+    $kendo-link-button-shadow: $kendo-link-button-shadow,
+    $kendo-link-button-shadow-blur: $kendo-link-button-shadow-blur,
+    $kendo-link-button-shadow-spread: $kendo-link-button-shadow-spread,
+    $kendo-link-button-shadow-opacity: $kendo-link-button-shadow-opacity,
+    $kendo-clear-button-focus-opacity: $kendo-clear-button-focus-opacity,
+    $kendo-flat-button-hover-opacity: $kendo-flat-button-hover-opacity,
+    $kendo-flat-button-focus-opacity: $kendo-flat-button-focus-opacity,
+    $kendo-flat-button-active-opacity: $kendo-flat-button-active-opacity,
+    $kendo-flat-button-selected-opacity: $kendo-flat-button-selected-opacity,
+    $kendo-flat-button-focus-ring-opacity: $kendo-flat-button-focus-ring-opacity,
+    $kendo-button-transition: $kendo-button-transition
+);

package/scss/calendar/_index.scss

@@ -1,38 +1,22 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "calendar",
-    dependencies: (
-        "button",
-        "icon",
-        "list"
-    )
-);
-
-
 // Dependencies
-@import "../button/_index.scss";
-@import "../icons/_index.scss";
-@import "../list/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../list/_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-calendar--styles() {
-    @include module-render( "calendar" ) {
+    @include import-once( "calendar" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-icon--styles();
+        @include kendo-list--styles();
         @include kendo-calendar--layout();
         @include kendo-calendar--theme();
         @include kendo-utils--flex-grid--align-items();
@@ -40,7 +24,3 @@ $_kendo-module-meta: (
         @include kendo-utils--interactivity--pointer-events();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-calendar--styles();
-}

package/scss/calendar/_layout.scss

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

package/scss/calendar/_theme.scss

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

package/scss/calendar/_variables.scss

@@ -1,3 +1,7 @@
+@use "../core/_index.scss" as *;
+@use "../button/_variables.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+
 // Calendar
 
 /// The width of the border around the Calendar.
@@ -16,7 +20,6 @@ $kendo-calendar-line-height: var( --kendo-line-height, normal ) !default;
 /// The size of the cells in the Calendar.
 /// @group calendar
 $kendo-calendar-cell-size: 38px !default;
-
 /// The background color of the Calendar.
 /// @group calendar
 $kendo-calendar-bg: $kendo-component-bg !default;
@@ -102,7 +105,7 @@ $kendo-calendar-header-cell-line-height: var( --kendo-line-height-lg, normal ) !
 $kendo-calendar-header-cell-bg: null !default;
 /// The text color of the header cells in the Calendar.
 /// @group calendar
-$kendo-calendar-header-cell-text: $kendo-subtle-text !default;
+$kendo-calendar-header-cell-text: if($kendo-enable-color-system, k-color( subtle ) , $kendo-subtle-text) !default;
 /// The opacity of the header cells in the Calendar.
 /// @group calendar
 $kendo-calendar-header-cell-opacity: null !default;
@@ -128,8 +131,7 @@ $kendo-calendar-caption-font-weight: bold !default;
 
 /// The font size of the week number cells in the Calendar.
 /// @group calendar
-$kendo-calendar-week-number-font-size: $kendo-font-size-sm !default;
-
+$kendo-calendar-week-number-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The width of the Calendar view.
 /// @group calendar
 $kendo-calendar-view-width: ($kendo-calendar-cell-size * 8) !default;
@@ -350,3 +352,103 @@ $kendo-calendar-sizes: (
         cell-padding-y: $kendo-calendar-lg-cell-padding-x
     )
 ) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/calendar/_variables.scss" with (
+    $kendo-calendar-border-width: $kendo-calendar-border-width,
+    $kendo-calendar-font-family: $kendo-calendar-font-family,
+    $kendo-calendar-font-size: $kendo-calendar-font-size,
+    $kendo-calendar-line-height: $kendo-calendar-line-height,
+    $kendo-calendar-cell-size: $kendo-calendar-cell-size,
+    $kendo-calendar-bg: $kendo-calendar-bg,
+    $kendo-calendar-text: $kendo-calendar-text,
+    $kendo-calendar-border: $kendo-calendar-border,
+    $kendo-calendar-header-padding-x: $kendo-calendar-header-padding-x,
+    $kendo-calendar-header-padding-y: $kendo-calendar-header-padding-y,
+    $kendo-calendar-header-border-width: $kendo-calendar-header-border-width,
+    $kendo-calendar-header-bg: $kendo-calendar-header-bg,
+    $kendo-calendar-header-text: $kendo-calendar-header-text,
+    $kendo-calendar-header-border: $kendo-calendar-header-border,
+    $kendo-calendar-header-gradient: $kendo-calendar-header-gradient,
+    $kendo-calendar-header-shadow: $kendo-calendar-header-shadow,
+    $kendo-calendar-nav-gap: $kendo-calendar-nav-gap,
+    $kendo-calendar-footer-padding-x: $kendo-calendar-footer-padding-x,
+    $kendo-calendar-footer-padding-y: $kendo-calendar-footer-padding-y,
+    $kendo-calendar-cell-padding-x: $kendo-calendar-cell-padding-x,
+    $kendo-calendar-cell-padding-y: $kendo-calendar-cell-padding-y,
+    $kendo-calendar-cell-line-height: $kendo-calendar-cell-line-height,
+    $kendo-calendar-cell-border-radius: $kendo-calendar-cell-border-radius,
+    $kendo-calendar-header-cell-padding-x: $kendo-calendar-header-cell-padding-x,
+    $kendo-calendar-header-cell-padding-y: $kendo-calendar-header-cell-padding-y,
+    $kendo-calendar-header-cell-width: $kendo-calendar-header-cell-width,
+    $kendo-calendar-header-cell-height: $kendo-calendar-header-cell-height,
+    $kendo-calendar-header-cell-font-size: $kendo-calendar-header-cell-font-size,
+    $kendo-calendar-header-cell-line-height: $kendo-calendar-header-cell-line-height,
+    $kendo-calendar-header-cell-bg: $kendo-calendar-header-cell-bg,
+    $kendo-calendar-header-cell-text: $kendo-calendar-header-cell-text,
+    $kendo-calendar-header-cell-opacity: $kendo-calendar-header-cell-opacity,
+    $kendo-calendar-caption-padding-x: $kendo-calendar-caption-padding-x,
+    $kendo-calendar-caption-padding-y: $kendo-calendar-caption-padding-y,
+    $kendo-calendar-caption-height: $kendo-calendar-caption-height,
+    $kendo-calendar-caption-font-size: $kendo-calendar-caption-font-size,
+    $kendo-calendar-caption-line-height: $kendo-calendar-caption-line-height,
+    $kendo-calendar-caption-font-weight: $kendo-calendar-caption-font-weight,
+    $kendo-calendar-week-number-font-size: $kendo-calendar-week-number-font-size,
+    $kendo-calendar-view-width: $kendo-calendar-view-width,
+    $kendo-calendar-view-height: $kendo-calendar-view-height,
+    $kendo-calendar-view-gap: $kendo-calendar-view-gap,
+    $kendo-calendar-weekend-bg: $kendo-calendar-weekend-bg,
+    $kendo-calendar-weekend-text: $kendo-calendar-weekend-text,
+    $kendo-calendar-today-style: $kendo-calendar-today-style,
+    $kendo-calendar-today-color: $kendo-calendar-today-color,
+    $kendo-calendar-week-number-bg: $kendo-calendar-week-number-bg,
+    $kendo-calendar-week-number-text: $kendo-calendar-week-number-text,
+    $kendo-calendar-other-month-bg: $kendo-calendar-other-month-bg,
+    $kendo-calendar-other-month-text: $kendo-calendar-other-month-text,
+    $kendo-calendar-cell-bg: $kendo-calendar-cell-bg,
+    $kendo-calendar-cell-text: $kendo-calendar-cell-text,
+    $kendo-calendar-cell-border: $kendo-calendar-cell-border,
+    $kendo-calendar-cell-gradient: $kendo-calendar-cell-gradient,
+    $kendo-calendar-cell-hover-bg: $kendo-calendar-cell-hover-bg,
+    $kendo-calendar-cell-hover-text: $kendo-calendar-cell-hover-text,
+    $kendo-calendar-cell-hover-border: $kendo-calendar-cell-hover-border,
+    $kendo-calendar-cell-hover-gradient: $kendo-calendar-cell-hover-gradient,
+    $kendo-calendar-cell-selected-bg: $kendo-calendar-cell-selected-bg,
+    $kendo-calendar-cell-selected-text: $kendo-calendar-cell-selected-text,
+    $kendo-calendar-cell-selected-border: $kendo-calendar-cell-selected-border,
+    $kendo-calendar-cell-selected-gradient: $kendo-calendar-cell-selected-gradient,
+    $kendo-calendar-cell-selected-hover-bg: $kendo-calendar-cell-selected-hover-bg,
+    $kendo-calendar-cell-selected-hover-text: $kendo-calendar-cell-selected-hover-text,
+    $kendo-calendar-cell-selected-hover-border: $kendo-calendar-cell-selected-hover-border,
+    $kendo-calendar-cell-selected-hover-gradient: $kendo-calendar-cell-selected-hover-gradient,
+    $kendo-calendar-cell-focus-shadow: $kendo-calendar-cell-focus-shadow,
+    $kendo-calendar-cell-selected-focus-shadow: $kendo-calendar-cell-selected-focus-shadow,
+    $kendo-calendar-navigation-width: $kendo-calendar-navigation-width,
+    $kendo-calendar-navigation-item-height: $kendo-calendar-navigation-item-height,
+    $kendo-calendar-navigation-bg: $kendo-calendar-navigation-bg,
+    $kendo-calendar-navigation-text: $kendo-calendar-navigation-text,
+    $kendo-calendar-navigation-border: $kendo-calendar-navigation-border,
+    $kendo-calendar-navigation-hover-text: $kendo-calendar-navigation-hover-text,
+    $kendo-infinite-calendar-header-padding-x: $kendo-infinite-calendar-header-padding-x,
+    $kendo-infinite-calendar-header-padding-y: $kendo-infinite-calendar-header-padding-y,
+    $kendo-infinite-calendar-view-padding-x: $kendo-infinite-calendar-view-padding-x,
+    $kendo-infinite-calendar-view-padding-y: $kendo-infinite-calendar-view-padding-y,
+    $kendo-infinite-calendar-view-height: $kendo-infinite-calendar-view-height,
+    $kendo-calendar-range-cell-border-radius: $kendo-calendar-range-cell-border-radius,
+    $kendo-calendar-sm-font-size: $kendo-calendar-sm-font-size,
+    $kendo-calendar-sm-line-height: $kendo-calendar-sm-line-height,
+    $kendo-calendar-sm-cell-size: $kendo-calendar-sm-cell-size,
+    $kendo-calendar-sm-cell-padding-x: $kendo-calendar-sm-cell-padding-x,
+    $kendo-calendar-sm-cell-padding-y: $kendo-calendar-sm-cell-padding-y,
+    $kendo-calendar-md-font-size: $kendo-calendar-md-font-size,
+    $kendo-calendar-md-line-height: $kendo-calendar-md-line-height,
+    $kendo-calendar-md-cell-size: $kendo-calendar-md-cell-size,
+    $kendo-calendar-md-cell-padding-x: $kendo-calendar-md-cell-padding-x,
+    $kendo-calendar-md-cell-padding-y: $kendo-calendar-md-cell-padding-y,
+    $kendo-calendar-lg-font-size: $kendo-calendar-lg-font-size,
+    $kendo-calendar-lg-line-height: $kendo-calendar-lg-line-height,
+    $kendo-calendar-lg-cell-size: $kendo-calendar-lg-cell-size,
+    $kendo-calendar-lg-cell-padding-x: $kendo-calendar-lg-cell-padding-x,
+    $kendo-calendar-lg-cell-padding-y: $kendo-calendar-lg-cell-padding-y,
+    $kendo-calendar-sizes: $kendo-calendar-sizes
+);

package/scss/captcha/_index.scss

@@ -1,49 +1,29 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "captcha",
-    dependencies: (
-        "button",
-        "icon",
-        "input",
-        "slider",
-        "textbox"
-    )
-);
-
-
 // Dependencies
-@import "../icons/_index.scss";
-@import "../input/_index.scss";
-@import "../button/_index.scss";
-@import "../textbox/_index.scss";
-@import "../slider/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../textbox/_index.scss" as *;
+@use "../slider/_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-captcha--styles() {
-    @include module-render( "captcha" ) {
+    @include import-once( "captcha" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-input--styles();
+        @include kendo-button--styles();
+        @include kendo-textbox--styles();
+        @include kendo-slider--styles();
         @include kendo-captcha--layout();
         @include kendo-captcha--theme();
         @include kendo-utils--typography--text-color();
         @include kendo-utils--layout--position();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-captcha--styles();
-}

package/scss/captcha/_layout.scss

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

package/scss/captcha/_theme.scss

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

package/scss/captcha/_variables.scss

@@ -1,3 +1,5 @@
+@use "../core/_index.scss" as *;
+
 // Captcha
 
 /// The spacer of the Captcha.
@@ -45,3 +47,21 @@ $kendo-captcha-validation-message-font-size: var( --kendo-font-size-sm, inherit
 /// The font style of the Captcha validation message.
 /// @group captcha
 $kendo-captcha-validation-message-font-style: italic !default;
+
+
+@forward "@progress/kendo-theme-default/scss/captcha/_variables.scss" with (
+    $kendo-captcha-spacer: $kendo-captcha-spacer,
+    $kendo-captcha-width: $kendo-captcha-width,
+    $kendo-captcha-font-family: $kendo-captcha-font-family,
+    $kendo-captcha-font-size: $kendo-captcha-font-size,
+    $kendo-captcha-line-height: $kendo-captcha-line-height,
+    $kendo-captcha-gap: $kendo-captcha-gap,
+    $kendo-captcha-bg: $kendo-captcha-bg,
+    $kendo-captcha-text: $kendo-captcha-text,
+    $kendo-captcha-border: $kendo-captcha-border,
+    $kendo-captcha-image-wrap-gap: $kendo-captcha-image-wrap-gap,
+    $kendo-captcha-image-controls-gap: $kendo-captcha-image-controls-gap,
+    $kendo-captcha-validation-message-margin-top: $kendo-captcha-validation-message-margin-top,
+    $kendo-captcha-validation-message-font-size: $kendo-captcha-validation-message-font-size,
+    $kendo-captcha-validation-message-font-style: $kendo-captcha-validation-message-font-style
+);

package/scss/card/_index.scss

@@ -1,38 +1,22 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "card",
-    dependencies: (
-        "action-buttons",
-        "button",
-        "typography"
-    )
-);
-
-
 // Dependencies
-@import "../action-buttons/_index.scss";
-@import "../icons/_index.scss";
-@import "../typography/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../action-buttons/_index.scss" as *;
+@use "../typography/_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-card--styles() {
-    @include module-render( "card" ) {
+    @include import-once( "card" ) {
+        @include core-styles();
+        @include kendo-action-buttons--styles();
+        @include kendo-icon--styles();
+        @include kendo-typography--styles();
         @include kendo-card--layout();
         @include kendo-card--theme();
         @include kendo-utils--typography--text-overflow();
@@ -40,7 +24,3 @@ $_kendo-module-meta: (
         @include kendo-utils--layout--display();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-card--styles();
-}

package/scss/card/_layout.scss

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

package/scss/card/_theme.scss

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