feat: extract button and link component, unify and improve design

[essenmitsosse]

This one is quite aggressive. It does some additional work on the button and link components and replaces all buttons and links on the frontpage and package-page.

The basic idea behind this is to have a fixed set of component that can be used and will automatically have the desired designs. This way, if we want to redesign buttons/links later, we don't have to hunt them down in the whole code base. This should improve DX and also ensure Consistent design and a11y across the site.

This currently supports the following:

• link, primary button, secondary button and tag (which is a small button)
• automatically marking pressed buttons/current links
• adding keyboard shortcuts
• adding an icon
• for external links automatically adding an icon and opening in new window
• for anchor links automatically adding a link icon on hover

Additionally this does the following design changes:

• make buttons look more clickable
• add an underline to links
• use accent color for buttons and links on hover/focus*
• primary buttons are always in accent color*
• add a button group (currently only used for the internal links on the top of the package page)
• some buttons and links might now be larger, but before their click targets where pretty small on mobile

• this removes white buttons in dark mode and black buttons in light mode

The reason behind this is, that before a lot of clickable things where really hard to spot. This does add some visual noise, so I think it might be controversial. My line of thinking here is: Make the UI easy to understand and improve visual noise as a second step, instead of the other way around.

Additionally this aligns the static tag design with the button/link tag design, but ensures it is clear what is clickable and what is not.

Open Todos after this is merged:

• other pages still have the old buttons/links and should also be migrated
• some other inputs like drop down triggers should get the same treatment
• adding Storybook to make testing these components easier

I know this is tricky to review since it does changes on multiple levels (code structure, a11y, design etc.), so let me know if it would make sense to split this.

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (2)

app/pages/package/[[org]]/[name].vue (1)

19-19: Only LinkBase is explicitly imported; ButtonBase and ButtonGroup rely on auto-import.

ButtonBase (line 633) and ButtonGroup (lines 667, 860) are used in the template without an explicit import, relying on Nuxt's auto-import. LinkBase is explicitly imported despite also only being used in the template. This is fine functionally but slightly inconsistent — consider either importing all three or removing this import to rely entirely on auto-import.

app/assets/main.css (1)

189-196: Remove :-moz-focusring unless supporting Firefox versions older than 85.

:focus-visible has been natively supported in Firefox since version 85 (January 2021), and :-moz-focusring is a non-standard, Firefox-only predecessor that is now deprecated. By 2025, all major browsers support :focus-visible (Chrome/Edge 86+, Firefox 85+, Safari 15.4+). Unless the project explicitly requires support for pre-85 Firefox, the :-moz-focusring selector adds noise without providing compatibility benefit. If older browser support is needed, the modern fallback pattern (per MDN) uses @supports not selector(:focus-visible) with :focus, not :-moz-focusring.

[essenmitsosse]

@danielroe @alexdln pushed the following changes:

• links use mono font
• link underline slightly muted
• link underline not hidden on hover
• font size in footer reduced to what it was before
• links use accent color on hover (this is still problematic when no accent color is selected, but that was an issue before as well and should be its own PR)
• links that have an icon now don't show an external link indicator — this is probably not the perfect logic but works pretty reasonable for now
• reverted the deps info layout
• modal close button is fixed
• more spacing around keyboard shortcut
• reverted the main menu back to the old design while using the new components — this is not perfect but at least not a design regression

• The trust icon has become a bit strange to me - elongated and low. It used to have a very pleasant effect, and it's not the kind of element that should be clearly highlighted
• A like is a very familiar element to everyone and everyone is very accustomed to it as a simple heart; it does not need any additional view markers

The old version didn't make it clear at all you could interact with it. Before non of the buttons looked clickable, now all do. I agree these buttons needs a special design, but I'd also rather make that a separate discussion. This PR aims to make all buttons look like buttons and unify their design. The PR fixed one part of the problem and I think some small regressions are fine, since we are still pre-release.

Just trying to keep the scope from creeping here.

@danielroe I think I am done … 🫩

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (2)

app/components/Button/Base.vue (1)

61-67: kbd badge dimensions (w-4 h-4) only accommodate single-character shortcuts.

Current usages (e.g. "d", ".", "c") fit, but if a multi-character shortcut (e.g. "⌘K") is ever passed, it will overflow. Consider using min-w-4 h-4 px-1 or similar to allow the badge to grow.

app/pages/package/[[org]]/[name].vue (1)

19-19: Remove unnecessary explicit import — LinkBase is auto-imported by Nuxt.

LinkBase is used only in the template, never in the script section. ButtonBase and ButtonGroup are used in the template without explicit imports, relying on Nuxt's component auto-import. This import should be removed for consistency.

Proposed fix

-import { LinkBase } from '#components'

[coderabbitai]

Actionable comments posted: 1

[danielroe]

thank you for your great work on this ❤️

there are still some issues (oblong buttons, etc.) that that we will need to resolve but I think this can be more effectively done after this is merged. 🙏