feat: tweak button & link styles #1163

jellydeck · 2026-02-07T17:47:08Z

update the general style of buttons, group buttons and links to be consistent with our design language.

also, removed global css as Input component seems to be done.
Thanks @alexdln @essenmitsosse for feedback, enjoyed working together :)

vercel · 2026-02-07T17:47:17Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 13, 2026 5:47am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 13, 2026 5:47am
npmx-lunaria	Ignored		Feb 13, 2026 5:47am

vercel · 2026-02-07T17:47:19Z

@jellydeck is attempting to deploy a commit to the serhalp's projects Team on Vercel.

A member of the Team first needs to authorize it.

codecov · 2026-02-07T17:50:16Z

Codecov Report

❌ Patch coverage is 92.30769% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/pages/package/[[org]]/[name].vue	0.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

app/assets/main.css

app/components/Button/Base.vue

app/components/Button/Group.vue

app/components/Link/Base.vue

thasmo · 2026-02-08T13:06:18Z

focus ring is not in foreground

accent color is not used on some elements

cut off focus-ring (same on prod)

app/components/Button/Base.vue

app/components/Link/Base.vue

alexdln · 2026-02-12T12:12:23Z

app/components/Button/Base.vue

-        variant === 'primary',
+      'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'primary',
+      'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'secondary',
+      'opacity-40 cursor-not-allowed border-transparent': disabled,


border-transparent will be at the same time as border-border

alexdln · 2026-02-12T12:13:52Z

app/components/Button/Base.vue

    :class="{
      'inline-flex': !block,
      'flex': block,
      'text-sm px-4 py-2': size === 'medium',
      'text-xs px-2 py-0.5': size === 'small',
-      'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
-        variant === 'secondary',
-      'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
-        variant === 'primary',
+      'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'primary',
+      'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'secondary',
+      'opacity-40 cursor-not-allowed border-transparent': disabled,


Formally we have a chance that button will be disabled without this prop. It would be better to style disabled buttons using :disabled

disabled:(opacity-40 cursor-not-allowed border-transparent)
https://github.com/npmx-dev/npmx.dev/pull/1163/changes/BASE..be463823d307f24f07a17f37866da9912c961c00#diff-4274e1791d85b6346c5a195d790469b3792aa4a49ddd2874f043048e118ae598R30

do you mean this?

There is also a comment about this being a regression that is marked as resolved, but it isn't.

alexdln · 2026-02-12T12:16:08Z

app/components/Button/Group.vue

  <component
    :is="props.as || 'div'"
-    class="flex items-center shrink-0 ms-auto [&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none"
+    class="inline-flex items-stretch [&>*:not(:first-child)]:(-ms-px rounded-is-none) [&>*:not(:last-child)]:rounded-ie-none [&>*:hover]:(relative z-40) [&>*:focus-visible]:(relative z-40)"


I think we need to turn off scale here as well

disabling scale effect on active and hover

alexdln · 2026-02-12T12:21:59Z

app/components/Header/AccountMenu.server.vue

@@ -1,10 +1,8 @@
 <template>
-  <div class="relative flex min-w-28 justify-end">


min-w-28 was to reduce CLS for authorized users (same in AccountMenu)

i see, i'll use same min-w-28 then

alexdln · 2026-02-12T12:23:35Z

app/components/Link/Base.vue

  <NuxtLink
    v-else
-    class="group/link gap-x-1 items-center"
+    class="group cursor-pointer gap-x-1.5 items-center rounded-sm outline-transparent active:scale-[0.98] focus-visible:(outline-2 outline-accent) transition-colors duration-200"


restore group/link please.

Users of the component from the outside shouldn't be bothered by the presence of group (and they shouldn't have artifacts if they also use group internally)

alrighty, now all link styles are under group/link variant

jellydeck

reverted styles as per discussion

jellydeck · 2026-02-12T13:08:18Z

app/components/Button/Base.vue

    :class="{
      'inline-flex': !block,
      'flex': block,
      'text-sm px-4 py-2': size === 'medium',
      'text-xs px-2 py-0.5': size === 'small',
-      'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
-        variant === 'secondary',
-      'text-bg bg-fg hover:enabled:(bg-fg/50) focus-visible:enabled:(bg-fg/50) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(text-bg/50))':
-        variant === 'primary',
+      'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'primary',
+      'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'secondary',
+      'opacity-40 cursor-not-allowed border-transparent': disabled,


disabled:(opacity-40 cursor-not-allowed border-transparent)
https://github.com/npmx-dev/npmx.dev/pull/1163/changes/BASE..be463823d307f24f07a17f37866da9912c961c00#diff-4274e1791d85b6346c5a195d790469b3792aa4a49ddd2874f043048e118ae598R30

do you mean this?

jellydeck · 2026-02-12T13:10:06Z

app/components/Button/Group.vue

  <component
    :is="props.as || 'div'"
-    class="flex items-center shrink-0 ms-auto [&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none"
+    class="inline-flex items-stretch [&>*:not(:first-child)]:(-ms-px rounded-is-none) [&>*:not(:last-child)]:rounded-ie-none [&>*:hover]:(relative z-40) [&>*:focus-visible]:(relative z-40)"


disabling scale effect on active and hover

jellydeck · 2026-02-12T13:12:07Z

app/components/Header/AccountMenu.server.vue

@@ -1,10 +1,8 @@
 <template>
-  <div class="relative flex min-w-28 justify-end">


