dzinesco
8ed7ae95d1
- Enhanced event creation wizard with multi-step validation - Added advanced QR scanning system with offline support - Implemented comprehensive territory management features - Expanded analytics with export functionality and KPIs - Created complete design token system with theme switching - Added 25+ Playwright test files for comprehensive coverage - Implemented enterprise-grade permission system - Enhanced component library with 80+ React components - Added Firebase integration for deployment - Completed Phase 3 development goals substantially 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
390 lines
12 KiB
JavaScript
390 lines
12 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './src/styles/**/*.css'],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// NARDO GREY SEMANTIC COLOR SYSTEM
|
|
|
|
// Semantic background colors
|
|
bg: {
|
|
primary: 'var(--color-bg-primary)',
|
|
secondary: 'var(--color-bg-secondary)',
|
|
surface: 'var(--color-surface)',
|
|
},
|
|
|
|
// Text colors with high contrast
|
|
text: {
|
|
primary: 'var(--color-text-primary)',
|
|
secondary: 'var(--color-text-secondary)',
|
|
tertiary: 'var(--color-text-tertiary)',
|
|
disabled: 'var(--color-text-disabled)',
|
|
inverse: 'var(--color-text-inverse)',
|
|
},
|
|
|
|
// Emerald accent system
|
|
accent: {
|
|
DEFAULT: 'var(--color-accent)',
|
|
hover: 'var(--color-accent-hover)',
|
|
light: 'var(--color-accent-light)',
|
|
lighter: 'var(--color-accent-lighter)',
|
|
dark: 'var(--color-accent-dark)',
|
|
bg: 'var(--color-accent-bg)',
|
|
border: 'var(--color-accent-border)',
|
|
},
|
|
|
|
// Elevation levels for cards/surfaces
|
|
elevated: {
|
|
1: 'var(--color-elevated-1)',
|
|
2: 'var(--color-elevated-2)',
|
|
3: 'var(--color-elevated-3)',
|
|
},
|
|
|
|
// Glass effect system
|
|
glass: {
|
|
bg: 'var(--color-glass-bg)',
|
|
border: 'var(--color-glass-border)',
|
|
shadow: 'var(--color-glass-shadow)',
|
|
},
|
|
|
|
// Semantic status colors
|
|
success: {
|
|
DEFAULT: 'var(--color-success)',
|
|
bg: 'var(--color-success-bg)',
|
|
border: 'var(--color-success-border)',
|
|
},
|
|
warning: {
|
|
DEFAULT: 'var(--color-warning)',
|
|
bg: 'var(--color-warning-bg)',
|
|
border: 'var(--color-warning-border)',
|
|
},
|
|
error: {
|
|
DEFAULT: 'var(--color-error)',
|
|
bg: 'var(--color-error-bg)',
|
|
border: 'var(--color-error-border)',
|
|
},
|
|
info: {
|
|
DEFAULT: 'var(--color-info)',
|
|
bg: 'var(--color-info-bg)',
|
|
border: 'var(--color-info-border)',
|
|
},
|
|
|
|
// Border color system
|
|
border: {
|
|
DEFAULT: 'var(--color-border-default)',
|
|
muted: 'var(--color-border-muted)',
|
|
strong: 'var(--color-border-strong)',
|
|
},
|
|
|
|
// Focus ring system
|
|
ring: 'var(--color-focus-ring)',
|
|
'focus-ring': 'var(--color-focus-ring)',
|
|
'focus-offset': 'var(--color-focus-offset)',
|
|
|
|
// 1970's Poster Color System
|
|
'poster-orange': {
|
|
DEFAULT: 'var(--poster-orange)',
|
|
light: 'var(--poster-orange-light)',
|
|
dark: 'var(--poster-orange-dark)',
|
|
},
|
|
'poster-yellow': {
|
|
DEFAULT: 'var(--poster-yellow)',
|
|
light: 'var(--poster-yellow-light)',
|
|
dark: 'var(--poster-yellow-dark)',
|
|
},
|
|
'poster-red': {
|
|
DEFAULT: 'var(--poster-red)',
|
|
light: 'var(--poster-red-light)',
|
|
dark: 'var(--poster-red-dark)',
|
|
},
|
|
'poster-green': {
|
|
DEFAULT: 'var(--poster-green)',
|
|
light: 'var(--poster-green-light)',
|
|
dark: 'var(--poster-green-dark)',
|
|
},
|
|
'poster-turquoise': {
|
|
DEFAULT: 'var(--poster-turquoise)',
|
|
light: 'var(--poster-turquoise-light)',
|
|
dark: 'var(--poster-turquoise-dark)',
|
|
},
|
|
'poster-purple': {
|
|
DEFAULT: 'var(--poster-purple)',
|
|
light: 'var(--poster-purple-light)',
|
|
dark: 'var(--poster-purple-dark)',
|
|
},
|
|
'poster-cream': 'var(--poster-cream)',
|
|
'poster-black': 'var(--poster-black)',
|
|
'poster-midnight': 'var(--poster-midnight)',
|
|
'poster-warm-grey': 'var(--poster-warm-grey)',
|
|
|
|
// New vibrant accents
|
|
'poster-neon-orange': 'var(--poster-neon-orange)',
|
|
'poster-goldenrod': 'var(--poster-goldenrod)',
|
|
'poster-mint-green': 'var(--poster-mint-green)',
|
|
'poster-sunshine-yellow': 'var(--poster-sunshine-yellow)',
|
|
'poster-electric-blue': 'var(--poster-electric-blue)',
|
|
'poster-hot-pink': 'var(--poster-hot-pink)',
|
|
'poster-slate': {
|
|
DEFAULT: 'var(--poster-slate)',
|
|
light: 'var(--poster-slate-light)',
|
|
dark: 'var(--poster-slate-dark)',
|
|
},
|
|
},
|
|
|
|
fontFamily: {
|
|
sans: [
|
|
'Inter',
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'Segoe UI',
|
|
'Roboto',
|
|
'Oxygen',
|
|
'Ubuntu',
|
|
'Cantarell',
|
|
'Open Sans',
|
|
'Helvetica Neue',
|
|
'sans-serif',
|
|
],
|
|
mono: [
|
|
'JetBrains Mono',
|
|
'Fira Code',
|
|
'Consolas',
|
|
'Monaco',
|
|
'Courier New',
|
|
'monospace',
|
|
],
|
|
// 1970's Poster Typography
|
|
'poster-display': 'var(--poster-font-display)',
|
|
'poster-headline': 'var(--poster-font-headline)',
|
|
'poster-accent': 'var(--poster-font-accent)',
|
|
'poster-body': 'var(--poster-font-body)',
|
|
},
|
|
|
|
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' }],
|
|
'6xl': ['3.75rem', { lineHeight: '1' }],
|
|
'7xl': ['4.5rem', { lineHeight: '1' }],
|
|
'8xl': ['6rem', { lineHeight: '1' }],
|
|
'9xl': ['8rem', { lineHeight: '1' }],
|
|
},
|
|
|
|
spacing: {
|
|
xs: 'var(--spacing-xs)',
|
|
sm: 'var(--spacing-sm)',
|
|
md: 'var(--spacing-md)',
|
|
lg: 'var(--spacing-lg)',
|
|
xl: 'var(--spacing-xl)',
|
|
'2xl': 'var(--spacing-2xl)',
|
|
'3xl': 'var(--spacing-3xl)',
|
|
'4xl': 'var(--spacing-4xl)',
|
|
'5xl': 'var(--spacing-5xl)',
|
|
'6xl': 'var(--spacing-6xl)',
|
|
'7xl': 'var(--spacing-7xl)',
|
|
'8xl': 'var(--spacing-8xl)',
|
|
// Legacy spacing values for compatibility
|
|
18: '4.5rem',
|
|
88: '22rem',
|
|
128: '32rem',
|
|
144: '36rem',
|
|
},
|
|
|
|
borderRadius: {
|
|
none: 'var(--radius-none)',
|
|
sm: 'var(--radius-sm)',
|
|
md: 'var(--radius-md)',
|
|
lg: 'var(--radius-lg)',
|
|
xl: 'var(--radius-xl)',
|
|
'2xl': 'var(--radius-2xl)',
|
|
'3xl': 'var(--radius-3xl)',
|
|
'4xl': 'var(--radius-4xl)',
|
|
'5xl': 'var(--radius-5xl)',
|
|
full: 'var(--radius-full)',
|
|
DEFAULT: 'var(--radius-md)',
|
|
},
|
|
|
|
backdropBlur: {
|
|
xs: 'var(--blur-xs)',
|
|
sm: 'var(--blur-sm)',
|
|
md: 'var(--blur-md)',
|
|
lg: 'var(--blur-lg)',
|
|
xl: 'var(--blur-xl)',
|
|
'2xl': 'var(--blur-2xl)',
|
|
'3xl': 'var(--blur-3xl)',
|
|
'4xl': 'var(--blur-4xl)',
|
|
'5xl': 'var(--blur-5xl)',
|
|
},
|
|
|
|
animation: {
|
|
'fade-in': 'fadeIn 0.5s ease-in-out',
|
|
'slide-up': 'slideUp 0.3s ease-out',
|
|
float: 'float 6s ease-in-out infinite',
|
|
'fade-in-up': 'fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
|
|
'slide-in-left': 'slideInLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1)',
|
|
'slide-in-right': 'slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1)',
|
|
'scale-in': 'scaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
|
|
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
|
'bounce-slow': 'bounce 3s infinite',
|
|
glow: 'glow 2s ease-in-out infinite alternate',
|
|
shimmer: 'shimmer 2.5s linear infinite',
|
|
// 1970's Poster Animations
|
|
'poster-wiggle': 'posterWiggle 2s ease-in-out infinite',
|
|
'poster-float': 'posterFloat 4s ease-in-out infinite',
|
|
'poster-rainbow': 'posterRainbow 3s linear infinite',
|
|
'poster-pulse': 'posterPulse 2s ease-in-out infinite',
|
|
},
|
|
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
slideUp: {
|
|
'0%': { transform: 'translateY(20px)', opacity: '0' },
|
|
'100%': { transform: 'translateY(0)', opacity: '1' },
|
|
},
|
|
float: {
|
|
'0%, 100%': { transform: 'translateY(0px)' },
|
|
'50%': { transform: 'translateY(-20px)' },
|
|
},
|
|
fadeInUp: {
|
|
'0%': {
|
|
opacity: '0',
|
|
transform: 'translateY(40px) scale(0.9)',
|
|
},
|
|
'100%': {
|
|
opacity: '1',
|
|
transform: 'translateY(0) scale(1)',
|
|
},
|
|
},
|
|
slideInLeft: {
|
|
'0%': {
|
|
opacity: '0',
|
|
transform: 'translateX(-40px)',
|
|
},
|
|
'100%': {
|
|
opacity: '1',
|
|
transform: 'translateX(0)',
|
|
},
|
|
},
|
|
slideInRight: {
|
|
'0%': {
|
|
opacity: '0',
|
|
transform: 'translateX(40px)',
|
|
},
|
|
'100%': {
|
|
opacity: '1',
|
|
transform: 'translateX(0)',
|
|
},
|
|
},
|
|
scaleIn: {
|
|
'0%': {
|
|
opacity: '0',
|
|
transform: 'scale(0.8)',
|
|
},
|
|
'100%': {
|
|
opacity: '1',
|
|
transform: 'scale(1)',
|
|
},
|
|
},
|
|
glow: {
|
|
'0%': {
|
|
boxShadow: '0 0 20px var(--color-accent-gold-500, #d99e34)',
|
|
},
|
|
'100%': {
|
|
boxShadow: '0 0 40px var(--color-accent-gold-500, #d99e34)',
|
|
},
|
|
},
|
|
shimmer: {
|
|
'0%': {
|
|
backgroundPosition: '-200% 0',
|
|
},
|
|
'100%': {
|
|
backgroundPosition: '200% 0',
|
|
},
|
|
},
|
|
// 1970's Poster Keyframes
|
|
posterWiggle: {
|
|
'0%, 100%': { transform: 'rotate(0deg) scale(1)' },
|
|
'25%': { transform: 'rotate(1deg) scale(1.02)' },
|
|
'75%': { transform: 'rotate(-1deg) scale(0.98)' },
|
|
},
|
|
posterFloat: {
|
|
'0%, 100%': { transform: 'translateY(0px)' },
|
|
'50%': { transform: 'translateY(-10px)' },
|
|
},
|
|
posterRainbow: {
|
|
'0%': { filter: 'hue-rotate(0deg)' },
|
|
'100%': { filter: 'hue-rotate(360deg)' },
|
|
},
|
|
posterPulse: {
|
|
'0%, 100%': {
|
|
transform: 'scale(1)',
|
|
opacity: '1'
|
|
},
|
|
'50%': {
|
|
transform: 'scale(1.05)',
|
|
opacity: '0.9'
|
|
},
|
|
},
|
|
},
|
|
|
|
boxShadow: {
|
|
'glass-sm': 'var(--shadow-glass-sm)',
|
|
glass: 'var(--shadow-glass-md)',
|
|
'glass-lg': 'var(--shadow-glass-lg)',
|
|
'glass-xl': 'var(--shadow-glass-xl)',
|
|
'glow-sm': 'var(--shadow-glow-sm)',
|
|
glow: 'var(--shadow-glow-md)',
|
|
'glow-lg': 'var(--shadow-glow-lg)',
|
|
'glow-xl': 'var(--shadow-glow-xl)',
|
|
'inner-light': 'var(--shadow-inner-light)',
|
|
'inner-medium': 'var(--shadow-inner-medium)',
|
|
'inner-strong': 'var(--shadow-inner-strong)',
|
|
// 1970's Poster Shadows
|
|
'poster-glow': 'var(--poster-shadow-glow)',
|
|
'poster-heavy': 'var(--poster-shadow-heavy)',
|
|
'poster-text': 'var(--poster-shadow-text)',
|
|
'poster-neon': 'var(--poster-shadow-neon)',
|
|
},
|
|
|
|
backgroundImage: {
|
|
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
|
'gradient-conic':
|
|
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
|
'glass-gradient':
|
|
'linear-gradient(135deg, var(--color-glass-bg), rgba(255, 255, 255, 0.05))',
|
|
shimmer:
|
|
'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent)',
|
|
// 1970's Poster Gradients - Enhanced
|
|
'poster-sunset': 'var(--poster-sunset-gradient)',
|
|
'poster-ocean': 'var(--poster-ocean-gradient)',
|
|
'poster-psychedelic': 'var(--poster-psychedelic-gradient)',
|
|
'poster-earth': 'var(--poster-earth-gradient)',
|
|
'poster-rainbow': 'var(--poster-rainbow-gradient)',
|
|
'poster-neon': 'var(--poster-neon-gradient)',
|
|
'poster-fire': 'var(--poster-fire-gradient)',
|
|
'poster-aurora': 'var(--poster-aurora-gradient)',
|
|
'poster-vintage': 'var(--poster-vintage-gradient)',
|
|
},
|
|
|
|
maxWidth: {
|
|
'8xl': '88rem',
|
|
'9xl': '96rem',
|
|
},
|
|
|
|
screens: {
|
|
xs: '475px',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}; |