style: use accent colors for button and links

Author: essenmitsosse

app/components/AppHeader.vue

@@ -183,9 +183,8 @@ onKeyStroke(
           :aria-label="$t('nav.open_menu')"
           :aria-expanded="showMobileMenu"
           @click="showMobileMenu = !showMobileMenu"
-        >
-          <span class="w-6 h-6 inline-block i-carbon:menu" aria-hidden="true" />
-        </ButtonBase>
+          iconclass="i-carbon:menu"
+        />
       </div>
     </nav>
 

app/components/Button/Base.vue

@@ -33,9 +33,9 @@ defineExpose({
     :class="{
       'text-sm px-4 py-2': variant !== 'tag',
       'text-xs px-2 py-0.5': variant === 'tag',
-      'bg-bg-muted text-fg-muted hover:enabled:(text-fg border-border-hover)': variant === 'tag',
-      'text-bg bg-fg hover:enabled:(bg-fg/90)': variant === 'primary',
-      'bg-transparent text-fg hover:enabled:(bg-fg text-bg border-fg)': variant === 'secondary',
+      'bg-transparent text-fg hover:enabled:(bg-accent/30 border-fg)':
+        variant === 'tag' || variant === 'secondary',
+      'text-bg bg-accent hover:enabled:(bg-accent/50)': variant === 'primary',
     }"
     :type="props.type"
     :disabled="disabled ? true : undefined"

app/components/Header/AccountMenu.client.vue

@@ -59,7 +59,6 @@ function openAuthModal() {
   <div ref="accountMenuRef" class="relative flex min-w-24 justify-end">
     <ButtonBase
       type="button"
-      class="relative flex items-center gap-2 px-2 py-1.5 rounded-md transition-colors duration-200 hover:bg-bg-subtle hover:text-accent focus-visible:outline-accent/70"
       :aria-expanded="isOpen"
       aria-haspopup="true"
       @click="isOpen = !isOpen"

app/components/Link/Base.vue

@@ -59,15 +59,15 @@ const props = withDefaults(
     v-else
     class="group inline-flex gap-x-1 items-center justify-center"
     :class="{
-      'text-fg underline-offset-[0.2rem] underline decoration-1 decoration-fg/50 hover:(no-underline text-fg/80) transition-colors duration-200':
+      'text-fg underline-offset-[0.2rem] underline decoration-1 decoration-fg/50 hover:(no-underline text-accent) transition-colors duration-200':
         variant === 'link',
       'gap-x-1 font-mono border border-border rounded-md transition-all duration-200 aria-current:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
         variant !== 'link',
       'text-sm px-4 py-2': variant !== 'tag' && variant !== 'link',
       'text-xs px-2 py-0.5': variant === 'tag',
-      'bg-bg-muted text-fg-muted hover:(text-fg border-border-hover)': variant === 'tag',
-      'text-bg bg-fg hover:(bg-fg/90)': variant === 'button-primary',
-      'bg-transparent text-fg hover:(bg-fg text-bg border-fg)': variant === 'button-secondary',
+      'bg-transparent text-fg hover:(bg-accent/30 border-fg)':
+        variant === 'tag' || variant === 'button-secondary',
+      'text-bg bg-fg hover:(bg-accent/90)': variant === 'button-primary',
     }"
     :to="to"
     :href="href"