refactor(material/schematics): support extra variables in themingApi migration (#22741)

Adding support for extra variables to handle some Google-internal variables that need to be migrated as well.

Author: jelbourn

src/material/schematics/ng-update/migrations/theming-api-v12/migration.ts

@@ -26,6 +26,7 @@ interface DetectImportResult {
 interface ExtraSymbols {
   mixins?: Record<string, string>;
   functions?: Record<string, string>;
+  variables?: Record<string, string>;
 }
 
 /**
@@ -123,19 +124,20 @@ function migrateMaterialSymbols(content: string, importPath: string,
                                 extraMaterialSymbols: ExtraSymbols = {}): string {
   const initialContent = content;
   const namespace = 'mat';
-  const mixinsToUpdate = {...materialMixins, ...extraMaterialSymbols.mixins};
-  const functionsToUpdate = {...materialFunctions, ...extraMaterialSymbols.functions};
 
   // Migrate the mixins.
+  const mixinsToUpdate = {...materialMixins, ...extraMaterialSymbols.mixins};
   content = renameSymbols(content, mixinsToUpdate, detectedImports.namespaces, mixinKeyFormatter,
     getMixinValueFormatter(namespace));
 
   // Migrate the functions.
+  const functionsToUpdate = {...materialFunctions, ...extraMaterialSymbols.functions};
   content = renameSymbols(content, functionsToUpdate, detectedImports.namespaces,
     functionKeyFormatter, getFunctionValueFormatter(namespace));
 
   // Migrate the variables.
-  content = renameSymbols(content, materialVariables, detectedImports.namespaces,
+  const variablesToUpdate = {...materialVariables, ...extraMaterialSymbols.variables};
+  content = renameSymbols(content, variablesToUpdate, detectedImports.namespaces,
     variableKeyFormatter, getVariableValueFormatter(namespace));
 
   if (content !== initialContent) {

src/material/schematics/ng-update/test-cases/v12/misc/theming-api-v12.spec.ts

@@ -698,6 +698,7 @@ describe('v12 theming API migration', () => {
       `@import '~@angular/material/theming';`,
       `$something: mat-mdc-typography-config();`,
       `@include mat-mdc-button-theme();`,
+      `$another: $mat-vermillion`
     ].join('\n');
 
     const migratedContent = migrateFileContent(
@@ -708,12 +709,14 @@ describe('v12 theming API migration', () => {
         '~@angular/cdk', {
           mixins: {'mat-mdc-button-theme': 'mdc-button-theme'},
           functions: {'mat-mdc-typography-config': 'mdc-typography-config'},
+          variables: {'mat-vermillion': 'vermillion-palette'},
         });
 
     expect(migratedContent).toBe([
       `@use '~@angular/material' as mat;`,
       `$something: mat.mdc-typography-config();`,
       `@include mat.mdc-button-theme();`,
+      `$another: mat.$vermillion-palette`,
     ].join('\n'));
   });