Feature/eliminate angular material css vars (#1648)

* Eliminate angular-material-css-vars

* Update changelog

CHANGELOG.md

@@ -15,8 +15,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Improved the language localization for German (`de`)
+- Eliminated `angular-material-css-vars`
 - Upgraded `angular` from version `14.2.0` to `15.1.2`
-- Upgraded `angular-material-css-vars` from version `3.0.0` to `4.2.0`
 - Upgraded `Nx` from version `15.0.13` to `15.6.3`
 
 ## 1.230.0 - 2023-01-29

apps/client/project.json

@@ -65,7 +65,10 @@
             "output": "./../assets/"
           }
         ],
-        "styles": ["apps/client/src/styles.scss"],
+        "styles": [
+          "apps/client/src/styles/theme.scss",
+          "apps/client/src/styles.scss"
+        ],
         "scripts": ["node_modules/marked/marked.min.js"],
         "vendorChunk": true,
         "extractLicenses": false,

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

@@ -1,26 +1,17 @@
+import { DOCUMENT } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  Inject,
   OnDestroy,
   OnInit
 } from '@angular/core';
 import { Title } from '@angular/platform-browser';
-import {
+import { NavigationEnd, PRIMARY_OUTLET, Router } from '@angular/router';
-  ActivatedRoute,
-  NavigationEnd,
-  PRIMARY_OUTLET,
-  Router
-} from '@angular/router';
-import {
-  primaryColorHex,
-  secondaryColorHex,
-  warnColorHex
-} from '@ghostfolio/common/config';
 import { InfoItem, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { ColorScheme } from '@ghostfolio/common/types';
-import { MaterialCssVarsService } from 'angular-material-css-vars';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
@@ -52,7 +43,7 @@ export class AppComponent implements OnDestroy, OnInit {
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
     private deviceService: DeviceDetectorService,
-    private materialCssVarsService: MaterialCssVarsService,
+    @Inject(DOCUMENT) private document: Document,
     private router: Router,
     private title: Title,
     private tokenStorageService: TokenStorageService,
@@ -126,16 +117,20 @@ export class AppComponent implements OnDestroy, OnInit {
       ? userPreferredColorScheme === 'DARK'
       : window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-    this.materialCssVarsService.setDarkTheme(isDarkTheme);
+    this.toggleThemeStyleClass(isDarkTheme);
 
     window.matchMedia('(prefers-color-scheme: dark)').addListener((event) => {
       if (!this.user?.settings.colorScheme) {
-        this.materialCssVarsService.setDarkTheme(event.matches);
+        this.toggleThemeStyleClass(event.matches);
       }
     });
+  }
 
-    this.materialCssVarsService.setPrimaryColor(primaryColorHex);
+  private toggleThemeStyleClass(isDarkTheme: boolean) {
-    this.materialCssVarsService.setAccentColor(secondaryColorHex);
+    if (isDarkTheme) {
-    this.materialCssVarsService.setWarnColor(warnColorHex);
+      this.document.body.classList.add('is-dark-theme');
+    } else {
+      this.document.body.classList.remove('is-dark-theme');
+    }
   }
 }

apps/client/src/app/app.module.ts

@@ -14,7 +14,6 @@ import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/le
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ServiceWorkerModule } from '@angular/service-worker';
-import { MaterialCssVarsModule } from 'angular-material-css-vars';
 import { MarkdownModule } from 'ngx-markdown';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { NgxStripeModule, STRIPE_PUBLISHABLE_KEY } from 'ngx-stripe';
