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/I18nDebugPanel.vue

@@ -10,8 +10,9 @@ import {
 } from '@modrinth/assets'
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 
+import { IconButton } from '#ui/components/base/buttons'
+
 import { injectI18nDebug } from '../../composables/i18n-debug'
-import ButtonStyled from './ButtonStyled.vue'
 import StyledInput from './StyledInput.vue'
 
 const debugContext = injectI18nDebug()
@@ -295,37 +296,41 @@ const listMaxHeight = computed(() => `${panelHeight.value - 120}px`)
 
 					<!-- Toolbar -->
 					<div class="ml-auto flex items-center gap-0.5">
-						<ButtonStyled circular type="transparent">
-							<button
-								v-tooltip="
-									debugContext?.keyReveal.value ? 'Hide keys inline' : 'Reveal keys inline'
-								"
-								@click="toggleKeyReveal"
-							>
-								<component :is="debugContext?.keyReveal.value ? EyeOffIcon : EyeIcon" />
-							</button>
-						</ButtonStyled>
-						<ButtonStyled circular type="transparent">
-							<button v-tooltip="'Toggle CSS debug overlay'" @click="toggleOverlay">
-								<ScanEyeIcon />
-							</button>
-						</ButtonStyled>
+						<IconButton
+							v-tooltip="debugContext?.keyReveal.value ? 'Hide keys inline' : 'Reveal keys inline'"
+							type="quiet"
+							:label="debugContext?.keyReveal.value ? 'Hide keys inline' : 'Reveal keys inline'"
+							@click="toggleKeyReveal"
+						>
+							<component :is="debugContext?.keyReveal.value ? EyeOffIcon : EyeIcon" />
+						</IconButton>
+						<IconButton
+							v-tooltip="'Toggle CSS debug overlay'"
+							type="quiet"
+							:label="'Toggle CSS debug overlay'"
+							@click="toggleOverlay"
+						>
+							<ScanEyeIcon />
+						</IconButton>
 
 						<div class="mx-0.5 h-4 w-px bg-surface-5/60" />
 
-						<ButtonStyled circular type="transparent">
-							<button
-								v-tooltip="minimized ? 'Expand panel' : 'Minimize panel'"
-								@click="minimized = !minimized"
-							>
-								<component :is="minimized ? MaximizeIcon : MinusIcon" />
-							</button>
-						</ButtonStyled>
-						<ButtonStyled circular type="transparent">
-							<button v-tooltip="'Close inspector'" @click="closePanel">
-								<XIcon />
-							</button>
-						</ButtonStyled>
+						<IconButton
+							v-tooltip="minimized ? 'Expand panel' : 'Minimize panel'"
+							type="quiet"
+							:label="minimized ? 'Expand panel' : 'Minimize panel'"
+							@click="minimized = !minimized"
+						>
+							<component :is="minimized ? MaximizeIcon : MinusIcon" />
+						</IconButton>
+						<IconButton
+							v-tooltip="'Close inspector'"
+							type="quiet"
+							:label="'Close inspector'"
+							@click="closePanel"
+						>
+							<XIcon />
+						</IconButton>
 					</div>
 				</div>