diff --git a/.changeset/new-wasps-impress.md b/.changeset/new-wasps-impress.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ 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 index 57c13a1db29..0e16ad04e4c 100644 --- 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 => { - const newScale = { 20: undefined, ...createEmptyColorScale() }; + const newScale = createEmptyColorScale(); 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 index 8e3417939a0..2a92f32bea0 100644 --- 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 index 50e296de929..bb69dee2129 100644 --- 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; /**