[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: polish colors and indents (#1042)

authored by

Alex Savelyev and committed by
GitHub
3d3fb2ad e0764627

+73 -65
+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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 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
··· 141 141 transition: text-decoration-color 0.2s ease; 142 142 } 143 143 144 - .readme a:hover { 144 + .readme :deep(a:hover) { 145 145 text-decoration-color: var(--accent); 146 146 } 147 147
+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
··· 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
··· 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
··· 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
··· 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>