From 0ba8afbda4486d8f8e5839ca4bdd216264673aae Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Wed, 22 Oct 2025 11:54:42 -0400
Subject: [PATCH 1/2] refactor(clerk-js): Make color ring full opacity when
 modified

---
 packages/clerk-js/src/ui/customizables/parseVariables.ts | 2 +-
 packages/clerk-js/src/ui/foundations/colors.ts           | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/clerk-js/src/ui/customizables/parseVariables.ts b/packages/clerk-js/src/ui/customizables/parseVariables.ts
index 8bb9b95fd38..b3d4a2aadc3 100644
--- a/packages/clerk-js/src/ui/customizables/parseVariables.ts
+++ b/packages/clerk-js/src/ui/customizables/parseVariables.ts
@@ -74,7 +74,7 @@ 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)
diff --git a/packages/clerk-js/src/ui/foundations/colors.ts b/packages/clerk-js/src/ui/foundations/colors.ts
index 61bddf8baf5..06c2020e453 100644
--- a/packages/clerk-js/src/ui/foundations/colors.ts
+++ b/packages/clerk-js/src/ui/foundations/colors.ts
@@ -96,9 +96,10 @@ const colors = Object.freeze({
   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)'),

From a6c8fda7eece9479a04f69a0e1fd35ef7c98cdcc Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Wed, 22 Oct 2025 12:38:32 -0400
Subject: [PATCH 2/2] apply same refactor to color-modal-backdrop

---
 packages/clerk-js/src/ui/customizables/parseVariables.ts | 4 +---
 packages/clerk-js/src/ui/foundations/colors.ts           | 7 ++++---
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/clerk-js/src/ui/customizables/parseVariables.ts b/packages/clerk-js/src/ui/customizables/parseVariables.ts
index b3d4a2aadc3..9ab22de5d58 100644
--- a/packages/clerk-js/src/ui/customizables/parseVariables.ts
+++ b/packages/clerk-js/src/ui/customizables/parseVariables.ts
@@ -76,9 +76,7 @@ export const createColorScales = (theme: Theme) => {
     colorMuted: variables.colorMuted ? colors.toHslaString(variables.colorMuted) : 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,
diff --git a/packages/clerk-js/src/ui/foundations/colors.ts b/packages/clerk-js/src/ui/foundations/colors.ts
index 06c2020e453..097972c1b6d 100644
--- a/packages/clerk-js/src/ui/foundations/colors.ts
+++ b/packages/clerk-js/src/ui/foundations/colors.ts
@@ -88,9 +88,10 @@ 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,