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/components/base/Avatar.vue
+++ b/packages/ui/src/components/base/Avatar.vue
@@ -2,7 +2,7 @@
 	<img
 		v-if="src && !failed"
 		ref="img"
-		class="`experimental-styles-within avatar shrink-0"
+		class="avatar shrink-0"
 		:style="`--_size: ${cssSize}`"
 		:class="{
 			circle: circle,
@@ -18,7 +18,7 @@
 	/>
 	<svg
 		v-else
-		class="`experimental-styles-within avatar shrink-0"
+		class="avatar shrink-0"
 		:style="`--_size: ${cssSize}${tint ? `;--_tint:oklch(50% 75% ${tint})` : ''}`"
 		:class="{
 			tint: tint,
--- a/packages/ui/src/components/base/Card.vue
+++ b/packages/ui/src/components/base/Card.vue
@@ -2,7 +2,7 @@
 import { DropdownIcon } from '@modrinth/assets'
 import { reactive } from 'vue'

-import Button from './Button.vue'
+import ButtonStyled from './ButtonStyled.vue'

 const props = defineProps({
 	collapsible: {
@@ -33,9 +33,11 @@ function toggleCollapsed() {
 		<div v-if="!!$slots.header || collapsible" class="header">
 			<slot name="header"></slot>
 			<div v-if="collapsible" class="btn-group">
-				<Button :action="toggleCollapsed">
-					<DropdownIcon :style="{ transform: `rotate(${state.collapsed ? 0 : 180}deg)` }" />
-				</Button>
+				<ButtonStyled circular>
+					<button @click="toggleCollapsed">
+						<DropdownIcon :style="{ transform: `rotate(${state.collapsed ? 0 : 180}deg)` }" />
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 		<slot v-if="!state.collapsed" />
--- a/packages/ui/src/components/base/JoinedButtons.vue
+++ b/packages/ui/src/components/base/JoinedButtons.vue
@@ -1,21 +1,16 @@
 <template>
 	<div class="joined-buttons">
-		<ButtonStyled
-			:color="color"
-			:size="size"
-			:class="{ 'joined-buttons__primary--muted': primaryMuted }"
-		>
-			<button :disabled="primaryDisabledResolved" @click="handlePrimaryAction">
+		<ButtonStyled :color="color" :size="size">
+			<button
+				:class="{ 'joined-buttons__primary--muted': primaryMuted }"
+				:disabled="primaryDisabledResolved"
+				@click="handlePrimaryAction"
+			>
 				<component :is="primaryAction.icon" v-if="primaryAction.icon" aria-hidden="true" />
 				{{ primaryAction.label }}
 			</button>
 		</ButtonStyled>
-		<ButtonStyled
-			v-if="dropdownActions.length > 0"
-			:color="color"
-			:size="size"
-			class="joined-buttons__dropdown"
-		>
+		<ButtonStyled v-if="dropdownActions.length > 0" :color="color" :size="size">
 			<OverflowMenu
 				class="btn-dropdown-animation !w-10"
 				:options="dropdownOptions"
--- a/packages/ui/src/components/base/MarkdownEditor.vue
+++ b/packages/ui/src/components/base/MarkdownEditor.vue
@@ -43,19 +43,23 @@
 					v-html="renderHighlightedString(linkMarkdown)"
 				/>
 			</div>
-			<div class="input-group push-right">
-				<Button :action="() => linkModal?.hide()"><XIcon /> Cancel</Button>
-				<Button
-					color="primary"
-					:disabled="!!linkValidationErrorMessage || !linkUrl"
-					:action="
-						() => {
-							if (editor) markdownCommands.replaceSelection(editor, linkMarkdown)
-							linkModal?.hide()
-						}
-					"
-					><PlusIcon /> Insert</Button
-				>
+			<div class="flex gap-2 justify-end mt-4">
+				<ButtonStyled type="outlined">
+					<button @click="() => linkModal?.hide()"><XIcon /> Cancel</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button
+						:disabled="!!linkValidationErrorMessage || !linkUrl"
+						@click="
+							() => {
+								if (editor) markdownCommands.replaceSelection(editor, linkMarkdown)
+								linkModal?.hide()
+							}
+						"
+					>
+						<PlusIcon /> Insert
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 	</NewModal>
@@ -125,20 +129,23 @@
 					v-html="renderHighlightedString(imageMarkdown)"
 				/>
 			</div>
-			<div class="input-group push-right">
-				<Button :action="() => imageModal?.hide()"><XIcon /> Cancel</Button>
-				<Button
-					color="primary"
-					:disabled="!canInsertImage"
-					:action="
-						() => {
-							if (editor) markdownCommands.replaceSelection(editor, imageMarkdown)
-							imageModal?.hide()
-						}
-					"
-				>
-					<PlusIcon /> Insert
-				</Button>
+			<div class="flex gap-2 justify-end mt-4">
+				<ButtonStyled type="outlined">
+					<button @click="() => imageModal?.hide()"><XIcon /> Cancel</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button
+						:disabled="!canInsertImage"
+						@click="
+							() => {
+								if (editor) markdownCommands.replaceSelection(editor, imageMarkdown)
+								imageModal?.hide()
+							}
+						"
+					>
+						<PlusIcon /> Insert
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 	</NewModal>
@@ -176,20 +183,23 @@
 					v-html="renderHighlightedString(videoMarkdown)"
 				/>
 			</div>
-			<div class="input-group push-right">
-				<Button :action="() => videoModal?.hide()"><XIcon /> Cancel</Button>
-				<Button
-					color="primary"
-					:disabled="!!linkValidationErrorMessage || !linkUrl"
-					:action="
-						() => {
-							if (editor) markdownCommands.replaceSelection(editor, videoMarkdown)
-							videoModal?.hide()
-						}
-					"
-				>
-					<PlusIcon /> Insert
-				</Button>
+			<div class="flex gap-2 justify-end mt-4">
+				<ButtonStyled type="outlined">
+					<button @click="() => videoModal?.hide()"><XIcon /> Cancel</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button
+						:disabled="!!linkValidationErrorMessage || !linkUrl"
+						@click="
+							() => {
+								if (editor) markdownCommands.replaceSelection(editor, videoMarkdown)
+								videoModal?.hide()
+							}
+						"
+					>
+						<PlusIcon /> Insert
+					</button>
+				</ButtonStyled>
 			</div>
 		</div>
 	</NewModal>
@@ -202,16 +212,17 @@
 				>
 					<div class="divider"></div>
 					<template v-for="button in buttonGroup.buttons" :key="button.label">
-						<Button
-							v-tooltip="button.label"
-							icon-only
-							:aria-label="button.label"
-							:class="{ 'mobile-hidden-group': !!buttonGroup.hideOnMobile }"
-							:action="() => button.action(editor)"
-							:disabled="previewMode || disabled"
-						>
-							<component :is="button.icon" />
-						</Button>
+						<ButtonStyled circular>
+							<button
+								v-tooltip="button.label"
+								:aria-label="button.label"
+								:class="{ 'mobile-hidden-group': !!buttonGroup.hideOnMobile }"
+								:disabled="previewMode || disabled"
+								@click="() => button.action(editor)"
+							>
+								<component :is="button.icon" />
+							</button>
+						</ButtonStyled>
 					</template>
 				</template>
 				<div class="preview">
@@ -288,7 +299,7 @@ import { renderHighlightedString } from '@modrinth/utils/highlightjs'
 import { type Component, computed, onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue'

 import NewModal from '../modal/NewModal.vue'
-import Button from './Button.vue'
+import ButtonStyled from './ButtonStyled.vue'
 import Chips from './Chips.vue'
 import FileInput from './FileInput.vue'
 import StyledInput from './StyledInput.vue'
--- a/packages/ui/src/components/base/MultiStageModal.vue
+++ b/packages/ui/src/components/base/MultiStageModal.vue
@@ -74,7 +74,6 @@
 			>
 				<ButtonStyled v-if="leftButtonConfig" type="outlined">
 					<button
-						class="!border-surface-5 !shadow-none"
 						:class="leftButtonConfig.buttonClass"
 						:disabled="leftButtonConfig.disabled"
 						@click="leftButtonConfig.onClick"
--- a/packages/ui/src/components/base/OptionGroup.vue
+++ b/packages/ui/src/components/base/OptionGroup.vue
@@ -1,7 +1,7 @@
 <template>
 	<nav
 		ref="scrollContainer"
-		class="card-shadow experimental-styles-within relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
+		class="card-shadow relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
 	>
 		<button
 			v-for="(option, index) in options"
--- a/packages/ui/src/components/base/TeleportOverflowMenu.vue
+++ b/packages/ui/src/components/base/TeleportOverflowMenu.vue
@@ -26,7 +26,7 @@
 					v-if="isOpen"
 					ref="menuRef"
 					data-pyro-telepopover-root
-					class="experimental-styles-within fixed isolate z-[9999] flex w-fit flex-col gap-2 overflow-hidden rounded-2xl border-[1px] border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
+					class="fixed isolate z-[9999] flex w-fit flex-col gap-2 overflow-hidden rounded-2xl border-[1px] border-solid border-surface-5 bg-bg-raised p-2 shadow-lg"
 					:style="menuStyle"
 					role="menu"
 					tabindex="-1"