i see, i'll use same min-w-28 then

jellydeck · 2026-02-12T13:14:26Z

app/components/Link/Base.vue

  <NuxtLink
    v-else
-    class="group/link gap-x-1 items-center"
+    class="group cursor-pointer gap-x-1.5 items-center rounded-sm outline-transparent active:scale-[0.98] focus-visible:(outline-2 outline-accent) transition-colors duration-200"


alrighty, now all link styles are under group/link variant

essenmitsosse · 2026-02-12T14:20:45Z

app/components/Link/Base.vue

+      'justify-start font-mono text-fg hover:(decoration-accent) focus-visible:(text-accent outline-offset-2)':
        isLink,
-      'justify-center font-mono border border-border rounded-md transition-all duration-200':
+      'justify-center font-mono border border-solid border-border rounded-md  outline-offset-2':


These outline-offsets-2 should be set on the first class because they should apply to all links regardless of type. Also the use is inconsistant, sometimes it's always set, sometimes only on focus-visible.

for button i used offset-2 otherwise it already has focus-visible:(outline-2 outline-accent) . this is to create a better seperation.

essenmitsosse · 2026-02-12T14:22:49Z

app/components/Link/Base.vue

+      'text-bg bg-fg border-fg hover:(bg-fg/80) aria-[current=true]:(bg-fg/80)':
        variant === 'button-primary',
+      'text-fg bg-bg hover:(bg-fg/10 border-fg/10) aria-[current=true]:(bg-fg/10 border-fg/10)':
+        variant === 'button-secondary',


This doesn't change the style anymore when the button is focused. Is that on purpose or by accident? The same goes for not having the text in accent colors, for button-styled links.

since it's going to be a button and on first class we have focus-visible:(outline-2 outline-accent) and outline-offset-2 on button.
it will have focus style applied as intended.

essenmitsosse · 2026-02-12T14:23:46Z

app/components/Link/Base.vue

      'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30':
        !isLinkAnchor && isLink && !noUnderline,
-      'justify-start font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
+      'justify-start font-mono text-fg hover:(decoration-accent) focus-visible:(text-accent outline-offset-2)':


This changes doesn't change the text color to accent on hover, but on focus. This seems inconsistant with the button styles.

text-accent was just too strong, will use shade of fg color if we still need a dim variant

I think especially on light mode it can be too subtle now.

essenmitsosse · 2026-02-12T14:24:27Z

app/components/Link/Base.vue

    <span
      v-else-if="isLinkAnchor && isLink"
-      class="i-carbon:link size-[1em] opacity-0 group-hover/link:opacity-100 transition-opacity duration-200"
+      class="i-carbon:link size-[1em] opacity-0 group-hover/link:opacity-100 group-focus-visible/link:opacity-100 transition-opacity duration-200"


Good catch!

essenmitsosse · 2026-02-12T14:26:01Z

app/components/Package/ManagerSelect.vue

  <button
    ref="triggerRef"
    type="button"
-    class="cursor-pointer flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover focus-visible:outline-accent/70"
+    class="flex items-center gap-1.5 px-2 py-2 font-mono text-xs text-fg-muted bg-bg-subtle border border-border-subtle border-solid rounded-md transition-colors duration-150 hover:(text-fg border-border-hover) active:scale-95 focus:border-border-hover outline-transparent focus-visible:(outline-2 outline-accent outline-offset-2) hover:text-fg cursor-pointer"


There are a lot of vanilla button in this PR which are updated. But most of them should be migrated to ButtonBase, instead of manually syncing the style. It is fine like that, but that change will happen soon anyway.

yeah, i wanted to keep scope of pr limited hence just updated to sync with current buttons style for now

essenmitsosse · 2026-02-12T20:49:32Z

Those two have different variants, which is barely visible now.

jellydeck · 2026-02-13T05:43:49Z

@essenmitsosse
looks like class specificity issue on tag. fixed now.

buttons & links style adjusted

c76cc87

vercel bot deployed to Preview – npmx.dev February 7, 2026 17:48 View deployment

alexdln reviewed Feb 7, 2026

View reviewed changes

app/assets/main.css Outdated Show resolved Hide resolved

app/components/Button/Base.vue Outdated Show resolved Hide resolved

app/components/Button/Base.vue Outdated Show resolved Hide resolved

app/components/Button/Group.vue Outdated Show resolved Hide resolved

some cleanup

9b7add1

vercel bot deployed to Preview – npmx.dev February 8, 2026 09:43 View deployment

few more tweaks 😌

881330f

vercel bot deployed to Preview – npmx.dev February 8, 2026 11:19 View deployment

fix: rounded on focus-visible

558bcad

vercel bot deployed to Preview – npmx.dev February 8, 2026 11:29 View deployment

for thasmo 🫡

5bc5e5a

vercel bot deployed to Preview – npmx.dev February 8, 2026 11:37 View deployment

alexdln reviewed Feb 8, 2026

View reviewed changes

app/components/Link/Base.vue Outdated Show resolved Hide resolved

app/components/Link/Base.vue Outdated Show resolved Hide resolved

class as props

8fedbdd

vercel bot deployed to Preview – npmx.dev February 8, 2026 11:47 View deployment

on active scale down for feedback

1a85202

vercel bot deployed to Preview – npmx.dev February 8, 2026 12:08 View deployment

border for secondary buttons

dd19dda

vercel bot deployed to Preview – npmx.dev February 8, 2026 12:33 View deployment