fix: increase colour contrast + add tabindex=-1 to line buttons

Author: danielroe

app/app.vue

@@ -285,7 +285,7 @@ button {
   border-left: 2px solid #262626;
   padding-left: 1rem;
   margin: 1.5rem 0;
-  color: #666666;
+  color: #8a8a8a;
   font-style: italic;
 }
 

app/components/CodeViewer.vue

@@ -66,6 +66,7 @@ watch(
         :id="`L${lineNum}`"
         :key="lineNum"
         :href="`#L${lineNum}`"
+        tabindex="-1"
         class="line-number block px-3 py-0 font-mono text-sm leading-6 cursor-pointer transition-colors no-underline"
         :class="[
           isLineSelected(lineNum)

app/components/OgImage/Default.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="h-full w-full flex flex-col justify-center items-center bg-[#0a0a0a] text-[#fafafa]">
     <h1 class="text-6xl font-medium tracking-tight" style="font-family: 'Geist Mono'">
-      <span class="text-[#666666]" style="letter-spacing: -0.1em">./</span> npmx
+      <span class="text-fg-subtle" style="letter-spacing: -0.1em">./</span> npmx
     </h1>
     <h1 class="text-3xl font-medium tracking-tight">a better browser for the npm registry</h1>
 

app/components/OgImage/Package.vue

@@ -22,7 +22,7 @@ withDefaults(
       {{ name }}
     </h1>
 
-    <div class="flex items-center gap-6 mt-6 text-xl text-[#666666]">
+    <div class="flex items-center gap-6 mt-6 text-xl text-fg-subtle">
       <span>v{{ version }}</span>
       <span v-if="downloads">{{ downloads }}/wk</span>
       <span v-if="license">{{ license }}</span>

app/components/PackageDownloadStats.vue

@@ -59,7 +59,7 @@ const config = computed(() => ({
     title: {
       text: lastDatapoint.value,
       fontSize: 12,
-      color: '#666666',
+      color: '#8A8A8A',
       bold: false,
     },
     verticalIndicator: {

uno.config.ts

@@ -39,7 +39,7 @@ export default defineConfig({
       fg: {
         DEFAULT: '#fafafa',
         muted: '#a1a1a1',
-        subtle: '#666666',
+        subtle: '#8A8A8A',
       },
       border: {
         DEFAULT: '#262626',