@progress/kendo-theme-fluent 5.12.1-dev.0 → 5.12.1-dev.2

package/scss/timeline/index.scss

@@ -10,9 +10,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/timepicker/index.scss

@@ -12,9 +12,9 @@ $_kendo-module-meta: (
 );
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/timeselector/_layout.scss

@@ -1,7 +1,7 @@
-@use "_variables.scss" as *;
-@use "../core/color-system" as *;
-@use "../core/mixins" as *;
+@use "sass:map";
+@use "../core/" as *;
 @use "../button/_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-timeselector--layout() {
 
@@ -19,7 +19,7 @@
         flex-flow: column nowrap;
         user-select: none;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         .k-popup > & {
             border-width: 0;
@@ -209,10 +209,10 @@
 
     // Time selector sizes
     @each $size, $size-props in $kendo-time-selector-sizes {
-        $_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 );
+        $_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( #{$_font-size} * #{$_line-height} + #{ $_list-item-padding-y * 2} );
 
 

package/scss/timeselector/_theme.scss

@@ -1,6 +1,5 @@
-@use "_variables.scss" as *;
-@use "../core/color-system" as *;
-@use "../core/mixins" as *;
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-timeselector--theme() {
     // Time selector
@@ -40,7 +39,7 @@
 
             &::before,
             &::after {
-                background-color: var( --kendo-time-list-focused-bg, $kendo-time-list-focused-bg );
+                background-color: var( --kendo-time-list-focus-bg, $kendo-time-list-focus-bg );
             }
         }
     }

package/scss/timeselector/_variables.scss

@@ -1,5 +1,5 @@
-@use "../core/color-system" as *;
-@use "../core/_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
 @use "../list/_variables.scss" as *;
 
 /// Width of the border around the time-selector.
@@ -27,17 +27,17 @@ $kendo-time-selector-border: var( --kendo-component-border, initial ) !default;
 
 /// Horizontal padding of the time-selector header.
 /// @group time-selector
-$kendo-time-selector-header-padding-x: map-get( $kendo-spacing, 3 ) !default;
+$kendo-time-selector-header-padding-x: map.get( $kendo-spacing, 3 ) !default;
 /// Vertical padding color of the time-selector header.
 /// @group time-selector
-$kendo-time-selector-header-padding-y: map-get( $kendo-spacing, 3 ) !default;
+$kendo-time-selector-header-padding-y: map.get( $kendo-spacing, 3 ) !default;
 /// Width of the border around the time-selector header.
 /// @group time-selector
 $kendo-time-selector-header-border-width: 0px !default;
 
 /// Visibility of the time-selector separator.
 /// @group time-selector
-$kendo-time-list-separator-display: none;
+$kendo-time-list-separator-display: none !default;
 /// Minimum width of the time-selector columns.
 /// @group time-selector
 $kendo-time-list-width: 4em !default;
@@ -47,7 +47,7 @@ $kendo-time-list-height: 240px !default;
 
 /// Spacing beneath the time selector titles.
 /// @group time-selector
-$kendo-time-list-title-spacing: map-get( $kendo-spacing, 3 ) !default;
+$kendo-time-list-title-spacing: map.get( $kendo-spacing, 3 ) !default;
 /// Font size of the time-selector titles.
 /// @group time-selector
 $kendo-time-list-title-font-size: var( --kendo-font-size-xs, inherit ) !default;
@@ -67,10 +67,10 @@ $kendo-time-list-title-focus-text: $kendo-time-selector-text !default;
 
 /// Horizontal padding of the time-selector list items.
 /// @group time-selector
-$kendo-time-list-item-padding-x: map-get( $kendo-spacing, 2 ) !default;
+$kendo-time-list-item-padding-x: map.get( $kendo-spacing, 2 ) !default;
 /// Vertical padding of the time-selector list items.
 /// @group time-selector
-$kendo-time-list-item-padding-y: map-get( $kendo-spacing, 1 ) !default;
+$kendo-time-list-item-padding-y: map.get( $kendo-spacing, 1 ) !default;
 
 /// Width of the border of the selected item in the time-selector.
 /// @group time-selector
@@ -87,7 +87,7 @@ $kendo-time-list-highlight-border: $kendo-time-selector-border !default;
 
 /// Background color of the focused time-selector column.
 /// @group time-selector
-$kendo-time-list-focused-bg: rgba(0, 0, 0, .04) !default;
+$kendo-time-list-focus-bg: rgba(0, 0, 0, .04) !default;
 
 
 /// Font sizes of the time-selector.

package/scss/timeselector/index.scss

@@ -10,12 +10,12 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
-@use "../core/module-system" as module;
+@use "../core/module-system/" as module;
 @include module.register( $_kendo-module-meta... );
 
 // Expose

package/scss/toolbar/_layout.scss

@@ -1,14 +1,15 @@
+@use "sass:map";
 @use "../core/" as *;
-@use "_variables.scss" as *;
 @use "../button/_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-toolbar--layout() {
 
     // Base
     .k-toolbar {
         margin: 0;
-        padding-inline: var( --kendo-toolbar-padding-x, #{$kendo-toolbar-padding-x} );
-        padding-block: var( --kendo-toolbar-padding-y, #{$kendo-toolbar-padding-y} );
+        padding-inline: var( --INTERNAL--kendo-toolbar-padding-x, 0 );
+        padding-block: var( --INTERNAL--kendo-toolbar-padding-y, 0 );
         border-width: var( --kendo-toolbar-border-width, #{$kendo-toolbar-border-width} );
         border-style: solid;
         box-sizing: border-box;
@@ -19,19 +20,19 @@
         list-style: none;
         display: flex;
         flex-flow: row wrap;
-        gap: var( --kendo-toolbar-spacing, #{$kendo-toolbar-spacing} );
+        gap: var( --INTERNAL--kendo-toolbar-spacing, 0 );
         align-items: center;
         justify-content: flex-start;
         position: relative;
         overflow: hidden;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         // Remove once we decide to not size empty containers
         &::before {
             content: "";
             height: $kendo-button-inner-calc-size;
-            margin-inline-start: -#{$kendo-toolbar-spacing};
+            margin-inline-start: calc( var( --INTERNAL--kendo-toolbar-spacing, 0 ) * -1 );
         }
 
         &.k-toolbar-resizable {
@@ -45,7 +46,7 @@
             vertical-align: middle;
 
             > label {
-                margin-inline-end: var( --kendo-toolbar-spacing, #{$kendo-toolbar-spacing} );
+                margin-inline-end: var( --INTERNAL--kendo-toolbar-spacing, 0 );
                 align-self: center;
             }
         }
@@ -60,24 +61,8 @@
         }
 
         // Overflow anchor
-        .k-overflow-anchor {
-            @include border-radius( 0 );
-            margin: 0;
-            padding-block: var( --kendo-toolbar-padding-y, #{$kendo-toolbar-padding-y} );
-            width: auto;
-            height: 100%;
-            aspect-ratio: 1;
-            border-width: 0;
-            border-color: inherit;
-            box-sizing: border-box;
-            justify-content: center;
-            position: absolute;
-            inset-block-start: 0;
-            inset-inline-end: 0;
-
-            &::before {
-                display: block;
-            }
+        .k-toolbar-overflow-button {
+            margin-inline-start: auto;
         }
 
         // Separator
@@ -96,12 +81,6 @@
             flex: 1 0 0%;
         }
 
-        // Template
-        .k-toolbar-template {
-            align-self: center;
-            align-items: center;
-        }
-
         // Template item
         .k-toolbar-item:focus,
         .k-toolbar-item.k-focus {
@@ -120,12 +99,66 @@
     }
 
     // Angular specific
-    kendo-toolbar-renderer {
+    .k-toolbar-renderer {
         display: inline-block;
         border-color: inherit;
     }
 
-    // Overflow container
+    // Toolbar sizes
+    @each $size, $size-props in $kendo-toolbar-sizes {
+        $_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} {
+            --INTERNAL--kendo-toolbar-padding-x: var( --kendo-toolbar-#{$size}-padding-x, #{$_padding-x} );
+            --INTERNAL--kendo-toolbar-padding-y: var( --kendo-toolbar-#{$size}-padding-y, #{$_padding-y} );
+            --INTERNAL--kendo-toolbar-spacing: var( --kendo-toolbar-#{$size}-spacing, #{$_spacing} );
+        }
+    }
+    // Remove once we decide to not size empty containers
+    .k-toolbar-sm::before {
+        height: var( --kendo-button-inner-calc-size-sm, #{$kendo-button-inner-calc-size-sm} );
+    }
+    .k-toolbar-md::before {
+        height: var( --kendo-button-inner-calc-size-md, #{$kendo-button-inner-calc-size-md} );
+    }
+    .k-toolbar-lg::before {
+        height: var( --kendo-button-inner-calc-size-lg, #{$kendo-button-inner-calc-size-lg} );
+    }
+
+    // sass-lint:disable class-name-format
+    .k-floating-toolbar,
+    .editorToolbarWindow.k-window-content {
+        padding-inline: var( --kendo-toolbar-padding-x-md, #{$kendo-toolbar-padding-x-md} ) !important; // sass-lint:disable-line no-important
+        padding-block: var( --kendo-toolbar-padding-y-md, #{$kendo-toolbar-padding-y-md} ) !important; // sass-lint:disable-line no-important
+        border-width: var( --kendo-toolbar-border-width, #{$kendo-toolbar-border-width} );
+        border-style: solid;
+        display: flex;
+        flex-flow: row nowrap;
+        gap: var( --kendo-toolbar-spacing-md, #{$kendo-toolbar-spacing-md} );
+        align-items: center;
+
+        .k-toolbar {
+            padding: 0;
+            border-width: 0;
+            flex-shrink: 1;
+            color: inherit;
+            background: none;
+        }
+    }
+
+    .k-editortoolbar-dragHandle {
+        cursor: move;
+        display: flex;
+        align-items: center;
+        align-self: stretch;
+        flex-shrink: 0;
+    }
+
+
+    // Remove once the Overflow Popup uses
+    // the proper Menu rendering in all suites.
     .k-overflow-container {
         font-size: var( --kendo-menu-popup-font-size-md, inherit );
         line-height: var( --kendo-menu-popup-line-height-md, normal );
@@ -135,7 +168,7 @@
         }
 
         .k-separator {
-            margin-block: map-get( $kendo-spacing, 1 );
+            margin-block: map.get( $kendo-spacing, 1 );
         }
 
         // Group
@@ -189,33 +222,4 @@
         }
     }
 
-    // sass-lint:disable class-name-format
-    .k-floating-toolbar,
-    .editorToolbarWindow.k-window-content {
-        padding-inline: var( --kendo-toolbar-padding-x, #{$kendo-toolbar-padding-x} ) !important; // sass-lint:disable-line no-important
-        padding-block: var( --kendo-toolbar-padding-y, #{$kendo-toolbar-padding-y} ) !important; // sass-lint:disable-line no-important
-        border-width: var( --kendo-toolbar-border-width, #{$kendo-toolbar-border-width} );
-        border-style: solid;
-        display: flex;
-        flex-flow: row nowrap;
-        gap: var( --kendo-toolbar-spacing, #{$kendo-toolbar-spacing} );
-        align-items: center;
-
-        .k-toolbar {
-            padding: 0;
-            border-width: 0;
-            flex-shrink: 1;
-            color: inherit;
-            background: none;
-        }
-    }
-
-    .k-editortoolbar-dragHandle {
-        cursor: move;
-        display: flex;
-        align-items: center;
-        align-self: stretch;
-        flex-shrink: 0;
-    }
-
 }

package/scss/toolbar/_theme.scss

@@ -1,4 +1,4 @@
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-toolbar--theme() {
 
@@ -9,7 +9,8 @@
         border-color: var( --kendo-toolbar-border, #{$kendo-toolbar-border} );
 
         // Separator
-        .k-separator {
+        .k-separator,
+        .k-toolbar-separator {
             border-color: var( --kendo-toolbar-separator-border, #{$kendo-toolbar-separator-border} );
         }
 
@@ -21,7 +22,17 @@
 
     }
 
-    // Overflow container
+    // sass-lint:disable-block class-name-format
+    .k-floating-toolbar,
+    .editorToolbarWindow.k-window-content {
+        color: var( --kendo-toolbar-text, #{$kendo-toolbar-text} );
+        background-color: var( --kendo-toolbar-bg, #{$kendo-toolbar-bg} );
+        border-color: var( --kendo-toolbar-border, #{$kendo-toolbar-border} );
+    }
+
+
+    // Remove once the Overflow Popup uses
+    // the proper Menu rendering in all suites.
     .k-overflow-container {
 
         .k-button {
@@ -61,12 +72,4 @@
 
     }
 
-    // sass-lint:disable-block class-name-format
-    .k-floating-toolbar,
-    .editorToolbarWindow.k-window-content {
-        color: var( --kendo-toolbar-text, #{$kendo-toolbar-text} );
-        background-color: var( --kendo-toolbar-bg, #{$kendo-toolbar-bg} );
-        border-color: var( --kendo-toolbar-border, #{$kendo-toolbar-border} );
-    }
-
 }

package/scss/toolbar/_variables.scss

@@ -1,17 +1,28 @@
+@use "sass:map";
 @use "../core/" as *;
 
-/// Horizontal padding of the toolbar.
+/// The horizontal padding of the toolbar.
 /// @group toolbar
-$kendo-toolbar-padding-x: map-get( $kendo-spacing, 2 ) !default;
-/// Vertical padding of the toolbar.
+$kendo-toolbar-padding-x-sm: map.get( $kendo-spacing, 1 ) !default;
+$kendo-toolbar-padding-x-md: map.get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-padding-x-lg: map.get( $kendo-spacing, 2.5 ) !default;
+
+/// The vertical padding of the toolbar.
+/// @group toolbar
+$kendo-toolbar-padding-y-sm: map.get( $kendo-spacing, 1 ) !default;
+$kendo-toolbar-padding-y-md: map.get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-padding-y-lg: map.get( $kendo-spacing, 2.5 ) !default;
+
+/// The spacing between the toolbar tools.
 /// @group toolbar
-$kendo-toolbar-padding-y: map-get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-spacing-sm: map.get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-spacing-md: map.get( $kendo-spacing, 2 ) !default;
+$kendo-toolbar-spacing-lg: map.get( $kendo-spacing, 2 ) !default;
+
 /// Width of the border around the toolbar.
 /// @group toolbar
 $kendo-toolbar-border-width: 1px !default;
-/// Spacing of the toolbar
-/// @group toolbar
-$kendo-toolbar-spacing: $kendo-toolbar-padding-x !default;
+
 /// Font family of the toolbar.
 /// @group toolbar
 $kendo-toolbar-font-family: var( --kendo-font-family, inherit ) !default;
@@ -21,21 +32,22 @@ $kendo-toolbar-font-size: var( --kendo-font-size, inherit ) !default;
 /// Line height of the toolbar.
 /// @group toolbar
 $kendo-toolbar-line-height: var( --kendo-line-height, normal ) !default;
+
 /// Background color of the toolbar.
 /// @group toolbar
 $kendo-toolbar-bg: get-theme-color-var( neutral-10 ) !default;
 /// Text color of the toolbar.
 /// @group toolbar
 $kendo-toolbar-text: var( --kendo-component-text, inherit ) !default;
-/// Color of the border around the toolbar
+/// Color of the border around the toolbar.
 /// @group toolbar
 $kendo-toolbar-border: var( --kendo-component-border, initial ) !default;
 
-/// Color of the separator border of the toolbar
+/// Color of the separator border of the toolbar.
 /// @group toolbar
 $kendo-toolbar-separator-border: get-theme-color-var( neutral-60 ) !default;
 
-/// The width of the input in the toolbar
+/// The width of the input in the toolbar.
 /// @group toolbar
 $kendo-toolbar-input-width: 10em !default;
 
@@ -48,3 +60,23 @@ $kendo-toolbar-item-focus-outline-style: solid !default;
 /// Border color of the focused toolbar item.
 /// @group toolbar
 $kendo-toolbar-item-focus-outline-color: get-theme-color-var( neutral-130 ) !default;
+
+/// Sizes map for the toolbar.
+/// @group toolbar
+$kendo-toolbar-sizes: (
+    sm: (
+        padding-x: $kendo-toolbar-padding-x-sm,
+        padding-y: $kendo-toolbar-padding-y-sm,
+        spacing: $kendo-toolbar-spacing-sm
+    ),
+    md: (
+        padding-x: $kendo-toolbar-padding-x-md,
+        padding-y: $kendo-toolbar-padding-y-md,
+        spacing: $kendo-toolbar-spacing-md
+    ),
+    lg: (
+        padding-x: $kendo-toolbar-padding-x-lg,
+        padding-y: $kendo-toolbar-padding-y-lg,
+        spacing: $kendo-toolbar-spacing-lg
+    )
+) !default;

package/scss/toolbar/index.scss

@@ -11,12 +11,12 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
-@use "../core/module-system" as module;
+@use "../core/module-system/" as module;
 @include module.register( $_kendo-module-meta... );
 
 // Expose

package/scss/tooltip/_layout.scss

@@ -1,5 +1,5 @@
 @use "../core/" as *;
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-tooltip--layout() {
 
@@ -22,7 +22,7 @@
         position: absolute;
         z-index: 12000;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,

package/scss/tooltip/_theme.scss

@@ -1,5 +1,6 @@
+@use "sass:map";
 @use "../core/" as *;
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-tooltip--theme() {
 
@@ -24,9 +25,9 @@
     }
 
     @each $theme-color, $color-props in $kendo-tooltip-theme-colors {
-            $_bg: map-get( $color-props , bg );
-            $_text: map-get( $color-props , text );
-            $_border: map-get( $color-props , border );
+            $_bg: map.get( $color-props , bg );
+            $_text: map.get( $color-props , text );
+            $_border: map.get( $color-props , border );
 
         .k-tooltip-#{$theme-color} {
             --kendo-tooltip-text: #{$_text};

package/scss/tooltip/_variables.scss

@@ -6,10 +6,10 @@
 $kendo-tooltip-border-radius: $kendo-border-radius !default;
 /// The horizontal padding of the tooltip
 /// @group tooltip
-$kendo-tooltip-padding-x: map-get( $kendo-spacing, 2 ) !default;
+$kendo-tooltip-padding-x: map.get( $kendo-spacing, 2 ) !default;
 /// The vertical padding of the tooltip
 /// @group tooltip
-$kendo-tooltip-padding-y: map-get( $kendo-spacing, 2 ) !default;
+$kendo-tooltip-padding-y: map.get( $kendo-spacing, 2 ) !default;
 /// The width of the border around the tooltip
 /// @group tooltip
 $kendo-tooltip-border-width: 0px !default;
@@ -31,15 +31,15 @@ $kendo-tooltip-title-font-size: calc( #{$kendo-tooltip-font-size} * 1.25 ) !defa
 $kendo-tooltip-title-line-height: var( --kendo-line-heigh-xs, normal ) !default;
 /// The margin of the tooltip title
 /// @group tooltip
-$kendo-tooltip-title-margin: map-get( $kendo-spacing, 1 ) !default;
+$kendo-tooltip-title-margin: map.get( $kendo-spacing, 1 ) !default;
 
 /// The size of the tooltip callout
 /// @group tooltip
-$kendo-tooltip-callout-size: map-get( $kendo-spacing, 2 ) !default;
+$kendo-tooltip-callout-size: map.get( $kendo-spacing, 2 ) !default;
 
 /// The background of the tooltip
 /// @group tooltip
-$kendo-tooltip-bg: $white !default;
+$kendo-tooltip-bg: $kendo-color-white !default;
 /// The text color of the tooltip
 /// @group tooltip
 $kendo-tooltip-text: var( --kendo-component-text, initial ) !default;
@@ -59,25 +59,25 @@ $kendo-tooltip-button-text: get-theme-color-var( neutral-130, initial ) !default
 $kendo-tooltip-primary-bg: get-theme-color-var( primary-100 ) !default;
 /// The primary text color of the tooltip
 /// @group tooltip
-$kendo-tooltip-primary-text: $white !default;
+$kendo-tooltip-primary-text: $kendo-color-white !default;
 /// The primary border color of the tooltip
 /// @group tooltip
 $kendo-tooltip-primary-border: initial !default;
 
 /// Theme variations for the tooltip.
-$kendo-tooltip-brand-colors: (error, warning, success, info );
+$kendo-tooltip-brand-colors: (error, warning, success, info ) !default;
 
 // Matrix with tooltip theme colors in the order: bg, color, border
 $_tc-tooltip-matrix: (
     (normal: (20, 160, 20)),
-);
+) !default;
 
 $_tc-tooltip-primary-matrix: (
-    (normal: (100, $white, 100)),
-);
+    (normal: (100, $kendo-color-white, 100)),
+) !default;
 
 /// Theme colors map for the tooltip variations.
-$kendo-tooltip-theme-colors: ();
+$kendo-tooltip-theme-colors: () !default;
 
 @each $ui-states in $_tc-tooltip-primary-matrix {
     $kendo-tooltip-theme-colors: map.deep-merge(

package/scss/tooltip/index.scss

@@ -9,9 +9,9 @@ $_kendo-module-meta: (
 
 
 // Component
-@forward "_variables.scss";
-@use "_layout.scss" as *;
-@use "_theme.scss" as *;
+@forward "./_variables.scss";
+@use "./_layout.scss" as *;
+@use "./_theme.scss" as *;
 
 // Register
 @use "../core/module-system/" as module;

package/scss/treelist/_layout.scss

@@ -1,5 +1,6 @@
-@use "../core/_variables.scss" as *;
-@use "_variables.scss" as *;
+@use "sass:map";
+@use "../core/" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-treelist--layout() {
 
@@ -17,7 +18,7 @@
             // TODO: see what this does and use a better name
             .k-loading {
                 vertical-align: baseline;
-                margin-right: map-get( $kendo-spacing, 1 );
+                margin-right: map.get( $kendo-spacing, 1 );
 
                 // TODO
                 display: none;
@@ -47,7 +48,7 @@
 
         .k-i-collapse,
         .k-i-expand {
-            margin-inline-end: map-get( $kendo-spacing, 2 );
+            margin-inline-end: map.get( $kendo-spacing, 2 );
         }
     }
 

package/scss/treelist/_theme.scss

@@ -1,4 +1,4 @@
-@use "_variables.scss" as *;
+@use "./_variables.scss" as *;
 
 @mixin kendo-treelist--theme() {
 

package/scss/treelist/_variables.scss

@@ -1,4 +1,4 @@
-@use "../core/color-system" as *;
+@use "../core/" as *;
 @use "../grid/_variables.scss" as *;
 
 /// Background color of the treelist footer row.