docs(Theme): update @carbon/Theme README (#11635)

* docs(Theme): update @carbon/Theme README

* docs(Theme): update inline theming

* Update packages/themes/README.md

Co-authored-by: Josh Black <josh@josh.black>

* Update packages/themes/README.md

Co-authored-by: Josh Black <josh@josh.black>

* Update packages/themes/README.md

Co-authored-by: Josh Black <josh@josh.black>

Co-authored-by: Alessandra Davila <adavila91@gmail.com>
Co-authored-by: Josh Black <josh@josh.black>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

packages/themes/README.md

@@ -35,37 +35,36 @@ If your project is using Sass, you can include this package and the
 corresponding default theme by writing the following in your Sass file:
 
 ```scss
-@import '@carbon/themes/scss/themes';
+@use '@carbon/themes/scss/themes';
 ```
 
 By default, the white theme will be initialized. If you would like to include
-another theme, you can do so by setting the global theme variable and then
-calling our mixin. For example:
+another theme, you can do so by setting the global theme variable in the import.
+For example:
 
 ```scss
-@import '@carbon/themes/scss/themes';
-
-$carbon--theme: $carbon--theme--g10;
-
-// Use the gray 10 theme
-@include carbon--theme();
+@use '@carbon/themes/scss/themes' as *;
+@use '@carbon/themes' with (
+  $theme: $g100
+);
 ```
 
 Inline theming can be done by using the mixin. For example:
 
 ```scss
-@import '@carbon/themes/scss/themes';
+@use '@carbon/themes/scss/themes';
+@use '@carbon/themes/scss/theme';
 
 // Use the default white theme here
 
 .my-dark-theme {
-  @include carbon--theme($carbon--theme--g90) {
+  @include theme.theme(themes.$g90) {
     // Use the dark theme here
   }
 }
 
 .my-darker-theme {
-  @include carbon--theme($carbon--theme--g100) {
+  @include theme.theme(themes.$g100) {
     // Use the darker theme here
   }
 }