From 091615b04eaeccef2d5f2d250bfde5c200298d10 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Thu, 27 Jun 2024 14:09:05 -1000
Subject: [PATCH] refactor: :recycle: Port all buttons to new UI library

---
 components/buttons/button-base.vue            | 23 --------
 components/buttons/button-mobile-navbar.vue   |  6 +-
 components/buttons/button-primary.vue         | 23 --------
 components/buttons/button-secondary.vue       | 22 -------
 components/composer/composer.vue              | 10 ++--
 components/composer/file-uploader.vue         |  6 +-
 components/errors/ErrorBoundary.vue           | 10 ++--
 components/settings/oidc.vue                  | 17 +++---
 components/settings/profile-editor.vue        | 11 ++--
 components/sidebars/account-picker.vue        |  8 +--
 components/sidebars/navigation.vue            | 12 ++--
 .../social-elements/notes/note-content.vue    |  4 +-
 .../social-elements/notifications/notif.vue   | 13 ++--
 components/social-elements/users/Account.vue  | 18 +++---
 packages/ui/components/buttons/button.vue     |  4 +-
 packages/ui/demo/buttons-demo.vue             | 59 +++++++++++++++----
 pages/oauth/authorize.vue                     |  9 ++-
 pages/oauth/consent.vue                       |  7 +--
 pages/oauth/reset.vue                         |  4 +-
 pages/register/index.vue                      |  9 ++-
 20 files changed, 120 insertions(+), 155 deletions(-)
 delete mode 100644 components/buttons/button-base.vue
 delete mode 100644 components/buttons/button-primary.vue
 delete mode 100644 components/buttons/button-secondary.vue

diff --git a/components/buttons/button-base.vue b/components/buttons/button-base.vue
deleted file mode 100644
index 8df0d3c..0000000
--- a/components/buttons/button-base.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-    <button v-bind="$props" type="button" :disabled="loading"
-        :class="['relative isolate text-base/6 font-semibold px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] sm:text-sm/6 focus:outline-none focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-[--btn-bg] before:absolute before:inset-0 before:-z-10 before:rounded-[calc(theme(borderRadius.lg)-1px)] before:shadow before:hidden after:absolute after:-z-10 after:-inset-px after:rounded-md before:disabled:shadow-none after:disabled:shadow-none text-white cursor-default rounded-md duration-200 hover:shadow disabled:opacity-70 content-none disabled:cursor-not-allowed shadow-sm bg-[--btn-bg] before:bg-[--btn-bg] after:active:bg-[--btn-hover-overlay] after:hover:bg-[--btn-hover-overlay]', loading && '[&>*]:invisible']">
-        <div v-if="loading" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 !visible size-5">
-            <iconify-icon icon="tabler:loader-2" height="none" class="animate-spin size-5" />
-        </div>
-        <slot />
-    </button>
-</template>
-
-<script lang="ts" setup>
-import type { ButtonHTMLAttributes } from "vue";
-
-interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
-
-defineProps<
-    Props & {
-        loading?: boolean;
-    }
->();
-</script>
-
-<style></style>
\ No newline at end of file
diff --git a/components/buttons/button-mobile-navbar.vue b/components/buttons/button-mobile-navbar.vue
index 36f1ab8..93effdd 100644
--- a/components/buttons/button-mobile-navbar.vue
+++ b/components/buttons/button-mobile-navbar.vue
@@ -1,12 +1,12 @@
 <template>
-    <ButtonBase
-        class="hover:bg-white/5 text-xs max-w-full w-full h-full !p-0">
-        <iconify-icon :icon="icon" class="size-6" width="none" />
+    <ButtonBase class="hover:bg-white/5 text-xs max-w-full w-full h-full !p-0">
+        <Icon :icon="icon" class="!size-6" />
     </ButtonBase>
 </template>
 
 <script lang="ts" setup>
 import ButtonBase from "~/packages/ui/components/buttons/button.vue";
