refactor(ui): Render colorRing and colorModalBackdrop at full opacity when modified (#7333)

Author: alexcarpenter

.changeset/bright-zebras-arrive.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': major
+---
+
+Updates both `colorRing` and `colorModalBackdrop` to render at full opacity when modified via the appearance prop or CSS variables. Previously we'd render the provided color at 15% opacity, which made it difficult to dial in a specific ring or backdrop color.

packages/ui/src/customizables/parseVariables.ts

@@ -73,11 +73,9 @@ export const createColorScales = (theme: Theme) => {
       : colors.toHslaString(variables.colorInputBackground),
     colorShimmer: colors.toHslaString(variables.colorShimmer),
     colorMuted: variables.colorMuted ? colors.toHslaString(variables.colorMuted) : undefined,
-    colorRing: variables.colorRing ? colors.makeTransparent(colors.toHslaString(variables.colorRing), 0.85) : undefined,
+    colorRing: variables.colorRing ? colors.toHslaString(variables.colorRing) : undefined,
     colorShadow: variables.colorShadow ? colors.toHslaString(variables.colorShadow) : undefined,
-    colorModalBackdrop: variables.colorModalBackdrop
-      ? colors.makeTransparent(colors.toHslaString(variables.colorModalBackdrop), 0.27)
-      : undefined,
+    colorModalBackdrop: variables.colorModalBackdrop ? colors.toHslaString(variables.colorModalBackdrop) : undefined,
     avatarBackground: neutralAlphaScale?.neutralAlpha400
       ? colors.toHslaString(neutralAlphaScale.neutralAlpha400)
       : undefined,

packages/ui/src/foundations/colors.ts

@@ -88,17 +88,19 @@ const colorMutedForeground = clerkCssVar(
 const colors = Object.freeze({
   avatarBorder: neutralAlphaScale.neutralAlpha200,
   avatarBackground: neutralAlphaScale.neutralAlpha400,
-  colorModalBackdrop:
-    colorUtils.makeTransparent(clerkCssVar('color-modal-backdrop', defaultColorNeutral), 0.27) ||
-    neutralAlphaScale.neutralAlpha700,
+  colorModalBackdrop: clerkCssVar(
+    'color-modal-backdrop',
+    colorUtils.makeTransparent(defaultColorNeutral, 0.27) || neutralAlphaScale.neutralAlpha700,
+  ),
   colorBackground: clerkCssVar('color-background', 'white'),
   colorInput: clerkCssVar('color-input', 'white'),
   colorForeground,
   colorMutedForeground,
   colorMuted: undefined,
-  colorRing:
-    colorUtils.makeTransparent(clerkCssVar('color-ring', defaultColorNeutral), 0.85) ||
-    neutralAlphaScale.neutralAlpha200,
+  colorRing: clerkCssVar(
+    'color-ring',
+    colorUtils.makeTransparent(defaultColorNeutral, 0.85) || neutralAlphaScale.neutralAlpha200,
+  ),
   colorInputForeground: clerkCssVar('color-input-foreground', '#131316'),
   colorPrimaryForeground: clerkCssVar('color-primary-foreground', 'white'),
   colorShimmer: clerkCssVar('color-shimmer', 'rgba(255, 255, 255, 0.36)'),