fix(ui): keep checked checkbox checkmark legible across themes

[alexcarpenter]

Description

Fixes the checked checkbox rendering as a blank filled box in dark themes. Previously the checkmark was baked into an SVG background-image with a hardcoded white fill, which disappeared against the light primary500 box in dark mode. The checkmark is now drawn on a masked ::before overlay whose backgroundColor uses the colorPrimaryForeground theme token, so it stays legible across light, dark, and custom themes. To test, render any checkbox (e.g. the sign-up legal consent checkbox) in a dark appearance and confirm the checkmark is visible when checked.

BEFORE	AFTER

Included light mode to show that still works as expected.

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

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

Summary by CodeRabbit

• Bug Fixes
  • Fixed checkbox checkmarks so they remain visible in dark and custom themes.
  • Improved checked-state contrast by aligning the checkmark color with the active theme colors.

[changeset-bot]

🦋 Changeset detected

Latest commit: 989872f

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

This PR includes changesets to release 3 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	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

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jul 2, 2026 7:26pm
swingset	Ready	Preview, Comment	Jul 2, 2026 7:26pm

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Repository UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: 3b51d984-681d-4fda-a4ed-519da4f8cda6

📥 Commits

Reviewing files that changed from the base of the PR and between 2f73bdd and c8ccd2e.

📒 Files selected for processing (2)

• .changeset/checkbox-dark-mode-checkmark.md
• packages/ui/src/primitives/Input.tsx

---

📝 Walkthrough

Walkthrough

The checkbox checked-state checkmark rendering in Input.tsx was changed from an inline SVG background image with a hardcoded white fill to a CSS mask applied via a ::before pseudo-element, colored using the colorPrimaryForeground theme token. A changeset documents this fix.

Changes

Checkbox checkmark theming

Layer / File(s)	Summary
Checkmark mask implementation and changeset packages/ui/src/primitives/Input.tsx, .changeset/checkbox-dark-mode-checkmark.md	Adds a checkboxCheckmarkMask SVG constant, applies it as a mask via ::before with color from theme.colors.$colorPrimaryForeground, sets checked background to primary color, and documents the fix via a patch changeset.

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

Poem

A checkbox once was hard to see,
Its checkmark lost in dark decree.
Now masked in light, foreground bright,
It shines through every theme just right! ✅
A rabbit hops with joy tonight~ 🐇

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main fix: making the checked checkbox checkmark legible across themes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

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

[github-actions]

API Changes Report

Generated by Break Check on 2026-07-02T19:28:03.304Z

Summary

Metric	Count
Packages analyzed	19
Packages with changes	0
🔴 Breaking changes	0
🟡 Non-breaking changes	0
🟢 Additions	0

No API Changes Detected

All packages have stable APIs with no detected changes.

---

Report generated by Break Check

_{Last ran on 989872f.}

[maxyinger]

love having to do the old masked icon trick for responsive fills 😑

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 989872f