forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
feat: polish colors and indents (#1042)
authored by
Alex Savelyev
and committed by
GitHub
3d3fb2ad
e0764627
+73
-65
+33
-29
app/assets/main.css
+33
-29
app/assets/main.css
···
8
8
:root:not([data-theme='light']),
9
9
:root[data-theme='dark'] {
10
10
/* background colors */
11
-
--bg: var(--bg-color, oklch(0.145 0 0));
12
-
--bg-subtle: var(--bg-subtle-color, oklch(0.178 0 0));
13
-
--bg-muted: var(--bg-muted-color, oklch(0.218 0 0));
14
-
--bg-elevated: var(--bg-elevated-color, oklch(0.252 0 0));
11
+
--bg: var(--bg-color, oklch(0.171 0 0));
12
+
--bg-subtle: var(--bg-subtle-color, oklch(0.198 0 0));
13
+
--bg-muted: var(--bg-muted-color, oklch(0.236 0 0));
14
+
--bg-elevated: var(--bg-elevated-color, oklch(0.266 0 0));
15
15
16
16
/* text colors */
17
-
--fg: oklch(0.985 0 0);
18
-
--fg-muted: oklch(0.709 0 0);
19
-
--fg-subtle: oklch(0.633 0 0);
17
+
--fg: oklch(0.982 0 0);
18
+
--fg-muted: oklch(0.749 0 0);
19
+
--fg-subtle: oklch(0.673 0 0);
20
20
21
21
/* border, separator colors */
22
22
--border: oklch(0.269 0 0);
···
45
45
}
46
46
47
47
:root[data-theme='dark'][data-bg-theme='slate'] {
48
-
--bg: oklch(0.129 0.012 264.695);
49
-
--bg-subtle: oklch(0.159 0.022 262.421);
50
-
--bg-muted: oklch(0.204 0.033 261.234);
51
-
--bg-elevated: oklch(0.259 0.041 260.031);
48
+
--bg: oklch(0.151 0.018 264.695);
49
+
--bg-subtle: oklch(0.179 0.015 262.421);
50
+
--bg-muted: oklch(0.214 0.018 261.234);
51
+
--bg-elevated: oklch(0.259 0.021 260.031);
52
52
}
53
53
54
54
:root[data-theme='dark'][data-bg-theme='zinc'] {
55
-
--bg: oklch(0.141 0.005 285.823);
56
-
--bg-subtle: oklch(0.168 0.005 285.894);
57
-
--bg-muted: oklch(0.209 0.005 285.929);
55
+
--bg: oklch(0.158 0.005 285.823);
56
+
--bg-subtle: oklch(0.188 0.005 285.894);
57
+
--bg-muted: oklch(0.219 0.005 285.929);
58
58
--bg-elevated: oklch(0.256 0.006 286.033);
59
59
}
60
60
61
61
:root[data-theme='dark'][data-bg-theme='stone'] {
62
-
--bg: oklch(0.147 0.004 49.25);
63
-
--bg-subtle: oklch(0.178 0.004 49.321);
64
-
--bg-muted: oklch(0.218 0.004 49.386);
65
-
--bg-elevated: oklch(0.252 0.007 34.298);
62
+
--bg: oklch(0.164 0.004 89.25);
63
+
--bg-subtle: oklch(0.198 0.008 89.321);
64
+
--bg-muted: oklch(0.228 0.015 89.386);
65
+
--bg-elevated: oklch(0.252 0.018 84.298);
66
66
}
67
67
68
68
:root[data-theme='dark'][data-bg-theme='black'] {
···
75
75
:root[data-theme='light'] {
76
76
--bg: var(--bg-color, oklch(1 0 0));
77
77
--bg-subtle: var(--bg-subtle-color, oklch(0.979 0.001 286.375));
78
-
--bg-muted: var(--bg-muted-color, oklch(0.955 0 0));
79
-
--bg-elevated: var(--bg-elevated-color, oklch(0.94 0 0));
78
+
--bg-muted: var(--bg-muted-color, oklch(0.955 0.001 286.76));
79
+
--bg-elevated: var(--bg-elevated-color, oklch(0.94 0.002 287.29));
80
80
81
-
--fg: oklch(0.145 0 0);
82
-
--fg-muted: oklch(0.439 0 0);
83
-
--fg-subtle: oklch(0.52 0 0);
81
+
--fg: oklch(0.146 0 0);
82
+
--fg-muted: oklch(0.398 0 0);
83
+
--fg-subtle: oklch(0.48 0 0);
84
84
85
85
--border: oklch(0.8514 0 0);
86
86
--border-subtle: oklch(0.922 0 0);
···
106
106
107
107
:root[data-theme='light'][data-bg-theme='slate'] {
108
108
--bg: oklch(1 0 0);
109
-
--bg-subtle: oklch(0.982 0.006 264.62);
110
-
--bg-muted: oklch(0.96 0.041 261.234);
111
-
--bg-elevated: oklch(0.943 0.013 255.52);
109
+
--bg-subtle: oklch(0.982 0.008 269.62);
110
+
--bg-muted: oklch(0.96 0.008 261.234);
111
+
--bg-elevated: oklch(0.943 0.012 255.52);
112
112
}
113
113
114
114
:root[data-theme='light'][data-bg-theme='zinc'] {
···
120
120
121
121
:root[data-theme='light'][data-bg-theme='stone'] {
122
122
--bg: oklch(1 0 0);
123
-
--bg-subtle: oklch(0.979 0.005 48.762);
124
-
--bg-muted: oklch(0.958 0.005 48.743);
125
-
--bg-elevated: oklch(0.943 0.005 48.731);
123
+
--bg-subtle: oklch(0.979 0.004 88.762);
124
+
--bg-muted: oklch(0.958 0.005 88.743);
125
+
--bg-elevated: oklch(0.943 0.005 88.731);
126
+
}
127
+
128
+
:root[data-theme='light'][data-bg-theme='black'] {
129
+
--bg-subtle: var(--bg-subtle-color, oklch(0.979 0 0));
126
130
}
127
131
128
132
@media (prefers-contrast: more) {
+3
-2
app/components/AppHeader.vue
+3
-2
app/components/AppHeader.vue
···
85
85
</script>
86
86
87
87
<template>
88
-
<header class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border">
88
+
<header class="sticky top-0 z-50 border-b border-border">
89
+
<div class="absolute inset-0 bg-bg/80 backdrop-blur-md" />
89
90
<nav
90
91
:aria-label="$t('nav.main_navigation')"
91
-
class="container min-h-14 flex items-center gap-2"
92
+
class="relative container min-h-14 flex items-center gap-2 z-1"
92
93
:class="isOnHomePage ? 'justify-end' : 'justify-between'"
93
94
>
94
95
<!-- Mobile: Logo + search button (expands search, doesn't navigate) -->
+3
-3
app/components/Filter/Chips.vue
+3
-3
app/components/Filter/Chips.vue
···
14
14
<template>
15
15
<div v-if="chips.length > 0" class="flex flex-wrap items-center gap-2">
16
16
<TransitionGroup name="chip">
17
-
<TagStatic v-for="chip in chips" :key="chip.id" class="gap-1">
17
+
<TagStatic v-for="chip in chips" :key="chip.id" class="gap-2 pe-1">
18
18
<span class="text-fg-subtle text-xs">{{ chip.label }}:</span>
19
19
<span class="max-w-32 truncate">{{
20
20
Array.isArray(chip.value) ? chip.value.join(', ') : chip.value
21
21
}}</span>
22
22
<button
23
23
type="button"
24
-
class="flex items-center ms-0.5 hover:text-fg rounded-full p-0.5 transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
24
+
class="flex items-center p-1 -m-1 hover:text-fg rounded-full transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
25
25
:aria-label="$t('filters.remove_filter', { label: chip.label })"
26
26
@click="emit('remove', chip)"
27
27
>
···
33
33
<button
34
34
v-if="chips.length > 1"
35
35
type="button"
36
-
class="text-sm text-fg-subtle hover:text-fg underline transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2"
36
+
class="text-sm p-0.5 text-fg-muted hover:text-fg underline transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2"
37
37
@click="emit('clearAll')"
38
38
>
39
39
{{ $t('filters.clear_all') }}
+1
-1
app/components/Filter/Panel.vue
+1
-1
app/components/Filter/Panel.vue
···
228
228
:value="filters.text"
229
229
:placeholder="searchPlaceholder"
230
230
autocomplete="off"
231
-
class="w-full bg-bg-subtle border border-border rounded-md px-4 py-3 font-mono text-sm text-fg placeholder:text-fg-subtle transition-all duration-200 focus:(border-fg/40 outline-none ring-1 ring-fg/10)"
231
+
class="w-full bg-bg-subtle border border-border rounded-md px-4 py-3 font-mono text-sm text-fg placeholder:text-fg-subtle transition-[border-color,outline-color] duration-300 hover:border-fg-subtle outline-2 outline-transparent focus:border-accent focus-visible:(outline-2 outline-accent/70)"
232
232
@input="handleTextInput"
233
233
/>
234
234
</div>
+7
-5
app/components/Header/AccountMenu.client.vue
+7
-5
app/components/Header/AccountMenu.client.vue
···
136
136
leave-to-class="opacity-0 translate-y-1"
137
137
>
138
138
<div v-if="isOpen" class="absolute inset-ie-0 top-full pt-2 w-72 z-50" role="menu">
139
-
<div class="bg-bg-elevated border border-border rounded-lg shadow-lg overflow-hidden px-1">
139
+
<div
140
+
class="bg-bg-subtle/80 backdrop-blur-sm border border-border-subtle rounded-lg shadow-lg shadow-bg-elevated/50 overflow-hidden px-1"
141
+
>
140
142
<!-- Connected accounts section -->
141
143
<div v-if="hasAnyConnection" class="py-1">
142
144
<!-- npm CLI connection -->
···
144
146
v-if="isNpmConnected && npmUser"
145
147
type="button"
146
148
role="menuitem"
147
-
class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-subtle transition-colors text-start rounded-md"
149
+
class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
148
150
@click="openConnectorModal"
149
151
>
150
152
<img
···
187
189
v-if="atprotoUser"
188
190
type="button"
189
191
role="menuitem"
190
-
class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-subtle transition-colors text-start rounded-md"
192
+
class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
191
193
@click="openAuthModal"
192
194
>
193
195
<img
···
223
225
v-if="!isNpmConnected"
224
226
type="button"
225
227
role="menuitem"
226
-
class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-subtle transition-colors text-start rounded-md"
228
+
class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
227
229
@click="openConnectorModal"
228
230
>
229
231
<span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
···
250
252
v-if="!atprotoUser"
251
253
type="button"
252
254
role="menuitem"
253
-
class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-subtle transition-colors text-start rounded-md"
255
+
class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
254
256
@click="openAuthModal"
255
257
>
256
258
<span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
+1
-1
app/components/Header/AuthModal.client.vue
+1
-1
app/components/Header/AuthModal.client.vue
···
60
60
name="handle"
61
61
:placeholder="$t('auth.modal.handle_placeholder')"
62
62
v-bind="noCorrect"
63
-
class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus:border-accent focus-visible:(outline-2 outline-accent/70)"
63
+
class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 hover:border-fg-subtle focus:border-accent focus-visible:(outline-2 outline-accent/70)"
64
64
/>
65
65
</div>
66
66
+9
-9
app/components/Header/ConnectorModal.vue
+9
-9
app/components/Header/ConnectorModal.vue
···
115
115
<button
116
116
type="button"
117
117
:aria-label="copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')"
118
-
class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
118
+
class="ms-auto text-fg-subtle p-1.5 -m-1.5 hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
119
119
@click="copy('pnpm npmx-connector')"
120
120
>
121
-
<span v-if="!copied" class="i-carbon:copy w-5 h-5" aria-hidden="true" />
122
-
<span v-else class="i-carbon:checkmark w-5 h-5 text-green-500" aria-hidden="true" />
121
+
<span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
122
+
<span v-else class="i-carbon:checkmark block w-5 h-5 text-green-500" aria-hidden="true" />
123
123
</button>
124
124
</div>
125
125
···
137
137
:aria-label="
138
138
copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')
139
139
"
140
-
class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
140
+
class="ms-auto text-fg-subtle p-1.5 -m-1.5 hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
141
141
@click="copyCommand"
142
142
>
143
-
<span v-if="!copied" class="i-carbon:copy w-5 h-5" aria-hidden="true" />
143
+
<span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
144
144
<span
145
145
v-else
146
-
class="i-carbon:checkmark w-5 h-5 text-green-500"
146
+
class="i-carbon:checkmark block w-5 h-5 text-green-500"
147
147
aria-hidden="true"
148
148
/>
149
149
</button>
···
168
168
name="connector-token"
169
169
:placeholder="$t('connector.modal.token_placeholder')"
170
170
v-bind="noCorrect"
171
-
class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:outline-accent/70"
171
+
class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg placeholder:text-fg-subtle transition-colors duration-200 hover:border-fg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:outline-accent/70"
172
172
/>
173
173
</div>
174
174
···
192
192
name="connector-port"
193
193
inputmode="numeric"
194
194
autocomplete="off"
195
-
class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg transition-colors duration-200 focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:outline-accent/70"
195
+
class="w-full px-3 py-2 font-mono text-sm bg-bg-subtle border border-border rounded-md text-fg transition-colors duration-200 hover:border-fg-subtle focus:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:outline-accent/70"
196
196
/>
197
197
</div>
198
198
</details>
···
215
215
<p class="inline-block text-xs font-bold uppercase tracking-wider text-fg rounded">
216
216
{{ $t('connector.modal.warning') }}
217
217
</p>
218
-
<p class="text-sm text-fg-muted">
218
+
<p class="text-sm text-fg-muted mt-1">
219
219
{{ $t('connector.modal.warning_text') }}
220
220
</p>
221
221
</div>
+2
-2
app/components/Modal.client.vue
+2
-2
app/components/Modal.client.vue
···
55
55
</h2>
56
56
<button
57
57
type="button"
58
-
class="text-fg-subtle w-5 h-5 hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
58
+
class="text-fg-subtle w-8 h-8 p-1.5 -m-1.5 hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
59
59
:aria-label="$t('common.close')"
60
60
@click="handleModalClose"
61
61
>
···
71
71
<style scoped>
72
72
/* Backdrop styling when any of the modals are open */
73
73
dialog:modal::backdrop {
74
-
@apply bg-black/60;
74
+
@apply bg-bg-elevated/70;
75
75
}
76
76
77
77
dialog::backdrop {
+2
-2
app/components/Package/Card.vue
+2
-2
app/components/Package/Card.vue
···
82
82
<p v-if="pkgDescription" class="text-fg-muted text-xs sm:text-sm line-clamp-2 mb-2 sm:mb-3">
83
83
<span v-html="pkgDescription" />
84
84
</p>
85
-
<div class="flex flex-wrap items-center gap-x-3 sm:gap-x-4 gap-y-2 text-xs text-fg-subtle">
85
+
<div class="flex flex-wrap items-center gap-x-3 sm:gap-x-4 gap-y-2 text-xs text-fg-muted">
86
86
<dl v-if="showPublisher || result.package.date" class="flex items-center gap-4 m-0">
87
87
<div
88
88
v-if="showPublisher && result.package.publisher?.username"
···
111
111
<!-- Mobile: downloads on separate row -->
112
112
<dl
113
113
v-if="result.downloads?.weekly"
114
-
class="sm:hidden flex items-center gap-4 mt-2 text-xs text-fg-subtle m-0"
114
+
class="sm:hidden flex items-center gap-4 mt-2 text-xs text-fg-muted m-0"
115
115
>
116
116
<div class="flex items-center gap-1.5">
117
117
<dt class="sr-only">{{ $t('package.card.weekly_downloads') }}</dt>
+3
-3
app/components/PaginationControls.vue
+3
-3
app/components/PaginationControls.vue
···
116
116
<!-- Only show when in paginated mode (table view or explicit paginated mode) -->
117
117
<div
118
118
v-if="shouldShowControls"
119
-
class="flex flex-wrap items-center justify-between gap-4 py-4 border-t border-border mt-6"
119
+
class="flex flex-wrap items-center justify-between gap-4 py-4 mt-2"
120
120
>
121
121
<!-- Left: Mode toggle and page size -->
122
122
<div class="flex items-center gap-4">
···
200
200
:aria-label="$t('filters.pagination.previous')"
201
201
@click="goPrev"
202
202
>
203
-
<span class="i-carbon-chevron-left rtl-flip w-4 h-4" aria-hidden="true" />
203
+
<span class="i-carbon-chevron-left block rtl-flip w-4 h-4" aria-hidden="true" />
204
204
</button>
205
205
206
206
<!-- Page numbers -->
···
230
230
:aria-label="$t('filters.pagination.next')"
231
231
@click="goNext"
232
232
>
233
-
<span class="i-carbon-chevron-right rtl-flip w-4 h-4" aria-hidden="true" />
233
+
<span class="i-carbon-chevron-right block rtl-flip w-4 h-4" aria-hidden="true" />
234
234
</button>
235
235
</nav>
236
236
</div>
+1
-1
app/components/Readme.vue
+1
-1
app/components/Readme.vue
+1
-1
app/components/Tag/Button.vue
+1
-1
app/components/Tag/Button.vue
···
16
16
class="inline-flex items-center px-2 py-0.5 text-xs font-mono border border-solid rounded transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
17
17
:class="[
18
18
pressed
19
-
? 'bg-fg text-bg border-fg hover:(text-text-bg/50)'
19
+
? 'bg-fg text-bg border-fg hover:(text-text-bg/50 bg-fg-muted)'
20
20
: 'bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover)',
21
21
{
22
22
'opacity-50 cursor-not-allowed': disabled,
+1
-1
app/components/Tag/RadioButton.vue
+1
-1
app/components/Tag/RadioButton.vue
···
36
36
class="peer sr-only"
37
37
/>
38
38
<label
39
-
class="bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover) inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 peer-focus:ring-2 peer-focus:ring-fg border-none peer-checked:(bg-fg text-bg border-fg hover:(text-text-bg/50)) peer-disabled:(opacity-50 pointer-events-none)"
39
+
class="bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover) inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 peer-focus-visible:(outline-2 outline-accent/70 outline-offset-2) border-none cursor-pointer peer-checked:(bg-fg text-bg border-fg hover:(text-text-bg/50)) peer-disabled:(opacity-50 pointer-events-none)"
40
40
:htmlFor="internalId"
41
41
>
42
42
<slot />
+1
-1
app/components/VersionSelector.vue
+1
-1
app/components/VersionSelector.vue
···
506
506
:aria-activedescendant="
507
507
focusedIndex >= 0 ? `version-${flatItems[focusedIndex]?.version?.version}` : undefined
508
508
"
509
-
class="absolute top-full inset-is-0 mt-2 min-w-[220px] bg-bg-elevated border border-border rounded-lg shadow-lg z-50 py-1 max-h-[400px] overflow-y-auto overscroll-contain focus-visible:outline-none"
509
+
class="absolute top-full inset-is-0 mt-2 min-w-[220px] bg-bg-subtle/80 backdrop-blur-sm border border-border-subtle rounded-lg shadow-lg shadow-fg-subtle/10 z-50 py-1 max-h-[400px] overflow-y-auto overscroll-contain focus-visible:outline-none"
510
510
@keydown="handleListboxKeydown"
511
511
>
512
512
<!-- Version groups -->
+3
-2
app/pages/package-docs/[...path].vue
+3
-2
app/pages/package-docs/[...path].vue
···
125
125
<!-- Sticky header - positioned below AppHeader -->
126
126
<header
127
127
aria-label="Package documentation header"
128
-
class="docs-header sticky z-10 bg-bg/95 backdrop-blur border-b border-border"
128
+
class="docs-header sticky z-10 border-b border-border"
129
129
>
130
-
<div class="px-4 sm:px-6 lg:px-8 py-4">
130
+
<div class="absolute inset-0 bg-bg/90 backdrop-blur" />
131
+
<div class="relative px-4 sm:px-6 lg:px-8 py-4 z-1">
131
132
<div class="flex items-center justify-between gap-4">
132
133
<div class="flex items-center gap-3 min-w-0">
133
134
<NuxtLink
+2
-2
app/pages/package/[[org]]/[name].vue
+2
-2
app/pages/package/[[org]]/[name].vue
···
1147
1147
1148
1148
<!-- eslint-disable vue/no-v-html -- HTML is sanitized server-side -->
1149
1149
<Readme v-if="readmeData?.html" :html="readmeData.html" />
1150
-
<p v-else class="text-fg-subtle italic">
1150
+
<p v-else class="text-fg-muted italic">
1151
1151
{{ $t('package.readme.no_readme') }}
1152
1152
<a
1153
1153
v-if="repositoryUrl"
1154
1154
:href="repositoryUrl"
1155
1155
target="_blank"
1156
1156
rel="noopener noreferrer"
1157
-
class="link"
1157
+
class="link text-fg underline underline-offset-4 decoration-fg-subtle hover:(decoration-fg text-fg) transition-colors duration-200"
1158
1158
>{{ $t('package.readme.view_on_github') }}</a
1159
1159
>
1160
1160
</p>