fix(clerk-js): Fix neutral alpha shades generation

clerk · Feb 8, 2024 · 42d0669 · 42d0669
1 parent fde58eb
commit 42d0669
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 4 deletions.
diff --git a/.changeset/new-wasps-impress.md b/.changeset/new-wasps-impress.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/utils/colorOptionToHslaScale.ts b/packages/clerk-js/src/ui/utils/colorOptionToHslaScale.ts
@@ -123,7 +123,7 @@ const generateFilledScaleFromBaseHslaColor = (base: HslaColor): InternalColorSca
 };
 
 const generateFilledAlphaScaleFromBaseHslaColor = (base: HslaColor): InternalColorScale<HslaColor> => {
-  const newScale = { 20: undefined, ...createEmptyColorScale<HslaColor>() };
+  const newScale = createEmptyColorScale<HslaColor>();
   const baseWithoutAlpha = colors.setHslaAlpha(base, 0);
   const alphas = [0.02, 0.03, 0.07, 0.11, 0.15, 0.28, 0.41, 0.53, 0.62, 0.73, 0.78, 0.81, 0.84, 0.87, 0.92];
   // @ts-expect-error

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

diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
@@ -417,9 +417,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 (`black`), while dark themes should be using light (`white`) shades. This option applies to borders,
+   * 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 'black'
+   * @default 'hsla(0, 0%, 0%, 0.53)'
    */
   colorNeutral?: CssColorOrAlphaScale;
   /**