andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-10-31 19:42:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(console): apply private labeling settings (#2059)

Browse Source 
* fetch org design an calc palette

* distinct theme deriv

* calculate self theme

* background palette, fix styles

* component fixes, warn color

* warn color

* stylelint config, set warn color

* lint

* fallback theme

* lint

* granted, owned proejct grid

* dynamic privacy policy, fix home layout, dismissables, info-section

* lint

* apply theme from settings

* enable cache

* fix: add primary tint
This commit is contained in:
Max Peintner
2021-07-28 14:59:52 +02:00
committed by GitHub
parent fb06aed238
commit 7d3c768d8b
47 changed files with 963 additions and 588 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/services/theme.service.ts
+73 -5
View File
@@ -1,12 +1,80 @@
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
declare const tinycolor: any;
export interface Color {
name: string;
hex: string;
darkContrast: boolean;
}
@Injectable()
export class ThemeService {
private _darkTheme: Subject<boolean> = new Subject<boolean>();
public isDarkTheme: Observable<boolean> = this._darkTheme.asObservable();
private _darkTheme: Subject<boolean> = new Subject<boolean>();
public isDarkTheme: Observable<boolean> = this._darkTheme.asObservable();
setDarkTheme(isDarkTheme: boolean): void {
this._darkTheme.next(isDarkTheme);
}
private primaryColorPalette: Color[] = [];
private warnColorPalette: Color[] = [];
private backgroundColorPalette: Color[] = [];
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.darkContrast ? 'hsla(0, 0%, 0%, 0.87)' : '#ffffff',
);
});
}
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');
}
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(),
darkContrast: c.isLight(),
};
}
}