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

scss each loop, common tailwind config

Browse Source
This commit is contained in:
Max Peintner
2023-04-24 17:31:59 +02:00
parent 186fa17fe2
commit d1d54d2180
16 changed files with 242 additions and 1961 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
apps/login/lib/styling.tsx
View File

@@ -1,43 +0,0 @@
import React, { useState } from 'react';
import { StyleRegistry, createStyleRegistry } from 'styled-jsx';
import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
type ChildProps = { children: React.ReactNode };
export function useStyledComponentsRegistry() {
const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
const styledComponentsFlushEffect = () => {
const styles = styledComponentsStyleSheet.getStyleElement();
styledComponentsStyleSheet.instance.clearTag();
return <>{styles}</>;
};
function StyledComponentsRegistry({ children }: ChildProps) {
return (
<StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
{children as React.ReactChild}
</StyleSheetManager>
);
}
return [StyledComponentsRegistry, styledComponentsFlushEffect] as const;
}
export function useStyledJsxRegistry() {
const [jsxStyleRegistry] = useState(() => createStyleRegistry());
function styledJsxFlushEffect() {
const styles = jsxStyleRegistry.styles();
jsxStyleRegistry.flush();
return <>{styles}</>;
}
function StyledJsxRegistry({ children }: ChildProps) {
return (
<StyleRegistry registry={jsxStyleRegistry}>{children}</StyleRegistry>
);
}
return [StyledJsxRegistry, styledJsxFlushEffect] as const;
}

2
apps/login/package.json
View File

