feat: add material design

mptr · Jun 25, 2022 · 033bc16 · 033bc16
1 parent 641d540
commit 033bc16
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "@angular/compiler": "14.0.3",
     "@angular/core": "14.0.3",
     "@angular/forms": "14.0.3",
+    "@angular/material": "14.0.3",
     "@angular/platform-browser": "14.0.3",
     "@angular/platform-browser-dynamic": "14.0.3",
     "@angular/router": "14.0.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -3,10 +3,11 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
 	declarations: [AppComponent],
-	imports: [BrowserModule, AppRoutingModule],
+	imports: [BrowserModule, AppRoutingModule, BrowserAnimationsModule],
 	providers: [],
 	bootstrap: [AppComponent],
 })

diff --git a/src/index.html b/src/index.html
@@ -5,8 +5,11 @@
 		<title>blueprint-angular</title>
 		<base href="/" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" />
+		<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet" />
+		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
 	</head>
-	<body>
+	<body class="mat-typography">
 		<app-root></app-root>
 	</body>
 </html>
diff --git a/src/styles.scss b/src/styles.scss
@@ -1,4 +1,49 @@
+// Custom Theming for Angular Material
+// For more information: https://material.angular.io/guide/theming
+@use '@angular/material' as mat;
+// Plus imports for other components in your app.
+
+// 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 palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$blueprint-angular-primary: mat.define-palette(mat.$teal-palette);
+$blueprint-angular-accent: mat.define-palette(mat.$blue-grey-palette);
+
+// The warn palette is optional (defaults to red).
+$blueprint-angular-warn: mat.define-palette(mat.$red-palette);
+
+// Create the theme object. A theme consists of configurations for individual
+// theming systems such as "color" or "typography".
+$blueprint-angular-theme: mat.define-light-theme(
+	(
+		color: (
+			primary: $blueprint-angular-primary,
+			accent: $blueprint-angular-accent,
+			warn: $blueprint-angular-warn,
+		),
+	)
+);
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include mat.all-component-themes($blueprint-angular-theme);
+
 /* You can add global styles to this file, and also import other style files */
 body {
 	margin: 0;
 }
+
+html,
+body {
+	height: 100%;
+}
+body {
+	margin: 0;
+	font-family: Roboto, 'Helvetica Neue', sans-serif;
+}