@progress/kendo-theme-classic 9.1.1-dev.1 → 10.0.0-dev.0

package/scss/adaptive/_index.scss

@@ -1,46 +1,26 @@
-@import "../core/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "adaptive",
-    dependencies: (
-        "checkbox",
-        "listgroup",
-        "radio",
-        "switch",
-        "toolbar"
-    )
-);
-
-
 // Dependencies (TODO: extract variables)
-@import "../listgroup/_index.scss";
-@import "../checkbox/_index.scss";
-@import "../radio/_index.scss";
-@import "../switch/_index.scss";
-@import "../toolbar/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../listgroup/_index.scss" as *;
+@use "../checkbox/_index.scss" as *;
+@use "../radio/_index.scss" as *;
+@use "../switch/_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-adaptive--styles() {
-    @include module-render( "adaptive" ) {
+    @include import-once( "adaptive" ) {
+        @include core-styles();
+        @include kendo-listgroup--styles();
+        @include kendo-checkbox--styles();
+        @include kendo-radio--styles();
+        @include kendo-switch--styles();
+        @include kendo-toolbar--styles();
         @include kendo-adaptive--layout();
         @include kendo-adaptive--theme();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-adaptive--styles();
-}

package/scss/adaptive/_layout.scss

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

package/scss/adaptive/_theme.scss

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

package/scss/adaptive/_variables.scss

@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+
 // Adaptive
 $kendo-adaptive-bg: $kendo-component-bg !default;
 $kendo-adaptive-text: $kendo-component-text !default;
@@ -28,3 +31,25 @@ $kendo-adaptive-grid-sort-text: $kendo-color-primary !default;
 $kendo-adaptive-scheduler-current-text: $kendo-color-primary !default;
 $kendo-adaptive-scheduler-base-text: inherit !default;
 $kendo-adaptive-scheduler-subtle-text: $kendo-subtle-text !default;
+
+
+@forward "@progress/kendo-theme-default/scss/adaptive/_variables.scss" with (
+    $kendo-adaptive-bg: $kendo-adaptive-bg,
+    $kendo-adaptive-text: $kendo-adaptive-text,
+    $kendo-adaptive-border: $kendo-adaptive-border,
+    $kendo-adaptive-content-bg: $kendo-adaptive-content-bg,
+    $kendo-adaptive-content-text: $kendo-adaptive-content-text,
+    $kendo-adaptive-menu-bg: $kendo-adaptive-menu-bg,
+    $kendo-adaptive-menu-text: $kendo-adaptive-menu-text,
+    $kendo-adaptive-menu-clear-text: $kendo-adaptive-menu-clear-text,
+    $kendo-adaptive-menu-item-border: $kendo-adaptive-menu-item-border,
+    $kendo-adaptive-menu-title-text: $kendo-adaptive-menu-title-text,
+    $kendo-adaptive-border-width: $kendo-adaptive-border-width,
+    $kendo-adaptive-font-family: $kendo-adaptive-font-family,
+    $kendo-adaptive-font-size: $kendo-adaptive-font-size,
+    $kendo-adaptive-line-height: $kendo-adaptive-line-height,
+    $kendo-adaptive-grid-sort-text: $kendo-adaptive-grid-sort-text,
+    $kendo-adaptive-scheduler-current-text: $kendo-adaptive-scheduler-current-text,
+    $kendo-adaptive-scheduler-base-text: $kendo-adaptive-scheduler-base-text,
+    $kendo-adaptive-scheduler-subtle-text: $kendo-adaptive-scheduler-subtle-text
+);

package/scss/all.scss

@@ -1,7 +1,4 @@
-@import "./index.scss";
+@forward "./index.scss";
+@use "./index.scss" as *;
 
-
-@if not $kendo-auto-bootstrap {
-    @include kendo-theme--config();
-    @include kendo-theme--styles();
-}
+@include kendo-theme--styles();

package/scss/appbar/_index.scss

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

package/scss/appbar/_layout.scss

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

package/scss/appbar/_theme.scss

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

package/scss/appbar/_variables.scss

@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+
 // AppBar
 
 /// The horizontal margin of the AppBar.
@@ -52,3 +55,23 @@ $kendo-appbar-box-shadow: k-elevation(4) !default;
 /// The box shadow of the AppBar with bottom position.
 /// @group appbar
 $kendo-appbar-bottom-box-shadow: k-elevation(4) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/appbar/_variables.scss" with (
+    $kendo-appbar-margin-x: $kendo-appbar-margin-x,
+    $kendo-appbar-margin-y: $kendo-appbar-margin-y,
+    $kendo-appbar-padding-x: $kendo-appbar-padding-x,
+    $kendo-appbar-padding-y: $kendo-appbar-padding-y,
+    $kendo-appbar-border-width: $kendo-appbar-border-width,
+    $kendo-appbar-zindex: $kendo-appbar-zindex,
+    $kendo-appbar-font-family: $kendo-appbar-font-family,
+    $kendo-appbar-font-size: $kendo-appbar-font-size,
+    $kendo-appbar-line-height: $kendo-appbar-line-height,
+    $kendo-appbar-gap: $kendo-appbar-gap,
+    $kendo-appbar-light-bg: $kendo-appbar-light-bg,
+    $kendo-appbar-light-text: $kendo-appbar-light-text,
+    $kendo-appbar-dark-bg: $kendo-appbar-dark-bg,
+    $kendo-appbar-dark-text: $kendo-appbar-dark-text,
+    $kendo-appbar-box-shadow: $kendo-appbar-box-shadow,
+    $kendo-appbar-bottom-box-shadow: $kendo-appbar-bottom-box-shadow
+);

