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 73% vs 100%
+- Ensure `avatarBackground` and `avatarBorder` render with parsed neutral colors when `colorNeutral` is passed in via variables prop

packages/clerk-js/bundlewatch.config.json

@@ -4,8 +4,8 @@
     { "path": "./dist/clerk.browser.js", "maxSize": "72.2KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "115.08KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "55KB" },
-    { "path": "./dist/ui-common*.js", "maxSize": "111.52KB" },
-    { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "115.33KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "111.55KB" },
+    { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "115.36KB" },
     { "path": "./dist/vendors*.js", "maxSize": "40.2KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
     { "path": "./dist/stripe-vendors*.js", "maxSize": "1KB" },

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.27)
+      : 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,17 @@ 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) ||
+    neutralAlphaScale.neutralAlpha700,
   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) ||
+    neutralAlphaScale.neutralAlpha200,
   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/clerk-js/src/ui/utils/cssSupports.ts

@@ -32,6 +32,7 @@ export const cssSupports = {
    * Returns true if either relativeColorSyntax or colorMix is supported
    */
   modernColor() {
+    return false;
     if (SUPPORTS_MODERN_COLOR !== undefined) return SUPPORTS_MODERN_COLOR;
     try {
       SUPPORTS_MODERN_COLOR = this.relativeColorSyntax() || this.colorMix();

packages/types/src/appearance.ts

@@ -51,7 +51,7 @@
 
 export type CssColorOrScale = string | ColorScaleWithRequiredBase;
 export type CssColorOrAlphaScale = string | AlphaColorScale;
 type CssColor = string | TransparentColor | BuiltInColors;
 type CssLengthUnit = string;
 
 type FontSizeScale = {
@@ -84,7 +84,7 @@
   | 'Trebuchet MS'
   | 'Verdana';
 
 export type FontFamily = string | WebSafeFont;
 
 type LoadingState = 'loading';
 type ErrorState = 'error';
@@ -738,7 +738,7 @@
    */
   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 @@
    */
   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 73% opacity.
+   * @default {@link Variables.colorNeutral} at 73% opacity
    */
   colorModalBackdrop?: CssColor;
   /**