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/app-frontend/src/components/ui/skin/VirtualSkinSectionList.vue

@@ -2,9 +2,10 @@
 import { DropdownIcon, EditIcon, PlusIcon, TrashIcon, UnknownIcon } from '@modrinth/assets'
 import {
 	Accordion,
-	ButtonStyled,
+	Button,
 	commonMessages,
 	defineMessages,
+	IconButton,
 	SkinButton,
 	SkinLikeTextButton,
 	useScrollViewport,
@@ -463,25 +464,26 @@ defineExpose({ getAddSkinButtonElement })
 								@select="emit('select', skin)"
 							>
 								<template v-if="!readOnly" #overlay-buttons>
-									<ButtonStyled color="brand">
-										<button
-											:aria-label="formatMessage(messages.editSkinButton)"
-											class="pointer-events-auto"
-											@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
-										>
-											<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
-										</button>
-									</ButtonStyled>
-									<ButtonStyled v-show="!skin.is_equipped" circular color="red">
-										<button
-											v-tooltip="formatMessage(messages.deleteSkinButton)"
-											:aria-label="formatMessage(messages.deleteSkinButton)"
-											class="!rounded-[100%] pointer-events-auto"
-											@click.stop="emit('delete', skin)"
-										>
-											<TrashIcon />
-										</button>
-									</ButtonStyled>
+									<Button
+										type="colored"
+										color="brand"
+										:aria-label="formatMessage(messages.editSkinButton)"
+										class="pointer-events-auto"
+										@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
+									>
+										<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
+									</Button>
+									<IconButton
+										v-show="!skin.is_equipped"
+										v-tooltip="formatMessage(messages.deleteSkinButton)"
+										type="colored"
+										color="red"
+										:label="formatMessage(messages.deleteSkinButton)"
+										class="!rounded-[100%] pointer-events-auto"
+										@click.stop="emit('delete', skin)"
+									>
+										<TrashIcon />
+									</IconButton>
 								</template>
 							</SkinButton>
 						</div>
@@ -503,25 +505,26 @@ defineExpose({ getAddSkinButtonElement })
 								@select="emit('select', skin)"
 							>
 								<template v-if="!readOnly" #overlay-buttons>
-									<ButtonStyled color="brand">
-										<button
-											:aria-label="formatMessage(messages.editSkinButton)"
-											class="pointer-events-auto"
-											@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
-										>
-											<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
-										</button>
-									</ButtonStyled>
-									<ButtonStyled v-show="!skin.is_equipped" circular color="red">
-										<button
-											v-tooltip="formatMessage(messages.deleteSkinButton)"
-											:aria-label="formatMessage(messages.deleteSkinButton)"
-											class="!rounded-[100%] pointer-events-auto"
-											@click.stop="emit('delete', skin)"
-										>
-											<TrashIcon />
-										</button>
-									</ButtonStyled>
+									<Button
+										type="colored"
+										color="brand"
+										:aria-label="formatMessage(messages.editSkinButton)"
+										class="pointer-events-auto"
+										@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
+									>
+										<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
+									</Button>
+									<IconButton
+										v-show="!skin.is_equipped"
+										v-tooltip="formatMessage(messages.deleteSkinButton)"
+										type="colored"
+										color="red"
+										:label="formatMessage(messages.deleteSkinButton)"
+										class="!rounded-[100%] pointer-events-auto"
+										@click.stop="emit('delete', skin)"
+									>
+										<TrashIcon />
+									</IconButton>
 								</template>
 							</SkinButton>
 						</div>
@@ -545,15 +548,15 @@ defineExpose({ getAddSkinButtonElement })
 						@select="emit('select', skin)"
 					>
 						<template #overlay-buttons>
-							<ButtonStyled color="brand">
-								<button
-									:aria-label="formatMessage(messages.editSkinButton)"
-									class="pointer-events-auto"
-									@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
-								>
-									<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
-								</button>
-							</ButtonStyled>
+							<Button
+								type="colored"
+								color="brand"
+								:aria-label="formatMessage(messages.editSkinButton)"
+								class="pointer-events-auto"
+								@click.stop="(event: MouseEvent) => emit('edit', skin, event)"
+							>
+								<EditIcon /> {{ formatMessage(commonMessages.editButton) }}
+							</Button>
 						</template>
 					</SkinButton>
 				</div>