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

package/scss/timeselector/_layout.scss

@@ -1,3 +1,9 @@
+@use "sass:map";
+@use "sass:list";
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+@use "../button/_variables.scss" as *;
+
 @mixin kendo-time-selector--layout-base() {
 
     // Time selector
@@ -77,7 +83,7 @@
         border-style: solid;
         box-sizing: border-box;
         position: absolute;
-        top: calc( 50% + #{k-math-div( $kendo-time-list-title-height, 2 )});
+        top: calc( 50% + #{list.slash( $kendo-time-list-title-height, 2 )});
         left: 0;
         right: 0;
         transform: translateY(-50%);
@@ -116,7 +122,7 @@
                 width: 100%;
                 left: 0;
                 pointer-events: none;
-                height: calc( 50% - #{k-math-div( $kendo-time-list-highlight-height, 2 )} );
+                height: calc( 50% - #{list.slash( $kendo-time-list-highlight-height, 2 )} );
                 box-sizing: border-box;
                 border-width: 0;
                 border-style: solid;
@@ -205,16 +211,16 @@
         align-items: center;
         position: relative;
         z-index: 11;
-        top: calc( #{k-math-div( $kendo-time-list-title-height, 2 )} );
+        top: calc( #{list.slash( $kendo-time-list-title-height, 2 )} );
     }
 
 
     // Time selector sizes
     @each $size, $size-props in $kendo-time-selector-sizes {
-        $_font-size: k-map-get( $size-props, font-size );
-        $_line-height: k-map-get( $size-props, line-height );
-        $_list-item-padding-x: k-map-get( $size-props, list-item-padding-x );
-        $_list-item-padding-y: k-map-get( $size-props, list-item-padding-y );
+        $_font-size: map.get( $size-props, font-size );
+        $_line-height: map.get( $size-props, line-height );
+        $_list-item-padding-x: map.get( $size-props, list-item-padding-x );
+        $_list-item-padding-y: map.get( $size-props, list-item-padding-y );
         $_highlight-height: calc( calc( #{$_font-size} * #{$_line-height} ) + calc( #{ $_list-item-padding-y} * 2 ) );
 
 

package/scss/timeselector/_theme.scss

@@ -1,3 +1,7 @@
+@use "sass:math";
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+
 @mixin kendo-time-selector--theme-base() {
 
     // Time selector
@@ -50,7 +54,7 @@
         &::before,
         &::after {
             $shadow-size: 3em;
-            box-shadow: 0 0 $shadow-size k-math-div( $shadow-size, 2 ) $kendo-time-selector-bg;
+            box-shadow: 0 0 $shadow-size math.div( $shadow-size, 2 ) $kendo-time-selector-bg;
         }
 
         .k-item:hover {

package/scss/timeselector/_variables.scss

@@ -1,3 +1,7 @@
+@use "../core/_index.scss" as *;
+@use "../action-buttons/_variables.scss" as *;
+@use "../list/_variables.scss" as *;
+
 // Time selector
 
 $kendo-time-selector-border-width: 1px !default;
@@ -13,6 +17,8 @@ $kendo-time-selector-header-padding-x: $kendo-actions-padding-x !default;
 $kendo-time-selector-header-padding-y: $kendo-actions-padding-y !default;
 $kendo-time-selector-header-border-width: 0px !default;
 
+$kendo-time-selector-fast-selection-gap: null !default;
+
 $kendo-time-list-width: 4em !default;
 $kendo-time-list-height: 240px !default;
 

package/scss/toolbar/_index.scss

@@ -1,50 +1,27 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "toolbar",
-    dependencies: (
-        "button",
-        "icon",
-        "menu",
-        "menu-button",
-        "popup",
-        "split-button"
-    )
-);
-
-
 // Dependencies
-@import "../button/_index.scss";
-@import "../popup/_index.scss";
-@import "../menu/_index.scss";
-@import "../icons/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../button/_index.scss" as *;
+@use "../popup/_index.scss" as *;
+@use "../menu/_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-toolbar--styles() {
-    @include module-render( "toolbar" ) {
+    @include import-once( "toolbar" ) {
+        @include core-styles();
+        @include kendo-button--styles();
+        @include kendo-popup--styles();
+        @include kendo-menu--styles();
+        @include kendo-icon--styles();
         @include kendo-toolbar--layout();
         @include kendo-toolbar--theme();
         @include kendo-utils--layout--overflow();
         @include kendo-utils--typography--vertical-align();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-toolbar--styles();
-}

package/scss/toolbar/_layout.scss

@@ -1,3 +1,9 @@
+@use "sass:map";
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+@use "../button/_variables.scss" as *;
+@use "../icons/_variables.scss" as *;
+
 @mixin kendo-toolbar--layout-base() {
 
     // Base
@@ -134,9 +140,9 @@
 
     // Toolbar sizes
     @each $size, $size-props in $kendo-toolbar-sizes {
-        $_padding-x: k-map-get( $size-props, padding-x );
-        $_padding-y: k-map-get( $size-props, padding-y );
-        $_spacing: k-map-get( $size-props, spacing );
+        $_padding-x: map.get( $size-props, padding-x );
+        $_padding-y: map.get( $size-props, padding-y );
+        $_spacing: map.get( $size-props, spacing );
 
         .k-toolbar-#{$size} {
             padding-block: $_padding-y;
@@ -198,8 +204,8 @@
 
     // Overflow container
     .k-overflow-container {
-        font-size: $kendo-menu-popup-md-font-size;
-        line-height: $kendo-menu-popup-md-line-height;
+        font-size: $kendo-toolbar-overflow-container-font-size;
+        line-height: $kendo-toolbar-overflow-container-line-height;
 
         > .k-item {
             border-color: inherit;
@@ -216,8 +222,8 @@
 
         // Button
         .k-overflow-button {
-            padding-block: $kendo-menu-popup-md-item-padding-y;
-            padding-inline: $kendo-menu-popup-md-item-padding-x;
+            padding-block: $kendo-toolbar-overflow-button-padding-y;
+            padding-inline: $kendo-toolbar-overflow-button-padding-x;
             width: 100%;
             height: auto;
             border-width: 0;

package/scss/toolbar/_theme.scss

@@ -1,3 +1,7 @@
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+@use "../menu/_variables.scss" as *;
+
 @mixin kendo-toolbar--theme-base() {
 
     // Theme

package/scss/toolbar/_variables.scss

@@ -1,3 +1,7 @@
+@use "../core/_index.scss" as *;
+@use "../button/_variables.scss" as *;
+@use "../menu/_variables.scss" as *;
+
 // Toolbar
 
 /// The horizontal padding of the Toolbar.
@@ -116,6 +120,19 @@ $kendo-toolbar-input-width: 10em !default;
 /// @group toolbar
 $kendo-toolbar-item-shadow: $kendo-button-focus-shadow !default;
 
+/// The font size of the Toolbar overflow container.
+/// @group toolbar
+$kendo-toolbar-overflow-container-font-size: $kendo-menu-popup-md-font-size !default;
+/// The line-height of the Toolbar overflow container.
+/// @group toolbar
+$kendo-toolbar-overflow-container-line-height: $kendo-menu-popup-md-line-height !default;
+/// The vertical padding of the Toolbar overflow button.
+/// @group toolbar
+$kendo-toolbar-overflow-button-padding-y: $kendo-menu-popup-md-item-padding-y !default;
+/// The horizontal padding of the Toolbar overflow button.
+/// @group toolbar
+$kendo-toolbar-overflow-button-padding-x: $kendo-menu-popup-md-item-padding-x !default;
+
 /// The sizes map for the Toolbar.
 /// @group toolbar
 $kendo-toolbar-sizes: (

package/scss/tooltip/_index.scss

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

package/scss/tooltip/_layout.scss

@@ -1,3 +1,7 @@
+@use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
+@use "./_variables.scss" as *;
+
 @mixin kendo-tooltip--layout-base() {
 
     .k-tooltip {

package/scss/tooltip/_theme.scss

@@ -1,3 +1,7 @@
+@use "sass:map";
+@use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
+
 @mixin kendo-tooltip--theme-base() {
     // Default tooltip
     .k-tooltip {
@@ -6,7 +10,7 @@
             $kendo-tooltip-bg,
             $kendo-tooltip-border
         );
-        
+
         @include box-shadow( $kendo-tooltip-shadow );
 
         .k-callout {
@@ -18,13 +22,13 @@
     @each $name, $props in $kendo-tooltip-theme {
         .k-tooltip-#{$name} {
             @include fill(
-                k-map-get( $props, color ),
-                k-map-get( $props, background-color ),
-                k-map-get( $props, border )
+                map.get( $props, color ),
+                map.get( $props, background-color ),
+                map.get( $props, border )
             );
-            
+
             .k-callout {
-                color: k-map-get( $props, background-color );
+                color: map.get( $props, background-color );
             }
         }
     }

package/scss/tooltip/_variables.scss

@@ -1,11 +1,15 @@
+@use "sass:map";
+@use "../core/_index.scss" as *;
+@use "../core/functions/index.import.scss" as *;
+
 // Tooltip
 
 /// The vertical padding of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-padding-y: $kendo-padding-md-y !default;
+$kendo-tooltip-padding-y: k-spacing(1) !default;
 /// The horizontal padding of the Tooltip.
 /// @group tooltip
-$kendo-tooltip-padding-x: $kendo-padding-md-x !default;
+$kendo-tooltip-padding-x: k-spacing(2) !default;
 /// The width of the border around the Tooltip.
 /// @group tooltip
 $kendo-tooltip-border-width: 0px !default;
@@ -52,7 +56,7 @@ $kendo-tooltip-shadow: k-elevation(2) !default;
     $_theme: ();
 
     @each $name, $color in $colors {
-        $_theme: k-map-merge(( $name: (
+        $_theme: map.merge(( $name: (
             color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
             background-color: $color,
             border: $color,

package/scss/treelist/_index.scss

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

package/scss/treelist/_layout.scss

@@ -1,3 +1,6 @@
+@use "../icons/_variables.scss" as *;
+@use "./variables.scss" as *;
+
 @mixin kendo-treelist--layout-base() {
 
     // Base

package/scss/treelist/_theme.scss

@@ -1,3 +1,5 @@
+@use "./variables.scss" as *;
+
 @mixin kendo-treelist--theme-base() {
 
     // Theme

package/scss/treelist/_variables.scss

@@ -1,3 +1,5 @@
+@use "../grid/_variables.scss" as *;
+
 // Treelist
 
 /// The background color of the TreeList footer row.

package/scss/treeview/_index.scss

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

package/scss/treeview/_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-treeview--layout-base() {
 
     // Treeview
@@ -168,12 +173,12 @@
     }
 
     @each $size, $size-props in $kendo-treeview-sizes {
-        $_font-size: k-map-get( $size-props, font-size);
-        $_line-height: k-map-get( $size-props, line-height);
-        $_item-padding-x: k-map-get( $size-props, item-padding-x);
-        $_item-padding-y: k-map-get( $size-props, item-padding-y);
-        $_checkbox-padding-x: k-map-get( $size-props, checkbox-padding-x );
-        $_checkbox-padding-y: k-map-get( $size-props, checkbox-padding-y );
+        $_font-size: map.get( $size-props, font-size);
+        $_line-height: map.get( $size-props, line-height);
+        $_item-padding-x: map.get( $size-props, item-padding-x);
+        $_item-padding-y: map.get( $size-props, item-padding-y);
+        $_checkbox-padding-x: map.get( $size-props, checkbox-padding-x );
+        $_checkbox-padding-y: map.get( $size-props, checkbox-padding-y );
 
         .k-treeview-#{$size} {
             font-size: $_font-size;

package/scss/treeview/_theme.scss

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

package/scss/treeview/_variables.scss

@@ -1,3 +1,5 @@
+@use "../core/_index.scss" as *;
+
 // TreeView
 
 /// The font family of the TreeView.

package/scss/typography/_index.scss

@@ -1,39 +1,19 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "typography",
-    dependencies: ()
-);
-
-
 // Dependencies
-
+@use "../core/_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-typography--styles() {
-    @include module-render( "typography" ) {
+    @include import-once( "typography" ) {
+        @include core-styles();
         @include kendo-typography--layout();
         @include kendo-typography--theme();
         @include kendo-utils--spacing--margin();
         @include kendo-utils--typography();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-typography--styles();
-}

package/scss/typography/_layout.scss

@@ -1,3 +1,8 @@
+@use "sass:map";
+@use "../core/_index.scss" as *;
+@use "../_variables.scss" as *;
+@use "./_variables.scss" as *;
+
 @mixin kendo-typography--layout-base() {
 
     @if $kendo-enable-typography {
@@ -32,12 +37,12 @@
 
     // Headings
     @each $heading, $heading-props in $kendo-headings {
-        $_font-size: k-map-get( $heading-props, font-size );
-        $_font-family: k-map-get( $heading-props, font-family );
-        $_line-height: k-map-get( $heading-props, line-height );
-        $_font-weight: k-map-get( $heading-props, font-weight );
-        $_letter-spacing: k-map-get( $heading-props, letter-spacing );
-        $_margin: k-map-get( $heading-props, margin );
+        $_font-size: map.get( $heading-props, font-size );
+        $_font-family: map.get( $heading-props, font-family );
+        $_line-height: map.get( $heading-props, line-height );
+        $_font-weight: map.get( $heading-props, font-weight );
+        $_letter-spacing: map.get( $heading-props, letter-spacing );
+        $_margin: map.get( $heading-props, margin );
 
         .k-#{$heading} {
             @include typography(
@@ -99,12 +104,12 @@
 
     // Display
     @each $display, $kendo-display-props in $kendo-display {
-        $_font-size: k-map-get( $kendo-display-props, font-size );
-        $_font-family: k-map-get( $kendo-display-props, font-family );
-        $_line-height: k-map-get( $kendo-display-props, line-height );
-        $_font-weight: k-map-get( $kendo-display-props, font-weight );
-        $_letter-spacing: k-map-get( $kendo-display-props, letter-spacing );
-        $_margin: k-map-get( $kendo-display-props, margin );
+        $_font-size: map.get( $kendo-display-props, font-size );
+        $_font-family: map.get( $kendo-display-props, font-family );
+        $_line-height: map.get( $kendo-display-props, line-height );
+        $_font-weight: map.get( $kendo-display-props, font-weight );
+        $_letter-spacing: map.get( $kendo-display-props, letter-spacing );
+        $_margin: map.get( $kendo-display-props, margin );
 
         .k-display-#{$display} {
             @include typography(

package/scss/typography/_theme.scss

@@ -1,3 +1,7 @@
+@use "../core/_index.scss" as *;
+@use "../core/mixins/index.import.scss" as *;
+@use "./_variables.scss" as *;
+
 @mixin kendo-typography--theme-base() {
 
     .k-body {

package/scss/typography/_variables.scss

@@ -1,3 +1,4 @@
+@use "../core/_index.scss" as *;
 // Typography