build: use M3 theme in tests and internal apps

crisbeto · crisbeto · commit a28b5b0ace56 · 2024-03-27T16:52:08.000+01:00
Switches unit tests, the e2e app and SSR app to use the M3 themes by default.
diff --git a/integration/harness-e2e-cli/src/styles.scss b/integration/harness-e2e-cli/src/styles.scss
@@ -1 +1 @@
-@import '@angular/material/prebuilt-themes/indigo-pink.css';
+@import '@angular/material/prebuilt-themes/azure-blue.css';
diff --git a/integration/yarn-pnp-compat/angular.json b/integration/yarn-pnp-compat/angular.json
@@ -27,7 +27,7 @@
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.scss"],
+            "styles": ["@angular/material/prebuilt-themes/azure-blue.css", "src/styles.scss"],
             "scripts": []
           },
           "configurations": {
@@ -90,7 +90,7 @@
             "karmaConfig": "karma.conf.js",
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.scss"],
+            "styles": ["@angular/material/prebuilt-themes/azure-blue.css", "src/styles.scss"],
             "scripts": []
           }
         }
diff --git a/src/e2e-app/BUILD.bazel b/src/e2e-app/BUILD.bazel
@@ -8,7 +8,7 @@ package(default_visibility = ["//visibility:public"])
 devserverIndexHtmlDependencies = [
     "@npm//zone.js",
     "@npm//kagekiri",
-    "//src/material/prebuilt-themes:indigo-pink",
+    "//src/material/prebuilt-themes:azure-blue",
     ":index.html",
     ":theme",
 ]
diff --git a/src/e2e-app/index.html b/src/e2e-app/index.html
@@ -11,7 +11,7 @@
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="theme.css" rel="stylesheet">
 </head>
-<body>
+<body class="mat-typography">
   <e2e-app>Loading...</e2e-app>
   <span class="sibling">I am a sibling!</span>
 
diff --git a/src/e2e-app/theme.scss b/src/e2e-app/theme.scss
@@ -1,23 +1,21 @@
 @use '@angular/material' as mat;
+@use '@angular/material-experimental' as matx;
 
-// Plus imports for other components in your app.
-
-// Disable legacy API compatibility, since e2e-app is fully migrated to theme inspection API.
-mat.$theme-legacy-inspection-api-compatibility: false;
-
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// **Be sure that you only ever include this mixin once!**
 @include mat.core();
 
