authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-07-27 23:06:39+02:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-07-27 23:06:39+02:00
log3957a958184650656dbbab6d73d9882de9855bd5
tree43eb334a6b9ea29cf9d169f36e1b5768be2d0d75
parent6a3df51707b67c3435f86b3b83a093aec8b03415
signature Signed by PGP key B5690EEEBB952194

Use glass surfaces for web toasts (#4681)

1 files changed, 3 insertions(+), 5 deletions(-)

apps/web/src/components/ui/toast.tsx+3-5
...@@ -587,7 +587,7 @@ function Toasts({ position }: { position: ToastPosition }) {...@@ -587,7 +587,7 @@ function Toasts({ position }: { position: ToastPosition }) {
587 return (587 return (
588 <Toast.Root588 <Toast.Root
589 className={cn(589 className={cn(
590 "absolute z-[calc(9999-var(--toast-index))] w-full overflow-visible select-none rounded-lg border bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",590 "dropdown-glass absolute z-[calc(9999-var(--toast-index))] w-full overflow-visible select-none rounded-lg text-popover-foreground shadow-xl shadow-black/25 [transition:transform_.5s_cubic-bezier(.22,1,.36,1),opacity_.5s,height_.15s]",
591 // Base positioning using data-position591 // Base positioning using data-position
592 "data-[position*=right]:right-0 data-[position*=right]:left-auto",592 "data-[position*=right]:right-0 data-[position*=right]:left-auto",
593 "data-[position*=left]:right-auto data-[position*=left]:left-0",593 "data-[position*=left]:right-auto data-[position*=left]:left-0",
...@@ -739,10 +739,8 @@ function AnchoredToasts() {...@@ -739,10 +739,8 @@ function AnchoredToasts() {
739 >739 >
740 <Toast.Root740 <Toast.Root
741 className={cn(741 className={cn(
742 "relative overflow-visible text-balance border bg-popover not-dark:bg-clip-padding text-popover-foreground text-xs transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",742 "dropdown-glass relative overflow-visible text-balance text-popover-foreground text-xs shadow-xl shadow-black/25 transition-[scale,opacity] data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0",
743 tooltipStyle743 tooltipStyle ? "rounded-md" : "rounded-lg",
744 ? "rounded-md shadow-md/5 before:rounded-[calc(var(--radius-md)-1px)]"
745 : "rounded-lg shadow-lg/5 before:rounded-[calc(var(--radius-lg)-1px)]",
746 )}744 )}
747 data-slot="toast-popup"745 data-slot="toast-popup"
748 toast={toast}746 toast={toast}