styles, assets, nav

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

@@ -1,18 +1,18 @@
-'use client';
+"use client";
 
-import { Boundary } from '#/ui/Boundary';
+import { Boundary } from "#/ui/Boundary";
-import { Button } from '#/ui/Button';
+import { Button } from "#/ui/Button";
-import React from 'react';
+import React from "react";
 
 export default function Error({ error, reset }: any) {
   React.useEffect(() => {
-    console.log('logging error:', error);
+    console.log("logging error:", error);
   }, [error]);
 
   return (
-    <Boundary labels={['Home page Error UI']} color="pink">
+    <Boundary labels={["Home page Error UI"]} color="pink">
       <div className="space-y-4">
-        <div className="text-sm text-vercel-pink">
+        <div className="text-sm text-pink-500">
           <strong className="font-bold">Error:</strong> {error?.message}
         </div>
         <div>

apps/login/app/layout.tsx

@@ -11,7 +11,7 @@ import { server } from "../lib/zitadel";
 import { LabelPolicyColors } from "#/utils/colors";
 
 const lato = Lato({
-  weight: "400",
+  weight: ["400", "700", "900"],
   subsets: ["latin"],
 });
 
@@ -22,6 +22,9 @@ export default async function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
+  // later only shown with dev mode enabled
+  const showNav = true;
+
   const branding = await getBranding(server);
   let partialPolicy: LabelPolicyColors | undefined;
   console.log(branding);
@@ -44,23 +47,29 @@ export default async function RootLayout({
         <ThemeWrapper branding={partialPolicy}>
           <LayoutProviders>
             <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 />
+              {showNav && <GlobalNav />}
 
-              <div className="lg:pl-72 pb-4">
+              <div className={`${showNav ? "lg:pl-72" : ""} pb-4`}>
                 <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">
+                  {showNav && (
-                    <div className="rounded-lg bg-background-light-400 dark:bg-background-dark-500">
+                    <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">
-                      <AddressBar />
+                      <div className="rounded-lg bg-background-light-400 dark:bg-background-dark-500">
+                        <AddressBar />
+                      </div>
                     </div>
-                  </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-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20 mb-10">
                     <div className="rounded-lg bg-background-light-400 dark:bg-background-dark-500 px-8 py-12">
                       {children}
                     </div>
                   </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-vc-border-gradient dark:bg-dark-vc-border-gradient p-px shadow-lg shadow-black/5 dark:shadow-black/20 ${
+                      showNav ? "" : "max-w-[440px] w-full fixed bottom-4"
+                    }`}
+                  >
                     <div className="rounded-lg bg-background-light-400 dark:bg-background-dark-500">
                       <Byline />
                     </div>

apps/login/public/favicon/safari-pinned-tab.svg

@@ -1,33 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="1024.000000pt" height="1024.000000pt" viewBox="0 0 1024.000000 1024.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.11, written by Peter Selinger 2001-2013
-</metadata>
-<g transform="translate(0.000000,1024.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M4785 10234 c-22 -2 -92 -9 -155 -14 -1453 -131 -2814 -915 -3676
--2120 -480 -670 -787 -1430 -903 -2235 -41 -281 -46 -364 -46 -745 0 -381 5
--464 46 -745 278 -1921 1645 -3535 3499 -4133 332 -107 682 -180 1080 -224
-155 -17 825 -17 980 0 687 76 1269 246 1843 539 88 45 105 57 93 67 -8 6 -383
-509 -833 1117 l-818 1105 -1025 1517 c-564 834 -1028 1516 -1032 1516 -4 1 -8
--673 -10 -1496 -3 -1441 -4 -1499 -22 -1533 -26 -49 -46 -69 -88 -91 -32 -16
--60 -19 -211 -19 l-173 0 -46 29 c-30 19 -52 44 -67 73 l-21 45 2 2005 3 2006
-31 39 c16 21 50 48 74 61 41 20 57 22 230 22 204 0 238 -8 291 -66 15 -16 570
--852 1234 -1859 664 -1007 1572 -2382 2018 -3057 l810 -1227 41 27 c363 236
-747 572 1051 922 647 743 1064 1649 1204 2615 41 281 46 364 46 745 0 381 -5
-464 -46 745 -278 1921 -1645 3535 -3499 4133 -327 106 -675 179 -1065 223 -96
-10 -757 21 -840 13z m2094 -3094 c48 -24 87 -70 101 -118 8 -26 10 -582 8
--1835 l-3 -1798 -317 486 -318 486 0 1307 c0 845 4 1320 10 1343 16 56 51 100
-99 126 41 21 56 23 213 23 148 0 174 -2 207 -20z"/>
-<path d="M7843 789 c-35 -22 -46 -37 -15 -20 22 13 58 40 52 41 -3 0 -20 -10
--37 -21z"/>
-<path d="M7774 744 c-18 -14 -18 -15 4 -4 12 6 22 13 22 15 0 8 -5 6 -26 -11z"/>
-<path d="M7724 714 c-18 -14 -18 -15 4 -4 12 6 22 13 22 15 0 8 -5 6 -26 -11z"/>
-<path d="M7674 684 c-18 -14 -18 -15 4 -4 12 6 22 13 22 15 0 8 -5 6 -26 -11z"/>
-<path d="M7598 644 c-38 -20 -36 -28 2 -9 17 9 30 18 30 20 0 7 -1 6 -32 -11z"/>
-</g>
-</svg>

apps/login/ui/Boundary.tsx

@@ -14,11 +14,11 @@ const Label = ({
     <div
       className={clsx("rounded-full px-1.5 shadow-[0_0_1px_3px_black]", {
         "bg-gray-800 text-gray-500": color === "default",
-        "bg-vercel-pink text-pink-100": color === "pink",
+        "bg-pink-500 text-pink-100": color === "pink",
-        "bg-vercel-blue text-blue-100": color === "blue",
+        "bg-blue-500 text-blue-100": color === "blue",
-        "bg-vercel-cyan text-cyan-100": color === "cyan",
+        "bg-cyan-500 text-cyan-100": color === "cyan",
-        "bg-vercel-violet text-violet-100": color === "violet",
+        "bg-violet-500 text-violet-100": color === "violet",
-        "bg-vercel-orange text-orange-100": color === "orange",
+        "bg-orange-500 text-orange-100": color === "orange",
         "animate-[highlight_1s_ease-in-out_1]": animateRerendering,
       })}
     >
@@ -45,13 +45,12 @@ export const Boundary = ({
         "p-3 lg:p-5": size === "small",
         "p-4 lg:p-9": size === "default",
         "border-divider-light dark:border-divider-dark": color === "default",
-        "border-vercel-pink": color === "pink",
+        "border-pink-500": color === "pink",
-        "border-vercel-blue": color === "blue",
+        "border-blue-500": color === "blue",
-        "border-vercel-cyan": color === "cyan",
+        "border-cyan-500": color === "cyan",
-        "border-vercel-violet": color === "violet",
+        "border-violet-500": color === "violet",
-        "border-vercel-orange": color === "orange",
+        "border-orange-500": color === "orange",
-        "animate-[rerender_1s_ease-in-out_1] text-vercel-pink":
+        "animate-[rerender_1s_ease-in-out_1] text-pink-500": animateRerendering,
-          animateRerendering,
       })}
     >
       <div

apps/login/ui/DefaultTags.tsx

@@ -21,11 +21,11 @@ export function DefaultTags() {
         type="image/png"
       />
       <link href="/favicon/site.webmanifest" rel="manifest" />
-      <link
+      {/* <link
         color="#000000"
         href="/favicon/safari-pinned-tab.svg"
         rel="mask-icon"
-      />
+      /> */}
       <link href="/favicon/favicon.ico" rel="shortcut icon" />
     </>
   );

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-[11px] font-bold uppercase tracking-wider text-text-light-secondary-500 dark:text-text-dark-secondary-500">
+                <div className="mb-2 px-3 text-[11px] font-bold uppercase tracking-wider text-black/40 dark:text-white/40">
                   <div>{section.name}</div>
                 </div>
 
@@ -90,11 +90,11 @@ function GlobalNavItem({
       onClick={close}
       href={`/${item.slug}`}
       className={clsx(
-        "block rounded-md px-3 py-2 text-[15px] font-medium hover:text-black dark:hover:text-gray-300",
+        "block rounded-md px-3 py-2 text-[15px] font-medium text-text-light-500 dark:text-text-dark-500 opacity-60 dark:opacity-60",
         {
-          "text-text-light-secondary-500 dark:text-text-dark-secondary-500 hover:text-text-light-500 hover:dark:text-text-dark-500":
+          "hover:opacity-100 hover:dark:opacity-100": !isActive,
-            !isActive,
+          "text-text-light-500 dark:text-text-dark-500 opacity-100 dark:opacity-100 font-semibold":
-          "text-text-light-500 dark:text-text-dark-500 font-semibold": isActive,
+            isActive,
         }
       )}
     >

apps/login/ui/Tab.tsx

@@ -1,9 +1,9 @@
-'use client';
+"use client";
 
-import type { Item } from '#/ui/TabGroup';
+import type { Item } from "#/ui/TabGroup";
-import clsx from 'clsx';
+import clsx from "clsx";
-import Link from 'next/link';
+import Link from "next/link";
-import { useSelectedLayoutSegment } from 'next/navigation';
+import { useSelectedLayoutSegment } from "next/navigation";
 
 export const Tab = ({
   path,
@@ -13,7 +13,7 @@ export const Tab = ({
   item: Item;
 }) => {
   const segment = useSelectedLayoutSegment();
-  const href = slug ? path + '/' + slug : path;
+  const href = slug ? path + "/" + slug : path;
   const isActive =
     // Example home pages e.g. `/layouts`
     (!slug && segment === null) ||
@@ -23,10 +23,10 @@ export const Tab = ({
   return (
     <Link
       href={href}
-      className={clsx('mt-2 mr-2 rounded-lg px-3 py-1 text-sm font-medium', {
+      className={clsx("mt-2 mr-2 rounded-lg px-3 py-1 text-sm font-medium", {
-        'bg-gray-700 text-gray-100 hover:bg-gray-500 hover:text-white':
+        "bg-gray-700 text-gray-100 hover:bg-gray-500 hover:text-white":
           !isActive,
-        'bg-vercel-blue text-white': isActive,
+        "bg-blue-500 text-white": isActive,
       })}
     >
       {text}

apps/login/utils/colors.ts

@@ -1,5 +1,3 @@
-import { LabelPolicy } from "#/../../packages/zitadel-server/dist";
-import { secondsToMilliseconds } from "date-fns";
 import tinycolor from "tinycolor2";
 
 export interface Color {
@@ -93,12 +91,6 @@ export function setTheme(document: any, policy?: LabelPolicyColors) {
   setColorShades(dark.warn, "warn", "dark", document);
   setColorShades(light.warn, "warn", "light", document);
 
-  //   setColorShades(dark.text, "text", "dark", document);
-  //   setColorShades(light.text, "text", "light", document);
-
-  //   setColorShades(dark.link, "link", "dark", document);
-  //   setColorShades(light.link, "link", "light", document);
-
   setColorAlpha(dark.text, "text", "dark", document);
   setColorAlpha(light.text, "text", "light", document);
 
@@ -141,7 +133,7 @@ function setColorAlpha(
     );
     document.documentElement.style.setProperty(
       `--theme-${theme}-${type}-secondary-${color.name}`,
-      `${color.hex}80`
+      `${color.hex}c7`
     );
   });
 }

packages/zitadel-tailwind-config/tailwind.config.js

@@ -19,64 +19,6 @@ module.exports = {
       },
       colors: {
         gray: colors.zinc,
-        "gray-1000": "rgb(17,17,19)",
-        "gray-1100": "rgb(10,10,11)",
-        vercel: {
-          pink: "#FF0080",
-          blue: "#0070F3",
-          cyan: "#50E3C2",
-          orange: "#F5A623",
-          violet: "#7928CA",
-        },
-        // primary: {
-        //   light: {
-        //     200: "#bec6ef",
-        //     300: "#8594e0",
-        //     400: "#6c7eda",
-        //     500: "#5469d4",
-        //     600: "#3c54ce",
-        //     contrast: "#ffffff",
-        //   },
-        //   dark: {
-        //     100: "#afd1f2",
-        //     200: "#7fb5ea",
-        //     300: "#4192e0",
-        //     400: "#2782dc",
-        //     500: "#2073c4",
-        //     600: "#1c64aa",
-        //     700: "#17548f",
-        //     800: "#134575",
-        //     900: "#0f355b",
-        //   },
-        // },
-        // accent: {
-        //   light: {
-        //     400: "#9142d5",
-        //     500: "#7e21ce",
-        //   },
-        //   dark: {
-        //     300: "#ff6396",
-        //     400: "#ff4180",
-        //     500: "#ff2069",
-        //   },
-        // },
-        // background: {
-        //   dark: {
-        //     100: "#4a69aa",
-        //     200: "#395183",
-        //     300: "#243252",
-        //     400: "#1a253c",
-        //     500: "#111827",
-        //     600: "#080b12",
-        //     700: "#000000",
-        //     800: "#000000",
-        //     900: "#000000",
-        //   },
-        //   light: {
-        //     500: colors.white,
-        //     600: colors.gray[50],
-        //   },
-        // },
         divider: {
           dark: "rgba(135,149,161,.2)",
           light: "rgba(135,149,161,.2)",
@@ -115,19 +57,19 @@ module.exports = {
       keyframes: ({ theme }) => ({
         rerender: {
           "0%": {
-            ["border-color"]: theme("colors.vercel.pink"),
+            ["border-color"]: theme("colors.pink.500"),
           },
           "40%": {
-            ["border-color"]: theme("colors.vercel.pink"),
+            ["border-color"]: theme("colors.pink.500"),
           },
         },
         highlight: {
           "0%": {
-            background: theme("colors.vercel.pink"),
+            background: theme("colors.pink.500"),
             color: theme("colors.white"),
           },
           "40%": {
-            background: theme("colors.vercel.pink"),
+            background: theme("colors.pink.500"),
             color: theme("colors.white"),
           },
         },