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>
This commit is contained in:
404
reactrebuild0825/src/components/ThemeDocumentation.tsx
Normal file
404
reactrebuild0825/src/components/ThemeDocumentation.tsx
Normal file
@@ -0,0 +1,404 @@
|
||||
/**
|
||||
* Theme Documentation Component
|
||||
* Comprehensive reference for the glassmorphism design system
|
||||
*/
|
||||
export function ThemeDocumentation() {
|
||||
const glassComponents = [
|
||||
{
|
||||
name: '.glass',
|
||||
description: 'Primary glass effect with backdrop blur and subtle borders',
|
||||
usage: 'Basic glass containers and overlays',
|
||||
},
|
||||
{
|
||||
name: '.glass-card',
|
||||
description: 'Complete card component with padding and hover effects',
|
||||
usage: 'Content cards, feature boxes, sections',
|
||||
},
|
||||
{
|
||||
name: '.glass-card-hero',
|
||||
description: 'Enhanced gradient background for featured content',
|
||||
usage: 'Hero sections, featured announcements',
|
||||
},
|
||||
{
|
||||
name: '.glass-navigation',
|
||||
description: 'Navigation-specific styling with blue/purple gradients',
|
||||
usage: 'Top navigation bars, menu bars',
|
||||
},
|
||||
{
|
||||
name: '.glass-modal',
|
||||
description: 'High-blur modal styling with enhanced effects',
|
||||
usage: 'Modals, dialogs, overlays',
|
||||
},
|
||||
{
|
||||
name: '.glass-button-primary',
|
||||
description: 'Primary action button with sky-blue gradient',
|
||||
usage: 'Main CTAs, submit buttons',
|
||||
},
|
||||
{
|
||||
name: '.glass-button-secondary',
|
||||
description: 'Secondary action button with violet gradient',
|
||||
usage: 'Secondary actions, cancel buttons',
|
||||
},
|
||||
{
|
||||
name: '.glass-button-gold',
|
||||
description: 'Premium action button with gold accent',
|
||||
usage: 'Premium features, upgrade CTAs',
|
||||
},
|
||||
];
|
||||
|
||||
const colorTokens = [
|
||||
{
|
||||
category: 'Glass Colors',
|
||||
tokens: [
|
||||
{
|
||||
name: 'glass-50',
|
||||
value: 'rgba(255, 255, 255, 0.05)',
|
||||
usage: 'Subtle backgrounds',
|
||||
},
|
||||
{
|
||||
name: 'glass-100',
|
||||
value: 'rgba(255, 255, 255, 0.1)',
|
||||
usage: 'Primary glass background',
|
||||
},
|
||||
{
|
||||
name: 'glass-200',
|
||||
value: 'rgba(255, 255, 255, 0.15)',
|
||||
usage: 'Hover states',
|
||||
},
|
||||
{
|
||||
name: 'glass-300',
|
||||
value: 'rgba(255, 255, 255, 0.2)',
|
||||
usage: 'Borders and accents',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
category: 'Gold System',
|
||||
tokens: [
|
||||
{ name: 'gold-400', value: '#f2c55a', usage: 'Light gold accents' },
|
||||
{
|
||||
name: 'gold-500',
|
||||
value: '#d99e34',
|
||||
usage: 'Primary gold (brand color)',
|
||||
},
|
||||
{ name: 'gold-600', value: '#c8852d', usage: 'Darker gold for text' },
|
||||
],
|
||||
},
|
||||
{
|
||||
category: 'Gradient Colors',
|
||||
tokens: [
|
||||
{
|
||||
name: 'gradient.primary.from',
|
||||
value: '#0ea5e9 (sky-500)',
|
||||
usage: 'Primary gradient start',
|
||||
},
|
||||
{
|
||||
name: 'gradient.primary.to',
|
||||
value: '#2563eb (blue-600)',
|
||||
usage: 'Primary gradient end',
|
||||
},
|
||||
{
|
||||
name: 'gradient.secondary.from',
|
||||
value: '#8b5cf6 (violet-500)',
|
||||
usage: 'Secondary gradient start',
|
||||
},
|
||||
{
|
||||
name: 'gradient.secondary.to',
|
||||
value: '#9333ea (purple-600)',
|
||||
usage: 'Secondary gradient end',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const animations = [
|
||||
{
|
||||
name: 'fade-in-up',
|
||||
duration: '0.6s',
|
||||
easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
description: 'Smooth entrance animation with scale and translate',
|
||||
},
|
||||
{
|
||||
name: 'slide-in-left',
|
||||
duration: '0.5s',
|
||||
easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
description: 'Slide in from left side',
|
||||
},
|
||||
{
|
||||
name: 'slide-in-right',
|
||||
duration: '0.5s',
|
||||
easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
description: 'Slide in from right side',
|
||||
},
|
||||
{
|
||||
name: 'pulse-slow',
|
||||
duration: '4s',
|
||||
easing: 'cubic-bezier(0.4, 0, 0.6, 1)',
|
||||
description: 'Slow breathing effect for CTAs',
|
||||
},
|
||||
{
|
||||
name: 'glow',
|
||||
duration: '2s',
|
||||
easing: 'ease-in-out infinite alternate',
|
||||
description: 'Gold glow effect animation',
|
||||
},
|
||||
{
|
||||
name: 'float',
|
||||
duration: '6s',
|
||||
easing: 'ease-in-out infinite',
|
||||
description: 'Gentle floating motion',
|
||||
},
|
||||
];
|
||||
|
||||
const shadows = [
|
||||
{
|
||||
name: 'shadow-glass',
|
||||
value: '0 8px 32px rgba(0, 0, 0, 0.1)',
|
||||
usage: 'Standard glass elevation',
|
||||
},
|
||||
{
|
||||
name: 'shadow-glass-lg',
|
||||
value: '0 20px 64px rgba(0, 0, 0, 0.15)',
|
||||
usage: 'Elevated glass components',
|
||||
},
|
||||
{
|
||||
name: 'shadow-glass-xl',
|
||||
value: '0 32px 96px rgba(0, 0, 0, 0.2)',
|
||||
usage: 'High elevation modals',
|
||||
},
|
||||
{
|
||||
name: 'shadow-glow',
|
||||
value: '0 0 20px rgba(217, 158, 52, 0.3)',
|
||||
usage: 'Gold glow effect',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className='bg-premium-dark min-h-screen space-y-12 p-8'>
|
||||
{/* Header */}
|
||||
<div className='space-y-4 text-center'>
|
||||
<h1 className='text-premium text-6xl font-bold'>
|
||||
Design System Documentation
|
||||
</h1>
|
||||
<p className='text-xl text-white/80'>
|
||||
Complete reference for Black Canyon Tickets glassmorphism theme
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Component Reference */}
|
||||
<section className='glass-card'>
|
||||
<h2 className='mb-8 text-3xl font-bold text-white'>
|
||||
Component Reference
|
||||
</h2>
|
||||
<div className='grid gap-6'>
|
||||
{glassComponents.map((component, index) => (
|
||||
<div key={index} className='glass-card-compact'>
|
||||
<div className='flex items-start justify-between'>
|
||||
<div className='flex-1'>
|
||||
<h3 className='mb-2 font-mono text-lg text-gold-400'>
|
||||
{component.name}
|
||||
</h3>
|
||||
<p className='mb-2 text-white/80'>{component.description}</p>
|
||||
<p className='text-sm text-white/60'>
|
||||
<strong>Usage:</strong> {component.usage}
|
||||
</p>
|
||||
</div>
|
||||
<div className='ml-4'>
|
||||
<div
|
||||
className={component.name.replace('.', '')}
|
||||
style={{ minWidth: '80px', minHeight: '40px' }}
|
||||
>
|
||||
{component.name.includes('button') && (
|
||||
<span className='text-sm'>Sample</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Color Tokens */}
|
||||
<section className='glass-card'>
|
||||
<h2 className='mb-8 text-3xl font-bold text-white'>Color Tokens</h2>
|
||||
<div className='space-y-8'>
|
||||
{colorTokens.map((category, categoryIndex) => (
|
||||
<div key={categoryIndex}>
|
||||
<h3 className='mb-4 text-xl font-semibold text-white'>
|
||||
{category.category}
|
||||
</h3>
|
||||
<div className='grid gap-4'>
|
||||
{category.tokens.map((token, tokenIndex) => (
|
||||
<div key={tokenIndex} className='glass-card-compact'>
|
||||
<div className='flex items-center space-x-4'>
|
||||
<div
|
||||
className='h-12 w-12 rounded-lg border border-white/20'
|
||||
style={{
|
||||
backgroundColor: token.value.includes('rgba')
|
||||
? token.value
|
||||
: token.value.startsWith('#')
|
||||
? token.value
|
||||
: '#0ea5e9', // fallback for gradient tokens
|
||||
}}
|
||||
/>
|
||||
<div className='flex-1'>
|
||||
<h4 className='font-mono text-gold-400'>
|
||||
{token.name}
|
||||
</h4>
|
||||
<p className='text-sm text-white/70'>{token.value}</p>
|
||||
<p className='text-xs text-white/50'>{token.usage}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Animations */}
|
||||
<section className='glass-card'>
|
||||
<h2 className='mb-8 text-3xl font-bold text-white'>Animation System</h2>
|
||||
<div className='grid gap-6 md:grid-cols-2'>
|
||||
{animations.map((animation, index) => (
|
||||
<div key={index} className='glass-card-compact'>
|
||||
<h3 className='mb-2 font-mono text-lg text-gold-400'>
|
||||
animate-{animation.name}
|
||||
</h3>
|
||||
<div className='space-y-2 text-sm'>
|
||||
<p className='text-white/80'>{animation.description}</p>
|
||||
<div className='flex justify-between text-white/60'>
|
||||
<span>Duration: {animation.duration}</span>
|
||||
<span>Easing: cubic-bezier</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-4'>
|
||||
<div
|
||||
className={`glass-button animate-${animation.name} inline-block`}
|
||||
style={{ animationDelay: `${index * 0.1}s` }}
|
||||
>
|
||||
Preview
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Shadows */}
|
||||
<section className='glass-card'>
|
||||
<h2 className='mb-8 text-3xl font-bold text-white'>Shadow System</h2>
|
||||
<div className='grid gap-6 md:grid-cols-2'>
|
||||
{shadows.map((shadow, index) => (
|
||||
<div key={index} className='glass-card-compact'>
|
||||
<h3 className='mb-2 font-mono text-lg text-gold-400'>
|
||||
{shadow.name}
|
||||
</h3>
|
||||
<p className='mb-4 text-sm text-white/70'>{shadow.usage}</p>
|
||||
<div
|
||||
className='glass rounded-xl p-4'
|
||||
style={{ boxShadow: shadow.value }}
|
||||
>
|
||||
<p className='text-sm text-white'>Shadow Preview</p>
|
||||
</div>
|
||||
<code className='mt-2 block text-xs text-white/50'>
|
||||
{shadow.value}
|
||||
</code>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Usage Guidelines */}
|
||||
<section className='glass-card'>
|
||||
<h2 className='mb-8 text-3xl font-bold text-white'>Usage Guidelines</h2>
|
||||
<div className='grid gap-8 md:grid-cols-2'>
|
||||
<div>
|
||||
<h3 className='mb-4 text-xl font-semibold text-green-400'>
|
||||
✅ Best Practices
|
||||
</h3>
|
||||
<ul className='space-y-3 text-white/80'>
|
||||
<li>• Use glass effects sparingly for maximum impact</li>
|
||||
<li>• Layer glass components for depth hierarchy</li>
|
||||
<li>• Maintain contrast ratios for accessibility</li>
|
||||
<li>• Use consistent animation timing</li>
|
||||
<li>• Apply hover effects for interactive elements</li>
|
||||
<li>• Use semantic color variants for status</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className='mb-4 text-xl font-semibold text-red-400'>
|
||||
❌ Avoid
|
||||
</h3>
|
||||
<ul className='space-y-3 text-white/80'>
|
||||
<li>• Overusing blur effects on mobile devices</li>
|
||||
<li>• Mixing different glass opacities randomly</li>
|
||||
<li>• Applying glass effects to small text</li>
|
||||
<li>• Using too many competing animations</li>
|
||||
<li>• Ignoring reduced motion preferences</li>
|
||||
<li>• Low contrast text on glass backgrounds</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Accessibility */}
|
||||
<section className='glass-card'>
|
||||
<h2 className='mb-8 text-3xl font-bold text-white'>
|
||||
Accessibility Features
|
||||
</h2>
|
||||
<div className='grid gap-6 md:grid-cols-3'>
|
||||
<div className='glass-card-compact'>
|
||||
<h3 className='mb-3 text-lg font-semibold text-blue-400'>
|
||||
Focus Management
|
||||
</h3>
|
||||
<p className='text-sm text-white/80'>
|
||||
All interactive elements include visible focus rings with gold
|
||||
accent colors.
|
||||
</p>
|
||||
</div>
|
||||
<div className='glass-card-compact'>
|
||||
<h3 className='mb-3 text-lg font-semibold text-green-400'>
|
||||
Contrast Ratios
|
||||
</h3>
|
||||
<p className='text-sm text-white/80'>
|
||||
Text maintains WCAG AA compliance with minimum 4.5:1 contrast
|
||||
ratios.
|
||||
</p>
|
||||
</div>
|
||||
<div className='glass-card-compact'>
|
||||
<h3 className='mb-3 text-lg font-semibold text-purple-400'>
|
||||
Motion Control
|
||||
</h3>
|
||||
<p className='text-sm text-white/80'>
|
||||
Animations respect prefers-reduced-motion user settings.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Performance Notes */}
|
||||
<section className='glass-card'>
|
||||
<h2 className='mb-8 text-3xl font-bold text-white'>
|
||||
Performance Considerations
|
||||
</h2>
|
||||
<div className='glass-info rounded-xl p-6'>
|
||||
<h3 className='mb-4 text-lg font-semibold text-blue-300'>
|
||||
Optimizations Included
|
||||
</h3>
|
||||
<ul className='space-y-2 text-sm text-blue-200'>
|
||||
<li>• CSS transforms use GPU acceleration</li>
|
||||
<li>• Backdrop-filter optimized for modern browsers</li>
|
||||
<li>• Animation delays prevent simultaneous triggers</li>
|
||||
<li>• Selective application of expensive effects</li>
|
||||
<li>• Compressed gradient values for smaller CSS bundle</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ThemeDocumentation;
|
||||
Reference in New Issue
Block a user