138 lines
4.3 KiB
TypeScript
138 lines
4.3 KiB
TypeScript
import type { Config } from 'tailwindcss'
|
|
|
|
export default {
|
|
content: ['./app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
brand: {
|
|
dark: '#0F172A', // slate-900 - base dark
|
|
surface: '#F8F5EC', // warm surface
|
|
green: '#16A34A', // primary electric green
|
|
orange: '#F59E0B', // accent safety orange
|
|
success: '#22C55E', // success green
|
|
warning: '#F59E0B', // warning orange
|
|
danger: '#EF4444', // danger red
|
|
// Muted card tints
|
|
lightGreen: '#EAF7EF',
|
|
lightBlue: '#EAF0FF',
|
|
lightOrange: '#FFF4E5',
|
|
lightPurple: '#EFEAFF'
|
|
}
|
|
},
|
|
borderRadius: {
|
|
card: '16px',
|
|
button: '9999px', // rounded-full
|
|
'card-lg': '20px',
|
|
'card-xl': '24px'
|
|
},
|
|
boxShadow: {
|
|
card: '0 1px 3px rgba(0,0,0,0.1)',
|
|
'card-hover': '0 10px 25px rgba(0,0,0,0.15)',
|
|
subtle: '0 2px 4px rgba(0,0,0,0.05)',
|
|
'lg-hover': '0 20px 40px rgba(0,0,0,0.1)',
|
|
'xl-hover': '0 25px 50px rgba(0,0,0,0.15)',
|
|
'2xl-hover': '0 35px 60px rgba(0,0,0,0.2)'
|
|
},
|
|
maxWidth: {
|
|
container: '1200px',
|
|
prose: '70ch',
|
|
'container-lg': '1400px'
|
|
},
|
|
spacing: {
|
|
'18': '72px',
|
|
'24': '96px',
|
|
'32': '128px',
|
|
'40': '160px',
|
|
'48': '192px'
|
|
},
|
|
fontFamily: {
|
|
heading: ['Poppins', 'system-ui', 'ui-sans-serif'],
|
|
body: ['Inter', 'system-ui', 'ui-sans-serif']
|
|
},
|
|
fontSize: {
|
|
'xs': ['0.75rem', { lineHeight: '1rem' }],
|
|
'sm': ['0.875rem', { lineHeight: '1.25rem' }],
|
|
'base': ['1rem', { lineHeight: '1.5rem' }],
|
|
'lg': ['1.125rem', { lineHeight: '1.75rem' }],
|
|
'xl': ['1.25rem', { lineHeight: '1.75rem' }],
|
|
'2xl': ['1.5rem', { lineHeight: '2rem' }],
|
|
'3xl': ['1.875rem', { lineHeight: '2.25rem' }],
|
|
'4xl': ['2.25rem', { lineHeight: '2.5rem' }],
|
|
'5xl': ['3rem', { lineHeight: '1.1' }],
|
|
'6xl': ['3.75rem', { lineHeight: '1' }],
|
|
'7xl': ['4.5rem', { lineHeight: '1' }],
|
|
'8xl': ['6rem', { lineHeight: '1' }],
|
|
'9xl': ['8rem', { lineHeight: '1' }]
|
|
},
|
|
fontWeight: {
|
|
light: '300',
|
|
normal: '400',
|
|
medium: '500',
|
|
semibold: '600',
|
|
bold: '700',
|
|
extrabold: '800'
|
|
},
|
|
animation: {
|
|
'fade-in': 'fadeIn 0.6s ease-out',
|
|
'slide-up': 'slideUp 0.6s ease-out',
|
|
'scale-in': 'scaleIn 0.4s ease-out',
|
|
'bounce-gentle': 'bounceGentle 2s infinite',
|
|
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
'float': 'float 6s ease-in-out infinite'
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' }
|
|
},
|
|
slideUp: {
|
|
'0%': {
|
|
opacity: '0',
|
|
transform: 'translateY(20px)'
|
|
},
|
|
'100%': {
|
|
opacity: '1',
|
|
transform: 'translateY(0)'
|
|
}
|
|
},
|
|
scaleIn: {
|
|
'0%': {
|
|
opacity: '0',
|
|
transform: 'scale(0.95)'
|
|
},
|
|
'100%': {
|
|
opacity: '1',
|
|
transform: 'scale(1)'
|
|
}
|
|
},
|
|
bounceGentle: {
|
|
'0%, 100%': {
|
|
transform: 'translateY(-5%)',
|
|
animationTimingFunction: 'cubic-bezier(0.8, 0, 1, 1)'
|
|
},
|
|
'50%': {
|
|
transform: 'translateY(0)',
|
|
animationTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)'
|
|
}
|
|
},
|
|
float: {
|
|
'0%, 100%': {
|
|
transform: 'translateY(0px)'
|
|
},
|
|
'50%': {
|
|
transform: 'translateY(-10px)'
|
|
}
|
|
}
|
|
},
|
|
backgroundImage: {
|
|
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
|
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
|
'gradient-electric': 'linear-gradient(135deg, #16A34A 0%, #22C55E 50%, #4ADE80 100%)',
|
|
'gradient-sunset': 'linear-gradient(135deg, #F59E0B 0%, #F97316 50%, #EA580C 100%)',
|
|
'gradient-dark': 'linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #334155 100%)'
|
|
}
|
|
}
|
|
},
|
|
plugins: []
|
|
} satisfies Config |