diff --git a/package-lock.json b/package-lock.json index 9ba2a08..0dc14bc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -437,18 +437,18 @@ } }, "@angular/cdk": { - "version": "11.0.2", - "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.0.2.tgz", - "integrity": "sha512-hdZ9UJVGgCFhdOuB4RPS1Ku45VSG/WfRjbyxu/7teYyFKqAvcd3vawkeQfZf+lExmFaeW43+5hnpu/JIlGTrSA==", + "version": "12.2.13", + "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.2.13.tgz", + "integrity": "sha512-zSKRhECyFqhingIeyRInIyTvYErt4gWo+x5DQr0b7YLUbU8DZSwWnG4w76Ke2s4U8T7ry1jpJBHoX/e8YBpGMg==", "requires": { "parse5": "^5.0.0", - "tslib": "^2.0.0" + "tslib": "^2.2.0" }, "dependencies": { "tslib": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz", - "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==" + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" } } }, @@ -813,17 +813,17 @@ } }, "@angular/material": { - "version": "11.0.2", - "resolved": "https://registry.npmjs.org/@angular/material/-/material-11.0.2.tgz", - "integrity": "sha512-qmLxrIcbbowXrE0+ZiGA/RXfaZTtVKtgLchn7GvI+R5DZ79g5IicTPxayzQavLJSTESX19JTjlByRSGiXJstgA==", + "version": "12.2.13", + "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.2.13.tgz", + "integrity": "sha512-6g2GyN4qp2D+DqY2AwrQuPB3cd9gybvQVXvNRbTPXEulHr+LgGei00ySdFHFp6RvdGSMZ4i3LM1Fq3VkFxhCfQ==", "requires": { - "tslib": "^2.0.0" + "tslib": "^2.2.0" }, "dependencies": { "tslib": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz", - "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==" + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz", + "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==" } } }, diff --git a/package.json b/package.json index 19544d6..cc94736 100644 --- a/package.json +++ b/package.json @@ -22,13 +22,13 @@ "dependencies": { "@angular-devkit/core": "^12.2.17", "@angular/animations": "^12.2.16", - "@angular/cdk": "^11.0.2", + "@angular/cdk": "^12.2.13", "@angular/common": "^12.2.16", "@angular/compiler": "^12.2.16", "@angular/core": "^12.2.16", "@angular/forms": "^12.2.16", "@angular/localize": "^12.2.16", - "@angular/material": "^11.0.2", + "@angular/material": "^12.2.13", "@angular/platform-browser": "^12.2.16", "@angular/platform-browser-dynamic": "^12.2.16", "@angular/router": "^12.2.16", diff --git a/src/styles.scss b/src/styles.scss index be060c8..b847a8b 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,4 +1,5 @@ /* You can add global styles to this file, and also import other style files */ +@use '~@angular/material' as mat; @import '~material-icons/iconfont/material-icons.css'; @@ -16,30 +17,30 @@ body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } // Plus imports for other components in your app. /*// Typography -$custom-typography: mat-typography-config( +$custom-typography: mat.define-typography-config( $font-family: Raleway, - $headline: mat-typography-level(24px, 48px, 400), - $body-1: mat-typography-level(16px, 24px, 400) + $headline: mat.define-typography-level(24px, 48px, 400), + $body-1: mat.define-typography-level(16px, 24px, 400) ); -@include angular-material-typography($custom-typography); +@include mat.all-component-typographies($custom-typography); */ // Default colors -$my-app-primary: mat-palette($mat-light-blue, 700, 100, 800); -$my-app-accent: mat-palette($mat-blue, 700, 100, 800); -$my-app-warn: mat-palette($mat-red, 700, 100, 800); +$my-app-primary: mat.define-palette(mat.$light-blue-palette, 700, 100, 800); +$my-app-accent: mat.define-palette(mat.$blue-palette, 700, 100, 800); +$my-app-warn: mat.define-palette(mat.$red-palette, 700, 100, 800); -$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn); -@include angular-material-theme($my-app-theme); +$my-app-theme: mat.define-light-theme($my-app-primary, $my-app-accent, $my-app-warn); +@include mat.all-component-themes($my-app-theme); // Dark theme -$dark-primary: mat-palette($mat-light-blue, 700, 100, 800); -$dark-accent: mat-palette($mat-blue); -$dark-warn: mat-palette($mat-deep-orange); +$dark-primary: mat.define-palette(mat.$light-blue-palette, 700, 100, 800); +$dark-accent: mat.define-palette(mat.$blue-palette); +$dark-warn: mat.define-palette(mat.$deep-orange-palette); -$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn); +$dark-theme: mat.define-dark-theme($dark-primary, $dark-accent, $dark-warn); .dark-theme { - @include angular-material-theme($dark-theme); + @include mat.all-component-themes($dark-theme); } .mat-stroked-button, .mat-raised-button, .mat-flat-button { @@ -47,14 +48,14 @@ $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn); } // Light theme -$light-primary: mat-palette($mat-grey, 200, 500, 300); -$light-accent: mat-palette($mat-brown, 200); -$light-warn: mat-palette($mat-deep-orange, 200); +$light-primary: mat.define-palette(mat.$grey-palette, 200, 500, 300); +$light-accent: mat.define-palette(mat.$brown-palette, 200); +$light-warn: mat.define-palette(mat.$deep-orange-palette, 200); -$light-theme: mat-light-theme($light-primary, $light-accent, $light-warn); +$light-theme: mat.define-light-theme($light-primary, $light-accent, $light-warn); .light-theme { - @include angular-material-theme($light-theme); + @include mat.all-component-themes($light-theme); } .no-outline { @@ -65,7 +66,7 @@ $light-theme: mat-light-theme($light-primary, $light-accent, $light-warn); // 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(); +@include mat.core(); // @import '../node_modules/@angular/material/theming';