tykayn
/
funky-framadate-front
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

upgrade ng 11 to 12: update cdk, material package

This commit is contained in:
bmartins 2023-03-15 14:23:00 +01:00
parent 7aec3068e2
commit 112645af2f
7 changed files with 36 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -37,13 +37,13 @@
"private": false,
"dependencies": {
"@angular/animations": "^12.2.17",
"@angular/cdk": "^11.2.13",
"@angular/cdk": "^12.2.13",
"@angular/common": "^12.2.17",
"@angular/compiler": "^12.2.17",
"@angular/core": "^12.2.17",
"@angular/forms": "^12.2.17",
"@angular/localize": "^12.2.17",
"@angular/material": "^11.2.13",
"@angular/material": "^12.2.13",
"@angular/platform-browser": "^12.2.17",
"@angular/platform-browser-dynamic": "^12.2.17",
"@angular/router": "^12.2.17",

10
src/styles.scss
View File

@ -1,12 +1,12 @@
// Custom Theming for Angular Material
@use '~@angular/material' as mat;
// For more information: https://material.angular.io/guide/theming
@import '~@angular/material/theming';
// 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();
@include mat.core();
// import your custom themes
@import 'theme-light.scss';
@ -14,13 +14,13 @@
@import 'theme-contrast.scss';
.theme-light {
@include angular-material-theme($theme-light);
@include mat.all-component-themes($theme-light);
}
.theme-dark {
@include angular-material-theme($theme-dark);
@include mat.all-component-themes($theme-dark);
}
.theme-contrast {
@include angular-material-theme($theme-contrast);
@include mat.all-component-themes($theme-contrast);
}
/*

4
src/styles/themes/_high-contrast.scss
View File

@ -1,6 +1,4 @@
///**
//aimed for visual impaired people
// */
//__<<ngThemingMigrationEscapedComment0>>__
//$main-theme-color: #00003b;
//#big_container {
// &.theme-high-contrast {

11
src/theme-contrast.scss
View File

@ -1,16 +1,17 @@
// Define the palettes for your theme using the Material Design palettes available in palette.scss
@use '~@angular/material' as mat;
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$theme-contrast-primary: mat-palette($mat-indigo);
$theme-contrast-accent: mat-palette($mat-pink, A200, A100, A400);
$theme-contrast-primary: mat.define-palette(mat.$indigo-palette);
$theme-contrast-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
// The warn palette is optional (defaults to red).
$theme-contrast-warn: mat-palette($mat-red);
$theme-contrast-warn: mat.define-palette(mat.$red-palette);
// Create the theme object (a Sass map containing all of the palettes).
$theme-contrast: mat-light-theme($theme-contrast-primary, $theme-contrast-accent, $theme-contrast-warn);
$theme-contrast: mat.define-light-theme($theme-contrast-primary, $theme-contrast-accent, $theme-contrast-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 angular-material-theme($theme-contrast);
@include mat.all-component-themes($theme-contrast);

11
src/theme-dark.scss
View File

@ -1,16 +1,17 @@
// Define the palettes for your theme using the Material Design palettes available in palette.scss
@use '~@angular/material' as mat;
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$theme-dark-primary: mat-palette($mat-indigo);
$theme-dark-accent: mat-palette($mat-pink, A200, A100, A400);
$theme-dark-primary: mat.define-palette(mat.$indigo-palette);
$theme-dark-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
// The warn palette is optional (defaults to red).
$theme-dark-warn: mat-palette($mat-red);
$theme-dark-warn: mat.define-palette(mat.$red-palette);
// Create the theme object (a Sass map containing all of the palettes).
$theme-dark: mat-dark-theme($theme-dark-primary, $theme-dark-accent, $theme-dark-warn);
$theme-dark: mat.define-dark-theme($theme-dark-primary, $theme-dark-accent, $theme-dark-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 angular-material-theme($theme-dark);
@include mat.all-component-themes($theme-dark);

11
src/theme-light.scss
View File

@ -1,16 +1,17 @@
// Define the palettes for your theme using the Material Design palettes available in palette.scss
@use '~@angular/material' as mat;
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$theme-light-primary: mat-palette($mat-indigo);
$theme-light-accent: mat-palette($mat-pink, A200, A100, A400);
$theme-light-primary: mat.define-palette(mat.$indigo-palette);
$theme-light-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
// The warn palette is optional (defaults to red).
$theme-light-warn: mat-palette($mat-red);
$theme-light-warn: mat.define-palette(mat.$red-palette);
// Create the theme object (a Sass map containing all of the palettes).
$theme-light: mat-light-theme($theme-light-primary, $theme-light-accent, $theme-light-warn);
$theme-light: mat.define-light-theme($theme-light-primary, $theme-light-accent, $theme-light-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 angular-material-theme($theme-light);
@include mat.all-component-themes($theme-light);

20
yarn.lock
View File

@ -205,12 +205,12 @@
dependencies:
tslib "^2.2.0"
"@angular/cdk@^11.2.13":
version "11.2.13"
resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-11.2.13.tgz#d54c9187e3b8cf3f8ba190b1edddc08ed2b740de"
integrity sha512-FkE4iCwoLbQxLDUOjV1I7M/6hmpyb7erAjEdWgch7nGRNxF1hqX5Bqf1lvLFKPNCbx5NRI5K7YVAdIUQUR8vug==
"@angular/cdk@^12.2.13":
version "12.2.13"
resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-12.2.13.tgz#1fdbe814adfd6b4ff906c6d9c4c6df07b83f09d8"
integrity sha512-zSKRhECyFqhingIeyRInIyTvYErt4gWo+x5DQr0b7YLUbU8DZSwWnG4w76Ke2s4U8T7ry1jpJBHoX/e8YBpGMg==
dependencies:
tslib "^2.0.0"
tslib "^2.2.0"
optionalDependencies:
parse5 "^5.0.0"
@ -301,12 +301,12 @@
glob "7.1.7"
yargs "^17.0.0"
"@angular/material@^11.2.13":
version "11.2.13"
resolved "https://registry.yarnpkg.com/@angular/material/-/material-11.2.13.tgz#99960316d3ce58aac7497d7bb8b0c05468f502b9"
integrity sha512-FqFdGSkOtqsmeLyTSousodDGUy2NqbtxCIKv2rwbsIRwHNKB0KpR/UQhA2gMRuGa5hxhMJ0DW0Tf9neMRuLCTg==
"@angular/material@^12.2.13":
version "12.2.13"
resolved "https://registry.yarnpkg.com/@angular/material/-/material-12.2.13.tgz#7f92f95002a2abaa8bb115ca8f0809bdc3f7d3fc"
integrity sha512-6g2GyN4qp2D+DqY2AwrQuPB3cd9gybvQVXvNRbTPXEulHr+LgGei00ySdFHFp6RvdGSMZ4i3LM1Fq3VkFxhCfQ==
dependencies:
tslib "^2.0.0"
tslib "^2.2.0"
"@angular/platform-browser-dynamic@^12.2.17":
version "12.2.17"