130 lines
3.2 KiB
JavaScript
130 lines
3.2 KiB
JavaScript
/* eslint-disable @typescript-eslint/no-var-requires */
|
|
const { pick, omit } = require("lodash")
|
|
const colors = require("tailwindcss/colors")
|
|
const defaultTheme = require("tailwindcss/defaultTheme")
|
|
const { default: flattenColorPalette } = require("tailwindcss/lib/util/flattenColorPalette")
|
|
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
darkMode: "class",
|
|
content: [
|
|
"./index.html",
|
|
"./src/**/*.{js,ts,jsx,tsx}",
|
|
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
|
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
|
|
"./components/**/*.{js,ts,jsx,tsx,mdx}",
|
|
"./src/**/*.{js,ts,jsx,tsx,mdx}",
|
|
],
|
|
theme: {
|
|
extend: {
|
|
boxShadow: {
|
|
"3xl": "0 35px 60px -15px rgba(0, 0, 200, 0.3)",
|
|
},
|
|
colors: {
|
|
black: "#0f172a",
|
|
primary: {
|
|
50: "#eff6ff",
|
|
100: "#dbeafe",
|
|
200: "#bfdbfe",
|
|
300: "#93c5fd",
|
|
400: "#60a5fa",
|
|
500: "#3b82f6",
|
|
600: "#2563eb",
|
|
700: "#1d4ed8",
|
|
800: "#1e40af",
|
|
900: "#1e3a8a",
|
|
},
|
|
vizoleG1: "#F0B37D",
|
|
vizoleG2: "#F5887A",
|
|
vizoleG3: "#F5887A",
|
|
heroBtn: "#f0eded",
|
|
homeBg: "#0f172a",
|
|
homeBg2: "#0c1324",
|
|
},
|
|
fontFamily: {
|
|
body: [
|
|
"Inter",
|
|
"ui-sans-serif",
|
|
"system-ui",
|
|
"-apple-system",
|
|
"system-ui",
|
|
"Segoe UI",
|
|
"Roboto",
|
|
"Helvetica Neue",
|
|
"Arial",
|
|
"Noto Sans",
|
|
"sans-serif",
|
|
"Apple Color Emoji",
|
|
"Segoe UI Emoji",
|
|
"Segoe UI Symbol",
|
|
"Noto Color Emoji",
|
|
],
|
|
sans: [
|
|
"Inter",
|
|
"ui-sans-serif",
|
|
"system-ui",
|
|
"-apple-system",
|
|
"system-ui",
|
|
"Segoe UI",
|
|
"Roboto",
|
|
"Helvetica Neue",
|
|
"Arial",
|
|
"Noto Sans",
|
|
"sans-serif",
|
|
"Apple Color Emoji",
|
|
"Segoe UI Emoji",
|
|
"Segoe UI Symbol",
|
|
"Noto Color Emoji",
|
|
],
|
|
},
|
|
borderWidth: {
|
|
DEFAULT: "1px",
|
|
0: "0",
|
|
2: "2px",
|
|
3: "3px",
|
|
4: "4px",
|
|
6: "6px",
|
|
8: "8px",
|
|
},
|
|
minHeight: {
|
|
...defaultTheme.height,
|
|
},
|
|
minWidth: {
|
|
...defaultTheme.width,
|
|
},
|
|
animation: {
|
|
["infinite-slider"]: "infiniteSlider 20s linear infinite",
|
|
openmenu: "openmenu 1s ease-in",
|
|
closemenu: "closemenu 1s ease-in",
|
|
},
|
|
keyframes: {
|
|
infiniteSlider: {
|
|
"0%": { transform: "translateX(0)" },
|
|
"100%": {
|
|
transform: "translateX(calc(-125px * 5))",
|
|
},
|
|
},
|
|
},
|
|
openmenu: {
|
|
"0%": { left: "-224px" },
|
|
"100%": { left: "0px" },
|
|
},
|
|
closemenu: {
|
|
"0%": { left: "0px" },
|
|
"100%": { left: "-224px" },
|
|
},
|
|
},
|
|
},
|
|
plugins: [require("@codaworks/react-glow/tailwind"), addVariablesForColors],
|
|
future: {
|
|
hoverOnlyWhenSupported: true,
|
|
},
|
|
}
|
|
|
|
function addVariablesForColors({ addBase, theme }) {
|
|
let allColors = flattenColorPalette(theme("colors"))
|
|
let newVars = Object.fromEntries(Object.entries(allColors).map(([key, val]) => [`--${key}`, val]))
|
|
|
|
addBase({
|
|
":root": newVars,
|
|
})
|
|
}
|