TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-02-28 16:37:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(console): dont apply colors from branding settings (#6853)

Browse Source 
fix: dont apply colors in console, clean up theme service
This commit is contained in:
Max Peintner 2023-11-02 07:41:36 +01:00 committed by GitHub
parent 814e09f1d5
commit c8dc14ca9d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 1 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts
View File

@ -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<any> {
return (this.service as ManagementService)
.resetLabelPolicyToDefault()

93
console/src/app/services/theme.service.ts
View File

@ -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<boolean> = new BehaviorSubject<boolean>(true);
public isDarkTheme: Observable<boolean> = 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';
}
}
}