size & color consistencies

packages/assets/generated-icons.ts

@@ -78,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'
@@ -511,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/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

@@ -154,7 +154,6 @@
 	--brand-gradient-fade-out-color: linear-gradient(to bottom, rgba(213, 235, 224, 0), #d0ece0 70%);
 
 	--color-button-bg-selected: var(--color-brand);
-	--color-button-icon-selected: var(--color-accent-contrast);
 	--color-button-text-selected: var(--color-accent-contrast);
 
 	--color-gradient-button-bg: linear-gradient(180deg, #f8f9fa 0%, #dce0e6 100%);
@@ -311,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;
 
 	// ===
 
@@ -369,8 +368,7 @@ html {
 	--brand-gradient-fade-out-color: linear-gradient(to bottom, rgba(24, 30, 31, 0), #171d1e 80%);
 
 	--color-button-bg-selected: var(--color-brand-highlight);
-	--color-button-icon-selected: var(--color-brand);
-	--color-button-text-selected: var(--color-text-primary);
+	--color-button-text-selected: var(--color-brand);
 
 	--color-gradient-button-bg: linear-gradient(180deg, #3a3d47 0%, #33363d 100%);
 

packages/tooling-config/tailwind/tailwind-preset.ts

@@ -177,7 +177,6 @@ const config: Config = {
 					border: 'var(--color-button-border)',
 					bgSelected: 'var(--color-button-bg-selected)',
 					textSelected: 'var(--color-button-text-selected)',
-					iconSelected: 'var(--color-button-icon-selected)',
 				},
 				toggleHandle: 'var(--color-toggle-handle)',
 				dropdown: {

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-semibold"
+		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,7 +13,7 @@
 				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?.()"
@@ -36,7 +36,7 @@
 				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)"
 			>
@@ -55,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 },
@@ -154,16 +154,14 @@ function getSSRFallbackClasses(index: number) {
 
 function getIconClasses(index: number) {
 	return {
-		'text-button-iconSelected': isActiveAndNotSubpage.value(index),
-		'text-secondary': !isActiveAndNotSubpage.value(index),
+		'text-button-textSelected': isActiveAndNotSubpage.value(index),
+		'text-primary': !isActiveAndNotSubpage.value(index),
 	}
 }
 
 function getLabelClasses(index: number, hasIcon: boolean = false) {
 	return {
-		'text-button-iconSelected md:text-button-textSelected':
-			hasIcon && isActiveAndNotSubpage.value(index),
-		'text-button-iconSelected': !hasIcon && isActiveAndNotSubpage.value(index),
+		'text-button-textSelected': isActiveAndNotSubpage.value(index),
 		'text-contrast': !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/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"