fix(clerk-js,types): Parsed color adjustments

.changeset/nine-worms-count.md

@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+- Render parsed `colorRing` at 15% vs 100%
+- Render parsed `colorModalBackdrop` at 50% vs 100%
+- Ensure `avatarBackground` and `avatarBorder` render with parsed neutral colors when `colorNeutral` is passed in via variables prop

packages/clerk-js/src/ui/customizables/parseVariables.ts

@@ -74,9 +74,17 @@ 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.toHslaString(variables.colorRing) : undefined,
+    colorRing: variables.colorRing ? colors.makeTransparent(colors.toHslaString(variables.colorRing), 0.85) : undefined,
     colorShadow: variables.colorShadow ? colors.toHslaString(variables.colorShadow) : undefined,
-    colorModalBackdrop: variables.colorModalBackdrop ? colors.toHslaString(variables.colorModalBackdrop) : undefined,
+    colorModalBackdrop: variables.colorModalBackdrop
+      ? colors.makeTransparent(colors.toHslaString(variables.colorModalBackdrop), 0.5)
+      : undefined,
+    avatarBackground: neutralAlphaScale?.neutralAlpha400
+      ? colors.toHslaString(neutralAlphaScale.neutralAlpha400)
+      : undefined,
+    avatarBorder: neutralAlphaScale?.neutralAlpha200
+      ? colors.toHslaString(neutralAlphaScale.neutralAlpha200)
+      : undefined,
   });
 };
 

packages/clerk-js/src/ui/foundations/colors.ts

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

packages/clerk-js/src/ui/polishedAppearance.ts

@@ -10,7 +10,7 @@ const BUTTON_OUTLINE_SHADOW = (color: string) =>
 
 const cardContentStyles = (theme: InternalTheme) => ({
   borderWidth: 0,
-  boxShadow: `${theme.shadows.$cardContentShadow}, ${BORDER_SHADOW_LENGTH} ${theme.colors.$neutralAlpha50}`,
+  boxShadow: `${theme.shadows.$cardContentShadow}, ${BORDER_SHADOW_LENGTH} ${theme.colors.$borderAlpha50}`,
 });
 
 const inputShadowStyles = (

packages/types/src/appearance.ts

@@ -738,7 +738,7 @@ export type Variables = {
    */
   colorShimmer?: CssColor;
   /**
-   * The color of the ring when an interactive element is focused.
+   * The color of the ring when an interactive element is focused rendered at 15% opacity.
    * @default {@link Variables.colorNeutral} at 15% opacity
    */
   colorRing?: CssColor;
@@ -753,8 +753,8 @@ export type Variables = {
    */
   colorBorder?: CssColor;
   /**
-   * The background color of the modal backdrop.
-   * @default {@link Variables.colorNeutral} at 70% opacity
+   * The background color of the modal backdrop rendered at 50% opacity.
+   * @default {@link Variables.colorNeutral} at 50% opacity
    */
   colorModalBackdrop?: CssColor;
   /**