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>

packages/ui/src/components/base/CollapsibleAdmonition.vue

@@ -17,24 +17,26 @@
 					</span>
 				</div>
 				<div class="flex items-center gap-2">
-					<ButtonStyled circular type="highlight-colored-text" :color="buttonColors[type]">
-						<button aria-label="Toggle" @click.stop="expanded = !expanded">
-							<ChevronDownIcon
-								class="h-4 w-4 transition-transform duration-300"
-								:class="expanded && 'rotate-180'"
-							/>
-						</button>
-					</ButtonStyled>
-					<ButtonStyled
-						v-if="dismissible"
-						circular
-						type="highlight-colored-text"
+					<IconButton
+						type="quiet"
 						:color="buttonColors[type]"
+						label="Toggle"
+						@click.stop="expanded = !expanded"
 					>
-						<button aria-label="Dismiss" @click.stop="handleDismiss">
-							<XIcon class="h-4 w-4" />
-						</button>
-					</ButtonStyled>
+						<ChevronDownIcon
+							class="h-4 w-4 transition-transform duration-300"
+							:class="expanded && 'rotate-180'"
+						/>
+					</IconButton>
+					<IconButton
+						v-if="dismissible"
+						type="quiet"
+						:color="buttonColors[type]"
+						label="Dismiss"
+						@click.stop="handleDismiss"
+					>
+						<XIcon class="h-4 w-4" />
+					</IconButton>
 				</div>
 			</div>
 
@@ -72,7 +74,7 @@
 import { ChevronDownIcon, LightBulbIcon, TriangleAlertIcon, XIcon } from '@modrinth/assets'
 import { ref } from 'vue'
 
-import ButtonStyled from './ButtonStyled.vue'
+import { IconButton } from '#ui/components/base/buttons'
 
 export interface CollapsibleAdmonitionItem {
 	title: string