From 46947ccb1504a7fb22a1598e568d62109018d765 Mon Sep 17 00:00:00 2001 From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com> Date: Sat, 4 Feb 2023 10:58:34 +0100 Subject: [PATCH] Feature/eliminate angular material css vars (#1648) * Eliminate angular-material-css-vars * Update changelog --- CHANGELOG.md | 2 +- apps/client/project.json | 5 +- apps/client/src/app/app.component.ts | 31 ++- apps/client/src/app/app.module.ts | 6 - .../accounts-table/accounts-table.module.ts | 2 - .../admin-market-data.module.ts | 2 +- ...dule.ts => asset-profile-dialog.module.ts} | 0 .../app/pages/account/account-page.module.ts | 2 - apps/client/src/styles.scss | 189 +++++++++++++++++- apps/client/src/styles/ghostfolio-style.scss | 2 - apps/client/src/styles/theme.scss | 110 ++++++++++ .../fire-calculator.component.html | 8 +- .../fire-calculator/fire-calculator.module.ts | 6 +- .../holdings-table/holdings-table.module.ts | 2 - package.json | 1 - yarn.lock | 13 -- 16 files changed, 314 insertions(+), 67 deletions(-) rename apps/client/src/app/components/admin-market-data/asset-profile-dialog/{assset-profile-dialog.module.ts => asset-profile-dialog.module.ts} (100%) create mode 100644 apps/client/src/styles/theme.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 36d02ec9b..066edf13e 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/apps/client/project.json b/apps/client/project.json index f58bb3ae5..abb8993aa 100644 --- a/apps/client/project.json +++ b/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, diff --git a/apps/client/src/app/app.component.ts b/apps/client/src/app/app.component.ts index a412a8054..b6a40c061 100644 --- a/apps/client/src/app/app.component.ts +++ b/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 { - ActivatedRoute, - NavigationEnd, - PRIMARY_OUTLET, - Router -} from '@angular/router'; -import { - primaryColorHex, - secondaryColorHex, - warnColorHex -} from '@ghostfolio/common/config'; +import { NavigationEnd, PRIMARY_OUTLET, Router } from '@angular/router'; 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); - this.materialCssVarsService.setAccentColor(secondaryColorHex); - this.materialCssVarsService.setWarnColor(warnColorHex); + private toggleThemeStyleClass(isDarkTheme: boolean) { + if (isDarkTheme) { + this.document.body.classList.add('is-dark-theme'); + } else { + this.document.body.classList.remove('is-dark-theme'); + } } } diff --git a/apps/client/src/app/app.module.ts b/apps/client/src/app/app.module.ts index 90a8a669c..3bf551aa4 100644 --- a/apps/client/src/app/app.module.ts +++ b/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, diff --git a/apps/client/src/app/components/accounts-table/accounts-table.module.ts b/apps/client/src/app/components/accounts-table/accounts-table.module.ts index 0d5bc3f21..cf66c6205 100644 --- a/apps/client/src/app/components/accounts-table/accounts-table.module.ts +++ b/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, diff --git a/apps/client/src/app/components/admin-market-data/admin-market-data.module.ts b/apps/client/src/app/components/admin-market-data/admin-market-data.module.ts index 787080e49..eb1a99830 100644 --- a/apps/client/src/app/components/admin-market-data/admin-market-data.module.ts +++ b/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], diff --git a/apps/client/src/app/components/admin-market-data/asset-profile-dialog/assset-profile-dialog.module.ts b/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.module.ts similarity index 100% rename from apps/client/src/app/components/admin-market-data/asset-profile-dialog/assset-profile-dialog.module.ts rename to apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.module.ts diff --git a/apps/client/src/app/pages/account/account-page.module.ts b/apps/client/src/app/pages/account/account-page.module.ts index 7748dfb45..1cf362c1d 100644 --- a/apps/client/src/app/pages/account/account-page.module.ts +++ b/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, diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss index 5604248f1..9c4a9bb2e 100644 --- a/apps/client/src/styles.scss +++ b/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 { diff --git a/apps/client/src/styles/ghostfolio-style.scss b/apps/client/src/styles/ghostfolio-style.scss index c10e713c4..103f4cf14 100644 --- a/apps/client/src/styles/ghostfolio-style.scss +++ b/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; diff --git a/apps/client/src/styles/theme.scss b/apps/client/src/styles/theme.scss new file mode 100644 index 000000000..a6f6107c2 --- /dev/null +++ b/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; +} diff --git a/libs/ui/src/lib/fire-calculator/fire-calculator.component.html b/libs/ui/src/lib/fire-calculator/fire-calculator.component.html index 499f437e1..bd73be442 100644 --- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.html +++ b/libs/ui/src/lib/fire-calculator/fire-calculator.component.html @@ -7,20 +7,20 @@ --> - Savings Rate + Savings Rate per Month - {{ currency }} per month + {{ currency }} Investment Horizon - years + years @@ -31,7 +31,7 @@ step="0.25" type="number" /> - % +
%