feat(default): migrate theme to the dart-sass module system

BREAKING CHANGE Starting with the R4 2024 release, all Kendo themes are now migrated to the SASS module system. This breaking change is due to the `node-sass` package reaching its official end of life. For more information, please refer to the following links: * https://sass-lang.com/blog/the-module-system-is-launched/ * sass/node-sass@107ded9
telerik · Nov 1, 2024 · b4db551 · b4db551
1 parent 82f0cb5
commit b4db551
Show file tree

Hide file tree

Showing 401 changed files with 3,226 additions and 6,257 deletions.
diff --git a/packages/core/scss/color-system/_palettes.scss b/packages/core/scss/color-system/_palettes.scss
diff --git a/packages/default/README.md b/packages/default/README.md
@@ -31,7 +31,7 @@ and then import it in your project styles:
 
 ```scss
 // Import the entire theme
-@import "~@progress/kendo-theme-default/dist/all.scss";
+@use "@progress/kendo-theme-default/scss/all.scss" as *;
 ```
 
 For more information on how to implement the Default theme in your project, refer to the following articles:
@@ -46,12 +46,14 @@ You can customize Kendo UI Default Theme both in terms of what gets compiled and
 
 ### Importing
 
-In your custom scss file, you can import the entirety of the theme, by importing `dist/all.scss` or pick just the styles for the components you need. The files for individual components are in `scss/` folder:
+In your custom scss file, you can import the entirety of the theme, by importing `scss/all.scss` or pick just the styles for the components you need. The files for individual components:
 
 ```scss
-// Import only PanelBar and Grid styles
-@import "~@progress/kendo-theme-default/scss/panelbar/_index.scss";
-@import "~@progress/kendo-theme-default/scss/grid/_index.scss";
+// Import only Button and Grid styles
+@use "@progress/kendo-theme-default/scss/index.scss" as *;
+
+@include kendo-button--styles();
+@include kendo-grid--styles();
 ```
 
 ### SCSS Variables
@@ -65,21 +67,10 @@ We have more than 2000 variables, so it's hard to list them all. We've tried to
 Here is a quick example on how to customize:
 
 ```scss
-// Make all inputs components with a different background color
-$input-bg: #f0f0f0;
-
-// Make the border of the grid black and slightly ticker
-$grid-border-width: 2px;
-$grid-border: #000000;
-
-// When you are finished with your customization, import the theme
-@import "@progress/kendo-theme-default/dist/all.scss";
-
-// Note: the variables bellow this point will not take effect,
-// because the theme is already imported
-
-$grid-border: red;
-
+@use "@progress/kendo-theme-default/scss/all.scss" as * with (
+    $kendo-button-bg: #ff0000,
+    $kendo-font-size: 20px
+);
 ```
 
 ## Integrating with third party frameworks

