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>

apps/app-frontend/src/pages/Skins.vue

@@ -9,7 +9,6 @@ import {
 	UpdatedIcon,
 } from '@modrinth/assets'
 import {
-	Button,
 	ButtonStyled,
 	ConfirmModal,
 	injectNotificationManager,
@@ -383,25 +382,25 @@ await Promise.all([loadCapes(), loadSkins(), loadCurrentUser()])
 						@select="changeSkin(skin)"
 					>
 						<template #overlay-buttons>
-							<Button
-								color="green"
-								aria-label="Edit skin"
-								class="pointer-events-auto"
-								@click.stop="(e: MouseEvent) => editSkinModal?.show(e, skin)"
-							>
-								<EditIcon /> Edit
-							</Button>
-							<Button
-								v-show="!skin.is_equipped"
-								v-tooltip="'Delete skin'"
-								aria-label="Delete skin"
-								color="red"
-								class="!rounded-[100%] pointer-events-auto"
-								icon-only
-								@click.stop="() => confirmDeleteSkin(skin)"
-							>
-								<TrashIcon />
-							</Button>
+							<ButtonStyled color="brand">
+								<button
+									aria-label="Edit skin"
+									class="pointer-events-auto"
+									@click.stop="(e: MouseEvent) => editSkinModal?.show(e, skin)"
+								>
+									<EditIcon /> Edit
+								</button>
+							</ButtonStyled>
+							<ButtonStyled v-show="!skin.is_equipped" circular color="red">
+								<button
+									v-tooltip="'Delete skin'"
+									aria-label="Delete skin"
+									class="!rounded-[100%] pointer-events-auto"
+									@click.stop="() => confirmDeleteSkin(skin)"
+								>
+									<TrashIcon />
+								</button>
+							</ButtonStyled>
 						</template>
 					</SkinButton>
 				</div>

apps/app-frontend/src/pages/instance/Worlds.vue

@@ -55,7 +55,7 @@
 				/>
 				<div class="flex gap-2">
 					<ButtonStyled type="outlined">
-						<button class="!h-10 !border-button-bg !border-[1px]" @click="addServerModal?.show()">
+						<button class="!h-10" @click="addServerModal?.show()">
 							<PlusIcon class="size-5" />
 							{{ formatMessage(messages.addServer) }}
 						</button>
@@ -141,7 +141,7 @@
 		>
 			<template #actions>
 				<ButtonStyled type="outlined">
-					<button class="!h-10 !border-button-bg !border-[1px]" @click="addServerModal?.show()">
+					<button class="!h-10" @click="addServerModal?.show()">
 						<PlusIcon class="size-5" />
 						{{ formatMessage(messages.addServer) }}
 					</button>

apps/app-frontend/src/pages/library/Index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { PlusIcon } from '@modrinth/assets'
-import { Button, injectNotificationManager, NavTabs } from '@modrinth/ui'
+import { ButtonStyled, injectNotificationManager, NavTabs } from '@modrinth/ui'
 import { inject, onUnmounted, ref, shallowRef } from 'vue'
 import { useRoute } from 'vue-router'
 
@@ -55,10 +55,12 @@ onUnmounted(() => {
 				<NewInstanceImage />
 			</div>
 			<h3>No instances found</h3>
-			<Button color="primary" :disabled="offline" @click="showCreationModal?.()">
-				<PlusIcon />
-				Create new instance
-			</Button>
+			<ButtonStyled color="brand">
+				<button :disabled="offline" @click="showCreationModal?.()">
+					<PlusIcon />
+					Create new instance
+				</button>
+			</ButtonStyled>
 		</div>
 	</div>
 </template>

apps/app-frontend/src/pages/project/Gallery.vue

@@ -39,35 +39,40 @@
 				</div>
 				<div class="controls">
 					<div class="buttons">
-						<Button class="close" icon-only @click="hideImage">
-							<XIcon aria-hidden="true" />
-						</Button>
-						<a
-							class="open btn icon-only"
-							target="_blank"
-							:href="
-								expandedGalleryItem.raw_url
-									? expandedGalleryItem.raw_url
-									: 'https://cdn.modrinth.com/placeholder-banner.svg'
-							"
-						>
-							<ExternalIcon aria-hidden="true" />
-						</a>
-						<Button icon-only @click="zoomedIn = !zoomedIn">
-							<ExpandIcon v-if="!zoomedIn" aria-hidden="true" />
-							<ContractIcon v-else aria-hidden="true" />
-						</Button>
-						<Button
-							v-if="filteredGallery.length > 1"
-							class="previous"
-							icon-only
-							@click="previousImage()"
-						>
-							<LeftArrowIcon aria-hidden="true" />
-						</Button>
-						<Button v-if="filteredGallery.length > 1" class="next" icon-only @click="nextImage()">
-							<RightArrowIcon aria-hidden="true" />
-						</Button>
+						<ButtonStyled circular>
+							<button class="close" @click="hideImage">
+								<XIcon aria-hidden="true" />
+							</button>
+						</ButtonStyled>
+						<ButtonStyled circular>
+							<a
+								class="open btn icon-only"
+								target="_blank"
+								:href="
+									expandedGalleryItem.raw_url
+										? expandedGalleryItem.raw_url
+										: 'https://cdn.modrinth.com/placeholder-banner.svg'
+								"
+							>
+								<ExternalIcon aria-hidden="true" />
+							</a>
+						</ButtonStyled>
+						<ButtonStyled circular>
+							<button @click="zoomedIn = !zoomedIn">
+								<ExpandIcon v-if="!zoomedIn" aria-hidden="true" />
+								<ContractIcon v-else aria-hidden="true" />
+							</button>
+						</ButtonStyled>
+						<ButtonStyled v-if="filteredGallery.length > 1" circular>
+							<button class="previous" @click="previousImage()">
+								<LeftArrowIcon aria-hidden="true" />
+							</button>
+						</ButtonStyled>
+						<ButtonStyled v-if="filteredGallery.length > 1" circular>
+							<button class="next" @click="nextImage()">
+								<RightArrowIcon aria-hidden="true" />
+							</button>
+						</ButtonStyled>
 					</div>
 				</div>
 			</div>
@@ -85,7 +90,7 @@ import {
 	RightArrowIcon,
 	XIcon,
 } from '@modrinth/assets'
-import { Button, Card, useFormatDateTime } from '@modrinth/ui'
+import { ButtonStyled, Card, useFormatDateTime } from '@modrinth/ui'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 
 import { hide_ads_window, show_ads_window } from '@/helpers/ads.js'

apps/app-frontend/src/pages/project/Version.vue

@@ -14,34 +14,38 @@
 				<h2>{{ version.name }}</h2>
 			</div>
 			<div class="button-group">
-				<Button
-					color="primary"
-					:action="() => install(version.id)"
-					:disabled="installing || (installed && installedVersion === version.id)"
-				>
-					<DownloadIcon v-if="!installed" />
-					<SwapIcon v-else-if="installedVersion !== version.id" />
-					<CheckIcon v-else />
-					{{
-						installing
-							? 'Installing...'
-							: installed && installedVersion === version.id
-								? 'Installed'
-								: 'Install'
-					}}
-				</Button>
-				<Button>
-					<ReportIcon />
-					Report
-				</Button>
-				<a
-					:href="`https://modrinth.com/mod/${route.params.id}/version/${route.params.version}`"
-					rel="external"
-					class="btn"
-				>
-					<ExternalIcon />
-					Modrinth website
-				</a>
+				<ButtonStyled color="brand">
+					<button
+						:disabled="installing || (installed && installedVersion === version.id)"
+						@click="() => install(version.id)"
+					>
+						<DownloadIcon v-if="!installed" />
+						<SwapIcon v-else-if="installedVersion !== version.id" />
+						<CheckIcon v-else />
+						{{
+							installing
+								? 'Installing...'
+								: installed && installedVersion === version.id
+									? 'Installed'
+									: 'Install'
+						}}
+					</button>
+				</ButtonStyled>
+				<ButtonStyled>
+					<button>
+						<ReportIcon />
+						Report
+					</button>
+				</ButtonStyled>
+				<ButtonStyled>
+					<a
+						:href="`https://modrinth.com/mod/${route.params.id}/version/${route.params.version}`"
+						rel="external"
+					>
+						Modrinth website
+						<ExternalIcon />
+					</a>
+				</ButtonStyled>
 			</div>
 		</Card>
 		<div class="version-container">
@@ -68,16 +72,13 @@
 								<span v-if="file.primary" class="primary-label"> Primary </span>
 							</span>
 						</span>
-						<Button
-							v-if="project.project_type !== 'modpack' || file.primary"
-							class="download"
-							:action="() => install(version.id)"
-							:disabled="installed"
-						>
-							<DownloadIcon v-if="!installed" />
-							<CheckIcon v-else />
-							{{ installed ? 'Installed' : 'Install' }}
-						</Button>
+						<ButtonStyled v-if="project.project_type !== 'modpack' || file.primary" color="brand">
+							<button class="download" :disabled="installed" @click="() => install(version.id)">
+								<DownloadIcon v-if="!installed" />
+								<CheckIcon v-else />
+								{{ installed ? 'Installed' : 'Install' }}
+							</button>
+						</ButtonStyled>
 					</Card>
 				</Card>
 				<Card v-if="displayDependencies.length > 0">
@@ -168,7 +169,15 @@
 
 <script setup>
 import { CheckIcon, DownloadIcon, ExternalIcon, FileIcon, ReportIcon } from '@modrinth/assets'
-import { Avatar, Badge, Breadcrumbs, Button, Card, CopyCode, useFormatDateTime } from '@modrinth/ui'
+import {
+	Avatar,
+	Badge,
+	Breadcrumbs,
+	ButtonStyled,
+	Card,
+	CopyCode,
+	useFormatDateTime,
+} from '@modrinth/ui'
 import { formatBytes, renderString } from '@modrinth/utils'
 import { computed, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'

apps/app-frontend/src/pages/project/Versions.vue

@@ -134,10 +134,6 @@ const [loaders, gameVersions] = await Promise.all([
 	display: flex;
 	gap: 0.5rem;
 	flex-grow: 1;
-
-	.multiselect {
-		flex-grow: 1;
-	}
 }
 
 .card-row {