From 46f8bed03bdd7ac0ecfbe9a1f795cfb73c4c7153 Mon Sep 17 00:00:00 2001 From: Thomas <4159106+dtslvr@users.noreply.github.com> Date: Tue, 31 Jan 2023 21:29:07 +0100 Subject: [PATCH] Eliminate angular-material-css-vars --- apps/client/project.json | 5 +- apps/client/src/app/app.component.ts | 31 ++- apps/client/src/app/app.module.ts | 6 - apps/client/src/styles.scss | 189 +++++++++++++++++-- apps/client/src/styles/ghostfolio-style.scss | 2 - apps/client/src/styles/theme.scss | 108 +++++++++++ package.json | 1 - yarn.lock | 13 -- 8 files changed, 303 insertions(+), 52 deletions(-) create mode 100644 apps/client/src/styles/theme.scss 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/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..5084c54ab --- /dev/null +++ b/apps/client/src/styles/theme.scss @@ -0,0 +1,108 @@ +@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 + ) +); +@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 + ) +); +.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/package.json b/package.json index f6a689f94..28e5ac996 100644 --- a/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index c900b5936..67fdc30f3 100644 --- a/yarn.lock +++ b/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"