refactor: Button components (#6929)

* feat: refactor button components

* fix: qa

* fix: storybook

* a11y: pass

* fix: build

* fix: rename default ->md

* fix: lint

* docs: buttons.md

* refactor part 1

* refactor part 2

* fix: undo refactor for fresh restart

* refactor

* Revert "refactor"

This reverts commit 96d65902d7.

* refactor: part 1

* fix: qa

* fix: qa

* fix: qa

* fix: qa

* fix: qa

* fix: qa

* fix: qa

* fix: qa

* fix: remove text-contrast

* fix: qa

* fix: v-tooltip

* fix: lint

* fix: split broken

* fix: passkey qa

* fix: qa

* fix: qa

* fix: prepr

* fix: splitbutton

* improve button group seam

---------

Signed-off-by: Calum H. <calum@modrinth.com>
Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>

apps/frontend/src/components/ui/NewsletterButton.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { CheckIcon, MailIcon } from '@modrinth/assets'
-import { ButtonStyled, defineMessages, injectModrinthClient, useVIntl } from '@modrinth/ui'
+import { Button, defineMessages, injectModrinthClient, useVIntl } from '@modrinth/ui'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
 import { computed, ref } from 'vue'
 
@@ -61,12 +61,16 @@ async function subscribe() {
 </script>
 
 <template>
-	<ButtonStyled v-if="isSuccess && showSubscribeButton" color="brand" type="outlined">
-		<button v-tooltip="formatMessage(messages.tooltipSubscribe)" @click="subscribe">
-			<template v-if="!showSubscriptionConfirmation">
-				<MailIcon /> {{ formatMessage(messages.subscribe) }}
-			</template>
-			<template v-else> <CheckIcon /> {{ formatMessage(messages.subscribed) }} </template>
-		</button>
-	</ButtonStyled>
+	<Button
+		v-if="isSuccess && showSubscribeButton"
+		v-tooltip="formatMessage(messages.tooltipSubscribe)"
+		type="outlined"
+		class="!text-brand !shadow-[inset_0_0_0_1px_var(--color-brand)] [&>svg]:!text-brand"
+		@click="subscribe"
+	>
+		<template v-if="!showSubscriptionConfirmation">
+			<MailIcon /> {{ formatMessage(messages.subscribe) }}
+		</template>
+		<template v-else> <CheckIcon /> {{ formatMessage(messages.subscribed) }} </template>
+	</Button>
 </template>