diff --git a/goofy-client/apps/goofy/src/styles/abstracts/_variables.scss b/goofy-client/apps/goofy/src/styles/abstracts/_variables.scss
index 63f4c60043717918325daa5e5730bedf55019297..2616e3aa4c757b2aef99f0908ec4529d97186d73 100644
--- a/goofy-client/apps/goofy/src/styles/abstracts/_variables.scss
+++ b/goofy-client/apps/goofy/src/styles/abstracts/_variables.scss
@@ -1,4 +1,4 @@
-@import "~@angular/material/theming";
+@use '~@angular/material' as mat;
$grey: #777;
@@ -9,11 +9,11 @@ $shadow-bottom: inset 0 -1px 0 rgba(#000, 0.08);
$header-height: 64px;
$navigation-width: 20px;
-$primaryPalette: mat-palette($mat-blue, 700, 300, 900);
-$accentPalette: mat-palette($mat-yellow, 600, 300, 800);
-$warnPalette: mat-palette($mat-red, 500, 300, 800);
+$primaryPalette: mat.define-palette(mat.$blue-palette, 700, 300, 900);
+$accentPalette: mat.define-palette(mat.$yellow-palette, 600, 300, 800);
+$warnPalette: mat.define-palette(mat.$red-palette, 500, 300, 800);
-$goofyTheme: mat-light-theme((
+$goofyTheme: mat.define-light-theme((
color: (
primary: $primaryPalette,
accent: $accentPalette,
@@ -23,10 +23,10 @@ $goofyTheme: mat-light-theme((
// dark theme
-$primaryDarkPalette: mat-palette($mat-yellow, 700, 300, 900);
-$accentDarkPalette: mat-palette($mat-brown, 600, 300, 800);
+$primaryDarkPalette: mat.define-palette(mat.$yellow-palette, 700, 300, 900);
+$accentDarkPalette: mat.define-palette(mat.$brown-palette, 600, 300, 800);
-$goofyDarkTheme: mat-dark-theme((
+$goofyDarkTheme: mat.define-dark-theme((
color: (
primary: $primaryDarkPalette,
accent: $accentDarkPalette,
diff --git a/goofy-client/apps/goofy/src/styles/main.scss b/goofy-client/apps/goofy/src/styles/main.scss
index e1008f2793ec252f3abd4e80e584dca36435385e..380c86bc6655b283ec506f0055d5d11776051485 100644
--- a/goofy-client/apps/goofy/src/styles/main.scss
+++ b/goofy-client/apps/goofy/src/styles/main.scss
@@ -1,3 +1,4 @@
+@use '~@angular/material' as mat;
@import "~material-design-icons-iconfont/dist/material-design-icons.css";
//@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");
@import "~typeface-roboto/index.css";
@@ -18,7 +19,7 @@
@import "~libs/user-profile/src/lib/user-profile-in-vorgang-container/user-profile-in-vorgang-container.theme";
@import "~libs/user-profile/src/lib/user-profile-search-container/user-profile-search-container.theme";
-@include mat-core();
+@include mat.core();
@mixin custom-components-theme($theme) {
@include navigation($theme);
@@ -30,11 +31,11 @@
@include user-profile-icon($theme);
}
-@include angular-material-theme($goofyTheme);
+@include mat.all-component-themes($goofyTheme);
@include custom-components-theme($goofyTheme);
body.dark {
- @include angular-material-color($goofyDarkTheme);
+ @include mat.all-component-colors($goofyDarkTheme);
@include custom-components-theme($goofyDarkTheme);
}
diff --git a/goofy-client/libs/navigation/src/lib/navigation/_navigation.theme.scss b/goofy-client/libs/navigation/src/lib/navigation/_navigation.theme.scss
index 98ce7ce5221c59f1b3560f8bd1133fb8c0292cc1..c2fb028bb9be697c3d49d8f06898d6bc2af63be7 100644
--- a/goofy-client/libs/navigation/src/lib/navigation/_navigation.theme.scss
+++ b/goofy-client/libs/navigation/src/lib/navigation/_navigation.theme.scss
@@ -1,3 +1,6 @@
+@use 'sass:map';
+@use '~@angular/material' as mat;
+
goofy-client-navigation nav a {
&:hover,
&:focus-within {
@@ -13,7 +16,8 @@ body.dark goofy-client-navigation nav a {
}
@mixin navigation($theme) {
- $primary: map-get($theme, primary);
+ $color-config: mat.get-color-config($theme);
+ $primary: map.get($color-config, 'primary');
goofy-client-navigation {
a {
@@ -21,12 +25,12 @@ body.dark goofy-client-navigation nav a {
&.active {
font-weight: 500;
- color: mat-color($primary, darker);
- background-color: mat-color($primaryPalette, 50);
+ color: mat.get-color-from-palette($primary, darker);
+ background-color: mat.get-color-from-palette($primaryPalette, 50);
&:hover,
&:focus-within {
- background-color: mat-color($primaryPalette, 50);
+ background-color: mat.get-color-from-palette($primaryPalette, 50);
}
}
diff --git a/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss b/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss
index c4a730b68830968cbadea31d511de7aa811c9b3c..f129e02825cebb3ca912287c8f9873ff8efd89d5 100644
--- a/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss
+++ b/goofy-client/libs/navigation/src/lib/navigation/navigation.component.scss
@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use '~@angular/material' as mat;
@import "variables";
nav {
@@ -66,7 +68,7 @@ ul {
width: 32px;
&.active {
- background-color: mat-color($primaryPalette, 50);
+ background-color: mat.get-color-from-palette($primaryPalette, 50);
}
}
diff --git a/goofy-client/libs/ui/src/lib/snackbar/snackbar.component.scss b/goofy-client/libs/ui/src/lib/snackbar/snackbar.component.scss
index 8ec4a97dbd3b12aa320d1a0a1cac5141a9f1ce3a..a5ad807003b6704691a838c66a44aba801a815d7 100644
--- a/goofy-client/libs/ui/src/lib/snackbar/snackbar.component.scss
+++ b/goofy-client/libs/ui/src/lib/snackbar/snackbar.component.scss
@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use '~@angular/material' as mat;
@import "variables";
::ng-deep .mat-snack-bar-container {
@@ -5,7 +7,7 @@
max-width: 90vw;
.mat-button {
- color: mat-color($primaryPalette, lighter);
+ color: mat.get-color-from-palette($primaryPalette, lighter);
}
}
@@ -14,5 +16,5 @@ button {
}
::ng-deep body.dark .mat-snack-bar-container .mat-button {
- color: mat-color($primaryPalette);
+ color: mat.get-color-from-palette($primaryPalette);
}
diff --git a/goofy-client/libs/ui/src/lib/ui/button-with-spinner/_button-with-spinner.theme.scss b/goofy-client/libs/ui/src/lib/ui/button-with-spinner/_button-with-spinner.theme.scss
index 63c4105fad438b1f035723279d582f9f660fc92e..f2806b09d4b7fb8273e7301ab37126d7e3924fd5 100644
--- a/goofy-client/libs/ui/src/lib/ui/button-with-spinner/_button-with-spinner.theme.scss
+++ b/goofy-client/libs/ui/src/lib/ui/button-with-spinner/_button-with-spinner.theme.scss
@@ -1,8 +1,11 @@
+@use 'sass:map';
+@use '~@angular/material' as mat;
@mixin button-with-spinner($theme) {
- $primary: map-get($theme, primary);
+ $color-config: mat.get-color-config($theme);
+ $primary: map.get($color-config, 'primary');
goofy-client-button-with-spinner .mat-primary svg path {
- fill: mat-color($primary);
+ fill: mat.get-color-from-palette($primary);
}
}
diff --git a/goofy-client/libs/ui/src/lib/ui/expansion-panel/_expansion-panel.theme.scss b/goofy-client/libs/ui/src/lib/ui/expansion-panel/_expansion-panel.theme.scss
index 0157d5bfb2b7a7f5ee8f34be0c7ebf5b95210943..a25682f65a6ad365971738e1c40355c016c3b95c 100644
--- a/goofy-client/libs/ui/src/lib/ui/expansion-panel/_expansion-panel.theme.scss
+++ b/goofy-client/libs/ui/src/lib/ui/expansion-panel/_expansion-panel.theme.scss
@@ -1,8 +1,12 @@
+@use 'sass:map';
+@use '~@angular/material' as mat;
+
@mixin expansion-panel($theme) {
- $primary: map-get($theme, primary);
+ $color-config: mat.get-color-config($theme);
+ $primary-palette: map.get($color-config, 'primary');
goofy-client-expansion-panel h3 {
- color: mat-color($primary);
+ color: mat.get-color-from-palette($primary-palette);
}
}
@@ -55,6 +59,6 @@ body.mat-typography goofy-client-expansion-panel {
.dark goofy-client-expansion-panel {
h3 {
- color: mat-color($primaryPalette, lighter);
+ color: mat.get-color-from-palette($primaryPalette, lighter);
}
}
diff --git a/goofy-client/libs/user-profile/src/lib/user-profile-in-vorgang-container/_user-profile-in-vorgang-container.theme.scss b/goofy-client/libs/user-profile/src/lib/user-profile-in-vorgang-container/_user-profile-in-vorgang-container.theme.scss
index 2f059045fd175b9ea94b1e6063484efdb0687da2..7c9b132e748a7cd31f89de3d0f3f27f102520541 100644
--- a/goofy-client/libs/user-profile/src/lib/user-profile-in-vorgang-container/_user-profile-in-vorgang-container.theme.scss
+++ b/goofy-client/libs/user-profile/src/lib/user-profile-in-vorgang-container/_user-profile-in-vorgang-container.theme.scss
@@ -1,17 +1,21 @@
+@use 'sass:map';
+@use '~@angular/material' as mat;
+
@mixin user-profile-icon($theme) {
- $primary: map-get($theme, primary);
+ $color-config: mat.get-color-config($theme);
+ $primary: map.get($color-config, 'primary');
goofy-client-user-profile-in-vorgang-container {
.user-profile-button {
&:focus-within {
.user-profile-icon {
- box-shadow: 0 0 0 2px mat-color($primary);
+ box-shadow: 0 0 0 2px mat.get-color-from-palette($primary);
}
}
.user-profile-icon {
- box-shadow: 0 0 0 1px mat-color($primary);
+ box-shadow: 0 0 0 1px mat.get-color-from-palette($primary);
}
}
}
diff --git a/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/_vorgang-detail-header.theme.scss b/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/_vorgang-detail-header.theme.scss
index 053af660447800f0d772f9e76d527ec76a2719c4..7dc50a5ffd0ad97db0441ac1ef5d85b6a0a91bb7 100644
--- a/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/_vorgang-detail-header.theme.scss
+++ b/goofy-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-area/vorgang-detail-header/_vorgang-detail-header.theme.scss
@@ -1,7 +1,11 @@
+@use 'sass:map';
+@use '~@angular/material' as mat;
+
@mixin vorgang-detail-header($theme) {
- $primary: map-get($theme, primary);
+ $color-config: mat.get-color-config($theme);
+ $primary: map.get($color-config, 'primary');
goofy-client-vorgang-detail-header h1 {
- color: mat-color($primary);
+ color: mat.get-color-from-palette($primary);
}
}
diff --git a/goofy-client/libs/vorgang-shared-ui/src/lib/status-dot/status-dot.component.scss b/goofy-client/libs/vorgang-shared-ui/src/lib/status-dot/status-dot.component.scss
index 3465e9753ac9cf60eb06a4afa590a9d8ed6de2d4..2a47d896e4b2d1728d965465ebc1c3ff2dd1b1b1 100644
--- a/goofy-client/libs/vorgang-shared-ui/src/lib/status-dot/status-dot.component.scss
+++ b/goofy-client/libs/vorgang-shared-ui/src/lib/status-dot/status-dot.component.scss
@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use '~@angular/material' as mat;
@import "variables";
:host {
@@ -11,14 +13,14 @@
.dot {
border-radius: 50%;
- background-color: mat-color($primaryPalette);
+ background-color: mat.get-color-from-palette($primaryPalette);
margin: 0 29px;
&.angenommen,
&.in_bearbeitung,
&.redirect, // TODO kann raus, wenn der forward status auf deutsch umgestellt wurde
&.weiterleiten {
- background-color: mat-color($accentPalette, darker);
+ background-color: mat.get-color-from-palette($accentPalette, darker);
}
&.verworfen {
diff --git a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/_vorgang-search-container.theme.scss b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/_vorgang-search-container.theme.scss
index 69e2b74685cc21d2843b82baa56bff4a47eb6cc5..c1ded1941a638606cc41073c29847b5316beced4 100644
--- a/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/_vorgang-search-container.theme.scss
+++ b/goofy-client/libs/vorgang-shared-ui/src/lib/vorgang-search-container/_vorgang-search-container.theme.scss
@@ -1,3 +1,6 @@
+@use 'sass:map';
+@use '~@angular/material' as mat;
+
goofy-client-vorgang-search-container {
.search-field {
box-shadow: 0 0 0 1px rgba(#000, 0.08);
@@ -32,11 +35,12 @@ body.dark goofy-client-vorgang-search-container {
}
@mixin search-container($theme) {
- $primary: map-get($theme, primary);
+ $color-config: mat.get-color-config($theme);
+ $primary: map.get($color-config, 'primary');
goofy-client-vorgang-search-container {
.search-icon {
- color: mat-color($primary);
+ color: mat.get-color-from-palette($primary);
}
}
}
diff --git a/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-next-frist-button/vorgang-next-frist-button.component.scss b/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-next-frist-button/vorgang-next-frist-button.component.scss
index aeff005f45ede8d7241dc8b0673d782dfacbdb9d..3381d746d7fb88bf2b5c48c98895928c550cf84d 100644
--- a/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-next-frist-button/vorgang-next-frist-button.component.scss
+++ b/goofy-client/libs/vorgang/src/lib/vorgang-list-container/vorgang-list/vorgang-list-item/vorgang-next-frist-button/vorgang-next-frist-button.component.scss
@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use '~@angular/material' as mat;
@import "variables";
button {
@@ -13,5 +15,5 @@ button {
}
.red:not(.erledigt) {
- color: mat-color($warnPalette, darker);
+ color: mat.get-color-from-palette($warnPalette, darker);
}
diff --git a/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/breadcrumb/_breadcrumb.theme.scss b/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/breadcrumb/_breadcrumb.theme.scss
index d4ccb606640e34caf36c182966c4c7020cd2481d..fe1d718652e02ef256856d7e42e16b4decd1feb8 100644
--- a/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/breadcrumb/_breadcrumb.theme.scss
+++ b/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-page-container/wiedervorlage-page/breadcrumb/_breadcrumb.theme.scss
@@ -1,7 +1,11 @@
+@use 'sass:map';
+@use '~@angular/material' as mat;
+
@mixin breadcrumb($theme) {
- $primary: map-get($theme, primary);
+ $color-config: mat.get-color-config($theme);
+ $primary: map.get($color-config, 'primary');
goofy-client-breadcrumb a {
- color: mat-color($primary);
+ color: mat.get-color-from-palette($primary);
}
}
diff --git a/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-status/wiedervorlage-status.component.scss b/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-status/wiedervorlage-status.component.scss
index b3fdd5647f3ff89a76755971a05323b2aa8e04a2..85745a1830445dcb4075d3d5ee7bc25c2cb2366f 100644
--- a/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-status/wiedervorlage-status.component.scss
+++ b/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-status/wiedervorlage-status.component.scss
@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use '~@angular/material' as mat;
@import "variables";
:host {
@@ -23,13 +25,13 @@
}
&.red:not(.erledigt) {
- background-color: mat-color($warnPalette);
- border-color: mat-color($warnPalette, darker);
+ background-color: mat.get-color-from-palette($warnPalette);
+ border-color: mat.get-color-from-palette($warnPalette, darker);
}
&.yellow:not(.erledigt) {
- background-color: mat-color($accentPalette);
- border-color: mat-color($accentPalette, darker);
+ background-color: mat.get-color-from-palette($accentPalette);
+ border-color: mat.get-color-from-palette($accentPalette, darker);
}
}
diff --git a/goofy-client/package-lock.json b/goofy-client/package-lock.json
index d7545adb14be3f7aff983ebdf87c384c98d9c9b5..89ff3927830d7021597a00000362e767a9127b0f 100644
--- a/goofy-client/package-lock.json
+++ b/goofy-client/package-lock.json
@@ -530,12 +530,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.1.1",
+ "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.1.1.tgz",
+ "integrity": "sha512-MJENa8qmfLAr6t59u1+mEC2YPbCn4n3vsY6k8fKyf+ILXwwGHWNZlYblaRMBjrF/crSx1Kd5vb30RCqIcNTGsA==",
"requires": {
"parse5": "^5.0.0",
- "tslib": "^2.0.0"
+ "tslib": "^2.2.0"
}
},
"@angular/cli": {
@@ -787,19 +787,19 @@
"dev": true
},
"@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.1.1",
+ "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.1.1.tgz",
+ "integrity": "sha512-q2vhbVQfjr+88beqCotCVlaPRyy9y2O2asiR3+0BU9OJ1DjTo1QpBmMpck5InP7Es49t9RTk9RzzC0t18p45yA==",
"requires": {
- "tslib": "^2.0.0"
+ "tslib": "^2.2.0"
}
},
"@angular/material-moment-adapter": {
- "version": "11.2.3",
- "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-11.2.3.tgz",
- "integrity": "sha512-koLpRU3Kiuxhoic+N0JjeJdqRG7fzZJDe83bwqQ991eCDdVbdMd0Xh7cEbFTjnWFQSHdqfMl2dZmHFpvJ46Xwg==",
+ "version": "12.1.1",
+ "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-12.1.1.tgz",
+ "integrity": "sha512-YQs4BFiQ0rCYhWzcPJ6IS6zJRM+iKAjAEo/Z89G4tR1vekA4Fl95PBs9DVoCLS2uptOPL99tnUMqeNtFjUM6wQ==",
"requires": {
- "tslib": "^2.0.0"
+ "tslib": "^2.2.0"
}
},
"@angular/platform-browser": {
diff --git a/goofy-client/package.json b/goofy-client/package.json
index d34497a427d08cd919d3d66c807a85834bee4b02..70e0f166262a152be91ae3f15d503074c405dd9a 100644
--- a/goofy-client/package.json
+++ b/goofy-client/package.json
@@ -48,13 +48,13 @@
"private": true,
"dependencies": {
"@angular/animations": "12.0.0",
- "@angular/cdk": "11.1.2",
+ "@angular/cdk": "12.1.1",
"@angular/common": "12.0.0",
"@angular/compiler": "12.0.0",
"@angular/core": "12.0.0",
"@angular/forms": "12.0.0",
- "@angular/material": "11.1.2",
- "@angular/material-moment-adapter": "11.2.3",
+ "@angular/material": "12.1.1",
+ "@angular/material-moment-adapter": "12.1.1",
"@angular/platform-browser": "12.0.0",
"@angular/platform-browser-dynamic": "12.0.0",
"@angular/router": "12.0.0",