From d27136dcbab9b2a47d7bac5fa754b58d5674a61f Mon Sep 17 00:00:00 2001 From: Max Peintner Date: Thu, 2 Nov 2023 07:41:36 +0100 Subject: [PATCH] fix(console): dont apply colors from branding settings (#6853) fix: dont apply colors in console, clean up theme service (cherry picked from commit c8dc14ca9d33c2d9502cddc119a3baabad1cb9c1) --- .../private-labeling-policy.component.ts | 32 +------ console/src/app/services/theme.service.ts | 93 ------------------- 2 files changed, 1 insertion(+), 124 deletions(-) diff --git a/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts b/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts index 5539ef3620..fe2ad38251 100644 --- a/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts +++ b/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts @@ -20,15 +20,7 @@ import { AdminService } from 'src/app/services/admin.service'; import { AssetEndpoint, AssetService, AssetType } from 'src/app/services/asset.service'; import { ManagementService } from 'src/app/services/mgmt.service'; import { StorageKey, StorageLocation, StorageService } from 'src/app/services/storage.service'; -import { - BACKGROUND, - DARK_BACKGROUND, - DARK_PRIMARY, - DARK_WARN, - PRIMARY, - ThemeService, - WARN, -} from 'src/app/services/theme.service'; +import { ThemeService } from 'src/app/services/theme.service'; import { ToastService } from 'src/app/services/toast.service'; import * as opentype from 'opentype.js'; @@ -658,7 +650,6 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy { this.getData().then((data) => { if (data.policy) { this.data = data.policy; - this.applyToConsole(data.policy); } }); this.getPreviewData().then((data) => { @@ -680,7 +671,6 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy { this.getData().then((data) => { if (data.policy) { this.data = data.policy; - this.applyToConsole(data.policy); } }); }, 1000); @@ -691,26 +681,6 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy { } } - private applyToConsole(labelpolicy: LabelPolicy.AsObject): void { - const darkPrimary = labelpolicy?.primaryColorDark || DARK_PRIMARY; - const lightPrimary = labelpolicy?.primaryColor || PRIMARY; - - const darkWarn = labelpolicy?.warnColorDark || DARK_WARN; - const lightWarn = labelpolicy?.warnColor || WARN; - - const darkBackground = labelpolicy?.backgroundColorDark || DARK_BACKGROUND; - const lightBackground = labelpolicy?.backgroundColor || BACKGROUND; - - this.themeService.savePrimaryColor(darkPrimary, true); - this.themeService.savePrimaryColor(lightPrimary, false); - - this.themeService.saveWarnColor(darkWarn, true); - this.themeService.saveWarnColor(lightWarn, false); - - this.themeService.saveBackgroundColor(darkBackground, true); - this.themeService.saveBackgroundColor(lightBackground, false); - } - public resetPolicy(): Promise { return (this.service as ManagementService) .resetLabelPolicyToDefault() diff --git a/console/src/app/services/theme.service.ts b/console/src/app/services/theme.service.ts index 7f2ebde463..2fe5c29e25 100644 --- a/console/src/app/services/theme.service.ts +++ b/console/src/app/services/theme.service.ts @@ -10,26 +10,11 @@ export interface Color { contrastColor: string; } -export const DARK_PRIMARY = '#2073c4'; -export const PRIMARY = '#5469d4'; - -export const DARK_WARN = '#ff3b5b'; -export const WARN = '#cd3d56'; - -export const DARK_BACKGROUND = '#111827'; -export const BACKGROUND = '#fafafa'; - -export const DARK_TEXT = '#ffffff'; -export const TEXT = '#000000'; - @Injectable() export class ThemeService { private _darkTheme: BehaviorSubject = new BehaviorSubject(true); public isDarkTheme: Observable = this._darkTheme.asObservable(); public loading: boolean = false; - private primaryColorPalette: Color[] = []; - private warnColorPalette: Color[] = []; - private backgroundColorPalette: Color[] = []; constructor() { const theme = localStorage.getItem('theme'); @@ -45,82 +30,4 @@ export class ThemeService { setDarkTheme(isDarkTheme: boolean): void { this._darkTheme.next(isDarkTheme); } - - public updateTheme(colors: Color[], type: string, theme: string): void { - colors.forEach((color) => { - document.documentElement.style.setProperty(`--theme-${theme}-${type}-${color.name}`, color.hex); - document.documentElement.style.setProperty(`--theme-${theme}-${type}-contrast-${color.name}`, color.contrastColor); - }); - } - - public savePrimaryColor(color: string, isDark: boolean): void { - this.primaryColorPalette = this.computeColors(color); - this.updateTheme(this.primaryColorPalette, 'primary', isDark ? 'dark' : 'light'); - } - - public saveWarnColor(color: string, isDark: boolean): void { - this.warnColorPalette = this.computeColors(color); - this.updateTheme(this.warnColorPalette, 'warn', isDark ? 'dark' : 'light'); - } - - public saveBackgroundColor(color: string, isDark: boolean): void { - this.backgroundColorPalette = this.computeColors(color); - this.updateTheme(this.backgroundColorPalette, 'background', isDark ? 'dark' : 'light'); - } - - public saveTextColor(colorHex: string, isDark: boolean): void { - const theme = isDark ? 'dark' : 'light'; - document.documentElement.style.setProperty(`--theme-${theme}-${'text'}`, colorHex); - const secondaryTextHex = tinycolor(colorHex).setAlpha(0.78).toHex8String(); - document.documentElement.style.setProperty(`--theme-${theme}-${'secondary-text'}`, secondaryTextHex); - } - - private computeColors(hex: string): Color[] { - return [ - this.getColorObject(tinycolor(hex).lighten(52), '50'), - this.getColorObject(tinycolor(hex).lighten(37), '100'), - this.getColorObject(tinycolor(hex).lighten(26), '200'), - this.getColorObject(tinycolor(hex).lighten(12), '300'), - this.getColorObject(tinycolor(hex).lighten(6), '400'), - this.getColorObject(tinycolor(hex), '500'), - this.getColorObject(tinycolor(hex).darken(6), '600'), - this.getColorObject(tinycolor(hex).darken(12), '700'), - this.getColorObject(tinycolor(hex).darken(18), '800'), - this.getColorObject(tinycolor(hex).darken(24), '900'), - this.getColorObject(tinycolor(hex).lighten(50).saturate(30), 'A100'), - this.getColorObject(tinycolor(hex).lighten(30).saturate(30), 'A200'), - this.getColorObject(tinycolor(hex).lighten(10).saturate(15), 'A400'), - this.getColorObject(tinycolor(hex).lighten(5).saturate(5), 'A700'), - ]; - } - - private getColorObject(value: any, name: string): Color { - const c = tinycolor(value); - return { - name: name, - hex: c.toHexString(), - rgb: c.toRgbString(), - contrastColor: this.getContrast(c.toHexString()), - }; - } - - public isLight(hex: string): boolean { - const color = tinycolor(hex); - return color.isLight(); - } - - public isDark(hex: string): boolean { - const color = tinycolor(hex); - return color.isDark(); - } - - public getContrast(color: string): string { - const onBlack = tinycolor.readability('#000', color); - const onWhite = tinycolor.readability('#fff', color); - if (onBlack > onWhite) { - return 'hsla(0, 0%, 0%, 0.87)'; - } else { - return '#ffffff'; - } - } }