ColorRecipesExplorer
/
Frontend
1
0
Fork 0
Code Issues 1 Pull Requests Projects 1 Releases 1 Wiki Activity

Update to Angular Material 12

This commit is contained in:
FyloZ 2021-12-01 23:12:23 -05:00
parent 75f356cc5a
commit f37363e457
Signed by: william
GPG Key ID: 835378AE9AF4AE97
3 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -12,12 +12,12 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"@angular/animations": "~12.2.14", "@angular/animations": "~12.2.14",
"@angular/cdk": "^11.2.11", "@angular/cdk": "^12.2.13",
"@angular/common": "~12.2.14", "@angular/common": "~12.2.14",
"@angular/compiler": "~12.2.14", "@angular/compiler": "~12.2.14",
"@angular/core": "~12.2.14", "@angular/core": "~12.2.14",
"@angular/forms": "~12.2.14", "@angular/forms": "~12.2.14",
"@angular/material": "^11.2.9", "@angular/material": "^12.2.13",
"@angular/platform-browser": "~12.2.14", "@angular/platform-browser": "~12.2.14",
"@angular/platform-browser-dynamic": "~12.2.14", "@angular/platform-browser-dynamic": "~12.2.14",
"@angular/router": "~12.2.14", "@angular/router": "~12.2.14",

3
src/_variables.scss
View File

@ -18,3 +18,6 @@ $text-color-primary: white;
$color-accent: map-get($theme-accent, 500); $color-accent: map-get($theme-accent, 500);
$color-warn: map-get($theme-error, 500); $color-warn: map-get($theme-error, 500);
$light-primary-text: white;
$dark-secondary-text: black;

18
src/custom-theme.scss
View File

@ -1,21 +1,21 @@
// Custom Theming for Angular Material // Custom Theming for Angular Material
@use '~@angular/material' as mat;
// For more information: https://material.angular.io/guide/theming // For more information: https://material.angular.io/guide/theming
@import '~@angular/material/theming';
// Plus imports for other components in your app. // Plus imports for other components in your app.
$custom-typography: mat-typography-config( $custom-typography: mat.define-typography-config(
$font-family: "Open Sans" $font-family: "Open Sans"
); );
// Include the common styles for Angular Material. We include this here so that you only // 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. // have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once! // Be sure that you only ever include this mixin once!
@include mat-core($custom-typography); @include mat.core($custom-typography);
// Define the palettes for your theme using the Material Design palettes available in palette.sass // Define the palettes for your theme using the Material Design palettes available in palette.sass
// (imported above). For each palette, you can optionally specify a default, lighter, and darker // (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/ // hue. Available color palettes: https://material.io/design/color/
$theme-primary: mat-palette(( $theme-primary: mat.define-palette((
50 : #e0e0e0, 50 : #e0e0e0,
100 : #b3b3b3, 100 : #b3b3b3,
200 : #808080, 200 : #808080,
@ -46,7 +46,7 @@ $theme-primary: mat-palette((
A400 : #ffffff, A400 : #ffffff,
A700 : #ffffff, A700 : #ffffff,
))); )));
$theme-accent: mat-palette(( $theme-accent: mat.define-palette((
50 : #edf9e0, 50 : #edf9e0,
100 : #d1f0b3, 100 : #d1f0b3,
200 : #b3e680, 200 : #b3e680,
@ -78,7 +78,7 @@ $theme-accent: mat-palette((
A700 : #000000, A700 : #000000,
) )
)); ));
$theme-warning: mat-palette(( $theme-warning: mat.define-palette((
50 : #fff8e4, 50 : #fff8e4,
100 : #feefbd, 100 : #feefbd,
200 : #fee491, 200 : #fee491,
@ -112,15 +112,15 @@ $theme-warning: mat-palette((
)); ));
// The warn palette is optional (defaults to red). // The warn palette is optional (defaults to red).
$theme-error: mat-palette($mat-red); $theme-error: mat.define-palette(mat.$red-palette);
// Create the theme object (a Sass map containing all of the palettes). // Create the theme object (a Sass map containing all of the palettes).
$color-recipes-explorer-frontend-theme: mat-light-theme($theme-primary, $theme-accent, $theme-error); $color-recipes-explorer-frontend-theme: mat.define-light-theme($theme-primary, $theme-accent, $theme-error);
// Include theme styles for core and each component used in your app. // Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component // Alternatively, you can import and @include the theme mixins for each component
// that you are using. // that you are using.
@include angular-material-theme($color-recipes-explorer-frontend-theme); @include mat.all-component-themes($color-recipes-explorer-frontend-theme);
html, body { html, body {