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

global text styles, tailwind config

Browse Source
This commit is contained in:
Max Peintner
2023-04-25 09:16:19 +02:00
parent d1d54d2180
commit ee53505612
14 changed files with 98 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/login/app/(login)/layout.tsx
View File

@@ -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>

6
apps/login/app/layout.tsx
View File

@@ -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="mx-auto max-w-xl space-y-8 px-2 pt-20 lg:py-8 lg:px-8">
<div className="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">
<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>

1
apps/login/app/page.tsx
View File

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

1
apps/login/lib/zitadel.ts
View File

@@ -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(
{},

33
apps/login/styles/globals.scss
View File

@@ -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;
}
}

2
apps/login/ui/Avatar.tsx
View File

@@ -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

2
apps/login/ui/Button.tsx
View File

@@ -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,

6
apps/login/ui/GlobalNav.tsx
View File

@@ -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,
}
)}
>

4
apps/login/ui/LayoutProviders.tsx
View File

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

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

@@ -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);
setColors(light.background, "background", "light", document);
setColorShades(dark.primary, "primary", "dark", document);
setColorShades(light.primary, "primary", "light", document);
setColors(dark.primary, "primary", "dark", document);
setColors(light.primary, "primary", "light", document);
setColorShades(dark.warn, "warn", "dark", document);
setColorShades(light.warn, "warn", "light", document);
setColors(dark.text, "primary", "dark", document);
setColors(light.text, "primary", "light", document);
// setColorShades(dark.text, "text", "dark", document);
// setColorShades(light.text, "text", "light", document);
setColors(dark.link, "link", "dark", document);
setColors(light.link, "link", "light", document);
// setColorShades(dark.link, "link", "dark", document);
// setColorShades(light.link, "link", "light", document);
setColors(dark.warn, "warn", "dark", document);
setColors(light.warn, "warn", "light", document);
setColorAlpha(dark.text, "text", "dark", 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"),