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

fix overridden styles, tailwind color map

Browse Source
This commit is contained in:
Max Peintner
2023-04-25 11:14:35 +02:00
parent 473d81a337
commit aaeccc437b
6 changed files with 89 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/login/app/(login)/password/page.tsx
View File

@@ -17,6 +17,7 @@ export default function Page() {
<div className="w-full">
<TextInput type="password" label="Password" />
</div>
<div className="flex w-full flex-row items-center justify-between">
<Button
onClick={() => router.back()}

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

@@ -1,6 +1,4 @@
import "#/styles/globals.scss";
// include styles from the ui package
import "@zitadel/react/styles.css";
import { AddressBar } from "#/ui/AddressBar";
import { GlobalNav } from "#/ui/GlobalNav";
import { Lato } from "next/font/google";

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

@@ -1,3 +1,5 @@
// include styles from the ui package
@import "@zitadel/react/styles.css";
@import "./vars.scss";
@tailwind base;
@@ -20,54 +22,56 @@ html {
--dark-background-color: #000000;
}
$types: "background", "primary", "warn";
$shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900;
// $types: "background", "primary", "warn";
// $shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900;
@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;
}
// @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;
// }
.text-#{$type}-light-#{$shade} {
color: var(--theme-light-#{$type}-#{$shade}) !important;
}
.dark .dark\:text-#{$type}-dark-#{$shade} {
color: var(--theme-dark-#{$type}-#{$shade}) !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;
// }
.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;
}
}
}
// .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";
// $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;
}
// @each $alphatype in $alphatypes {
// .text-#{$alphatype}-light,
// .hover\: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;
}
}
// .dark .dark\:text-#{$alphatype}-dark,
// .dark .hover\: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;
// }
// }

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

@@ -1,5 +1,37 @@
const sharedConfig = require("zitadel-tailwind-config/tailwind.config.js");
let colors = {
background: { light: { contrast: {} }, dark: { contrast: {} } },
primary: { light: { contrast: {} }, dark: { contrast: {} } },
warn: { light: { contrast: {} }, dark: { contrast: {} } },
text: { light: { contrast: {} }, dark: { contrast: {} } },
link: { light: { contrast: {} }, dark: { contrast: {} } },
};
const shades = [
"50",
"100",
"200",
"300",
"400",
"500",
"600",
"700",
"800",
"900",
];
const themes = ["light", "dark"];
const types = ["background", "primary", "warn", "text", "link"];
types.forEach((type) => {
themes.forEach((theme) => {
shades.forEach((shade) => {
colors[type][theme][shade] = `var(--theme-${theme}-${type}-${shade})`;
colors[type][theme][
`contrast-${shade}`
] = `var(--theme-${theme}-${type}-contrast-${shade})`;
});
});
});
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [sharedConfig],
@@ -12,5 +44,10 @@ module.exports = {
future: {
hoverOnlyWhenSupported: true,
},
theme: {
extend: {
colors,
},
},
plugins: [require("@tailwindcss/forms")],
};

2
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-text-light dark:text-text-dark">
<div className="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-text-light-500 dark:text-text-dark-500">
<div>{section.name}</div>
</div>

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

@@ -25,7 +25,7 @@ export type TextInputProps = DetailedHTMLProps<
const styles = (error: boolean, disabled: boolean) =>
clsx({
"h-40px mb-2px rounded p-[7px] bg-input-light-background dark:bg-input-dark-background transition-colors duration-300 grow":
"h-[40px] mb-[2px] rounded p-[7px] bg-input-light-background dark:bg-input-dark-background transition-colors duration-300 grow":
true,
"border border-input-light-border dark:border-input-dark-border hover:border-black hover:dark:border-white focus:border-primary-light-500 focus:dark:border-primary-dark-500":
true,