Merge 3365d86f13 into d8b305a343

CHANGELOG.md

@@ -774,6 +774,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Refactored the dark theme CSS selector
+- Migrated from _Material Design_ 2 to _Material Design_ 3
 - Improved the language localization for German (`de`)
 - Upgraded `date-fns` from version `2.29.3` to `3.6.0`
 - Upgraded `zone.js` from version `0.14.7` to `0.14.10`

apps/client/src/app/app.component.ts

@@ -355,7 +355,9 @@ export class AppComponent implements OnDestroy, OnInit {
 
     if (isDarkTheme) {
       this.document.body.classList.add('theme-dark');
+      this.document.body.classList.remove('theme-light');
     } else {
+      this.document.body.classList.add('theme-light');
       this.document.body.classList.remove('theme-dark');
     }
 

apps/client/src/app/components/header/header.component.html

@@ -17,7 +17,7 @@
         <a
           class="d-none d-sm-block"
           i18n
-          mat-flat-button
+          mat-button
           [ngClass]="{
             'font-weight-bold':
               currentRoute === 'home' || currentRoute === 'zen',
@@ -32,7 +32,7 @@
         <a
           class="d-none d-sm-block"
           i18n
-          mat-flat-button
+          mat-button
           [ngClass]="{
             'font-weight-bold': currentRoute === 'portfolio',
             'text-decoration-underline': currentRoute === 'portfolio'
@@ -45,7 +45,7 @@
         <a
           class="d-none d-sm-block"
           i18n
-          mat-flat-button
+          mat-button
           [ngClass]="{
             'font-weight-bold': currentRoute === 'accounts',
             'text-decoration-underline': currentRoute === 'accounts'
@@ -59,7 +59,7 @@
           <a
             class="d-none d-sm-block"
             i18n
-            mat-flat-button
+            mat-button
             [ngClass]="{
               'font-weight-bold': currentRoute === 'admin',
               'text-decoration-underline': currentRoute === 'admin'
@@ -73,7 +73,7 @@
         <a
           class="d-none d-sm-block"
           i18n
-          mat-flat-button
+          mat-button
           [ngClass]="{
             'font-weight-bold': currentRoute === routeResources,
             'text-decoration-underline': currentRoute === routeResources
@@ -88,7 +88,7 @@
         <li class="list-inline-item">
           <a
             class="d-none d-sm-block"
-            mat-flat-button
+            mat-button
             [ngClass]="{
               'font-weight-bold': currentRoute === routePricing,
               'text-decoration-underline': currentRoute === routePricing
@@ -108,7 +108,7 @@
         <a
           class="d-none d-sm-block"
           i18n
-          mat-flat-button
+          mat-button
           [ngClass]="{
             'font-weight-bold': currentRoute === routeAbout,
             'text-decoration-underline': currentRoute === routeAbout
@@ -158,7 +158,7 @@
       <li class="list-inline-item">
         <button
           class="no-min-width px-1"
-          mat-flat-button
+          mat-button
           [matMenuTriggerFor]="accountMenu"
           (menuClosed)="onMenuClosed()"
           (menuOpened)="onMenuOpened()"
@@ -342,7 +342,7 @@
         <a
           class="d-none d-sm-block"
           i18n
-          mat-flat-button
+          mat-button
           [ngClass]="{
             'font-weight-bold': currentRoute === routeFeatures,
             'text-decoration-underline': currentRoute === routeFeatures
@@ -355,7 +355,7 @@
         <a
           class="d-none d-sm-block"
           i18n
-          mat-flat-button
+          mat-button
           [ngClass]="{
             'font-weight-bold': currentRoute === routeAbout,
             'text-decoration-underline': currentRoute === routeAbout
@@ -368,7 +368,7 @@
         <li class="list-inline-item">
           <a
             class="d-sm-block"
-            mat-flat-button
+            mat-button
             [ngClass]="{
               'font-weight-bold': currentRoute === routePricing,
               'text-decoration-underline': currentRoute === routePricing
@@ -389,7 +389,7 @@
           <a
             class="d-none d-sm-block"
             i18n
-            mat-flat-button
+            mat-button
             [ngClass]="{
               'font-weight-bold': currentRoute === routeMarkets,
               'text-decoration-underline': currentRoute === routeMarkets
@@ -403,12 +403,12 @@
         <a
           class="d-none d-sm-block no-min-width p-1"
           href="https://github.com/ghostfolio/ghostfolio"
-          mat-flat-button
+          mat-button
           ><ion-icon name="logo-github"></ion-icon
         ></a>
       </li>
       <li class="list-inline-item">
-        <button class="d-sm-block" mat-flat-button (click)="openLoginDialog()">
+        <button class="d-sm-block" mat-button (click)="openLoginDialog()">
           <ng-container i18n>Sign in</ng-container>
         </button>
       </li>

apps/client/src/app/components/header/header.component.scss

@@ -20,6 +20,7 @@
     }
 
     .mdc-button {
+      color: var(--mdc-text-button-label-text-color);
       height: 100%;
 
       &:not(.mat-primary) {

apps/client/src/styles/m3-theme.scss

@@ -0,0 +1,155 @@
+// This file was generated by running 'ng generate @angular/material:m3-theme'.
+// Proceed with caution if making changes to this file.
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// Note: Color palettes are generated from primary: #36cfcc, secondary: #3686cf
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #00201f,
+    20: #003736,
+    25: #004342,
+    30: #00504e,
+    35: #005d5b,
+    40: #006a68,
+    50: #008583,
+    60: #00a19f,
+    70: #11bebc,
+    80: #47dbd7,
+    90: #6bf7f4,
+    95: #affffc,
+    98: #e3fffd,
+    99: #f2fffe,
+    100: #ffffff
+  ),
+  secondary: (
+    0: #000000,
+    10: #001d36,
+    20: #003258,
+    25: #003d6a,
+    30: #00497c,
+    35: #00558f,
+    40: #0061a3,
+    50: #267bc3,
+    60: #4895df,
+    70: #66b0fb,
+    80: #9ecaff,
+    90: #d1e4ff,
+    95: #e9f1ff,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff
+  ),
+  tertiary: (
+    0: #000000,
+    10: #031d35,
+    20: #1b324b,
+    25: #273d57,
+    30: #324863,
+    35: #3e546f,
+    40: #4a607b,
+    50: #637995,
+    60: #7c92b0,
+    70: #97adcc,
+    80: #b2c8e8,
+    90: #d2e4ff,
+    95: #eaf1ff,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff
+  ),
+  neutral: (
+    0: #000000,
+    10: #191c1c,
+    20: #2d3131,
+    25: #383c3c,
+    30: #444747,
+    35: #4f5353,
+    40: #5b5f5e,
+    50: #747877,
+    60: #8e9191,
+    70: #a9acab,
+    80: #c4c7c6,
+    90: #e0e3e2,
+    95: #eff1f0,
+    98: #f7faf9,
+    99: #fafdfc,
+    100: #ffffff,
+    4: #0b0f0f,
+    6: #101414,
+    12: #1d2020,
+    17: #272b2a,
+    22: #323535,
+    24: #363a39,
+    87: #d8dada,
+    92: #e6e9e8,
+    94: #eceeed,
+    96: #f2f4f3
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #141d1d,
+    20: #293232,
+    25: #343d3d,
+    30: #3f4948,
+    35: #4a5454,
+    40: #566060,
+    50: #6f7978,
+    60: #889392,
+    70: #a3adac,
+    80: #bec9c7,
+    90: #dae5e3,
+    95: #e8f3f2,
+    98: #f1fbfa,
+    99: #f4fefd,
+    100: #ffffff
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #ba1a1a,
+    50: #de3730,
+    60: #ff5449,
+    70: #ff897d,
+    80: #ffb4ab,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff
+  )
+);
+
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes, neutral-variant),
+  error: map.get($_palettes, error)
+);
+$_primary: map.merge(map.get($_palettes, primary), $_rest);
+$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
+
+$light-theme: mat.define-theme(
+  (
+    color: (
+      theme-type: light,
+      primary: $_primary,
+      tertiary: $_tertiary
+    )
+  )
+);
+$dark-theme: mat.define-theme(
+  (
+    color: (
+      theme-type: dark,
+      primary: $_primary,
+      tertiary: $_tertiary
+    )
+  )
+);

