94 lines
2.7 KiB
TypeScript
94 lines
2.7 KiB
TypeScript
import type { Config } from "tailwindcss"
|
|
|
|
export default {
|
|
darkMode: ["class"],
|
|
content: [
|
|
"./index.html",
|
|
"./src/**/*.{ts,tsx}",
|
|
],
|
|
prefix: "",
|
|
theme: {
|
|
container: {
|
|
center: true,
|
|
padding: '2rem',
|
|
screens: {
|
|
'2xl': '1400px'
|
|
}
|
|
},
|
|
extend: {
|
|
fontFamily: {
|
|
'inter': ['Inter', 'sans-serif'],
|
|
'display': ['Plus Jakarta Sans', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
// Woolnoth brand colors
|
|
'brand-navy': '#24293e',
|
|
'brand-grey': '#f4f4f6',
|
|
'brand-slate': '#5c6f91',
|
|
'brand-coral': '#e94f37',
|
|
|
|
// Shadcn color system
|
|
border: 'hsl(var(--border))',
|
|
input: 'hsl(var(--input))',
|
|
ring: 'hsl(var(--ring))',
|
|
background: 'hsl(var(--background))',
|
|
foreground: 'hsl(var(--foreground))',
|
|
primary: {
|
|
DEFAULT: 'hsl(var(--primary))',
|
|
foreground: 'hsl(var(--primary-foreground))'
|
|
},
|
|
secondary: {
|
|
DEFAULT: 'hsl(var(--secondary))',
|
|
foreground: 'hsl(var(--secondary-foreground))'
|
|
},
|
|
destructive: {
|
|
DEFAULT: 'hsl(var(--destructive))',
|
|
foreground: 'hsl(var(--destructive-foreground))'
|
|
},
|
|
muted: {
|
|
DEFAULT: 'hsl(var(--muted))',
|
|
foreground: 'hsl(var(--muted-foreground))'
|
|
},
|
|
accent: {
|
|
DEFAULT: 'hsl(var(--accent))',
|
|
foreground: 'hsl(var(--accent-foreground))'
|
|
},
|
|
popover: {
|
|
DEFAULT: 'hsl(var(--popover))',
|
|
foreground: 'hsl(var(--popover-foreground))'
|
|
},
|
|
card: {
|
|
DEFAULT: 'hsl(var(--card))',
|
|
foreground: 'hsl(var(--card-foreground))'
|
|
},
|
|
},
|
|
borderRadius: {
|
|
lg: 'var(--radius)',
|
|
md: 'calc(var(--radius) - 2px)',
|
|
sm: 'calc(var(--radius) - 4px)'
|
|
},
|
|
boxShadow: {
|
|
'glow-coral': '0 0 40px -10px rgba(233, 79, 55, 0.5)',
|
|
'glow-slate': '0 0 40px -10px rgba(92, 111, 145, 0.4)',
|
|
'glow-navy': '0 0 40px -10px rgba(36, 41, 62, 0.5)',
|
|
},
|
|
keyframes: {
|
|
'fade-up': {
|
|
from: { opacity: '0', transform: 'translateY(30px)' },
|
|
to: { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
'text-ripple': {
|
|
'0%, 100%': { transform: 'scale(1)', opacity: '1' },
|
|
'15%': { transform: 'scale(0.97)', opacity: '0.7' },
|
|
'40%': { transform: 'scale(1.02)', opacity: '1' },
|
|
},
|
|
},
|
|
animation: {
|
|
'fade-up': 'fade-up 0.6s ease-out forwards',
|
|
'text-ripple': 'text-ripple 350ms ease-out',
|
|
}
|
|
}
|
|
},
|
|
plugins: [require("tailwindcss-animate")],
|
|
} satisfies Config
|