chore: clean up a bunch of legacy styles (#5973)

* remove unused experimental-styles-within * remove unused styles * more cleanup + prepr * Refactor nearly all legacy buttons to use ButtonStyled * prepr * Update MC account selector to modern version * prepr --------- Co-authored-by: Calum H. <calum@modrinth.com>
2026-05-03 11:53:06 -07:00
parent 8a72ee9968
commit 7dbbbe590f
153 changed files with 2596 additions and 3817 deletions
--- a/packages/ui/src/layouts/shared/console/layout.vue
+++ b/packages/ui/src/layouts/shared/console/layout.vue
@@ -76,7 +76,7 @@
 		<template #actions>
 			<div class="flex justify-end gap-2">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="deleteModal?.hide()">
+					<button @click="deleteModal?.hide()">
 						<XIcon />
 						Cancel
 					</button>
--- a/packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/ContentModpackCard.vue
@@ -242,7 +242,7 @@ onUnmounted(() => {
 								</button>
 							</ButtonStyled>
 							<template #popper>
-								<div class="experimental-styles-within grid grid-cols-[min-content] gap-1">
+								<div class="grid grid-cols-[min-content] gap-1">
 									<div class="flex min-w-48 items-center justify-between gap-8">
 										<h3 class="m-0 whitespace-nowrap text-base font-bold text-contrast">
 											{{ formatMessage(messages.contentHintTitle) }}
@@ -265,7 +265,6 @@ onUnmounted(() => {

 						<ButtonStyled v-if="hasSettingsListener" type="outlined" circular>
 							<button
-								class="!border !border-surface-4"
 								@click="
 									() => {
 										emit('settings')
@@ -301,7 +300,6 @@ onUnmounted(() => {
 							><TeleportOverflowMenu
 								:options="collapsedOptions"
 								class="flex @[700px]:hidden"
-								btn-class="!border-surface-4 !border"
 								@open="emit('dismiss-content-hint')"
 							>
 								<MoreVerticalIcon class="size-5" />
@@ -316,7 +314,7 @@ onUnmounted(() => {
 							</TeleportOverflowMenu></ButtonStyled
 						>
 						<template #popper>
-							<div class="experimental-styles-within grid grid-cols-[min-content] gap-1">
+							<div class="grid grid-cols-[min-content] gap-1">
 								<div class="flex min-w-48 items-center justify-between gap-8">
 									<h3 class="m-0 whitespace-nowrap text-base font-bold text-contrast">
 										{{ formatMessage(messages.contentHintTitle) }}
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmBulkUpdateModal.vue
@@ -21,7 +21,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="modal?.hide()">
+					<button @click="modal?.hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDeletionModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmDeletionModal.vue
@@ -23,7 +23,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="modal?.hide()">
+					<button @click="modal?.hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmModpackUpdateModal.vue
@@ -29,7 +29,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="handleCancel">
+					<button @click="handleCancel">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmReinstallModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmReinstallModal.vue
@@ -20,7 +20,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="modal?.hide()">
+					<button @click="modal?.hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmRepairModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmRepairModal.vue
@@ -11,7 +11,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="modal?.hide()">
+					<button @click="modal?.hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmUnlinkModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ConfirmUnlinkModal.vue
@@ -20,7 +20,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="modal?.hide()">
+					<button @click="modal?.hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentInstallModal.vue
@@ -70,7 +70,6 @@
 				<ButtonStyled type="outlined" circular>
 					<button
 						v-tooltip="`${hideUninstallable ? 'Show' : 'Hide'} unavailable`"
-						class="!border-surface-4 !border"
 						@click="hideUninstallable = !hideUninstallable"
 					>
 						<EyeOffIcon v-if="hideUninstallable" />
@@ -134,17 +133,13 @@
 				<Avatar :src="iconPreviewUrl ?? undefined" size="5rem" rounded="2xl" />
 				<div class="flex flex-col gap-2">
 					<ButtonStyled type="outlined">
-						<button class="!border-surface-4 !border" @click="selectIcon">
+						<button @click="selectIcon">
 							<UploadIcon />
 							{{ formatMessage(messages.selectIcon) }}
 						</button>
 					</ButtonStyled>
 					<ButtonStyled type="outlined">
-						<button
-							class="!border-surface-4 !border"
-							:disabled="!iconPreviewUrl"
-							@click="removeIcon"
-						>
+						<button :disabled="!iconPreviewUrl" @click="removeIcon">
 							<XIcon />
 							{{ formatMessage(messages.removeIcon) }}
 						</button>
@@ -213,7 +208,7 @@
 					</span>
 				</div>
 				<ButtonStyled type="outlined">
-					<button class="!border-surface-4 !border" @click="modal?.hide()">
+					<button @click="modal?.hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
@@ -222,7 +217,7 @@

 			<div v-else class="flex items-center justify-end gap-2">
 				<ButtonStyled type="outlined">
-					<button class="!border-surface-4 !border" @click="modal?.hide()">
+					<button @click="modal?.hide()">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
--- a/packages/ui/src/layouts/shared/content-tab/components/modals/ContentUpdaterModal.vue
+++ b/packages/ui/src/layouts/shared/content-tab/components/modals/ContentUpdaterModal.vue
@@ -205,7 +205,7 @@
 			</div>
 			<div class="flex flex-row gap-2 shrink-0">
 				<ButtonStyled type="outlined">
-					<button class="!border-[1px] !border-surface-4" @click="handleCancel">
+					<button @click="handleCancel">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
--- a/packages/ui/src/layouts/shared/content-tab/layout.vue
+++ b/packages/ui/src/layouts/shared/content-tab/layout.vue
@@ -582,7 +582,7 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 											(ctx.disableAddContent?.value ? ctx.disableAddContentTooltip : undefined)
 										"
 										:disabled="ctx.isBusy.value || ctx.disableAddContent?.value"
-										class="!h-10 !border-button-bg !border-[1px]"
+										class="!h-10"
 										@click="ctx.uploadFiles"
 									>
 										<FolderOpenIcon class="size-5" />
@@ -722,7 +722,7 @@ const confirmUnlinkModal = ref<InstanceType<typeof ConfirmUnlinkModal>>()
 									(ctx.disableAddContent?.value ? ctx.disableAddContentTooltip : undefined)
 								"
 								:disabled="ctx.isBusy.value || ctx.disableAddContent?.value"
-								class="!h-10 !border-button-bg !border-[1px]"
+								class="!h-10"
 								@click="ctx.uploadFiles"
 							>
 								<FolderOpenIcon class="size-5" />
--- a/packages/ui/src/layouts/shared/files-tab/components/FileContextMenu.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileContextMenu.vue
@@ -11,7 +11,7 @@
 			<div
 				v-if="visible"
 				ref="menuRef"
-				class="experimental-styles-within fixed isolate z-[9999] flex w-fit min-w-[180px] flex-col gap-2 overflow-hidden rounded-2xl border border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
+				class="fixed isolate z-[9999] flex w-fit min-w-[180px] flex-col gap-2 overflow-hidden rounded-2xl border border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
 				:style="{ left: `${position.x}px`, top: `${position.y}px` }"
 				role="menu"
 				tabindex="-1"
--- a/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/FileNavbar.vue
@@ -114,7 +114,7 @@
 				<ButtonStyled v-if="showRefreshButton" type="outlined">
 					<button
 						type="button"
-						class="flex !h-10 items-center gap-2 !border-[1px] !border-surface-5"
+						class="flex !h-10 items-center gap-2"
 						:disabled="refreshing"
 						@click="handleRefresh"
 					>
@@ -135,7 +135,7 @@
 						:aria-label="formatMessage(messages.createNew)"
 						:disabled="disabled"
 						:tooltip="disabled ? disabledTooltip : undefined"
-						class="!h-10 justify-center gap-2 !border-[1px] !border-surface-5"
+						class="!h-10 justify-center gap-2"
 						:options="[
 							{ id: 'file', action: () => $emit('create', 'file') },
 							{ id: 'directory', action: () => $emit('create', 'directory') },
--- a/packages/ui/src/layouts/shared/files-tab/components/editor/EditorFindReplace.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/editor/EditorFindReplace.vue
@@ -94,7 +94,7 @@
 				</div>
 				<ButtonStyled type="outlined">
 					<button
-						class="!h-8 whitespace-nowrap !border !border-surface-5 px-2 text-sm disabled:opacity-50"
+						class="!h-8 whitespace-nowrap px-2 text-sm disabled:opacity-50"
 						:disabled="findMatchCount === 0"
 						@click="emit('replace', replaceQuery)"
 					>
@@ -103,7 +103,7 @@
 				</ButtonStyled>
 				<ButtonStyled type="outlined">
 					<button
-						class="!h-8 whitespace-nowrap !border !border-surface-5 px-2 text-sm disabled:opacity-50"
+						class="!h-8 whitespace-nowrap px-2 text-sm disabled:opacity-50"
 						:disabled="findMatchCount === 0"
 						@click="emit('replaceAll', replaceQuery)"
 					>
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileCreateItemModal.vue
@@ -21,7 +21,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="hide">
+					<button @click="hide">
 						<XIcon class="h-5 w-5" />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileDeleteItemModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileDeleteItemModal.vue
@@ -7,7 +7,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="hide">
+					<button @click="hide">
 						<XIcon class="h-5 w-5" />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileMoveItemModal.vue
@@ -26,7 +26,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="hide">
+					<button @click="hide">
 						<XIcon class="h-5 w-5" />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileRenameItemModal.vue
@@ -14,7 +14,7 @@
 		<template #actions>
 			<div class="flex gap-2 justify-end">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="hide">
+					<button @click="hide">
 						<XIcon class="h-5 w-5" />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUnsavedChangesModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUnsavedChangesModal.vue
@@ -6,7 +6,7 @@
 		<template #actions>
 			<div class="flex justify-end gap-2">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="handleCancel">
+					<button @click="handleCancel">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadConflictModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadConflictModal.vue
@@ -54,7 +54,7 @@
 		<template #actions>
 			<div class="flex justify-end gap-2 pt-4">
 				<ButtonStyled type="outlined">
-					<button class="!border !border-surface-4" @click="hide">
+					<button @click="hide">
 						<XIcon />
 						{{ formatMessage(commonMessages.cancelButton) }}
 					</button>
--- a/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue
+++ b/packages/ui/src/layouts/shared/files-tab/components/modals/FileUploadZipUrlModal.vue
@@ -63,7 +63,7 @@
 		<template #actions>
 			<div class="flex w-full items-center justify-end gap-2">
 				<ButtonStyled type="outlined">
-					<button type="button" class="!border !border-surface-4" @click="hide">
+					<button type="button" @click="hide">
 						<XIcon />
 						{{
 							submitted
--- a/packages/ui/src/layouts/shared/installation-settings/layout.vue
+++ b/packages/ui/src/layouts/shared/installation-settings/layout.vue
@@ -635,10 +635,7 @@ const messages = defineMessages({
 								</button>
 							</ButtonStyled>
 							<ButtonStyled type="outlined">
-								<button
-									class="!border !border-surface-5 !shadow-none"
-									@click="form.cancelEditing()"
-								>
+								<button @click="form.cancelEditing()">
 									<XIcon />
 									{{ formatMessage(commonMessages.cancelButton) }}
 								</button>
--- a/packages/ui/src/layouts/shared/server-settings/pages/network.vue
+++ b/packages/ui/src/layouts/shared/server-settings/pages/network.vue
@@ -97,18 +97,18 @@
 							</template>
 							<template #cell-actions="{ row }">
 								<div class="flex items-center justify-end gap-2">
-									<ButtonStyled icon-only type="transparent" circular>
+									<ButtonStyled type="transparent" circular>
 										<button @click="copyText(`${serverIP}:${row.port}`)">
 											<CopyIcon />
 										</button>
 									</ButtonStyled>
 									<template v-if="!row.primary">
-										<ButtonStyled icon-only type="transparent" circular>
+										<ButtonStyled type="transparent" circular>
 											<button @click="showEditAllocationModal(row.port)">
 												<PencilIcon />
 											</button>
 										</ButtonStyled>
-										<ButtonStyled icon-only type="outlined" circular color="red">
+										<ButtonStyled type="outlined" circular color="red">
 											<button @click="showConfirmDeleteModal(row.port)">
 												<TrashIcon />
 											</button>
--- a/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/backups.vue
@@ -100,7 +100,7 @@
 						>
 							<template #actions>
 								<ButtonStyled type="outlined">
-									<button class="!border !border-surface-4" @click="clearBackupFilters">
+									<button @click="clearBackupFilters">
 										{{ formatMessage(messages.clearFilters) }}
 									</button>
 								</ButtonStyled>
--- a/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
 		data-pyro-server-list-root
-		class="experimental-styles-within relative mx-auto mb-6 flex w-full flex-col p-6"
+		class="relative mx-auto mb-6 flex w-full flex-col p-6"
 		:class="serverList.length ? 'min-h-screen' : 'min-h-[calc(100vh-4.5rem)]'"
 	>
 		<ServersGuestPlanModal
--- a/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
+++ b/packages/ui/src/layouts/wrapped/hosting/manage/root.vue
@@ -1,7 +1,7 @@
 <template>
 	<div
 		v-if="filteredNotices.length > 0"
-		class="experimental-styles-within relative mx-auto mb-4 flex w-full min-w-0 flex-col gap-3 px-6"
+		class="relative mx-auto mb-4 flex w-full min-w-0 flex-col gap-3 px-6"
 		:class="{
 			'max-w-[1280px]': isNuxt,
 		}"
@@ -99,7 +99,7 @@
 	<div
 		v-else-if="serverData"
 		data-pyro-server-manager-root
-		class="experimental-styles-within relative mx-auto box-border flex w-full min-w-0 flex-col gap-4 px-6 transition-all duration-300"
+		class="relative mx-auto box-border flex w-full min-w-0 flex-col gap-4 px-6 transition-all duration-300"
 		:style="{
 			'--server-bg-image': serverImage
 				? `url(${serverImage})`
@@ -144,7 +144,7 @@
 								</button>
 							</ButtonStyled>
 							<template #popper>
-								<div class="experimental-styles-within grid grid-cols-[min-content] gap-1">
+								<div class="grid grid-cols-[min-content] gap-1">
 									<div class="flex min-w-48 items-center justify-between gap-8">
 										<h3 class="m-0 whitespace-nowrap text-base font-bold text-contrast">
 											{{ formatMessage(settingsHintMessages.title) }}
@@ -321,7 +321,7 @@
 	</div>
 	<div
 		v-if="showAdvancedDebugInfo"
-		class="experimental-styles-within relative mx-auto mt-6 box-border w-full min-w-0 max-w-[1280px] px-6"
+		class="relative mx-auto mt-6 box-border w-full min-w-0 max-w-[1280px] px-6"
 	>
 		<h2 class="m-0 text-lg font-extrabold text-contrast">Server data</h2>
 		<pre class="markdown-body w-full overflow-auto rounded-2xl bg-bg-raised p-4 text-sm">{{