[austincalvelage]

Description

Align Mosaic’s dark-mode secondary text, borders, subtle backgrounds, and input backgrounds with the Figma palette.

Change dark negative-alpha highlights from translucent red to Figma’s near-white #fafafb. This affects invalid input focus rings, negative menu highlights, error toast icon backgrounds, and invalid tags. The 8% and 12% values match Figma; the existing 6% token uses the same base because Figma has no 6% entry. Values were converted with oklch.com. Light-mode colors and solid error reds stay unchanged.

Dark-mode examples show secondary text and subtle backgrounds, default and focused invalid inputs, an active destructive menu item, and an invalid tag. These static captures use Swingset component markup with the built Mosaic stylesheet and the before/after token values.

Before	After

Checklist

• pnpm test runs as expected. Scoped Mosaic suites passed: 93 tests across Input, InputGroup, Menu, Toast, TagInput, and OTP. Vitest reported a shutdown warning after passing.
• pnpm build runs as expected. CSS build passed; full package build not run. Browser checks confirmed dark and light token values; lint and formatting passed.
• (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 22, 2026 11:43pm UTC
swingset	Ready	Preview	Oct 22, 2026 11:43pm UTC

[changeset-bot]

🦋 Changeset detected

Latest commit: 785becd

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]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Source mode: Auto
• Repository: clerk/javascript
• Branch: austin/token-updates
• File: .coderabbit.yaml
• Commit: 785becd
• Layers: Repository YAML (base), Organization UI (inherited)
• Review profile: ASSERTIVE
• Plan: Team
• Run ID: fb79d533-9351-4f07-90e7-4d1c6debcc3b

📥 Commits

Reviewing files that changed from the base of the PR and between 4cf8e33 and 785becd.

📒 Files selected for processing: 2

• .changeset/tidy-dark-mosaic-colors.md
• packages/mosaic/src/tokens.stylex.ts

🔗 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. 2 included reviews remain after this review. Your included PR review attempts over the past 7 days set your current allowance at 6 reviews per hour.

📝 Walkthrough

The dark-mode values for subtle backgrounds, secondary foreground, and borders have changed. Negative alpha tokens now use explicit dark-mode oklch values. The input token now uses the background token in both color schemes. A patch changeset was added for @clerk/mosaic.

Priority: ⬇️ Low

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

Merge Risk: ⚪ Minimal · up to 785be

The PR contains scoped palette-token updates with no supported production or build risk identified.

Pre-merge checks: 5

Check name	Status	Explanation
Title check		The title clearly and concisely describes the main change: aligning Mosaic color tokens with the Figma palette.
Description check		The description directly explains the dark-mode token changes, affected components, validation results, and scope of the fix.
Docstring Coverage		No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…
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

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1 files. (1 skipped: 1 unsupported.)

• 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@10375

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

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

@clerk/expo

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

@clerk/expo-biometrics

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

@clerk/expo-google-signin

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

@clerk/expo-native-components

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/mosaic

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 785becd