apps/client/src/styles/theme.scss

@@ -1,112 +1,185 @@
 @use '@angular/material' as mat;
+@use 'sass:map';
 
 $dark-primary-text: rgba(black, 0.87);
 $light-primary-text: white;
 
-$mat-css-dark-theme-selector: '.theme-dark';
-
-$gf-primary: (
-  50: var(--gf-theme-primary-50),
-  100: var(--gf-theme-primary-100),
-  200: var(--gf-theme-primary-200),
-  300: var(--gf-theme-primary-300),
-  400: var(--gf-theme-primary-400),
-  500: var(--gf-theme-primary-500),
-  600: var(--gf-theme-primary-600),
-  700: var(--gf-theme-primary-700),
-  800: var(--gf-theme-primary-800),
-  900: var(--gf-theme-primary-900),
-  A100: var(--gf-theme-primary-A100),
-  A200: var(--gf-theme-primary-A200),
-  A400: var(--gf-theme-primary-A400),
-  A700: var(--gf-theme-primary-A700),
-  contrast: (
-    50: $dark-primary-text,
-    100: $dark-primary-text,
-    200: $dark-primary-text,
-    300: $light-primary-text,
-    400: $light-primary-text,
-    500: $light-primary-text,
-    600: $light-primary-text,
-    700: $light-primary-text,
-    800: $light-primary-text,
-    900: $light-primary-text,
-    A100: $dark-primary-text,
-    A200: $light-primary-text,
-    A400: $light-primary-text,
-    A700: $light-primary-text
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #00201f,
+    20: #003736,
+    25: #004342,
+    30: #00504e,
+    35: #005d5b,
+    40: #006a68,
+    50: #008583,
+    60: #00a19f,
+    70: #11bebc,
+    80: #47dbd7,
+    90: #6bf7f4,
+    95: #affffc,
+    98: #e3fffd,
+    99: #f2fffe,
+    100: #ffffff
+  ),
+  secondary: (
+    0: #000000,
+    10: #001d36,
+    20: #003258,
+    25: #003d6a,
+    30: #00497c,
+    35: #00558f,
+    40: #0061a3,
+    50: #267bc3,
+    60: #4895df,
+    70: #66b0fb,
+    80: #9ecaff,
+    90: #d1e4ff,
+    95: #e9f1ff,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff
+  ),
+  tertiary: (
+    0: #000000,
+    10: #031d35,
+    20: #1b324b,
+    25: #273d57,
+    30: #324863,
+    35: #3e546f,
+    40: #4a607b,
+    50: #637995,
+    60: #7c92b0,
+    70: #97adcc,
+    80: #b2c8e8,
+    90: #d2e4ff,
+    95: #eaf1ff,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff
+  ),
+  neutral: (
+    0: #000000,
+    10: #191c1c,
+    20: #2d3131,
+    25: #383c3c,
+    30: #444747,
+    35: #4f5353,
+    40: #5b5f5e,
+    50: #747877,
+    60: #8e9191,
+    70: #a9acab,
+    80: #c4c7c6,
+    90: #e0e3e2,
+    95: #eff1f0,
+    98: #f7faf9,
+    99: #fafdfc,
+    100: #ffffff,
+    4: #0b0f0f,
+    6: #101414,
+    12: #1d2020,
+    17: #272b2a,
+    22: #323535,
+    24: #363a39,
+    87: #d8dada,
+    92: #e6e9e8,
+    94: #eceeed,
+    96: #f2f4f3
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #141d1d,
+    20: #293232,
+    25: #343d3d,
+    30: #3f4948,
+    35: #4a5454,
+    40: #566060,
+    50: #6f7978,
+    60: #889392,
+    70: #a3adac,
+    80: #bec9c7,
+    90: #dae5e3,
+    95: #e8f3f2,
+    98: #f1fbfa,
+    99: #f4fefd,
+    100: #ffffff
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #ba1a1a,
+    50: #de3730,
+    60: #ff5449,
+    70: #ff897d,
+    80: #ffb4ab,
+    90: #ffdad6,
+    95: #ffedea,
+    98: #fff8f7,
+    99: #fffbff,
+    100: #ffffff
   )
 );
 
