global text styles, tailwind config

apps/login/app/(login)/layout.tsx

@@ -7,7 +7,7 @@ export default async function Layout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="mx-auto flex max-w-[400px] flex-col items-center space-y-4 py-10">
+    <div className="mx-auto flex flex-col items-center space-y-4">
       <div className="relative">
         <ZitadelLogo height={70} width={180} />
       </div>

apps/login/app/layout.tsx

@@ -45,8 +45,8 @@ export default async function RootLayout({
             <div className="h-screen overflow-y-scroll bg-background-light-600 dark:bg-background-dark-600  bg-[url('/grid-light.svg')] dark:bg-[url('/grid-dark.svg')]">
               <GlobalNav />
 
-              <div className="lg:pl-72">
+              <div className="lg:pl-72 pb-4">
-                <div className="mx-auto max-w-xl space-y-8 px-2 pt-20 lg:py-8 lg:px-8">
+                <div className="mx-auto max-w-[440px] space-y-8 pt-20 lg:py-8">
                   <div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
                     <div className="rounded-lg bg-background-light-400 dark:bg-background-dark-500">
                       <AddressBar />
@@ -54,7 +54,7 @@ export default async function RootLayout({
                   </div>
 
                   <div className="rounded-lg bg-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20">
-                    <div className="rounded-lg bg-background-light-400 dark:bg-background-dark-500 p-3.5 lg:p-8">
+                    <div className="rounded-lg bg-background-light-400 dark:bg-background-dark-500 px-8 py-12">
                       {children}
                     </div>
                   </div>

apps/login/app/page.tsx

@@ -1,5 +1,4 @@
 import { demos } from "#/lib/demos";
-import ThemeWrapper from "#/ui/ThemeWrapper";
 import Link from "next/link";
 
 export default function Page() {

apps/login/lib/zitadel.ts

@@ -28,7 +28,6 @@ export function getBranding(
   server: ZitadelServer
 ): Promise<LabelPolicy | undefined> {
   const mgmt = getManagement(server);
-  console.log(process.env.ZITADEL_ORG_ID);
   return mgmt
     .getLabelPolicy(
       {},

apps/login/styles/globals.scss

@@ -20,7 +20,7 @@ html {
   --dark-background-color: #000000;
 }
 
-$types: "background", "primary", "warn", "text";
+$types: "background", "primary", "warn";
 $shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900;
 
 @each $type in $types {
@@ -38,5 +38,36 @@ $shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900;
     .dark .dark\:text-#{$type}-dark-#{$shade} {
       color: var(--theme-dark-#{$type}-#{$shade}) !important;
     }
+
+    .text-#{$type}-light-contrast-#{$shade} {
+      color: var(--theme-light-#{$type}-contrast-#{$shade}) !important;
+    }
+    .dark .dark\:text-#{$type}-dark-contrast-#{$shade} {
+      color: var(--theme-dark-#{$type}-contrast-#{$shade}) !important;
+    }
+  }
+}
+
+$alphatypes: "text", "link";
+
+@each $alphatype in $alphatypes {
+  .text-#{$alphatype}-light {
+    color: var(--theme-light-#{$alphatype}) !important;
+  }
+  .text-#{$alphatype}-light-contrast {
+    color: var(--theme-light-#{$alphatype}-contrast) !important;
+  }
+  .text-#{$alphatype}-light-secondary {
+    color: var(--theme-light-#{$alphatype}-secondary) !important;
+  }
+
+  .dark .dark\:text-#{$alphatype}-dark {
+    color: var(--theme-dark-#{$alphatype}) !important;
+  }
+  .dark .dark\:text-#{$alphatype}-dark-contrast {
+    color: var(--theme-dark-#{$alphatype}-contrast) !important;
+  }
+  .dark .dark\:text-#{$alphatype}-dark-secondary {
+    color: var(--theme-dark-#{$alphatype}-secondary) !important;
   }
 }

apps/login/ui/Avatar.tsx

@@ -58,7 +58,7 @@ export const Avatar: FC<AvatarProps> = ({
 
   return (
     <div
-      className={`w-full h-full flex-shrink-0 flex justify-center items-center cursor-default pointer-events-none group-focus:outline-none group-focus:ring-2 transition-colors duration-200 dark:group-focus:ring-offset-blue bg-primary-light-500 hover:bg-primary-light-400 hover:dark:bg-primary-dark-500 group-focus:ring-primary-light-200 dark:group-focus:ring-primary-dark-400 dark:bg-primary-dark-300 text-white dark:text-blue rounded-full ${
+      className={`w-full h-full flex-shrink-0 flex justify-center items-center cursor-default pointer-events-none group-focus:outline-none group-focus:ring-2 transition-colors duration-200 dark:group-focus:ring-offset-blue bg-primary-light-500 text-primary-light-contrast-500 hover:bg-primary-light-400 hover:dark:bg-primary-dark-500 group-focus:ring-primary-light-200 dark:group-focus:ring-primary-dark-400 dark:bg-primary-dark-300 dark:text-primary-dark-contrast-300 dark:text-blue rounded-full ${
         shadow ? "shadow" : ""
       } ${
         size === AvatarSize.LARGE

apps/login/ui/Button.tsx

@@ -41,7 +41,7 @@ export const getButtonClasses = (
       true,
     "shadow hover:shadow-xl active:shadow-xl disabled:border-none disabled:bg-gray-300 disabled:text-gray-600 disabled:cursor-not-allowed disabled:dark:bg-gray-800 disabled:dark:text-gray-900":
       variant === ButtonVariants.Primary,
-    "bg-primary-light-500 dark:bg-primary-dark-500 hover:bg-primary-light-400 hover:dark:bg-primary-dark-400 text-primary-light-contrast dark:text-primary-dark-contrast":
+    "bg-primary-light-500 dark:bg-primary-dark-500 hover:bg-primary-light-400 hover:dark:bg-primary-dark-400 text-primary-light-contrast-500 dark:text-primary-dark-contrast-500":
       variant === ButtonVariants.Primary && color !== ButtonColors.Warn,
     "bg-warn-light-500 dark:bg-warn-dark-500 hover:bg-warn-light-400 hover:dark:bg-warn-dark-400 text-white dark:text-white":
       variant === ButtonVariants.Primary && color === ButtonColors.Warn,

apps/login/ui/GlobalNav.tsx

@@ -55,7 +55,7 @@ export function GlobalNav() {
           {demos.map((section) => {
             return (
               <div key={section.name}>
-                <div className="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-600">
+                <div className="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-text-light dark:text-text-dark">
                   <div>{section.name}</div>
                 </div>
 
@@ -90,9 +90,9 @@ function GlobalNavItem({
       className={clsx(
         "block rounded-md px-3 py-2 text-sm font-medium hover:text-black dark:hover:text-gray-300",
         {
-          "text-gray-500 dark:text-gray-500 hover:bg-gray-100 hover:dark:bg-gray-800":
+          "text-text-light-secondary dark:text-text-dark-secondary hover:text-text-light hover:dark:text-text-dark":
             !isActive,
-          "text-gray-800 dark:text-gray-200": isActive,
+          "text-primary-light-500 dark:text-primary-dark-500": isActive,
         }
       )}
     >

apps/login/ui/LayoutProviders.tsx

@@ -7,8 +7,8 @@ type Props = {
 };
 
 export function LayoutProviders({ children }: Props) {
-  const { resolvedTheme } = useTheme();
+  //   const { resolvedTheme } = useTheme();
-  const isDark = resolvedTheme && resolvedTheme === "dark";
+  const isDark = false; //resolvedTheme && resolvedTheme === "dark";
 
   //   useEffect(() => {
   //     console.log("layoutproviders useeffect");

apps/login/utils/colors.ts

@@ -84,25 +84,34 @@ export function setTheme(document: any, policy?: LabelPolicyColors) {
   const dark = computeMap(lP, true);
   const light = computeMap(lP, false);
 
-  console.log(dark, light);
+  setColorShades(dark.background, "background", "dark", document);
+  setColorShades(light.background, "background", "light", document);
 
-  setColors(dark.background, "background", "dark", document);
+  setColorShades(dark.primary, "primary", "dark", document);
-  setColors(light.background, "background", "light", document);
+  setColorShades(light.primary, "primary", "light", document);
 
-  setColors(dark.primary, "primary", "dark", document);
+  setColorShades(dark.warn, "warn", "dark", document);
-  setColors(light.primary, "primary", "light", document);
+  setColorShades(light.warn, "warn", "light", document);
 
-  setColors(dark.text, "primary", "dark", document);
+  //   setColorShades(dark.text, "text", "dark", document);
-  setColors(light.text, "primary", "light", document);
+  //   setColorShades(light.text, "text", "light", document);
 
-  setColors(dark.link, "link", "dark", document);
+  //   setColorShades(dark.link, "link", "dark", document);
-  setColors(light.link, "link", "light", document);
+  //   setColorShades(light.link, "link", "light", document);
 
-  setColors(dark.warn, "warn", "dark", document);
+  setColorAlpha(dark.text, "text", "dark", document);
-  setColors(light.warn, "warn", "light", document);
+  setColorAlpha(light.text, "text", "light", document);
+
+  setColorAlpha(dark.link, "link", "dark", document);
+  setColorAlpha(light.link, "link", "light", document);
 }
 
-function setColors(map: Color[], type: string, theme: string, document: any) {
+function setColorShades(
+  map: Color[],
+  type: string,
+  theme: string,
+  document: any
+) {
   map.forEach((color) => {
     document.documentElement.style.setProperty(
       `--theme-${theme}-${type}-${color.name}`,
@@ -115,6 +124,30 @@ function setColors(map: Color[], type: string, theme: string, document: any) {
   });
 }
 
+function setColorAlpha(
+  map: Color[],
+  type: string,
+  theme: string,
+  document: any
+) {
+  const color = map.find((color) => color.name === "500");
+
+  if (color) {
+    document.documentElement.style.setProperty(
+      `--theme-${theme}-${type}`,
+      color.hex
+    );
+    document.documentElement.style.setProperty(
+      `--theme-${theme}-${type}-contrast`,
+      color.contrastColor
+    );
+    document.documentElement.style.setProperty(
+      `--theme-${theme}-${type}-secondary`,
+      `${color.hex}80`
+    );
+  }
+}
+
 function computeColors(hex: string): Color[] {
   return [
     getColorObject(tinycolor(hex).lighten(52), "50"),

packages/zitadel-react/src/components/SignInWithGitlab.tsx

@@ -6,8 +6,8 @@ export interface SignInWithGitlabProps {
 
 export function SignInWithGitlab(props: SignInWithGitlabProps) {
   return (
-    <div className="ui-cursor-pointer ui-flex ui-flex-row ui-items-center ui-bg-white ui-text-black dark:ui-bg-transparent dark:ui-text-white border ui-border-divider-light dark:ui-border-divider-dark rounded-md px-4 text-sm">
+    <div className="ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center ztdl-bg-white ztdl-text-black dark:ztdl-bg-transparent dark:ztdl-text-white border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm">
-      <div className="ui-h-12 ui-w-12 flex items-center justify-center">
+      <div className="ztdl-h-12 ztdl-w-12 flex items-center justify-center">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           width={25}
@@ -33,7 +33,7 @@ export function SignInWithGitlab(props: SignInWithGitlabProps) {
           />
         </svg>
       </div>
-      <span className="ui-ml-4">Sign in with Gitlab</span>
+      <span className="ztdl-ml-4">Sign in with Gitlab</span>
     </div>
   );
 }

packages/zitadel-react/src/components/SignInWithGoogle.tsx

@@ -6,8 +6,8 @@ export interface SignInWithGoogleProps {
 
 export function SignInWithGoogle(props: SignInWithGoogleProps) {
   return (
-    <div className="ui-cursor-pointer ui-flex ui-flex-row ui-items-center ui-bg-white ui-text-black dark:ui-bg-transparent dark:ui-text-white border ui-border-divider-light dark:ui-border-divider-dark rounded-md px-4 text-sm">
+    <div className="ztdl-cursor-pointer ztdl-flex ztdl-flex-row ztdl-items-center ztdl-bg-white ztdl-text-black dark:ztdl-bg-transparent dark:ztdl-text-white border ztdl-border-divider-light dark:ztdl-border-divider-dark rounded-md px-4 text-sm">
-      <div className="ui-h-12 ui-w-12 ui-flex ui-items-center ui-justify-center">
+      <div className="ztdl-h-12 ztdl-w-12 ztdl-flex ztdl-items-center ztdl-justify-center">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           xmlSpace="preserve"
@@ -49,7 +49,7 @@ export function SignInWithGoogle(props: SignInWithGoogleProps) {
           />
         </svg>
       </div>
-      <span className="ui-ml-4">Sign in with Google</span>
+      <span className="ztdl-ml-4">Sign in with Google</span>
     </div>
   );
 }

packages/zitadel-react/src/components/ZitadelUIProvider.tsx

@@ -4,5 +4,7 @@ export type ZitadelUIProps = {
 };
 
 export function ZitadelUIProvider({ dark, children }: ZitadelUIProps) {
-  return <div className={`${dark ? "ui-dark" : "ui-light"} `}>{children}</div>;
+  return (
+    <div className={`${dark ? "ztdl-dark" : "ztdl-light"} `}>{children}</div>
+  );
 }

packages/zitadel-react/tailwind.config.js

@@ -3,7 +3,7 @@ const sharedConfig = require("zitadel-tailwind-config/tailwind.config.js");
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   presets: [sharedConfig],
-  prefix: "ui-",
+  prefix: "ztdl-",
   darkMode: "class",
   content: [`src/**/*.{js,ts,jsx,tsx}`],
 };