@@ -46,11 +45,6 @@ export function NgxStripeFactory(): string {
     MarkdownModule.forRoot(),
     MatAutocompleteModule,
     MatChipsModule,
-    MaterialCssVarsModule.forRoot({
-      darkThemeClass: 'is-dark-theme',
-      isAutoContrast: true,
-      lightThemeClass: 'is-light-theme'
-    }),
     MatNativeDateModule,
     MatSnackBarModule,
     MatTooltipModule,

apps/client/src/app/components/accounts-table/accounts-table.module.ts

@@ -1,7 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
 import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
 import { MatSortModule } from '@angular/material/sort';
@@ -20,7 +19,6 @@ import { AccountsTableComponent } from './accounts-table.component';
     GfSymbolIconModule,
     GfValueModule,
     MatButtonModule,
-    MatInputModule,
     MatMenuModule,
     MatSortModule,
     MatTableModule,

apps/client/src/app/components/admin-market-data/admin-market-data.module.ts

@@ -7,7 +7,7 @@ import { MatSortModule } from '@angular/material/sort';
 import { GfActivitiesFilterModule } from '@ghostfolio/ui/activities-filter/activities-filter.module';
 
 import { AdminMarketDataComponent } from './admin-market-data.component';
-import { GfAssetProfileDialogModule } from './asset-profile-dialog/assset-profile-dialog.module';
+import { GfAssetProfileDialogModule } from './asset-profile-dialog/asset-profile-dialog.module';
 
 @NgModule({
   declarations: [AdminMarketDataComponent],

apps/client/src/app/pages/account/account-page.module.ts

@@ -5,7 +5,6 @@ import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/lega
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
 import { RouterModule } from '@angular/router';
@@ -31,7 +30,6 @@ import { GfCreateOrUpdateAccessDialogModule } from './create-or-update-access-di
     MatCardModule,
     MatDialogModule,
     MatFormFieldModule,
-    MatInputModule,
     MatSelectModule,
     MatSlideToggleModule,
     ReactiveFormsModule,

apps/client/src/styles.scss

@@ -1,23 +1,190 @@
-@use 'angular-material-css-vars/main' as mat-css;
-
 @import './styles/bootstrap';
 @import './styles/table';
 
 @import 'node_modules/svgmap/dist/svgMap';
 
-$mat-css-dark-theme-selector: '.is-dark-theme';
-$mat-css-light-theme-selector: '.is-light-theme';
-
-@include mat-css.init-material-css-vars() using($mat-css-theme) {
-  // If your app has any theme mixins, call them here.
-  // $mat-css-theme gets set to an appropriate value before this content is called.
-  // @include your-custom-component-theme($mat-css-theme);
-}
-
 :root {
   --dark-background: rgb(25, 25, 25);
   --font-family-sans-serif: Roboto, 'Helvetica Neue', sans-serif;
   --light-background: rgb(255, 255, 255);
+
+  --dark-primary-text: 0, 0, 0, 0.87;
+  --dark-secondary-text: 0, 0, 0, 0.54;
+  --dark-accent-text: 0, 0, 0, 0.87;
+  --dark-warn-text: 0, 0, 0, 0.87;
+  --dark-disabled-text: 0, 0, 0, 0.38;
+  --dark-dividers: 0, 0, 0, 0.12;
+  --dark-focused: 0, 0, 0, 0.12;
+  --light-primary-text: 255, 255, 255, 1;
+  --light-secondary-text: 255, 255, 255, 0.7;
+  --light-accent-text: 255, 255, 255, 1;
+  --light-warn-text: 255, 255, 255, 1;
+  --light-disabled-text: 255, 255, 255, 0.5;
+  --light-dividers: 255, 255, 255, 0.12;
+  --light-focused: 255, 255, 255, 0.12;
+  --palette-background-status-bar: 224, 224, 224;
+  --palette-background-app-bar: 245, 245, 245;
+  --palette-background-background: 250, 250, 250;
+  --palette-background-hover: 0, 0, 0;
+  --palette-background-hover-alpha: 0.04;
+  --palette-background-card: 255, 255, 255;
+  --palette-background-dialog: 255, 255, 255;
+  --palette-background-disabled-button: 0, 0, 0;
+  --palette-background-disabled-button-alpha: 0.12;
+  --palette-background-raised-button: 255, 255, 255;
+  --palette-background-focused-button: 0, 0, 0;
+  --palette-background-focused-button-alpha: 0.12;
+  --palette-background-selected-button: 224, 224, 224;
+  --palette-background-selected-disabled-button: 189, 189, 189;
+  --palette-background-disabled-button-toggle: 238, 238, 238;
+  --palette-background-unselected-chip: 224, 224, 224;
+  --palette-background-disabled-list-option: 238, 238, 238;
+  --palette-background-tooltip: 97, 97, 97;
+  --palette-background-status-bar-dark: 0, 0, 0;
+  --palette-background-app-bar-dark: 33, 33, 33;
+  --palette-background-background-dark: 48, 48, 48;
+  --palette-background-hover-dark: 255, 255, 255;
+  --palette-background-hover-dark-alpha: 0.04;
+  --palette-background-card-dark: 66, 66, 66;
+  --palette-background-dialog-dark: 66, 66, 66;
+  --palette-background-disabled-button-dark: 255, 255, 255;
+  --palette-background-disabled-button-dark-alpha: 0.12;
+  --palette-background-raised-button-dark: 66, 66, 66;
+  --palette-background-focused-button-dark: 255, 255, 255;
+  --palette-background-focused-button-dark-alpha: 0.12;
+  --palette-background-selected-button-dark: 33, 33, 33;
+  --palette-background-selected-disabled-button-dark: 66, 66, 66;
+  --palette-background-disabled-button-toggle-dark: 0, 0, 0;
+  --palette-background-unselected-chip-dark: 97, 97, 97;
+  --palette-background-disabled-list-option-dark: 0, 0, 0;
+  --palette-background-tooltip-dark: 97, 97, 97;
+  --palette-foreground-base: 0, 0, 0;
+  --palette-foreground-divider: 0, 0, 0;
+  --palette-foreground-divider-alpha: 0.12;
+  --palette-foreground-dividers: 0, 0, 0;
+  --palette-foreground-dividers-alpha: 0.12;
+  --palette-foreground-disabled: 0, 0, 0;
+  --palette-foreground-disabled-alpha: 0.38;
+  --palette-foreground-disabled-button: 0, 0, 0;
+  --palette-foreground-disabled-button-alpha: 0.26;
+  --palette-foreground-disabled-text: 0, 0, 0;
+  --palette-foreground-disabled-text-alpha: 0.38;
+  --palette-foreground-hint-text: 0, 0, 0;
+  --palette-foreground-hint-text-alpha: 0.38;
+  --palette-foreground-secondary-text: 0, 0, 0;
+  --palette-foreground-secondary-text-alpha: 0.54;
+  --palette-foreground-icon: 0, 0, 0;
+  --palette-foreground-icon-alpha: 0.54;
+  --palette-foreground-icons: 0, 0, 0;
+  --palette-foreground-icons-alpha: 0.54;
+  --palette-foreground-text: 0, 0, 0;
+  --palette-foreground-text-alpha: 0.87;
+  --palette-foreground-slider-min: 0, 0, 0;
+  --palette-foreground-slider-min-alpha: 0.87;
+  --palette-foreground-slider-off: 0, 0, 0;
+  --palette-foreground-slider-off-alpha: 0.26;
+  --palette-foreground-slider-off-active: 0, 0, 0;
+  --palette-foreground-slider-off-active-alpha: 0.38;
+  --palette-foreground-base-dark: 255, 255, 255;
+  --palette-foreground-divider-dark: 255, 255, 255;
+  --palette-foreground-divider-dark-alpha: 0.12;
+  --palette-foreground-dividers-dark: 255, 255, 255;
+  --palette-foreground-dividers-dark-alpha: 0.12;
+  --palette-foreground-disabled-dark: 255, 255, 255;
+  --palette-foreground-disabled-dark-alpha: 0.5;
+  --palette-foreground-disabled-button-dark: 255, 255, 255;
+  --palette-foreground-disabled-button-dark-alpha: 0.3;
+  --palette-foreground-disabled-text-dark: 255, 255, 255;
+  --palette-foreground-disabled-text-dark-alpha: 0.5;
+  --palette-foreground-hint-text-dark: 255, 255, 255;
+  --palette-foreground-hint-text-dark-alpha: 0.5;
+  --palette-foreground-secondary-text-dark: 255, 255, 255;
+  --palette-foreground-secondary-text-dark-alpha: 0.7;
+  --palette-foreground-icon-dark: 255, 255, 255;
+  --palette-foreground-icon-dark-alpha: 1;
+  --palette-foreground-icons-dark: 255, 255, 255;
+  --palette-foreground-icons-dark-alpha: 1;
+  --palette-foreground-text-dark: 255, 255, 255;
+  --palette-foreground-text-dark-alpha: 1;
+  --palette-foreground-slider-min-dark: 255, 255, 255;
+  --palette-foreground-slider-min-dark-alpha: 1;
+  --palette-foreground-slider-off-dark: 255, 255, 255;
+  --palette-foreground-slider-off-dark-alpha: 0.3;
+  --palette-foreground-slider-off-active-dark: 255, 255, 255;
+  --palette-foreground-slider-off-active-dark-alpha: 0.38;
+
+  --palette-primary-50: 231, 249, 249;
+  --palette-primary-100: 195, 241, 240;
+  --palette-primary-200: 155, 231, 230;
+  --palette-primary-300: 114, 221, 219;
+  --palette-primary-400: 84, 214, 212;
+  --palette-primary-500: 54, 207, 204;
+  --palette-primary-600: 48, 202, 199;
+  --palette-primary-700: 41, 195, 192;
+  --palette-primary-800: 34, 189, 185;
+  --palette-primary-900: 22, 178, 173;
+  --palette-primary-A100: 229, 255, 254;
+  --palette-primary-A200: 178, 255, 253;
+  --palette-primary-A400: 127, 255, 251;
+  --palette-primary-A700: 101, 255, 250;
+  --palette-primary-contrast-50: 0, 0, 0, 0.87;
+  --palette-primary-contrast-100: 0, 0, 0, 0.87;
+  --palette-primary-contrast-200: 0, 0, 0, 0.87;
+  --palette-primary-contrast-300: 0, 0, 0, 0.87;
+  --palette-primary-contrast-400: 0, 0, 0, 0.87;
+  --palette-primary-contrast-500: 0, 0, 0, 0.87;
+  --palette-primary-contrast-600: 0, 0, 0, 0.87;
+  --palette-primary-contrast-700: 0, 0, 0, 0.87;
+  --palette-primary-contrast-800: 0, 0, 0, 0.87;
+  --palette-primary-contrast-900: 0, 0, 0, 0.87;
+  --palette-accent-50: 231, 240, 249;
+  --palette-accent-100: 195, 219, 241;
+  --palette-accent-200: 155, 195, 231;
+  --palette-accent-300: 114, 170, 221;
+  --palette-accent-400: 84, 152, 214;
+  --palette-accent-500: 54, 134, 207;
+  --palette-accent-600: 48, 126, 202;
+  --palette-accent-700: 41, 115, 195;
+  --palette-accent-800: 34, 105, 189;
+  --palette-accent-900: 22, 86, 178;
+  --palette-accent-A100: 229, 239, 255;
+  --palette-accent-A200: 178, 207, 255;
+  --palette-accent-A400: 127, 175, 255;
+  --palette-accent-A700: 101, 159, 255;
+  --palette-accent-contrast-50: 0, 0, 0, 0.87;
+  --palette-accent-contrast-100: 0, 0, 0, 0.87;
+  --palette-accent-contrast-200: 0, 0, 0, 0.87;
+  --palette-accent-contrast-300: 0, 0, 0, 0.87;
+  --palette-accent-contrast-400: 0, 0, 0, 0.87;
+  --palette-accent-contrast-500: 255, 255, 255, 1;
+  --palette-accent-contrast-600: 255, 255, 255, 1;
+  --palette-accent-contrast-700: 255, 255, 255, 1;
+  --palette-accent-contrast-800: 255, 255, 255, 1;
+  --palette-accent-contrast-900: 255, 255, 255, 1;
+  --palette-warn-50: 251, 231, 233;
+  --palette-warn-100: 245, 194, 199;
+  --palette-warn-200: 238, 154, 162;
+  --palette-warn-300: 231, 114, 125;
+  --palette-warn-400: 225, 83, 97;
+  --palette-warn-500: 220, 53, 69;
+  --palette-warn-600: 216, 48, 62;
+  --palette-warn-700: 211, 40, 54;
+  --palette-warn-800: 206, 34, 46;
+  --palette-warn-900: 197, 22, 31;
+  --palette-warn-A100: 255, 246, 247;
+  --palette-warn-A200: 255, 195, 198;
+  --palette-warn-A400: 255, 144, 149;
+  --palette-warn-A700: 255, 119, 124;
+  --palette-warn-contrast-50: 0, 0, 0, 0.87;
+  --palette-warn-contrast-100: 0, 0, 0, 0.87;
+  --palette-warn-contrast-200: 0, 0, 0, 0.87;
+  --palette-warn-contrast-300: 0, 0, 0, 0.87;
+  --palette-warn-contrast-400: 255, 255, 255, 1;
+  --palette-warn-contrast-500: 255, 255, 255, 1;
+  --palette-warn-contrast-600: 255, 255, 255, 1;
+  --palette-warn-contrast-700: 255, 255, 255, 1;
+  --palette-warn-contrast-800: 255, 255, 255, 1;
+  --palette-warn-contrast-900: 255, 255, 255, 1;
 }
 
 body {

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

@@ -1,5 +1,3 @@
-@use 'angular-material-css-vars/public-util' as mat-css-utilities;
-
 $mat-css-dark-theme-selector: '.is-dark-theme';
 
 $alpha-disabled-text: 0.38;

apps/client/src/styles/theme.scss

@@ -0,0 +1,110 @@
+@use '@angular/material' as mat;
+
+$dark-primary-text: rgba(black, 0.87);
+$light-primary-text: white;
+
+$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
+  )
+);
+
+$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
+  )
+);
+
+@include mat.core();
+@include mat.legacy-core();
+
+// Create default theme
+$gf-theme-default: mat.define-light-theme(
+  (
+    color: (
+      primary: mat.define-palette($gf-primary),
+      accent: mat.define-palette($gf-secondary, 500, 900, A100)
+    ),
+    density: 0,
+    typography: mat.define-typography-config()
+  )
+);
+@include mat.all-component-themes($gf-theme-default);
+@include mat.all-legacy-component-themes($gf-theme-default);
+
+// Create dark theme
+$gf-theme-dark: mat.define-dark-theme(
+  (
+    color: (
+      primary: mat.define-palette($gf-primary),
+      accent: mat.define-palette($gf-secondary, 500, 900, A100)
+    ),
+    density: 0,
+    typography: mat.define-typography-config()
+  )
+);
+.is-dark-theme {
+  @include mat.all-component-colors($gf-theme-dark);
+  @include mat.all-legacy-component-colors($gf-theme-dark);
+}
+
+:root {
+  --gf-theme-primary-500: #36cfcc;
+  --gf-theme-primary-500-rgb: 0, 187, 255;
+  --gf-theme-secondary-500: #3686cf;
+  --gf-theme-secondary-500-rgb: 78, 208, 94;
+}

