forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: accessible badges for light & dark themes (#412)
authored by
Jaydip Sanghani
and committed by
GitHub
592e0c53
37467478
+62
-28
+22
-1
app/assets/main.css
+22
-1
app/assets/main.css
···
22
22
--border-subtle: oklch(0.239 0 0);
23
23
--border-hover: oklch(0.371 0 0);
24
24
25
+
/* accent color, set by user from settings */
25
26
--accent: var(--accent-color, oklch(1 0 0));
26
27
--accent-muted: var(--accent-color, oklch(0.922 0 0));
27
28
29
+
/* syntax highlighting colors */
28
30
--syntax-fn: oklch(0.727 0.137 299.149);
29
31
--syntax-str: oklch(0.829 0.088 252.458);
30
32
--syntax-kw: oklch(0.721 0.162 15.494);
31
33
--syntax-comment: oklch(0.551 0.019 250.976);
34
+
35
+
/* badge colors for background & text */
36
+
--badge-orange: oklch(0.67 0.185 55);
37
+
--badge-yellow: oklch(0.588 0.183 91);
38
+
--badge-green: oklch(0.566 0.202 165);
39
+
--badge-cyan: oklch(0.571 0.181 210);
40
+
--badge-blue: oklch(0.579 0.191 252);
41
+
--badge-indigo: oklch(0.573 0.262 276.966);
42
+
--badge-purple: oklch(0.495 0.172 295);
43
+
--badge-pink: oklch(0.584 0.189 343);
32
44
}
33
45
34
46
:root[data-theme='light'] {
···
49
61
--accent-muted: var(--accent-color, oklch(0.205 0 0));
50
62
51
63
--syntax-fn: oklch(0.502 0.188 294.988);
52
-
--syntax-str: oklch(0.54 0.191 257.481);
64
+
--syntax-str: oklch(0.425 0.152 252);
53
65
--syntax-kw: oklch(0.588 0.193 20.469);
54
66
--syntax-comment: oklch(0.551 0.019 250.976);
67
+
68
+
--badge-blue: oklch(0.579 0.191 252);
69
+
--badge-yellow: oklch(0.588 0.183 91);
70
+
--badge-green: oklch(0.566 0.202 165);
71
+
--badge-indigo: oklch(0.457 0.24 277.023);
72
+
--badge-purple: oklch(0.495 0.172 295);
73
+
--badge-orange: oklch(0.67 0.185 55);
74
+
--badge-pink: oklch(0.584 0.189 343);
75
+
--badge-cyan: oklch(0.571 0.181 210);
55
76
}
56
77
57
78
html {
+3
-7
app/components/VersionSelector.vue
+3
-7
app/components/VersionSelector.vue
···
480
480
<span>{{ currentVersion }}</span>
481
481
<span
482
482
v-if="currentVersion === latestVersion"
483
-
class="text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/10 text-emerald-400 font-sans font-medium"
483
+
class="text-xs px-1.5 py-0.5 rounded badge-green font-sans font-medium"
484
484
>
485
485
latest
486
486
</span>
···
567
567
<span
568
568
v-for="tag in group.primaryVersion.tags"
569
569
:key="tag"
570
-
class="text-[10px] px-1.5 py-0.5 rounded font-sans font-medium"
571
-
:class="
572
-
tag === 'latest'
573
-
? 'bg-emerald-500/10 text-emerald-400'
574
-
: 'bg-bg-muted text-fg-subtle'
575
-
"
570
+
class="text-xs px-1.5 py-0.5 rounded font-sans font-medium"
571
+
:class="tag === 'latest' ? 'badge-green' : 'badge-subtle'"
576
572
>
577
573
{{ tag }}
578
574
</span>
+15
-17
app/pages/docs/[...path].vue
+15
-17
app/pages/docs/[...path].vue
···
120
120
</span>
121
121
</div>
122
122
<div class="flex items-center gap-3 shrink-0">
123
-
<span
124
-
class="text-xs px-2 py-1 rounded bg-emerald-500/10 text-emerald-400 border border-emerald-500/20"
125
-
>
123
+
<span class="text-xs px-2 py-1 rounded badge-green border border-badge-green/50">
126
124
API Docs
127
125
</span>
128
126
</div>
···
242
240
}
243
241
244
242
.docs-content .docs-symbol:target .docs-symbol-header {
245
-
@apply bg-amber-500/10 -mx-3 px-3 py-1 rounded-md;
243
+
@apply bg-badge-yellow/10 -mx-3 px-3 py-1 rounded-md;
246
244
}
247
245
248
246
/* Symbol header (name + badges) */
···
264
262
}
265
263
266
264
.docs-content .docs-badge--function {
267
-
@apply bg-blue-500/15 text-blue-400;
265
+
@apply badge-blue;
268
266
}
269
267
.docs-content .docs-badge--class {
270
-
@apply bg-amber-500/15 text-amber-400;
268
+
@apply badge-yellow;
271
269
}
272
270
.docs-content .docs-badge--interface {
273
-
@apply bg-emerald-500/15 text-emerald-400;
271
+
@apply badge-green;
274
272
}
275
273
.docs-content .docs-badge--typeAlias {
276
-
@apply bg-violet-500/15 text-violet-400;
274
+
@apply badge-indigo;
277
275
}
278
276
.docs-content .docs-badge--variable {
279
-
@apply bg-orange-500/15 text-orange-400;
277
+
@apply badge-orange;
280
278
}
281
279
.docs-content .docs-badge--enum {
282
-
@apply bg-pink-500/15 text-pink-400;
280
+
@apply badge-pink;
283
281
}
284
282
.docs-content .docs-badge--namespace {
285
-
@apply bg-cyan-500/15 text-cyan-400;
283
+
@apply badge-cyan;
286
284
}
287
285
.docs-content .docs-badge--async {
288
-
@apply bg-purple-500/15 text-purple-400;
286
+
@apply badge-purple;
289
287
}
290
288
291
289
/* Signature code block - now uses Shiki */
···
346
344
347
345
/* Deprecation warning */
348
346
.docs-content .docs-deprecated {
349
-
@apply bg-amber-500/10 border border-amber-500/20 rounded-lg p-4 mb-5;
347
+
@apply bg-badge-orange/20 border border-badge-orange rounded-lg p-4 mb-5;
350
348
}
351
349
352
350
.docs-content .docs-deprecated strong {
353
-
@apply text-amber-400 text-sm;
351
+
@apply text-badge-orange text-sm;
354
352
}
355
353
356
354
.docs-content .docs-deprecated p {
357
-
@apply text-amber-300/80 text-sm mt-2 mb-0;
355
+
@apply text-badge-orange text-sm mt-2 mb-0;
358
356
}
359
357
360
358
/* Parameters, Returns, Examples, See Also sections */
···
407
405
}
408
406
409
407
.docs-content .docs-link {
410
-
@apply text-blue-400 hover:text-blue-300 underline underline-offset-2;
408
+
@apply text-badge-blue hover:text-badge-blue/80 underline underline-offset-2;
411
409
}
412
410
413
411
/* Symbol cross-reference links */
414
412
.docs-content .docs-symbol-link {
415
-
@apply text-emerald-400 hover:text-emerald-300 underline underline-offset-2;
413
+
@apply text-badge-green hover:text-badge-green/80 underline underline-offset-2;
416
414
}
417
415
418
416
/* Unknown symbol references shown as code */
+3
-3
test/nuxt/components/VersionSelector.spec.ts
+3
-3
test/nuxt/components/VersionSelector.spec.ts
···
509
509
// Find the latest tag span
510
510
const latestTags = component.findAll('span').filter(s => s.text() === 'latest')
511
511
expect(latestTags.length).toBeGreaterThan(0)
512
-
// Should have emerald styling
513
-
const hasEmeraldStyling = latestTags.some(t => t.classes().some(c => c.includes('emerald')))
514
-
expect(hasEmeraldStyling).toBe(true)
512
+
// Should have green styling
513
+
const hasGreenStyling = latestTags.some(t => t.classes().some(c => c.includes('green')))
514
+
expect(hasGreenStyling).toBe(true)
515
515
})
516
516
})
517
517
+19
uno.config.ts
+19
uno.config.ts
···
59
59
kw: 'var(--syntax-kw)',
60
60
comment: 'var(--syntax-comment)',
61
61
},
62
+
badge: {
63
+
orange: 'var(--badge-orange)',
64
+
yellow: 'var(--badge-yellow)',
65
+
green: 'var(--badge-green)',
66
+
cyan: 'var(--badge-cyan)',
67
+
blue: 'var(--badge-blue)',
68
+
indigo: 'var(--badge-indigo)',
69
+
purple: 'var(--badge-purple)',
70
+
pink: 'var(--badge-pink)',
71
+
},
62
72
// Playground provider brand colors
63
73
provider: {
64
74
stackblitz: '#1389FD',
···
141
151
'tag',
142
152
'inline-flex items-center px-2 py-0.5 text-xs font-mono text-fg-muted bg-bg-muted border border-border rounded transition-colors duration-200 hover:(text-fg border-border-hover)',
143
153
],
154
+
['badge-orange', 'bg-badge-orange/10 text-badge-orange'],
155
+
['badge-yellow', 'bg-badge-yellow/10 text-badge-yellow'],
156
+
['badge-green', 'bg-badge-green/10 text-badge-green'],
157
+
['badge-cyan', 'bg-badge-cyan/10 text-badge-cyan'],
158
+
['badge-blue', 'bg-badge-blue/10 text-badge-blue'],
159
+
['badge-indigo', 'bg-badge-indigo/10 text-badge-indigo'],
160
+
['badge-purple', 'bg-badge-purple/10 text-badge-purple'],
161
+
['badge-pink', 'bg-badge-pink/10 text-badge-pink'],
162
+
['badge-subtle', 'bg-bg-subtle text-fg-subtle'],
144
163
145
164
// Code blocks
146
165
[