Skip to content

Commit 38158f3

Browse files
whitep4nth3rwhitep4nth3r
committed
merge main
1 parent 8beb8e6 commit 38158f3

16 files changed

Lines changed: 73 additions & 65 deletions

File tree

‎app/assets/main.css‎

Lines changed: 33 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@
88
:root:not([data-theme='light']),
99
:root[data-theme='dark'] {
1010
/* background colors */
11-
--bg: var(--bg-color, oklch(0.145 0 0));
12-
--bg-subtle: var(--bg-subtle-color, oklch(0.178 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));
1315
--bg-blog: oklch(0.195 0 0);
14-
--bg-muted: var(--bg-muted-color, oklch(0.218 0 0));
15-
--bg-elevated: var(--bg-elevated-color, oklch(0.252 0 0));
1616

1717
/* text colors */
18-
--fg: oklch(0.985 0 0);
19-
--fg-muted: oklch(0.709 0 0);
20-
--fg-subtle: oklch(0.633 0 0);
18+
--fg: oklch(0.982 0 0);
19+
--fg-muted: oklch(0.749 0 0);
20+
--fg-subtle: oklch(0.673 0 0);
2121

2222
/* border, separator colors */
2323
--border: oklch(0.269 0 0);
@@ -46,24 +46,24 @@
4646
}
4747

4848
:root[data-theme='dark'][data-bg-theme='slate'] {
49-
--bg: oklch(0.129 0.012 264.695);
50-
--bg-subtle: oklch(0.159 0.022 262.421);
51-
--bg-muted: oklch(0.204 0.033 261.234);
52-
--bg-elevated: oklch(0.259 0.041 260.031);
49+
--bg: oklch(0.151 0.018 264.695);
50+
--bg-subtle: oklch(0.179 0.015 262.421);
51+
--bg-muted: oklch(0.214 0.018 261.234);
52+
--bg-elevated: oklch(0.259 0.021 260.031);
5353
}
5454

5555
:root[data-theme='dark'][data-bg-theme='zinc'] {
56-
--bg: oklch(0.141 0.005 285.823);
57-
--bg-subtle: oklch(0.168 0.005 285.894);
58-
--bg-muted: oklch(0.209 0.005 285.929);
56+
--bg: oklch(0.158 0.005 285.823);
57+
--bg-subtle: oklch(0.188 0.005 285.894);
58+
--bg-muted: oklch(0.219 0.005 285.929);
5959
--bg-elevated: oklch(0.256 0.006 286.033);
6060
}
6161

6262
:root[data-theme='dark'][data-bg-theme='stone'] {
63-
--bg: oklch(0.147 0.004 49.25);
64-
--bg-subtle: oklch(0.178 0.004 49.321);
65-
--bg-muted: oklch(0.218 0.004 49.386);
66-
--bg-elevated: oklch(0.252 0.007 34.298);
63+
--bg: oklch(0.164 0.004 89.25);
64+
--bg-subtle: oklch(0.198 0.008 89.321);
65+
--bg-muted: oklch(0.228 0.015 89.386);
66+
--bg-elevated: oklch(0.252 0.018 84.298);
6767
}
6868