+import Icon from "~/packages/ui/components/icons/icon.vue";
 
 defineProps<{
     icon: string;
diff --git a/components/buttons/button-primary.vue b/components/buttons/button-primary.vue
deleted file mode 100644
index b6f3201..0000000
--- a/components/buttons/button-primary.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-    <ButtonBase
-        class="[--btn-border:theme(colors.primary.950/90%)] [--btn-bg:theme(colors.primary.600)] [--btn-hover-overlay:theme(colors.white/5%)] [--btn-icon:theme(colors.primary.400)] active:[--btn-icon:theme(colors.primary.300)] hover:[--btn-icon:theme(colors.primary.300)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] border border-white/5"
-        v-bind="$props">
-        <slot />
-    </ButtonBase>
-</template>
-
-<script lang="ts" setup>
-import type { ButtonHTMLAttributes } from "vue";
-import ButtonBase from "~/packages/ui/components/buttons/button.vue";
-// import ButtonBase from "./button-base.vue";
-
-interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
-
-defineProps<
-    Props & {
-        loading?: boolean;
-    }
->();
-</script>
-
-<style></style>
\ No newline at end of file
diff --git a/components/buttons/button-secondary.vue b/components/buttons/button-secondary.vue
deleted file mode 100644
index 1eef94d..0000000
--- a/components/buttons/button-secondary.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-    <ButtonBase
-        class="[--btn-border:theme(colors.zinc.950/90%)] [--btn-bg:theme(colors.zinc.800)] [--btn-hover-overlay:theme(colors.white/5%)] [--btn-icon:theme(colors.zinc.400)] active:[--btn-icon:theme(colors.zinc.300)] hover:[--btn-icon:theme(colors.zinc.300)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] border border-white/5"
-        v-bind="$props" :loading="loading">
-        <slot />
-    </ButtonBase>
-</template>
-
-<script lang="ts" setup>
-import type { ButtonHTMLAttributes } from "vue";
-import ButtonBase from "./button-base.vue";
-
-interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
-
-defineProps<
-    Props & {
-        loading?: boolean;
-    }
->();
-</script>
-
-<style></style>
\ No newline at end of file
diff --git a/components/composer/composer.vue b/components/composer/composer.vue
index ca6e1e2..4838ebf 100644
--- a/components/composer/composer.vue
+++ b/components/composer/composer.vue
@@ -34,12 +34,12 @@
             <Button title="Add content warning" @click="cw = !cw" :toggled="cw">
                 <iconify-icon width="1.25rem" height="1.25rem" icon="tabler:rating-18-plus" aria-hidden="true" />
             </Button>
-            <ButtonPrimary :loading="loading" @click="send" class="ml-auto rounded-full"
+            <ButtonBase theme="primary" :loading="loading" @click="send" class="ml-auto rounded-full"
                 :disabled="!canSubmit || loading">
-                <span>{{
+                {{
                     respondingType === "edit" ? "Edit!" : "Send!"
-                    }}</span>
-            </ButtonPrimary>
+                }}
+            </ButtonBase>
         </div>
     </div>
 </template>
@@ -47,8 +47,8 @@
 <script lang="ts" setup>
 import type { Instance, Status } from "@lysand-org/client/types";
 import { nanoid } from "nanoid";
+import ButtonBase from "~/packages/ui/components/buttons/button.vue";
 import { OverlayScrollbarsComponent } from "#imports";
-import ButtonPrimary from "../buttons/button-primary.vue";
 import RichTextboxInput from "../inputs/rich-textbox-input.vue";
 import Note from "../social-elements/notes/note.vue";
 import Button from "./button.vue";
diff --git a/components/composer/file-uploader.vue b/components/composer/file-uploader.vue
index 29b273d..8bea360 100644
--- a/components/composer/file-uploader.vue
+++ b/components/composer/file-uploader.vue
@@ -42,10 +42,10 @@
                             <textarea :disabled="data.progress < 1.0" @keydown.enter.stop v-model="data.alt_text"
                                 placeholder="Add alt text"
                                 class="w-full p-2 text-sm prose prose-invert bg-dark-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none" />
-                            <ButtonSecondary @click="updateAltText(data.id, data.alt_text)" class="w-full"
+                            <Button theme="secondary" @click="updateAltText(data.id, data.alt_text)" class="w-full"
                                 :loading="data.progress < 1.0">
                                 <span>Edit</span>
-                            </ButtonSecondary>
+                            </Button>
                         </Popover.Content>
                     </Popover.Positioner>
                 </Popover.Root>
@@ -57,7 +57,7 @@
 <script lang="ts" setup>
 import { Popover } from "@ark-ui/vue";
 import { nanoid } from "nanoid";
-import ButtonSecondary from "../buttons/button-secondary.vue";
+import Button from "~/packages/ui/components/buttons/button.vue";
 
 const files = defineModel<
     {
diff --git a/components/errors/ErrorBoundary.vue b/components/errors/ErrorBoundary.vue
index cf04c65..fd3089f 100644
--- a/components/errors/ErrorBoundary.vue
+++ b/components/errors/ErrorBoundary.vue
@@ -1,15 +1,14 @@
 <template>
     <slot name="error" v-if="error" v-bind="{ error }">
         <div id="error" class="grid min-h-screen place-items-center px-6 py-24 sm:py-32 lg:px-8">
-            <div class="text-center prose prose-invert">
-                <p class="text-base font-semibold text-primary-400">404</p>
+            <div class="text-center prose prose-invert max-w-md w-full">
                 <h1 class="mt-4 text-3xl font-bold tracking-tight text-gray-100 sm:text-5xl">{{ error.title }}
                 </h1>
                 <p class="mt-6 text-base leading-7 text-gray-400" v-html="error.message"></p>
                 <div class="mt-10 grid grid-cols-2 gap-x-6 mx-auto max-w-md">
-                    <ButtonPrimary class="w-full" @click="back">Go back</ButtonPrimary>
+                    <Button theme="primary" class="w-full" @click="back">Go back</Button>
                     <a href="https://github.com/lysand-org/lysand-fe/issues" target="_blank">
-                        <ButtonSecondary class="w-full">Report an issue</ButtonSecondary>
+                        <Button theme="secondary" class="w-full">Report an issue</Button>
                     </a>
                 </div>
             </div>
@@ -19,8 +18,7 @@
 </template>
 
 <script lang="ts" setup>
-import ButtonPrimary from "../buttons/button-primary.vue";
-import ButtonSecondary from "../buttons/button-secondary.vue";
+import Button from "~/packages/ui/components/buttons/button.vue";
 
 const error = ref<{
     title: string;
diff --git a/components/settings/oidc.vue b/components/settings/oidc.vue
index d999bf7..51902f9 100644
--- a/components/settings/oidc.vue
+++ b/components/settings/oidc.vue
@@ -13,13 +13,13 @@
                         <span class="font-semibold text-gray-300">{{ provider.name }}</span>
                     </div>
                     <div>
-                        <ButtonPrimary :loading="loading" v-if="!linkedProviders?.find(p => p.id === provider.id)"
-                            @click="link(provider.id)">
-                            <span>Link</span>
-                        </ButtonPrimary>
-                        <ButtonSecondary :loading="loading" v-else @click="unlink(provider.id)">
-                            <span>Unlink</span>
-                        </ButtonSecondary>
+                        <Button theme="primary" :loading="loading"
+                            v-if="!linkedProviders?.find(p => p.id === provider.id)" @click="link(provider.id)">
+                            Link
+                        </Button>
+                        <Button theme="secondary" :loading="loading" v-else @click="unlink(provider.id)">
+                            Unlink
+                        </Button>
                     </div>
                 </div>
             </div>
@@ -29,9 +29,8 @@
 
 <script lang="ts" setup>
 import type { ResponseError } from "@lysand-org/client";
+import Button from "~/packages/ui/components/buttons/button.vue";
 import Avatar from "../avatars/avatar.vue";
-import ButtonPrimary from "../buttons/button-primary.vue";
-import ButtonSecondary from "../buttons/button-secondary.vue";
 
 const client = useClient();
 const ssoConfig = useSSOConfig();
diff --git a/components/settings/profile-editor.vue b/components/settings/profile-editor.vue
index f8799b1..ceeea5d 100644
--- a/components/settings/profile-editor.vue
+++ b/components/settings/profile-editor.vue
@@ -30,12 +30,12 @@
             </div>
 
             <div class="px-4 mt-4 grid grid-cols-2 gap-2">
-                <ButtonPrimary class="w-full" type="submit" :loading="loading">
+                <Button theme="primary" class="w-full" type="submit" :loading="loading">
                     <span>Save</span>
-                </ButtonPrimary>
-                <ButtonSecondary class="w-full" @click="revert" type="button" :loading="loading">
+                </Button>
+                <Button theme="secondary" class="w-full" @click="revert" type="button" :loading="loading">
                     <span>Revert</span>
-                </ButtonSecondary>
+                </Button>
             </div>
         </form>
         <div>
@@ -46,9 +46,8 @@
 
 <script lang="ts" setup>
 import type { ResponseError } from "@lysand-org/client";
+import Button from "~/packages/ui/components/buttons/button.vue";
 import Avatar from "../avatars/avatar.vue";
-import ButtonPrimary from "../buttons/button-primary.vue";
-import ButtonSecondary from "../buttons/button-secondary.vue";
 import RichTextboxInput from "../inputs/rich-textbox-input.vue";
 import TextInput from "../inputs/text-input.vue";
 import Oidc from "./oidc.vue";
diff --git a/components/sidebars/account-picker.vue b/components/sidebars/account-picker.vue
index 96ce98c..ad18fef 100644
--- a/components/sidebars/account-picker.vue
+++ b/components/sidebars/account-picker.vue
@@ -20,7 +20,7 @@
                         </span>
                     </div>
                 </div>
-                <ButtonBase theme="secondary" v-else  class="w-full !justify-start">
+                <ButtonBase theme="secondary" v-else class="w-full !justify-start overflow-hidden">
                     <Icon icon="tabler:login" class="!size-6" />
                     <span class="shrink-0 line-clamp-1">Sign In</span>
                 </ButtonBase>
@@ -61,21 +61,21 @@
                 </Menu.Item>
                 <Menu.Item value="" v-if="currentIdentity">
                     <NuxtLink href="/settings" class="w-full">
-                        <ButtonBase theme="secondary" class="w-full !justify-start">
+                        <ButtonBase theme="outline" class="w-full !justify-start">
                             <Icon icon="tabler:adjustments" class="!size-6" />
                             <span class="shrink-0 line-clamp-1">Settings</span>
                         </ButtonBase>
                     </NuxtLink>
                 </Menu.Item>
                 <Menu.Item value="">
-                    <ButtonBase @click="$emit('signIn')" theme="secondary" class="w-full !justify-start">
+                    <ButtonBase @click="$emit('signIn')" theme="outline" class="w-full !justify-start">
                         <Icon icon="tabler:user-plus" class="!size-6" />
                         <span class="shrink-0 line-clamp-1">Add new account</span>
                     </ButtonBase>
                 </Menu.Item>
                 <Menu.Item value="" v-if="!currentIdentity">
                     <NuxtLink href="/register" class="w-full">
-                        <ButtonBase theme="secondary" class="w-full !justify-start">
+                        <ButtonBase theme="outline" class="w-full !justify-start">
                             <Icon icon="tabler:certificate" class="!size-6" />
                             <span class="shrink-0 line-clamp-1">Create new account</span>
                         </ButtonBase>
diff --git a/components/sidebars/navigation.vue b/components/sidebars/navigation.vue
index 01a16c1..e1d0e64 100644
--- a/components/sidebars/navigation.vue
+++ b/components/sidebars/navigation.vue
@@ -12,7 +12,7 @@
                 Timelines</h3>
 
             <NuxtLink v-for="timeline in visibleTimelines" :key="timeline.href" :to="timeline.href">
-                <ButtonBase theme="secondary" class="w-full !justify-start">
+                <ButtonBase theme="outline" class="w-full !justify-start overflow-hidden rounded-sm">
                     <Icon :icon="timeline.icon" class="!size-6" />
                     <span class="shrink-0 line-clamp-1">{{ timeline.name }}</span>
                 </ButtonBase>
@@ -27,13 +27,13 @@
             <AccountPicker @sign-in="signIn().finally(() => loadingAuth = false)"
                 @sign-out="id => signOut(id).finally(() => loadingAuth = false)" />
             <NuxtLink href="/register" v-if="!identity">
-                <ButtonBase theme="secondary" class="w-full !justify-start">
+                <ButtonBase theme="outline" class="w-full !justify-start overflow-hidden rounded-sm">
                     <Icon icon="tabler:certificate" class="!size-6" />
                     <span class="shrink-0 line-clamp-1">Register</span>
                 </ButtonBase>
             </NuxtLink>
             <NuxtLink href="/settings" v-if="identity">
-                <ButtonBase @click="$emit('signIn')" theme="secondary" class="w-full !justify-start">
+                <ButtonBase @click="$emit('signIn')" theme="secondary" class="w-full !justify-start overflow-hidden">
                     <Icon icon="tabler:adjustments" class="!size-6" />
                     <span class="shrink-0 line-clamp-1">Settings</span>
                 </ButtonBase>
@@ -41,7 +41,8 @@
             <h3 v-if="identity"
                 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
                 Posts</h3>
-            <ButtonBase v-if="identity" @click="compose" title="Open composer (shortcut: n)" theme="gradient" class="!justify-start">
+            <ButtonBase v-if="identity" @click="compose" title="Open composer (shortcut: n)" theme="gradient"
+                class="!justify-start overflow-hidden">
                 <Icon icon="tabler:writing" class="!size-6" />
                 <span class="shrink-0 line-clamp-1">Compose</span>
                 <kbd class="text-xs font-semibold rounded bg-dark-500 font-mono px-1 flex flex-row ml-auto">
@@ -50,7 +51,8 @@
                         aria-hidden="true" />
                 </kbd>
             </ButtonBase>
-            <ButtonBase v-if="$pwa?.needRefresh" @click="$pwa?.updateServiceWorker()" title="Update service worker" theme="primary" class="w-full !justify-start">
+            <ButtonBase v-if="$pwa?.needRefresh" @click="$pwa?.updateServiceWorker()" title="Update service worker"
+                theme="primary" class="w-full !justify-start overflow-hidden">
                 <Icon icon="tabler:refresh" class="!size-6" />
                 <span class="shrink-0 line-clamp-1">Update</span>
             </ButtonBase>
diff --git a/components/social-elements/notes/note-content.vue b/components/social-elements/notes/note-content.vue
index 0b994a3..0cd2660 100644
--- a/components/social-elements/notes/note-content.vue
+++ b/components/social-elements/notes/note-content.vue
@@ -20,14 +20,14 @@
         <!-- Spoiler text is it's specified -->
         <span v-if="note?.spoiler_text" class="mt-2 break-all">{{ note.spoiler_text
             }}</span>
-        <ButtonSecondary @click="collapsed = false" class="mt-4">Show content</ButtonSecondary>
+        <Button theme="secondary" @click="collapsed = false" class="mt-4">Show content</Button>
     </div>
 </template>
 
 <script lang="ts" setup>
 import type { Status } from "@lysand-org/client/types";
-import ButtonSecondary from "~/components/buttons/button-secondary.vue";
 import Skeleton from "~/components/skeleton/Skeleton.vue";
+import Button from "~/packages/ui/components/buttons/button.vue";
 import Attachment from "./attachment.vue";
 import Note from "./note.vue";
 
diff --git a/components/social-elements/notifications/notif.vue b/components/social-elements/notifications/notif.vue
index a2c6c4c..4eec79c 100644
--- a/components/social-elements/notifications/notif.vue
+++ b/components/social-elements/notifications/notif.vue
@@ -18,10 +18,12 @@
             </div>
             <div v-if="notification?.type === 'follow_request' && relationship?.requested_by"
                 class="w-full grid grid-cols-2 gap-4 p-2 ">
-                <ButtonPrimary :loading="isWorkingOnFollowRequest" @click="acceptFollowRequest"><span>Accept</span>
-                </ButtonPrimary>
-                <ButtonSecondary :loading="isWorkingOnFollowRequest" @click="rejectFollowRequest"><span>Reject</span>
-                </ButtonSecondary>
+                <Button theme="primary" :loading="isWorkingOnFollowRequest"
+                    @click="acceptFollowRequest"><span>Accept</span>
+                </Button>
+                <Button theme="secondary" :loading="isWorkingOnFollowRequest"
+                    @click="rejectFollowRequest"><span>Reject</span>
+                </Button>
             </div>
         </div>
     </div>
@@ -30,9 +32,8 @@
 <script lang="ts" setup>
 import type { Notification } from "@lysand-org/client/types";
 import Avatar from "~/components/avatars/avatar.vue";
-import ButtonPrimary from "~/components/buttons/button-primary.vue";
-import ButtonSecondary from "~/components/buttons/button-secondary.vue";
 import Skeleton from "~/components/skeleton/Skeleton.vue";
+import Button from "~/packages/ui/components/buttons/button.vue";
 import Note from "../notes/note.vue";
 import SmallCard from "../users/SmallCard.vue";
 
diff --git a/components/social-elements/users/Account.vue b/components/social-elements/users/Account.vue
index 011347c..5fb7859 100644
--- a/components/social-elements/users/Account.vue
+++ b/components/social-elements/users/Account.vue
@@ -7,20 +7,20 @@
             <Avatar :src="account?.avatar" :alt="`${account?.acct}'s avatar'`"
                 class="h-32 w-32 -mt-[4.5rem] z-10 shrink-0 rounded ring-2 ring-dark-800" />
 
-            <ButtonSecondary v-if="account && account?.id === identity?.account?.id">Edit Profile
-            </ButtonSecondary>
-            <ButtonSecondary :loading="isLoading" @click="follow()"
+            <Button theme="secondary" v-if="account && account?.id === identity?.account?.id">Edit Profile
+            </Button>
+            <Button theme="secondary" :loading="isLoading" @click="follow()"
                 v-if="account && account?.id !== identity?.account?.id && relationship && !relationship.following && !relationship.requested">
                 <span>Follow</span>
-            </ButtonSecondary>
-            <ButtonSecondary :loading="isLoading" @click="unfollow()"
+            </Button>
+            <Button theme="secondary" :loading="isLoading" @click="unfollow()"
                 v-if="account && account?.id !== identity?.account?.id && relationship && relationship.following">
                 <span>Unfollow</span>
-            </ButtonSecondary>
-            <ButtonSecondary :loading="isLoading" :disabled="true"
+            </Button>
+            <Button theme="secondary" :loading="isLoading" :disabled="true"
                 v-if="account && account?.id !== identity?.account?.id && relationship && !relationship.following && relationship.requested">
                 <span>Requested</span>
-            </ButtonSecondary>
+            </Button>
         </div>
 
         <div class="mt-2 px-4">
@@ -100,8 +100,8 @@
 <script lang="ts" setup>
 import type { Account } from "@lysand-org/client/types";
 import Avatar from "~/components/avatars/avatar.vue";
-import ButtonSecondary from "~/components/buttons/button-secondary.vue";
 import Skeleton from "~/components/skeleton/Skeleton.vue";
+import Button from "~/packages/ui/components/buttons/button.vue";
 import Badge from "./Badge.vue";
 
 const props = defineProps<{
diff --git a/packages/ui/components/buttons/button.vue b/packages/ui/components/buttons/button.vue
index ab08e45..69c5b24 100644
--- a/packages/ui/components/buttons/button.vue
+++ b/packages/ui/components/buttons/button.vue
@@ -1,6 +1,6 @@
 <template>
     <button v-bind="$attrs" type="button" :disabled="loading"
-        :class="['relative isolate text-base/6 font-semibold px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] sm:text-sm/6 focus:outline-none focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-[--btn-bg] before:absolute before:inset-0 before:-z-10 before:rounded-[calc(theme(borderRadius.lg)-1px)] overflow-hidden before:shadow before:hidden after:absolute after:-z-10 after:-inset-px after:rounded-md before:disabled:shadow-none after:disabled:shadow-none text-white cursor-default rounded-md duration-200 hover:shadow disabled:opacity-70 content-none disabled:cursor-not-allowed shadow-sm bg-[--btn-bg] before:bg-[--btn-bg] after:active:bg-[--btn-hover-overlay] after:hover:bg-[--btn-hover-overlay] [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon] [&>[data-slot=icon]]:sm:my-1 [&>[data-slot=icon]]:sm:size-4 inline-flex items-center justify-center gap-x-3', theme && themes[theme]]">
+        :class="['relative isolate text-base/6 font-semibold px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] sm:text-sm/6 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-[--btn-bg] before:absolute before:inset-0 before:-z-10 before:rounded-[calc(theme(borderRadius.lg)-1px)] before:shadow before:hidden after:absolute after:-z-10 after:-inset-px after:rounded-md before:disabled:shadow-none after:disabled:shadow-none text-white cursor-default rounded-md duration-200 hover:shadow disabled:opacity-70 content-none disabled:cursor-not-allowed shadow-sm bg-[--btn-bg] before:bg-[--btn-bg] after:active:bg-[--btn-hover-overlay] after:duration-200 after:hover:bg-[--btn-hover-overlay] [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon] [&>[data-slot=icon]]:sm:my-1 [&>[data-slot=icon]]:sm:size-4 inline-flex items-center justify-center gap-x-3', theme && themes[theme]]">
         <div data-spinner v-if="loading" class="absolute inset-0 bg-[--btn-bg] flex items-center justify-center">
             <iconify-icon icon="tabler:loader-2" height="none" class="animate-spin size-5" />
         </div>
@@ -20,6 +20,8 @@ const themes = {
     // Gradient:  bg-gradient-to-tr from-primary-300 via-purple-300 to-indigo-400
     gradient:
         "bg-[image:--btn-bg] before:bg-[image:--btn-bg] [--btn-border:theme(colors.primary.950/90%)] [--btn-bg:linear-gradient(to_right,theme(colors.primary.300),theme(colors.purple.300),theme(colors.indigo.400))] [--btn-hover-overlay:theme(colors.white/10%)] [--btn-icon:theme(colors.gray.100)] active:[--btn-icon:theme(colors.gray.50)] hover:[--btn-icon:theme(colors.gray.50)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] [&>[data-spinner]]:bg-[image:--btn-bg]",
+    outline:
+        "[--btn-border:theme(colors.zinc.950/90%)] [--btn-bg:transparent] [--btn-hover-overlay:theme(colors.white/5%)] [--btn-icon:theme(colors.zinc.200)] active:[--btn-icon:theme(colors.zinc.300)] hover:[--btn-icon:theme(colors.zinc.300)] hover:ring-1 ring-white/5",
 };
 
 interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
diff --git a/packages/ui/demo/buttons-demo.vue b/packages/ui/demo/buttons-demo.vue
index 3f6fddd..85339f9 100644
--- a/packages/ui/demo/buttons-demo.vue
+++ b/packages/ui/demo/buttons-demo.vue
@@ -4,26 +4,61 @@
         <Button theme="primary">Click me</Button>
         <Button theme="secondary">Click me</Button>
         <Button theme="gradient">Click me</Button>
+        <Button theme="outline">Click me</Button>
 
         <Button loading>Click me</Button>
         <Button theme="primary" loading>Click me</Button>
         <Button theme="secondary" loading>Click me</Button>
         <Button theme="gradient" loading>Click me</Button>
+        <Button theme="outline" loading>Click me</Button>
 
-        <Button><Icon icon="tabler:certificate" />Gamer</Button>
-        <Button theme="primary"><Icon icon="tabler:certificate" />Gamer</Button>
-        <Button theme="secondary"><Icon icon="tabler:certificate" />Gamer</Button>
-        <Button theme="gradient"><Icon icon="tabler:certificate" />Gamer</Button>
+        <Button>
+            <Icon icon="tabler:certificate" />Gamer
+        </Button>
+        <Button theme="primary">
+            <Icon icon="tabler:certificate" />Gamer
+        </Button>
+        <Button theme="secondary">
+            <Icon icon="tabler:certificate" />Gamer
+        </Button>
+        <Button theme="gradient">
+            <Icon icon="tabler:certificate" />Gamer
+        </Button>
+        <Button theme="outline">
+            <Icon icon="tabler:certificate" />Gamer
+        </Button>
 
-        <Button><Icon icon="tabler:certificate" /></Button>
-        <Button theme="primary"><Icon icon="tabler:certificate" /></Button>
-        <Button theme="secondary"><Icon icon="tabler:certificate" /></Button>
-        <Button theme="gradient"><Icon icon="tabler:certificate" /></Button>
+        <Button>
+            <Icon icon="tabler:certificate" />
+        </Button>
+        <Button theme="primary">
+            <Icon icon="tabler:certificate" />
+        </Button>
+        <Button theme="secondary">
+            <Icon icon="tabler:certificate" />
+        </Button>
+        <Button theme="gradient">
+            <Icon icon="tabler:certificate" />
+        </Button>
+        <Button theme="outline">
+            <Icon icon="tabler:certificate" />
+        </Button>
 
-        <Button>Gamer<Icon icon="tabler:certificate" /></Button>
-        <Button theme="primary">Gamer<Icon icon="tabler:certificate" /></Button>
-        <Button theme="secondary">Gamer<Icon icon="tabler:certificate" /></Button>
-        <Button theme="gradient">Gamer<Icon icon="tabler:certificate" /></Button>
+        <Button>Gamer
+            <Icon icon="tabler:certificate" />
+        </Button>
+        <Button theme="primary">Gamer
+            <Icon icon="tabler:certificate" />
+        </Button>
+        <Button theme="secondary">Gamer
+            <Icon icon="tabler:certificate" />
+        </Button>
+        <Button theme="gradient">Gamer
+            <Icon icon="tabler:certificate" />
+        </Button>
+        <Button theme="outline">Gamer
+            <Icon icon="tabler:certificate" />
+        </Button>
     </div>
 </template>
 
diff --git a/pages/oauth/authorize.vue b/pages/oauth/authorize.vue
index ea414c4..bec7684 100644
--- a/pages/oauth/authorize.vue
+++ b/pages/oauth/authorize.vue
@@ -42,13 +42,13 @@
                     <div class="grid md:grid-cols-2 md:[&:has(>:last-child:nth-child(1))]:grid-cols-1 gap-4 w-full">
                         <a v-for="provider of ssoConfig.providers" :key="provider.id"
                             :href="issuerRedirectUrl(provider.id)">
-                            <ButtonSecondary class="flex flex-row w-full items-center justify-center gap-3">
+                            <Button theme="secondary" class="flex flex-row w-full items-center justify-center gap-3">
                                 <img crossorigin="anonymous" :src="provider.icon" :alt="`${provider.name}'s logo'`"
                                     class="w-6 h-6" />
                                 <div class="flex flex-col gap-0 justify-center">
                                     <h3 class="font-bold">{{ provider.name }}</h3>
                                 </div>
-                            </ButtonSecondary>
+                            </Button>
                         </a>
                     </div>
                 </div>
@@ -58,7 +58,7 @@
                     here, please close this page.
                 </p>
 
-                <ButtonPrimary type="submit" class="w-full">Sign in</ButtonPrimary>
+                <Button theme="primary" type="submit" class="w-full">Sign in</Button>
             </VeeForm>
         </div>
         <div v-else class="mx-auto max-w-md">
@@ -100,14 +100,13 @@
 import { LysandClient } from "@lysand-org/client";
 import { toTypedSchema } from "@vee-validate/zod";
 import { z } from "zod";
-import ButtonPrimary from "~/components/buttons/button-primary.vue";
-import ButtonSecondary from "~/components/buttons/button-secondary.vue";
 import FieldError from "~/components/inputs/field-error.vue";
 import Field from "~/components/inputs/field.vue";
 import LabelAndError from "~/components/inputs/label-and-error.vue";
 import Label from "~/components/inputs/label.vue";
 import PasswordInput from "~/components/inputs/password-input.vue";
 import TextInput from "~/components/inputs/text-input.vue";
+import Button from "~/packages/ui/components/buttons/button.vue";
 
 const schema = toTypedSchema(
     z.object({
diff --git a/pages/oauth/consent.vue b/pages/oauth/consent.vue
index 35438db..c31df09 100644
--- a/pages/oauth/consent.vue
+++ b/pages/oauth/consent.vue
@@ -40,9 +40,9 @@
                 </div>
 
                 <div class="flex flex-col gap-3">
-                    <ButtonPrimary type="submit">Authorize</ButtonPrimary>
+                    <Button theme="primary" type="submit">Authorize</Button>
                     <NuxtLink href="/" class="w-full">
-                        <ButtonSecondary class="w-full">Cancel</ButtonSecondary>
+                        <Button theme="secondary" class="w-full">Cancel</Button>
                     </NuxtLink>
                 </div>
             </form>
@@ -83,8 +83,7 @@
 </template>
 
 <script setup lang="ts">
-import ButtonPrimary from "~/components/buttons/button-primary.vue";
-import ButtonSecondary from "~/components/buttons/button-secondary.vue";
+import Button from "~/packages/ui/components/buttons/button.vue";
 
 const url = useRequestURL();
 const params = useUrlSearchParams();
diff --git a/pages/oauth/reset.vue b/pages/oauth/reset.vue
index 8e41f4d..4e2eef6 100644
--- a/pages/oauth/reset.vue
+++ b/pages/oauth/reset.vue
@@ -39,7 +39,7 @@
                     password. Make sure to put it in a password manager.
                 </p>
 
-                <ButtonPrimary type="submit" class="w-full">Reset</ButtonPrimary>
+                <Button theme="primary" type="submit" class="w-full">Reset</Button>
             </VeeForm>
         </div>
         <div v-else-if="params.success">
@@ -69,12 +69,12 @@
 <script setup lang="ts">
 import { toTypedSchema } from "@vee-validate/zod";
 import { z } from "zod";
-import ButtonPrimary from "~/components/buttons/button-primary.vue";
 import FieldError from "~/components/inputs/field-error.vue";
 import Field from "~/components/inputs/field.vue";
 import LabelAndError from "~/components/inputs/label-and-error.vue";
 import Label from "~/components/inputs/label.vue";
 import PasswordInput from "~/components/inputs/password-input.vue";
+import Button from "~/packages/ui/components/buttons/button.vue";
 
 const identity = useCurrentIdentity();
 identity.value = null;
diff --git a/pages/register/index.vue b/pages/register/index.vue
index fcad167..96e3718 100644
--- a/pages/register/index.vue
+++ b/pages/register/index.vue
@@ -70,7 +70,7 @@
 
                 <Collapsible.Root>
                     <Collapsible.Trigger class="w-full">
-                        <ButtonSecondary type="button" class="w-full">View Terms of Service</ButtonSecondary>
+                        <Button theme="secondary" class="w-full">View Terms of Service</Button>
                     </Collapsible.Trigger>
                     <Collapsible.Content
                         class="prose prose-invert prose-sm p-4 ring-1 ring-white/10 bg-dark-700 rounded mt-3">
@@ -84,8 +84,8 @@
                     cannot see your password.
                 </p>
 
-                <ButtonPrimary type="submit" class="w-full" :disabled="isLoading">{{ isLoading ? "Registering..." :
-                    "Register" }}</ButtonPrimary>
+                <Button theme="primary" type="submit" class="w-full" :disabled="isLoading">{{ isLoading ? "Registering..." :
+                    "Register" }}</Button>
             </VeeForm>
         </div>
         <div v-else>
@@ -104,8 +104,6 @@ import { Collapsible } from "@ark-ui/vue";
 import type { ResponseError } from "@lysand-org/client";
 import { toTypedSchema } from "@vee-validate/zod";
 import { z } from "zod";
-import ButtonPrimary from "~/components/buttons/button-primary.vue";
-import ButtonSecondary from "~/components/buttons/button-secondary.vue";
 import CheckboxInput from "~/components/inputs/checkbox-input.vue";
 import FieldError from "~/components/inputs/field-error.vue";
 import Field from "~/components/inputs/field.vue";
@@ -113,6 +111,7 @@ import LabelAndError from "~/components/inputs/label-and-error.vue";
 import Label from "~/components/inputs/label.vue";
 import PasswordInput from "~/components/inputs/password-input.vue";
 import TextInput from "~/components/inputs/text-input.vue";
+import Button from "~/packages/ui/components/buttons/button.vue";
 
 const schema = toTypedSchema(
     z