1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Dark Glow Anti-Patterns — Should Flag vs Should Pass</title>
7 <style>
8 /* Two-column fixture: left = should flag, right = should pass.
9 The dark-glow rule fires when a colored box-shadow appears on a
10 child whose ancestor has a dark background. Each column wraps
11 its dark-context cases in its own .dark-context section so the
12 parent-bg lookup behaves predictably regardless of layout. */
13 body { font-family: system-ui, sans-serif; background: #f9fafb; padding: 24px; margin: 0; }
14 .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1200px; margin: 0 auto; }
15 .col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }
16 .col h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin: 24px 0 8px; color: #64748b; }
17 .dark-context { background: #111827; padding: 16px; border-radius: 12px; }
18 .dark-context + .dark-context { margin-top: 12px; }
19 /* Card variants: explicit dark vs light pairings, both WCAG AA compliant */
20 .card { padding: 14px 16px; border-radius: 10px; margin-bottom: 10px; }
21 .card h4 { font-weight: 600; font-size: 13px; margin: 0; }
22 .card p { font-size: 12px; margin: 4px 0 0; }
23 .card-dark { background: #1f2937; }
24 .card-dark h4 { color: #f9fafb; }
25 .card-dark p { color: #cbd5e1; }
26 .card-light { background: white; }
27 .card-light h4 { color: #0f172a; }
28 .card-light p { color: #475569; }
29
30 /* ── FLAG: dark background + colored glow ── */
31 .glow-blue { box-shadow: 0 0 20px rgba(59, 130, 246, 0.4); }
32 .glow-purple { box-shadow: 0 0 25px rgba(139, 92, 246, 0.35); }
33 .glow-cyan { box-shadow: 0 0 15px rgba(6, 182, 212, 0.5); }
34 .glow-multi { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 0 30px rgba(168, 85, 247, 0.3); }
35
36 /* ── PASS: same dark/light backgrounds, but neutral or no glow ── */
37 .light-colored-shadow { box-shadow: 0 2px 4px rgba(59, 130, 246, 0.15); }
38 .dark-normal-shadow { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4); }
39 .dark-focus-ring { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); }
40 .dark-subtle-shadow { box-shadow: 0 1px 3px rgba(59, 130, 246, 0.2); }
41 .dark-elevated-sm { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
42 .dark-elevated-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4); }
43 .dark-elevated-lg { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5); }
44 .dark-elevated-inset { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); }
45 .dark-elevated-multi { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2); }
46 .elevated-sm-light { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
47 .elevated-md-light { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
48 .elevated-warm-light { box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.15); }
49 /* Medium-gray card: lighter than dark mode, used to demonstrate "not dark enough" for glow detection. White text for AA contrast. */
50 .card-medium { background: #6b7280; }
51 .card-medium h4 { color: #ffffff; }
52 .card-medium p { color: #ffffff; }
53 .medium-gray-shadow { box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3); }
54 </style>
55</head>
56<body>
57 <div class="grid">
58 <!-- ════════════════════════════════════════════════════════════
59 LEFT COLUMN: should flag (dark page + colored glows)
60 ═══════════════════════════════════════════════════════════ -->
61 <div class="col" data-col="flag">
62 <h2>Should flag</h2>
63
64 <h3>CSS colored glows on dark background</h3>
65 <div class="dark-context">
66 <div class="card card-dark glow-blue">
67 <h4>Blue glow</h4>
68 <p>box-shadow: 0 0 20px rgba(59, 130, 246, 0.4)</p>
69 </div>
70 <div class="card card-dark glow-purple">
71 <h4>Purple glow</h4>
72 <p>box-shadow: 0 0 25px rgba(139, 92, 246, 0.35)</p>
73 </div>
74 <div class="card card-dark glow-cyan">
75 <h4>Cyan glow</h4>
76 <p>box-shadow: 0 0 15px rgba(6, 182, 212, 0.5)</p>
77 </div>
78 <div class="card card-dark glow-multi">
79 <h4>Multi-shadow with colored glow</h4>
80 <p>Normal shadow + purple glow combined.</p>
81 </div>
82 </div>
83
84 <h3>Inline-style glow (regex path)</h3>
85 <div class="dark-context">
86 <div class="card card-dark" style="box-shadow: 0 0 20px rgba(236, 72, 153, 0.5);">
87 <h4>Inline pink glow</h4>
88 <p>Inline style for regex detection path.</p>
89 </div>
90 </div>
91 </div>
92
93 <!-- ════════════════════════════════════════════════════════════
94 RIGHT COLUMN: should pass
95 ═══════════════════════════════════════════════════════════ -->
96 <div class="col" data-col="pass">
97 <h2>Should pass</h2>
98
99 <h3>Light page + colored shadow</h3>
100 <div class="card card-light light-colored-shadow">
101 <h4>Colored shadow on light background</h4>
102 <p>Not dark mode, colored shadow is fine.</p>
103 </div>
104
105 <h3>Dark cards with neutral shadows</h3>
106 <div class="dark-context">
107 <div class="card card-dark dark-normal-shadow">
108 <h4>Normal gray shadow on dark card</h4>
109 <p>Gray/black shadow is not a glow.</p>
110 </div>
111 <div class="card card-dark dark-focus-ring">
112 <h4>Focus ring (spread, no blur)</h4>
113 <p>Functional ring, not decorative glow.</p>
114 </div>
115 <div class="card card-dark dark-subtle-shadow">
116 <h4>Tiny blur (<5px)</h4>
117 <p>Too subtle to be "glowing".</p>
118 </div>
119 <div class="card card-dark dark-elevated-sm">
120 <h4>Small dark elevation</h4>
121 <p>Subtle shadow on dark card.</p>
122 </div>
123 <div class="card card-dark dark-elevated-md">
124 <h4>Medium dark elevation</h4>
125 <p>Standard dark card shadow.</p>
126 </div>
127 <div class="card card-dark dark-elevated-lg">
128 <h4>Large dark elevation</h4>
129 <p>Prominent shadow on dark card.</p>
130 </div>
131 <div class="card card-dark dark-elevated-inset">
132 <h4>Inset shadow</h4>
133 <p>Inner shadow, not a glow.</p>
134 </div>
135 <div class="card card-dark dark-elevated-multi">
136 <h4>Multi-shadow dark card</h4>
137 <p>Layered gray shadows, no color glow.</p>
138 </div>
139 </div>
140
141 <h3>Medium-gray background (not dark enough)</h3>
142 <div class="card card-medium medium-gray-shadow">
143 <h4>Not dark enough background</h4>
144 <p>Medium gray doesn't qualify as "dark mode".</p>
145 </div>
146
147 <h3>Light elevated cards</h3>
148 <div class="card card-light elevated-sm-light">
149 <h4>Small elevation (Tailwind shadow-sm)</h4>
150 <p>Standard subtle card shadow.</p>
151 </div>
152 <div class="card card-light elevated-md-light">
153 <h4>Medium elevation (Tailwind shadow-md)</h4>
154 <p>Standard card shadow.</p>
155 </div>
156 <div class="card card-light elevated-warm-light">
157 <h4>Warm deep shadow</h4>
158 <p>Large spread neutral shadow.</p>
159 </div>
160 </div>
161 </div>
162 <script src="/js/detect-antipatterns-browser.js"></script>
163</body>
164</html>