refactor(clerk-js): Tackle design feedback adjustments #6934

alexcarpenter · 2025-10-07T14:48:08Z

Description

Checkbox background color and icon

BEFORE	AFTER

Role select option styles

BEFORE	AFTER

UserPreview text variant

BEFORE	AFTER

Checklist

pnpm test runs as expected.
pnpm 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

Summary by CodeRabbit

Style
- Refined checkbox visuals: crisper checkmark icon, improved sizing/positioning, and clearer checked-state color.
- Unified hover and background styling for role options to use a consistent muted theme background for better contrast.
- Improved User Preview subtitle by applying a caption text variant for clearer visual hierarchy.

changeset-bot · 2025-10-07T14:48:12Z

🦋 Changeset detected

Latest commit: 0c9d50b

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

This PR includes changesets to release 3 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch

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

vercel · 2025-10-07T14:48:15Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
clerk-js-sandbox	Ready	Preview	Comment	Oct 7, 2025 2:51pm

coderabbitai · 2025-10-07T14:48:32Z

Walkthrough

Updated UI styling: checkbox checked appearance changed (SVG and background), role option hover/background uses a muted helper, and UserPreview secondary text now uses the caption text variant. No control-flow or public API changes.

Changes

Cohort / File(s)	Summary of changes
Theme: Checkbox styling `packages/clerk-js/src/ui/baseTheme.ts`	Added `backgroundSize`, `backgroundPosition`, and `backgroundRepeat` to checkbox base style; replaced checked-state backgroundImage with an 8x8 filled SVG path (white fill); set checked `backgroundColor` to `theme.colors.$primary500`; removed prior stroke-based SVG and related overrides.
Components: List and User preview styling `packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx`, `packages/clerk-js/src/ui/elements/UserPreview.tsx`	MemberListTable: option hover/background now uses `common.mutedBackground(theme)` instead of direct neutral tokens; option label renders with `Text` `variant='subtitle'`. UserPreview: secondary identifier `Text` now uses `variant='caption'`.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I nibble styles with careful cheer,
A tiny SVG, crisp and clear.
Muted roles and captioned name,
Little tweaks — the look's not same.
Hoppity hop, the update's near. 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title clearly indicates that this is a refactor of the clerk-js package focused on implementing design feedback adjustments, which matches the changes to checkbox styles, role select options, and user preview text variants. It is concise, uses descriptive language, and aligns with the primary objective of the pull request.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch alexcarpenter/color-tweak-requests

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between bce0160 and 0c9d50b.

📒 Files selected for processing (1)

