revert bad translation nuke

# Conflicts:
#	apps/frontend/src/layouts/default.vue

apps/frontend/src/layouts/default.vue

@@ -88,19 +88,19 @@
 			</div>
 			<div
 				class="col-span-2 row-start-2 flex justify-center lg:col-span-1 lg:row-start-auto"
-				:class="{ 'gap-4': !flags.projectTypesPrimaryNav }"
+				:class="{ 'gap-4': !flags.projectTypesPrimaryNav, 'gap-1': flags.projectTypesPrimaryNav }"
 			>
 				<template v-if="flags.projectTypesPrimaryNav">
 					<ButtonLink
 						type="quiet"
 						to="/discover/mods"
+						size="sm"
 						:class="
-							route.name === 'discover-mods' || route.path.startsWith('/mod/')
-								? (route.name === 'discover-mods' ? 'main-nav-primary' : 'main-nav-secondary') ===
-									'main-nav-primary'
-									? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
-									: '!bg-[var(--color-button-bg)] !text-contrast'
-								: ''
+							route.path.startsWith('/discover/mods')
+								? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
+								: route.path.startsWith('/mod/')
+									? '!bg-[var(--color-button-bg)] !text-contrast'
+									: ''
 						"
 					>
 						<BoxIcon aria-hidden="true" />
@@ -109,14 +109,13 @@
 					<ButtonLink
 						type="quiet"
 						to="/discover/resourcepacks"
+						size="sm"
 						:class="
-							route.name === 'discover-resourcepacks' || route.path.startsWith('/resourcepack/')
-								? (route.name === 'discover-resourcepacks'
-										? 'main-nav-primary'
-										: 'main-nav-secondary') === 'main-nav-primary'
-									? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
-									: '!bg-[var(--color-button-bg)] !text-contrast'
-								: ''
+							route.path.startsWith('/discover/resourcepacks')
+								? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
+								: route.path.startsWith('/resourcepack/')
+									? '!bg-[var(--color-button-bg)] !text-contrast'
+									: ''
 						"
 					>
 						<PaintbrushIcon aria-hidden="true" />
@@ -125,14 +124,13 @@
 					<ButtonLink
 						type="quiet"
 						to="/discover/datapacks"
+						size="sm"
 						:class="
-							route.name === 'discover-datapacks' || route.path.startsWith('/datapack/')
-								? (route.name === 'discover-datapacks'
-										? 'main-nav-primary'
-										: 'main-nav-secondary') === 'main-nav-primary'
-									? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
-									: '!bg-[var(--color-button-bg)] !text-contrast'
-								: ''
+							route.path.startsWith('/discover/datapacks')
+								? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
+								: route.path.startsWith('/datapack/')
+									? '!bg-[var(--color-button-bg)] !text-contrast'
+									: ''
 						"
 					>
 						<BracesIcon aria-hidden="true" />
@@ -140,15 +138,14 @@
 					</ButtonLink>
 					<ButtonLink
 						type="quiet"
+						size="sm"
 						to="/discover/shaders"
 						:class="
-							route.name === 'discover-shaders' || route.path.startsWith('/shader/')
-								? (route.name === 'discover-shaders'
-										? 'main-nav-primary'
-										: 'main-nav-secondary') === 'main-nav-primary'
-									? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
-									: '!bg-[var(--color-button-bg)] !text-contrast'
-								: ''
+							route.path.startsWith('/discover/shaders')
+								? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
+								: route.path.startsWith('/shader/')
+									? '!bg-[var(--color-button-bg)] !text-contrast'
+									: ''
 						"
 					>
 						<GlassesIcon aria-hidden="true" />
@@ -173,14 +170,13 @@
 					<ButtonLink
 						type="quiet"
 						to="/discover/plugins"
+						size="sm"
 						:class="
-							route.name === 'discover-plugins' || route.path.startsWith('/plugin/')
-								? (route.name === 'discover-plugins'
-										? 'main-nav-primary'
-										: 'main-nav-secondary') === 'main-nav-primary'
-									? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
-									: '!bg-[var(--color-button-bg)] !text-contrast'
-								: ''
+							route.path.startsWith('/discover/plugins')
+								? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
+								: route.path.startsWith('/plugin/')
+									? '!bg-[var(--color-button-bg)] !text-contrast'
+									: ''
 						"
 					>
 						<PlugIcon aria-hidden="true" />
@@ -189,14 +185,13 @@
 					<ButtonLink
 						type="quiet"
 						to="/discover/servers"
+						size="sm"
 						:class="
-							route.name === 'discover-servers' || route.path.startsWith('/server/')
-								? (route.name === 'discover-servers'
-										? 'main-nav-primary'
-										: 'main-nav-secondary') === 'main-nav-primary'
-									? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
-									: '!bg-[var(--color-button-bg)] !text-contrast'
-								: ''
+							route.path.startsWith('/discover/servers')
+								? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
+								: route.path.startsWith('/server/')
+									? '!bg-[var(--color-button-bg)] !text-contrast'
+									: ''
 						"
 					>
 						<ServerIcon aria-hidden="true" />
@@ -208,6 +203,7 @@
 						type="quiet"
 						:label="formatMessage(commonMessages.moreOptionsButton)"
 						hoverable
+						:icon-only="false"
 						:options="[
 							{
 								id: 'mods',
@@ -253,7 +249,6 @@
 							},
 						]"
 						:class="[
-							'!w-auto !rounded-xl !px-2.5',
 							isDiscovering
 								? '!bg-[var(--color-button-bg-selected)] !text-[var(--color-button-text-selected)] [&>svg]:!text-[var(--color-button-text-selected)]'
 								: isDiscoveringSubpage
