Spaces:
Running
Running
File size: 2,667 Bytes
09801ca | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | /** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
darkMode: 'class',
theme: {
extend: {
colors: {
// Primary Green theme (DataVision Brand - matches Landing page)
primary: {
50: '#f0fdf4',
100: '#dcfce7',
200: '#bbf7d0',
300: '#86efac',
400: '#4ade80',
500: '#22c55e', // Brand Green (same as Landing)
600: '#16a34a',
700: '#15803d',
800: '#166534',
900: '#14532d',
},
// Extended gray scale for better dark mode
gray: {
750: '#2d3748',
850: '#1a202c',
950: '#0d1117',
},
// Accent colors
accent: {
orange: '#F97316',
amber: '#F59E0B',
green: '#22c55e', // Brand green
red: '#EF4444',
yellow: '#FBBF24',
},
// Dark theme surface colors
dark: {
bg: 'var(--bg-primary)',
surface: 'var(--bg-secondary)',
card: 'var(--bg-card)',
border: 'var(--border-color)',
hover: 'var(--bg-hover)',
},
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
},
borderRadius: {
'xl': '12px',
'2xl': '16px',
'3xl': '24px',
},
boxShadow: {
'glow': '0 0 20px rgba(249, 115, 22, 0.3)',
'glow-lg': '0 0 40px rgba(249, 115, 22, 0.4)',
'glow-orange': '0 0 30px rgba(249, 115, 22, 0.5)',
'card': '0 8px 32px rgba(0, 0, 0, 0.4)',
'card-hover': '0 12px 48px rgba(0, 0, 0, 0.5)',
},
animation: {
'fade-in': 'fadeIn 0.3s ease-out',
'slide-up': 'slideUp 0.4s ease-out',
'bounce': 'bounce 0.6s infinite',
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'marquee': 'marquee 25s linear infinite',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0', transform: 'translateY(10px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
slideUp: {
'0%': { transform: 'translateY(20px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
bounce: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-4px)' },
},
marquee: {
'0%': { transform: 'translateX(100%)' },
'100%': { transform: 'translateX(-100%)' },
},
},
},
},
plugins: [],
}
|