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

package/scss/avatar/_index.scss

@@ -1,38 +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,3 +1,5 @@
+@use "./_variables.scss" as *;
+
 @mixin kendo-avatar--layout-base() {
 
     // Avatar

package/scss/avatar/_theme.scss

@@ -1,3 +1,7 @@
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+@use "./_variables.scss" as *;
+
 @mixin kendo-avatar--theme-base() {
 
     // Solid Avatars

package/scss/avatar/_variables.scss

@@ -1,3 +1,4 @@
+@use "../core/_index.scss" as *;
 // Avatar
 
 /// The border width of the Avatar.

package/scss/badge/_index.scss

@@ -1,39 +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,3 +1,7 @@
+@use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
+@use "sass:map";
+
 @mixin kendo-badge--layout-base() {
 
     .k-badge {
@@ -53,11 +57,11 @@
 
     // Badge sizes
     @each $size, $size-props in $kendo-badge-sizes {
-        $_padding-x: k-map-get( $size-props, padding-x );
-        $_padding-y: k-map-get( $size-props, padding-y );
-        $_font-size: k-map-get( $size-props, font-size );
-        $_line-height: k-map-get( $size-props, line-height );
-        $_min-width: k-map-get( $size-props, min-width );
+        $_padding-x: map.get( $size-props, padding-x );
+        $_padding-y: map.get( $size-props, padding-y );
+        $_font-size: map.get( $size-props, font-size );
+        $_line-height: map.get( $size-props, line-height );
+        $_min-width: map.get( $size-props, min-width );
 
         .k-badge-#{$size} {
             padding-block: $_padding-y;

package/scss/badge/_theme.scss

@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+
 @mixin kendo-badge--theme-base() {
 
     // Solid badges

package/scss/badge/_variables.scss

@@ -1,3 +1,5 @@
+@use "../core/_index.scss" as *;
+
 // Badge
 
 /// The width of the border around the Badge.

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,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+
 @mixin kendo-bottom-navigation--layout-base() {
 
     // Bottom Navigation

package/scss/bottom-navigation/_theme.scss

@@ -1,3 +1,7 @@
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+@use "./variables.scss" as *;
+
 @mixin kendo-bottom-navigation--theme-base() {
 
     // Solid

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;

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,3 +1,7 @@
+@use "sass:map";
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+
 @mixin kendo-breadcrumb--layout-base() {
 
     // Breadcrumb
@@ -101,12 +105,12 @@
 
     // Sizes
     @each $size, $size-props in $kendo-breadcrumb-sizes {
-        $_link-padding-x: k-map-get( $size-props, link-padding-x );
-        $_link-padding-y: k-map-get( $size-props, link-padding-y );
-        $_icon-link-padding-x: k-map-get( $size-props, icon-link-padding-x );
-        $_icon-link-padding-y: k-map-get( $size-props, icon-link-padding-y );
-        $_font-size: k-map-get( $size-props, font-size );
-        $_line-height: k-map-get( $size-props, line-height );
+        $_link-padding-x: map.get( $size-props, link-padding-x );
+        $_link-padding-y: map.get( $size-props, link-padding-y );
+        $_icon-link-padding-x: map.get( $size-props, icon-link-padding-x );
+        $_icon-link-padding-y: map.get( $size-props, icon-link-padding-y );
+        $_font-size: map.get( $size-props, font-size );
+        $_line-height: map.get( $size-props, line-height );
 
         .k-breadcrumb-#{$size} {
             font-size: $_font-size;

package/scss/breadcrumb/_theme.scss

@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+
 @mixin kendo-breadcrumb--theme-base() {
 
     // Breadcrumb

package/scss/breadcrumb/_variables.scss

@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
+
 // Breadcrumb
 
 /// The width of the border around the Breadcrumb.

package/scss/button/_index.scss

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

package/scss/button/_layout.scss

@@ -1,3 +1,8 @@
+@use "sass:map";
+@use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
+@use "../icons/_variables.scss" as *;
+
 @mixin kendo-button--layout-base() {
 
     // Button
@@ -71,10 +76,10 @@
 
     // Sizes
     @each $size, $size-props in $kendo-button-sizes {
-        $_padding-x: k-map-get( $size-props, padding-x );
-        $_padding-y: k-map-get( $size-props, padding-y );
-        $_font-size: k-map-get( $size-props, font-size );
-        $_line-height: k-map-get( $size-props, line-height );
+        $_padding-x: map.get( $size-props, padding-x );
+        $_padding-y: map.get( $size-props, padding-y );
+        $_font-size: map.get( $size-props, font-size );
+        $_line-height: map.get( $size-props, line-height );
 
         .k-button-#{$size} {
             padding-block: $_padding-y;

package/scss/button/_theme.scss

@@ -1,3 +1,9 @@
+@use "sass:map";
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+@use "./_variables.scss" as *;
+@use "sass:meta";
+
 @mixin kendo-button--theme-base() {
 
     // Solid button
@@ -64,21 +70,21 @@
         }
     }
 
-    $_shade-fn: k-meta-get-function( $kendo-solid-button-shade-function );
+    $_shade-fn: meta.get-function( $kendo-solid-button-shade-function );
 
     @each $name, $color in $kendo-button-theme-colors {
         @if ($name != "base") {
             $_button-text: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
-            $_button-bg: if($kendo-enable-color-system, k-color( $name ), if( $kendo-solid-button-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-shade-bg-amount ), null ));
-            $_button-border: if($kendo-enable-color-system, k-color( $name ), if( $kendo-solid-button-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-shade-border-amount ), null ));
+            $_button-bg: if($kendo-enable-color-system, k-color( $name ), if( $kendo-solid-button-shade-bg-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-shade-bg-amount ), null ));
+            $_button-border: if($kendo-enable-color-system, k-color( $name ), if( $kendo-solid-button-shade-border-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-shade-border-amount ), null ));
 
             $_button-hover-text: null;
-            $_button-hover-bg: if($kendo-enable-color-system, k-color( #{$name}-hover ), if( $kendo-solid-button-hover-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-hover-shade-bg-amount ), null ));
-            $_button-hover-border: if($kendo-enable-color-system, k-color( #{$name}-hover ), if( $kendo-solid-button-hover-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-hover-shade-border-amount ), null ));
+            $_button-hover-bg: if($kendo-enable-color-system, k-color( #{$name}-hover ), if( $kendo-solid-button-hover-shade-bg-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-hover-shade-bg-amount ), null ));
+            $_button-hover-border: if($kendo-enable-color-system, k-color( #{$name}-hover ), if( $kendo-solid-button-hover-shade-border-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-hover-shade-border-amount ), null ));
 
             $_button-active-text: null;
-            $_button-active-bg: if($kendo-enable-color-system, k-color( #{$name}-active ), if( $kendo-solid-button-active-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-active-shade-bg-amount ), null ));
-            $_button-active-border: if($kendo-enable-color-system, k-color( #{$name}-active ), if( $kendo-solid-button-active-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-active-shade-border-amount ), null ));
+            $_button-active-bg: if($kendo-enable-color-system, k-color( #{$name}-active ), if( $kendo-solid-button-active-shade-bg-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-active-shade-bg-amount ), null ));
+            $_button-active-border: if($kendo-enable-color-system, k-color( #{$name}-active ), if( $kendo-solid-button-active-shade-border-amount, meta.call( $_shade-fn, $color, $kendo-solid-button-active-shade-border-amount ), null ));
 
             .k-button-solid-#{$name} {
                 @include fill(
@@ -142,7 +148,7 @@
 
 
     // Outline button
-    @each $name, $color in k-map-merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) {
+    @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) {
         .k-button-outline-#{$name} {
             @include box-shadow( none );
             border-color: currentColor;
@@ -154,9 +160,9 @@
             &.k-hover {
                 @if $name == "base" {
                     @include fill(
-                        if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $color )),
-                        if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $color )),
-                        if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $color ))
+                        if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $color ) ),
+                        if($kendo-enable-color-system, k-color( on-base ), $color ),
+                        if($kendo-enable-color-system, k-color( on-base ), $color )
                     );
                 } @else {
                     @include fill(
@@ -185,8 +191,8 @@
                 @if $name == "base" {
                     @include fill(
                         if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $color )),
-                        if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $color )),
-                        if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $color ))
+                        if($kendo-enable-color-system, k-color( on-base ), $color ),
+                        if($kendo-enable-color-system, k-color( on-base ), $color )
                     );
                 } @else {
                     @include fill(
@@ -202,8 +208,8 @@
                 @if $name == "base" {
                     @include fill(
                         if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $color )),
-                        if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $color )),
-                        if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $color ))
+                        if($kendo-enable-color-system, k-color( on-base ), $color ),
+                        if($kendo-enable-color-system, k-color( on-base ), $color )
                     );
                 } @else {
                     @include fill(
@@ -224,7 +230,7 @@
 
 
     // Flat button
-    @each $name, $color in k-map-merge( $kendo-button-theme-colors, ( "base": inherit ) ) {
+    @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": inherit ) ) {
         .k-button-flat-#{$name} {
             @if $name == "base" {
                 color: inherit;
@@ -242,7 +248,7 @@
 
 
     // Link button
-    @each $name, $color in k-map-merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) {
+    @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) {
         .k-button-link-#{$name} {
             color: $color;
 
@@ -297,7 +303,7 @@
 
 
     // Clear button
-    @each $name, $color in k-map-merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) {
+    @each $name, $color in map.merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) {
         .k-button-clear-#{$name} {
             color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color);
 
@@ -329,4 +335,4 @@
 
 @mixin kendo-button--theme() {
     @include kendo-button--theme-base();
-}
+}

package/scss/button/_variables.scss

@@ -1,3 +1,7 @@
+@use "sass:map";
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+
 // Button
 
 /// The width of the border around the Button.
@@ -103,7 +107,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 ), #f5f5f5) )
 ) !default;

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,3 +1,8 @@
+@use "sass:map";
+@use "sass:math";
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+
 @mixin kendo-calendar--layout-base() {
 
     // Base
@@ -275,11 +280,11 @@
 
     // Calendar sizes
     @each $size, $size-props in $kendo-calendar-sizes {
-        $_font-size: k-map-get( $size-props, font-size );
-        $_line-height: k-map-get( $size-props, line-height );
-        $_cell-size: k-map-get( $size-props, cell-size );
-        $_cell-padding-x: k-map-get( $size-props, cell-padding-x );
-        $_cell-padding-y: k-map-get( $size-props, cell-padding-y );
+        $_font-size: map.get( $size-props, font-size );
+        $_line-height: map.get( $size-props, line-height );
+        $_cell-size: map.get( $size-props, cell-size );
+        $_cell-padding-x: map.get( $size-props, cell-padding-x );
+        $_cell-padding-y: map.get( $size-props, cell-padding-y );
 
         $_month-cell-size: $_cell-size;
         $_year-cell-size: ( 2 * $_cell-size );
@@ -353,7 +358,7 @@
                 z-index: 1;
                 width: 150%;
                 left: -25%;
-                box-shadow: 0 0 $kendo-calendar-cell-size k-math-div( $kendo-calendar-cell-size, 2 ) $kendo-calendar-bg;
+                box-shadow: 0 0 $kendo-calendar-cell-size math.div( $kendo-calendar-cell-size, 2 ) $kendo-calendar-bg;
             }
         }
 
@@ -393,7 +398,7 @@
             width: 200%;
             left: -50%;
             $shadow-size: 3 * $kendo-calendar-navigation-item-height;
-            box-shadow: 0 0 $shadow-size k-math-div( $shadow-size, 2 ) $kendo-calendar-navigation-bg;
+            box-shadow: 0 0 $shadow-size math.div( $shadow-size, 2 ) $kendo-calendar-navigation-bg;
         }
 
         &::before { top: 0; }

package/scss/calendar/_theme.scss

@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+
 @mixin kendo-calendar--theme-base() {
 
     .k-calendar {