mirror of
https://github.com/zitadel/zitadel.git
synced 2025-12-12 19:32:15 +00:00
79 lines
1.9 KiB
JavaScript
79 lines
1.9 KiB
JavaScript
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})`;
|
|
colors[type][theme][
|
|
`secondary-${shade}`
|
|
] = `var(--theme-${theme}-${type}-secondary-${shade})`;
|
|
});
|
|
});
|
|
});
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
presets: [sharedConfig],
|
|
darkMode: "class",
|
|
content: [
|
|
"./app/**/*.{js,ts,jsx,tsx}",
|
|
"./page/**/*.{js,ts,jsx,tsx}",
|
|
"./ui/**/*.{js,ts,jsx,tsx}",
|
|
],
|
|
future: {
|
|
hoverOnlyWhenSupported: true,
|
|
},
|
|
theme: {
|
|
extend: {
|
|
colors,
|
|
animation: {
|
|
shake: "shake .8s cubic-bezier(.36,.07,.19,.97) both;",
|
|
},
|
|
keyframes: {
|
|
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")],
|
|
};
|