[alexcarpenter]

Description

Filled IconFrames used --cl-color-background-subtle, an opaque 3% neutral. Interactive Item rows hover to --cl-color-neutral-alpha-100, a translucent 6% neutral, so on hover the frame read as a lighter patch inside the row.

filled now uses --cl-color-neutral-alpha-100, the same token the profile nav items hover to. At rest it looks about the same. On hover it stacks on the row tint and darkens with it.

The reverification method picker's icon frames also drop their border (bordered={false}), matching the add-MFA method picker.

Add 2-step verification

	Before	After
Rest
Hover

Reverification method picker

	Before	After
Rest
Hover

Checklist

• pnpm test runs as expected. The focused IconFrame (7) and reverification (15) tests passed.
• 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

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

[vercel]

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

Project	Deployment	Actions	Updated
clerk-js-sandbox	Ready	Preview	Oct 26, 2026 11:30pm UTC
swingset	Ready	Preview	Oct 26, 2026 11:30pm UTC

[changeset-bot]

🦋 Changeset detected

Latest commit: 24c8dd6

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

This PR includes changesets to release 2 packages

Name	Type
@clerk/mosaic	Patch
@clerk/swingset	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

[coderabbitai]

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

Run configuration

• Source mode: Auto
• Repository: clerk/javascript
• Branch: carp/mosaic-icon-frame-bg
• File: .coderabbit.yaml
• Commit: 24c8dd6
• Layers: Repository YAML (base), Organization UI (inherited)
• Review profile: ASSERTIVE
• Plan: Team
• Run ID: e06307a2-5ef2-4f3e-b5ed-d273c9290cce

Commits

Reviewing files that changed from the base of the PR and between 1cc30ad and 24c8dd6.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

No actionable comments were generated in the recent review.

Recent review info

Run configuration

• Source mode: Auto
• Repository: clerk/javascript
• Branch: carp/mosaic-icon-frame-bg
• File: .coderabbit.yaml
• Commit: 6883e3f
• Layers: Repository YAML (base), Organization UI (inherited)
• Review profile: ASSERTIVE
• Plan: Team
• Run ID: 0f193077-7d6d-45e4-98d1-ba1f20e060fb

Commits

Reviewing files that changed from the base of the PR and between ee34ab7 and 6883e3f.

Files selected for processing: 3

• .changeset/mosaic-icon-frame-hover.md
• packages/mosaic/src/components/icon/icon-frame.styles.ts
• packages/mosaic/src/features/reverification/steps/reverification-method-picker.tsx

🔗 Linked repositories identified

CodeRabbit considers these linked repositories for cross-repo context during reviews:

• clerk/clerk_go (manual)
• clerk/dashboard (manual)
• clerk/accounts (manual)
• clerk/backoffice (manual)
• clerk/clerk (manual)
• clerk/clerk-docs (manual)
• clerk/cloudflare-workers (manual)
• clerk/clerk-android (auto-detected)
• clerk/clerk-ios (auto-detected)
• clerk/cli (auto-detected)

Included review availability: This review used your included allowance. 3 included reviews remain after this review. Your included PR review attempts over the past 7 days set your current allowance at 4 reviews per hour.

Walkthrough

The filled IconFrame background color now uses --cl-color-neutral-alpha-100. Icon frames in ReverificationMethodPicker remain filled and now set bordered to false. A patch changeset records these updates.

Priority: Low

Estimated code review effort: 2 (Simple) | ~8 minutes

Possibly related PRs

• clerk/javascript#10391: Sets user profile IconFrame instances to filled and unbordered, a pattern also used in this change.

Suggested reviewers: austincalvelage, ephem

Merge Risk: Minimal · previous review 6883e

The icon-frame hover styling changes are consistent with the intended UI behavior and are ready to merge.

Pre-merge checks: 4 · 1

Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 2 files. (1 skipped: 1 …	Write docstrings for the functions missing them to satisfy the coverage threshold.

Passed checks: 4 passed

Check name	Status	Explanation
Title check		The title clearly summarizes the primary change: keeping filled icon frames tinted during row hover.
Description check		The description directly explains the icon frame color change, the hover behavior, and the reverification picker border change.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 2 files. (1 skipped: 1 unsupported.)

Resolution

Write docstrings for the functions missing them to satisfy the coverage threshold.

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Warning

Linked repositories: Some configured repositories could not be included in this review. Cross-repository analysis may be incomplete. Please check linked-repository access and settings.

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

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@10423

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@10423

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@10423

@clerk/expo

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

@clerk/expo-biometrics

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

@clerk/expo-google-signin

npm i https://pkg.pr.new/@clerk/expo-google-signin@10423

@clerk/expo-native-components

npm i https://pkg.pr.new/@clerk/expo-native-components@10423

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@10423

@clerk/localizations

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

@clerk/mosaic

npm i https://pkg.pr.new/@clerk/mosaic@10423

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@10423

@clerk/upgrade

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

@clerk/vue

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

commit: 24c8dd6