Update the Stackblitz template to v18

Updates the Stackblitz template to the latest version. Also reduces the number of files we need to generate.

Author: crisbeto

material.angular.io/material.angular.io/material.angular.io/material.angular.io/material.angular.io/src/app/shared/stack-blitz/stack-blitz-writer.ts

@@ -44,7 +44,6 @@ export const TEMPLATE_FILES = [
   'src/main.ts',
   'src/styles.scss',
   'src/test.ts',
-  'src/theme.scss',
 ];
 
 const PROJECT_TAGS = ['angular', 'material', 'cdk', 'web', 'example'];

material.angular.io/material.angular.io/material.angular.io/material.angular.io/material.angular.io/src/assets/stack-blitz/angular.json

@@ -33,7 +33,6 @@
               "src/assets"
             ],
             "styles": [
-              "src/theme.scss",
               "src/styles.scss"
             ],
             "stylePreprocessorOptions": {
@@ -109,8 +108,7 @@
               ]
             },
             "styles": [
-              "src/styles.scss",
-              "src/theme.scss"
+              "src/styles.scss"
             ],
             "scripts": []
           }

material.angular.io/material.angular.io/material.angular.io/material.angular.io/material.angular.io/src/assets/stack-blitz/package.json

@@ -10,28 +10,28 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^17.3.0",
+    "@angular/animations": "^18.0.1",
     "@angular/cdk": "${version}",
-    "@angular/common": "^17.3.0",
-    "@angular/compiler": "^17.3.0",
-    "@angular/core": "^17.3.0",
-    "@angular/forms": "^17.3.0",
+    "@angular/common": "^18.0.1",
+    "@angular/compiler": "^18.0.1",
+    "@angular/core": "^18.0.1",
+    "@angular/forms": "^18.0.1",
     "@angular/material": "${version}",
     "@angular/material-experimental": "${version}",
     "@angular/material-moment-adapter": "${version}",
-    "@angular/platform-browser": "^17.3.0",
-    "@angular/platform-browser-dynamic": "^17.3.0",
-    "@angular/router": "^17.3.0",
-    "@angular/localize": "^17.3.0",
+    "@angular/platform-browser": "^18.0.1",
+    "@angular/platform-browser-dynamic": "^18.0.1",
+    "@angular/router": "^18.0.1",
+    "@angular/localize": "^18.0.1",
     "moment": "^2.18.1",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.3.0",
-    "@angular/cli": "^17.3.0",
-    "@angular/compiler-cli": "^17.3.0",
+    "@angular-devkit/build-angular": "^18.0.1",
+    "@angular/cli": "^18.0.1",
+    "@angular/compiler-cli": "^18.0.1",
     "@types/jasmine": "~3.10.0",
     "@types/node": "^12.11.1",
     "jasmine-core": "~3.10.0",

material.angular.io/material.angular.io/material.angular.io/material.angular.io/material.angular.io/src/assets/stack-blitz/src/styles.scss

@@ -1,9 +1,24 @@
+@use '@angular/material' as mat;
+
+$theme: mat.define-theme((
+  color: (
+    theme-type: light,
+    primary: mat.$azure-palette,
+    tertiary: mat.$blue-palette,
+  )
+));
+
 body {
+  @include mat.all-component-themes($theme);
   font-family: Roboto, "Helvetica Neue", sans-serif;
   margin: 0;
   padding: 30px;
+  height: 100%;
 }
 
-html, body {
+html {
   height: 100%;
 }
+
+@include mat.core();
+@include mat.color-variants-backwards-compatibility($theme);