apply Angular Material M2 backwards compatibility

facioquo · Jun 10, 2024 · 09b821d · 09b821d
1 parent 2840313
commit 09b821d
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 20 deletions.
diff --git a/Client/src/app/picker/_scrollbar-theme.scss b/Client/src/app/picker/_scrollbar-theme.scss
@@ -18,19 +18,19 @@
 
     /* track */
     ::-webkit-scrollbar-track {
-      box-shadow: inset 0 0 3px mat.get-color-from-palette($accent, 600);
+      box-shadow: inset 0 0 3px mat.m2-get-color-from-palette($accent, 600);
       border-radius: 2px;
     }
 
     /* handle */
     ::-webkit-scrollbar-thumb {
-      background: mat.get-color-from-palette($accent, 600);
+      background: mat.m2-get-color-from-palette($accent, 600);
       border-radius: 2px;
     }
 
     /* handle on hover */
     ::-webkit-scrollbar-thumb:hover {
-      background: mat.get-color-from-palette($accent, 500);
+      background: mat.m2-get-color-from-palette($accent, 500);
       ;
     }
   }

diff --git a/Client/src/styles.scss b/Client/src/styles.scss
@@ -2,18 +2,22 @@
 @use "./styles/themed-parts";
 @use "./styles/base-elements";
 
+// light theme: src/styles/theme-light.scss
+// see also src/app/services/style.service.scss
+
 // DEFAULT THEME (see light/dark swap SCSS files)
-$primary: mat.define-palette(mat.$gray-palette, 300);
-$accent: mat.define-palette(mat.$gray-palette, 800);
-$warn: mat.define-palette(mat.$blue-palette, 800);
+$primary: mat.m2-define-palette(mat.$m2-gray-palette, 300);
+$accent: mat.m2-define-palette(mat.$m2-gray-palette, 800);
+$warn: mat.m2-define-palette(mat.$m2-blue-palette, 800);
 
-$theme: mat.define-dark-theme((
+$theme: mat.m2-define-dark-theme((
   color: (
+    theme-type: dark,
     primary: $primary,
     accent: $accent,
     warn: $warn
   ),
-  typography: mat.define-typography-config(),
+  typography: mat.m2-define-typography-config(),
 ));
 
 // include material core styles
@@ -23,5 +27,5 @@ $theme: mat.define-dark-theme((
 @include themed-parts.theme($theme);
 
 .app-background {
-  background-color: mat.get-color-from-palette($accent, 900);
+  background-color: mat.m2-get-color-from-palette($accent, 900);
 }
diff --git a/Client/src/styles/_themed-parts.scss b/Client/src/styles/_themed-parts.scss
@@ -22,7 +22,7 @@
     background-color: transparent;
 
     h1 {
-      color: mat.get-color-from-palette($accent, 600);
+      color: mat.m2-get-color-from-palette($accent, 600);
       font-size: 1.4em;
     }
 
@@ -37,7 +37,7 @@
       color: inherit;
 
       &:hover {
-        color: mat.get-color-from-palette($accent, 500);
+        color: mat.m2-get-color-from-palette($accent, 500);
       }
     }
   }
@@ -50,18 +50,18 @@
     margin-bottom: 3rem;
 
     text-align: center;
-    color: mat.get-color-from-palette($accent, 600);
+    color: mat.m2-get-color-from-palette($accent, 600);
 
     a {
 
       &:active,
       &:hover,
       &:visited {
-        color: mat.get-color-from-palette($accent, 600);
+        color: mat.m2-get-color-from-palette($accent, 600);
       }
 
       &:hover {
-        color: mat.get-color-from-palette($accent, 500);
+        color: mat.m2-get-color-from-palette($accent, 500);
       }
     }
   }

diff --git a/Client/src/styles/theme-light.scss b/Client/src/styles/theme-light.scss
@@ -7,22 +7,23 @@
 @use 'themed-parts';
 
 // LIGHT THEME
-$primary: mat.define-palette(mat.$grey-palette, 700);
-$accent: mat.define-palette(mat.$gray-palette, 400);
-$warn: mat.define-palette(mat.$light-blue-palette, 700);
+$primary: mat.m2-define-palette(mat.$m2-grey-palette, 700);
+$accent: mat.m2-define-palette(mat.$m2-gray-palette, 400);
+$warn: mat.m2-define-palette(mat.$m2-light-blue-palette, 700);
 
-$theme: mat.define-light-theme((
+$theme: mat.m2-define-light-theme((
   color: (
+    theme-type: light,
     primary: $primary,
     accent: $accent,
     warn: $warn
   ),
-  typography: mat.define-typography-config(),
+  typography: mat.m2-define-typography-config(),
 ));
 
 // apply theme
 @include mat.all-component-themes(map.merge($theme, (
-  typography: mat.define-typography-config()
+  typography: mat.m2-define-typography-config()
 )));
 @include themed-parts.theme($theme);