mirror of
https://github.com/zitadel/zitadel.git
synced 2025-12-08 04:23:09 +00:00
b10455b51f
# Which Problems Are Solved - The previous monorepo in monorepo structure for the login app and its related packages was fragmented, complicated and buggy. - The process for building and testing the login container was inconsistent between local development and CI. - Lack of clear documentation as well as easy and reliable ways for non-frontend developers to reproduce and fix failing PR checks locally. # How the Problems Are Solved - Consolidated the login app and its related npm packages by moving the main package to `apps/login/apps/login` and merging `apps/login/packages/integration` and `apps/login/packages/acceptance` into the main `apps/login` package. - Migrated from Docker Compose-based test setups to dev container-based setups, adding support for multiple dev container configurations: - `.devcontainer/base` - `.devcontainer/turbo-lint-unit` - `.devcontainer/turbo-lint-unit-debug` - `.devcontainer/login-integration` - `.devcontainer/login-integration-debug` - Added npm scripts to run the new dev container setups, enabling exact reproduction of GitHub PR checks locally, and updated the pipeline to use these containers. - Cleaned up Dockerfiles and docker-bake.hcl files to only build the production image for the login app. - Cleaned up compose files to focus on dev environments in dev containers. - Updated `CONTRIBUTING.md` with guidance on running and debugging PR checks locally using the new dev container approach. - Introduced separate Dockerfiles for the login app to distinguish between using published client packages and building clients from local protos. - Ensured the login container is always built in the pipeline for use in integration and acceptance tests. - Updated Makefile and GitHub Actions workflows to use `--frozen-lockfile` for installing pnpm packages, ensuring reproducible installs. - Disabled GitHub release creation by the changeset action. - Refactored the `/build` directory structure for clarity and maintainability. - Added a `clean` command to `docks/package.json`. - Experimentally added `knip` to the `zitadel-client` package for improved linting of dependencies and exports. # Additional Changes - Fixed Makefile commands for consistency and reliability. - Improved the structure and clarity of the `/build` directory to support seamless integration of the login build. - Enhanced documentation and developer experience for running and debugging CI checks locally. # Additional Context - See updated `CONTRIBUTING.md` for new local development and debugging instructions. - These changes are a prerequisite for further improvements to the CI pipeline and local development workflow. - Closes #10276
198 lines
4.9 KiB
JavaScript
198 lines
4.9 KiB
JavaScript
import colors from "tailwindcss/colors";
|
|
|
|
// Generate dynamic theme colors
|
|
let themeColors = {
|
|
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) => {
|
|
themeColors[type][theme][shade] =
|
|
`var(--theme-${theme}-${type}-${shade})`;
|
|
themeColors[type][theme][`contrast-${shade}`] =
|
|
`var(--theme-${theme}-${type}-contrast-${shade})`;
|
|
themeColors[type][theme][`secondary-${shade}`] =
|
|
`var(--theme-${theme}-${type}-secondary-${shade})`;
|
|
});
|
|
});
|
|
});
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ["./src/**/*.{js,ts,jsx,tsx}"],
|
|
darkMode: "class",
|
|
future: {
|
|
hoverOnlyWhenSupported: true,
|
|
},
|
|
theme: {
|
|
extend: {
|
|
// https://vercel.com/design/color
|
|
fontSize: {
|
|
"12px": "12px",
|
|
"14px": "14px",
|
|
},
|
|
colors: {
|
|
gray: colors.zinc,
|
|
// Dynamic theme colors
|
|
...themeColors,
|
|
// State colors
|
|
state: {
|
|
success: {
|
|
light: {
|
|
background: "#cbf4c9",
|
|
color: "#0e6245",
|
|
},
|
|
dark: {
|
|
background: "#68cf8340",
|
|
color: "#cbf4c9",
|
|
},
|
|
},
|
|
error: {
|
|
light: {
|
|
background: "#ffc1c1",
|
|
color: "#620e0e",
|
|
},
|
|
dark: {
|
|
background: "#af455359",
|
|
color: "#ffc1c1",
|
|
},
|
|
},
|
|
neutral: {
|
|
light: {
|
|
background: "#e4e7e4",
|
|
color: "#000000",
|
|
},
|
|
dark: {
|
|
background: "#1a253c",
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
alert: {
|
|
light: {
|
|
background: "#fbbf24",
|
|
color: "#92400e",
|
|
},
|
|
dark: {
|
|
background: "#92400e50",
|
|
color: "#fbbf24",
|
|
},
|
|
},
|
|
},
|
|
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%)`,
|
|
}),
|
|
animation: {
|
|
shake: "shake .8s cubic-bezier(.36,.07,.19,.97) both;",
|
|
},
|
|
keyframes: ({ theme }) => ({
|
|
rerender: {
|
|
"0%": {
|
|
["border-color"]: theme("colors.pink.500"),
|
|
},
|
|
"40%": {
|
|
["border-color"]: theme("colors.pink.500"),
|
|
},
|
|
},
|
|
highlight: {
|
|
"0%": {
|
|
background: theme("colors.pink.500"),
|
|
color: theme("colors.white"),
|
|
},
|
|
"40%": {
|
|
background: theme("colors.pink.500"),
|
|
color: theme("colors.white"),
|
|
},
|
|
},
|
|
shimmer: {
|
|
"100%": {
|
|
transform: "translateX(100%)",
|
|
},
|
|
},
|
|
translateXReset: {
|
|
"100%": {
|
|
transform: "translateX(0)",
|
|
},
|
|
},
|
|
fadeToTransparent: {
|
|
"0%": {
|
|
opacity: 1,
|
|
},
|
|
"40%": {
|
|
opacity: 1,
|
|
},
|
|
"100%": {
|
|
opacity: 0,
|
|
},
|
|
},
|
|
shake: {
|
|
"10%, 90%": {
|
|
transform: "translate3d(-1px, 0, 0)",
|
|
},
|
|
"20%, 80%": {
|
|
transform: "translate3d(2px, 0, 0)",
|
|
},
|
|
"30%, 50%, 70%": {
|
|
transform: "translate3d(-4px, 0, 0)",
|
|
},
|
|
"40%, 60%": {
|
|
transform: "translate3d(4px, 0, 0)",
|
|
},
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
plugins: [require("@tailwindcss/forms")],
|
|
};
|