package/scss/autocomplete/_index.scss

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

package/scss/autocomplete/_layout.scss

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

package/scss/autocomplete/_theme.scss

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

package/scss/avatar/_index.scss

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

package/scss/avatar/_layout.scss

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

package/scss/avatar/_theme.scss

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

package/scss/avatar/_variables.scss

@@ -1,3 +1,4 @@
+@use "../core/_index.scss" as *;
 // Avatar
 
 /// The border width of the Avatar.
@@ -25,3 +26,13 @@ $kendo-avatar-sizes: (
 /// The theme colors map of the Avatar.
 /// @group avatar
 $kendo-avatar-theme-colors: $kendo-theme-colors !default;
+
+
+@forward "@progress/kendo-theme-default/scss/avatar/_variables.scss" with (
+    $kendo-avatar-border-width: $kendo-avatar-border-width,
+    $kendo-avatar-font-family: $kendo-avatar-font-family,
+    $kendo-avatar-font-size: $kendo-avatar-font-size,
+    $kendo-avatar-line-height: $kendo-avatar-line-height,
+    $kendo-avatar-sizes: $kendo-avatar-sizes,
+    $kendo-avatar-theme-colors: $kendo-avatar-theme-colors
+);

package/scss/badge/_index.scss

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

package/scss/badge/_layout.scss

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

package/scss/badge/_theme.scss

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

package/scss/badge/_variables.scss

@@ -1,3 +1,5 @@
+@use "../core/_index.scss" as *;
+
 // Badge
 
 /// The width of the border around the Badge.
@@ -99,3 +101,30 @@ $kendo-badge-sizes: (
         min-width: $kendo-badge-lg-min-width
     )
 ) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/badge/_variables.scss" with (
+    $kendo-badge-border-width: $kendo-badge-border-width,
+    $kendo-badge-border-radius: $kendo-badge-border-radius,
+    $kendo-badge-padding-x: $kendo-badge-padding-x,
+    $kendo-badge-sm-padding-x: $kendo-badge-sm-padding-x,
+    $kendo-badge-md-padding-x: $kendo-badge-md-padding-x,
+    $kendo-badge-lg-padding-x: $kendo-badge-lg-padding-x,
+    $kendo-badge-padding-y: $kendo-badge-padding-y,
+    $kendo-badge-sm-padding-y: $kendo-badge-sm-padding-y,
+    $kendo-badge-md-padding-y: $kendo-badge-md-padding-y,
+    $kendo-badge-lg-padding-y: $kendo-badge-lg-padding-y,
+    $kendo-badge-font-size: $kendo-badge-font-size,
+    $kendo-badge-sm-font-size: $kendo-badge-sm-font-size,
+    $kendo-badge-md-font-size: $kendo-badge-md-font-size,
+    $kendo-badge-lg-font-size: $kendo-badge-lg-font-size,
+    $kendo-badge-line-height: $kendo-badge-line-height,
+    $kendo-badge-sm-line-height: $kendo-badge-sm-line-height,
+    $kendo-badge-md-line-height: $kendo-badge-md-line-height,
+    $kendo-badge-lg-line-height: $kendo-badge-lg-line-height,
+    $kendo-badge-min-width: $kendo-badge-min-width,
+    $kendo-badge-sm-min-width: $kendo-badge-sm-min-width,
+    $kendo-badge-md-min-width: $kendo-badge-md-min-width,
+    $kendo-badge-lg-min-width: $kendo-badge-lg-min-width,
+    $kendo-badge-sizes: $kendo-badge-sizes
+);

