fix(ui): Shadcn ring and backdrop colors (#7495)

Author: alexcarpenter

.changeset/spicy-terms-learn.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Update shadcn theme ring and modalBackdrop variables to match the opacity defined in shadcn components.

packages/ui/src/themes/shadcn.ts

@@ -9,13 +9,13 @@ export const shadcn = createTheme({
     colorForeground: 'var(--card-foreground)',
     colorInput: 'var(--input)',
     colorInputForeground: 'var(--card-foreground)',
-    colorModalBackdrop: 'var(--color-black)',
+    colorModalBackdrop: 'color-mix(in srgb, var(--color-black), transparent 50%)',
     colorMuted: 'var(--muted)',
     colorMutedForeground: 'var(--muted-foreground)',
     colorNeutral: 'var(--foreground)',
     colorPrimary: 'var(--primary)',
     colorPrimaryForeground: 'var(--primary-foreground)',
-    colorRing: 'var(--ring)',
+    colorRing: 'color-mix(in srgb, var(--ring), transparent 50%)',
     fontWeight: {
       normal: 'var(--font-weight-normal)',
       medium: 'var(--font-weight-medium)',