-// Define the default theme (same as the example above).
-$candy-app-primary: mat.define-palette(mat.$indigo-palette);
-$candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-$candy-app-theme: mat.define-light-theme((
-    color: (primary: $candy-app-primary, accent: $candy-app-accent),
-    typography: mat.define-typography-config(),
-    density: 0
+$theme: matx.define-theme((
+  color: (
+    theme-type: light,
+    primary: matx.$m3-azure-palette,
+    tertiary: matx.$m3-blue-palette,
+  ),
+  density: (
+    scale: 0,
+  )
 ));
 
-// Include the default theme styles.
-@include mat.all-component-themes($candy-app-theme);
+html {
+  @include mat.all-component-themes($theme);
+}
+
+@include mat.typography-hierarchy($theme);
diff --git a/src/material/sidenav/drawer.spec.ts b/src/material/sidenav/drawer.spec.ts
@@ -985,8 +985,10 @@ describe('MatDrawerContainer', () => {
 
   it('should recalculate the margin if a drawer changes size while open in autosize mode', fakeAsync(() => {
     const fixture = TestBed.createComponent(AutosizeDrawer);
-
     fixture.detectChanges();
+
+    // In M3 the drawer has a fixed default width.
+    fixture.nativeElement.querySelector('.mat-drawer').style.width = 'auto';
     fixture.componentInstance.drawer.open();
     fixture.detectChanges();
     tick();
diff --git a/src/universal-app/styles.scss b/src/universal-app/styles.scss
@@ -1,27 +1,24 @@
 @use '@angular/material' as mat;
+@use '@angular/material-experimental' as matx;
 
-// Plus imports for other components in your app.
-
-// Disable legacy API compatibility, since universal-app is fully migrated to theme inspection API.
-mat.$theme-legacy-inspection-api-compatibility: false;
-
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// **Be sure that you only ever include this mixin once!**
 @include mat.core();
 
-// Define the default theme (same as the example above).
-$candy-app-primary: mat.define-palette(mat.$indigo-palette);
-$candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
-$candy-app-theme: mat.define-light-theme((
-  color: (primary: $candy-app-primary, accent: $candy-app-accent),
-  typography: mat.define-typography-config(),
-  density: 0
+$theme: matx.define-theme((
+  color: (
+    theme-type: light,
+    primary: matx.$m3-azure-palette,
+    tertiary: matx.$m3-blue-palette,
+  ),
+  density: (
+    scale: 0,
+  )
 ));
 
-// Include the default theme styles.
-@include mat.all-component-themes($candy-app-theme);
-@include mat.typography-hierarchy($candy-app-theme);
+html {
+  @include mat.all-component-themes($theme);
+}
+
+@include mat.typography-hierarchy($theme);
 
 body.test-automated {
   // Make sure bottom sheet doesn't obscure components.
@@ -38,4 +35,3 @@ body.test-automated {
     background: lime;
   }
 }
-
diff --git a/test/karma.conf.js b/test/karma.conf.js
@@ -60,7 +60,7 @@ module.exports = config => {
       // Include a Material theme in the test suite. Also include the MDC theme as
       // karma runs tests for the MDC prototype components as well.
       {
-        pattern: 'src/material/core/theming/prebuilt/indigo-pink.css',
+        pattern: 'src/material/core/theming/prebuilt/azure-blue.css',
         included: true,
         watched: true,
       },
diff --git a/tools/defaults.bzl b/tools/defaults.bzl
@@ -378,7 +378,7 @@ def ng_web_test_suite(deps = [], static_css = [], exclude_init_script = False, *
     # reduces the amount of setup that is needed to create a test suite Bazel target. Note that the
     # prebuilt theme will be also added to CDK test suites but shouldn't affect anything.
     static_css = static_css + [
-        "//src/material/prebuilt-themes:indigo-pink",
+        "//src/material/prebuilt-themes:azure-blue",
     ]
 
     # Workaround for https://github.com/bazelbuild/rules_typescript/issues/301

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-@import '@angular/material/prebuilt-themes/indigo-pink.css';`
	`1`	`+@import '@angular/material/prebuilt-themes/azure-blue.css';`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ package(default_visibility = ["//visibility:public"])`
`8`	`8`	`devserverIndexHtmlDependencies = [`
`9`	`9`	`"@npm//zone.js",`
`10`	`10`	`"@npm//kagekiri",`
`11`		`- "//src/material/prebuilt-themes:indigo-pink",`
	`11`	`+ "//src/material/prebuilt-themes:azure-blue",`
`12`	`12`	`":index.html",`
`13`	`13`	`":theme",`
`14`	`14`	`]`
Original file line number	Diff line number	Diff line change
`@@ -60,7 +60,7 @@ module.exports = config => {`
`60`	`60`	`// Include a Material theme in the test suite. Also include the MDC theme as`
`61`	`61`	`// karma runs tests for the MDC prototype components as well.`
`62`	`62`	`{`
`63`		`- pattern: 'src/material/core/theming/prebuilt/indigo-pink.css',`
	`63`	`+ pattern: 'src/material/core/theming/prebuilt/azure-blue.css',`
`64`	`64`	`included: true,`
`65`	`65`	`watched: true,`
`66`	`66`	`},`
Original file line number	Diff line number	Diff line change
`@@ -378,7 +378,7 @@ def ng_web_test_suite(deps = [], static_css = [], exclude_init_script = False, *`
`378`	`378`	`# reduces the amount of setup that is needed to create a test suite Bazel target. Note that the`
`379`	`379`	`# prebuilt theme will be also added to CDK test suites but shouldn't affect anything.`
`380`	`380`	`static_css = static_css + [`
`381`		`- "//src/material/prebuilt-themes:indigo-pink",`
	`381`	`+ "//src/material/prebuilt-themes:azure-blue",`
`382`	`382`	`]`
`383`	`383`
`384`	`384`	`# Workaround for https://github.com/bazelbuild/rules_typescript/issues/301`