fix(clerk-js): Fix the shade-500 of alpha shade generation

Previously, we added the base color directly as the 500 shade, which is wrong, because the base color should not be included in the alpha scale.

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

@@ -18,15 +18,24 @@ export const createColorScales = (theme: Theme) => {
   const colorTextTertiary = toHSLA(variables.colorTextTertiary) || colors.makeTransparent(colorTextSecondary, 0.4);
   const colorTextLabel = toHSLA(variables.colorTextLabel) || colors.makeTransparent(variables.colorText, 0.05);
 
+  const primaryScale = colorOptionToHslaLightnessScale(variables.colorPrimary, 'primary');
+  const primaryAlphaScale = colorOptionToHslaAlphaScale(primaryScale?.primary500, 'primaryAlpha');
+  const dangerScale = colorOptionToHslaLightnessScale(variables.colorDanger, 'danger');
+  const dangerAlphaScale = colorOptionToHslaAlphaScale(dangerScale?.danger500, 'dangerAlpha');
+  const successScale = colorOptionToHslaLightnessScale(variables.colorSuccess, 'success');
+  const successAlphaScale = colorOptionToHslaAlphaScale(successScale?.success500, 'successAlpha');
+  const warningScale = colorOptionToHslaLightnessScale(variables.colorWarning, 'warning');
+  const warningAlphaScale = colorOptionToHslaAlphaScale(warningScale?.warning500, 'warningAlpha');
+
   return removeUndefinedProps({
-    ...colorOptionToHslaLightnessScale(variables.colorPrimary, 'primary'),
-    ...colorOptionToHslaAlphaScale(variables.colorPrimary, 'primaryAlpha'),
-    ...colorOptionToHslaLightnessScale(variables.colorDanger, 'danger'),
-    ...colorOptionToHslaAlphaScale(variables.colorDanger, 'dangerAlpha'),
-    ...colorOptionToHslaLightnessScale(variables.colorSuccess, 'success'),
-    ...colorOptionToHslaAlphaScale(variables.colorSuccess, 'successAlpha'),
-    ...colorOptionToHslaLightnessScale(variables.colorWarning, 'warning'),
-    ...colorOptionToHslaAlphaScale(variables.colorWarning, 'warningAlpha'),
+    ...primaryScale,
+    ...primaryAlphaScale,
+    ...dangerScale,
+    ...dangerAlphaScale,
+    ...successScale,
+    ...successAlphaScale,
+    ...warningScale,
+    ...warningAlphaScale,
     ...colorOptionToHslaAlphaScale(variables.colorNeutral, 'neutralAlpha'),
     colorTextOnPrimaryBackground: toHSLA(variables.colorTextOnPrimaryBackground),
     colorText: toHSLA(variables.colorText),

packages/clerk-js/src/ui/utils/colorOptionToHslaScale.ts

@@ -1,4 +1,4 @@
-import type { ColorScale, CssColorOrScale, HslaColor, HslaColorString } from '@clerk/types';
+import type { ColorScale, CssColorOrAlphaScale, CssColorOrScale, HslaColor, HslaColorString } from '@clerk/types';
 
 import { colors } from './colors';
 import { fromEntries } from './fromEntries';
@@ -8,6 +8,8 @@ type InternalColorScale<T> = ColorScale<T> & Partial<Record<20, T>>;
 const LIGHT_SHADES = ['25', '50', '100', '150', '200', '300', '400'].reverse();
 const DARK_SHADES = ['600', '700', '750', '800', '850', '900', '950'];
 
+const ALL_SHADES = [...[...LIGHT_SHADES].reverse(), '500', ...DARK_SHADES] as const;
+
 const TARGET_L_50_SHADE = 97;
 const TARGET_L_900_SHADE = 12;
 
@@ -36,10 +38,10 @@ type WithPrefix<T extends Record<string, string>, Prefix extends string> = {
 };
 
 export const colorOptionToHslaAlphaScale = <Prefix extends string>(
-  colorOption: CssColorOrScale | undefined,
+  colorOption: CssColorOrAlphaScale | undefined,
   prefix: Prefix,
 ): WithPrefix<InternalColorScale<HslaColorString>, Prefix> | undefined => {
-  return fillUserProvidedScaleWithGeneratedHslaColors(colorOption, prefix, generateFilledAlphaScaleFromBaseHslaColor);
+  return getUserProvidedScaleOrGenerateHslaColorsScale(colorOption, prefix, generateFilledAlphaScaleFromBaseHslaColor);
 };
 
 export const colorOptionToHslaLightnessScale = <Prefix extends string>(
@@ -49,6 +51,33 @@ export const colorOptionToHslaLightnessScale = <Prefix extends string>(
   return fillUserProvidedScaleWithGeneratedHslaColors(colorOption, prefix, generateFilledScaleFromBaseHslaColor);
 };
 
+const getUserProvidedScaleOrGenerateHslaColorsScale = <Prefix extends string>(
+  colorOption: CssColorOrAlphaScale | undefined,
+  prefix: Prefix,
+  generator: (base: HslaColor) => InternalColorScale<HslaColor>,
+): WithPrefix<InternalColorScale<HslaColorString>, Prefix> | undefined => {
+  if (!colorOption) {
+    return undefined;
+  }
+
+  if (typeof colorOption === 'object' && !ALL_SHADES.every(key => key in colorOption)) {
+    throw new Error('You need to provide all the following shades: ' + ALL_SHADES.join(', '));
+  }
+
+  if (typeof colorOption === 'object') {
+    const scale = Object.keys(colorOption).reduce((acc, key) => {
+      // @ts-expect-error
+      acc[key] = colors.toHslaColor(colorOption[key]);
+      return acc;
+    }, createEmptyColorScale());
+    return prefixAndStringifyHslaScale(scale, prefix);
+  }
+
+  const hslaColor = colors.toHslaColor(colorOption);
+  const filledHslaColorScale = generator(hslaColor);
+  return prefixAndStringifyHslaScale(filledHslaColorScale, prefix);
+};
+
 const fillUserProvidedScaleWithGeneratedHslaColors = <Prefix extends string>(
   colorOption: CssColorOrScale | undefined,
   prefix: Prefix,

packages/themes/src/themes/dark.ts

@@ -3,7 +3,7 @@ import { experimental_createTheme } from '../createTheme';
 export const dark = experimental_createTheme({
   variables: {
     colorBackground: '#212126',
-    colorNeutral: 'hsla(0, 0%, 100%, 0.53)',
+    colorNeutral: 'white',
     colorPrimary: '#ffffff',
     colorTextOnPrimaryBackground: 'black',
     colorText: 'white',

packages/types/src/appearance.ts

@@ -41,7 +41,9 @@ type Shade =
   | '900'
   | '950';
 export type ColorScale<T = string> = Record<Shade, T>;
-export type AlphaColorScale<T = string> = Record<'20' | Shade, T>;
+export type AlphaColorScale<T = string> = {
+  [K in Shade]: T;
+};
 
 export type ColorScaleWithRequiredBase<T = string> = Partial<ColorScale<T>> & { '500': T };
 
@@ -417,9 +419,9 @@ export type Variables = {
   colorWarning?: CssColorOrScale;
   /**
    * The color that will be used as the neutral color for all the components. To achieve sufficient contrast,
-   * light themes should be using dark shades, while dark themes should be using light shades. This option applies to borders,
-   * backgrounds for hovered elements, hovered dropdown options etc.
-   * @default 'hsla(0, 0%, 0%, 0.53)'
+   * light themes should be using dark shades ('black'), while dark themes should be using light shades ('white').
+   * This option applies to borders, backgrounds for hovered elements, hovered dropdown options etc.
+   * @default 'black'
    */
   colorNeutral?: CssColorOrAlphaScale;
   /**