style: remove default button and link style

Author: essenmitsosse

app/assets/main.css

@@ -154,7 +154,8 @@ html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
-  scroll-padding-top: 5rem; /* Offset for fixed header - otherwise anchor headers are cutted */
+  scroll-padding-top: 5rem;
+  /* Offset for fixed header - otherwise anchor headers are cutted */
 }
 
 /*
@@ -179,42 +180,11 @@ body {
   line-height: 1.6;
 }
 
-/* Default link styling for accessibility on dark background */
-a {
-  color: var(--fg);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-  text-decoration-color: var(--fg-subtle);
-  transition:
-    color 0.2s ease,
-    text-decoration-color 0.2s ease;
-}
-
-a:hover {
-  color: var(--accent);
-  text-decoration-color: var(--accent);
-}
-
-a:focus-visible {
-  outline: 2px solid var(--border);
-  outline-offset: 2px;
-  border-radius: 2px;
-}
-
 /* Reset dd margin (browser default is margin-left: 40px) */
 dd {
   margin: 0;
 }
 
-/* Reset button styles */
-button {
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  font: inherit;
-  padding: 0;
-}
-
 /* Selection */
 ::selection {
   background-color: var(--fg-muted);

app/components/Button/Base.vue

@@ -21,7 +21,7 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="inline-flex gap-x-1 items-center justify-center px-4 py-2 font-mono text-sm border border-border rounded-md transition-all duration-200 focus-ring active:scale-98 disabled:(opacity-40 cursor-not-allowed)"
+    class="inline-flex gap-x-1 items-center justify-center px-4 py-2 font-mono text-sm border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed)"
     :class="[
       variant === 'primary'
         ? 'text-bg bg-fg hover:enabled:(bg-fg/90)'

app/components/Button/Link.vue

@@ -1,34 +1,38 @@
 <script setup lang="ts">
 import type { NuxtLinkProps } from '#app'
 
-const props = defineProps<
-  {
-    /** Disabled links will be displayed as plain text */
-    disabled?: boolean
-    /**
-     * `type` should never be used, because this will always be a link.
-     *
-     * If you want a button use `TagButton` instead.
-     * */
-    type?: never
-  } &
-    /** This makes sure the link always has either `to` or `href` */
-    (Required<Pick<NuxtLinkProps, 'to'>> | Required<Pick<NuxtLinkProps, 'href'>>) &
-    NuxtLinkProps
->()
+const props = withDefaults(
+  defineProps<
+    {
+      /** Disabled links will be displayed as plain text */
+      disabled?: boolean
+      /**
+       * `type` should never be used, because this will always be a link.
+       *
+       * If you want a button use `TagButton` instead.
+       * */
+      type?: never
+      variant?: 'primary' | 'secondary'
+    } &
+      /** This makes sure the link always has either `to` or `href` */
+      (Required<Pick<NuxtLinkProps, 'to'>> | Required<Pick<NuxtLinkProps, 'href'>>) &
+      NuxtLinkProps
+  >(),
+  { variant: 'secondary' },
+)
 </script>
 
 <template>
   <!-- This is only a placeholder implementation yet. It will probably need some additional styling, but note: A disabled link is just text. -->
   <span v-if="disabled" class="opacity-50"><slot /></span>
   <NuxtLink
     v-else
-    class="inline-flex items-center justify-center px-4 py-2 font-mono text-sm border border-border rounded-md bg-transparent text-fg transition-all duration-200 hover:(bg-fg hover:text-bg border-fg) focus-ring active:scale-98 disabled:(opacity-40 cursor-not-allowed hover:bg-transparent hover:text-fg)"
-    :class="
-      {
-        'opacity-50 cursor-not-allowed': disabled,
-      }
-    "
+    class="inline-flex gap-x-1 items-center justify-center px-4 py-2 font-mono text-sm border border-border rounded-md transition-all duration-200"
+    :class="[
+      variant === 'primary'
+        ? 'text-bg bg-fg hover:enabled:(bg-fg/90)'
+        : 'bg-transparent text-fg hover:enabled:(bg-fg text-bg border-fg)',
+    ]"
   >
     <slot />
   </NuxtLink>

app/components/Tag/Button.vue

@@ -13,7 +13,7 @@ const props = defineProps<{
 
 <template>
   <button
-    class="inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1 disabled:(opacity-50 cursor-not-allowed)"
+    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)'

app/components/Tag/Link.vue

@@ -24,7 +24,7 @@ const props = defineProps<
   <span v-if="disabled" class="opacity-50"><slot /></span>
   <NuxtLink
     v-else
-    class="inline-flex items-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+    class="inline-flex gap-x-1 items-center justify-center px-2 py-0.5 text-xs font-mono border rounded transition-colors duration-200"
     :class="
       current
         ? 'bg-fg text-bg border-fg hover:(text-text-bg/50)'