0a03f0ed14
- Add PWA configuration (manifest.json, service worker) - Implement light/dark theme system with purple accents - Replace desktop navbar with mobile-first bottom navigation - Redesign auth forms with mobile-optimized UI - Update Dashboard with gradient cards and touch-friendly actions - Add safe area support for iOS devices - Implement theme context with system preference detection - Optimize touch targets and mobile interactions - Add offline functionality through service worker
88 lines
No EOL
2.1 KiB
JavaScript
88 lines
No EOL
2.1 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
"./src/**/*.{js,jsx,ts,tsx}",
|
|
],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// Purple primary palette
|
|
primary: {
|
|
50: '#faf5ff',
|
|
100: '#f3e8ff',
|
|
200: '#e9d5ff',
|
|
300: '#d8b4fe',
|
|
400: '#c084fc',
|
|
500: '#a855f7',
|
|
600: '#9333ea',
|
|
700: '#7c3aed',
|
|
800: '#6b21a8',
|
|
900: '#581c87',
|
|
950: '#3b0764',
|
|
},
|
|
// Purple accent variations
|
|
accent: {
|
|
50: '#f5f3ff',
|
|
100: '#ede9fe',
|
|
200: '#ddd6fe',
|
|
300: '#c4b5fd',
|
|
400: '#a78bfa',
|
|
500: '#8b5cf6',
|
|
600: '#7c3aed',
|
|
700: '#6d28d9',
|
|
800: '#5b21b6',
|
|
900: '#4c1d95',
|
|
},
|
|
// Custom surface colors for dark/light modes
|
|
surface: {
|
|
50: '#f8fafc',
|
|
100: '#f1f5f9',
|
|
200: '#e2e8f0',
|
|
300: '#cbd5e1',
|
|
400: '#94a3b8',
|
|
500: '#64748b',
|
|
600: '#475569',
|
|
700: '#334155',
|
|
800: '#1e293b',
|
|
900: '#0f172a',
|
|
},
|
|
},
|
|
screens: {
|
|
'xs': '475px',
|
|
},
|
|
spacing: {
|
|
'18': '4.5rem',
|
|
'88': '22rem',
|
|
'92': '23rem',
|
|
'128': '32rem',
|
|
},
|
|
minHeight: {
|
|
'screen-safe': '100dvh',
|
|
},
|
|
fontSize: {
|
|
'xxs': '0.625rem',
|
|
},
|
|
animation: {
|
|
'fade-in': 'fadeIn 0.5s ease-in-out',
|
|
'slide-up': 'slideUp 0.3s ease-out',
|
|
'bounce-subtle': 'bounceSubtle 0.6s ease-in-out',
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
slideUp: {
|
|
'0%': { transform: 'translateY(20px)', opacity: '0' },
|
|
'100%': { transform: 'translateY(0)', opacity: '1' },
|
|
},
|
|
bounceSubtle: {
|
|
'0%, 100%': { transform: 'translateY(0)' },
|
|
'50%': { transform: 'translateY(-5px)' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|