feat(console): MDC components (#6482)

mdc components

---------

Co-authored-by: Elio Bischof <[email protected]>
This commit is contained in:
Max Peintner
2023-10-26 08:29:06 +00:00
committed by GitHub
co-authored by Elio Bischof
parent cb7b50b513
commit b099a26a16
412 changed files with 2711 additions and 2698 deletions
-68
View File
@@ -1,6 +1,5 @@
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { LabelPolicy } from '../proto/generated/zitadel/policy_pb';
declare const tinycolor: any;
@@ -41,7 +40,6 @@ export class ThemeService {
this.setDarkTheme(true);
}
}
this.applyLabelPolicy(); // apply default
}
setDarkTheme(isDarkTheme: boolean): void {
@@ -125,70 +123,4 @@ export class ThemeService {
return '#ffffff';
}
}
public setDefaultColors = () => {
this.savePrimaryColor(DARK_PRIMARY, true);
this.savePrimaryColor(PRIMARY, false);
this.saveWarnColor(DARK_WARN, true);
this.saveWarnColor(WARN, false);
this.saveBackgroundColor(DARK_BACKGROUND, true);
this.saveBackgroundColor(BACKGROUND, false);
this.saveTextColor(DARK_TEXT, true);
this.saveTextColor(TEXT, false);
};
public applyLabelPolicy(labelpolicy?: LabelPolicy.AsObject) {
if (labelpolicy) {
const darkPrimary = labelpolicy?.primaryColorDark ?? DARK_PRIMARY;
const lightPrimary = labelpolicy?.primaryColor ?? PRIMARY;
const darkWarn = labelpolicy?.warnColorDark ?? DARK_WARN;
const lightWarn = labelpolicy?.warnColor ?? WARN;
let darkBackground = labelpolicy?.backgroundColorDark ?? DARK_BACKGROUND;
let lightBackground = labelpolicy?.backgroundColor ?? BACKGROUND;
let darkText = labelpolicy?.fontColorDark ?? DARK_TEXT;
let lightText = labelpolicy?.fontColor ?? TEXT;
this.savePrimaryColor(darkPrimary, true);
this.savePrimaryColor(lightPrimary, false);
this.saveWarnColor(darkWarn, true);
this.saveWarnColor(lightWarn, false);
if (darkBackground && !this.isDark(darkBackground)) {
console.info(
`Background (${darkBackground}) is not dark enough for a dark theme. Falling back to zitadel background`,
);
darkBackground = '#111827';
}
this.saveBackgroundColor(darkBackground || '#111827', true);
if (lightBackground && !this.isLight(lightBackground)) {
console.info(
`Background (${lightBackground}) is not light enough for a light theme. Falling back to zitadel background`,
);
lightBackground = '#fafafa';
}
this.saveBackgroundColor(lightBackground || '#fafafa', false);
if (darkText && !this.isLight(darkText)) {
console.info(`Text color (${darkText}) is not light enough for a dark theme. Falling back to zitadel's text color`);
darkText = '#ffffff';
}
this.saveTextColor(darkText || '#ffffff', true);
if (lightText && !this.isDark(lightText)) {
console.info(`Text color (${lightText}) is not dark enough for a light theme. Falling back to zitadel's text color`);
lightText = '#000000';
}
this.saveTextColor(lightText || '#000000', false);
} else {
this.setDefaultColors();
}
}
}