-$gf-secondary: (
-  50: var(--gf-theme-secondary-50),
-  100: var(--gf-theme-secondary-100),
-  200: var(--gf-theme-secondary-200),
-  300: var(--gf-theme-secondary-300),
-  400: var(--gf-theme-secondary-400),
-  500: var(--gf-theme-secondary-500),
-  600: var(--gf-theme-secondary-600),
-  700: var(--gf-theme-secondary-700),
-  800: var(--gf-theme-secondary-800),
-  900: var(--gf-theme-secondary-900),
-  A100: var(--gf-theme-secondary-A100),
-  A200: var(--gf-theme-secondary-A200),
-  A400: var(--gf-theme-secondary-A400),
-  A700: var(--gf-theme-secondary-A700),
-  contrast: (
-    50: $dark-primary-text,
-    100: $dark-primary-text,
-    200: $dark-primary-text,
-    300: $light-primary-text,
-    400: $light-primary-text,
-    500: $light-primary-text,
-    600: $light-primary-text,
-    700: $light-primary-text,
-    800: $light-primary-text,
-    900: $light-primary-text,
-    A100: $dark-primary-text,
-    A200: $light-primary-text,
-    A400: $light-primary-text,
-    A700: $light-primary-text
-  )
+$_rest: (
+  secondary: map.get($_palettes, secondary),
+  neutral: map.get($_palettes, neutral),
+  neutral-variant: map.get($_palettes, neutral-variant),
+  error: map.get($_palettes, error)
 );
+$_primary: map.merge(map.get($_palettes, primary), $_rest);
+$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
 
-$gf-typography: mat.m2-define-typography-config();
+@include mat.app-background();
+@include mat.button-density(0);
+@include mat.elevation-classes();
+@include mat.table-density(-1);
 
-// Create default theme
-$gf-theme-default: mat.m2-define-light-theme(
-  (
-    color: (
-      accent: mat.m2-define-palette($gf-secondary, 500, 900, A100),
-      primary: mat.m2-define-palette($gf-primary)
-    ),
-    density: -3,
-    typography: $gf-typography
-  )
-);
+// $gf-typography: mat.m2-define-typography-config();
 
-@include mat.all-component-themes($gf-theme-default);
+.theme-light {
+  $gf-theme-default: mat.define-theme(
+    (
+      color: (
+        primary: $_primary,
+        theme-type: light,
+        tertiary: $_tertiary
+      ),
+      density: (
+        scale: -3
+      ),
+      // typography: $gf-typography
+    )
+  );
 
-// Create dark theme
-$gf-theme-dark: mat.m2-define-dark-theme(
-  (
-    color: (
-      accent: mat.m2-define-palette($gf-secondary, 500, 900, A100),
-      primary: mat.m2-define-palette($gf-primary)
-    ),
-    density: -3,
-    typography: $gf-typography
-  )
-);
+  @include mat.all-component-themes($gf-theme-default);
 
-.theme-dark {
-  @include mat.all-component-colors($gf-theme-dark);
+  --mdc-outlined-card-container-color: unset;
 }
 
-@include mat.button-density(0);
-@include mat.elevation-classes();
-@include mat.app-background();
-@include mat.table-density(-1);
+.theme-dark {
+  $gf-theme-dark: mat.define-theme(
+    (
+      color: (
+        primary: $_primary,
+        theme-type: dark,
+        tertiary: $_tertiary
+      ),
+      density: (
+        scale: -3
+      ),
+      // typography: $gf-typography
+    )
+  );
+
+  @include mat.all-component-themes($gf-theme-dark);
+
+  --mdc-outlined-card-container-color: unset;
+}
 
 :root {
   --gf-theme-alpha-hover: 0.04;