refactor: flatten Pastel routes by removing intermediate palettes and accessibility paths
- Move sub-routes from /pastel/palettes/* and /pastel/accessibility/* to direct children of /pastel - Update AppSidebar navigation links - Update Pastel Navbar and Footer links - Update Tailwind source directives in pastel/globals.css - Remove intermediate page files
This commit is contained in:
172
app/(app)/pastel/contrast/page.tsx
Normal file
172
app/(app)/pastel/contrast/page.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { ColorPicker } from '@/components/pastel/color/ColorPicker';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
import { getContrastRatio, hexToRgb, checkWCAGCompliance } from '@/lib/pastel/utils/color';
|
||||
import { ArrowLeftRight, Check, X } from 'lucide-react';
|
||||
|
||||
export default function ContrastPage() {
|
||||
const [foreground, setForeground] = useState('#000000');
|
||||
const [background, setBackground] = useState('#ffffff');
|
||||
const [ratio, setRatio] = useState<number | null>(null);
|
||||
const [compliance, setCompliance] = useState<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const fgRgb = hexToRgb(foreground);
|
||||
const bgRgb = hexToRgb(background);
|
||||
|
||||
if (fgRgb && bgRgb) {
|
||||
const contrastRatio = getContrastRatio(fgRgb, bgRgb);
|
||||
setRatio(contrastRatio);
|
||||
setCompliance(checkWCAGCompliance(contrastRatio));
|
||||
}
|
||||
}, [foreground, background]);
|
||||
|
||||
const swapColors = () => {
|
||||
const temp = foreground;
|
||||
setForeground(background);
|
||||
setBackground(temp);
|
||||
};
|
||||
|
||||
const ComplianceItem = ({
|
||||
label,
|
||||
passed,
|
||||
}: {
|
||||
label: string;
|
||||
passed: boolean;
|
||||
}) => (
|
||||
<div className="flex items-center justify-between p-3 bg-muted rounded-lg">
|
||||
<span className="text-sm">{label}</span>
|
||||
<Badge variant={passed ? 'success' : 'destructive'}>
|
||||
{passed ? (
|
||||
<>
|
||||
<Check className="h-3 w-3 mr-1" />
|
||||
Pass
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<X className="h-3 w-3 mr-1" />
|
||||
Fail
|
||||
</>
|
||||
)}
|
||||
</Badge>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen py-12">
|
||||
<div className="max-w-7xl mx-auto px-8 space-y-8">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold mb-2">Contrast Checker</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Test color combinations for WCAG 2.1 compliance
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
{/* Color Pickers */}
|
||||
<div className="space-y-6">
|
||||
<div className="p-6 border rounded-lg bg-card">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h2 className="text-xl font-semibold">Foreground Color</h2>
|
||||
</div>
|
||||
<ColorPicker color={foreground} onChange={setForeground} />
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<Button
|
||||
onClick={swapColors}
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="rounded-full"
|
||||
>
|
||||
<ArrowLeftRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="p-6 border rounded-lg bg-card">
|
||||
<h2 className="text-xl font-semibold mb-4">Background Color</h2>
|
||||
<ColorPicker color={background} onChange={setBackground} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Results */}
|
||||
<div className="space-y-6">
|
||||
{/* Preview */}
|
||||
<div className="p-6 border rounded-lg bg-card">
|
||||
<h2 className="text-xl font-semibold mb-4">Preview</h2>
|
||||
<div
|
||||
className="rounded-lg p-8 text-center"
|
||||
style={{ backgroundColor: background, color: foreground }}
|
||||
>
|
||||
<p className="text-xl font-bold mb-2">Normal Text (16px)</p>
|
||||
<p className="text-3xl font-bold">Large Text (24px)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contrast Ratio */}
|
||||
{ratio !== null && (
|
||||
<div className="p-6 border rounded-lg bg-card">
|
||||
<h2 className="text-xl font-semibold mb-4">Contrast Ratio</h2>
|
||||
<div className="text-center mb-6">
|
||||
<div className="text-5xl font-bold">{ratio.toFixed(2)}:1</div>
|
||||
<p className="text-sm text-muted-foreground mt-2">
|
||||
{ratio >= 7
|
||||
? 'Excellent contrast'
|
||||
: ratio >= 4.5
|
||||
? 'Good contrast'
|
||||
: ratio >= 3
|
||||
? 'Minimum contrast'
|
||||
: 'Poor contrast'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* WCAG Compliance */}
|
||||
{compliance && (
|
||||
<div className="p-6 border rounded-lg bg-card">
|
||||
<h2 className="text-xl font-semibold mb-4">WCAG 2.1 Compliance</h2>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold mb-2">Level AA</h3>
|
||||
<div className="space-y-2">
|
||||
<ComplianceItem
|
||||
label="Normal Text (4.5:1)"
|
||||
passed={compliance.aa.normalText}
|
||||
/>
|
||||
<ComplianceItem
|
||||
label="Large Text (3:1)"
|
||||
passed={compliance.aa.largeText}
|
||||
/>
|
||||
<ComplianceItem
|
||||
label="UI Components (3:1)"
|
||||
passed={compliance.aa.ui}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold mb-2">Level AAA</h3>
|
||||
<div className="space-y-2">
|
||||
<ComplianceItem
|
||||
label="Normal Text (7:1)"
|
||||
passed={compliance.aaa.normalText}
|
||||
/>
|
||||
<ComplianceItem
|
||||
label="Large Text (4.5:1)"
|
||||
passed={compliance.aaa.largeText}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user