mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-13 06:36:26 +03:00
Paul BakausandClaude Fable 5
1a4b5c2fa2
Four changes driven by human design review of eval artifacts:
1. Static engine contrast fidelity (nav-CTA cascade miss):
- parseAnyColor evaluates color-mix() (premultiplied sRGB mix; exact
for the dominant `color-mix(in oklab, C n%, transparent)` chip form)
- extractStaticColor captures color-mix() balanced instead of plucking
"transparent" out of the expression
- resolveBackground composites translucent layers over the opaque base
in both engines instead of skipping (static) or returning them
as-if-opaque (browser)
- NEW hover pass in the static cascade: :hover rules are matched via
state-stripped selectors, merged per-property against the resting
cascade with real specificity, and checked for WCAG contrast on
styled controls (checkHoverContrast). Catches the recurring miss
where a broader selector (.nav-links a:hover) beats the CTA's own
hover color and drops the pair below AA.
2. New `radial-halo` slop rule: chromatic radial-gradient wash (visible
saturated center -> transparent) as a decorative background on a dark
page. Exempts achromatic vignettes, opaque-end sheens, px-stop dot
textures, url() photo layers, and translucent (<0.7 alpha) staged-
light washes. Separate id from dark-glow so dashboards track the
gradient-drawn variant independently.
3. side-tab horizontal variant: 3-12px chromatic border-top/bottom (and
top/bottom-anchored full-width pseudo stripes) on cards/badges flag as
side-tab. Exempt: tablist/nav/aria-selected underlines, link/button
affordances, table cells, hr, state-conditional pseudo stripes, and
>12px bands. Badge-shaped spans (own visible background) participate.
4. CLI: file:// URLs route to the Puppeteer browser engine (~2s on a
50KB page), and detect --json findings now carry the registry
`category` field so downstream QA loops can separate mechanical slop
tells from judgment calls.
Fixture policy update: flat 3px top-accent cards moved from should-pass
to flag columns; tablist-underline and 16px-band pass cases added.
Browser bundle regenerated.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
85 lines
4.3 KiB
HTML
85 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Clean Patterns — Should NOT Flag</title>
|
|
<style>
|
|
body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 2rem; }
|
|
h1 { font-size: 1.5rem; margin-bottom: 0.5rem; }
|
|
h2 { font-size: 1.125rem; margin: 2.5rem 0 0.75rem; color: #6b7280; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; }
|
|
p.intro { color: #6b7280; margin-bottom: 2rem; max-width: 36rem; }
|
|
.section { max-width: 28rem; }
|
|
.card-rounded { background: white; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); max-width: 28rem; margin-bottom: 1rem; }
|
|
.card-rounded h3 { font-weight: 600; color: #111827; }
|
|
.card-rounded p { font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem; }
|
|
.card-flat { background: white; padding: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); max-width: 28rem; margin-bottom: 1rem; }
|
|
.badge { display: inline-block; font-size: 0.75rem; padding: 0.125rem 0.5rem; border-radius: 9999px; background: #dbeafe; color: #1d4ed8; }
|
|
|
|
/* Below-threshold side borders without radius */
|
|
.thin-left { border-left: 1px solid #3b82f6; }
|
|
.thin-right { border-right: 2px solid #8b5cf6; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Clean Patterns: Should Pass</h1>
|
|
<p class="intro">None of these should be flagged. They're all intentional, well-established web patterns.</p>
|
|
|
|
<!-- CLEAN CARDS -->
|
|
<h2>Clean Cards</h2>
|
|
<div class="section">
|
|
<div class="card-rounded" style="border: 1px solid #e5e7eb;">
|
|
<h3>Full border card</h3>
|
|
<p>Subtle 1px border all around. Clean and intentional.</p>
|
|
</div>
|
|
|
|
<div style="max-width: 28rem; margin-bottom: 1rem; padding: 1.5rem; background: white; border-top: 1px solid #3b82f6; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
|
|
<h3 style="font-weight: 600; color: #111827;">Top border, no radius</h3>
|
|
<p style="font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem;">A hairline top rule without rounded corners is a clean section divider.</p>
|
|
</div>
|
|
|
|
<div style="max-width: 28rem; margin-bottom: 1rem; padding: 1.5rem; background: white; border-bottom: 2px solid #10b981; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
|
|
<h3 style="font-weight: 600; color: #111827;">Bottom border, no radius</h3>
|
|
<p style="font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem;">Bottom accent without rounded corners is also clean.</p>
|
|
</div>
|
|
|
|
<div class="card-rounded">
|
|
<span class="badge">New</span>
|
|
<h3>No border at all</h3>
|
|
<p>Just a shadow. Simple and effective.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BELOW THRESHOLD -->
|
|
<h2>Below Threshold (Thin, No Radius)</h2>
|
|
<div class="section">
|
|
<div class="card-flat thin-left">
|
|
<p>border-left: 1px solid, no radius — not flagged</p>
|
|
</div>
|
|
<div class="card-flat thin-right">
|
|
<p>border-right: 2px solid, no radius — not flagged</p>
|
|
</div>
|
|
<div class="card-flat" style="border-left: 1px solid #10b981;">
|
|
<p>1px inline border-left, no radius — not flagged</p>
|
|
</div>
|
|
</div>
|
|
<!-- DARK MODE CLEAN -->
|
|
<h2>Dark Mode (Clean)</h2>
|
|
<div class="section">
|
|
<div style="background: #1f2937; padding: 1.5rem; border-radius: 0.5rem; border: 1px solid #374151; max-width: 28rem; margin-bottom: 1rem;">
|
|
<h3 style="font-weight: 600; color: white;">Dark card, full border</h3>
|
|
<p style="font-size: 0.875rem; color: #9ca3af; margin-top: 0.25rem;">Uniform 1px border all around. Clean.</p>
|
|
</div>
|
|
<div style="background: #111827; padding: 1.5rem; max-width: 28rem; margin-bottom: 1rem; border-bottom: 2px solid #6366f1;">
|
|
<h3 style="font-weight: 600; color: white;">Dark section, bottom border, no radius</h3>
|
|
<p style="font-size: 0.875rem; color: #9ca3af; margin-top: 0.25rem;">Bottom accent without radius is fine.</p>
|
|
</div>
|
|
<div style="background: #1e293b; padding: 1.5rem; border-radius: 0.5rem; max-width: 28rem; margin-bottom: 1rem; box-shadow: 0 4px 6px rgba(0,0,0,0.3);">
|
|
<h3 style="font-weight: 600; color: white;">Dark card, no border</h3>
|
|
<p style="font-size: 0.875rem; color: #94a3b8; margin-top: 0.25rem;">Shadow only. Clean.</p>
|
|
</div>
|
|
</div>
|
|
<script src="/js/detect-antipatterns-browser.js"></script>
|
|
</body>
|
|
</html>
|