docs(material-experimental/mdc-theming): readmes (#20957)

correct import paths for mdc-component scss
add readme for angular-material-mdc-theme

Author: twerske

src/material-experimental/README.md

@@ -48,12 +48,12 @@ the checkbox:
 ```
 
 5. Add the theme and typography mixins to your Sass. These align with the normal Angular Material
-mixins except that they are suffixed with `-mdc`. There is currently no pre-built CSS option for
-the experimental components. For example, using the checkbox:
+mixins except that they are suffixed with `-mdc`. Some experimental components may not yet
+be included in the pre-built CSS mixin and will need to be explicitly included.
 
 ```scss
   @import '~@angular/material/theming';
-  @import '~@angular/material-experimental/mdc-checkbox';
+  @import '~@angular/material-experimental/mdc-theming/all-theme';
 
   $my-primary: mat-palette($mat-indigo);
   $my-accent:  mat-palette($mat-pink, A200, A100, A400);
@@ -63,7 +63,7 @@ the experimental components. For example, using the checkbox:
       accent: $my-accent
     )
   ));
-  
-  @include mat-mdc-checkbox-theme($my-theme);
-  @include mat-mdc-checkbox-typography();
+
+  @include angular-material-mdc-theme($my-theme);
+  @include angular-material-mdc-typography();
 ```

src/material-experimental/mdc-autocomplete/README.md

@@ -58,7 +58,7 @@ component by following these steps:
 
    ```scss
    @import '~@angular/material/theming';
-   @import '~@angular/material-experimental/mdc-autocomplete';
+   @import '~@angular/material-experimental/mdc-autocomplete/autocomplete-theme';
 
    $my-primary: mat-palette($mat-indigo);
    $my-accent:  mat-palette($mat-pink, A200, A100, A400);

src/material-experimental/mdc-checkbox/README.md

@@ -54,7 +54,7 @@ component by following these steps:
 
    ```scss
    @import '~@angular/material/theming';
-   @import '~@angular/material-experimental/mdc-checkbox';
+   @import '~@angular/material-experimental/mdc-checkbox/checkbox-theme';
 
    $my-primary: mat-palette($mat-indigo);
    $my-accent:  mat-palette($mat-pink, A200, A100, A400);

src/material-experimental/mdc-menu/README.md

@@ -58,7 +58,7 @@ component by following these steps:
 
    ```scss
    @import '~@angular/material/theming';
-   @import '~@angular/material-experimental/mdc-menu';
+   @import '~@angular/material-experimental/mdc-menu/menu-theme';
 
    $my-primary: mat-palette($mat-indigo);
    $my-accent:  mat-palette($mat-pink, A200, A100, A400);

src/material-experimental/mdc-paginator/README.md

@@ -54,7 +54,7 @@ component by following these steps:
 
    ```scss
    @import '~@angular/material/theming';
-   @import '~@angular/material-experimental/mdc-paginator';
+   @import '~@angular/material-experimental/mdc-paginator/paginator-theme';
 
    $my-primary: mat-palette($mat-indigo);
    $my-accent:  mat-palette($mat-pink, A200, A100, A400);

src/material-experimental/mdc-progress-bar/README.md

@@ -55,7 +55,7 @@ component by following these steps:
 
    ```scss
    @import '~@angular/material/theming';
-   @import '~@angular/material-experimental/mdc-progress-bar';
+   @import '~@angular/material-experimental/mdc-progress-bar/progress-bar-theme';
 
    $my-primary: mat-palette($mat-indigo);
    $my-accent:  mat-palette($mat-pink, A200, A100, A400);

src/material-experimental/mdc-progress-spinner/README.md

@@ -55,7 +55,7 @@ component by following these steps:
 
    ```scss
    @import '~@angular/material/theming';
-   @import '~@angular/material-experimental/mdc-progress-spinner';
+   @import '~@angular/material-experimental/mdc-progress-spinner/progress-spinner-theme';
 
    $my-primary: mat-palette($mat-indigo);
    $my-accent:  mat-palette($mat-pink, A200, A100, A400);

src/material-experimental/mdc-select/README.md

@@ -62,7 +62,7 @@ component by following these steps:
 
    ```scss
    @import '~@angular/material/theming';
-   @import '~@angular/material-experimental/mdc-select';
+   @import '~@angular/material-experimental/mdc-select/select-theme';
 
    $my-primary: mat-palette($mat-indigo);
    $my-accent:  mat-palette($mat-pink, A200, A100, A400);

src/material-experimental/mdc-slide-toggle/README.md

@@ -54,7 +54,7 @@ component by following these steps:
 
    ```scss
    @import '~@angular/material/theming';
-   @import '~@angular/material-experimental/mdc-slide-toggle';
+   @import '~@angular/material-experimental/mdc-slide-toggle/slide-toggle-theme';
 
    $my-primary: mat-palette($mat-indigo);
    $my-accent:  mat-palette($mat-pink, A200, A100, A400);

src/material-experimental/mdc-tabs/README.md

@@ -58,7 +58,7 @@ component by following these steps:
 
    ```scss
    @import '~@angular/material/theming';
-   @import '~@angular/material-experimental/mdc-tabs';
+   @import '~@angular/material-experimental/mdc-tabs/tabs-theme';
 
    $my-primary: mat-palette($mat-indigo);
    $my-accent:  mat-palette($mat-pink, A200, A100, A400);