Feature/upgrade angular material css vars to 2.0.0 (#200)

* Upgrade angular-material-css-vars

* Update changelog

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Upgraded `@angular/cdk` and `@angular/material` from version `11.0.4` to `12.0.6`
 - Upgraded `@nestjs` dependencies
+- Upgraded `angular-material-css-vars` from version `1.2.0` to `2.0.0`
 - Upgraded `Nx` from version `12.3.6` to `12.5.4`
 
 ## 1.23.1 - 03.07.2021

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

@@ -7,10 +7,6 @@
     .create-account-box {
       cursor: pointer;
       font-size: 90%;
-
-      .link {
-        color: rgba(var(--palette-primary-500), 1);
-      }
     }
   }
 

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

@@ -5,10 +5,7 @@
   z-index: 999;
 
   .mat-toolbar {
-    background-color: rgba(
+    background-color: rgba(var(--light-disabled-text));
-      var(--light-primary-text),
-      var(--palette-foreground-disabled-alpha)
-    );
 
     .spacer {
       flex: 1 1 auto;
@@ -28,11 +25,6 @@
 
 :host-context(.is-dark-theme) {
   .mat-toolbar {
-    background-color: rgba(
+    background-color: rgba(39, 39, 39, $alpha-disabled-text);
-      39,
-      39,
-      39,
-      var(--palette-foreground-disabled-alpha)
-    );
   }
 }

apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.ts

@@ -8,7 +8,7 @@ import {
   ViewChild
 } from '@angular/core';
 import { UNKNOWN_KEY } from '@ghostfolio/common/config';
-import { getCssVariable, getTextColor } from '@ghostfolio/common/helper';
+import { getTextColor } from '@ghostfolio/common/helper';
 import { PortfolioPosition } from '@ghostfolio/common/interfaces';
 import { Currency } from '@prisma/client';
 import { Tooltip } from 'chart.js';
@@ -43,9 +43,7 @@ export class PortfolioProportionChartComponent
   private colorMap: {
     [symbol: string]: string;
   } = {
-    [UNKNOWN_KEY]: `rgba(${getTextColor()}, ${getCssVariable(
+    [UNKNOWN_KEY]: `rgba(${getTextColor()}, 0.12)`
-      '--palette-foreground-divider-alpha'
-    )})`
   };
 
   public constructor() {

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

@@ -1,12 +1,11 @@
+@import '~apps/client/src/styles/ghostfolio-style';
+
 :host {
   display: block;
 
   gf-position {
     &:nth-child(even) {
-      background-color: rgba(
+      background-color: rgba(0, 0, 0, $alpha-hover);
-        var(--dark-primary-text),
-        var(--palette-background-hover-alpha)
-      );
     }
   }
 }
@@ -14,10 +13,7 @@
 :host-context(.is-dark-theme) {
   gf-position {
     &:nth-child(even) {
-      background-color: rgba(
+      background-color: rgba(255, 255, 255, $alpha-hover);
-        var(--light-primary-text),
-        var(--palette-background-hover-alpha)
-      );
     }
   }
 }

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

@@ -7,10 +7,7 @@
     padding: 0.15rem 0.75rem;
 
     &.mat-radio-checked {
-      background-color: rgba(
+      background-color: rgba(var(--dark-dividers));
-        var(--dark-primary-text),
-        var(--palette-foreground-divider-alpha)
-      );
     }
 
     ::ng-deep {
@@ -33,15 +30,8 @@
 :host-context(.is-dark-theme) {
   .mat-radio-button {
     &.mat-radio-checked {
-      background-color: rgba(
+      background-color: rgba(var(--light-dividers));
-        var(--light-primary-text),
+      border: 1px solid rgba(var(--light-disabled-text));
-        var(--palette-foreground-divider-alpha)
-      );
-      border: 1px solid
-        rgba(
-          var(--light-primary-text),
-          var(--palette-foreground-disabled-button-alpha)
-        );
     }
 
     ::ng-deep {

apps/client/src/styles.scss

@@ -43,10 +43,7 @@ body {
     }
 
     hr {
-      border-top-color: rgba(
+      border-top-color: rgba(var(--light-dividers));
-        var(--light-primary-text),
-        var(--palette-foreground-divider-alpha)
-      );
     }
 
     ngx-skeleton-loader {
@@ -63,10 +60,7 @@ body {
       background: var(--dark-background);
 
       &:not([class*='mat-elevation-z']) {
-        border-color: rgba(
+        border-color: rgba(var(--light-dividers));
-          var(--light-primary-text),
-          var(--palette-foreground-divider-alpha)
-        );
         box-shadow: none;
       }
     }
@@ -102,8 +96,7 @@ button:focus {
 }
 
 hr {
-  border-top: 1px solid
+  border-top: 1px solid rgba(var(--dark-dividers));
-    rgba(var(--dark-primary-text), var(--palette-foreground-divider-alpha));
 }
 
 ion-icon {
@@ -138,8 +131,7 @@ ngx-skeleton-loader {
 
 .mat-card {
   &:not([class*='mat-elevation-z']) {
-    border: 1px solid
+    border: 1px solid rgba(var(--dark-dividers));
-      rgba(var(--dark-primary-text), var(--palette-foreground-divider-alpha));
     box-shadow: none;
   }
 }

apps/client/src/styles/ghostfolio-style.scss

@@ -2,6 +2,9 @@ $mat-css-dark-theme-selector: '.is-dark-theme';
 
 @import '~angular-material-css-vars/public-util';
 
+$alpha-disabled-text: 0.38;
+$alpha-hover: 0.04;
+
 .gf-table {
   td {
     border: 0;

libs/common/src/lib/helper.ts

@@ -26,11 +26,15 @@ export function getCssVariable(aCssVariable: string) {
 }
 
 export function getTextColor() {
-  return getCssVariable(
+  const cssVariable = getCssVariable(
     window.matchMedia('(prefers-color-scheme: dark)').matches
       ? '--light-primary-text'
       : '--dark-primary-text'
   );
+
+  const [r, g, b] = cssVariable.split(',');
+
+  return `${r}, ${g}, ${b}`;
 }
 
 export function getToday() {

package.json

@@ -71,7 +71,7 @@
     "@simplewebauthn/typescript-types": "3.0.0",
     "@stripe/stripe-js": "1.15.0",
     "alphavantage": "2.2.0",
-    "angular-material-css-vars": "1.2.0",
+    "angular-material-css-vars": "2.0.0",
     "bent": "7.3.12",
     "bootstrap": "4.6.0",
     "cache-manager": "3.4.3",

yarn.lock

@@ -3427,10 +3427,10 @@ alphavantage@2.2.0:
   dependencies:
     cross-fetch "^3.0.5"
 
-angular-material-css-vars@1.2.0:
+angular-material-css-vars@2.0.0:
-  version "1.2.0"
+  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/angular-material-css-vars/-/angular-material-css-vars-1.2.0.tgz#edfa6dba8a862a250fb909112ebf588a1b0bd868"
+  resolved "https://registry.yarnpkg.com/angular-material-css-vars/-/angular-material-css-vars-2.0.0.tgz#a7df8380e8f781c31eeea7171b1cbd5bb91b8e4e"
-  integrity sha512-n1QApHYOPjdSNVQROltWCk7gP/eSNh227EB4T8toAS2pNWEYVO2hCm/Vsg4VmhyGXyEhrnYfJJoUUok/jWjJSA==
+  integrity sha512-20zCLolohn0ihGsK0+WgEN370jk9NabOQcUBEt7se9DtKzIVhXyvCRDkkQBVxwdP6kw9+J+oA3pZ6szJka4yXw==
   dependencies:
     "@ctrl/tinycolor" "^2.6.0"
     tslib "^2.0.0"