tyler/blackcanyontickets
1
0
Fork 0
Code Issues 8 Pull Requests Packages Projects Releases Wiki Activity
Files
d5c3953888c4067b80486d3e0da61b78d3eada74
blackcanyontickets/reactrebuild0825/tailwind.config.js
dzinesco 6d879d0685 feat(theme): finalize design token system with WCAG AA compliance 
- Fix gold text contrast in light theme from 3.30:1 to 6.38:1 (AA compliant)
- Separate ThemeContext into definition and provider files for ESLint compliance
- Update contrast report with final validation results (100% passing tests)
- Ensure all accent colors meet WCAG AA standards across light/dark themes
- Complete design token system with proper semantic color roles

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-16 02:21:19 -06:00

367 lines
12 KiB
JavaScript
Raw Blame History

/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
darkMode: ['class', '[data-theme="dark"]'],
theme: {
extend: {
colors: {
// Token-based semantic colors
background: {
primary: 'var(--color-bg-primary)',
secondary: 'var(--color-bg-secondary)',
tertiary: 'var(--color-bg-tertiary)',
elevated: 'var(--color-bg-elevated)',
overlay: 'var(--color-bg-overlay)',
},
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)',
},
glass: {
bg: 'var(--color-glass-bg)',
border: 'var(--color-glass-border)',
shadow: 'var(--color-glass-shadow)',
// Legacy opacity-based system for compatibility
50: 'rgba(255, 255, 255, 0.05)',
100: 'rgba(255, 255, 255, 0.1)',
200: 'rgba(255, 255, 255, 0.15)',
300: 'rgba(255, 255, 255, 0.2)',
400: 'rgba(255, 255, 255, 0.25)',
500: 'rgba(255, 255, 255, 0.3)',
dark: {
50: 'rgba(0, 0, 0, 0.05)',
100: 'rgba(0, 0, 0, 0.1)',
200: 'rgba(0, 0, 0, 0.15)',
300: 'rgba(0, 0, 0, 0.2)',
400: 'rgba(0, 0, 0, 0.25)',
500: 'rgba(0, 0, 0, 0.3)',
},
},
// Token-based gold system
gold: {
50: 'var(--color-gold-50)',
100: 'var(--color-gold-100)',
200: 'var(--color-gold-200)',
300: 'var(--color-gold-300)',
400: 'var(--color-gold-400)',
500: 'var(--color-gold-500)',
600: 'var(--color-gold-600)',
700: 'var(--color-gold-700)',
800: 'var(--color-gold-800)',
900: 'var(--color-gold-900)',
text: 'var(--color-gold-text)',
},
// Token-based accent colors
primary: {
50: 'var(--color-primary-50)',
100: 'var(--color-primary-100)',
200: 'var(--color-primary-200)',
300: 'var(--color-primary-300)',
400: 'var(--color-primary-400)',
500: 'var(--color-primary-500)',
600: 'var(--color-primary-600)',
700: 'var(--color-primary-700)',
800: 'var(--color-primary-800)',
900: 'var(--color-primary-900)',
text: 'var(--color-primary-text)',
},
secondary: {
50: 'var(--color-secondary-50)',
100: 'var(--color-secondary-100)',
200: 'var(--color-secondary-200)',
300: 'var(--color-secondary-300)',
400: 'var(--color-secondary-400)',
500: 'var(--color-secondary-500)',
600: 'var(--color-secondary-600)',
700: 'var(--color-secondary-700)',
800: 'var(--color-secondary-800)',
900: 'var(--color-secondary-900)',
text: 'var(--color-secondary-text)',
},
// Token-based semantic colors
success: {
bg: 'var(--color-success-bg)',
border: 'var(--color-success-border)',
text: 'var(--color-success-text)',
accent: 'var(--color-success-accent)',
},
warning: {
bg: 'var(--color-warning-bg)',
border: 'var(--color-warning-border)',
text: 'var(--color-warning-text)',
accent: 'var(--color-warning-accent)',
},
error: {
bg: 'var(--color-error-bg)',
border: 'var(--color-error-border)',
text: 'var(--color-error-text)',
accent: 'var(--color-error-accent)',
},
info: {
bg: 'var(--color-info-bg)',
border: 'var(--color-info-border)',
text: 'var(--color-info-text)',
accent: 'var(--color-info-accent)',
},
// Token-based border colors
border: {
DEFAULT: 'var(--color-border-default)',
muted: 'var(--color-border-muted)',
strong: 'var(--color-border-strong)',
},
// Enhanced gradient backgrounds (kept for compatibility)
gradient: {
primary: {
from: '#0ea5e9', // sky-500
to: '#2563eb', // blue-600
},
secondary: {
from: '#8b5cf6', // violet-500
to: '#9333ea', // purple-600
},
dark: {
from: '#1e293b', // slate-800
to: '#0f172a', // slate-900
},
},
// Legacy color system for compatibility
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))',
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))',
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))',
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))',
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))',
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))',
},
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))',
},
},
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',
],
},
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)',
// Legacy radius values for compatibility
DEFAULT: 'var(--radius)',
},
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: {
// Existing animations
'fade-in': 'fadeIn 0.5s ease-in-out',
'slide-up': 'slideUp 0.3s ease-out',
float: 'float 6s ease-in-out infinite',
// New glassmorphism animations
'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',
},
keyframes: {
// Existing 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)' },
},
// New premium keyframes
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 rgba(217, 158, 52, 0.3)',
},
'100%': {
boxShadow: '0 0 40px rgba(217, 158, 52, 0.6)',
},
},
shimmer: {
'0%': {
backgroundPosition: '-200% 0',
},
'100%': {
backgroundPosition: '200% 0',
},
},
},
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)',
},
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, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))',
shimmer:
'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent)',
},
maxWidth: {
'8xl': '88rem',
'9xl': '96rem',
},
screens: {
xs: '475px',
},
},
},
plugins: [],
};
Reference in New Issue View Git Blame Copy Permalink