refactor: move pressed style to css

Author: essenmitsosse

app/components/Filter/Panel.vue

@@ -310,7 +310,7 @@ const hasActiveFilters = computed(() => !!filterSummary.value)
             <TagButton
               v-for="keyword in displayedKeywords"
               :key="keyword"
-              :pressed="filters.keywords.includes(keyword)"
+              :aria-pressed="filters.keywords.includes(keyword)"
               @click="emit('toggleKeyword', keyword)"
             >
               {{ keyword }}

app/components/Package/Card.vue

@@ -166,7 +166,7 @@ const pkgDescription = useMarkdown(() => ({
         v-for="keyword in result.package.keywords.slice(0, 5)"
         class="pointer-events-auto"
         :key="keyword"
-        :pressed="props.filters?.keywords.includes(keyword)"
+        :aria-pressed="props.filters?.keywords.includes(keyword)"
         :title="`Filter by ${keyword}`"
         @click.stop="emit('clickKeyword', keyword)"
       >

app/components/Package/TableRow.vue

@@ -129,7 +129,7 @@ const allMaintainersText = computed(() => {
         <TagButton
           v-for="keyword in pkg.keywords.slice(0, 3)"
           :key="keyword"
-          :pressed="props.filters?.keywords.includes(keyword)"
+          :aria-pressed="props.filters?.keywords.includes(keyword)"
           :title="`Filter by ${keyword}`"
           @click.stop="emit('clickKeyword', keyword)"
           :class="{ 'group-hover:bg-bg-elevated': !props.filters?.keywords.includes(keyword) }"

app/components/Tag/Button.vue

@@ -7,21 +7,14 @@ const props = defineProps<{
    * If you want a link use `TagLink` instead.
    *  */
   type?: never
-  pressed?: boolean
 }>()
 </script>
 
 <template>
   <button
-    class="inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 disabled:(opacity-50 cursor-not-allowed)"
-    :class="[
-      pressed
-        ? 'bg-fg text-bg border-fg hover:enabled:(text-text-bg/50)'
-        : 'bg-bg-muted text-fg-muted border-border hover:enabled:(text-fg border-border-hover)',
-    ]"
+    class="inline-flex items-center px-2 py-0.5 bg-bg-muted text-fg-muted border-border hover:enabled:(text-fg border-border-hover) text-xs font-mono border rounded transition-colors duration-200 disabled:(opacity-50 cursor-not-allowed) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-text-bg/50))"
     type="button"
     :disabled="disabled ? true : undefined"
-    :aria-pressed="pressed"
   >
     <slot />
   </button>