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

package/scss/badge/_index.scss

@@ -1,38 +1,19 @@
-@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.
@@ -6,47 +8,47 @@ $kendo-badge-border-width: 1px !default;
 
 /// The border radius of the Badge.
 /// @group badge
-$kendo-badge-border-radius: $badge-border-radius !default;
+$kendo-badge-border-radius: k-spacing(1.5) !default;
 
 
 /// The horizontal padding of the Badge.
 /// @group badge
-$kendo-badge-padding-x: $badge-padding-x !default;
+$kendo-badge-padding-x: .65em !default;
 /// The horizontal padding of the small Badge.
 /// @group badge
-$kendo-badge-sm-padding-x: k-math-div( $badge-padding-x, 2 ) !default;
+$kendo-badge-sm-padding-x: calc( $kendo-badge-padding-x / 2 ) !default;
 /// The horizontal padding of the medium Badge.
 /// @group badge
-$kendo-badge-md-padding-x: $badge-padding-x !default;
+$kendo-badge-md-padding-x: .65em !default;
 /// The horizontal padding of the large Badge.
 /// @group badge
-$kendo-badge-lg-padding-x: ( $badge-padding-x * 1.5 ) !default;
+$kendo-badge-lg-padding-x: calc( $kendo-badge-padding-x * 1.5 ) !default;
 
 /// The vertical padding of the Badge.
 /// @group badge
-$kendo-badge-padding-y: $badge-padding-y !default;
+$kendo-badge-padding-y: .35em !default;
 /// The vertical padding of the small Badge.
 /// @group badge
-$kendo-badge-sm-padding-y: k-math-div( $badge-padding-y, 2 ) !default;
+$kendo-badge-sm-padding-y: calc( $kendo-badge-padding-y / 2 ) !default;
 /// The vertical padding of the medium Badge.
 /// @group badge
-$kendo-badge-md-padding-y: $badge-padding-y !default;
+$kendo-badge-md-padding-y: .35em !default;
 /// The vertical padding of the large Badge.
 /// @group badge
-$kendo-badge-lg-padding-y: ( $badge-padding-y * 1.5 ) !default;
+$kendo-badge-lg-padding-y: calc( $kendo-badge-padding-y * 1.5 ) !default;
 
 /// The font sizes of the Badge.
 /// @group badge
-$kendo-badge-font-size: $badge-font-size !default;
+$kendo-badge-font-size: $kendo-font-size * .75 !default;
 /// The font size of the small Badge.
 /// @group badge
-$kendo-badge-sm-font-size: $badge-font-size !default;
+$kendo-badge-sm-font-size: $kendo-badge-font-size !default;
 /// The font size of the medium Badge.
 /// @group badge
-$kendo-badge-md-font-size: $badge-font-size !default;
+$kendo-badge-md-font-size: $kendo-badge-font-size !default;
 /// The font size of the large Badge.
 /// @group badge
-$kendo-badge-lg-font-size: $badge-font-size !default;
+$kendo-badge-lg-font-size: $kendo-badge-font-size !default;
 
 /// The line heights used along with the $kendo-font-size variable.
 /// @group 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.
