forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: increase contrast when prefers-contrast: more (#684)
authored by
Luke Warlow
and committed by
GitHub
409842e7
6b9a6ae5
+28
-2
+26
app/assets/main.css
+26
app/assets/main.css
···
75
75
--badge-cyan: oklch(0.571 0.181 210);
76
76
}
77
77
78
+
@media (prefers-contrast: more) {
79
+
:root[data-theme='dark'] {
80
+
/* text colors */
81
+
--fg: oklch(1 0 0);
82
+
--fg-muted: oklch(0.769 0 0);
83
+
--fg-subtle: oklch(0.693 0 0);
84
+
85
+
/* border, separator colors */
86
+
--border: oklch(0.769 0 0);
87
+
--border-subtle: oklch(0.739 0 0);
88
+
--border-hover: oklch(0.771 0 0);
89
+
}
90
+
91
+
:root[data-theme='light'] {
92
+
/* text colors */
93
+
--fg: oklch(0 0 0);
94
+
--fg-muted: oklch(0.329 0 0);
95
+
--fg-subtle: oklch(0.4 0 0);
96
+
97
+
/* border, separator colors */
98
+
--border: oklch(0.3514 0 0);
99
+
--border-subtle: oklch(0.422 0 0);
100
+
--border-hover: oklch(0.315 0 0);
101
+
}
102
+
}
103
+
78
104
html {
79
105
-webkit-font-smoothing: antialiased;
80
106
-moz-osx-font-smoothing: grayscale;
+1
-1
app/components/Package/Card.vue
+1
-1
app/components/Package/Card.vue
···
32
32
<article
33
33
class="group card-interactive scroll-mt-48 scroll-mb-6 relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
34
34
:class="{
35
-
'border-accent/30 bg-accent/5': isExactMatch,
35
+
'border-accent/30 contrast-more:border-accent/90 bg-accent/5': isExactMatch,
36
36
}"
37
37
>
38
38
<!-- Glow effect for exact matches -->
+1
-1
app/components/SearchSuggestionCard.vue
+1
-1
app/components/SearchSuggestionCard.vue
···
15
15
<article
16
16
class="group card-interactive relative focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-bg focus-within:ring-offset-2 focus-within:ring-fg/50 focus-within:bg-bg-muted focus-within:border-border-hover"
17
17
:class="{
18
-
'border-accent/30 bg-accent/5': isExactMatch,
18
+
'border-accent/30 contrast-more:border-accent/90 bg-accent/5': isExactMatch,
19
19
}"
20
20
>
21
21
<!-- Glow effect for exact matches -->