Skip to content

feat(themes): Add shadcn theme #6322

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.

Sign up for GitHub

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

Merged
merged 23 commits into from
Jul 22, 2025
Merged

feat(themes): Add shadcn theme #6322

Changes from 1 commit
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
3a789b4
feat(themes): Add shadcn theme
alexcarpenter Jul 15, 2025
a754749
draft changeset
alexcarpenter Jul 15, 2025
ffdbaf6
add variables
alexcarpenter Jul 16, 2025
f372013
remove borderRadius
alexcarpenter Jul 16, 2025
c4d3803
Merge branch 'main' into alexcarpenter/user-2373-expose-shadcn-theme-…
alexcarpenter Jul 16, 2025
bedb070
use colorMutedForeground for nav links
alexcarpenter Jul 16, 2025
6080472
update vars
alexcarpenter Jul 16, 2025
9fbc4e7
updates
alexcarpenter Jul 16, 2025
365d489
rename cssLayerName to components
alexcarpenter Jul 16, 2025
e511713
hide button overlay
alexcarpenter Jul 16, 2025
46cba11
Update shadcn.ts
alexcarpenter Jul 17, 2025
781b867
Merge branch 'main' into alexcarpenter/user-2373-expose-shadcn-theme-…
alexcarpenter Jul 17, 2025
ed4f6e6
remove CSS layer name
alexcarpenter Jul 17, 2025
f6cc7d0
feat(clerk-js): Add `cssLayerName` option to `experimental_createThem…
alexcarpenter Jul 18, 2025
80671d6
remove log
alexcarpenter Jul 18, 2025
de43a5d
add more test cases
alexcarpenter Jul 18, 2025
6b43103
Revert "remove log"
alexcarpenter Jul 18, 2025
21e4e6d
remove log
alexcarpenter Jul 18, 2025
72eea01
revert NavButton changes
alexcarpenter Jul 18, 2025
3071fb6
add changeset
alexcarpenter Jul 21, 2025
dc32dbd
Merge branch 'main' into alexcarpenter/user-2373-expose-shadcn-theme-…
alexcarpenter Jul 21, 2025
6b94eef
Add font weight variables and refine button selector
alexcarpenter Jul 21, 2025
e7275b5
Merge branch 'main' into alexcarpenter/user-2373-expose-shadcn-theme-…
alexcarpenter Jul 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
use colorMutedForeground for nav links
  • Loading branch information
@alexcarpenter
alexcarpenter committed Jul 16, 2025
commit bedb0700535c32ee293d2383bad471b899d433ad
3 changes: 1 addition & 2 deletions packages/clerk-js/src/ui/elements/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -279,14 +279,13 @@ const NavButton = (props: NavButtonProps) => {
gap: t.space.$3,
justifyContent: 'flex-start',
backgroundColor: isActive ? t.colors.$neutralAlpha100 : undefined,
color: isActive ? t.colors.$primary500 : t.colors.$neutralAlpha600,
color: isActive ? t.colors.$primary500 : t.colors.$colorMutedForeground,
Copy link
Member Author

Choose a reason for hiding this comment

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

This is a change I think we should make. We have a secondary text color that should be used over the neutralAlpha + opacity which currently doesn't have enough contrast in my opinion. This update looks much better in practice.

BEFORE AFTER
Screenshot 2025-07-16 at 2 50 40 PM Screenshot 2025-07-16 at 2 50 04 PM

'&:hover': {
backgroundColor: isActive ? undefined : t.colors.$neutralAlpha25,
},
'&:focus': {
backgroundColor: isActive ? undefined : t.colors.$neutralAlpha50,
},
opacity: isActive ? 1 : 0.6,
}),
sx,
]}
Expand Down
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy