Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged

Conversation

anagstef
Copy link
Member

@anagstef anagstef commented Feb 7, 2024

Description

This PR fixes an issue in generating alpha shades from a user-provided color.
The value provided for the neutral alpha shades should not be included in the scale.

Before:

Users could provide a single color, a part of the scale, or the whole scale to generate alpha colors. We generated an 50-950 alpha scale based on the 500 shade (or the single color) provided by the user, and then we would set the base color used for generation directly to the shade-500 position. This is problematic, because when user provides the color black, we end up with a scale that has the black color in the shade-500 position, where the shade-950 was lighter than black.

After:

The user will be able to provide only a single color or the whole scale for the colorNeutral property.

  • If user provides a single color: We generate the whole scale based on that single color, and we do not add the base color used into the scale.
  • If user provides the whole scale: We just use the scale provided by the user.

Checklist

  • npm test runs as expected.
  • npm run build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/backend
  • @clerk/chrome-extension
  • @clerk/clerk-js
  • @clerk/clerk-expo
  • @clerk/fastify
  • gatsby-plugin-clerk
  • @clerk/localizations
  • @clerk/nextjs
  • @clerk/clerk-react
  • @clerk/remix
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/themes
  • @clerk/types
  • build/tooling/chore

@anagstef anagstef self-assigned this Feb 7, 2024
Copy link

changeset-bot bot commented Feb 7, 2024

🦋 Changeset detected

Latest commit: 6b9bbaa

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@octoper
Copy link
Member

octoper commented Feb 8, 2024

!preview

@clerk-cookie
Copy link
Collaborator

clerk-cookie commented Feb 8, 2024

Hey @octoper, your preview is available.

Status Preview Updated (UTC)
🍪 Deployed Visit preview Feb 08, 2024 08:39 AM

@anagstef anagstef force-pushed the stefanos/sdk-1307-find-a-solution-for-the-gray-shades branch from 3ed0872 to 036aad7 Compare February 8, 2024 11:09
Copy link
Contributor

@desiprisg desiprisg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

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.
@anagstef anagstef force-pushed the stefanos/sdk-1307-find-a-solution-for-the-gray-shades branch from 036aad7 to 6b9bbaa Compare February 8, 2024 14:04
@anagstef anagstef enabled auto-merge February 8, 2024 14:13
@anagstef anagstef added this pull request to the merge queue Feb 8, 2024
Merged via the queue into main with commit 37b4159 Feb 8, 2024
7 checks passed
@anagstef anagstef deleted the stefanos/sdk-1307-find-a-solution-for-the-gray-shades branch February 8, 2024 14:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants