feat(material/schematics): add migration to switch to the new theming…

… API (#22304)

Adds an `ng-generate` schematic that will switch over existing stylesheets to the new `@use`-based API. Furthermore, the migration code is set up in a way that should allow us to run it in g3 if necessary.

src/cdk/_index.scss

@@ -1,4 +1,8 @@
-@forward './overlay/overlay' show overlay;
+@forward './overlay/overlay' show overlay, $z-index-overlay-container, $z-index-overlay,
+  $z-index-overlay-backdrop, $dark-backdrop-background;
 @forward './a11y/a11y' show a11y-visually-hidden, high-contrast;
 @forward './text-field/text-field' show text-field-autosize, text-field-autofill,
-  text-field-autofill-color;
+  text-field-autofill-color,
+  // `text-field` is deprecated, but we have to export it
+  // here in order for the theming API schematic to work.
+  text-field;

src/material/schematics/collection.json

@@ -42,6 +42,12 @@
       "factory": "./ng-generate/address-form/index",
       "schema": "./ng-generate/address-form/schema.json",
       "aliases": ["address-form", "material-address-form", "material-addressForm"]
+    },
+    "themingApi": {
+      "description": "Switch the project to the new @use-based Material theming API",
+      "factory": "./ng-generate/theming-api/index",
+      "schema": "./ng-generate/theming-api/schema.json",
+      "aliases": ["theming-api", "sass-api"]
     }
   }
 }