docs: switch duplicate theme guide to new API (#22908)

Updates the duplicate theme guide to use the new Sass API.

Fixes #22857.

(cherry picked from commit 1ad66f7)

Author: crisbeto

guides/duplicate-theming-styles.md

@@ -9,57 +9,65 @@ Below are examples of patterns that generate duplicative theme styles:
 **Example #1**
 
 ```scss
-$light-theme: mat-light-theme((color: ...));
-$dark-theme: mat-dark-theme((color: ...));
+@use '~@angular/material' as mat;
+
+$light-theme: mat.define-light-theme((color: ...));
+$dark-theme: mat.define-dark-theme((color: ...));
 
 // Generates styles for all systems configured in the theme. In this case, color styles
 // and default density styles are generated. Density is in themes by default.
-@include angular-material-theme($light-theme);
+@include mat.all-component-themes($light-theme);
 
 .dark-theme {
   // Generates styles for all systems configured in the theme. In this case, color styles
   // and the default density styles are generated. **Note** that this is a problem because it
   // means that density styles are generated *again*, even though only the color should change.
-  @include angular-material-theme($dark-theme);
+  @include mat.all-component-themes($dark-theme);
 }
 ```
 
 To fix this, you can use the dedicated mixin for color styles for the `.dark-theme`
-selector. Replace the `angular-material-theme` mixin and include the dark theme using the
-`angular-material-color` mixin. For example:
+selector. Replace the `all-component-themes` mixin and include the dark theme using the
+`all-component-colors` mixin. For example:
 
 ```scss
+@use '~@angular/material' as mat;
+
 ...
-@include angular-material-theme($light-theme);
+@include mat.all-component-themes($light-theme);
 
 .dark-theme {
   // This mixin only generates the color styles now.
-  @include angular-material-color($dark-theme);
+  @include mat.all-component-colors($dark-theme);
 }
 ```
 
-Typography can also be configured via Sass mixin; see `angular-material-typography`.
+Typography can also be configured via Sass mixin; see `all-component-typographies`.
 
 **Example #2**
 
 Theme styles could also be duplicated if individual theme mixins are used. For example:
 
 ```scss
-@include angular-material-theme($my-theme);
+@use '~@angular/material' as mat;
+
+@include mat.all-component-themes($my-theme);
 
 .my-custom-dark-button {
   // This will also generate the default density styles again.
-  @include mat-button-theme($my-theme);
+  @include mat.button-theme($my-theme);
 }
 ```
 
 To avoid this duplication of styles, use the dedicated mixin for the color system and
 extract the configuration for the color system from the theme.
 
 ```scss
+@use '~@angular/material' as mat;
+
 .my-custom-dark-button {
   // This will only generate the color styles for `mat-button`.
-  @include mat-button-color($my-theme);
+  @include mat.button-color($my-theme);
 }
 ```
 
@@ -69,10 +77,12 @@ If your application intentionally duplicates styles, a global Sass variable can
 set to disable duplication warnings from Angular Material. For example:
 
 ```scss
-$mat-theme-ignore-duplication-warnings: true;
+@use '~@angular/material' as mat;
+
+mat.$theme-ignore-duplication-warnings: true;
 
 // Include themes as usual.
-@include angular-material-theme($light-theme);
+@include mat.all-component-themes($light-theme);
 
 ...
 ```