@@ -368,7 +363,7 @@
 					type="quiet"
 					:icon-only="false"
 					:label="formatMessage(messages.createNew)"
-					class="btn-dropdown-animation !gap-1 !rounded-xl !px-2"
+					class="btn-dropdown-animation"
 					:options="[
 						{
 							id: 'review-projects',
@@ -501,7 +496,7 @@
 					type="quiet"
 					:icon-only="false"
 					:label="formatMessage(messages.createNew)"
-					class="btn-dropdown-animation !gap-1 !rounded-xl !px-2"
+					class="btn-dropdown-animation"
 					:options="[
 						{
 							id: 'new-project',
@@ -614,7 +609,7 @@
 					<ButtonLink
 						v-tooltip="formatMessage(commonMessages.settingsLabel)"
 						to="/settings"
-						class="!w-9 !rounded-full !px-0"
+						icon-only
 					>
 						<SettingsIcon :aria-label="formatMessage(commonMessages.settingsLabel)" />
 					</ButtonLink>

apps/frontend/src/pages/[type]/[project].vue

@@ -146,7 +146,7 @@
 								color="brand"
 								size="xl"
 								:to="`${projectPath}/settings`"
-								class="!w-12 !rounded-full !px-0 !font-bold lg:!hidden"
+								class="lg:!hidden"
 							>
 								<SettingsIcon />
 							</ButtonLink>
@@ -156,7 +156,7 @@
 								color="brand"
 								size="xl"
 								:to="`${projectPath}/settings`"
-								class="!font-bold max-lg:!hidden"
+								class="max-lg:!hidden"
 							>
 								<SettingsIcon />
 								{{ formatMessage(messages.editProject) }}
@@ -501,12 +501,15 @@
 
 <script setup>
 import {
+	BulletListIcon,
 	ChartIcon,
 	ChevronRightIcon,
 	ClipboardCopyIcon,
 	DownloadIcon,
 	FolderSearchIcon,
 	HeartIcon,
+	ImagesIcon,
+	InfoIcon,
 	ListIcon,
 	MoreVerticalIcon,
 	PlayIcon,
@@ -515,6 +518,7 @@ import {
 	ScanEyeIcon,
 	ServerPlusIcon,
 	SettingsIcon,
+	VersionIcon,
 	XIcon,
 } from '@modrinth/assets'
 import { getMarginTarget, moderationSettings } from '@modrinth/moderation'
@@ -2021,15 +2025,18 @@ const navLinks = computed(() => {
 	return [
 		{
 			label: formatMessage(messages.descriptionTab),
+			icon: InfoIcon,
 			href: withInstallContextQuery(projectUrl),
 		},
 		{
 			label: formatMessage(messages.galleryTab),
+			icon: ImagesIcon,
 			href: withInstallContextQuery(`${projectUrl}/gallery`),
 			shown: galleryCount > 0 || !!currentMember.value,
 		},
 		{
 			label: formatMessage(messages.changelogTab),
+			icon: BulletListIcon,
 			href: withInstallContextQuery(`${projectUrl}/changelog`),
 			shown:
 				hasVersions.value && projectV3Loaded.value && projectV3.value?.minecraft_server == null,
@@ -2037,6 +2044,7 @@ const navLinks = computed(() => {
 		},
 		{
 			label: formatMessage(messages.versionsTab),
+			icon: VersionIcon,
 			href: withInstallContextQuery(`${projectUrl}/versions`),
 			shown:
 				(hasVersions.value || !!currentMember.value) &&
@@ -2047,6 +2055,7 @@ const navLinks = computed(() => {
 		},
 		{
 			label: formatMessage(messages.moderationTab),
+			icon: ScaleIcon,
 			href: withInstallContextQuery(`${projectUrl}/moderation`),
 			shown: !!currentMember.value,
 		},

apps/frontend/src/pages/[type]/[project]/settings/tags.vue

@@ -390,10 +390,10 @@ const toggleFeatured = (tag: string) => {
 				:key="group.id"
 				class="rounded-2xl border border-solid border-surface-4 bg-surface-3 p-4"
 			>
-				<h3 class="mb-1 mt-0 text-base font-semibold text-contrast">
+				<h3 class="mb-1 mt-0 text-lg font-semibold text-contrast">
 					{{ group.title }}
 				</h3>
-				<p v-if="group.description" class="mb-3 mt-0 text-sm">
+				<p v-if="group.description" class="mb-3 mt-0">
 					{{ group.description }}
 				</p>
 				<div class="grid grid-cols-2 gap-x-4 gap-y-2 sm:grid-cols-4">
@@ -413,7 +413,7 @@ const toggleFeatured = (tag: string) => {
 
 			<div class="rounded-2xl border border-solid border-surface-4 bg-surface-3 p-4">
 				<div class="mb-1 flex items-center gap-2">
-					<h3 class="m-0 text-base font-semibold text-contrast">
+					<h3 class="m-0 text-lg font-semibold text-contrast">
 						{{ formatMessage(messages.featuredTags) }}
 					</h3>
 					<TagItem
@@ -427,10 +427,10 @@ const toggleFeatured = (tag: string) => {
 						{{ current.featuredTags.length }}/{{ MAX_FEATURED_TAGS }}
 					</TagItem>
 				</div>
-				<p class="mb-3 mt-0 text-sm">
+				<p class="mb-3 mt-0">
 					{{ formatMessage(messages.featuredTagsDescription) }}
 				</p>
-				<p v-if="current.selectedTags.length < 1" class="m-0 text-sm text-secondary">
+				<p v-if="current.selectedTags.length < 1" class="m-0 text-secondary">
 					{{ formatMessage(messages.selectAtLeastOneCategory) }}
 				</p>
 				<div v-else class="grid grid-cols-2 gap-x-4 gap-y-2 sm:grid-cols-4">

apps/frontend/src/pages/hosting/index.vue

@@ -42,7 +42,7 @@
 					</h1>
 				</div>
 				<h2
-					class="relative m-0 max-w-2xl text-base font-normal leading-[155%] text-secondary md:text-[1.2rem]"
+					class="relative m-0 max-w-2xl text-base font-normal leading-[155%] text-primary md:text-[1.2rem]"
 				>
 					{{ formatMessage(messages.hostingDescription) }}
 				</h2>
@@ -118,7 +118,7 @@
 					{{ formatMessage(messages.whyHeading) }}
 				</h1>
 				<h2
-					class="relative m-0 max-w-2xl text-base font-normal leading-[155%] text-secondary md:text-[18px]"
+					class="relative m-0 max-w-2xl text-base font-normal leading-[155%] text-primary md:text-[18px]"
 				>
 					{{ formatMessage(messages.whyDescription) }}
 				</h2>
@@ -148,7 +148,7 @@
 							<circle cx="17.5" cy="17.5" r="3.5" />
 						</svg>
 						<h2 class="m-0 text-lg font-bold">{{ formatMessage(messages.whereModsAre) }}</h2>
-						<h3 class="m-0 text-base font-normal text-secondary">
+						<h3 class="m-0 text-base font-normal text-primary">
 							{{ formatMessage(messages.whereModsAreDescription) }}
 						</h3>
 					</div>
@@ -156,7 +156,7 @@
 					<div class="relative flex flex-col gap-4 rounded-2xl bg-bg p-6 text-left md:p-12">
 						<TagIcon tag="fabric" enforce-type="loader" class="size-8 text-brand" />
 						<h2 class="m-0 text-lg font-bold">{{ formatMessage(messages.yourFavoriteMods) }}</h2>
-						<h3 class="m-0 text-base font-normal text-secondary">
+						<h3 class="m-0 text-base font-normal text-primary">
 							{{ formatMessage(messages.yourFavoriteModsDescription) }}
 						</h3>
 					</div>
@@ -188,7 +188,7 @@
 							<path d="M14 8h.01" />
 						</svg>
 						<h2 class="m-0 text-lg font-bold">{{ formatMessage(messages.allOnModrinth) }}</h2>
-						<h3 class="m-0 text-base font-normal text-secondary">
+						<h3 class="m-0 text-base font-normal text-primary">
 							{{ formatMessage(messages.allOnModrinthDescription) }}
 						</h3>
 					</div>
@@ -212,7 +212,7 @@
 						<h2 class="m-0 text-lg font-bold">
 							{{ formatMessage(messages.modernReliableHosting) }}
 						</h2>
-						<h3 class="m-0 text-base font-normal text-secondary">
+						<h3 class="m-0 text-base font-normal text-primary">
 							<IntlFormatted :message-id="messages.modernReliableHostingDescription">
 								<template #contrast="{ children }">
 									<span class="text-contrast"><component :is="() => children" /></span>
@@ -224,7 +224,7 @@
 					<div class="relative flex flex-col gap-4 rounded-2xl bg-bg p-6 text-left md:p-12">
 						<ServerIcon class="size-8 text-brand" />
 						<h2 class="m-0 text-lg font-bold">{{ formatMessage(messages.consistentlyFast) }}</h2>
-						<h3 class="m-0 text-base font-normal text-secondary">
+						<h3 class="m-0 text-base font-normal text-primary">
 							{{ formatMessage(messages.consistentlyFastDescription) }}
 						</h3>
 					</div>
@@ -246,7 +246,7 @@
 					{{ formatMessage(messages.includedHeading) }}
 				</h1>
 				<h2
-					class="relative m-0 max-w-xl text-base font-normal leading-[155%] text-secondary md:text-[18px]"
+					class="relative m-0 max-w-xl text-base font-normal leading-[155%] text-primary md:text-[18px]"
 				>
 					{{ formatMessage(messages.includedDescription) }}
 				</h2>
@@ -275,7 +275,7 @@
 								<path d="M2 12h20" />
 							</svg>
 							<h2 class="m-0 text-lg font-bold">{{ formatMessage(messages.customUrl) }}</h2>
-							<h3 class="m-0 text-base font-normal text-secondary">
+							<h3 class="m-0 text-base font-normal text-primary">
 								<IntlFormatted :message-id="messages.customUrlDescription">
 									<template #contrast="{ children }">
 										<span class="text-contrast"><component :is="() => children" /></span>
@@ -308,7 +308,7 @@
 								<path d="m8 17 4-4 4 4" />
 							</svg>
 							<h2 class="m-0 text-lg font-bold">{{ formatMessage(messages.backupsIncluded) }}</h2>
-							<h3 class="m-0 text-base font-normal text-secondary">
+							<h3 class="m-0 text-base font-normal text-primary">
 								{{ formatMessage(messages.backupsIncludedDescription) }}
 							</h3>
 						</div>
@@ -343,7 +343,7 @@
 						<h2 class="m-0 text-lg font-bold">
 							{{ formatMessage(messages.powerfulConsole) }}
 						</h2>
-						<h3 class="m-0 text-base font-normal text-secondary">
+						<h3 class="m-0 text-base font-normal text-primary">
 							{{ formatMessage(messages.powerfulConsoleDescription) }}
 						</h3>
 					</div>
@@ -370,7 +370,7 @@
 							<path d="m15 18-2-2" />
 						</svg>
 						<h2 class="m-0 text-lg font-bold">{{ formatMessage(messages.help) }}</h2>
-						<h3 class="m-0 text-base font-normal text-secondary">
+						<h3 class="m-0 text-base font-normal text-primary">
 							{{ formatMessage(messages.helpDescription) }}
 						</h3>
 					</div>
@@ -380,14 +380,14 @@
 					<div class="relative flex flex-col gap-4 rounded-2xl bg-bg p-6 text-left md:p-12">
 						<TransferIcon class="size-8 text-brand" />
 						<h2 class="m-0 text-lg font-bold">{{ formatMessage(messages.sftpAccess) }}</h2>
-						<h3 class="m-0 text-base font-normal text-secondary">
+						<h3 class="m-0 text-base font-normal text-primary">
 							{{ formatMessage(messages.sftpAccessDescription) }}
 						</h3>
 					</div>
 					<div class="relative flex flex-col gap-4 rounded-2xl bg-bg p-6 text-left md:p-12">
 						<VersionIcon class="size-8 text-brand" />
 						<h2 class="m-0 text-lg font-bold">{{ formatMessage(messages.advancedNetworking) }}</h2>
-						<h3 class="m-0 text-base font-normal text-secondary">
+						<h3 class="m-0 text-base font-normal text-primary">
 							{{ formatMessage(messages.advancedNetworkingDescription) }}
 						</h3>
 					</div>

packages/assets/generated-icons.ts

@@ -63,6 +63,7 @@ import _BoxesIcon from './icons/boxes.svg?component'
 import _BracesIcon from './icons/braces.svg?component'
 import _BrushCleaningIcon from './icons/brush-cleaning.svg?component'
 import _BugIcon from './icons/bug.svg?component'
+import _BulletListIcon from './icons/bullet-list.svg?component'
 import _CalendarIcon from './icons/calendar.svg?component'
 import _CalendarArrowDownIcon from './icons/calendar-arrow-down.svg?component'
 import _CardIcon from './icons/card.svg?component'
@@ -77,6 +78,8 @@ import _ChevronDownIcon from './icons/chevron-down.svg?component'
 import _ChevronLeftIcon from './icons/chevron-left.svg?component'
 import _ChevronRightIcon from './icons/chevron-right.svg?component'
 import _ChevronUpIcon from './icons/chevron-up.svg?component'
+import _ChevronsDownUpIcon from './icons/chevrons-down-up.svg?component'
+import _ChevronsUpDownIcon from './icons/chevrons-up-down.svg?component'
 import _CircleAlertIcon from './icons/circle-alert.svg?component'
 import _CircleArrowRightIcon from './icons/circle-arrow-right.svg?component'
 import _CircleDashedIcon from './icons/circle-dashed.svg?component'
@@ -495,6 +498,7 @@ export const BoxesIcon = _BoxesIcon
 export const BracesIcon = _BracesIcon
 export const BrushCleaningIcon = _BrushCleaningIcon
 export const BugIcon = _BugIcon
+export const BulletListIcon = _BulletListIcon
 export const CalendarIcon = _CalendarIcon
 export const CalendarArrowDownIcon = _CalendarArrowDownIcon
 export const CardIcon = _CardIcon
@@ -509,6 +513,8 @@ export const ChevronDownIcon = _ChevronDownIcon
 export const ChevronLeftIcon = _ChevronLeftIcon
 export const ChevronRightIcon = _ChevronRightIcon
 export const ChevronUpIcon = _ChevronUpIcon
+export const ChevronsDownUpIcon = _ChevronsDownUpIcon
+export const ChevronsUpDownIcon = _ChevronsUpDownIcon
 export const CircleAlertIcon = _CircleAlertIcon
 export const CircleArrowRightIcon = _CircleArrowRightIcon
 export const CircleDashedIcon = _CircleDashedIcon

packages/assets/icons/bullet-list.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-list-icon lucide-list"><path d="M3 5h.01"/><path d="M3 12h.01"/><path d="M3 19h.01"/><path d="M8 5h13"/><path d="M8 12h13"/><path d="M8 19h13"/></svg>

packages/assets/icons/chevrons-down-up.svg

@@ -0,0 +1,16 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-chevrons-down-up"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m7 20 5-5 5 5" />
+  <path d="m7 4 5 5 5-5" />
+</svg>

packages/assets/icons/chevrons-up-down.svg

@@ -0,0 +1,16 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-chevrons-up-down"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m7 15 5 5 5-5" />
+  <path d="m7 9 5-5 5 5" />
+</svg>

packages/assets/styles/variables.scss

@@ -310,9 +310,9 @@ html {
 	--color-gray-950: #303136;
 	--color-gray: var(--color-gray-500);
 
-	--color-text-primary: #ffffff;
+	--color-text-primary: #ebebeb;
 	--color-text-default: #b0bac5;
-	--color-text-tertiary: #96a2b0;
+	--color-text-tertiary: #80878f;
 
 	// ===
 
@@ -330,7 +330,7 @@ html {
 	--color-base: var(--color-text-default);
 	--color-secondary: var(--color-text-tertiary);
 	--color-contrast: var(--color-text-primary);
-	--color-accent-contrast: #000000;
+	--color-accent-contrast: rgba(0, 0, 0, 0.9);
 
 	--color-red-highlight: rgba(255, 73, 110, 0.25);
 	--color-orange-highlight: rgba(255, 163, 71, 0.25);
@@ -346,7 +346,7 @@ html {
 	--color-purple-bg: rgba(199, 138, 255, 0.2);
 
 	--color-brand: var(--color-green);
-	--color-brand-highlight: rgba(27, 217, 106, 0.25);
+	--color-brand-highlight: rgba(27, 217, 106, 0.3);
 	--color-brand-shadow: rgba(27, 217, 106, 0.7);
 
 	--shadow-inset-lg: inset 0px -2px 2px hsla(221, 39%, 11%, 0.1);

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

@@ -90,7 +90,7 @@
 				<slot name="suffix"></slot>
 				<ChevronLeftIcon
 					v-if="showChevron"
-					class="size-5 shrink-0 transition-transform duration-150"
+					class="size-5 shrink-0 transition-transform text-secondary duration-150"
 					:class="isOpen ? (openDirection === 'down' ? 'rotate-90' : '-rotate-90') : '-rotate-90'"
 				/>
 			</div>

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

@@ -2,7 +2,7 @@
 	<nav
 		v-if="filteredLinks.length > 1"
 		ref="scrollContainer"
-		class="relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 text-sm font-bold"
+		class="relative flex w-fit overflow-x-auto rounded-full bg-bg-raised p-1 font-semibold"
 		:class="{ 'drop-shadow-xl border border-solid border-surface-4': mode === 'navigation' }"
 	>
 		<template v-if="mode === 'navigation'">
@@ -13,12 +13,17 @@
 				ref="tabLinkElements"
 				:replace="replace"
 				:to="query ? (link.href ? `?${query}=${link.href}` : '?') : link.href"
-				class="button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 focus:rounded-full"
+				class="button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2.5 focus:rounded-full"
 				:class="getSSRFallbackClasses(index)"
 				@mouseenter="link.onHover?.()"
 				@focus="link.onHover?.()"
 			>
-				<component :is="link.icon" v-if="link.icon" class="size-5" :class="getIconClasses(index)" />
+				<component
+					:is="link.icon"
+					v-if="link.icon"
+					class="size-5 hidden md:flex"
+					:class="getIconClasses(index)"
+				/>
 				<span class="text-nowrap" :class="getLabelClasses(index)">
 					{{ link.label }}
 				</span>
@@ -31,11 +36,16 @@
 				v-show="link.shown ?? true"
 				:key="link.href"
 				ref="tabLinkElements"
-				class="button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2 hover:cursor-pointer focus:rounded-full"
+				class="button-animation z-[1] flex flex-row items-center gap-2 px-4 py-2.5 hover:cursor-pointer focus:rounded-full"
 				:class="getSSRFallbackClasses(index)"
 				@click="emit('tabClick', index, link)"
 			>
-				<component :is="link.icon" v-if="link.icon" class="size-5" :class="getIconClasses(index)" />
+				<component
+					:is="link.icon"
+					v-if="link.icon"
+					class="size-5 hidden md:flex"
+					:class="getIconClasses(index)"
+				/>
 				<span class="text-nowrap" :class="getLabelClasses(index)">
 					{{ link.label }}
 				</span>
@@ -45,7 +55,7 @@
 		<!-- Animated slider background -->
 		<div
 			v-if="sliderReady && currentActiveIndex !== -1"
-			class="pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full p-1"
+			class="pointer-events-none absolute h-[calc(100%-0.5rem)] overflow-hidden rounded-full"
 			:class="[
 				subpageSelected ? 'bg-button-bg' : 'bg-button-bgSelected',
 				{ 'navtabs-transition': transitionsEnabled },
@@ -145,7 +155,7 @@ function getSSRFallbackClasses(index: number) {
 function getIconClasses(index: number) {
 	return {
 		'text-button-textSelected': isActiveAndNotSubpage.value(index),
-		'text-secondary': !isActiveAndNotSubpage.value(index),
+		'text-primary': !isActiveAndNotSubpage.value(index),
 	}
 }
 

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

@@ -102,7 +102,7 @@
 								<td
 									v-for="column in columns"
 									:key="column.key"
-									class="text-secondary h-14 overflow-hidden first:pl-4 last:pr-4 border-solid border-0 border-t border-surface-4"
+									class="text-primary h-14 overflow-hidden first:pl-4 last:pr-4 border-solid border-0 border-t border-surface-4"
 									:class="[`text-${column.align ?? 'left'}`, column.cellClass]"
 								>
 									<slot
@@ -169,7 +169,7 @@
 								<td
 									v-for="column in columns"
 									:key="column.key"
-									class="text-secondary h-14 overflow-hidden first:pl-4 last:pr-4 border-solid border-0 border-t border-surface-4"
+									class="text-primary h-14 overflow-hidden first:pl-4 last:pr-4 border-solid border-0 border-t border-surface-4"
 									:class="[`text-${column.align ?? 'left'}`, column.cellClass]"
 								>
 									<slot

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

@@ -16,5 +16,5 @@ defineProps<{
 }>()
 
 const baseClass =
-	'bg-[--_bg-color,var(--color-button-bg)] text-nowrap border-[--_bg-color,var(--surface-5)] border-[1px] border-solid px-2 py-1 leading-none rounded-full font-normal text-sm inline-flex items-center gap-1 text-[--_color,var(--color-secondary)] [&>svg]:shrink-0 [&>svg]:h-4 [&>svg]:w-4'
+	'bg-[--_bg-color,var(--color-button-bg)] text-nowrap border-[--_bg-color,var(--surface-5)] border-[1px] border-solid px-2.5 py-1 leading-none h-7 rounded-full font-normal text-sm inline-flex items-center gap-1 text-[--_color,var(--color-text-default)] [&>svg]:shrink-0 [&>svg]:h-4 [&>svg]:w-4'
 </script>

packages/ui/src/components/base/buttons/ButtonFrame.vue

@@ -26,18 +26,18 @@ const baseClasses = [
 ].join(' ')
 
 const sizeClasses: Record<ButtonSize, string> = {
-	xs: 'h-7 gap-1 rounded-lg px-1.5 text-sm font-semibold leading-5 [&>svg]:size-4 [&>svg]:min-h-4 [&>svg]:min-w-4 [&>svg]:shrink-0',
-	sm: 'h-8 gap-1 rounded-[10px] px-1.5 text-sm font-semibold leading-5 [&>svg]:size-4 [&>svg]:min-h-4 [&>svg]:min-w-4 [&>svg]:shrink-0',
-	md: 'h-9 gap-1.5 rounded-xl px-2.5 text-base font-semibold leading-5 [&>svg]:size-5 [&>svg]:min-h-5 [&>svg]:min-w-5 [&>svg]:shrink-0',
-	lg: 'h-10 gap-2 rounded-[14px] px-4 text-base font-semibold leading-5 [&>svg]:size-5 [&>svg]:min-h-5 [&>svg]:min-w-5 [&>svg]:shrink-0',
-	xl: 'h-12 gap-2 rounded-2xl px-3.5 text-base font-extrabold leading-5 [&>svg]:size-6 [&>svg]:min-h-6 [&>svg]:min-w-6 [&>svg]:shrink-0',
+	xs: 'h-7 gap-1 rounded-lg px-1.5 text-[12px] font-[500] leading-5 [&>svg]:size-4 [&>svg]:min-h-4 [&>svg]:min-w-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.25px]',
+	sm: 'h-8 gap-1 rounded-[12px] px-3 text-[14px] font-[500] leading-5 [&>svg]:size-4 [&>svg]:min-h-4 [&>svg]:min-w-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.25px]',
+	md: 'h-10 gap-2 rounded-[14px] px-4 text-[16px] font-[500] leading-6 [&>svg]:size-5 [&>svg]:min-h-5 [&>svg]:min-w-5 [&>svg]:shrink-0 [&>svg]:stroke-[1.5px]',
+	lg: 'h-12 gap-2.5 rounded-[14px] px-5 text-[18px] font-[500] leading-6 [&>svg]:size-6 [&>svg]:min-h-6 [&>svg]:min-w-6 [&>svg]:shrink-0 [&>svg]:stroke-[2px]',
+	xl: 'h-12 gap-2.5 rounded-[14px] px-5 text-[18px] font-[600] leading-6 [&>svg]:size-6 [&>svg]:min-h-6 [&>svg]:min-w-6 [&>svg]:shrink-0 [&>svg]:stroke-[2px]',
 }
 
 const iconOnlySizeClasses: Record<ButtonSize, string> = {
 	xs: 'w-7 !px-0',
 	sm: 'w-8 !px-0',
-	md: 'w-9 !px-0',
-	lg: 'w-10 !px-0',
+	md: 'w-10 !px-0',
+	lg: 'w-12 !px-0',
 	xl: 'w-12 !px-0',
 }
 

packages/ui/src/components/base/buttons/ButtonLink.vue

@@ -12,6 +12,7 @@ import type {
 } from './types'
 
 type ButtonLinkProps = ButtonLinkDestination & {
+	iconOnly?: boolean
 	type?: ButtonType
 	color?: ButtonColor
 	size?: ButtonSize
@@ -23,6 +24,7 @@ type ButtonLinkProps = ButtonLinkDestination & {
 }
 
 const props = withDefaults(defineProps<ButtonLinkProps>(), {
+	iconOnly: false,
 	type: 'base',
 	size: 'md',
 	target: undefined,
@@ -50,6 +52,8 @@ function handleClick(event: MouseEvent) {
 		:as="component"
 		:type="props.type"
 		:color="props.color"
+		:icon-only="props.iconOnly"
+		:circular="props.iconOnly"
 		:size="props.size"
 		:interaction="props.interaction"
 		:to="usesRouter ? props.to : undefined"

packages/ui/src/components/base/buttons/TeleportOverflowMenu.vue

@@ -94,7 +94,7 @@ const menuTransformOrigin = computed(() => {
 })
 
 const menuItemClasses =
-	'overflow-menu-item flex min-h-10 w-full items-center gap-2 rounded-[10px] border-0 bg-transparent px-3 py-2 text-left text-base font-semibold leading-5 text-contrast no-underline ' +
+	'overflow-menu-item flex min-h-10 w-full items-center gap-2.5 rounded-[14px] border-0 bg-transparent px-3 py-2 text-left text-4 font-[500] leading-5 text-contrast no-underline ' +
 	'cursor-pointer whitespace-nowrap hover:bg-surface-4 focus-visible:bg-surface-4 focus-visible:outline-none ' +
 	'disabled:cursor-not-allowed disabled:opacity-50 [&[aria-disabled=true]]:cursor-not-allowed [&[aria-disabled=true]]:opacity-50 ' +
 	'[&>svg]:size-5 [&>svg]:shrink-0 [&>svg]:text-primary'

packages/ui/src/components/base/page-header/metadata/page-header-metadata-item.vue

@@ -76,7 +76,7 @@ const props = withDefaults(defineProps<PageHeaderMetadataItemProps>(), {
 
 const defaultIconClass = 'block size-5 shrink-0 text-current'
 const baseClass =
-	'relative flex min-w-0 items-center font-medium leading-none text-secondary text-nowrap'
+	'relative flex min-w-0 items-center font-normal leading-none text-primary text-nowrap'
 const contentBaseClass = 'inline-flex min-w-0 items-center gap-2 text-inherit'
 const interactiveClass = 'm-0 cursor-pointer border-0 bg-transparent p-0 hover:underline'
 

packages/ui/src/components/billing/ServersSpecs.vue

@@ -54,7 +54,7 @@ const sharedCpus = computed(() => {
 })
 </script>
 <template>
-	<ul class="m-0 flex list-none flex-col gap-2 px-0 text-sm leading-normal text-secondary">
+	<ul class="m-0 flex list-none flex-col gap-2 px-0 text-sm leading-normal text-primary">
 		<li class="flex items-center gap-2">
 			<MemoryStickIcon class="h-5 w-5 shrink-0" />
 			{{ formatMessage(messages.gbRam, { ram: formattedRam }) }}
@@ -77,7 +77,7 @@ const sharedCpus = computed(() => {
 				target="_blank"
 				@click="() => emit('click-bursting-link')"
 			>
-				<UnknownIcon class="h-4 w-4 text-secondary opacity-80" />
+				<UnknownIcon class="h-4 w-4 text-secondary" />
 			</AutoLink>
 		</li>
 	</ul>

packages/ui/src/components/project/ProjectSidebarCreators.vue

@@ -23,11 +23,11 @@
 					>
 						<Avatar :src="organization.icon_url" :alt="organization.name" size="32px" />
 						<div class="flex flex-col flex-nowrap justify-center">
-							<span class="group-hover:underline font-medium">
+							<span class="group-hover:underline text-contrast font-base">
 								{{ organization.name }}
 							</span>
-							<span class="text-sm font-normal text-secondary flex items-center gap-1"
-								><OrganizationIcon /> {{ formatMessage(messages.organization) }}</span
+							<span class="text-sm font-normal text-primary flex items-center gap-1">
+								<OrganizationIcon /> {{ formatMessage(messages.organization) }}</span
 							>
 						</div>
 					</AutoLink>
@@ -36,13 +36,15 @@
 				<AutoLink
 					v-for="member in sortedMembers"
 					:key="`member-${member.id}`"
-					class="flex gap-2 items-center w-fit text-primary leading-[1.2] group"
+					class="flex gap-2 items-center w-fit leading-[1.2] group"
 					:to="userLink(member.user.username)"
 					:target="resolveLinkTarget(userLinkTarget)"
 				>
 					<Avatar :src="member.user.avatar_url" :alt="member.user.username" size="32px" circle />
 					<div class="flex flex-col">
-						<span class="flex w-full flex-nowrap items-center gap-1 group-hover:underline">
+						<span
+							class="flex w-full flex-nowrap items-center gap-1 text-contrast font-normal group-hover:underline"
+						>
 							<span class="min-w-0 overflow-hidden truncate">{{ member.user.username }}</span>
 							<CrownIcon
 								v-if="member.is_owner"
@@ -51,7 +53,7 @@
 							/>
 							<ExternalIcon v-if="resolveLinkTarget(userLinkTarget) === '_blank'" />
 						</span>
-						<span class="text-sm font-normal text-secondary">{{ member.role }}</span>
+						<span class="text-sm font-normal">{{ member.role }}</span>
 					</div>
 				</AutoLink>
 			</template>

packages/ui/src/components/project/ProjectSidebarLinks.vue

@@ -13,7 +13,7 @@
 	>
 		<h2 class="text-lg m-0">{{ formatMessage(messages.title) }}</h2>
 		<div
-			class="flex flex-col gap-3 font-semibold [&>a]:flex [&>a]:gap-2 [&>a]:items-center [&>a]:w-fit [&>a]:text-primary [&>a]:leading-[1.2] [&>a:hover]:underline"
+			class="flex flex-col gap-3 font-normal [&>a]:flex [&>a]:gap-2 [&>a]:items-center [&>a]:w-fit [&>a]:text-primary [&>a]:leading-[1.2] [&>a:hover]:underline"
 		>
 			<a
 				v-if="project.issues_url"
@@ -21,7 +21,7 @@
 				:target="linkTarget"
 				rel="noopener nofollow ugc"
 			>
-				<IssuesIcon aria-hidden="true" />
+				<BugIcon aria-hidden="true" />
 				{{ formatMessage(messages.issues) }}
 				<ExternalIcon aria-hidden="true" class="external-icon" />
 			</a>
@@ -117,6 +117,7 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
 import {
+	BugIcon,
 	BuyMeACoffeeIcon,
 	CodeIcon,
 	CurrencyIcon,
@@ -124,7 +125,6 @@ import {
 	ExternalIcon,
 	GlobeIcon,
 	HeartIcon,
-	IssuesIcon,
 	KoFiIcon,
 	OpenCollectiveIcon,
 	PatreonIcon,
@@ -173,7 +173,7 @@ const messages = defineMessages({
 	},
 	discord: {
 		id: 'project.about.links.discord',
-		defaultMessage: 'Join Discord server',
+		defaultMessage: 'Discord server',
 	},
 	site: {
 		id: 'project.about.links.site',

packages/ui/src/components/project/card/ProjectCardAuthor.vue

@@ -16,9 +16,7 @@ defineProps<{
 <template>
 	<!-- author will try to be full width, but no longer than the proper fit. but this also allows it to truncate if necessary -->
 	<!-- the weird padding and negative margin are to include the potential hover underline in bounding box which affects rendering on firefox -->
-	<span
-		class="line-clamp-1 break-all text-secondary font-normal max-w-fit w-full pb-[2px] mb-[-2px]"
-	>
+	<span class="line-clamp-1 break-all text-primary font-normal max-w-fit w-full pb-[2px] mb-[-2px]">
 		by
 		<AutoLink
 			:to="author.link"

packages/ui/src/components/search/SearchFilterOption.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="search-filter-option group flex gap-1 items-center">
 		<button
-			:class="`flex border-none cursor-pointer !w-full items-center gap-2 truncate rounded-xl px-2 py-2 [@media(hover:hover)]:py-1 text-sm font-semibold transition-all hover:text-contrast focus-visible:text-contrast active:scale-[0.98] ${included ? 'bg-brand-highlight text-contrast hover:brightness-125' : excluded ? 'bg-highlight-red text-contrast hover:brightness-125' : 'bg-transparent text-secondary hover:bg-button-bg focus-visible:bg-button-bg [&>svg.check-icon]:hover:text-brand [&>svg.check-icon]:focus-visible:text-brand [&>svg.ban-icon]:hover:text-red [&>svg.ban-icon]:focus-visible:text-red'}`"
+			:class="`flex border-none cursor-pointer !w-full items-center gap-2 truncate rounded-xl px-2 py-2 [@media(hover:hover)]:py-1 text-sm font-semibold transition-all hover:text-contrast focus-visible:text-contrast active:scale-[0.98] ${included ? 'bg-brand-highlight text-contrast hover:brightness-125' : excluded ? 'bg-highlight-red text-contrast hover:brightness-125' : 'bg-transparent text-primary hover:bg-button-bg focus-visible:bg-button-bg [&>svg.check-icon]:hover:text-brand [&>svg.check-icon]:focus-visible:text-brand [&>svg.ban-icon]:hover:text-red [&>svg.ban-icon]:focus-visible:text-red'}`"
 			@click="() => emit(primaryAction === 'exclude' ? 'toggleExclude' : 'toggle', option)"
 		>
 			<slot> </slot>
@@ -24,7 +24,7 @@
 		<button
 			v-if="showExcludeButton"
 			v-tooltip="formatMessage(messages.excludeTooltip)"
-			class="flex border-none cursor-pointer items-center justify-center gap-2 rounded-xl bg-transparent px-2 py-1 text-sm font-semibold text-secondary [@media(hover:hover)]:opacity-0 transition-all hover:bg-button-bg hover:text-red focus-visible:bg-button-bg focus-visible:text-red active:scale-[0.96]"
+			class="flex border-none cursor-pointer items-center justify-center gap-2 rounded-xl bg-transparent px-2 py-1 text-sm font-semibold text-primary [@media(hover:hover)]:opacity-0 transition-all hover:bg-button-bg hover:text-red focus-visible:bg-button-bg focus-visible:text-red active:scale-[0.96]"
 			@click="() => emit('toggleExclude', option)"
 		>
 			<BanIcon class="filter-action-icon h-4 w-4" aria-hidden="true" />

packages/ui/src/layouts/shared/browse-tab/layout.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Labrinth } from '@modrinth/api-client'
-import { SearchIcon } from '@modrinth/assets'
+import { ArrowUpDownIcon, BulletListIcon, SearchIcon } from '@modrinth/assets'
 import { computed, ref, toValue } from 'vue'
 
 import { Button, IconButton } from '#ui/components/base/buttons'
@@ -158,15 +158,13 @@ function getProjectCardTags(result: Labrinth.Search.v3.ResultSearchProject, disp
 			trigger-type="base"
 			:class="
 				ctx.variant === 'web'
-					? '!w-[16rem] min-w-max max-w-full flex-grow md:flex-grow-0'
-					: '!w-[16rem] min-w-max max-w-full'
+					? '!w-[14rem] min-w-max max-w-full flex-grow md:flex-grow-0'
+					: '!w-[14rem] min-w-max max-w-full'
 			"
 			@update:model-value="(val: SortType) => (ctx.effectiveCurrentSortType.value = val)"
 		>
 			<template #prefix>
-				<span class="font-semibold text-primary">{{
-					formatMessage(commonMessages.sortByLabel)
-				}}</span>
+				<ArrowUpDownIcon class="size-5 shrink-0 text-primary stroke-[1.5px]" />
 			</template>
 		</Combobox>
 
@@ -176,14 +174,14 @@ function getProjectCardTags(result: Labrinth.Search.v3.ResultSearchProject, disp
 			trigger-type="base"
 			:class="
 				ctx.variant === 'web'
-					? '!w-[9rem] min-w-max max-w-full flex-grow md:flex-grow-0'
-					: '!w-[9rem] min-w-max max-w-full'
+					? '!w-[8rem] min-w-max max-w-full flex-grow md:flex-grow-0'
+					: '!w-[8rem] min-w-max max-w-full'
 			"
 			:placeholder="formatMessage(commonMessages.viewLabel)"
 			@update:model-value="(val: number) => (ctx.maxResults.value = val)"
 		>
 			<template #prefix>
-				<span class="font-semibold text-primary">{{ formatMessage(messages.viewPrefix) }}</span>
+				<BulletListIcon class="size-5 shrink-0 text-primary stroke-[1.5px]" />
 			</template>
 		</Combobox>
 

packages/ui/src/locales/en-US/index.json

@@ -3171,7 +3171,7 @@
     "defaultMessage": "Updated {date}"
   },
   "project.about.links.discord": {
-    "defaultMessage": "Join Discord server"
+    "defaultMessage": "Discord server"
   },
   "project.about.links.donate.bmac": {
     "defaultMessage": "Buy Me a Coffee"