.changeset/huge-feet-enter.md (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

.changeset/**

📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)

Automated releases must use Changesets.

Files:

.changeset/huge-feet-enter.md

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (28)

GitHub Check: Integration Tests (nextjs, chrome, 15)
GitHub Check: Integration Tests (billing, chrome)
GitHub Check: Integration Tests (react-router, chrome)
GitHub Check: Integration Tests (nextjs, chrome, 14)
GitHub Check: Integration Tests (vue, chrome)
GitHub Check: Integration Tests (custom, chrome)
GitHub Check: Integration Tests (machine, chrome)
GitHub Check: Integration Tests (tanstack-react-router, chrome)
GitHub Check: Integration Tests (sessions, chrome)
GitHub Check: Integration Tests (nuxt, chrome)
GitHub Check: Integration Tests (tanstack-react-start, chrome)
GitHub Check: Integration Tests (sessions:staging, chrome)
GitHub Check: Integration Tests (handshake:staging, chrome)
GitHub Check: Integration Tests (astro, chrome)
GitHub Check: Integration Tests (elements, chrome)
GitHub Check: Integration Tests (ap-flows, chrome)
GitHub Check: Integration Tests (handshake, chrome)
GitHub Check: Integration Tests (localhost, chrome)
GitHub Check: Integration Tests (express, chrome)
GitHub Check: Integration Tests (expo-web, chrome)
GitHub Check: Integration Tests (quickstart, chrome)
GitHub Check: Integration Tests (generic, chrome)
GitHub Check: Publish with pkg-pr-new
GitHub Check: Unit Tests (22, **)
GitHub Check: Unit Tests (18, --filter=@clerk/astro --filter=@clerk/backend --filter=@clerk/express --filter=@c...
GitHub Check: Static analysis
GitHub Check: semgrep-cloud-platform/scan
GitHub Check: semgrep-cloud-platform/scan

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

pkg-pr-new · 2025-10-07T14:53:57Z

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@6934

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@6934

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@6934

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@6934

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@6934

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@6934

@clerk/elements

npm i https://pkg.pr.new/@clerk/elements@6934

@clerk/clerk-expo

npm i https://pkg.pr.new/@clerk/clerk-expo@6934

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@6934

@clerk/express

npm i https://pkg.pr.new/@clerk/express@6934

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@6934

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@6934

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@6934

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@6934

@clerk/clerk-react

npm i https://pkg.pr.new/@clerk/clerk-react@6934

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@6934

@clerk/remix

npm i https://pkg.pr.new/@clerk/remix@6934

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@6934

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@6934

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@6934

@clerk/themes

npm i https://pkg.pr.new/@clerk/themes@6934

@clerk/types

npm i https://pkg.pr.new/@clerk/types@6934

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@6934

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@6934

commit: 0c9d50b

panteliselef · 2025-10-07T18:15:44Z

packages/clerk-js/src/ui/elements/UserPreview.tsx

            as='span'
            localizationKey={subtitle || identifier}
            colorScheme='secondary'
+            variant='caption'


tbh I don't like the end result

@djordjevanjek for visibility

panteliselef · 2025-10-07T18:23:17Z

packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx

          sx={theme => ({
            '&:hover': {
-              backgroundColor: theme.colors.$neutralAlpha100,
+              background: common.mutedBackground(theme),


alexcarpenter added 4 commits October 7, 2025 10:20

chore: Adjust checkbox background color

5d8d324

chore: Adjust role select option styles

7c8e6c4

chore: Adjust user preview text variant

396da13

chore: Update checkmark

bce0160

clerk-cookie added the clerk-js label Oct 7, 2025

alexcarpenter requested a review from djordjevanjek October 7, 2025 14:49

add changeset

0c9d50b

vercel bot deployed to Preview October 7, 2025 14:51 View deployment

panteliselef approved these changes Oct 7, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor(clerk-js): Tackle design feedback adjustments #6934

refactor(clerk-js): Tackle design feedback adjustments #6934

alexcarpenter commented Oct 7, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

changeset-bot bot commented Oct 7, 2025 •

edited

Loading

Uh oh!

vercel bot commented Oct 7, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Oct 7, 2025 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Oct 7, 2025

Uh oh!

panteliselef Oct 7, 2025

Uh oh!

alexcarpenter Oct 7, 2025

Uh oh!

panteliselef Oct 7, 2025

Uh oh!

Uh oh!

refactor(clerk-js): Tackle design feedback adjustments #6934

Are you sure you want to change the base?

refactor(clerk-js): Tackle design feedback adjustments #6934

Conversation

alexcarpenter commented Oct 7, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checkbox background color and icon

Role select option styles

UserPreview text variant

Checklist

Type of change

Summary by CodeRabbit

Uh oh!

changeset-bot bot commented Oct 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel bot commented Oct 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Oct 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Pre-merge checks and finishing touches

Uh oh!

pkg-pr-new bot commented Oct 7, 2025

Uh oh!

panteliselef Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

alexcarpenter Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

panteliselef Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

alexcarpenter commented Oct 7, 2025 •

edited by coderabbitai bot

Loading

changeset-bot bot commented Oct 7, 2025 •

edited

Loading

vercel bot commented Oct 7, 2025 •

edited

Loading

coderabbitai bot commented Oct 7, 2025 •

edited

Loading