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

package/scss/tabstrip/_index.scss

@@ -1,46 +1,25 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "tabstrip",
-    dependencies: (
-        "button",
-        "icon",
-        "list",
-        "menu-button"
-    )
-);
-
-
 // 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-tabstrip--styles() {
-    @include module-render( "tabstrip" ) {
+    @include import-once( "tabstrip" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-icon--styles();
+        @include kendo-list--styles();
         @include kendo-tabstrip--layout();
         @include kendo-tabstrip--theme();
         @include kendo-utils--layout--overflow();
         @include kendo-utils--layout--position();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-tabstrip--styles();
-}

package/scss/tabstrip/_layout.scss

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

package/scss/tabstrip/_theme.scss

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

package/scss/tabstrip/_variables.scss

@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "../list/_variables.scss" as *;
+
 // TabStrip
 
 
@@ -46,10 +49,10 @@ $kendo-tabstrip-border: $kendo-component-border !default;
 
 /// The horizontal padding of the TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-padding-x: $nav-link-padding-x !default;
+$kendo-tabstrip-item-padding-x: k-spacing(4) !default;
 /// The vertical padding of the TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-padding-y: $nav-link-padding-y !default;
+$kendo-tabstrip-item-padding-y: k-spacing(2) !default;
 /// The border width around the TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-border-width: 1px !default;
@@ -81,7 +84,7 @@ $kendo-tabstrip-item-hover-bg: null !default;
 $kendo-tabstrip-item-hover-text: $kendo-link-hover-text !default;
 /// The border color of the hovered TabStrip items.
 /// @group tabstrip
-$kendo-tabstrip-item-hover-border: if($kendo-enable-color-system, k-color( base-subtle ), $gray-200) !default;
+$kendo-tabstrip-item-hover-border: if($kendo-enable-color-system, k-color( base-subtle ), #e9ecef) !default;
 /// The gradient of the hovered TabStrip items.
 /// @group tabstrip
 $kendo-tabstrip-item-hover-gradient: null !default;
@@ -158,3 +161,55 @@ $kendo-tabstrip-content-border: $kendo-component-border !default;
 /// The border color of the focused TabStrip content.
 /// @group tabstrip
 $kendo-tabstrip-content-focus-border: $kendo-component-text !default;
+
+
+@forward "@progress/kendo-theme-default/scss/tabstrip/_variables.scss" with (
+    $kendo-tabstrip-wrapper-padding-x: $kendo-tabstrip-wrapper-padding-x,
+    $kendo-tabstrip-wrapper-padding-y: $kendo-tabstrip-wrapper-padding-y,
+    $kendo-tabstrip-wrapper-border-width: $kendo-tabstrip-wrapper-border-width,
+    $kendo-tabstrip-font-family: $kendo-tabstrip-font-family,
+    $kendo-tabstrip-font-size: $kendo-tabstrip-font-size,
+    $kendo-tabstrip-line-height: $kendo-tabstrip-line-height,
+    $kendo-tabstrip-border-width: $kendo-tabstrip-border-width,
+    $kendo-tabstrip-wrapper-bg: $kendo-tabstrip-wrapper-bg,
+    $kendo-tabstrip-wrapper-text: $kendo-tabstrip-wrapper-text,
+    $kendo-tabstrip-wrapper-border: $kendo-tabstrip-wrapper-border,
+    $kendo-tabstrip-bg: $kendo-tabstrip-bg,
+    $kendo-tabstrip-text: $kendo-tabstrip-text,
+    $kendo-tabstrip-border: $kendo-tabstrip-border,
+    $kendo-tabstrip-item-padding-x: $kendo-tabstrip-item-padding-x,
+    $kendo-tabstrip-item-padding-y: $kendo-tabstrip-item-padding-y,
+    $kendo-tabstrip-item-border-width: $kendo-tabstrip-item-border-width,
+    $kendo-tabstrip-item-border-radius: $kendo-tabstrip-item-border-radius,
+    $kendo-tabstrip-item-gap: $kendo-tabstrip-item-gap,
+    $kendo-tabstrip-item-bg: $kendo-tabstrip-item-bg,
+    $kendo-tabstrip-item-text: $kendo-tabstrip-item-text,
+    $kendo-tabstrip-item-border: $kendo-tabstrip-item-border,
+    $kendo-tabstrip-item-gradient: $kendo-tabstrip-item-gradient,
+    $kendo-tabstrip-item-hover-bg: $kendo-tabstrip-item-hover-bg,
+    $kendo-tabstrip-item-hover-text: $kendo-tabstrip-item-hover-text,
+    $kendo-tabstrip-item-hover-border: $kendo-tabstrip-item-hover-border,
+    $kendo-tabstrip-item-hover-gradient: $kendo-tabstrip-item-hover-gradient,
+    $kendo-tabstrip-item-selected-bg: $kendo-tabstrip-item-selected-bg,
+    $kendo-tabstrip-item-selected-text: $kendo-tabstrip-item-selected-text,
+    $kendo-tabstrip-item-selected-border: $kendo-tabstrip-item-selected-border,
+    $kendo-tabstrip-item-selected-gradient: $kendo-tabstrip-item-selected-gradient,
+    $kendo-tabstrip-item-selected-font-weight: $kendo-tabstrip-item-selected-font-weight,
+    $kendo-tabstrip-item-focus-shadow: $kendo-tabstrip-item-focus-shadow,
+    $kendo-tabstrip-item-dragging-shadow: $kendo-tabstrip-item-dragging-shadow,
+    $kendo-tabstrip-item-disabled-bg: $kendo-tabstrip-item-disabled-bg,
+    $kendo-tabstrip-item-disabled-text: $kendo-tabstrip-item-disabled-text,
+    $kendo-tabstrip-item-disabled-border: $kendo-tabstrip-item-disabled-border,
+    $kendo-tabstrip-item-disabled-gradient: $kendo-tabstrip-item-disabled-gradient,
+    $kendo-tabstrip-item-disabled-opacity: $kendo-tabstrip-item-disabled-opacity,
+    $kendo-tabstrip-item-disabled-filter: $kendo-tabstrip-item-disabled-filter,
+    $kendo-tabstrip-indicator-size: $kendo-tabstrip-indicator-size,
+    $kendo-tabstrip-indicator-color: $kendo-tabstrip-indicator-color,
+    $kendo-tabstrip-content-padding-x: $kendo-tabstrip-content-padding-x,
+    $kendo-tabstrip-content-padding-y: $kendo-tabstrip-content-padding-y,
+    $kendo-tabstrip-content-border-width: $kendo-tabstrip-content-border-width,
+    $kendo-tabstrip-content-bg: $kendo-tabstrip-content-bg,
+    $kendo-tabstrip-content-text: $kendo-tabstrip-content-text,
+    $kendo-tabstrip-content-border: $kendo-tabstrip-content-border,
+    $kendo-tabstrip-content-focus-border: $kendo-tabstrip-content-focus-border
+);

package/scss/taskboard/_index.scss

@@ -1,60 +1,32 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "task-board",
-    dependencies: (
-        "action-buttons",
-        "badge",
-        "button",
-        "card",
-        "dialog",
-        "form",
-        "icon",
-        "input",
-        "menu",
-        "menu-button",
-        "searchbox",
-        "textbox",
-        "toolbar",
-        "window"
-    )
-);
-
-
 // Dependencies
-// @import "../utils/_index.scss";
-@import "../icons/_index.scss";
-@import "../forms/_index.scss";
-@import "../input/_index.scss";
-@import "../textbox/_index.scss";
-@import "../searchbox/_index.scss";
-@import "../toolbar/_index.scss";
-@import "../card/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../forms/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../textbox/_index.scss" as *;
+@use "../searchbox/_index.scss" as *;
+@use "../toolbar/_index.scss" as *;
+@use "../card/_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-task-board--styles() {
-    @include module-render( "task-board" ) {
+    @include import-once( "task-board" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-form--styles();
+        @include kendo-input--styles();
+        @include kendo-textbox--styles();
+        @include kendo-searchbox--styles();
+        @include kendo-toolbar--styles();
+        @include kendo-card--styles();
         @include kendo-task-board--layout();
         @include kendo-task-board--theme();
         @include kendo-utils--typography--text-overflow();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-task-board--styles();
-}

package/scss/taskboard/_layout.scss

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

package/scss/taskboard/_theme.scss

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

package/scss/taskboard/_variables.scss

@@ -1,3 +1,7 @@
+@use "../core/_index.scss" as *;
+@use "../card/_variables.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+
 // TaskBoard
 
 /// The spacing index of the TaskBoard.
@@ -78,7 +82,7 @@ $kendo-taskboard-column-border-width: 1px !default;
 $kendo-taskboard-column-border-radius: k-border-radius(sm) !default;
 /// The background color of the TaskBoard column.
 /// @group taskboard
-$kendo-taskboard-column-bg: if($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $gray-900, $gray-100 )) !default;
+$kendo-taskboard-column-bg: if($kendo-enable-color-system, k-color( surface ), if( $kendo-is-dark-theme, $kendo-color-dark, $kendo-color-light )) !default;
 /// The text color of the TaskBoard column.
 /// @group taskboard
 $kendo-taskboard-column-text: null !default;
@@ -243,3 +247,82 @@ $kendo-taskboard-drag-placeholder-bg: if($kendo-enable-color-system, color-mix(i
 /// The border color of the TaskBoard Card placeholder.
 /// @group taskboard
 $kendo-taskboard-drag-placeholder-border: $kendo-component-border !default;
+
+
+@forward "@progress/kendo-theme-default/scss/taskboard/_variables.scss" with (
+    $kendo-taskboard-spacer: $kendo-taskboard-spacer,
+    $kendo-taskboard-padding-y: $kendo-taskboard-padding-y,
+    $kendo-taskboard-padding-x: $kendo-taskboard-padding-x,
+    $kendo-taskboard-font-family: $kendo-taskboard-font-family,
+    $kendo-taskboard-font-size: $kendo-taskboard-font-size,
+    $kendo-taskboard-line-height: $kendo-taskboard-line-height,
+    $kendo-taskboard-bg: $kendo-taskboard-bg,
+    $kendo-taskboard-text: $kendo-taskboard-text,
+    $kendo-taskboard-border: $kendo-taskboard-border,
+    $kendo-taskboard-toolbar-padding-y: $kendo-taskboard-toolbar-padding-y,
+    $kendo-taskboard-toolbar-padding-x: $kendo-taskboard-toolbar-padding-x,
+    $kendo-taskboard-toolbar-bg: $kendo-taskboard-toolbar-bg,
+    $kendo-taskboard-toolbar-text: $kendo-taskboard-toolbar-text,
+    $kendo-taskboard-toolbar-border: $kendo-taskboard-toolbar-border,
+    $kendo-taskboard-toolbar-gradient: $kendo-taskboard-toolbar-gradient,
+    $kendo-taskboard-content-padding-y: $kendo-taskboard-content-padding-y,
+    $kendo-taskboard-content-padding-x: $kendo-taskboard-content-padding-x,
+    $kendo-taskboard-column-container-spacing-y: $kendo-taskboard-column-container-spacing-y,
+    $kendo-taskboard-column-container-padding-y: $kendo-taskboard-column-container-padding-y,
+    $kendo-taskboard-column-container-padding-x: $kendo-taskboard-column-container-padding-x,
+    $kendo-taskboard-columns-container-gap: $kendo-taskboard-columns-container-gap,
+    $kendo-taskboard-column-width: $kendo-taskboard-column-width,
+    $kendo-taskboard-column-border-width: $kendo-taskboard-column-border-width,
+    $kendo-taskboard-column-border-radius: $kendo-taskboard-column-border-radius,
+    $kendo-taskboard-column-bg: $kendo-taskboard-column-bg,
+    $kendo-taskboard-column-text: $kendo-taskboard-column-text,
+    $kendo-taskboard-column-border: $kendo-taskboard-column-border,
+    $kendo-taskboard-column-focus-bg: $kendo-taskboard-column-focus-bg,
+    $kendo-taskboard-column-focus-text: $kendo-taskboard-column-focus-text,
+    $kendo-taskboard-column-focus-border: $kendo-taskboard-column-focus-border,
+    $kendo-taskboard-column-header-padding-y: $kendo-taskboard-column-header-padding-y,
+    $kendo-taskboard-column-header-padding-x: $kendo-taskboard-column-header-padding-x,
+    $kendo-taskboard-column-header-gap: $kendo-taskboard-column-header-gap,
+    $kendo-taskboard-column-header-actions-gap: $kendo-taskboard-column-header-actions-gap,
+    $kendo-taskboard-column-header-font-weight: $kendo-taskboard-column-header-font-weight,
+    $kendo-taskboard-column-header-text: $kendo-taskboard-column-header-text,
+    $kendo-taskboard-column-cards-padding-y: $kendo-taskboard-column-cards-padding-y,
+    $kendo-taskboard-column-cards-padding-x: $kendo-taskboard-column-cards-padding-x,
+    $kendo-taskboard-column-cards-gap: $kendo-taskboard-column-cards-gap,
+    $kendo-taskboard-pane-width: $kendo-taskboard-pane-width,
+    $kendo-taskboard-pane-padding-y: $kendo-taskboard-pane-padding-y,
+    $kendo-taskboard-pane-padding-x: $kendo-taskboard-pane-padding-x,
+    $kendo-taskboard-pane-border-width: $kendo-taskboard-pane-border-width,
+    $kendo-taskboard-pane-bg: $kendo-taskboard-pane-bg,
+    $kendo-taskboard-pane-text: $kendo-taskboard-pane-text,
+    $kendo-taskboard-pane-border: $kendo-taskboard-pane-border,
+    $kendo-taskboard-pane-header-padding-y: $kendo-taskboard-pane-header-padding-y,
+    $kendo-taskboard-pane-header-padding-x: $kendo-taskboard-pane-header-padding-x,
+    $kendo-taskboard-pane-header-font-weight: $kendo-taskboard-pane-header-font-weight,
+    $kendo-taskboard-pane-header-text: $kendo-taskboard-pane-header-text,
+    $kendo-taskboard-pane-content-padding-y: $kendo-taskboard-pane-content-padding-y,
+    $kendo-taskboard-pane-content-padding-x: $kendo-taskboard-pane-content-padding-x,
+    $kendo-taskboard-pane-actions-padding-y: $kendo-taskboard-pane-actions-padding-y,
+    $kendo-taskboard-pane-actions-padding-x: $kendo-taskboard-pane-actions-padding-x,
+    $kendo-taskboard-card-padding-y: $kendo-taskboard-card-padding-y,
+    $kendo-taskboard-card-padding-x: $kendo-taskboard-card-padding-x,
+    $kendo-taskboard-card-border-width: $kendo-taskboard-card-border-width,
+    $kendo-taskboard-card-border-radius: $kendo-taskboard-card-border-radius,
+    $kendo-taskboard-card-bg: $kendo-taskboard-card-bg,
+    $kendo-taskboard-card-text: $kendo-taskboard-card-text,
+    $kendo-taskboard-card-border: $kendo-taskboard-card-border,
+    $kendo-taskboard-card-shadow: $kendo-taskboard-card-shadow,
+    $kendo-taskboard-card-category-border-width: $kendo-taskboard-card-category-border-width,
+    $kendo-taskboard-card-hover-border: $kendo-taskboard-card-hover-border,
+    $kendo-taskboard-card-focus-border: $kendo-taskboard-card-focus-border,
+    $kendo-taskboard-card-focus-shadow: $kendo-taskboard-card-focus-shadow,
+    $kendo-taskboard-card-selected-border: $kendo-taskboard-card-selected-border,
+    $kendo-taskboard-card-selected-shadow: $kendo-taskboard-card-selected-shadow,
+    $kendo-taskboard-card-header-text: $kendo-taskboard-card-header-text,
+    $kendo-taskboard-card-header-focus-text: $kendo-taskboard-card-header-focus-text,
+    $kendo-taskboard-card-header-hover-text: $kendo-taskboard-card-header-hover-text,
+    $kendo-taskboard-drag-placeholder-border-width: $kendo-taskboard-drag-placeholder-border-width,
+    $kendo-taskboard-drag-placeholder-border-radius: $kendo-taskboard-drag-placeholder-border-radius,
+    $kendo-taskboard-drag-placeholder-bg: $kendo-taskboard-drag-placeholder-bg,
+    $kendo-taskboard-drag-placeholder-border: $kendo-taskboard-drag-placeholder-border
+);

package/scss/textarea/_index.scss

@@ -1,38 +1,20 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "textarea",
-    dependencies: (
-        "button",
-        "floating-label",
-        "icon",
-        "input"
-    )
-);
-
-
 // Dependencies
-@import "../input/_index.scss";
-@import "../floating-label/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../floating-label/_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-textarea--styles() {
-    @include module-render( "textarea" ) {
+    @include import-once( "textarea" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-floating-label--styles();
         @include kendo-textarea--layout();
         @include kendo-textarea--theme();
         @include kendo-utils--flex-grid--align-items();
@@ -43,7 +25,3 @@ $_kendo-module-meta: (
         @include kendo-utils--interactivity--resize();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-textarea--styles();
-}

package/scss/textarea/_layout.scss

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

package/scss/textarea/_theme.scss

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

package/scss/textbox/_index.scss

@@ -1,42 +1,20 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "textbox",
-    dependencies: (
-        "button",
-        "floating-label",
-        "icon",
-        "input"
-    )
-);
-
-
 // Dependencies
-@import "../input/_index.scss";
-@import "../floating-label/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../input/_index.scss" as *;
+@use "../floating-label/_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-textbox--styles() {
-    @include module-render( "textbox" ) {
+    @include import-once( "textbox" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-floating-label--styles();
         @include kendo-textbox--layout();
         @include kendo-textbox--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-textbox--styles();
-}

package/scss/textbox/_layout.scss

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

package/scss/textbox/_theme.scss

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

package/scss/tilelayout/_index.scss

@@ -1,37 +1,20 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "tile-layout",
-    dependencies: (
-        "button",
-        "card",
-        "icon"
-    )
-);
-
-
 // Dependencies
-@import "../card/_index.scss";
-@import "../icons/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../card/_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-tile-layout--styles() {
-    @include module-render( "tile-layout" ) {
+    @include import-once( "tile-layout" ) {
+        @include core-styles();
+        @include kendo-card--styles();
+        @include kendo-icon--styles();
         @include kendo-tile-layout--layout();
         @include kendo-tile-layout--theme();
         @include kendo-utils--interactivity--resize();
@@ -39,7 +22,3 @@ $_kendo-module-meta: (
         @include kendo-utils--flex-grid--grid-auto-flow();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-tile-layout--styles();
-}

package/scss/tilelayout/_layout.scss

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

package/scss/tilelayout/_theme.scss

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

package/scss/tilelayout/_variables.scss

@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "../card/_variables.scss" as *;
+
 // TileLayout
 
 /// The width of the border around the TileLayout.
@@ -5,7 +8,7 @@
 $kendo-tile-layout-border-width: 0px !default;
 /// The background color of the TileLayout.
 /// @group tile-layout
-$kendo-tile-layout-bg: if($kendo-enable-color-system, k-color( surface ), $gray-100) !default;
+$kendo-tile-layout-bg: if($kendo-enable-color-system, k-color( surface ), $kendo-color-light) !default;
 
 /// The horizontal padding of the TileLayout.
 /// @group tile-layout
@@ -34,3 +37,17 @@ $kendo-tile-layout-hint-border: $kendo-component-border !default;
 /// The background color of the TileLayout hint.
 /// @group tile-layout
 $kendo-tile-layout-hint-bg: rgba( white, .2 ) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/tilelayout/_variables.scss" with (
+    $kendo-tile-layout-border-width: $kendo-tile-layout-border-width,
+    $kendo-tile-layout-bg: $kendo-tile-layout-bg,
+    $kendo-tile-layout-padding-x: $kendo-tile-layout-padding-x,
+    $kendo-tile-layout-padding-y: $kendo-tile-layout-padding-y,
+    $kendo-tile-layout-card-border-width: $kendo-tile-layout-card-border-width,
+    $kendo-tile-layout-card-focus-shadow: $kendo-tile-layout-card-focus-shadow,
+    $kendo-tile-layout-hint-border-width: $kendo-tile-layout-hint-border-width,
+    $kendo-tile-layout-hint-border-radius: $kendo-tile-layout-hint-border-radius,
+    $kendo-tile-layout-hint-border: $kendo-tile-layout-hint-border,
+    $kendo-tile-layout-hint-bg: $kendo-tile-layout-hint-bg
+);

package/scss/time-marker/_index.scss

@@ -1,32 +1,16 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "time-marker",
-    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-time-marker--styles() {
-    @include module-render( "time-marker" ) {
+    @include import-once( "time-marker" ) {
+        @include core-styles();
         @include kendo-time-marker--layout();
         @include kendo-time-marker--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-time-marker--styles();
-}

package/scss/time-marker/_layout.scss

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

package/scss/time-marker/_theme.scss

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