41 lines
1.0 KiB
JavaScript
41 lines
1.0 KiB
JavaScript
const withOpacity = (variable) => {
|
|
return ({ opacityValue } = {}) => {
|
|
if (opacityValue !== undefined) {
|
|
return `rgb(var(${variable}) / ${opacityValue})`;
|
|
}
|
|
return `rgb(var(${variable}))`;
|
|
};
|
|
};
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
darkMode: "class",
|
|
content: [
|
|
"./index.html",
|
|
"./src/**/*.{js,ts,jsx,tsx}",
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
bg: withOpacity("--color-bg"),
|
|
card: withOpacity("--color-card"),
|
|
cardBorder: withOpacity("--color-card-border"),
|
|
text: withOpacity("--color-text"),
|
|
"text-secondary": withOpacity("--color-text-secondary"),
|
|
hover: withOpacity("--color-hover"),
|
|
accent: withOpacity("--color-accent"),
|
|
},
|
|
keyframes: {
|
|
'fade-up': {
|
|
'0%': { opacity: '0', transform: 'translateY(8px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
},
|
|
animation: {
|
|
'fade-up': 'fade-up 300ms ease-out forwards',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|