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

* Upgrade angular-material-css-vars * Update changelog
3 years ago · fbe590ddb9
parent 0d65136a9e
commit fbe590ddb9
11 changed files with 29 additions and 57 deletions
--- a/CHANGELOG.md
+++ b/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
--- a/apps/client/src/app/app.component.scss
+++ b/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);
-      }
    }
  }

--- a/apps/client/src/app/components/header/header.component.scss
+++ b/apps/client/src/app/components/header/header.component.scss
@ -5,10 +5,7 @@
  z-index: 999;

  .mat-toolbar {
-    background-color: rgba(
-      var(--light-primary-text),
-      var(--palette-foreground-disabled-alpha)
-    );
+    background-color: rgba(var(--light-disabled-text));

    .spacer {
      flex: 1 1 auto;
@ -28,11 +25,6 @@

 :host-context(.is-dark-theme) {
  .mat-toolbar {
-    background-color: rgba(
-      39,
-      39,
-      39,
-      var(--palette-foreground-disabled-alpha)
-    );
+    background-color: rgba(39, 39, 39, $alpha-disabled-text);
  }
 }
--- a/apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.ts
+++ b/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(
-      '--palette-foreground-divider-alpha'
-    )})`
+    [UNKNOWN_KEY]: `rgba(${getTextColor()}, 0.12)`
  };

  public constructor() {
--- a/apps/client/src/app/components/positions/positions.component.scss
+++ b/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(
-        var(--dark-primary-text),
-        var(--palette-background-hover-alpha)
-      );
+      background-color: rgba(0, 0, 0, $alpha-hover);
    }
  }
 }
@ -14,10 +13,7 @@
 :host-context(.is-dark-theme) {
  gf-position {
    &:nth-child(even) {
-      background-color: rgba(
-        var(--light-primary-text),
-        var(--palette-background-hover-alpha)
-      );
+      background-color: rgba(255, 255, 255, $alpha-hover);
    }
  }
 }
--- a/apps/client/src/app/components/toggle/toggle.component.scss
+++ b/apps/client/src/app/components/toggle/toggle.component.scss
@ -7,10 +7,7 @@
    padding: 0.15rem 0.75rem;

    &.mat-radio-checked {
-      background-color: rgba(
-        var(--dark-primary-text),
-        var(--palette-foreground-divider-alpha)
-      );
+      background-color: rgba(var(--dark-dividers));
    }

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

    ::ng-deep {
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@ -43,10 +43,7 @@ body {
    }

    hr {
-      border-top-color: rgba(
-        var(--light-primary-text),
-        var(--palette-foreground-divider-alpha)
-      );
+      border-top-color: rgba(var(--light-dividers));
    }

    ngx-skeleton-loader {
@ -63,10 +60,7 @@ body {
      background: var(--dark-background);

      &:not([class*='mat-elevation-z']) {
-        border-color: rgba(
-          var(--light-primary-text),
-          var(--palette-foreground-divider-alpha)
-        );
+        border-color: rgba(var(--light-dividers));
        box-shadow: none;
      }
    }
@ -102,8 +96,7 @@ button:focus {
 }

 hr {
-  border-top: 1px solid
-    rgba(var(--dark-primary-text), var(--palette-foreground-divider-alpha));
+  border-top: 1px solid rgba(var(--dark-dividers));
 }

 ion-icon {
@ -138,8 +131,7 @@ ngx-skeleton-loader {

 .mat-card {
  &:not([class*='mat-elevation-z']) {
-    border: 1px solid
-      rgba(var(--dark-primary-text), var(--palette-foreground-divider-alpha));
+    border: 1px solid rgba(var(--dark-dividers));
    box-shadow: none;
  }
 }
--- a/apps/client/src/styles/ghostfolio-style.scss
+++ b/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;
--- a/libs/common/src/lib/helper.ts
+++ b/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() {
--- a/package.json
+++ b/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",
--- a/yarn.lock
+++ b/yarn.lock
@ -3427,10 +3427,10 @@ alphavantage@2.2.0:
  dependencies:
    cross-fetch "^3.0.5"

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