@@ -33,7 +33,6 @@
"react-dom": "18.2.0",
"react-hook-form": "7.39.5",
"sass": "^1.62.0",
"styled-components": "6.0.0-beta.2",
"tinycolor2": "1.4.2"
},
"devDependencies": {
@@ -45,6 +44,7 @@
"@types/tinycolor2": "1.4.3",
"@vercel/git-hooks": "1.0.0",
"@zitadel/tsconfig": "workspace:*",
"zitadel-tailwind-config": "workspace:*",
"autoprefixer": "10.4.13",
"del-cli": "5.0.0",
"eslint-config-zitadel": "workspace:*",

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

@@ -20,46 +20,23 @@ html {
--dark-background-color: #000000;
}
.bg-background-light-300 {
background-color: var(--theme-light-background-300);
}
$types: "background", "primary", "warn", "text";
$shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900;
.bg-background-light-400 {
background-color: var(--theme-light-background-400);
}
@each $type in $types {
@each $shade in $shades {
.bg-#{$type}-light-#{$shade} {
background-color: var(--theme-light-#{$type}-#{$shade}) !important;
}
.dark .dark\:bg-#{$type}-dark-#{$shade} {
background-color: var(--theme-dark-#{$type}-#{$shade}) !important;
}
.bg-background-light-500 {
background-color: var(--theme-light-background-500);
}
.bg-background-light-600 {
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-400 {
background-color: var(--theme-dark-background-400) !important;
}
.dark .dark\:bg-background-dark-500 {
background-color: var(--theme-dark-background-500) !important;
}
.dark .dark\:bg-background-dark-600 {
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;
.text-#{$type}-light-#{$shade} {
color: var(--theme-light-#{$type}-#{$shade}) !important;
}
.dark .dark\:text-#{$type}-dark-#{$shade} {
color: var(--theme-dark-#{$type}-#{$shade}) !important;
}
}
}

148
apps/login/tailwind.config.js
View File

@@ -1,7 +1,8 @@
const colors = require("tailwindcss/colors");
const sharedConfig = require("zitadel-tailwind-config/tailwind.config.js");
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [sharedConfig],
darkMode: "class",
content: [
"./app/**/*.{js,ts,jsx,tsx}",
@@ -11,150 +12,5 @@ module.exports = {
future: {
hoverOnlyWhenSupported: true,
},
theme: {
extend: {
// https://vercel.com/design/color
fontSize: {
"12px": "12px",
"14px": "14px",
},
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)",
},
input: {
light: {
label: "#000000c7",
background: "#00000004",
border: "#1a191954",
hoverborder: "1a1b1b",
},
dark: {
label: "#ffffffc7",
background: "#00000020",
border: "#f9f7f775",
hoverborder: "#e0e0e0",
},
},
button: {
light: {
border: "#0000001f",
},
dark: {
border: "#ffffff1f",
},
},
},
backgroundImage: ({ theme }) => ({
"dark-vc-border-gradient": `radial-gradient(at left top, ${theme(
"colors.gray.800"
)}, 50px, ${theme("colors.gray.800")} 50%)`,
"vc-border-gradient": `radial-gradient(at left top, ${theme(
"colors.gray.200"
)}, 50px, ${theme("colors.gray.300")} 50%)`,
}),
keyframes: ({ theme }) => ({
rerender: {
"0%": {
["border-color"]: theme("colors.vercel.pink"),
},
"40%": {
["border-color"]: theme("colors.vercel.pink"),
},
},
highlight: {
"0%": {
background: theme("colors.vercel.pink"),
color: theme("colors.white"),
},
"40%": {
background: theme("colors.vercel.pink"),
color: theme("colors.white"),
},
},
shimmer: {
"100%": {
transform: "translateX(100%)",
},
},
translateXReset: {
"100%": {
transform: "translateX(0)",
},
},
fadeToTransparent: {
"0%": {
opacity: 1,
},
"40%": {
opacity: 1,
},
"100%": {
opacity: 0,
},
},
}),
},
},
plugins: [require("@tailwindcss/forms")],
};

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 dark:text-primary-dark-contrast":
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,

5
apps/login/ui/Byline.tsx
View File

@@ -5,11 +5,6 @@ export default function Byline() {
<div className="flex items-center justify-between w-full p-3.5 lg:px-5 lg:py-3">
<div className="flex items-center space-x-1.5">
<div className="text-sm text-gray-600">By</div>
{/* <a href="https://zitadel.com" title="ZITADEL">
<div className=" text-gray-300 hover:text-gray-50">
<ZitadelLogo />
</div>
</a> */}
<div className="text-sm font-semibold">ZITADEL</div>
</div>
<Theme />

41
apps/login/ui/Footer.tsx
View File

@@ -1,41 +0,0 @@
'use client';
export default function Footer({
reactVersion,
nextVersion,
}: {
reactVersion: string;
nextVersion: string;
}) {
return (
<div className="col-start-2 col-end-4 mt-28 flex items-center justify-between">
<style jsx>
{`
.power-by {
color: rgb(82 82 91);
display: inline-flex;
align-items: center;
}
.power-by-text {
margin-right: 0.25rem;
}
`}
</style>
<span className="power-by">
<span className="power-by-text">Powered by</span>
<svg height="20" viewBox="0 0 283 64" fill="none">
<path
fill="currentColor"
d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z"
></path>
</svg>
</span>
<div className="flex space-x-6 text-sm text-gray-600">
<div>React: {reactVersion}</div>
<div>Next: {nextVersion}</div>
</div>
</div>
);
}

43
apps/login/ui/Header.tsx
View File

@@ -1,43 +0,0 @@
'use client';
import styled from 'styled-components';
const HeadContainer = styled.header`
position: relative;
height: 64px;
align-items: center;
padding: 0px 8px;
margin-bottom: 48px;
display: flex;
border: 0 solid #e5e7eb;
color: rgb(244 244 245);
grid-column-start: 2;
grid-column-end: 4;
`;
const Title = styled.span`
margin: 0 8px;
`;
const NextJsLogo = (props: any) => (
<svg
version="1.1"
viewBox="0 0 148 90"
xmlnsXlink="http://www.w3.org/1999/xlink"
{...props}
>
<path
d="M34.992 23.495h27.855v2.219H37.546v16.699h23.792v2.219H37.546v18.334h25.591v2.219H34.992v-41.69zm30.35 0h2.96l13.115 18.334 13.405-18.334L113.055.207 83.1 43.756l15.436 21.429H95.46L81.417 45.683 67.316 65.185h-3.018L79.85 43.756 65.343 23.495zm34.297 2.219v-2.219h31.742v2.219h-14.623v39.47h-2.554v-39.47H99.64zM.145 23.495h3.192l44.011 66.003L29.16 65.185 2.814 26.648l-.116 38.537H.145v-41.69zm130.98 38.801c-.523 0-.914-.405-.914-.928 0-.524.391-.929.913-.929.528 0 .913.405.913.929 0 .523-.385.928-.913.928zm2.508-2.443H135c.019.742.56 1.24 1.354 1.24.888 0 1.391-.535 1.391-1.539v-6.356h1.391v6.362c0 1.808-1.043 2.849-2.77 2.849-1.62 0-2.732-1.01-2.732-2.556zm7.322-.08h1.379c.118.853.95 1.395 2.149 1.395 1.117 0 1.937-.58 1.937-1.377 0-.685-.521-1.097-1.708-1.377l-1.155-.28c-1.62-.38-2.36-1.166-2.36-2.487 0-1.602 1.304-2.668 3.26-2.668 1.82 0 3.15 1.066 3.23 2.58h-1.354c-.13-.828-.85-1.346-1.894-1.346-1.1 0-1.832.53-1.832 1.34 0 .642.472 1.01 1.64 1.284l.987.243c1.838.43 2.596 1.178 2.596 2.53 0 1.72-1.33 2.799-3.453 2.799-1.987 0-3.323-1.029-3.422-2.637z"
fillRule="nonzero"
></path>
</svg>
);
export default function Header() {
return (
<HeadContainer>
<NextJsLogo height={40} fill={`rgb(244 244 245)`} />
<Title>The React Framework</Title>
</HeadContainer>
);
}

14
apps/login/ui/PasswordComplexityPolicy.tsx
View File

@@ -1,16 +1,8 @@
import {
lowerCaseValidator,
numberValidator,
symbolValidator,
upperCaseValidator,
} from '../utils/validators';
import { ClientError } from 'nice-grpc';
const fetcher = (url: string) =>
fetch(url, {
method: 'GET',
method: "GET",
headers: {
'Content-Type': 'application/json',
"Content-Type": "application/json",
},
})
.then((res) => {
@@ -39,7 +31,7 @@ const cross = (
<i className="las la-times text-warn-light-500 dark:text-warn-dark-500 mr-4 text-lg"></i>
);
const desc =
'text-14px leading-4 text-input-light-label dark:text-input-dark-label';
"text-14px leading-4 text-input-light-label dark:text-input-dark-label";
export default function PasswordComplexityPolicy({
password,

33
apps/login/ui/RootStyleRegistry.tsx
View File

@@ -1,33 +0,0 @@
'use client';
import React from 'react';
import { useServerInsertedHTML } from 'next/navigation';
import {
useStyledComponentsRegistry,
useStyledJsxRegistry,
} from '#/lib/styling';
export default function RootStyleRegistry({
children,
}: {
children: React.ReactNode;
}) {
const [StyledComponentsRegistry, styledComponentsFlushEffect] =
useStyledComponentsRegistry();
const [StyledJsxRegistry, styledJsxFlushEffect] = useStyledJsxRegistry();
useServerInsertedHTML(() => {
return (
<>
{styledJsxFlushEffect()}
{styledComponentsFlushEffect()}
</>
);
});
return (
<StyledComponentsRegistry>
<StyledJsxRegistry>{children}</StyledJsxRegistry>
</StyledComponentsRegistry>
);
}

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

@@ -84,6 +84,8 @@ export function setTheme(document: any, policy?: LabelPolicyColors) {
const dark = computeMap(lP, true);
const light = computeMap(lP, false);
console.log(dark, light);
setColors(dark.background, "background", "dark", document);
setColors(light.background, "background", "light", document);
@@ -142,16 +144,6 @@ function getColorObject(value: any, name: string): Color {
} as Color;
}
function isLight(hex: string): boolean {
const color = tinycolor(hex);
return color.isLight();
}
function isDark(hex: string): boolean {
const color = tinycolor(hex);
return color.isDark();
}
function getContrast(color: string): string {
const onBlack = tinycolor.readability("#000", color);
const onWhite = tinycolor.readability("#fff", color);
@@ -162,7 +154,10 @@ function getContrast(color: string): string {
}
}
export function computeMap(labelpolicy: any, dark: boolean): ColorMap {
export function computeMap(
labelpolicy: LabelPolicyColors,
dark: boolean
): ColorMap {
return {
background: computeColors(
dark ? labelpolicy.backgroundColorDark : labelpolicy.backgroundColor
@@ -177,7 +172,7 @@ export function computeMap(labelpolicy: any, dark: boolean): ColorMap {
dark ? labelpolicy.fontColorDark : labelpolicy.fontColor
),
link: computeColors(
dark ? labelpolicy.linkColorDark : labelpolicy.linkColor
dark ? labelpolicy.fontColorDark : labelpolicy.fontColor
),
};
}

1
packages/zitadel-react/package.json
View File

@@ -22,6 +22,7 @@
"@types/react": "^17.0.13",
"@types/react-dom": "^17.0.8",
"@zitadel/tsconfig": "workspace:*",
"zitadel-tailwind-config": "workspace:*",
"eslint": "^7.32.0",
"eslint-config-zitadel": "workspace:*",
"postcss": "8.4.21",

16
packages/zitadel-react/tailwind.config.js
View File

@@ -1,21 +1,9 @@
const colors = require("tailwindcss/colors");
const sharedConfig = require("zitadel-tailwind-config/tailwind.config.js");
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [sharedConfig],
prefix: "ui-",
darkMode: "class",
content: [`src/**/*.{js,ts,jsx,tsx}`],
theme: {
extend: {
colors: {
brandblue: colors.blue[500],
brandred: colors.red[500],
divider: {
light: "rgba(135,149,161,.2)",
dark: "rgba(135,149,161,.2)",
},
},
},
},
plugins: [],
};

10
packages/zitadel-tailwind-config/package.json Normal file
View File

@@ -0,0 +1,10 @@
{
"name": "zitadel-tailwind-config",
"version": "0.0.0",
"private": true,
"main": "index.js",
"devDependencies": {
"tailwindcss": "^3.2.4",
"@tailwindcss/forms": "0.5.3"
}
}

159
packages/zitadel-tailwind-config/tailwind.config.js Normal file
View File

@@ -0,0 +1,159 @@
const colors = require("tailwindcss/colors");
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./page/**/*.{js,ts,jsx,tsx}",
"./ui/**/*.{js,ts,jsx,tsx}",
],
future: {
hoverOnlyWhenSupported: true,
},
theme: {
extend: {
// https://vercel.com/design/color
fontSize: {
"12px": "12px",
"14px": "14px",
},
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)",
},
input: {
light: {
label: "#000000c7",
background: "#00000004",
border: "#1a191954",
hoverborder: "1a1b1b",
},
dark: {
label: "#ffffffc7",
background: "#00000020",
border: "#f9f7f775",
hoverborder: "#e0e0e0",
},
},
button: {
light: {
border: "#0000001f",
},
dark: {
border: "#ffffff1f",
},
},
},
backgroundImage: ({ theme }) => ({
"dark-vc-border-gradient": `radial-gradient(at left top, ${theme(
"colors.gray.800"
)}, 50px, ${theme("colors.gray.800")} 50%)`,
"vc-border-gradient": `radial-gradient(at left top, ${theme(
"colors.gray.200"
)}, 50px, ${theme("colors.gray.300")} 50%)`,
}),
keyframes: ({ theme }) => ({
rerender: {
"0%": {
["border-color"]: theme("colors.vercel.pink"),
},
"40%": {
["border-color"]: theme("colors.vercel.pink"),
},
},
highlight: {
"0%": {
background: theme("colors.vercel.pink"),
color: theme("colors.white"),
},
"40%": {
background: theme("colors.vercel.pink"),
color: theme("colors.white"),
},
},
shimmer: {
"100%": {
transform: "translateX(100%)",
},
},
translateXReset: {
"100%": {
transform: "translateX(0)",
},
},
fadeToTransparent: {
"0%": {
opacity: 1,
},
"40%": {
opacity: 1,
},
"100%": {
opacity: 0,
},
},
}),
},
},
plugins: [require("@tailwindcss/forms")],
};

1610
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff