From b69a59ee9a130d3366f4077df728d67d8ea46094 Mon Sep 17 00:00:00 2001
From: Iliyana Dyankova <inikolova@progress.com>
Date: Wed, 30 Oct 2024 15:05:41 +0200
Subject: [PATCH] chore(bootstrap): update readme

---
 packages/bootstrap/README.md | 31 +++++++++++--------------------
 1 file changed, 11 insertions(+), 20 deletions(-)

diff --git a/packages/bootstrap/README.md b/packages/bootstrap/README.md
index ee60b27daab..2796ded681f 100644
--- a/packages/bootstrap/README.md
+++ b/packages/bootstrap/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