Skip to content

Commit 45399c6

Browse files
amcdnljelbourn
authored andcommitted
feat(schematics): add material scaffolding schematic (#9883)
1 parent 17255e1 commit 45399c6

13 files changed

+503
-15
lines changed

schematics/README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Angular Material Schematics
2+
A collection of Schematics for Angular Material.
3+
4+
## Collection
5+
- [Shell](shell/README.md)

schematics/collection.json

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
11
// This is the root config file where the schematics are defined.
22
{
33
"$schema": "./node_modules/@angular-devkit/schematics/collection-schema.json",
4-
"schematics": {}
4+
"schematics": {
5+
// Adds Angular Material to an application without changing any templates
6+
"materialShell": {
7+
"description": "Create a Material shell",
8+
"factory": "./shell",
9+
"schema": "./shell/schema.json",
10+
"aliases": ["material-shell"]
11+
}
12+
}
513
}

schematics/package-lock.json

Lines changed: 219 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

schematics/shell/README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Material Shell
2+
Adds Angular Material and its depedencies and pre-configures the application.
3+
4+
- Adds Material and CDK to `package.json`
5+
- Adds Material Icons Stylesheet to `index.html`
6+
- Adds Roboto Font to `index.html`
7+
- Ensure `BrowserAnimationsModule` is installed and included in root module
8+
- Adds pre-configured theme to `.angular-cli.json` file OR adds custom theme scaffolding to `styles.scss`
9+
10+
Command: `ng generate material-shell --collection=material-schematics`

schematics/shell/custom-theme.ts

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import {AppConfig} from '../utils/devkit-utils/config';
2+
3+
/**
4+
* Create custom theme for the given application configuration.
5+
*/
6+
export function createCustomTheme(app: AppConfig) {
7+
const name = app.name || 'app';
8+
return `
9+
// Custom Theming for Angular Material
10+
// For more information: https://material.angular.io/guide/theming
11+
@import '~@angular/material/theming';
12+
// Plus imports for other components in your app.
13+
14+
// Include the common styles for Angular Material. We include this here so that you only
15+
// have to load a single css file for Angular Material in your app.
16+
// Be sure that you only ever include this mixin once!
17+
@include mat-core();
18+
19+
// Define the palettes for your theme using the Material Design palettes available in palette.scss
20+
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
21+
// hue. Available color palettes: https://www.google.com/design/spec/style/color.html
22+
$${name}-primary: mat-palette($mat-indigo);
23+
$${name}-accent: mat-palette($mat-pink, A200, A100, A400);
24+
25+
// The warn palette is optional (defaults to red).
26+
$${name}-warn: mat-palette($mat-red);
27+
28+
// Create the theme object (a Sass map containing all of the palettes).
29+
$${name}-theme: mat-light-theme($${name}-primary, $${name}-accent, $${name}-warn);
30+
31+
// Include theme styles for core and each component used in your app.
32+
// Alternatively, you can import and @include the theme mixins for each component
33+
// that you are using.
34+
@include angular-material-theme($${name}-theme);
35+
36+
`;
37+
}

0 commit comments

Comments
 (0)