feat: polish colors and indents

alexdln · alexdln · commit 2f9fdf82da89 · 2026-02-05T20:55:45.000Z
diff --git a/app/assets/main.css b/app/assets/main.css
@@ -7,15 +7,16 @@
 
 :root[data-theme='dark'] {
   /* background colors */
-  --bg: var(--bg-color, oklch(0.145 0 0));
-  --bg-subtle: var(--bg-subtle-color, oklch(0.178 0 0));
-  --bg-muted: var(--bg-muted-color, oklch(0.218 0 0));
-  --bg-elevated: var(--bg-elevated-color, oklch(0.252 0 0));
+  --bg: var(--bg-color, oklch(0.171 0 0));
+  --bg-subtle: var(--bg-subtle-color, oklch(0.198 0 0));
+  --bg-muted: var(--bg-muted-color, oklch(0.236 0 0));
+  --bg-elevated: var(--bg-elevated-color, oklch(0.266 0 0));
 
   /* text colors */
-  --fg: oklch(0.985 0 0);
-  --fg-muted: oklch(0.709 0 0);
-  --fg-subtle: oklch(0.633 0 0);
+  --fg: oklch(0.982 0 0);
+  --fg-muted-light: oklch(0.832 0 0);
+  --fg-muted: oklch(0.749 0 0);
+  --fg-subtle: oklch(0.673 0 0);
 
   /* border, separator colors */
   --border: oklch(0.269 0 0);
@@ -44,24 +45,24 @@
 }
 
 :root[data-theme='dark'][data-bg-theme='slate'] {
-  --bg: oklch(0.129 0.012 264.695);
-  --bg-subtle: oklch(0.159 0.022 262.421);
-  --bg-muted: oklch(0.204 0.033 261.234);
-  --bg-elevated: oklch(0.259 0.041 260.031);
+  --bg: oklch(0.151 0.018 264.695);
+  --bg-subtle: oklch(0.179 0.015 262.421);
+  --bg-muted: oklch(0.214 0.018 261.234);
+  --bg-elevated: oklch(0.259 0.021 260.031);
 }
 
 :root[data-theme='dark'][data-bg-theme='zinc'] {
-  --bg: oklch(0.141 0.005 285.823);
-  --bg-subtle: oklch(0.168 0.005 285.894);
-  --bg-muted: oklch(0.209 0.005 285.929);
+  --bg: oklch(0.158 0.005 285.823);
+  --bg-subtle: oklch(0.188 0.005 285.894);
+  --bg-muted: oklch(0.219 0.005 285.929);
   --bg-elevated: oklch(0.256 0.006 286.033);
 }
 
 :root[data-theme='dark'][data-bg-theme='stone'] {
-  --bg: oklch(0.147 0.004 49.25);
-  --bg-subtle: oklch(0.178 0.004 49.321);
-  --bg-muted: oklch(0.218 0.004 49.386);
-  --bg-elevated: oklch(0.252 0.007 34.298);
+  --bg: oklch(0.164 0.004 89.25);
+  --bg-subtle: oklch(0.198 0.008 89.321);
+  --bg-muted: oklch(0.228 0.015 89.386);
+  --bg-elevated: oklch(0.252 0.018 84.298);
 }
 
 :root[data-theme='dark'][data-bg-theme='black'] {
@@ -74,12 +75,15 @@
 :root[data-theme='light'] {
   --bg: var(--bg-color, oklch(1 0 0));
   --bg-subtle: var(--bg-subtle-color, oklch(0.979 0.001 286.375));
-  --bg-muted: var(--bg-muted-color, oklch(0.955 0 0));
-  --bg-elevated: var(--bg-elevated-color, oklch(0.94 0 0));
+  --bg-muted: var(--bg-muted-color, oklch(0.955 0.001 286.76));
+  --bg-elevated: var(--bg-elevated-color, oklch(0.94 0.002 287.29));
 
-  --fg: oklch(0.145 0 0);
-  --fg-muted: oklch(0.439 0 0);
-  --fg-subtle: oklch(0.52 0 0);
+  --fg: oklch(0.146 0 0);
+  --fg-muted-light: oklch(
+    0.284 0 0
+  ); /* TODO fix palette names to match bg - core > subtle > muted > elevated */
+  --fg-muted: oklch(0.398 0 0);
+  --fg-subtle: oklch(0.48 0 0);
 
   --border: oklch(0.8514 0 0);
   --border-subtle: oklch(0.922 0 0);
@@ -105,9 +109,9 @@
 
 :root[data-theme='light'][data-bg-theme='slate'] {
   --bg: oklch(1 0 0);
-  --bg-subtle: oklch(0.982 0.006 264.62);
-  --bg-muted: oklch(0.96 0.041 261.234);
-  --bg-elevated: oklch(0.943 0.013 255.52);
+  --bg-subtle: oklch(0.982 0.008 269.62);
+  --bg-muted: oklch(0.96 0.008 261.234);
+  --bg-elevated: oklch(0.943 0.012 255.52);
 }
 
 :root[data-theme='light'][data-bg-theme='zinc'] {
@@ -119,9 +123,13 @@
 
 :root[data-theme='light'][data-bg-theme='stone'] {
   --bg: oklch(1 0 0);
-  --bg-subtle: oklch(0.979 0.005 48.762);
-  --bg-muted: oklch(0.958 0.005 48.743);
-  --bg-elevated: oklch(0.943 0.005 48.731);
+  --bg-subtle: oklch(0.979 0.004 88.762);
+  --bg-muted: oklch(0.958 0.005 88.743);
+  --bg-elevated: oklch(0.943 0.005 88.731);
+}
+
+:root[data-theme='light'][data-bg-theme='black'] {
+  --bg-subtle: var(--bg-subtle-color, oklch(0.979 0 0));
 }
 
 @media (prefers-contrast: more) {
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
@@ -85,10 +85,11 @@ onKeyStroke(
 </script>
 
 <template>
-  <header class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border">
+  <header class="sticky top-0 z-50 border-b border-border">
+    <div class="absolute inset-0 bg-bg/80 backdrop-blur-md" />
     <nav
       :aria-label="$t('nav.main_navigation')"
-      class="container min-h-14 flex items-center gap-2"
+      class="relative container min-h-14 flex items-center gap-2 z-1"
       :class="isOnHomePage ? 'justify-end' : 'justify-between'"
     >
       <!-- Mobile: Logo + search button (expands search, doesn't navigate) -->
diff --git a/app/components/Filter/Chips.vue b/app/components/Filter/Chips.vue
@@ -14,14 +14,14 @@ const emit = defineEmits<{
 <template>
   <div v-if="chips.length > 0" class="flex flex-wrap items-center gap-2">
     <TransitionGroup name="chip">
-      <TagStatic v-for="chip in chips" :key="chip.id" class="gap-1">
+      <TagStatic v-for="chip in chips" :key="chip.id" class="gap-2 pe-1">
         <span class="text-fg-subtle text-xs">{{ chip.label }}:</span>
         <span class="max-w-32 truncate">{{
           Array.isArray(chip.value) ? chip.value.join(', ') : chip.value
         }}</span>
         <button
           type="button"
-          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"
+          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"
           :aria-label="$t('filters.remove_filter', { label: chip.label })"
           @click="emit('remove', chip)"
         >
@@ -33,7 +33,7 @@ const emit = defineEmits<{
     <button
       v-if="chips.length > 1"
       type="button"
-      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"
+      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"
       @click="emit('clearAll')"
     >
       {{ $t('filters.clear_all') }}
diff --git a/app/components/Filter/Panel.vue b/app/components/Filter/Panel.vue
@@ -228,7 +228,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             :value="filters.text"
             :placeholder="searchPlaceholder"
             autocomplete="off"
-            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)"
+            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)"
             @input="handleTextInput"
           />
         </div>
diff --git a/app/components/Header/AccountMenu.client.vue b/app/components/Header/AccountMenu.client.vue
@@ -136,15 +136,17 @@ function openAuthModal() {
       leave-to-class="opacity-0 translate-y-1"
     >
       <div v-if="isOpen" class="absolute inset-ie-0 top-full pt-2 w-72 z-50" role="menu">
-        <div class="bg-bg-elevated border border-border rounded-lg shadow-lg overflow-hidden px-1">
+        <div
+          class="bg-bg-subtle/80 backdrop-blur-sm border border-border-subtle rounded-lg shadow-lg shadow-bg-elevated/50 overflow-hidden px-1"
+        >
           <!-- Connected accounts section -->
           <div v-if="hasAnyConnection" class="py-1">
             <!-- npm CLI connection -->
             <button
               v-if="isNpmConnected && npmUser"
               type="button"
               role="menuitem"
-              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-subtle transition-colors text-start rounded-md"
+              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
               @click="openConnectorModal"
             >
               <img
@@ -187,7 +189,7 @@ function openAuthModal() {
               v-if="atprotoUser"
               type="button"
               role="menuitem"
-              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-subtle transition-colors text-start rounded-md"
+              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
               @click="openAuthModal"
             >
               <img
@@ -223,7 +225,7 @@ function openAuthModal() {
               v-if="!isNpmConnected"
               type="button"
               role="menuitem"
-              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-subtle transition-colors text-start rounded-md"
+              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
               @click="openConnectorModal"
             >
               <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
@@ -250,7 +252,7 @@ function openAuthModal() {
               v-if="!atprotoUser"
               type="button"
               role="menuitem"
-              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-subtle transition-colors text-start rounded-md"
+              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
               @click="openAuthModal"
             >
               <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
diff --git a/app/components/Header/AuthModal.client.vue b/app/components/Header/AuthModal.client.vue
@@ -60,7 +60,7 @@ async function handleLogin() {
             name="handle"
             :placeholder="$t('auth.modal.handle_placeholder')"
             v-bind="noCorrect"
-            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)"
+            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)"
           />
         </div>
 
diff --git a/app/components/Header/ConnectorModal.vue b/app/components/Header/ConnectorModal.vue
@@ -114,11 +114,11 @@ function handleDisconnect() {
         <button
           type="button"
           :aria-label="copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')"
-          class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
+          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"
           @click="copy('pnpm npmx-connector')"
         >
-          <span v-if="!copied" class="i-carbon:copy w-5 h-5" aria-hidden="true" />
-          <span v-else class="i-carbon:checkmark w-5 h-5 text-green-500" aria-hidden="true" />
+          <span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
+          <span v-else class="i-carbon:checkmark block w-5 h-5 text-green-500" aria-hidden="true" />
         </button>
       </div>
 
@@ -136,13 +136,13 @@ function handleDisconnect() {
                           :aria-label="
                             copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')
                           "
-                          class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
+                          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"
                           @click="copyCommand"
                         >
-                          <span v-if="!copied" class="i-carbon:copy w-5 h-5" aria-hidden="true" />
+                          <span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
                           <span
                             v-else
-                            class="i-carbon:checkmark w-5 h-5 text-green-500"
+                            class="i-carbon:checkmark block w-5 h-5 text-green-500"
                             aria-hidden="true"
                           />
                         </button>
@@ -167,7 +167,7 @@ function handleDisconnect() {
             name="connector-token"
             :placeholder="$t('connector.modal.token_placeholder')"
             v-bind="noCorrect"
-            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"
+            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"
           />
         </div>
 
@@ -191,7 +191,7 @@ function handleDisconnect() {
               name="connector-port"
               inputmode="numeric"
               autocomplete="off"
-              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"
+              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"
             />
           </div>
         </details>
@@ -214,7 +214,7 @@ function handleDisconnect() {
         <p class="inline-block text-xs font-bold uppercase tracking-wider text-fg rounded">
           {{ $t('connector.modal.warning') }}
         </p>
-        <p class="text-sm text-fg-muted">
+        <p class="text-sm text-fg-muted mt-1">
           {{ $t('connector.modal.warning_text') }}
         </p>
       </div>
diff --git a/app/components/Modal.client.vue b/app/components/Modal.client.vue
@@ -36,7 +36,7 @@ defineExpose({
         </h2>
         <button
           type="button"
-          class="text-fg-subtle w-5 h-5 hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
+          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"
           :aria-label="$t('common.close')"
           @click="handleModalClose"
         >
@@ -52,7 +52,7 @@ defineExpose({
 <style scoped>
 /* Backdrop styling when any of the modals are open */
 dialog:modal::backdrop {
-  @apply bg-black/60;
+  @apply bg-bg-elevated/70;
 }
 
 dialog::backdrop {
diff --git a/app/components/Package/Card.vue b/app/components/Package/Card.vue
@@ -81,7 +81,7 @@ const pkgDescription = useMarkdown(() => ({
         <p v-if="pkgDescription" class="text-fg-muted text-xs sm:text-sm line-clamp-2 mb-2 sm:mb-3">
           <span v-html="pkgDescription" />
         </p>
-        <div class="flex flex-wrap items-center gap-x-3 sm:gap-x-4 gap-y-2 text-xs text-fg-subtle">
+        <div class="flex flex-wrap items-center gap-x-3 sm:gap-x-4 gap-y-2 text-xs text-fg-muted">
           <dl v-if="showPublisher || result.package.date" class="flex items-center gap-4 m-0">
             <div
               v-if="showPublisher && result.package.publisher?.username"
@@ -110,7 +110,7 @@ const pkgDescription = useMarkdown(() => ({
         <!-- Mobile: downloads on separate row -->
         <dl
           v-if="result.downloads?.weekly"
-          class="sm:hidden flex items-center gap-4 mt-2 text-xs text-fg-subtle m-0"
+          class="sm:hidden flex items-center gap-4 mt-2 text-xs text-fg-muted m-0"
         >
           <div class="flex items-center gap-1.5">
             <dt class="sr-only">{{ $t('package.card.weekly_downloads') }}</dt>
diff --git a/app/components/PaginationControls.vue b/app/components/PaginationControls.vue
@@ -116,7 +116,7 @@ function handlePageSizeChange(event: Event) {
   <!-- Only show when in paginated mode (table view or explicit paginated mode) -->
   <div
     v-if="shouldShowControls"
-    class="flex flex-wrap items-center justify-between gap-4 py-4 border-t border-border mt-6"
+    class="flex flex-wrap items-center justify-between gap-4 py-4 mt-2"
   >
     <!-- Left: Mode toggle and page size -->
     <div class="flex items-center gap-4">
@@ -200,7 +200,7 @@ function handlePageSizeChange(event: Event) {
           :aria-label="$t('filters.pagination.previous')"
           @click="goPrev"
         >
-          <span class="i-carbon-chevron-left w-4 h-4" aria-hidden="true" />
+          <span class="block i-carbon-chevron-left w-4 h-4" aria-hidden="true" />
         </button>
 
         <!-- Page numbers -->
@@ -230,7 +230,7 @@ function handlePageSizeChange(event: Event) {
           :aria-label="$t('filters.pagination.next')"
           @click="goNext"
         >
-          <span class="i-carbon-chevron-right w-4 h-4" aria-hidden="true" />
+          <span class="block i-carbon-chevron-right w-4 h-4" aria-hidden="true" />
         </button>
       </nav>
     </div>
diff --git a/app/components/Readme.vue b/app/components/Readme.vue
@@ -76,7 +76,7 @@ function handleClick(event: MouseEvent) {
 <style scoped>
 /* README prose styling */
 .readme {
-  color: var(--fg-muted);
+  color: var(--fg-muted-light);
   line-height: 1.75;
   /* Prevent horizontal overflow on mobile */
   overflow-wrap: break-word;
@@ -140,7 +140,7 @@ function handleClick(event: MouseEvent) {
   transition: text-decoration-color 0.2s ease;
 }
 
-.readme a:hover {
+.readme :deep(a:hover) {
   text-decoration-color: var(--accent);
 }
 
diff --git a/app/components/Tag/Button.vue b/app/components/Tag/Button.vue
@@ -16,7 +16,7 @@ const props = defineProps<{
     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"
     :class="[
       pressed
-        ? 'bg-fg text-bg border-fg hover:(text-text-bg/50)'
+        ? 'bg-fg text-bg border-fg hover:(text-text-bg/50 bg-fg-muted)'
         : 'bg-bg-muted text-fg-muted border-border hover:(text-fg border-border-hover)',
       {
         'opacity-50 cursor-not-allowed': disabled,
diff --git a/app/components/Tag/RadioButton.vue b/app/components/Tag/RadioButton.vue
@@ -36,7 +36,7 @@ const onChange = () => {
       class="peer sr-only"
     />
     <label
-      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)"
+      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)"
       :htmlFor="internalId"
     >
       <slot />
diff --git a/app/components/VersionSelector.vue b/app/components/VersionSelector.vue
@@ -506,7 +506,7 @@ watch(
         :aria-activedescendant="
           focusedIndex >= 0 ? `version-${flatItems[focusedIndex]?.version?.version}` : undefined
         "
-        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"
+        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"
         @keydown="handleListboxKeydown"
       >
         <!-- Version groups -->
diff --git a/app/pages/package-docs/[...path].vue b/app/pages/package-docs/[...path].vue
@@ -120,9 +120,10 @@ const showEmptyState = computed(() => docsData.value?.status !== 'ok')
     <!-- Sticky header - positioned below AppHeader -->
     <header
       aria-label="Package documentation header"
-      class="docs-header sticky z-10 bg-bg/95 backdrop-blur border-b border-border"
+      class="docs-header sticky z-10 border-b border-border"
     >
-      <div class="px-4 sm:px-6 lg:px-8 py-4">
+      <div class="absolute inset-0 bg-bg/90 backdrop-blur" />
+      <div class="relative px-4 sm:px-6 lg:px-8 py-4 z-1">
         <div class="flex items-center justify-between gap-4">
           <div class="flex items-center gap-3 min-w-0">
             <NuxtLink
diff --git a/app/pages/package/[...package].vue b/app/pages/package/[...package].vue
diff --git a/uno.config.ts b/uno.config.ts