libs/ui/src/lib/fire-calculator/fire-calculator.component.html

@@ -7,20 +7,20 @@
         </mat-form-field>-->
 
         <mat-form-field appearance="outline" class="w-100">
-          <mat-label i18n>Savings Rate</mat-label>
+          <mat-label i18n>Savings Rate per Month</mat-label>
           <input
             formControlName="paymentPerPeriod"
             matInput
             step="100"
             type="number"
           />
-          <span class="ml-2" i18n matSuffix>{{ currency }} per month</span>
+          <span class="ml-2" matTextSuffix>{{ currency }}</span>
         </mat-form-field>
 
         <mat-form-field appearance="outline" class="w-100">
           <mat-label i18n>Investment Horizon</mat-label>
           <input formControlName="time" matInput type="number" />
-          <span class="ml-2" i18n matSuffix>years</span>
+          <span class="ml-2" i18n matTextSuffix>years</span>
         </mat-form-field>
 
         <mat-form-field appearance="outline" class="w-100">
@@ -31,7 +31,7 @@
             step="0.25"
             type="number"
           />
-          <span class="ml-2" matSuffix>%</span>
+          <div class="ml-2" matTextSuffix>%</div>
         </mat-form-field>
 
         <gf-value

libs/ui/src/lib/fire-calculator/fire-calculator.module.ts

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/input';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfValueModule } from '../value';