6969
:root[data-theme='dark'][data-bg-theme='black'] {
@@ -76,12 +76,12 @@
7676
:root[data-theme='light'] {
7777
--bg: var(--bg-color, oklch(1 0 0));
7878
--bg-subtle: var(--bg-subtle-color, oklch(0.979 0.001 286.375));
79-
--bg-muted: var(--bg-muted-color, oklch(0.955 0 0));
80-
--bg-elevated: var(--bg-elevated-color, oklch(0.94 0 0));
79+
--bg-muted: var(--bg-muted-color, oklch(0.955 0.001 286.76));
80+
--bg-elevated: var(--bg-elevated-color, oklch(0.94 0.002 287.29));
8181

82-
--fg: oklch(0.145 0 0);
83-
--fg-muted: oklch(0.439 0 0);
84-
--fg-subtle: oklch(0.52 0 0);
82+
--fg: oklch(0.146 0 0);
83+
--fg-muted: oklch(0.398 0 0);
84+
--fg-subtle: oklch(0.48 0 0);
8585

8686
--border: oklch(0.8514 0 0);
8787
--border-subtle: oklch(0.922 0 0);
@@ -107,9 +107,9 @@
107107

108108
:root[data-theme='light'][data-bg-theme='slate'] {
109109
--bg: oklch(1 0 0);
110-
--bg-subtle: oklch(0.982 0.006 264.62);
111-
--bg-muted: oklch(0.96 0.041 261.234);
112-
--bg-elevated: oklch(0.943 0.013 255.52);
110+
--bg-subtle: oklch(0.982 0.008 269.62);
111+
--bg-muted: oklch(0.96 0.008 261.234);
112+
--bg-elevated: oklch(0.943 0.012 255.52);
113113
}
114114

115115
:root[data-theme='light'][data-bg-theme='zinc'] {
@@ -121,9 +121,13 @@
121121

122122
:root[data-theme='light'][data-bg-theme='stone'] {
123123
--bg: oklch(1 0 0);
124-
--bg-subtle: oklch(0.979 0.005 48.762);
125-
--bg-muted: oklch(0.958 0.005 48.743);
126-
--bg-elevated: oklch(0.943 0.005 48.731);
124+
--bg-subtle: oklch(0.979 0.004 88.762);
125+
--bg-muted: oklch(0.958 0.005 88.743);
126+
--bg-elevated: oklch(0.943 0.005 88.731);
127+
}
128+
129+
:root[data-theme='light'][data-bg-theme='black'] {
130+
--bg-subtle: var(--bg-subtle-color, oklch(0.979 0 0));
127131
}
128132

129133
@media (prefers-contrast: more) {

‎app/components/AppHeader.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,10 +85,11 @@ onKeyStroke(
8585
</script>
8686

8787
<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" />
8990
<nav
9091
: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"
9293
:class="isOnHomePage ? 'justify-end' : 'justify-between'"
9394
>
9495
<!-- Mobile: Logo + search button (expands search, doesn't navigate) -->

‎app/components/Filter/Chips.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,14 @@ const emit = defineEmits<{
1414
<template>
1515
<div v-if="chips.length > 0" class="flex flex-wrap items-center gap-2">
1616
<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">
1818
<span class="text-fg-subtle text-xs">{{ chip.label }}:</span>
1919
<span class="max-w-32 truncate">{{
2020
Array.isArray(chip.value) ? chip.value.join(', ') : chip.value
2121
}}</span>
2222
<button
2323
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"
2525
:aria-label="$t('filters.remove_filter', { label: chip.label })"
2626
@click="emit('remove', chip)"
2727
>
@@ -33,7 +33,7 @@ const emit = defineEmits<{
3333
<button
3434
v-if="chips.length > 1"
3535
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"
3737
@click="emit('clearAll')"
3838
>
3939
{{ $t('filters.clear_all') }}

‎app/components/Filter/Panel.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -228,7 +228,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
228228
:value="filters.text"
229229
:placeholder="searchPlaceholder"
230230
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)"
232232
@input="handleTextInput"
233233
/>
234234
</div>

‎app/components/Header/AccountMenu.client.vue‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -136,15 +136,17 @@ function openAuthModal() {
136136
leave-to-class="opacity-0 translate-y-1"
137137
>
138138
<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+
>
140142
<!-- Connected accounts section -->
141143
<div v-if="hasAnyConnection" class="py-1">
142144
<!-- npm CLI connection -->
143145
<button
144146
v-if="isNpmConnected && npmUser"
145147
type="button"
146148
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"
148150
@click="openConnectorModal"
149151
>
150152
<img
@@ -187,7 +189,7 @@ function openAuthModal() {
187189
v-if="atprotoUser"
188190
type="button"
189191
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"
191193
@click="openAuthModal"
192194
>
193195
<img
@@ -223,7 +225,7 @@ function openAuthModal() {
223225
v-if="!isNpmConnected"
224226
type="button"
225227
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"
227229
@click="openConnectorModal"
228230
>
229231
<span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
@@ -250,7 +252,7 @@ function openAuthModal() {
250252
v-if="!atprotoUser"
251253
type="button"
252254
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"
254256
@click="openAuthModal"
255257
>
256258
<span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">

‎app/components/Header/AuthModal.client.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ async function handleLogin() {
6060
name="handle"
6161
:placeholder="$t('auth.modal.handle_placeholder')"
6262
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)"
6464
/>
6565
</div>
6666

‎app/components/Header/ConnectorModal.vue‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -115,11 +115,11 @@ function handleDisconnect() {
115115
<button
116116
type="button"
117117
: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"
119119
@click="copy('pnpm npmx-connector')"
120120
>
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" />
123123
</button>
124124
</div>
125125

@@ -137,13 +137,13 @@ function handleDisconnect() {
137137
:aria-label="
138138
copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')
139139
"
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"
141141
@click="copyCommand"
142142
>
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" />
144144
<span
145145
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"
147147
aria-hidden="true"
148148
/>
149149
</button>
@@ -168,7 +168,7 @@ function handleDisconnect() {
168168
name="connector-token"
169169
:placeholder="$t('connector.modal.token_placeholder')"
170170
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"
172172
/>
173173
</div>
174174

@@ -192,7 +192,7 @@ function handleDisconnect() {
192192
name="connector-port"
193193
inputmode="numeric"
194194
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"
196196
/>
197197
</div>
198198
</details>
@@ -215,7 +215,7 @@ function handleDisconnect() {
215215
<p class="inline-block text-xs font-bold uppercase tracking-wider text-fg rounded">
216216
{{ $t('connector.modal.warning') }}
217217
</p>
218-
<p class="text-sm text-fg-muted">
218+
<p class="text-sm text-fg-muted mt-1">
219219
{{ $t('connector.modal.warning_text') }}
220220
</p>
221221
</div>

‎app/components/Modal.client.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ defineExpose({
5555
</h2>
5656
<button
5757
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"
5959
:aria-label="$t('common.close')"
6060
@click="handleModalClose"
6161
>
@@ -71,7 +71,7 @@ defineExpose({
7171
<style scoped>
7272
/* Backdrop styling when any of the modals are open */
7373
dialog:modal::backdrop {
74-
@apply bg-black/60;
74+
@apply bg-bg-elevated/70;
7575
}
7676
7777
dialog::backdrop {

‎app/components/Package/Card.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ const pkgDescription = useMarkdown(() => ({
8282
<p v-if="pkgDescription" class="text-fg-muted text-xs sm:text-sm line-clamp-2 mb-2 sm:mb-3">
8383
<span v-html="pkgDescription" />
8484
</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">
8686
<dl v-if="showPublisher || result.package.date" class="flex items-center gap-4 m-0">
8787
<div
8888
v-if="showPublisher && result.package.publisher?.username"
@@ -111,7 +111,7 @@ const pkgDescription = useMarkdown(() => ({
111111
<!-- Mobile: downloads on separate row -->
112112
<dl
113113
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"
115115
>
116116
<div class="flex items-center gap-1.5">
117117
<dt class="sr-only">{{ $t('package.card.weekly_downloads') }}</dt>

‎app/components/PaginationControls.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ function handlePageSizeChange(event: Event) {
116116
<!-- Only show when in paginated mode (table view or explicit paginated mode) -->
117117
<div
118118
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"
120120
>
121121
<!-- Left: Mode toggle and page size -->
122122
<div class="flex items-center gap-4">
@@ -200,7 +200,7 @@ function handlePageSizeChange(event: Event) {
200200
:aria-label="$t('filters.pagination.previous')"
201201
@click="goPrev"
202202
>
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" />
204204
</button>
205205

206206
<!-- Page numbers -->
@@ -230,7 +230,7 @@ function handlePageSizeChange(event: Event) {
230230
:aria-label="$t('filters.pagination.next')"
231231
@click="goNext"
232232
>
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" />
234234
</button>
235235
</nav>
236236
</div>

0 commit comments

Comments
 (0)