feat: add advanced analytics and territory management system
- Add comprehensive analytics components with export functionality - Implement territory management with manager performance tracking - Add seatmap components for venue layout management - Create customer management features with modal interface - Add advanced hooks for dashboard flags and territory data - Implement seat selection and venue management utilities - Add type definitions for ticketing and seatmap systems 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,37 +1,191 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
import baseTokens from './design-tokens/base.json' assert { type: 'json' };
|
||||
|
||||
export default {
|
||||
content: [
|
||||
'./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
|
||||
],
|
||||
darkMode: 'class', // Enable class-based dark mode
|
||||
darkMode: ['class', '[data-theme="dark"]'],
|
||||
theme: {
|
||||
extend: {
|
||||
// Design token-driven color system
|
||||
colors: {
|
||||
// Premium gold colors for accents
|
||||
'premium-gold': {
|
||||
50: '#fefce8',
|
||||
100: '#fef3c7',
|
||||
200: '#fde68a',
|
||||
300: '#fcd34d',
|
||||
400: '#fbbf24',
|
||||
500: '#d99e34', // Main premium gold
|
||||
600: '#d97706',
|
||||
700: '#b45309',
|
||||
800: '#92400e',
|
||||
900: '#78350f',
|
||||
// Semantic color system using CSS variables
|
||||
background: {
|
||||
primary: 'var(--color-bg-primary)',
|
||||
secondary: 'var(--color-bg-secondary)',
|
||||
tertiary: 'var(--color-bg-tertiary)',
|
||||
elevated: 'var(--color-bg-elevated)',
|
||||
},
|
||||
surface: {
|
||||
glass: 'var(--color-surface-glass)',
|
||||
'glass-hover': 'var(--color-surface-glass-hover)',
|
||||
'glass-focus': 'var(--color-surface-glass-focus)',
|
||||
muted: 'var(--color-surface-muted)',
|
||||
elevated: 'var(--color-surface-elevated)',
|
||||
},
|
||||
text: {
|
||||
primary: 'var(--color-text-primary)',
|
||||
secondary: 'var(--color-text-secondary)',
|
||||
muted: 'var(--color-text-muted)',
|
||||
inverse: 'var(--color-text-inverse)',
|
||||
disabled: 'var(--color-text-disabled)',
|
||||
'on-color': 'var(--color-text-on-color)',
|
||||
},
|
||||
border: {
|
||||
default: 'var(--color-border-default)',
|
||||
muted: 'var(--color-border-muted)',
|
||||
strong: 'var(--color-border-strong)',
|
||||
focus: 'var(--color-border-focus)',
|
||||
},
|
||||
// Enhanced accent colors for visual variety
|
||||
accent: {
|
||||
emerald: {
|
||||
50: 'var(--color-accent-emerald-50)',
|
||||
100: 'var(--color-accent-emerald-100)',
|
||||
200: 'var(--color-accent-emerald-200)',
|
||||
300: 'var(--color-accent-emerald-300)',
|
||||
400: 'var(--color-accent-emerald-400)',
|
||||
500: 'var(--color-accent-emerald-500)',
|
||||
600: 'var(--color-accent-emerald-600)',
|
||||
700: 'var(--color-accent-emerald-700)',
|
||||
800: 'var(--color-accent-emerald-800)',
|
||||
900: 'var(--color-accent-emerald-900)',
|
||||
DEFAULT: 'var(--color-accent-emerald-text)',
|
||||
},
|
||||
amber: {
|
||||
50: 'var(--color-accent-amber-50)',
|
||||
100: 'var(--color-accent-amber-100)',
|
||||
200: 'var(--color-accent-amber-200)',
|
||||
300: 'var(--color-accent-amber-300)',
|
||||
400: 'var(--color-accent-amber-400)',
|
||||
500: 'var(--color-accent-amber-500)',
|
||||
600: 'var(--color-accent-amber-600)',
|
||||
700: 'var(--color-accent-amber-700)',
|
||||
800: 'var(--color-accent-amber-800)',
|
||||
900: 'var(--color-accent-amber-900)',
|
||||
DEFAULT: 'var(--color-accent-amber-text)',
|
||||
},
|
||||
rose: {
|
||||
50: 'var(--color-accent-rose-50)',
|
||||
100: 'var(--color-accent-rose-100)',
|
||||
200: 'var(--color-accent-rose-200)',
|
||||
300: 'var(--color-accent-rose-300)',
|
||||
400: 'var(--color-accent-rose-400)',
|
||||
500: 'var(--color-accent-rose-500)',
|
||||
600: 'var(--color-accent-rose-600)',
|
||||
700: 'var(--color-accent-rose-700)',
|
||||
800: 'var(--color-accent-rose-800)',
|
||||
900: 'var(--color-accent-rose-900)',
|
||||
DEFAULT: 'var(--color-accent-rose-text)',
|
||||
},
|
||||
violet: {
|
||||
50: 'var(--color-accent-violet-50)',
|
||||
100: 'var(--color-accent-violet-100)',
|
||||
200: 'var(--color-accent-violet-200)',
|
||||
300: 'var(--color-accent-violet-300)',
|
||||
400: 'var(--color-accent-violet-400)',
|
||||
500: 'var(--color-accent-violet-500)',
|
||||
600: 'var(--color-accent-violet-600)',
|
||||
700: 'var(--color-accent-violet-700)',
|
||||
800: 'var(--color-accent-violet-800)',
|
||||
900: 'var(--color-accent-violet-900)',
|
||||
DEFAULT: 'var(--color-accent-violet-text)',
|
||||
},
|
||||
cyan: {
|
||||
50: 'var(--color-accent-cyan-50)',
|
||||
100: 'var(--color-accent-cyan-100)',
|
||||
200: 'var(--color-accent-cyan-200)',
|
||||
300: 'var(--color-accent-cyan-300)',
|
||||
400: 'var(--color-accent-cyan-400)',
|
||||
500: 'var(--color-accent-cyan-500)',
|
||||
600: 'var(--color-accent-cyan-600)',
|
||||
700: 'var(--color-accent-cyan-700)',
|
||||
800: 'var(--color-accent-cyan-800)',
|
||||
900: 'var(--color-accent-cyan-900)',
|
||||
DEFAULT: 'var(--color-accent-cyan-text)',
|
||||
},
|
||||
},
|
||||
// Semantic status colors
|
||||
semantic: {
|
||||
success: 'var(--color-semantic-success-text)',
|
||||
'success-bg': 'var(--color-semantic-success-bg)',
|
||||
'success-border': 'var(--color-semantic-success-border)',
|
||||
warning: 'var(--color-semantic-warning-text)',
|
||||
'warning-bg': 'var(--color-semantic-warning-bg)',
|
||||
'warning-border': 'var(--color-semantic-warning-border)',
|
||||
error: 'var(--color-semantic-error-text)',
|
||||
'error-bg': 'var(--color-semantic-error-bg)',
|
||||
'error-border': 'var(--color-semantic-error-border)',
|
||||
info: 'var(--color-semantic-info-text)',
|
||||
'info-bg': 'var(--color-semantic-info-bg)',
|
||||
'info-border': 'var(--color-semantic-info-border)',
|
||||
},
|
||||
// Interactive elements
|
||||
interactive: {
|
||||
'primary-bg': 'var(--color-interactive-primary-bg)',
|
||||
'primary-text': 'var(--color-interactive-primary-text)',
|
||||
'secondary-bg': 'var(--color-interactive-secondary-bg)',
|
||||
'secondary-text': 'var(--color-interactive-secondary-text)',
|
||||
'accent-bg': 'var(--color-interactive-accent-bg)',
|
||||
'accent-text': 'var(--color-interactive-accent-text)',
|
||||
},
|
||||
// Enhanced glassmorphism variants
|
||||
'glass': {
|
||||
'white': 'rgba(255, 255, 255, 0.1)',
|
||||
'black': 'rgba(0, 0, 0, 0.1)',
|
||||
'border': 'rgba(255, 255, 255, 0.2)',
|
||||
}
|
||||
},
|
||||
|
||||
// Typography from design tokens
|
||||
fontFamily: {
|
||||
sans: baseTokens.typography.font.sans,
|
||||
serif: baseTokens.typography.font.serif,
|
||||
mono: baseTokens.typography.font.mono,
|
||||
},
|
||||
fontSize: Object.fromEntries(
|
||||
Object.entries(baseTokens.typography.size).map(([key, value]) => [
|
||||
key,
|
||||
Array.isArray(value) ? value : [value, { lineHeight: '1.5' }]
|
||||
])
|
||||
),
|
||||
fontWeight: baseTokens.typography.weight,
|
||||
|
||||
// Spacing from design tokens
|
||||
spacing: {
|
||||
...baseTokens.spacing,
|
||||
},
|
||||
|
||||
// Border radius from design tokens
|
||||
borderRadius: baseTokens.radius,
|
||||
|
||||
// Enhanced shadows with glassmorphism
|
||||
boxShadow: {
|
||||
...baseTokens.shadow.glass,
|
||||
'glow-emerald': baseTokens.shadow.glow.emerald,
|
||||
'glow-amber': baseTokens.shadow.glow.amber,
|
||||
'glow-rose': baseTokens.shadow.glow.rose,
|
||||
'glow-violet': baseTokens.shadow.glow.violet,
|
||||
'glow-gold': baseTokens.shadow.glow.gold,
|
||||
'inner-light': baseTokens.shadow.inner.light,
|
||||
'inner-medium': baseTokens.shadow.inner.medium,
|
||||
'inner-strong': baseTokens.shadow.inner.strong,
|
||||
},
|
||||
|
||||
// Enhanced backdrop blur
|
||||
backdropBlur: Object.fromEntries(
|
||||
Object.entries(baseTokens.blur).map(([key, value]) => [key, value])
|
||||
),
|
||||
|
||||
// Opacity utilities from design tokens
|
||||
opacity: baseTokens.opacity.glass,
|
||||
|
||||
// Enhanced animations
|
||||
animation: {
|
||||
'fade-in-up': 'fadeInUp 0.6s ease-out forwards',
|
||||
'slide-in': 'slideIn 0.5s ease-out forwards',
|
||||
'float': 'float 6s ease-in-out infinite',
|
||||
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||
'glow-pulse': 'glowPulse 2s ease-in-out infinite',
|
||||
'shimmer': 'shimmer 2s linear infinite',
|
||||
},
|
||||
|
||||
// Enhanced keyframes
|
||||
keyframes: {
|
||||
fadeInUp: {
|
||||
'0%': {
|
||||
@@ -43,6 +197,16 @@ export default {
|
||||
transform: 'translateY(0)',
|
||||
},
|
||||
},
|
||||
slideIn: {
|
||||
'0%': {
|
||||
opacity: '0',
|
||||
transform: 'translateX(-20px)',
|
||||
},
|
||||
'100%': {
|
||||
opacity: '1',
|
||||
transform: 'translateX(0)',
|
||||
},
|
||||
},
|
||||
float: {
|
||||
'0%, 100%': {
|
||||
transform: 'translateY(0px)',
|
||||
@@ -51,16 +215,27 @@ export default {
|
||||
transform: 'translateY(-20px)',
|
||||
},
|
||||
},
|
||||
glowPulse: {
|
||||
'0%, 100%': {
|
||||
opacity: '1',
|
||||
},
|
||||
'50%': {
|
||||
opacity: '0.7',
|
||||
},
|
||||
},
|
||||
shimmer: {
|
||||
'0%': {
|
||||
transform: 'translateX(-100%)',
|
||||
},
|
||||
'100%': {
|
||||
transform: 'translateX(100%)',
|
||||
},
|
||||
},
|
||||
},
|
||||
backdropBlur: {
|
||||
'xs': '2px',
|
||||
'sm': '4px',
|
||||
'md': '8px',
|
||||
'lg': '16px',
|
||||
'xl': '24px',
|
||||
'2xl': '32px',
|
||||
'3xl': '48px',
|
||||
},
|
||||
|
||||
// Transition timing from design tokens
|
||||
transitionDuration: baseTokens.transition.duration,
|
||||
transitionTimingFunction: baseTokens.transition.timing,
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
|
||||
Reference in New Issue
Block a user