begin button consistency pass

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 text-sm font-semibold"
 		:class="{ 'drop-shadow-xl border border-solid border-surface-4': mode === 'navigation' }"
 	>
 		<template v-if="mode === 'navigation'">
@@ -18,8 +18,13 @@
 				@mouseenter="link.onHover?.()"
 				@focus="link.onHover?.()"
 			>
-				<component :is="link.icon" v-if="link.icon" class="size-5" :class="getIconClasses(index)" />
-				<span class="text-nowrap" :class="getLabelClasses(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.icon)">
 					{{ link.label }}
 				</span>
 			</RouterLink>
@@ -35,8 +40,13 @@
 				:class="getSSRFallbackClasses(index)"
 				@click="emit('tabClick', index, link)"
 			>
-				<component :is="link.icon" v-if="link.icon" class="size-5" :class="getIconClasses(index)" />
-				<span class="text-nowrap" :class="getLabelClasses(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.icon)">
 					{{ link.label }}
 				</span>
 			</div>
@@ -144,14 +154,16 @@ function getSSRFallbackClasses(index: number) {
 
 function getIconClasses(index: number) {
 	return {
-		'text-button-textSelected': isActiveAndNotSubpage.value(index),
+		'text-button-iconSelected': isActiveAndNotSubpage.value(index),
 		'text-secondary': !isActiveAndNotSubpage.value(index),
 	}
 }
 
-function getLabelClasses(index: number) {
+function getLabelClasses(index: number, hasIcon: boolean = false) {
 	return {
-		'text-button-textSelected': isActiveAndNotSubpage.value(index),
+		'text-button-iconSelected md:text-button-textSelected':
+			hasIcon && isActiveAndNotSubpage.value(index),
+		'text-button-iconSelected': !hasIcon && isActiveAndNotSubpage.value(index),
 		'text-contrast': !isActiveAndNotSubpage.value(index),
 	}
 }

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-[20px] 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-[20px] 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

@@ -81,7 +81,7 @@ const { isOpen, panelStyle, anchorStyle, resolvedSide, open, close } = useAnchor
 )
 
 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'