Update material

upgradeTo12
VANNEAU 3 years ago
parent 8d153cf4c1
commit 86c6ae0734
  1. 28
      package-lock.json
  2. 4
      package.json
  3. 33
      src/app/app.theme.scss
  4. 4
      src/styles.scss

28
package-lock.json generated

@ -425,12 +425,12 @@
}
},
"@angular/cdk": {
"version": "11.1.2",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.1.2.tgz",
"integrity": "sha512-RnKvMWAIcWbWoUdBfAoOs4pQl6t5O+1OuPlBNK5aL2FYqoLv5U0fP88Rf7OhjPlD0ASsPGLG45t+dA5sUVZ46Q==",
"version": "12.2.12",
"resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.2.12.tgz",
"integrity": "sha512-AK+74JZP95BDj9OJ1YUaRqPXkgs+oadTk7z+8omu1RcvDoUivouKxgODCQX5jI7rZeQIlnV49hEgBne07hYk4A==",
"requires": {
"parse5": "^5.0.0",
"tslib": "^2.0.0"
"tslib": "^2.2.0"
},
"dependencies": {
"parse5": {
@ -438,6 +438,11 @@
"resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
"integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
"optional": true
},
"tslib": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
"integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
}
}
},
@ -680,11 +685,18 @@
}
},
"@angular/material": {
"version": "11.1.2",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-11.1.2.tgz",
"integrity": "sha512-Fyjk6LUrJ+mJmRMrnM2L4Q9pijuhLa8q1G50mUYa81OJPWnhMRlzoM2dDHpS/ibIARpBc3QA8PmF3hUgyLxgMg==",
"version": "12.2.12",
"resolved": "https://registry.npmjs.org/@angular/material/-/material-12.2.12.tgz",
"integrity": "sha512-Fgpffplmd3KfoK9Ms34jYXRaqFYLbgXdGl250Acg7fV16LN1KTOyYm2Qs+FQuqyhuXfhePPt6Srh7VcGTLT4+g==",
"requires": {
"tslib": "^2.0.0"
"tslib": "^2.2.0"
},
"dependencies": {
"tslib": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
"integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
}
}
},
"@angular/platform-browser": {

@ -14,12 +14,12 @@
"dependencies": {
"@angular-material-components/datetime-picker": "^5.0.3",
"@angular/animations": "~12.2.12",
"@angular/cdk": "^11.1.2",
"@angular/cdk": "^12.2.12",
"@angular/common": "~12.2.12",
"@angular/compiler": "~12.2.12",
"@angular/core": "~12.2.12",
"@angular/forms": "~12.2.12",
"@angular/material": "^11.1.2",
"@angular/material": "^12.2.12",
"@angular/platform-browser": "~12.2.12",
"@angular/platform-browser-dynamic": "~12.2.12",
"@angular/router": "~12.2.12",

@ -1,4 +1,5 @@
// -----------------------------------------------------------------------------------------------------
@use '~@angular/material' as mat;
// @ Custom color maps
// -----------------------------------------------------------------------------------------------------
$navy-app-theme: (
@ -72,19 +73,19 @@ $apside-primary-app-theme: (
// -----------------------------------------------------------------------------------------------------
// Define the primary, accent and warn palettes
$default-primary-palette: mat-palette($navy-app-theme);
$default-accent-palette: mat-palette($mat-light-blue, 600, 400, 700);
$default-warn-palette: mat-palette($mat-red);
$default-primary-palette: mat.define-palette($navy-app-theme);
$default-accent-palette: mat.define-palette(mat.$light-blue-palette, 600, 400, 700);
$default-warn-palette: mat.define-palette(mat.$red-palette);
// Create the Material theme object
$theme: mat-light-theme($default-primary-palette, $default-accent-palette, $default-warn-palette);
$theme: mat.define-light-theme($default-primary-palette, $default-accent-palette, $default-warn-palette);
// Add ".theme-default" class to the body to activate this theme.
// Class name must start with "theme-" !!!
.theme-default {
// Create an Angular Material theme from the $theme map
@include angular-material-theme($theme);
@include mat.all-component-themes($theme);
}
// -----------------------------------------------------------------------------------------------------
@ -92,19 +93,19 @@ $theme: mat-light-theme($default-primary-palette, $default-accent-palette, $defa
// -----------------------------------------------------------------------------------------------------
// Define the primary, accent and warn palettes
$blue-gray-dark-theme-primary-palette: mat-palette($navy-app-theme);
$blue-gray-dark-theme-accent-palette: mat-palette($mat-blue-gray);
$blue-gray-dark-theme-warn-palette: mat-palette($mat-red);
$blue-gray-dark-theme-primary-palette: mat.define-palette($navy-app-theme);
$blue-gray-dark-theme-accent-palette: mat.define-palette(mat.$blue-gray-palette);
$blue-gray-dark-theme-warn-palette: mat.define-palette(mat.$red-palette);
// Create the Material theme object
$blue-gray-dark-theme: mat-dark-theme($blue-gray-dark-theme-primary-palette, $blue-gray-dark-theme-accent-palette, $blue-gray-dark-theme-warn-palette);
$blue-gray-dark-theme: mat.define-dark-theme($blue-gray-dark-theme-primary-palette, $blue-gray-dark-theme-accent-palette, $blue-gray-dark-theme-warn-palette);
// Add ".theme-blue-gray-dark" class to the body to activate this theme.
// Class name must start with "theme-" !!!
.theme-blue-gray-dark {
// Generate the Angular Material theme
@include angular-material-theme($blue-gray-dark-theme);
@include mat.all-component-themes($blue-gray-dark-theme);
}
@ -113,13 +114,13 @@ $blue-gray-dark-theme: mat-dark-theme($blue-gray-dark-theme-primary-palette, $bl
// -----------------------------------------------------------------------------------------------------
// Angular Material typography
$typography: mat-typography-config(
$typography: mat.define-typography-config(
$font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
$title: mat-typography-level(20px, 32px, 600),
$body-2: mat-typography-level(14px, 24px, 600),
$button: mat-typography-level(14px, 14px, 600),
$input: mat-typography-level(16px, 1.125, 400) // line-height must be unitless !!!
$title: mat.define-typography-level(20px, 32px, 600),
$body-2: mat.define-typography-level(14px, 24px, 600),
$button: mat.define-typography-level(14px, 14px, 600),
$input: mat.define-typography-level(16px, 1.125, 400) // line-height must be unitless !!!
);
// Setup the typography
@include angular-material-typography($typography);
@include mat.all-component-typographies($typography);

@ -1,5 +1,5 @@
@import '~@angular/material/theming';
@include mat-core();
@use '~@angular/material' as mat;
@include mat.core();
// Import app.theme.scss
@import "app/app.theme";

Loading…
Cancel
Save