fix: optimize tag style (#21)

Author: tolking

src/components/VPTagList.vue

@@ -82,12 +82,17 @@ function handleChange(event: Event) {
   --vp-tag-hover-bg: var(--vp-button-brand-hover-bg);
   --vp-tag-hover-text: var(--vp-button-brand-hover-text);
 }
+.tag-item > .visually-hidden:focus-visible + .item-inner {
+  outline: 2px solid var(--vp-tag-bg);
+  outline-offset: 1px;
+}
 .tag-item .item-inner {
   padding: 0.4rem 1rem;
   border-radius: 0.5rem;
   border: 1px solid var(--vp-tag-border);
   background-color: var(--vp-tag-bg);
   color: var(--vp-tag-text);
+  cursor: pointer;
   transition: var(--vp-transition-all);
 }
 .tag-item .item-inner:hover {

src/layouts/Tag.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useData, useRoute, withBase } from 'vitepress'
+import { useData, useRoute, withBase, type DefaultTheme } from 'vitepress'
 import { useTag } from '../composables/index'
 import VPCover from '../components/VPCover.vue'
 import VPTagList from '../components/VPTagList.vue'
@@ -22,7 +22,7 @@ const title = computed(() => {
   })
 
   if (nav) {
-    return nav.text
+    return (nav as DefaultTheme.NavItemWithLink).text
   } else {
     const layout: string = frontmatter.value.layout
     return layout.replace(/^([a-z])/, (_, i) => i.toUpperCase())

src/styles/public.css

@@ -23,11 +23,6 @@
   margin-right: calc(0px - var(--vp-size-space));
 }
 
-a:focus-visible,
-button:focus-visible {
-  outline-color: var(--vp-c-brand-lighter);
-}
-
 @media (min-width: 768px) {
   .main {
     padding-left: calc(var(--vp-size-space) * 2);