@@ -42,7 +45,7 @@ $kendo-bottom-nav-item-max-width: null !default;
 $kendo-bottom-nav-item-min-height: calc( #{$kendo-icon-size * 2.5} + #{k-spacing(4)} - calc( #{$kendo-bottom-nav-padding-x} * 2 ) ) !default;
 /// The border radius of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-border-radius: null !default;
+$kendo-bottom-nav-item-border-radius: unset !default;
 /// The spacing of the BottomNavigation item.
 /// @group bottom-navigation
 $kendo-bottom-nav-item-gap: 0 k-spacing(1) !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,5 +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() {
 
@@ -8,11 +7,11 @@
     // Breadcrumb links
     .k-breadcrumb-link,
     .k-breadcrumb-root-link {
-        text-decoration: $link-decoration;
+        text-decoration: underline;
 
         &:hover,
         &.k-hover {
-            text-decoration: $link-hover-decoration;
+            text-decoration: null;
         }
     }
 

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() {

package/scss/breadcrumb/_variables.scss

@@ -1,3 +1,7 @@
+@use "sass:math";
+@use "../core/_index.scss" as *;
+@use "../icons/_variables.scss" as *;
+
 // Breadcrumb
 
 /// The width of the border around the Breadcrumb.
@@ -40,7 +44,7 @@ $kendo-breadcrumb-lg-font-size: var( --kendo-font-size, inherit ) !default;
 $kendo-breadcrumb-line-height: var( --kendo-line-height, normal ) !default;
 /// The line-height of the small Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-line-height: k-math-div( 20, 14 ) !default;
+$kendo-breadcrumb-sm-line-height: math.div( 20, 14 ) !default;
 /// The line-height of the medium Breadcrumb.
 /// @group breadcrumb
 $kendo-breadcrumb-md-line-height: $kendo-breadcrumb-line-height !default;
@@ -137,7 +141,7 @@ $kendo-breadcrumb-link-border: null !default;
 
 /// The background color of the hovered Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-hover-bg: null !default;
+$kendo-breadcrumb-link-hover-bg: unset !default;
 /// The text color of the hovered Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-link-hover-text: $kendo-link-hover-text !default;
@@ -150,7 +154,7 @@ $kendo-breadcrumb-link-hover-border: null !default;
 $kendo-breadcrumb-link-focus-bg: null !default;
 /// The text color of the focused Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-focus-text: null !default;
+$kendo-breadcrumb-link-focus-text: $kendo-breadcrumb-link-text !default;
 /// The border color of the focused Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-link-focus-border: null !default;
@@ -170,7 +174,7 @@ $kendo-breadcrumb-root-link-border: null !default;
 
 /// The background color of the hovered Breadcrumb root link.
 /// @group breadcrumb
-$kendo-breadcrumb-root-link-hover-bg: null !default;
+$kendo-breadcrumb-root-link-hover-bg: unset !default;
 /// The text color of the hovered Breadcrumb root link.
 /// @group breadcrumb
 $kendo-breadcrumb-root-link-hover-text: $kendo-link-hover-text !default;
@@ -230,3 +234,68 @@ $kendo-breadcrumb-sizes: (
         line-height: $kendo-breadcrumb-lg-line-height
     )
 ) !default;
+
+
+@forward "@progress/kendo-theme-default/scss/breadcrumb/_variables.scss" with (
+    $kendo-breadcrumb-border-width: $kendo-breadcrumb-border-width,
+    $kendo-breadcrumb-margin-x: $kendo-breadcrumb-margin-x,
+    $kendo-breadcrumb-margin-y: $kendo-breadcrumb-margin-y,
+    $kendo-breadcrumb-padding-x: $kendo-breadcrumb-padding-x,
+    $kendo-breadcrumb-padding-y: $kendo-breadcrumb-padding-y,
+    $kendo-breadcrumb-font-family: $kendo-breadcrumb-font-family,
+    $kendo-breadcrumb-font-size: $kendo-breadcrumb-font-size,
+    $kendo-breadcrumb-sm-font-size: $kendo-breadcrumb-sm-font-size,
+    $kendo-breadcrumb-md-font-size: $kendo-breadcrumb-md-font-size,
+    $kendo-breadcrumb-lg-font-size: $kendo-breadcrumb-lg-font-size,
+    $kendo-breadcrumb-line-height: $kendo-breadcrumb-line-height,
+    $kendo-breadcrumb-sm-line-height: $kendo-breadcrumb-sm-line-height,
+    $kendo-breadcrumb-md-line-height: $kendo-breadcrumb-md-line-height,
+    $kendo-breadcrumb-lg-line-height: $kendo-breadcrumb-lg-line-height,
+    $kendo-breadcrumb-bg: $kendo-breadcrumb-bg,
+    $kendo-breadcrumb-text: $kendo-breadcrumb-text,
+    $kendo-breadcrumb-border: $kendo-breadcrumb-border,
+    $kendo-breadcrumb-focus-shadow: $kendo-breadcrumb-focus-shadow,
+    $kendo-breadcrumb-link-padding-x: $kendo-breadcrumb-link-padding-x,
+    $kendo-breadcrumb-sm-link-padding-x: $kendo-breadcrumb-sm-link-padding-x,
+    $kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-md-link-padding-x,
+    $kendo-breadcrumb-lg-link-padding-x: $kendo-breadcrumb-lg-link-padding-x,
+    $kendo-breadcrumb-link-padding-y: $kendo-breadcrumb-link-padding-y,
+    $kendo-breadcrumb-sm-link-padding-y: $kendo-breadcrumb-sm-link-padding-y,
+    $kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-md-link-padding-y,
+    $kendo-breadcrumb-lg-link-padding-y: $kendo-breadcrumb-lg-link-padding-y,
+    $kendo-breadcrumb-link-border-radius: $kendo-breadcrumb-link-border-radius,
+    $kendo-breadcrumb-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y,
+    $kendo-breadcrumb-sm-icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y,
+    $kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y,
+    $kendo-breadcrumb-lg-icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y,
+    $kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-x,
+    $kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x,
+    $kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x,
+    $kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x,
+    $kendo-breadcrumb-link-initial-text: $kendo-breadcrumb-link-initial-text,
+    $kendo-breadcrumb-link-icon-spacing: $kendo-breadcrumb-link-icon-spacing,
+    $kendo-breadcrumb-link-bg: $kendo-breadcrumb-link-bg,
+    $kendo-breadcrumb-link-text: $kendo-breadcrumb-link-text,
+    $kendo-breadcrumb-link-border: $kendo-breadcrumb-link-border,
+    $kendo-breadcrumb-link-hover-bg: $kendo-breadcrumb-link-hover-bg,
+    $kendo-breadcrumb-link-hover-text: $kendo-breadcrumb-link-hover-text,
+    $kendo-breadcrumb-link-hover-border: $kendo-breadcrumb-link-hover-border,
+    $kendo-breadcrumb-link-focus-bg: $kendo-breadcrumb-link-focus-bg,
+    $kendo-breadcrumb-link-focus-text: $kendo-breadcrumb-link-focus-text,
+    $kendo-breadcrumb-link-focus-border: $kendo-breadcrumb-link-focus-border,
+    $kendo-breadcrumb-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow,
+    $kendo-breadcrumb-root-link-bg: $kendo-breadcrumb-root-link-bg,
+    $kendo-breadcrumb-root-link-text: $kendo-breadcrumb-root-link-text,
+    $kendo-breadcrumb-root-link-border: $kendo-breadcrumb-root-link-border,
+    $kendo-breadcrumb-root-link-hover-bg: $kendo-breadcrumb-root-link-hover-bg,
+    $kendo-breadcrumb-root-link-hover-text: $kendo-breadcrumb-root-link-hover-text,
+    $kendo-breadcrumb-root-link-hover-border: $kendo-breadcrumb-root-link-hover-border,
+    $kendo-breadcrumb-root-link-focus-bg: $kendo-breadcrumb-root-link-focus-bg,
+    $kendo-breadcrumb-root-link-focus-text: $kendo-breadcrumb-root-link-focus-text,
+    $kendo-breadcrumb-root-link-focus-border: $kendo-breadcrumb-root-link-focus-border,
+    $kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-root-link-focus-shadow,
+    $kendo-breadcrumb-current-item-bg: $kendo-breadcrumb-current-item-bg,
+    $kendo-breadcrumb-current-item-text: $kendo-breadcrumb-current-item-text,
+    $kendo-breadcrumb-current-item-border: $kendo-breadcrumb-current-item-border,
+    $kendo-breadcrumb-sizes: $kendo-breadcrumb-sizes
+);

package/scss/button/_index.scss

@@ -1,40 +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,4 +1,4 @@
-@import "@progress/kendo-theme-default/scss/button/_layout.scss";
+@use "@progress/kendo-theme-default/scss/button/_layout.scss" as *;
 
 
 @mixin kendo-button--layout() {

package/scss/button/_theme.scss

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