-
Notifications
You must be signed in to change notification settings - Fork 246
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
feat(clerk-js): Retheme design and arrow on primary button #2121
Conversation
🦋 Changeset detectedLatest commit: 57bd419 The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen 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 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@marcelscruz 🙃 Am I crazy or does the arrow look off-center (vertically) from the text?
@tmilewski It does indeed, but it's the same as the Figma file. |
borderRadius: 'inherit', | ||
zIndex: -1, | ||
inset: 0, | ||
background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.00) 100%)', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we also move this literal value? And also use the color variables instead of hardcoded colors?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We need to use colorPrimary
somehow here, in order for this to be themable.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nevermind, didn't understand that correctly. This property actually creates the shadow effect on the button, so no need to change anything
7d64fbd
to
67d2a62
Compare
chore(clerk-js): Add changeset Remove content from changeset file chore(clerk-js): Move new arrow to separate file chore(clerk-js): Make button shadow a reusable util chore(clerk-js): Use theme values on arrow icon fix(clerk-js): Remove invalid color shades
67d2a62
to
57bd419
Compare
Description
This PR adds the new design and arrow on the primary button.
Checklist
npm test
runs as expected.npm run build
runs as expected.Type of change
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