TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-12 07:42:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

buf, tsconfig path for login

Browse Source
This commit is contained in:
Max Peintner
2023-04-04 10:28:48 +02:00
parent 987784c1a0
commit 04fed62772
39 changed files with 68 additions and 120423 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
apps/login/utils/colors.ts
View File

@@ -1,5 +1,4 @@
import { makeClientConstructor } from '@grpc/grpc-js';
import tinycolor from 'tinycolor2';
import tinycolor from "tinycolor2";
export interface Color {
name: string;
@@ -8,23 +7,23 @@ export interface Color {
contrastColor: string;
}
export type MapName = 'background' | 'primary' | 'warn' | 'text' | 'link';
export type MapName = "background" | "primary" | "warn" | "text" | "link";
export type ColorName =
| '50'
| '100'
| '200'
| '300'
| '400'
| '500'
| '600'
| '700'
| '800'
| 'C900'
| 'A100'
| 'A200'
| 'A400'
| 'A700';
| "50"
| "100"
| "200"
| "300"
| "400"
| "500"
| "600"
| "700"
| "800"
| "C900"
| "A100"
| "A200"
| "A400"
| "A700";
// export interface ColorMap {
// background: { [key in ColorName]: Color[] };
@@ -38,17 +37,17 @@ export type ColorMap = {
[key in MapName]: { [key in ColorName]: Color[] };
};
export const DARK_PRIMARY = '#2073c4';
export const PRIMARY = '#5469d4';
export const DARK_PRIMARY = "#2073c4";
export const PRIMARY = "#5469d4";
export const DARK_WARN = '#ff3b5b';
export const WARN = '#cd3d56';
export const DARK_WARN = "#ff3b5b";
export const WARN = "#cd3d56";
export const DARK_BACKGROUND = '#111827';
export const BACKGROUND = '#fafafa';
export const DARK_BACKGROUND = "#111827";
export const BACKGROUND = "#fafafa";
export const DARK_TEXT = '#ffffff';
export const TEXT = '#000000';
export const DARK_TEXT = "#ffffff";
export const TEXT = "#000000";
export class ColorService {
dark: ColorMap;
@@ -74,20 +73,20 @@ export class ColorService {
function computeColors(hex: string): Color[] {
return [
getColorObject(tinycolor(hex).lighten(52), '50'),
getColorObject(tinycolor(hex).lighten(37), '100'),
getColorObject(tinycolor(hex).lighten(26), '200'),
getColorObject(tinycolor(hex).lighten(12), '300'),
getColorObject(tinycolor(hex).lighten(6), '400'),
getColorObject(tinycolor(hex), '500'),
getColorObject(tinycolor(hex).darken(6), '600'),
getColorObject(tinycolor(hex).darken(12), '700'),
getColorObject(tinycolor(hex).darken(18), '800'),
getColorObject(tinycolor(hex).darken(24), '900'),
getColorObject(tinycolor(hex).lighten(50).saturate(30), 'A100'),
getColorObject(tinycolor(hex).lighten(30).saturate(30), 'A200'),
getColorObject(tinycolor(hex).lighten(10).saturate(15), 'A400'),
getColorObject(tinycolor(hex).lighten(5).saturate(5), 'A700'),
getColorObject(tinycolor(hex).lighten(52), "50"),
getColorObject(tinycolor(hex).lighten(37), "100"),
getColorObject(tinycolor(hex).lighten(26), "200"),
getColorObject(tinycolor(hex).lighten(12), "300"),
getColorObject(tinycolor(hex).lighten(6), "400"),
getColorObject(tinycolor(hex), "500"),
getColorObject(tinycolor(hex).darken(6), "600"),
getColorObject(tinycolor(hex).darken(12), "700"),
getColorObject(tinycolor(hex).darken(18), "800"),
getColorObject(tinycolor(hex).darken(24), "900"),
getColorObject(tinycolor(hex).lighten(50).saturate(30), "A100"),
getColorObject(tinycolor(hex).lighten(30).saturate(30), "A200"),
getColorObject(tinycolor(hex).lighten(10).saturate(15), "A400"),
getColorObject(tinycolor(hex).lighten(5).saturate(5), "A700"),
];
}
@@ -112,31 +111,31 @@ function isDark(hex: string): boolean {
}
function getContrast(color: string): string {
const onBlack = tinycolor.readability('#000', color);
const onWhite = tinycolor.readability('#fff', color);
const onBlack = tinycolor.readability("#000", color);
const onWhite = tinycolor.readability("#fff", color);
if (onBlack > onWhite) {
return 'hsla(0, 0%, 0%, 0.87)';
return "hsla(0, 0%, 0%, 0.87)";
} else {
return '#ffffff';
return "#ffffff";
}
}
export function computeMap(labelpolicy: any, dark: boolean): ColorMap {
const colorArray = {
background: computeColors(
dark ? labelpolicy.backgroundColorDark : labelpolicy.backgroundColor,
dark ? labelpolicy.backgroundColorDark : labelpolicy.backgroundColor
),
primary: computeColors(
dark ? labelpolicy.primaryColorDark : labelpolicy.primaryColor,
dark ? labelpolicy.primaryColorDark : labelpolicy.primaryColor
),
warn: computeColors(
dark ? labelpolicy.warnColorDark : labelpolicy.warnColor,
dark ? labelpolicy.warnColorDark : labelpolicy.warnColor
),
text: computeColors(
dark ? labelpolicy.fontColorDark : labelpolicy.fontColor,
dark ? labelpolicy.fontColorDark : labelpolicy.fontColor
),
link: computeColors(
dark ? labelpolicy.linkColorDark : labelpolicy.linkColor,
dark ? labelpolicy.linkColorDark : labelpolicy.linkColor
),
};