mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-15 15:46:30 +03:00
Paul BakausandClaude Opus 4.6
8b93dfad5e
Each problem-space fixture is now a single file with two columns: left
for cases that should flag, right for cases that should not. Matches the
icon-tile-stack convention and makes browser-based visual review easier.
The pass column proves that no false positives leak from look-alike
patterns next to the real anti-patterns.
Merged (4 pairs → 4 files)
- color-should-{flag,pass}.html → color.html
- motion-should-{flag,pass}.html → motion.html
- glow-should-{flag,pass}.html → glow.html
- layout-should-{flag,pass}.html → layout.html
Left untouched
- should-{flag,pass}.html — used by the CLI smoke tests in
detect-antipatterns.test.js, which need a known-clean fixture for the
exit-code-0 path.
- typography-should-{flag,pass}.html — all three typography rules
(overused-font, single-font, flat-type-hierarchy) are page-level and
fundamentally can't share a page with their pass cases. Loading two
font stacks suppresses single-font; varied sizes suppress flat-type-
hierarchy. Documented in the test file.
Test calibration
- Hardcoded the jsdom finding counts (motion: 2 bounce + 2 layout-
transition; glow: 1 dark-glow). Real browser sees more because
jsdom doesn't fully apply class-based styles, but the pass-column
count is reliably 0. Browser-verified all 4 fixtures show expected
flag counts and zero pass-column false positives.
Fixture chrome fixes
- Sub-section labels (.col h3) now use #64748b instead of #94a3b8 so
the fixture's own UI doesn't trigger low-contrast. glow.html got a
CSS restructure into card-dark/card-light/card-medium variants so
every text/background pairing meets WCAG AA. layout.html's "card
with image" gradient changed from blue→purple to amber→rose so it
doesn't trip ai-color-palette.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
165 lines
7.6 KiB
HTML
165 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dark Glow Anti-Patterns — Should Flag vs Should Pass</title>
|
|
<style>
|
|
/* Two-column fixture: left = should flag, right = should pass.
|
|
The dark-glow rule fires when a colored box-shadow appears on a
|
|
child whose ancestor has a dark background. Each column wraps
|
|
its dark-context cases in its own .dark-context section so the
|
|
parent-bg lookup behaves predictably regardless of layout. */
|
|
body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 24px; margin: 0; }
|
|
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1200px; margin: 0 auto; }
|
|
.col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }
|
|
.col h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin: 24px 0 8px; color: #64748b; }
|
|
.dark-context { background: #111827; padding: 16px; border-radius: 12px; }
|
|
.dark-context + .dark-context { margin-top: 12px; }
|
|
/* Card variants: explicit dark vs light pairings, both WCAG AA compliant */
|
|
.card { padding: 14px 16px; border-radius: 10px; margin-bottom: 10px; }
|
|
.card h4 { font-weight: 600; font-size: 13px; margin: 0; }
|
|
.card p { font-size: 12px; margin: 4px 0 0; }
|
|
.card-dark { background: #1f2937; }
|
|
.card-dark h4 { color: #f9fafb; }
|
|
.card-dark p { color: #cbd5e1; }
|
|
.card-light { background: white; }
|
|
.card-light h4 { color: #0f172a; }
|
|
.card-light p { color: #475569; }
|
|
|
|
/* ── FLAG: dark background + colored glow ── */
|
|
.glow-blue { box-shadow: 0 0 20px rgba(59, 130, 246, 0.4); }
|
|
.glow-purple { box-shadow: 0 0 25px rgba(139, 92, 246, 0.35); }
|
|
.glow-cyan { box-shadow: 0 0 15px rgba(6, 182, 212, 0.5); }
|
|
.glow-multi { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 0 30px rgba(168, 85, 247, 0.3); }
|
|
|
|
/* ── PASS: same dark/light backgrounds, but neutral or no glow ── */
|
|
.light-colored-shadow { box-shadow: 0 2px 4px rgba(59, 130, 246, 0.15); }
|
|
.dark-normal-shadow { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
|
|
.dark-focus-ring { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); }
|
|
.dark-subtle-shadow { box-shadow: 0 1px 3px rgba(59, 130, 246, 0.2); }
|
|
.dark-elevated-sm { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
|
|
.dark-elevated-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4); }
|
|
.dark-elevated-lg { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5); }
|
|
.dark-elevated-inset { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); }
|
|
.dark-elevated-multi { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2); }
|
|
.elevated-sm-light { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
|
|
.elevated-md-light { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
|
|
.elevated-warm-light { box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15); }
|
|
/* Medium-gray card: lighter than dark mode, used to demonstrate "not dark enough" for glow detection. White text for AA contrast. */
|
|
.card-medium { background: #6b7280; }
|
|
.card-medium h4 { color: #ffffff; }
|
|
.card-medium p { color: #ffffff; }
|
|
.medium-gray-shadow { box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="grid">
|
|
<!-- ════════════════════════════════════════════════════════════
|
|
LEFT COLUMN: should flag (dark page + colored glows)
|
|
═══════════════════════════════════════════════════════════ -->
|
|
<div class="col" data-col="flag">
|
|
<h2>Should flag</h2>
|
|
|
|
<h3>CSS colored glows on dark background</h3>
|
|
<div class="dark-context">
|
|
<div class="card card-dark glow-blue">
|
|
<h4>Blue glow</h4>
|
|
<p>box-shadow: 0 0 20px rgba(59, 130, 246, 0.4)</p>
|
|
</div>
|
|
<div class="card card-dark glow-purple">
|
|
<h4>Purple glow</h4>
|
|
<p>box-shadow: 0 0 25px rgba(139, 92, 246, 0.35)</p>
|
|
</div>
|
|
<div class="card card-dark glow-cyan">
|
|
<h4>Cyan glow</h4>
|
|
<p>box-shadow: 0 0 15px rgba(6, 182, 212, 0.5)</p>
|
|
</div>
|
|
<div class="card card-dark glow-multi">
|
|
<h4>Multi-shadow with colored glow</h4>
|
|
<p>Normal shadow + purple glow combined.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Inline-style glow (regex path)</h3>
|
|
<div class="dark-context">
|
|
<div class="card card-dark" style="box-shadow: 0 0 20px rgba(236, 72, 153, 0.5);">
|
|
<h4>Inline pink glow</h4>
|
|
<p>Inline style for regex detection path.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ════════════════════════════════════════════════════════════
|
|
RIGHT COLUMN: should pass
|
|
═══════════════════════════════════════════════════════════ -->
|
|
<div class="col" data-col="pass">
|
|
<h2>Should pass</h2>
|
|
|
|
<h3>Light page + colored shadow</h3>
|
|
<div class="card card-light light-colored-shadow">
|
|
<h4>Colored shadow on light background</h4>
|
|
<p>Not dark mode, colored shadow is fine.</p>
|
|
</div>
|
|
|
|
<h3>Dark cards with neutral shadows</h3>
|
|
<div class="dark-context">
|
|
<div class="card card-dark dark-normal-shadow">
|
|
<h4>Normal gray shadow on dark card</h4>
|
|
<p>Gray/black shadow is not a glow.</p>
|
|
</div>
|
|
<div class="card card-dark dark-focus-ring">
|
|
<h4>Focus ring (spread, no blur)</h4>
|
|
<p>Functional ring, not decorative glow.</p>
|
|
</div>
|
|
<div class="card card-dark dark-subtle-shadow">
|
|
<h4>Tiny blur (<5px)</h4>
|
|
<p>Too subtle to be "glowing".</p>
|
|
</div>
|
|
<div class="card card-dark dark-elevated-sm">
|
|
<h4>Small dark elevation</h4>
|
|
<p>Subtle shadow on dark card.</p>
|
|
</div>
|
|
<div class="card card-dark dark-elevated-md">
|
|
<h4>Medium dark elevation</h4>
|
|
<p>Standard dark card shadow.</p>
|
|
</div>
|
|
<div class="card card-dark dark-elevated-lg">
|
|
<h4>Large dark elevation</h4>
|
|
<p>Prominent shadow on dark card.</p>
|
|
</div>
|
|
<div class="card card-dark dark-elevated-inset">
|
|
<h4>Inset shadow</h4>
|
|
<p>Inner shadow, not a glow.</p>
|
|
</div>
|
|
<div class="card card-dark dark-elevated-multi">
|
|
<h4>Multi-shadow dark card</h4>
|
|
<p>Layered gray shadows, no color glow.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Medium-gray background (not dark enough)</h3>
|
|
<div class="card card-medium medium-gray-shadow">
|
|
<h4>Not dark enough background</h4>
|
|
<p>Medium gray doesn't qualify as "dark mode".</p>
|
|
</div>
|
|
|
|
<h3>Light elevated cards</h3>
|
|
<div class="card card-light elevated-sm-light">
|
|
<h4>Small elevation (Tailwind shadow-sm)</h4>
|
|
<p>Standard subtle card shadow.</p>
|
|
</div>
|
|
<div class="card card-light elevated-md-light">
|
|
<h4>Medium elevation (Tailwind shadow-md)</h4>
|
|
<p>Standard card shadow.</p>
|
|
</div>
|
|
<div class="card card-light elevated-warm-light">
|
|
<h4>Warm deep shadow</h4>
|
|
<p>Large spread neutral shadow.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/js/detect-antipatterns-browser.js"></script>
|
|
</body>
|
|
</html>
|