dzinesco
aa81eb5adb
- 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>
242 lines
8.6 KiB
JavaScript
242 lines
8.6 KiB
JavaScript
/** @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', '[data-theme="dark"]'],
|
|
theme: {
|
|
extend: {
|
|
// Design token-driven color system
|
|
colors: {
|
|
// 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)',
|
|
},
|
|
},
|
|
|
|
// 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%': {
|
|
opacity: '0',
|
|
transform: 'translateY(20px)',
|
|
},
|
|
'100%': {
|
|
opacity: '1',
|
|
transform: 'translateY(0)',
|
|
},
|
|
},
|
|
slideIn: {
|
|
'0%': {
|
|
opacity: '0',
|
|
transform: 'translateX(-20px)',
|
|
},
|
|
'100%': {
|
|
opacity: '1',
|
|
transform: 'translateX(0)',
|
|
},
|
|
},
|
|
float: {
|
|
'0%, 100%': {
|
|
transform: 'translateY(0px)',
|
|
},
|
|
'50%': {
|
|
transform: 'translateY(-20px)',
|
|
},
|
|
},
|
|
glowPulse: {
|
|
'0%, 100%': {
|
|
opacity: '1',
|
|
},
|
|
'50%': {
|
|
opacity: '0.7',
|
|
},
|
|
},
|
|
shimmer: {
|
|
'0%': {
|
|
transform: 'translateX(-100%)',
|
|
},
|
|
'100%': {
|
|
transform: 'translateX(100%)',
|
|
},
|
|
},
|
|
},
|
|
|
|
// Transition timing from design tokens
|
|
transitionDuration: baseTokens.transition.duration,
|
|
transitionTimingFunction: baseTokens.transition.timing,
|
|
},
|
|
},
|
|
plugins: [],
|
|
} |