diff --git a/packages/default/lib/swatches/default-nordic.json b/packages/default/lib/swatches/default-nordic.json
@@ -597,7 +597,7 @@
         {
             "name": "Body",
             "variables": {
-                "kendo-body-color": {
+                "kendo-body-text": {
                     "name": "Body text color",
                     "type": "color",
                     "value": "#50686e"

diff --git a/packages/default/lib/swatches/default-urban.json b/packages/default/lib/swatches/default-urban.json
@@ -622,7 +622,7 @@
         {
             "name": "Components",
             "variables": {
-                "kendo-component-color": {
+                "kendo-component-text": {
                     "name": "Component text",
                     "type": "color",
                     "value": "#1c3a4c"

diff --git a/packages/default/sass-flat.config.js b/packages/default/sass-flat.config.js
diff --git a/packages/default/sass-standalone.config.js b/packages/default/sass-standalone.config.js
@@ -5,6 +5,8 @@ module.exports = {
     build: [
         {
             entry: [ 'scss/!(common|styling)*/_index.scss' ],
+            api: "modern",
+            compiler: "sass",
             sassOptions: {
                 loadPaths: [
                     '../../node_modules/'

diff --git a/packages/default/sass-swatches.config.js b/packages/default/sass-swatches.config.js
@@ -5,7 +5,12 @@ module.exports = {
     build: [
         {
             entry: [ 'dist/!(_|variables)*.scss' ],
+            api: "modern",
+            compiler: "sass",
             sassOptions: {
+                loadPaths: [
+                    '../../node_modules/'
+                ],
                 minify: true
             }
         }

diff --git a/packages/default/sass.config.js b/packages/default/sass.config.js
@@ -6,6 +6,8 @@ module.exports = {
         {
             file: 'scss/all.scss',
             outFile: 'dist/all.css',
+            compiler: "sass",
+            api: "modern",
             sassOptions: {
                 loadPaths: [
                     '../../node_modules/'

diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss
@@ -1,54 +1,12 @@
-@import "./core/functions/index.import.scss";
-
-// Options
-$kendo-enable-rounded: true !default;
-$kendo-enable-shadows: true !default;
-$kendo-enable-gradients: true !default;
-$kendo-enable-transitions: true !default;
-$kendo-enable-focus-contrast: false !default;
 $kendo-enable-typography: false !default;
 
 $kendo-use-input-button-width: true !default;
 $kendo-use-input-spinner-width: true !default;
 $kendo-use-input-spinner-icon-offset: false !default;
 
-$kendo-auto-bootstrap: true !default;
-
-$kendo-nested-disabled: true !default;
-
-/// Icon size.
-/// @group common
-$kendo-icon-size: 16px !default;
-/// xtra small icon size.
-/// @group common
-$kendo-icon-size-xs: calc( #{$kendo-icon-size} * .75 ) !default;
-/// Small icon size.
-/// @group common
-$kendo-icon-size-sm: calc( #{$kendo-icon-size} * .875 ) !default;
-/// Medium icon size.
-/// @group common
-$kendo-icon-size-md: $kendo-icon-size !default;
-/// Large icon size.
-/// @group common
-$kendo-icon-size-lg: calc( #{$kendo-icon-size} * 1.25 ) !default;
-/// Extra large icon size.
-/// @group common
-$kendo-icon-size-xl: calc( #{$kendo-icon-size} * 1.5 ) !default;
-/// Double extra large icon size.
-/// @group common
-$kendo-icon-size-xxl: calc( #{$kendo-icon-size} * 2 ) !default;
-/// Triple extra large icon size.
-/// @group common
-$kendo-icon-size-xxxl: calc( #{$kendo-icon-size} * 3 ) !default;
-
 $kendo-zindex-popup: 1 !default;
 $kendo-zindex-window: 2 !default;
 
-
-// Color settings
-$kendo-is-dark-theme: false !default;
-
-
 // TODO: refactor
 /// Box shadow of focused items.
 $kendo-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;

diff --git a/packages/default/scss/action-buttons/_index.scss b/packages/default/scss/action-buttons/_index.scss
@@ -1,41 +1,19 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "action-buttons",
-    dependencies: (
-        "button",
-        "icon"
-    )
-);
-
-
 // Dependencies
-@import "../button/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../button/_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-action-buttons--styles() {
-    @include module-render( "action-buttons" ) {
+    @include import-once( "action-buttons" ) {
+        @include core-styles();
+        @include kendo-button--styles();
         @include kendo-action-buttons--layout();
         @include kendo-action-buttons--theme();
         @include kendo-utils--flex-grid--justify-content();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-action-buttons--styles();
-}
diff --git a/packages/default/scss/action-buttons/_layout.scss b/packages/default/scss/action-buttons/_layout.scss
@@ -1,3 +1,5 @@
+@use "./_variables.scss" as *;
+
 @mixin kendo-action-buttons--layout-base() {
 
     // Actions

diff --git a/packages/default/scss/action-buttons/_theme.scss b/packages/default/scss/action-buttons/_theme.scss
@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "./_variables.scss" as *;
+
 @mixin kendo-action-buttons--theme-base() {
 
     // Actions

diff --git a/packages/default/scss/action-buttons/_variables.scss b/packages/default/scss/action-buttons/_variables.scss
@@ -1,3 +1,5 @@
+@use "../core/_index.scss" as *;
+
 // Actions
 $kendo-actions-margin-top: k-spacing(4) !default;
 $kendo-actions-padding-x: k-spacing(2) !default;

diff --git a/packages/default/scss/action-sheet/_index.scss b/packages/default/scss/action-sheet/_index.scss
@@ -1,45 +1,25 @@
-@import "../core/_index.scss";
-@import "../utils/_index.scss";
-
-
-// Module meta
-$_kendo-module-meta: (
-    name: "action-sheet",
-    dependencies: (
-        "icon",
-        "listgroup",
-        "popup"
-    )
-);
-
-
 // Dependencies
-@import "../icons/_index.scss";
-@import "../listgroup/_index.scss";
-@import "../popup/_index.scss";
-
+@use "../core/_index.scss" as *;
+@use "../icons/_index.scss" as *;
+@use "../utils/_index.scss" as *;
+@use "../listgroup/_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-action-sheet--styles() {
-    @include module-render( "action-sheet" ) {
+    @include import-once( "action-sheet" ) {
+        @include core-styles();
+        @include kendo-icon--styles();
+        @include kendo-listgroup--styles();
+        @include kendo-popup--styles();
         @include kendo-action-sheet--layout();
         @include kendo-action-sheet--theme();
         @include kendo-utils--layout--overflow();
         @include kendo-utils--typography--text-align();
     }
 }
-
-@if $kendo-auto-bootstrap {
-    @include kendo-action-sheet--styles();
-}
diff --git a/packages/default/scss/action-sheet/_layout.scss b/packages/default/scss/action-sheet/_layout.scss
@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+
 @mixin kendo-action-sheet--layout-base() {
 
     // Action sheet container
@@ -258,7 +261,7 @@
         .k-actionsheet-content,
         .k-actionsheet-footer {
             margin-inline: auto;
-            width: k-string-unquote("min(100%, 360px)");
+            width: min(100%, 360px);
         }
 
         .k-list-container,

diff --git a/packages/default/scss/action-sheet/_theme.scss b/packages/default/scss/action-sheet/_theme.scss
@@ -1,3 +1,6 @@
+@use "../core/_index.scss" as *;
+@use "./variables.scss" as *;
+
 @mixin kendo-action-sheet--theme-base() {
 
     // Actionsheet

diff --git a/packages/default/scss/action-sheet/_variables.scss b/packages/default/scss/action-sheet/_variables.scss
@@ -1,3 +1,5 @@
+@use "../core/_index.scss" as *;
+
 // Action sheet
 
 $kendo-actionsheet-padding-x: null !default;
@@ -71,6 +73,9 @@ $kendo-actionsheet-item-disabled-border: null !default;
 $kendo-actionsheet-item-disabled-gradient: null !default;
 $kendo-actionsheet-item-disabled-shadow: null !default;
 
+$kendo-actionsheet-item-hover-background: null !default;
+$kendo-actionsheet-item-focus-background: null !default;
+$kendo-actionsheet-item-disabled-opacity: null !default;
 
 // Adaptive Actionsheet
 $kendo-adaptive-actionsheet-font-size: var( --kendo-font-size-lg, inherit ) !default;