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

package/README.md

@@ -31,7 +31,7 @@ and then import it in your project styles:
 
 ```scss
 // Import the entire theme
-@import "~@progress/kendo-theme-bootstrap/dist/all.scss";
+@use "@progress/kendo-theme-bootstrap/scss/all.scss" as *;
 ```
 
 For more information on how to implement the Bootstrap theme in your project, refer to the following articles:
@@ -46,12 +46,14 @@ You can customize Kendo UI Bootstrap Theme both in terms of what gets compiled a
 
 ### 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-bootstrap/scss/panelbar/_index.scss";
-@import "~@progress/kendo-theme-bootstrap/scss/grid/_index.scss";
+// Import only Button and Grid styles
+@use "@progress/kendo-theme-bootstrap/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-bootstrap/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-bootstrap/scss/all.scss" as * with (
+    $kendo-button-bg: #ff0000,
+    $kendo-font-size: 20px
+);
 ```
 
 ## Integrating with third party frameworks