libs/ui/src/lib/holdings-table/holdings-table.module.ts

@@ -2,7 +2,6 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
 import { MatLegacyPaginatorModule as MatPaginatorModule } from '@angular/material/legacy-paginator';
 import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
 import { MatSortModule } from '@angular/material/sort';
@@ -28,7 +27,6 @@ import { HoldingsTableComponent } from './holdings-table.component';
     GfValueModule,
     MatButtonModule,
     MatDialogModule,
-    MatInputModule,
     MatPaginatorModule,
     MatSortModule,
     MatTableModule,

package.json

@@ -86,7 +86,6 @@
     "@simplewebauthn/server": "5.2.1",
     "@stripe/stripe-js": "1.22.0",
     "alphavantage": "2.2.0",
-    "angular-material-css-vars": "4.2.0",
     "bent": "7.3.12",
     "big.js": "6.2.1",
     "bootstrap": "4.6.0",

yarn.lock

@@ -2682,11 +2682,6 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@ctrl/tinycolor@^3.4.0":
-  version "3.4.1"
-  resolved "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz"
-  integrity sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw==
-
 "@cypress/listr-verbose-renderer@^0.4.1":
   version "0.4.1"
   resolved "https://registry.npmjs.org/@cypress/listr-verbose-renderer/-/listr-verbose-renderer-0.4.1.tgz"
@@ -7095,14 +7090,6 @@ alphavantage@2.2.0:
   dependencies:
     cross-fetch "^3.0.5"
 
-angular-material-css-vars@4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/angular-material-css-vars/-/angular-material-css-vars-4.2.0.tgz#364c6cde0ed5f7096541eed95d3a6697e451110f"
-  integrity sha512-6gx5y71BgP+HcICQAUiJ7dlXljnGeJHvadVaIuJAT5bX3uv2jQoODcoLNk3a8wYcU2Z+kk1xsrFYJeB4UQeGNA==
-  dependencies:
-    "@ctrl/tinycolor" "^3.4.0"
-    tslib "^2.3.0"
-
 ansi-align@^3.0.0:
   version "3.0.1"
   resolved "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.1.tgz"