It’s always felt weird using opacity for disabled buttons for situations where its not placed on a solid background.

In this alternative approach I am using color-mix to create a similar disabled effect without the opacity.

<button
  class="bg-[color-mix(in_srgb,var(--color-blue-500)_50%,var(--color-background))] text-[color-mix(in_srgb,var(--color-white)_50%,var(--color-background))]"
  disabled
>
  Hello world
</button>