764ac90e60
Add comprehensive accessibility features and color naming:
**Color Utilities (lib/utils/color.ts):**
- getRelativeLuminance() - WCAG 2.1 luminance calculation
- getContrastRatio() - Contrast ratio between two colors
- hexToRgb() - Convert hex to RGB
- checkWCAGCompliance() - AA/AAA compliance checker
- Full WCAG 2.1 specification implementation
**New UI Component:**
- Badge component - Status indicators
- Variants: default, success, warning, destructive, outline
- Used for pass/fail indicators
- Accessible focus states
**Accessibility Pages:**
1. Contrast Checker (/accessibility/contrast)
- Dual color pickers (foreground/background)
- Real-time contrast ratio calculation
- Live text preview with both colors
- WCAG 2.1 compliance display:
- Level AA: Normal text (4.5:1), Large text (3:1), UI (3:1)
- Level AAA: Normal text (7:1), Large text (4.5:1)
- Pass/Fail badges for each criterion
- Swap colors button
- Visual feedback with color-coded results
2. Accessibility Dashboard (/accessibility)
- Overview of all accessibility tools
- Feature cards with icons
- Educational content about WCAG 2.1
- Standards explanation (AA vs AAA)
- Links to each tool
**Named Colors Page (/names):**
- Display all 148 CSS/X11 named colors
- Search by name or hex value
- Sort options (name, hue)
- Responsive grid layout (2-6 columns)
- Click to copy color
- Color name and hex display
- Loading and error states
- Empty state for no results
- Real-time filtering
**Batch Operations Page (/batch):**
- Placeholder "Coming Soon" page
- Feature preview list
- Planned capabilities description
- Professional coming soon message
**Features Implemented:**
- Real WCAG calculations (not approximations)
- Live contrast ratio updates
- Interactive color swapping
- Comprehensive compliance checking
- Educational content
- Named colors from API
- Search and filtering
- Responsive layouts
**Build Status:**
✅ 11 pages successfully rendering
✅ All TypeScript checks passing
✅ No build errors
All major sections now have functional or placeholder pages!
Next: Polish, testing, and additional enhancements.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { cn } from '@/lib/utils/cn';
|
|
|
|
export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
variant?: 'default' | 'success' | 'warning' | 'destructive' | 'outline';
|
|
}
|
|
|
|
const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
|
|
({ className, variant = 'default', ...props }, ref) => {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={cn(
|
|
'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors',
|
|
'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
|
|
{
|
|
'bg-primary text-primary-foreground': variant === 'default',
|
|
'bg-green-500 text-white': variant === 'success',
|
|
'bg-yellow-500 text-white': variant === 'warning',
|
|
'bg-destructive text-destructive-foreground': variant === 'destructive',
|
|
'border border-input': variant === 'outline',
|
|
},
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
);
|
|
|
|
Badge.displayName = 'Badge';
|
|
|
|
export { Badge };
|