From da32ebcc0166fe4a340c78f566ab2024ef8a767a Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Fri, 21 Aug 2026 13:49:48 +0000 Subject: [PATCH 1/2] feat: add tactile physical press-down effect to icon buttons Co-authored-by: ngoiyaeric <115367894+ngoiyaeric@users.noreply.github.com> --- components/ui/button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/ui/button.tsx b/components/ui/button.tsx index 22d68deb..08ffba0a 100644 --- a/components/ui/button.tsx +++ b/components/ui/button.tsx @@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const buttonVariants = cva( - 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50', + 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all duration-75 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:translate-y-[1px] active:scale-[0.97] active:shadow-inner active:brightness-95 disabled:pointer-events-none disabled:opacity-50', { variants: { variant: { From 83b87a9cd876630369be4b53d5504be02d8a05eb Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Fri, 21 Aug 2026 13:57:35 +0000 Subject: [PATCH 2/2] feat: add 3D block tactile physical press-down effect to buttons Co-authored-by: ngoiyaeric <115367894+ngoiyaeric@users.noreply.github.com> --- components/ui/button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/ui/button.tsx b/components/ui/button.tsx index 08ffba0a..d1d6da18 100644 --- a/components/ui/button.tsx +++ b/components/ui/button.tsx @@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const buttonVariants = cva( - 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all duration-75 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 active:translate-y-[1px] active:scale-[0.97] active:shadow-inner active:brightness-95 disabled:pointer-events-none disabled:opacity-50', + 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all duration-75 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 border border-border/80 shadow-[2px_3px_0px_rgba(0,0,0,0.35)] dark:shadow-[2px_3px_0px_rgba(255,255,255,0.2)] active:translate-y-[2px] active:translate-x-[1px] active:scale-[0.96] active:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.4)] aria-pressed:translate-y-[2px] aria-pressed:translate-x-[1px] aria-pressed:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.4)] aria-pressed:bg-accent/80 data-[state=open]:translate-y-[2px] data-[state=open]:translate-x-[1px] data-[state=open]:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.4)] data-[state=open]:bg-accent/80 data-[pressed=true]:translate-y-[2px] data-[pressed=true]:translate-x-[1px] data-[pressed=true]:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.4)] data-[pressed=true]:bg-accent/80 disabled:pointer-events-none disabled:opacity-50', { variants: { variant: {