sugoidogo/modrinth
1
0
Fork 0
mirror of https://github.com/modrinth/code.git synced 2026-08-31 03:55:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

begin button consistency pass

Browse Source
This commit is contained in:
Prospector
2026-08-07 13:34:26 -07:00
parent a71a361e0f
commit 4f9baffa13
10 changed files with 100 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/assets/generated-icons.ts
+2
View File
@@ -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'
@@ -495,6 +496,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
packages/assets/icons/bullet-list.svg
+1
View File
@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 352 B

packages/assets/styles/variables.scss
+5 -3
View File
@@ -154,6 +154,7 @@
--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%);
@@ -330,7 +331,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 +347,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);
@@ -368,7 +369,8 @@ 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-text-selected: var(--color-brand);
--color-button-icon-selected: var(--color-brand);
--color-button-text-selected: var(--color-text-primary);
--color-gradient-button-bg: linear-gradient(180deg, #3a3d47 0%, #33363d 100%);
packages/tooling-config/tailwind/tailwind-preset.ts
+1
View File
@@ -177,6 +177,7 @@ 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/NavTabs.vue
+20 -8
View File
@@ -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
+7 -7
View File
@@ -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
+4
View File
@@ -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
+1 -1
View File
@@ -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'