package/scss/bottom-navigation/_index.scss

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

package/scss/bottom-navigation/_layout.scss

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

package/scss/bottom-navigation/_theme.scss

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

package/scss/bottom-navigation/_variables.scss

@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
+
 // BottomNavigation
 
 /// The horizontal padding of the BottomNavigation.
@@ -39,7 +42,7 @@ $kendo-bottom-nav-item-min-width: 72px !default;
 $kendo-bottom-nav-item-max-width: null !default;
 /// The minimum height of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-min-height: calc( #{$kendo-icon-size * 2.5} + calc( #{$kendo-padding-md-x} * 2 ) - calc( #{$kendo-bottom-nav-padding-x} * 2 ) ) !default;
+$kendo-bottom-nav-item-min-height: calc( #{$kendo-icon-size * 2.5} + calc( #{k-spacing(2)} * 2 ) - calc( #{$kendo-bottom-nav-padding-x} * 2 ) ) !default;
 /// The border radius of the BottomNavigation item.
 /// @group bottom-navigation
 $kendo-bottom-nav-item-border-radius: k-border-radius(md) !default;
@@ -60,3 +63,26 @@ $kendo-bottom-nav-flat-bg: $kendo-component-bg !default;
 /// The border color of the flat BottomNavigation.
 /// @group bottom-navigation
 $kendo-bottom-nav-flat-border: $kendo-component-border !default;
+
+
+@forward "@progress/kendo-theme-default/scss/bottom-navigation/_variables.scss" with (
+    $kendo-bottom-nav-padding-x: $kendo-bottom-nav-padding-x,
+    $kendo-bottom-nav-padding-y: $kendo-bottom-nav-padding-y,
+    $kendo-bottom-nav-gap: $kendo-bottom-nav-gap,
+    $kendo-bottom-nav-border-width: $kendo-bottom-nav-border-width,
+    $kendo-bottom-nav-font-family: $kendo-bottom-nav-font-family,
+    $kendo-bottom-nav-font-size: $kendo-bottom-nav-font-size,
+    $kendo-bottom-nav-line-height: $kendo-bottom-nav-line-height,
+    $kendo-bottom-nav-letter-spacing: $kendo-bottom-nav-letter-spacing,
+    $kendo-bottom-nav-item-padding-x: $kendo-bottom-nav-item-padding-x,
+    $kendo-bottom-nav-item-padding-y: $kendo-bottom-nav-item-padding-y,
+    $kendo-bottom-nav-item-min-width: $kendo-bottom-nav-item-min-width,
+    $kendo-bottom-nav-item-max-width: $kendo-bottom-nav-item-max-width,
+    $kendo-bottom-nav-item-min-height: $kendo-bottom-nav-item-min-height,
+    $kendo-bottom-nav-item-border-radius: $kendo-bottom-nav-item-border-radius,
+    $kendo-bottom-nav-item-gap: $kendo-bottom-nav-item-gap,
+    $kendo-bottom-nav-shadow: $kendo-bottom-nav-shadow,
+    $kendo-bottom-nav-flat-text: $kendo-bottom-nav-flat-text,
+    $kendo-bottom-nav-flat-bg: $kendo-bottom-nav-flat-bg,
+    $kendo-bottom-nav-flat-border: $kendo-bottom-nav-flat-border
+);

package/scss/breadcrumb/_index.scss

@@ -1,43 +1,23 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "breadcrumb",
-    dependencies: (
-        "icon",
-        "input"
-    )
-);
-
-
 // Dependencies
-@import "../input/_index.scss";
-@import "../icons/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../input/_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-breadcrumb--styles() {
-    @include module-render( "breadcrumb" ) {
+    @include import-once( "breadcrumb" ) {
+        @include core-styles();
+        @include kendo-input--styles();
+        @include kendo-icon--styles();
         @include kendo-breadcrumb--layout();
         @include kendo-breadcrumb--theme();
         @include kendo-utils--flex-grid--flex();
         @include kendo-utils--flex-grid--flex-wrap();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-breadcrumb--styles();
-}

package/scss/breadcrumb/_layout.scss

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

package/scss/breadcrumb/_theme.scss

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