FetalCLIP / frontend /tailwind.config.js
Numan Saeed
feat: Add visual improvements and aesthetic enhancements
bedc7e7
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
// Primary accent - NVIDIA Green
nvidia: {
green: '#76b900', // NVIDIA Green - primary
'green-hover': '#84cc16', // Lime-500 - lighter on hover
'green-dark': '#65a30d', // Lime-600 - for gradients/pressed
},
// Secondary accent - Sky Blue (for info, links, secondary actions)
accent: {
blue: '#0ea5e9', // Sky-500 - secondary
'blue-hover': '#38bdf8', // Sky-400 - hover
'blue-dark': '#0284c7', // Sky-600 - pressed
},
// Light theme backgrounds
dark: {
bg: '#f8fafc', // Slate-50 - main background
card: '#ffffff', // Pure white - cards
input: '#f1f5f9', // Slate-100 - input backgrounds
border: '#e2e8f0', // Slate-200 - borders
hover: '#cbd5e1', // Slate-300 - hover states
},
// Text colors for light theme
text: {
primary: '#0f172a', // Slate-900 - main text
secondary: '#475569', // Slate-600 - secondary text
muted: '#94a3b8', // Slate-400 - muted/placeholder
}
},
fontFamily: {
sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
},
boxShadow: {
'card': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
'card-hover': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
},
animation: {
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'fade-in': 'fadeIn 0.3s ease-out',
'slide-up': 'slideUp 0.3s ease-out',
'scale-in': 'scaleIn 0.3s ease-out',
'bounce-subtle': 'bounceSubtle 0.4s ease-out',
'glow-pulse': 'glowPulse 2s ease-in-out infinite',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
slideUp: {
'0%': { opacity: '0', transform: 'translateY(10px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
scaleIn: {
'0%': { opacity: '0', transform: 'scale(0.95)' },
'100%': { opacity: '1', transform: 'scale(1)' },
},
bounceSubtle: {
'0%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-3px)' },
'100%': { transform: 'translateY(0)' },
},
glowPulse: {
'0%, 100%': { boxShadow: '0 0 8px rgba(118, 185, 0, 0.4)' },
'50%': { boxShadow: '0 0 16px rgba(118, 185, 0, 0.6)' },
},
},
},
},
plugins: [],
}