diff --git a/apps/login/app/(login)/layout.tsx b/apps/login/app/(login)/layout.tsx index 957c0e40b9b..157775e3422 100644 --- a/apps/login/app/(login)/layout.tsx +++ b/apps/login/app/(login)/layout.tsx @@ -1,5 +1,4 @@ import { ZitadelLogo } from "#/ui/ZitadelLogo"; -import { ColorService } from "#/utils/colors"; import React from "react"; export default async function Layout({ @@ -7,8 +6,6 @@ export default async function Layout({ }: { children: React.ReactNode; }) { - const colorService = new ColorService(); - return (
diff --git a/apps/login/app/layout.tsx b/apps/login/app/layout.tsx index 39d9dbde523..7c45e625bb5 100644 --- a/apps/login/app/layout.tsx +++ b/apps/login/app/layout.tsx @@ -29,7 +29,7 @@ export default async function RootLayout({ -
+
diff --git a/apps/login/app/page.tsx b/apps/login/app/page.tsx index 7726e16749f..9d368721d17 100644 --- a/apps/login/app/page.tsx +++ b/apps/login/app/page.tsx @@ -22,7 +22,7 @@ export default function Page() {
{item.name} diff --git a/apps/login/styles/globals.css b/apps/login/styles/globals.css index c94e8298d3f..0d4ea47aa10 100755 --- a/apps/login/styles/globals.css +++ b/apps/login/styles/globals.css @@ -18,10 +18,34 @@ html { --dark-background-color: #000000; } +.bg-background-light-500 { + background-color: var(--theme-light-background-500); +} + .bg-background-light-600 { - background-color: var(--background-color); + background-color: var(--theme-light-background-600); +} + +.bg-background-light-700 { + background-color: var(--theme-light-background-700); +} + +.bg-background-light-800 { + background-color: var(--theme-light-background-600); +} + +.dark .dark\:bg-background-dark-500 { + background-color: var(--theme-dark-background-500) !important; } .dark .dark\:bg-background-dark-600 { - background-color: var(--dark-background-color) !important; + background-color: var(--theme-dark-background-600) !important; +} + +.dark .dark\:bg-background-dark-700 { + background-color: var(--theme-dark-background-700) !important; +} + +.dark .dark\:bg-background-dark-800 { + background-color: var(--theme-dark-background-800) !important; } diff --git a/apps/login/tailwind.config.js b/apps/login/tailwind.config.js index cceb0dd40b3..168e3eb3ab3 100644 --- a/apps/login/tailwind.config.js +++ b/apps/login/tailwind.config.js @@ -78,16 +78,22 @@ module.exports = { 600: colors.gray[50], }, }, + divider: { + dark: "rgba(135,149,161,.2)", + light: "rgba(135,149,161,.2)", + }, input: { light: { label: "#000000c7", background: "#00000004", - border: "rgba(26,25,25,.2196078431);", + border: "#1a191954", + hoverborder: "1a1b1b", }, dark: { label: "#ffffffc7", background: "#00000020", - border: "rgba(249,247,247,.1450980392)", + border: "#f9f7f775", + hoverborder: "#e0e0e0", }, }, button: { diff --git a/apps/login/ui/Avatar.tsx b/apps/login/ui/Avatar.tsx index c76eb3b9f09..305e9dc0b8b 100644 --- a/apps/login/ui/Avatar.tsx +++ b/apps/login/ui/Avatar.tsx @@ -73,7 +73,7 @@ export const Avatar: FC = ({ > {imageUrl ? ( ) : ( diff --git a/apps/login/ui/Boundary.tsx b/apps/login/ui/Boundary.tsx index 3a755f3d7b3..e02499de213 100644 --- a/apps/login/ui/Boundary.tsx +++ b/apps/login/ui/Boundary.tsx @@ -1,5 +1,5 @@ -import clsx from 'clsx'; -import React from 'react'; +import clsx from "clsx"; +import React from "react"; const Label = ({ children, @@ -8,18 +8,18 @@ const Label = ({ }: { children: React.ReactNode; animateRerendering?: boolean; - color?: 'default' | 'pink' | 'blue' | 'violet' | 'cyan' | 'orange'; + color?: "default" | "pink" | "blue" | "violet" | "cyan" | "orange"; }) => { return (
{children} @@ -28,39 +28,39 @@ const Label = ({ }; export const Boundary = ({ children, - labels = ['children'], - size = 'default', - color = 'default', + labels = ["children"], + size = "default", + color = "default", animateRerendering = true, }: { children: React.ReactNode; labels?: string[]; - size?: 'small' | 'default'; - color?: 'default' | 'pink' | 'blue' | 'violet' | 'cyan' | 'orange'; + size?: "small" | "default"; + color?: "default" | "pink" | "blue" | "violet" | "cyan" | "orange"; animateRerendering?: boolean; }) => { return (
{labels.map((label) => { diff --git a/apps/login/ui/GlobalNav.tsx b/apps/login/ui/GlobalNav.tsx index 5cd977f8b31..9919f238191 100644 --- a/apps/login/ui/GlobalNav.tsx +++ b/apps/login/ui/GlobalNav.tsx @@ -14,7 +14,7 @@ export function GlobalNav() { const close = () => setIsOpen(false); return ( -
+
true, "border border-warn-light-500 dark:border-warn-dark-500 hover:border-warn-light-500 hover:dark:border-warn-dark-500 focus:border-warn-light-500 focus:dark:border-warn-dark-500": error, - "pointer-events-none text-gray-500 dark:text-gray-800 border border-gray-700 dark:border-gray-900 border-opacity-30 dark:border-opacity-30 hover:border-gray-700 hover:dark:border-gray-900 hover:border-opacity-30 hover:dark:border-opacity-30 cursor-default": + "pointer-events-none text-gray-500 dark:text-gray-800 border border-input-light-border dark:border-input-dark-border hover:border-light-hoverborder hover:dark:border-hoverborder cursor-default": disabled, }); diff --git a/apps/login/ui/ThemeWrapper.tsx b/apps/login/ui/ThemeWrapper.tsx index d736534ae17..76d87f6ec85 100644 --- a/apps/login/ui/ThemeWrapper.tsx +++ b/apps/login/ui/ThemeWrapper.tsx @@ -1,7 +1,7 @@ "use client"; import { LabelPolicy } from "#/../../packages/zitadel-server/dist"; -import { useEffect } from "react"; +import { ColorService } from "#/utils/colors"; type Props = { branding: LabelPolicy | undefined; @@ -9,31 +9,25 @@ type Props = { }; const ThemeWrapper = ({ children, branding }: Props) => { + const colorService = new ColorService(branding); + const defaultClasses = "bg-background-light-600 dark:bg-background-dark-600"; - console.log(branding); - useEffect(() => { - if (branding) { - document.documentElement.style.setProperty( - "--background-color", - branding?.backgroundColor - ); - document.documentElement.style.setProperty( - "--dark-background-color", - branding?.backgroundColorDark - ); - } - }, []); + // console.log(branding); + // useEffect(() => { + // if (branding) { + // document.documentElement.style.setProperty( + // "--background-color", + // branding?.backgroundColor + // ); + // document.documentElement.style.setProperty( + // "--dark-background-color", + // branding?.backgroundColorDark + // ); + // } + // }, []); - return ( -
- {children} - {/* */} -
- ); + return
{children}
; }; export default ThemeWrapper; diff --git a/apps/login/utils/colors.ts b/apps/login/utils/colors.ts index 97550947605..c47c50380b2 100644 --- a/apps/login/utils/colors.ts +++ b/apps/login/utils/colors.ts @@ -1,6 +1,8 @@ +import { LabelPolicy } from "#/../../packages/zitadel-server/dist"; +import { secondsToMilliseconds } from "date-fns"; import tinycolor from "tinycolor2"; -export interface ColorForTiny { +export interface Color { name: string; hex: string; rgb: string; @@ -25,16 +27,8 @@ export type ColorName = | "A400" | "A700"; -// export interface ColorMap { -// background: { [key in ColorName]: Color[] }; -// primary: { [key in ColorName]: Color[] }; -// warn: { [key in ColorName]: Color[] }; -// text: { [key in ColorName]: Color[] }; -// link: { [key in ColorName]: Color[] }; -// } - export type ColorMap = { - [key in MapName]: { [key in ColorName]: ColorForTiny[] }; + [key in MapName]: Color[]; }; export const DARK_PRIMARY = "#2073c4"; @@ -53,7 +47,7 @@ export class ColorService { dark: ColorMap; light: ColorMap; - constructor() { + constructor(policy?: LabelPolicy) { const lP = { backgroundColor: BACKGROUND, backgroundColorDark: DARK_BACKGROUND, @@ -63,15 +57,65 @@ export class ColorService { warnColorDark: DARK_WARN, fontColor: TEXT, fontColorDark: DARK_TEXT, - linkColor: BACKGROUND, - linkColorDark: DARK_BACKGROUND, + linkColor: TEXT, + linkColorDark: DARK_TEXT, }; + + if (policy) { + lP.backgroundColor = policy.backgroundColor; + lP.backgroundColorDark = policy.backgroundColorDark; + lP.primaryColor = policy.primaryColor; + lP.primaryColorDark = policy.primaryColorDark; + lP.warnColor = policy.warnColor; + lP.warnColorDark = policy.warnColorDark; + lP.fontColor = policy.fontColor; + lP.fontColorDark = policy.fontColorDark; + lP.linkColor = policy.fontColor; + lP.linkColorDark = policy.fontColorDark; + } this.dark = computeMap(lP, true); this.light = computeMap(lP, false); + + setColors(this.dark.background, "background", "dark"); + setColors(this.light.background, "background", "light"); + + setColors(this.dark.primary, "primary", "dark"); + setColors(this.light.primary, "primary", "light"); + + setColors(this.dark.text, "primary", "dark"); + setColors(this.light.text, "primary", "light"); + + setColors(this.dark.link, "link", "dark"); + setColors(this.light.link, "link", "light"); + + setColors(this.dark.warn, "warn", "dark"); + setColors(this.light.warn, "warn", "light"); } } -function computeColors(hex: string): ColorForTiny[] { +function setColors(map: Color[], type: string, theme: string) { + map.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 + ); + }); + + // document.documentElement.style.setProperty( + // `--${prefix}background-color`, + // map?.background[500]., + // ); + // document.documentElement.style.setProperty( + // "--dark-background-color", + // branding?.backgroundColorDark + // ); +} + +function computeColors(hex: string): Color[] { return [ getColorObject(tinycolor(hex).lighten(52), "50"), getColorObject(tinycolor(hex).lighten(37), "100"), @@ -90,14 +134,14 @@ function computeColors(hex: string): ColorForTiny[] { ]; } -function getColorObject(value: any, name: string): ColorForTiny { +function getColorObject(value: any, name: string): Color { const c = tinycolor(value); return { name: name, hex: c.toHexString(), rgb: c.toRgbString(), contrastColor: getContrast(c.toHexString()), - }; + } as Color; } function isLight(hex: string): boolean { @@ -121,7 +165,7 @@ function getContrast(color: string): string { } export function computeMap(labelpolicy: any, dark: boolean): ColorMap { - const colorArray = { + return { background: computeColors( dark ? labelpolicy.backgroundColorDark : labelpolicy.backgroundColor ), @@ -138,20 +182,9 @@ export function computeMap(labelpolicy: any, dark: boolean): ColorMap { dark ? labelpolicy.linkColorDark : labelpolicy.linkColor ), }; - - let mapped: ColorMap = {} as any; - Object.entries(colorArray).forEach(([mapname, colors]) => { - (mapped as any)[mapname] = {}; - colors.forEach((color) => { - (mapped as any)[mapname][`${color.name}`] = color.hex; - (mapped as any)[mapname][`contrast-${color.name}`] = color.contrastColor; - }); - }); - - return mapped; } -export interface Color { +export interface ColorShade { 200: string; 300: string; 500: string; @@ -299,7 +332,7 @@ export const COLORS = [ }, ]; -export function getColorHash(value: string): Color { +export function getColorHash(value: string): ColorShade { let hash = 0; if (value.length === 0) { @@ -327,7 +360,7 @@ export function hashCode(str: string, seed = 0): number { return 4294967296 * (2097151 & h2) + (h1 >>> 0); } -export function getMembershipColor(role: string): Color { +export function getMembershipColor(role: string): ColorShade { const hash = hashCode(role); let color = COLORS[hash % COLORS.length]; diff --git a/packages/zitadel-react/src/components/SignInWithGitlab.tsx b/packages/zitadel-react/src/components/SignInWithGitlab.tsx index be863c1805d..7c16b70e623 100644 --- a/packages/zitadel-react/src/components/SignInWithGitlab.tsx +++ b/packages/zitadel-react/src/components/SignInWithGitlab.tsx @@ -6,7 +6,7 @@ export interface SignInWithGitlabProps { export function SignInWithGitlab(props: SignInWithGitlabProps) { return ( -
+
+