feat(ui): add Mosaic Badge component - #9221

Merged
alexcarpenter merged 13 commits into
mainfrom
carp/mosaic-badge
Jul 28, 2026
Merged

feat(ui): add Mosaic Badge component#9221
alexcarpenter merged 13 commits into
mainfrom
carp/mosaic-badge

Conversation

@alexcarpenter

@alexcarpenteralexcarpenter commented Jul 22, 2026•
edited
Loading

Copy link
Copy Markdown
Member

Adds Mosaic Badge. StyleX, span root, one intent axis: primary | secondary | warning | destructive | success.

Preview: https://swingset-git-carp-mosaic-badge.clerkstage.dev/components/badge

@changeset-bot

changeset-botBot commented Jul 22, 2026•
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 4ba9759

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

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

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

vercelBot commented Jul 22, 2026•
edited
Loading

Copy link
Copy Markdown

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

ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJul 28, 2026 3:47pm
swingsetReadyReadyPreview, CommentJul 28, 2026 3:47pm

Request Review

@pkg-pr-new

pkg-pr-newBot commented Jul 22, 2026•
edited
Loading

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

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

@clerk/expo

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

@clerk/expo-google-signin

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 4ba9759

@github-actions

github-actionsBot commented Jul 22, 2026•
edited
Loading

Copy link
Copy Markdown
Contributor

API Changes Report

Generated by Break Check on 2026-07-28T15:48:44.482Z

Summary

MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0

No API Changes Detected

All packages have stable APIs with no detected changes.

Report generated by Break Check

Last ran on 4ba9759.

@coderabbitai

coderabbitaiBot commented Jul 22, 2026•
edited
Loading

Copy link
Copy Markdown
Contributor

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

Adds a new Mosaic Badge component with color variants, StyleX styling and tokens, forwarded props and refs, tests, Storybook stories, and MDX documentation. Registers the component in Swingset, exposes its public exports, updates PropTable rendering, externalizes headless packages, updates button color tokens, and adds a changeset.

Estimated code review effort: 3 (Moderate) | ~25 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly summarizes the main change: adding the Mosaic Badge component.
Description check✅ PassedThe description is related to the Badge component work, even though some prop names are stale.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

coderabbitai[bot]
coderabbitaiBot reviewed Jul 22, 2026
View reviewed changes

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.changeset/mosaic-badge.md:
- Around line 1-2: Replace the empty frontmatter in mosaic-badge.md with a
changeset entry for `@clerk/ui` using a minor release level, preserving the
required changeset format so the new public Badge component and props API
generate a package bump and changelog entry.
In `@packages/swingset/src/stories/badge.stories.tsx`:
- Around line 1-2: Add the required top-level Emotion JSX import-source pragma
to the badge story before its imports, while preserving the existing BadgeProps
and Badge imports.
In `@packages/ui/src/mosaic/components/badge/badge.tsx`:
- Around line 18-19: Update the Badge component’s prop spread order so rest
props are applied before the component-owned themeProps result, preventing
consumers from overriding the resolved intent metadata. Preserve the existing
style and className resolution, and add a regression test covering an intent
such as success with conflicting rest metadata to verify the resolved intent
wins.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration

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

Review profile: CHILL

Plan: Pro Plus

Run ID: f2fefe08-7668-4d38-97b4-36691ea6f821

📥 Commits

Reviewing files that changed from the base of the PR and between 68ae308 and e5fb0a1.

📒 Files selected for processing (11)
  • .changeset/mosaic-badge.md
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/badge.mdx
  • packages/swingset/src/stories/badge.stories.tsx
  • packages/ui/src/mosaic/components/badge/badge.styles.ts
  • packages/ui/src/mosaic/components/badge/badge.test.tsx
  • packages/ui/src/mosaic/components/badge/badge.tsx
  • packages/ui/src/mosaic/components/badge/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • packages/ui/src/mosaic/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)

Comment thread.changeset/mosaic-badge.md
Comment threadpackages/swingset/src/stories/badge.stories.tsx
Comment on lines +1 to +2
import type { BadgeProps } from '@clerk/ui/mosaic/components/badge';
import { Badge } from '@clerk/ui/mosaic/components/badge';

@coderabbitaicoderabbitaiBotJul 22, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Add the required Emotion JSX pragma.

This story renders a styled Mosaic component but lacks the required top-level @jsxImportSource pragma.

+/** `@jsxImportSource` `@emotion/react` */+
import type { BadgeProps } from '`@clerk/ui/mosaic/components/badge`';

As per coding guidelines, “Use Emotion pragma /** @jsxImportSource@emotion/react */ at the top of story files that render styled Mosaic components.”

📝 Committable suggestion

‼️IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
importtype{BadgeProps}from'@clerk/ui/mosaic/components/badge';
import{Badge}from'@clerk/ui/mosaic/components/badge';
/** `@jsxImportSource` `@emotion/react` */
importtype{BadgeProps}from'`@clerk/ui/mosaic/components/badge`';
import{Badge}from'`@clerk/ui/mosaic/components/badge`';
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/swingset/src/stories/badge.stories.tsx` around lines 1 - 2, Add the
required top-level Emotion JSX import-source pragma to the badge story before
its imports, while preserving the existing BadgeProps and Badge imports.

Source: Coding guidelines

Comment threadpackages/ui/src/mosaic/components/badge/badge.tsx Outdated
coderabbitai[bot]
coderabbitaiBot reviewed Jul 23, 2026
View reviewed changes

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/mosaic/components/badge/badge.styles.ts`:
- Around line 34-43: Update the warning and success variants in the badge styles
to meet at least 4.5:1 contrast for label-sm text in light and dark themes,
using appropriate contrast-paired foreground tokens or adjusted faded fills
while leaving destructive unchanged. Add contrast tests covering warning in
light mode and success in dark mode.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration

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

Review profile: CHILL

Plan: Pro Plus

Run ID: 359f20ad-7b5b-46fc-9c96-2cef54c7e062

📥 Commits

Reviewing files that changed from the base of the PR and between e5fb0a1 and 173b95d.

📒 Files selected for processing (2)
  • packages/ui/src/mosaic/components/badge/badge.styles.ts
  • packages/ui/src/mosaic/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-ios(auto-detected)
  • clerk/cli(auto-detected)
  • clerk/clerk-android(auto-detected)

Comment threadpackages/ui/src/mosaic/components/badge/badge.styles.ts Outdated
@coderabbitaicoderabbitaiBot mentioned this pull request Jul 23, 2026
Merged
4 tasks
@alexcarpenter
refactor(ui): rename Badge intent prop to color
5406ee6
- values: secondary→neutral, destructive→negative, success→positive
- swingset PropTable: sx row now opt-out (Badge is StyleX, no sx)
- docs: document render prop
coderabbitai[bot]
coderabbitaiBot reviewed Jul 27, 2026
View reviewed changes

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/mosaic/tokens.stylex.ts`:
- Around line 29-44: Restore the deprecated --cl-color-destructive* and
--cl-color-muted* aliases in the exported colorVars alongside the replacement
negative and neutral tokens. Map each alias to its corresponding current token,
preserving compatibility for existing SDK styles and consumer customizations.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration

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

Review profile: CHILL

Plan: Pro Plus

Run ID: d6a66e4b-7245-437c-97f3-09c71b4ce92f

📥 Commits

Reviewing files that changed from the base of the PR and between 173b95d and 5406ee6.

📒 Files selected for processing (13)
  • .changeset/mosaic-badge.md
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/components/PropTable.tsx
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/badge.mdx
  • packages/swingset/src/stories/badge.stories.tsx
  • packages/ui/src/mosaic/components/badge/badge.styles.ts
  • packages/ui/src/mosaic/components/badge/badge.test.tsx
  • packages/ui/src/mosaic/components/badge/badge.tsx
  • packages/ui/src/mosaic/components/badge/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • packages/ui/src/mosaic/tokens.stylex.ts
  • packages/ui/tsdown.mosaic.config.mts
🔗 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)
🚧 Files skipped from review as they are similar to previous changes (5)
  • packages/ui/src/mosaic/components/badge/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/stories/badge.mdx
  • packages/swingset/src/lib/registry.ts

Comment threadpackages/ui/src/mosaic/tokens.stylex.ts
@vercel
vercelBottemporarily deployed to Preview – clerk-js-sandbox July 27, 2026 19:55 Inactive
@alexcarpenter
fix(repo): hot-reload Mosaic StyleX edits in swingset dev
3401708
Dev now injects StyleX at runtime (unplugin runtimeInjection) instead of the
build-time globals.css extraction, which Next never re-ran on .styles.ts edits.
Prod keeps static extraction.
@vercel
vercelBottemporarily deployed to Preview – clerk-js-sandbox July 28, 2026 14:24 Inactive
@alexcarpenter
fix(ui): define Mosaic spacing scale with defineVars so it resolves c…
d9eb41d
…ross-module
defineConsts emits no CSS across module boundaries, so every consumer of the
space scale (Badge, Button, ...) got dangling var(--hash) references with no
:root default and collapsed spacing. Switch space to defineVars (like astryx's
spacingVars), keeping the calc(var(--cl-spacing) * n) values so --cl-spacing
still rescales the whole scale and the steps stay hashed (only --cl-spacing is
publicly targetable). Call sites are unchanged.
@alexcarpenter
fix(swingset): run StyleX extraction in dev so token :root defaults r…
c07c514
…esolve
defineVars token :root defaults are compile-time only (the runtime export
throws), so runtimeInjection alone left every var(--cl-*) unresolved. Keep the
postcss extraction on in dev for the static :root defaults and keep
runtimeInjection for fresh atoms on edit; drop the treeshakeCompensation
experiment that didn't help.
@alexcarpenter
extract colors from styles
3a910e0
@alexcarpenter
alexcarpenter merged commit d8407c9 into mainJul 28, 2026
84 of 85 checks passed
@alexcarpenter
alexcarpenter deleted the carp/mosaic-badge branch July 28, 2026 16:35
This was referenced Jul 28, 2026
Merged
Merged
Merged
Closed
Merged
Merged
Merged
Closed
Merged
This was referenced Aug 5, 2026
Merged
Merged
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@maxyingermaxyingermaxyinger approved these changes

Assignees

No one assigned

Labels

ui

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@maxyinger
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
feat(ui): add Mosaic Badge component - #9221
Merged
alexcarpenter merged 13 commits into
mainfrom 
carp/mosaic-badge
Jul 28, 2026
Merged
feat(ui): add Mosaic Badge component#9221
alexcarpenter merged 13 commits into
mainfrom 
carp/mosaic-badge
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Member
Adds Mosaic Badge. StyleX, span root, one intent axis: primary | secondary | warning | destructive | success.
Preview: https://swingset-git-carp-mosaic-badge.clerkstage.dev/components/badge
@changeset-bot
changeset-botBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 4ba9759
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 0 packages
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
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
vercelBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJul 28, 2026 3:47pm
swingsetReadyReadyPreview, CommentJul 28, 2026 3:47pm
Request Review
@pkg-pr-new
pkg-pr-newBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@9221

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: 4ba9759
@github-actions
github-actionsBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
API Changes Report
Generated by Break Check on 2026-07-28T15:48:44.482Z
Summary
MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0
No API Changes Detected
All packages have stable APIs with no detected changes.
Report generated by Break Check
Last ran on 4ba9759.
@coderabbitai
coderabbitaiBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
Note
Reviews paused
It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.
Use the following commands to manage reviews:
  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.
Use the checkboxes below for quick actions:
  • ▶️ Resume reviews
  •  🔍 Trigger review
📝 Walkthrough
Walkthrough
Adds a new Mosaic Badge component with color variants, StyleX styling and tokens, forwarded props and refs, tests, Storybook stories, and MDX documentation. Registers the component in Swingset, exposes its public exports, updates PropTable rendering, externalizes headless packages, updates button color tokens, and adds a changeset.
Estimated code review effort: 3 (Moderate) | ~25 minutes
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly summarizes the main change: adding the Mosaic Badge component.
Description check✅ PassedThe description is related to the Badge component work, even though some prop names are stale.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 22, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.changeset/mosaic-badge.md:
- Around line 1-2: Replace the empty frontmatter in mosaic-badge.md with a
changeset entry for `@clerk/ui` using a minor release level, preserving the
required changeset format so the new public Badge component and props API
generate a package bump and changelog entry.
In `@packages/swingset/src/stories/badge.stories.tsx`:
- Around line 1-2: Add the required top-level Emotion JSX import-source pragma
to the badge story before its imports, while preserving the existing BadgeProps
and Badge imports.
In `@packages/ui/src/mosaic/components/badge/badge.tsx`:
- Around line 18-19: Update the Badge component’s prop spread order so rest
props are applied before the component-owned themeProps result, preventing
consumers from overriding the resolved intent metadata. Preserve the existing
style and className resolution, and add a regression test covering an intent
such as success with conflicting rest metadata to verify the resolved intent
wins.

🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: f2fefe08-7668-4d38-97b4-36691ea6f821
📥 Commits
Reviewing files that changed from the base of the PR and between 68ae308 and e5fb0a1.
📒 Files selected for processing (11)
  • .changeset/mosaic-badge.md
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/badge.mdx
  • packages/swingset/src/stories/badge.stories.tsx
  • packages/ui/src/mosaic/components/badge/badge.styles.ts
  • packages/ui/src/mosaic/components/badge/badge.test.tsx
  • packages/ui/src/mosaic/components/badge/badge.tsx
  • packages/ui/src/mosaic/components/badge/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • packages/ui/src/mosaic/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)
Comment thread.changeset/mosaic-badge.md
Comment threadpackages/swingset/src/stories/badge.stories.tsx

Comment on lines

+1
 to 
+2

import type { BadgeProps } from '@clerk/ui/mosaic/components/badge';
import { Badge } from '@clerk/ui/mosaic/components/badge';
@coderabbitaicoderabbitaiBotJul 22, 2026

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Add the required Emotion JSX pragma.
This story renders a styled Mosaic component but lacks the required top-level @jsxImportSource pragma.
+/** `@jsxImportSource` `@emotion/react` */+
import type { BadgeProps } from '`@clerk/ui/mosaic/components/badge`';
As per coding guidelines, “Use Emotion pragma /** @jsxImportSource@emotion/react */ at the top of story files that render styled Mosaic components.”
📝 Committable suggestion
‼️IMPORTANT

Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

importtype{BadgeProps}from'@clerk/ui/mosaic/components/badge';
import{Badge}from'@clerk/ui/mosaic/components/badge';
/** `@jsxImportSource` `@emotion/react` */
importtype{BadgeProps}from'`@clerk/ui/mosaic/components/badge`';
import{Badge}from'`@clerk/ui/mosaic/components/badge`';
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/swingset/src/stories/badge.stories.tsx` around lines 1 - 2, Add the
required top-level Emotion JSX import-source pragma to the badge story before
its imports, while preserving the existing BadgeProps and Badge imports.

Source: Coding guidelines
Comment threadpackages/ui/src/mosaic/components/badge/badge.tsx
Outdated

coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 23, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/mosaic/components/badge/badge.styles.ts`:
- Around line 34-43: Update the warning and success variants in the badge styles
to meet at least 4.5:1 contrast for label-sm text in light and dark themes,
using appropriate contrast-paired foreground tokens or adjusted faded fills
while leaving destructive unchanged. Add contrast tests covering warning in
light mode and success in dark mode.

🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 359f20ad-7b5b-46fc-9c96-2cef54c7e062
📥 Commits
Reviewing files that changed from the base of the PR and between e5fb0a1 and 173b95d.
📒 Files selected for processing (2)
  • packages/ui/src/mosaic/components/badge/badge.styles.ts
  • packages/ui/src/mosaic/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-ios(auto-detected)
  • clerk/cli(auto-detected)
  • clerk/clerk-android(auto-detected)
Comment threadpackages/ui/src/mosaic/components/badge/badge.styles.ts
Outdated

@coderabbitaicoderabbitaiBot
mentioned this pull request
Jul 23, 2026
 Merged

4 tasks
@alexcarpenter
refactor(ui): rename Badge intent prop to color
5406ee6
- values: secondary→neutral, destructive→negative, success→positive
- swingset PropTable: sx row now opt-out (Badge is StyleX, no sx)
- docs: document render prop
coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 27, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/mosaic/tokens.stylex.ts`:
- Around line 29-44: Restore the deprecated --cl-color-destructive* and
--cl-color-muted* aliases in the exported colorVars alongside the replacement
negative and neutral tokens. Map each alias to its corresponding current token,
preserving compatibility for existing SDK styles and consumer customizations.

🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: d6a66e4b-7245-437c-97f3-09c71b4ce92f
📥 Commits
Reviewing files that changed from the base of the PR and between 173b95d and 5406ee6.
📒 Files selected for processing (13)
  • .changeset/mosaic-badge.md
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/components/PropTable.tsx
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/badge.mdx
  • packages/swingset/src/stories/badge.stories.tsx
  • packages/ui/src/mosaic/components/badge/badge.styles.ts
  • packages/ui/src/mosaic/components/badge/badge.test.tsx
  • packages/ui/src/mosaic/components/badge/badge.tsx
  • packages/ui/src/mosaic/components/badge/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • packages/ui/src/mosaic/tokens.stylex.ts
  • packages/ui/tsdown.mosaic.config.mts
🔗 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)
🚧 Files skipped from review as they are similar to previous changes (5)
  • packages/ui/src/mosaic/components/badge/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/stories/badge.mdx
  • packages/swingset/src/lib/registry.ts
Comment threadpackages/ui/src/mosaic/tokens.stylex.ts
@vercel
vercelBottemporarily deployed
to
Preview – clerk-js-sandbox
July 27, 2026 19:55
Inactive

@alexcarpenter
fix(repo): hot-reload Mosaic StyleX edits in swingset dev
3401708
Dev now injects StyleX at runtime (unplugin runtimeInjection) instead of the
build-time globals.css extraction, which Next never re-ran on .styles.ts edits.
Prod keeps static extraction.
@vercel
vercelBottemporarily deployed
to
Preview – clerk-js-sandbox
July 28, 2026 14:24
Inactive

@alexcarpenter
fix(ui): define Mosaic spacing scale with defineVars so it resolves c…
d9eb41d
…ross-module
defineConsts emits no CSS across module boundaries, so every consumer of the
space scale (Badge, Button, ...) got dangling var(--hash) references with no
:root default and collapsed spacing. Switch space to defineVars (like astryx's
spacingVars), keeping the calc(var(--cl-spacing) * n) values so --cl-spacing
still rescales the whole scale and the steps stay hashed (only --cl-spacing is
publicly targetable). Call sites are unchanged.
@alexcarpenter
fix(swingset): run StyleX extraction in dev so token :root defaults r…
c07c514
…esolve
defineVars token :root defaults are compile-time only (the runtime export
throws), so runtimeInjection alone left every var(--cl-*) unresolved. Keep the
postcss extraction on in dev for the static :root defaults and keep
runtimeInjection for fresh atoms on edit; drop the treeshakeCompensation
experiment that didn't help.
@alexcarpenter
extract colors from styles
3a910e0
@alexcarpenter
alexcarpenter
merged commit d8407c9
into
mainJul 28, 2026

84 of 85 checks passed

@alexcarpenter
alexcarpenter
deleted the

carp/mosaic-badge

branch
July 28, 2026 16:35

This was referenced Jul 28, 2026
 Merged

 Merged

 Merged

 Closed

 Merged

 Merged

 Merged

 Closed

 Merged


This was referenced Aug 5, 2026
 Merged

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@maxyingermaxyingermaxyinger approved these changes

Assignees


No one assigned


Labels

ui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@maxyinger

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(ui): add Mosaic Badge component - #9221
Merged
alexcarpenter merged 13 commits into
mainfrom 
carp/mosaic-badge
Jul 28, 2026
Merged
feat(ui): add Mosaic Badge component#9221
alexcarpenter merged 13 commits into
mainfrom 
carp/mosaic-badge
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Member
Adds Mosaic Badge. StyleX, span root, one intent axis: primary | secondary | warning | destructive | success.
Preview: https://swingset-git-carp-mosaic-badge.clerkstage.dev/components/badge
@changeset-bot
changeset-botBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 4ba9759
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 0 packages
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
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
vercelBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJul 28, 2026 3:47pm
swingsetReadyReadyPreview, CommentJul 28, 2026 3:47pm
Request Review
@pkg-pr-new
pkg-pr-newBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@9221

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: 4ba9759
@github-actions
github-actionsBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
API Changes Report
Generated by Break Check on 2026-07-28T15:48:44.482Z
Summary
MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0
No API Changes Detected
All packages have stable APIs with no detected changes.
Report generated by Break Check
Last ran on 4ba9759.
@coderabbitai
coderabbitaiBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
Note
Reviews paused
It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.
Use the following commands to manage reviews:
  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.
Use the checkboxes below for quick actions:
  • ▶️ Resume reviews
  •  🔍 Trigger review
📝 Walkthrough
Walkthrough
Adds a new Mosaic Badge component with color variants, StyleX styling and tokens, forwarded props and refs, tests, Storybook stories, and MDX documentation. Registers the component in Swingset, exposes its public exports, updates PropTable rendering, externalizes headless packages, updates button color tokens, and adds a changeset.
Estimated code review effort: 3 (Moderate) | ~25 minutes
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly summarizes the main change: adding the Mosaic Badge component.
Description check✅ PassedThe description is related to the Badge component work, even though some prop names are stale.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 22, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.changeset/mosaic-badge.md:
- Around line 1-2: Replace the empty frontmatter in mosaic-badge.md with a
changeset entry for `@clerk/ui` using a minor release level, preserving the
required changeset format so the new public Badge component and props API
generate a package bump and changelog entry.
In `@packages/swingset/src/stories/badge.stories.tsx`:
- Around line 1-2: Add the required top-level Emotion JSX import-source pragma
to the badge story before its imports, while preserving the existing BadgeProps
and Badge imports.
In `@packages/ui/src/mosaic/components/badge/badge.tsx`:
- Around line 18-19: Update the Badge component’s prop spread order so rest
props are applied before the component-owned themeProps result, preventing
consumers from overriding the resolved intent metadata. Preserve the existing
style and className resolution, and add a regression test covering an intent
such as success with conflicting rest metadata to verify the resolved intent
wins.

🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: f2fefe08-7668-4d38-97b4-36691ea6f821
📥 Commits
Reviewing files that changed from the base of the PR and between 68ae308 and e5fb0a1.
📒 Files selected for processing (11)
  • .changeset/mosaic-badge.md
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/badge.mdx
  • packages/swingset/src/stories/badge.stories.tsx
  • packages/ui/src/mosaic/components/badge/badge.styles.ts
  • packages/ui/src/mosaic/components/badge/badge.test.tsx
  • packages/ui/src/mosaic/components/badge/badge.tsx
  • packages/ui/src/mosaic/components/badge/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • packages/ui/src/mosaic/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)
Comment thread.changeset/mosaic-badge.md
Comment threadpackages/swingset/src/stories/badge.stories.tsx

Comment on lines

+1
 to 
+2

import type { BadgeProps } from '@clerk/ui/mosaic/components/badge';
import { Badge } from '@clerk/ui/mosaic/components/badge';
@coderabbitaicoderabbitaiBotJul 22, 2026

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Add the required Emotion JSX pragma.
This story renders a styled Mosaic component but lacks the required top-level @jsxImportSource pragma.
+/** `@jsxImportSource` `@emotion/react` */+
import type { BadgeProps } from '`@clerk/ui/mosaic/components/badge`';
As per coding guidelines, “Use Emotion pragma /** @jsxImportSource@emotion/react */ at the top of story files that render styled Mosaic components.”
📝 Committable suggestion
‼️IMPORTANT

Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

importtype{BadgeProps}from'@clerk/ui/mosaic/components/badge';
import{Badge}from'@clerk/ui/mosaic/components/badge';
/** `@jsxImportSource` `@emotion/react` */
importtype{BadgeProps}from'`@clerk/ui/mosaic/components/badge`';
import{Badge}from'`@clerk/ui/mosaic/components/badge`';
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/swingset/src/stories/badge.stories.tsx` around lines 1 - 2, Add the
required top-level Emotion JSX import-source pragma to the badge story before
its imports, while preserving the existing BadgeProps and Badge imports.

Source: Coding guidelines
Comment threadpackages/ui/src/mosaic/components/badge/badge.tsx
Outdated

coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 23, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/mosaic/components/badge/badge.styles.ts`:
- Around line 34-43: Update the warning and success variants in the badge styles
to meet at least 4.5:1 contrast for label-sm text in light and dark themes,
using appropriate contrast-paired foreground tokens or adjusted faded fills
while leaving destructive unchanged. Add contrast tests covering warning in
light mode and success in dark mode.

🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 359f20ad-7b5b-46fc-9c96-2cef54c7e062
📥 Commits
Reviewing files that changed from the base of the PR and between e5fb0a1 and 173b95d.
📒 Files selected for processing (2)
  • packages/ui/src/mosaic/components/badge/badge.styles.ts
  • packages/ui/src/mosaic/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-ios(auto-detected)
  • clerk/cli(auto-detected)
  • clerk/clerk-android(auto-detected)
Comment threadpackages/ui/src/mosaic/components/badge/badge.styles.ts
Outdated

@coderabbitaicoderabbitaiBot
mentioned this pull request
Jul 23, 2026
 Merged

4 tasks
@alexcarpenter
refactor(ui): rename Badge intent prop to color
5406ee6
- values: secondary→neutral, destructive→negative, success→positive
- swingset PropTable: sx row now opt-out (Badge is StyleX, no sx)
- docs: document render prop
coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 27, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/mosaic/tokens.stylex.ts`:
- Around line 29-44: Restore the deprecated --cl-color-destructive* and
--cl-color-muted* aliases in the exported colorVars alongside the replacement
negative and neutral tokens. Map each alias to its corresponding current token,
preserving compatibility for existing SDK styles and consumer customizations.

🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: d6a66e4b-7245-437c-97f3-09c71b4ce92f
📥 Commits
Reviewing files that changed from the base of the PR and between 173b95d and 5406ee6.
📒 Files selected for processing (13)
  • .changeset/mosaic-badge.md
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/components/PropTable.tsx
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/badge.mdx
  • packages/swingset/src/stories/badge.stories.tsx
  • packages/ui/src/mosaic/components/badge/badge.styles.ts
  • packages/ui/src/mosaic/components/badge/badge.test.tsx
  • packages/ui/src/mosaic/components/badge/badge.tsx
  • packages/ui/src/mosaic/components/badge/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • packages/ui/src/mosaic/tokens.stylex.ts
  • packages/ui/tsdown.mosaic.config.mts
🔗 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)
🚧 Files skipped from review as they are similar to previous changes (5)
  • packages/ui/src/mosaic/components/badge/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/stories/badge.mdx
  • packages/swingset/src/lib/registry.ts
Comment threadpackages/ui/src/mosaic/tokens.stylex.ts
@vercel
vercelBottemporarily deployed
to
Preview – clerk-js-sandbox
July 27, 2026 19:55
Inactive

@alexcarpenter
fix(repo): hot-reload Mosaic StyleX edits in swingset dev
3401708
Dev now injects StyleX at runtime (unplugin runtimeInjection) instead of the
build-time globals.css extraction, which Next never re-ran on .styles.ts edits.
Prod keeps static extraction.
@vercel
vercelBottemporarily deployed
to
Preview – clerk-js-sandbox
July 28, 2026 14:24
Inactive

@alexcarpenter
fix(ui): define Mosaic spacing scale with defineVars so it resolves c…
d9eb41d
…ross-module
defineConsts emits no CSS across module boundaries, so every consumer of the
space scale (Badge, Button, ...) got dangling var(--hash) references with no
:root default and collapsed spacing. Switch space to defineVars (like astryx's
spacingVars), keeping the calc(var(--cl-spacing) * n) values so --cl-spacing
still rescales the whole scale and the steps stay hashed (only --cl-spacing is
publicly targetable). Call sites are unchanged.
@alexcarpenter
fix(swingset): run StyleX extraction in dev so token :root defaults r…
c07c514
…esolve
defineVars token :root defaults are compile-time only (the runtime export
throws), so runtimeInjection alone left every var(--cl-*) unresolved. Keep the
postcss extraction on in dev for the static :root defaults and keep
runtimeInjection for fresh atoms on edit; drop the treeshakeCompensation
experiment that didn't help.
@alexcarpenter
extract colors from styles
3a910e0
@alexcarpenter
alexcarpenter
merged commit d8407c9
into
mainJul 28, 2026

84 of 85 checks passed

@alexcarpenter
alexcarpenter
deleted the

carp/mosaic-badge

branch
July 28, 2026 16:35

This was referenced Jul 28, 2026
 Merged

 Merged

 Merged

 Closed

 Merged

 Merged

 Merged

 Closed

 Merged


This was referenced Aug 5, 2026
 Merged

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@maxyingermaxyingermaxyinger approved these changes

Assignees


No one assigned


Labels

ui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@maxyinger

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(ui): add Mosaic Badge component - #9221
Merged
alexcarpenter merged 13 commits into
mainfrom 
carp/mosaic-badge
Jul 28, 2026
Merged
feat(ui): add Mosaic Badge component#9221
alexcarpenter merged 13 commits into
mainfrom 
carp/mosaic-badge
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Member
Adds Mosaic Badge. StyleX, span root, one intent axis: primary | secondary | warning | destructive | success.
Preview: https://swingset-git-carp-mosaic-badge.clerkstage.dev/components/badge
@changeset-bot
changeset-botBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 4ba9759
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 0 packages
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
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
vercelBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJul 28, 2026 3:47pm
swingsetReadyReadyPreview, CommentJul 28, 2026 3:47pm
Request Review
@pkg-pr-new
pkg-pr-newBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@9221

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: 4ba9759
@github-actions
github-actionsBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
API Changes Report
Generated by Break Check on 2026-07-28T15:48:44.482Z
Summary
MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0
No API Changes Detected
All packages have stable APIs with no detected changes.
Report generated by Break Check
Last ran on 4ba9759.
@coderabbitai
coderabbitaiBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
Note
Reviews paused
It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.
Use the following commands to manage reviews:
  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.
Use the checkboxes below for quick actions:
  • ▶️ Resume reviews
  •  🔍 Trigger review
📝 Walkthrough
Walkthrough
Adds a new Mosaic Badge component with color variants, StyleX styling and tokens, forwarded props and refs, tests, Storybook stories, and MDX documentation. Registers the component in Swingset, exposes its public exports, updates PropTable rendering, externalizes headless packages, updates button color tokens, and adds a changeset.
Estimated code review effort: 3 (Moderate) | ~25 minutes
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly summarizes the main change: adding the Mosaic Badge component.
Description check✅ PassedThe description is related to the Badge component work, even though some prop names are stale.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 22, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.changeset/mosaic-badge.md:
- Around line 1-2: Replace the empty frontmatter in mosaic-badge.md with a
changeset entry for `@clerk/ui` using a minor release level, preserving the
required changeset format so the new public Badge component and props API
generate a package bump and changelog entry.
In `@packages/swingset/src/stories/badge.stories.tsx`:
- Around line 1-2: Add the required top-level Emotion JSX import-source pragma
to the badge story before its imports, while preserving the existing BadgeProps
and Badge imports.
In `@packages/ui/src/mosaic/components/badge/badge.tsx`:
- Around line 18-19: Update the Badge component’s prop spread order so rest
props are applied before the component-owned themeProps result, preventing
consumers from overriding the resolved intent metadata. Preserve the existing
style and className resolution, and add a regression test covering an intent
such as success with conflicting rest metadata to verify the resolved intent
wins.

🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: f2fefe08-7668-4d38-97b4-36691ea6f821
📥 Commits
Reviewing files that changed from the base of the PR and between 68ae308 and e5fb0a1.
📒 Files selected for processing (11)
  • .changeset/mosaic-badge.md
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/badge.mdx
  • packages/swingset/src/stories/badge.stories.tsx
  • packages/ui/src/mosaic/components/badge/badge.styles.ts
  • packages/ui/src/mosaic/components/badge/badge.test.tsx
  • packages/ui/src/mosaic/components/badge/badge.tsx
  • packages/ui/src/mosaic/components/badge/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • packages/ui/src/mosaic/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)
Comment thread.changeset/mosaic-badge.md
Comment threadpackages/swingset/src/stories/badge.stories.tsx

Comment on lines

+1
 to 
+2

import type { BadgeProps } from '@clerk/ui/mosaic/components/badge';
import { Badge } from '@clerk/ui/mosaic/components/badge';
@coderabbitaicoderabbitaiBotJul 22, 2026

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Add the required Emotion JSX pragma.
This story renders a styled Mosaic component but lacks the required top-level @jsxImportSource pragma.
+/** `@jsxImportSource` `@emotion/react` */+
import type { BadgeProps } from '`@clerk/ui/mosaic/components/badge`';
As per coding guidelines, “Use Emotion pragma /** @jsxImportSource@emotion/react */ at the top of story files that render styled Mosaic components.”
📝 Committable suggestion
‼️IMPORTANT

Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

importtype{BadgeProps}from'@clerk/ui/mosaic/components/badge';
import{Badge}from'@clerk/ui/mosaic/components/badge';
/** `@jsxImportSource` `@emotion/react` */
importtype{BadgeProps}from'`@clerk/ui/mosaic/components/badge`';
import{Badge}from'`@clerk/ui/mosaic/components/badge`';
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/swingset/src/stories/badge.stories.tsx` around lines 1 - 2, Add the
required top-level Emotion JSX import-source pragma to the badge story before
its imports, while preserving the existing BadgeProps and Badge imports.

Source: Coding guidelines
Comment threadpackages/ui/src/mosaic/components/badge/badge.tsx
Outdated

coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 23, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/mosaic/components/badge/badge.styles.ts`:
- Around line 34-43: Update the warning and success variants in the badge styles
to meet at least 4.5:1 contrast for label-sm text in light and dark themes,
using appropriate contrast-paired foreground tokens or adjusted faded fills
while leaving destructive unchanged. Add contrast tests covering warning in
light mode and success in dark mode.

🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 359f20ad-7b5b-46fc-9c96-2cef54c7e062
📥 Commits
Reviewing files that changed from the base of the PR and between e5fb0a1 and 173b95d.
📒 Files selected for processing (2)
  • packages/ui/src/mosaic/components/badge/badge.styles.ts
  • packages/ui/src/mosaic/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-ios(auto-detected)
  • clerk/cli(auto-detected)
  • clerk/clerk-android(auto-detected)
Comment threadpackages/ui/src/mosaic/components/badge/badge.styles.ts
Outdated

@coderabbitaicoderabbitaiBot
mentioned this pull request
Jul 23, 2026
 Merged

4 tasks
@alexcarpenter
refactor(ui): rename Badge intent prop to color
5406ee6
- values: secondary→neutral, destructive→negative, success→positive
- swingset PropTable: sx row now opt-out (Badge is StyleX, no sx)
- docs: document render prop
coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 27, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/mosaic/tokens.stylex.ts`:
- Around line 29-44: Restore the deprecated --cl-color-destructive* and
--cl-color-muted* aliases in the exported colorVars alongside the replacement
negative and neutral tokens. Map each alias to its corresponding current token,
preserving compatibility for existing SDK styles and consumer customizations.

🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: d6a66e4b-7245-437c-97f3-09c71b4ce92f
📥 Commits
Reviewing files that changed from the base of the PR and between 173b95d and 5406ee6.
📒 Files selected for processing (13)
  • .changeset/mosaic-badge.md
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/components/PropTable.tsx
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/badge.mdx
  • packages/swingset/src/stories/badge.stories.tsx
  • packages/ui/src/mosaic/components/badge/badge.styles.ts
  • packages/ui/src/mosaic/components/badge/badge.test.tsx
  • packages/ui/src/mosaic/components/badge/badge.tsx
  • packages/ui/src/mosaic/components/badge/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • packages/ui/src/mosaic/tokens.stylex.ts
  • packages/ui/tsdown.mosaic.config.mts
🔗 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)
🚧 Files skipped from review as they are similar to previous changes (5)
  • packages/ui/src/mosaic/components/badge/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/stories/badge.mdx
  • packages/swingset/src/lib/registry.ts
Comment threadpackages/ui/src/mosaic/tokens.stylex.ts
@vercel
vercelBottemporarily deployed
to
Preview – clerk-js-sandbox
July 27, 2026 19:55
Inactive

@alexcarpenter
fix(repo): hot-reload Mosaic StyleX edits in swingset dev
3401708
Dev now injects StyleX at runtime (unplugin runtimeInjection) instead of the
build-time globals.css extraction, which Next never re-ran on .styles.ts edits.
Prod keeps static extraction.
@vercel
vercelBottemporarily deployed
to
Preview – clerk-js-sandbox
July 28, 2026 14:24
Inactive

@alexcarpenter
fix(ui): define Mosaic spacing scale with defineVars so it resolves c…
d9eb41d
…ross-module
defineConsts emits no CSS across module boundaries, so every consumer of the
space scale (Badge, Button, ...) got dangling var(--hash) references with no
:root default and collapsed spacing. Switch space to defineVars (like astryx's
spacingVars), keeping the calc(var(--cl-spacing) * n) values so --cl-spacing
still rescales the whole scale and the steps stay hashed (only --cl-spacing is
publicly targetable). Call sites are unchanged.
@alexcarpenter
fix(swingset): run StyleX extraction in dev so token :root defaults r…
c07c514
…esolve
defineVars token :root defaults are compile-time only (the runtime export
throws), so runtimeInjection alone left every var(--cl-*) unresolved. Keep the
postcss extraction on in dev for the static :root defaults and keep
runtimeInjection for fresh atoms on edit; drop the treeshakeCompensation
experiment that didn't help.
@alexcarpenter
extract colors from styles
3a910e0
@alexcarpenter
alexcarpenter
merged commit d8407c9
into
mainJul 28, 2026

84 of 85 checks passed

@alexcarpenter
alexcarpenter
deleted the

carp/mosaic-badge

branch
July 28, 2026 16:35

This was referenced Jul 28, 2026
 Merged

 Merged

 Merged

 Closed

 Merged

 Merged

 Merged

 Closed

 Merged


This was referenced Aug 5, 2026
 Merged

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@maxyingermaxyingermaxyinger approved these changes

Assignees


No one assigned


Labels

ui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@maxyinger

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
feat(ui): add Mosaic Badge component - #9221
Merged
alexcarpenter merged 13 commits into
mainfrom 
carp/mosaic-badge
Jul 28, 2026
Merged
feat(ui): add Mosaic Badge component#9221
alexcarpenter merged 13 commits into
mainfrom 
carp/mosaic-badge
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Member
Adds Mosaic Badge. StyleX, span root, one intent axis: primary | secondary | warning | destructive | success.
Preview: https://swingset-git-carp-mosaic-badge.clerkstage.dev/components/badge
@changeset-bot
changeset-botBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 4ba9759
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 0 packages
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
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
vercelBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJul 28, 2026 3:47pm
swingsetReadyReadyPreview, CommentJul 28, 2026 3:47pm
Request Review
@pkg-pr-new
pkg-pr-newBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@9221

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: 4ba9759
@github-actions
github-actionsBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
API Changes Report
Generated by Break Check on 2026-07-28T15:48:44.482Z
Summary
MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0
No API Changes Detected
All packages have stable APIs with no detected changes.
Report generated by Break Check
Last ran on 4ba9759.
@coderabbitai
coderabbitaiBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
Note
Reviews paused
It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.
Use the following commands to manage reviews:
  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.
Use the checkboxes below for quick actions:
  • ▶️ Resume reviews
  •  🔍 Trigger review
📝 Walkthrough
Walkthrough
Adds a new Mosaic Badge component with color variants, StyleX styling and tokens, forwarded props and refs, tests, Storybook stories, and MDX documentation. Registers the component in Swingset, exposes its public exports, updates PropTable rendering, externalizes headless packages, updates button color tokens, and adds a changeset.
Estimated code review effort: 3 (Moderate) | ~25 minutes
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly summarizes the main change: adding the Mosaic Badge component.
Description check✅ PassedThe description is related to the Badge component work, even though some prop names are stale.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 22, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.changeset/mosaic-badge.md:
- Around line 1-2: Replace the empty frontmatter in mosaic-badge.md with a
changeset entry for `@clerk/ui` using a minor release level, preserving the
required changeset format so the new public Badge component and props API
generate a package bump and changelog entry.
In `@packages/swingset/src/stories/badge.stories.tsx`:
- Around line 1-2: Add the required top-level Emotion JSX import-source pragma
to the badge story before its imports, while preserving the existing BadgeProps
and Badge imports.
In `@packages/ui/src/mosaic/components/badge/badge.tsx`:
- Around line 18-19: Update the Badge component’s prop spread order so rest
props are applied before the component-owned themeProps result, preventing
consumers from overriding the resolved intent metadata. Preserve the existing
style and className resolution, and add a regression test covering an intent
such as success with conflicting rest metadata to verify the resolved intent
wins.

🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: f2fefe08-7668-4d38-97b4-36691ea6f821
📥 Commits
Reviewing files that changed from the base of the PR and between 68ae308 and e5fb0a1.
📒 Files selected for processing (11)
  • .changeset/mosaic-badge.md
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/badge.mdx
  • packages/swingset/src/stories/badge.stories.tsx
  • packages/ui/src/mosaic/components/badge/badge.styles.ts
  • packages/ui/src/mosaic/components/badge/badge.test.tsx
  • packages/ui/src/mosaic/components/badge/badge.tsx
  • packages/ui/src/mosaic/components/badge/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • packages/ui/src/mosaic/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)
Comment thread.changeset/mosaic-badge.md
Comment threadpackages/swingset/src/stories/badge.stories.tsx

Comment on lines

+1
 to 
+2

import type { BadgeProps } from '@clerk/ui/mosaic/components/badge';
import { Badge } from '@clerk/ui/mosaic/components/badge';
@coderabbitaicoderabbitaiBotJul 22, 2026

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Add the required Emotion JSX pragma.
This story renders a styled Mosaic component but lacks the required top-level @jsxImportSource pragma.
+/** `@jsxImportSource` `@emotion/react` */+
import type { BadgeProps } from '`@clerk/ui/mosaic/components/badge`';
As per coding guidelines, “Use Emotion pragma /** @jsxImportSource@emotion/react */ at the top of story files that render styled Mosaic components.”
📝 Committable suggestion
‼️IMPORTANT

Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

importtype{BadgeProps}from'@clerk/ui/mosaic/components/badge';
import{Badge}from'@clerk/ui/mosaic/components/badge';
/** `@jsxImportSource` `@emotion/react` */
importtype{BadgeProps}from'`@clerk/ui/mosaic/components/badge`';
import{Badge}from'`@clerk/ui/mosaic/components/badge`';
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/swingset/src/stories/badge.stories.tsx` around lines 1 - 2, Add the
required top-level Emotion JSX import-source pragma to the badge story before
its imports, while preserving the existing BadgeProps and Badge imports.

Source: Coding guidelines
Comment threadpackages/ui/src/mosaic/components/badge/badge.tsx
Outdated

coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 23, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/mosaic/components/badge/badge.styles.ts`:
- Around line 34-43: Update the warning and success variants in the badge styles
to meet at least 4.5:1 contrast for label-sm text in light and dark themes,
using appropriate contrast-paired foreground tokens or adjusted faded fills
while leaving destructive unchanged. Add contrast tests covering warning in
light mode and success in dark mode.

🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 359f20ad-7b5b-46fc-9c96-2cef54c7e062
📥 Commits
Reviewing files that changed from the base of the PR and between e5fb0a1 and 173b95d.
📒 Files selected for processing (2)
  • packages/ui/src/mosaic/components/badge/badge.styles.ts
  • packages/ui/src/mosaic/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-ios(auto-detected)
  • clerk/cli(auto-detected)
  • clerk/clerk-android(auto-detected)
Comment threadpackages/ui/src/mosaic/components/badge/badge.styles.ts
Outdated

@coderabbitaicoderabbitaiBot
mentioned this pull request
Jul 23, 2026
 Merged

4 tasks
@alexcarpenter
refactor(ui): rename Badge intent prop to color
5406ee6
- values: secondary→neutral, destructive→negative, success→positive
- swingset PropTable: sx row now opt-out (Badge is StyleX, no sx)
- docs: document render prop
coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 27, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/mosaic/tokens.stylex.ts`:
- Around line 29-44: Restore the deprecated --cl-color-destructive* and
--cl-color-muted* aliases in the exported colorVars alongside the replacement
negative and neutral tokens. Map each alias to its corresponding current token,
preserving compatibility for existing SDK styles and consumer customizations.

🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: d6a66e4b-7245-437c-97f3-09c71b4ce92f
📥 Commits
Reviewing files that changed from the base of the PR and between 173b95d and 5406ee6.
📒 Files selected for processing (13)
  • .changeset/mosaic-badge.md
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/components/PropTable.tsx
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/badge.mdx
  • packages/swingset/src/stories/badge.stories.tsx
  • packages/ui/src/mosaic/components/badge/badge.styles.ts
  • packages/ui/src/mosaic/components/badge/badge.test.tsx
  • packages/ui/src/mosaic/components/badge/badge.tsx
  • packages/ui/src/mosaic/components/badge/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • packages/ui/src/mosaic/tokens.stylex.ts
  • packages/ui/tsdown.mosaic.config.mts
🔗 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)
🚧 Files skipped from review as they are similar to previous changes (5)
  • packages/ui/src/mosaic/components/badge/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/stories/badge.mdx
  • packages/swingset/src/lib/registry.ts
Comment threadpackages/ui/src/mosaic/tokens.stylex.ts
@vercel
vercelBottemporarily deployed
to
Preview – clerk-js-sandbox
July 27, 2026 19:55
Inactive

@alexcarpenter
fix(repo): hot-reload Mosaic StyleX edits in swingset dev
3401708
Dev now injects StyleX at runtime (unplugin runtimeInjection) instead of the
build-time globals.css extraction, which Next never re-ran on .styles.ts edits.
Prod keeps static extraction.
@vercel
vercelBottemporarily deployed
to
Preview – clerk-js-sandbox
July 28, 2026 14:24
Inactive

@alexcarpenter
fix(ui): define Mosaic spacing scale with defineVars so it resolves c…
d9eb41d
…ross-module
defineConsts emits no CSS across module boundaries, so every consumer of the
space scale (Badge, Button, ...) got dangling var(--hash) references with no
:root default and collapsed spacing. Switch space to defineVars (like astryx's
spacingVars), keeping the calc(var(--cl-spacing) * n) values so --cl-spacing
still rescales the whole scale and the steps stay hashed (only --cl-spacing is
publicly targetable). Call sites are unchanged.
@alexcarpenter
fix(swingset): run StyleX extraction in dev so token :root defaults r…
c07c514
…esolve
defineVars token :root defaults are compile-time only (the runtime export
throws), so runtimeInjection alone left every var(--cl-*) unresolved. Keep the
postcss extraction on in dev for the static :root defaults and keep
runtimeInjection for fresh atoms on edit; drop the treeshakeCompensation
experiment that didn't help.
@alexcarpenter
extract colors from styles
3a910e0
@alexcarpenter
alexcarpenter
merged commit d8407c9
into
mainJul 28, 2026

84 of 85 checks passed

@alexcarpenter
alexcarpenter
deleted the

carp/mosaic-badge

branch
July 28, 2026 16:35

This was referenced Jul 28, 2026
 Merged

 Merged

 Merged

 Closed

 Merged

 Merged

 Merged

 Closed

 Merged


This was referenced Aug 5, 2026
 Merged

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@maxyingermaxyingermaxyinger approved these changes

Assignees


No one assigned


Labels

ui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@maxyinger

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(ui): add Mosaic Badge component - #9221
Merged
alexcarpenter merged 13 commits into
mainfrom 
carp/mosaic-badge
Jul 28, 2026
Merged
feat(ui): add Mosaic Badge component#9221
alexcarpenter merged 13 commits into
mainfrom 
carp/mosaic-badge
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Member
Adds Mosaic Badge. StyleX, span root, one intent axis: primary | secondary | warning | destructive | success.
Preview: https://swingset-git-carp-mosaic-badge.clerkstage.dev/components/badge
@changeset-bot
changeset-botBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 4ba9759
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 0 packages
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
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
vercelBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJul 28, 2026 3:47pm
swingsetReadyReadyPreview, CommentJul 28, 2026 3:47pm
Request Review
@pkg-pr-new
pkg-pr-newBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@9221

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: 4ba9759
@github-actions
github-actionsBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
API Changes Report
Generated by Break Check on 2026-07-28T15:48:44.482Z
Summary
MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0
No API Changes Detected
All packages have stable APIs with no detected changes.
Report generated by Break Check
Last ran on 4ba9759.
@coderabbitai
coderabbitaiBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
Note
Reviews paused
It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.
Use the following commands to manage reviews:
  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.
Use the checkboxes below for quick actions:
  • ▶️ Resume reviews
  •  🔍 Trigger review
📝 Walkthrough
Walkthrough
Adds a new Mosaic Badge component with color variants, StyleX styling and tokens, forwarded props and refs, tests, Storybook stories, and MDX documentation. Registers the component in Swingset, exposes its public exports, updates PropTable rendering, externalizes headless packages, updates button color tokens, and adds a changeset.
Estimated code review effort: 3 (Moderate) | ~25 minutes
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly summarizes the main change: adding the Mosaic Badge component.
Description check✅ PassedThe description is related to the Badge component work, even though some prop names are stale.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 22, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.changeset/mosaic-badge.md:
- Around line 1-2: Replace the empty frontmatter in mosaic-badge.md with a
changeset entry for `@clerk/ui` using a minor release level, preserving the
required changeset format so the new public Badge component and props API
generate a package bump and changelog entry.
In `@packages/swingset/src/stories/badge.stories.tsx`:
- Around line 1-2: Add the required top-level Emotion JSX import-source pragma
to the badge story before its imports, while preserving the existing BadgeProps
and Badge imports.
In `@packages/ui/src/mosaic/components/badge/badge.tsx`:
- Around line 18-19: Update the Badge component’s prop spread order so rest
props are applied before the component-owned themeProps result, preventing
consumers from overriding the resolved intent metadata. Preserve the existing
style and className resolution, and add a regression test covering an intent
such as success with conflicting rest metadata to verify the resolved intent
wins.

🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: f2fefe08-7668-4d38-97b4-36691ea6f821
📥 Commits
Reviewing files that changed from the base of the PR and between 68ae308 and e5fb0a1.
📒 Files selected for processing (11)
  • .changeset/mosaic-badge.md
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/badge.mdx
  • packages/swingset/src/stories/badge.stories.tsx
  • packages/ui/src/mosaic/components/badge/badge.styles.ts
  • packages/ui/src/mosaic/components/badge/badge.test.tsx
  • packages/ui/src/mosaic/components/badge/badge.tsx
  • packages/ui/src/mosaic/components/badge/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • packages/ui/src/mosaic/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)
Comment thread.changeset/mosaic-badge.md
Comment threadpackages/swingset/src/stories/badge.stories.tsx

Comment on lines

+1
 to 
+2

import type { BadgeProps } from '@clerk/ui/mosaic/components/badge';
import { Badge } from '@clerk/ui/mosaic/components/badge';
@coderabbitaicoderabbitaiBotJul 22, 2026

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Add the required Emotion JSX pragma.
This story renders a styled Mosaic component but lacks the required top-level @jsxImportSource pragma.
+/** `@jsxImportSource` `@emotion/react` */+
import type { BadgeProps } from '`@clerk/ui/mosaic/components/badge`';
As per coding guidelines, “Use Emotion pragma /** @jsxImportSource@emotion/react */ at the top of story files that render styled Mosaic components.”
📝 Committable suggestion
‼️IMPORTANT

Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

importtype{BadgeProps}from'@clerk/ui/mosaic/components/badge';
import{Badge}from'@clerk/ui/mosaic/components/badge';
/** `@jsxImportSource` `@emotion/react` */
importtype{BadgeProps}from'`@clerk/ui/mosaic/components/badge`';
import{Badge}from'`@clerk/ui/mosaic/components/badge`';
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/swingset/src/stories/badge.stories.tsx` around lines 1 - 2, Add the
required top-level Emotion JSX import-source pragma to the badge story before
its imports, while preserving the existing BadgeProps and Badge imports.

Source: Coding guidelines
Comment threadpackages/ui/src/mosaic/components/badge/badge.tsx
Outdated

coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 23, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/mosaic/components/badge/badge.styles.ts`:
- Around line 34-43: Update the warning and success variants in the badge styles
to meet at least 4.5:1 contrast for label-sm text in light and dark themes,
using appropriate contrast-paired foreground tokens or adjusted faded fills
while leaving destructive unchanged. Add contrast tests covering warning in
light mode and success in dark mode.

🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 359f20ad-7b5b-46fc-9c96-2cef54c7e062
📥 Commits
Reviewing files that changed from the base of the PR and between e5fb0a1 and 173b95d.
📒 Files selected for processing (2)
  • packages/ui/src/mosaic/components/badge/badge.styles.ts
  • packages/ui/src/mosaic/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-ios(auto-detected)
  • clerk/cli(auto-detected)
  • clerk/clerk-android(auto-detected)
Comment threadpackages/ui/src/mosaic/components/badge/badge.styles.ts
Outdated

@coderabbitaicoderabbitaiBot
mentioned this pull request
Jul 23, 2026
 Merged

4 tasks
@alexcarpenter
refactor(ui): rename Badge intent prop to color
5406ee6
- values: secondary→neutral, destructive→negative, success→positive
- swingset PropTable: sx row now opt-out (Badge is StyleX, no sx)
- docs: document render prop
coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 27, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/mosaic/tokens.stylex.ts`:
- Around line 29-44: Restore the deprecated --cl-color-destructive* and
--cl-color-muted* aliases in the exported colorVars alongside the replacement
negative and neutral tokens. Map each alias to its corresponding current token,
preserving compatibility for existing SDK styles and consumer customizations.

🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: d6a66e4b-7245-437c-97f3-09c71b4ce92f
📥 Commits
Reviewing files that changed from the base of the PR and between 173b95d and 5406ee6.
📒 Files selected for processing (13)
  • .changeset/mosaic-badge.md
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/components/PropTable.tsx
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/badge.mdx
  • packages/swingset/src/stories/badge.stories.tsx
  • packages/ui/src/mosaic/components/badge/badge.styles.ts
  • packages/ui/src/mosaic/components/badge/badge.test.tsx
  • packages/ui/src/mosaic/components/badge/badge.tsx
  • packages/ui/src/mosaic/components/badge/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • packages/ui/src/mosaic/tokens.stylex.ts
  • packages/ui/tsdown.mosaic.config.mts
🔗 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)
🚧 Files skipped from review as they are similar to previous changes (5)
  • packages/ui/src/mosaic/components/badge/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/stories/badge.mdx
  • packages/swingset/src/lib/registry.ts
Comment threadpackages/ui/src/mosaic/tokens.stylex.ts
@vercel
vercelBottemporarily deployed
to
Preview – clerk-js-sandbox
July 27, 2026 19:55
Inactive

@alexcarpenter
fix(repo): hot-reload Mosaic StyleX edits in swingset dev
3401708
Dev now injects StyleX at runtime (unplugin runtimeInjection) instead of the
build-time globals.css extraction, which Next never re-ran on .styles.ts edits.
Prod keeps static extraction.
@vercel
vercelBottemporarily deployed
to
Preview – clerk-js-sandbox
July 28, 2026 14:24
Inactive

@alexcarpenter
fix(ui): define Mosaic spacing scale with defineVars so it resolves c…
d9eb41d
…ross-module
defineConsts emits no CSS across module boundaries, so every consumer of the
space scale (Badge, Button, ...) got dangling var(--hash) references with no
:root default and collapsed spacing. Switch space to defineVars (like astryx's
spacingVars), keeping the calc(var(--cl-spacing) * n) values so --cl-spacing
still rescales the whole scale and the steps stay hashed (only --cl-spacing is
publicly targetable). Call sites are unchanged.
@alexcarpenter
fix(swingset): run StyleX extraction in dev so token :root defaults r…
c07c514
…esolve
defineVars token :root defaults are compile-time only (the runtime export
throws), so runtimeInjection alone left every var(--cl-*) unresolved. Keep the
postcss extraction on in dev for the static :root defaults and keep
runtimeInjection for fresh atoms on edit; drop the treeshakeCompensation
experiment that didn't help.
@alexcarpenter
extract colors from styles
3a910e0
@alexcarpenter
alexcarpenter
merged commit d8407c9
into
mainJul 28, 2026

84 of 85 checks passed

@alexcarpenter
alexcarpenter
deleted the

carp/mosaic-badge

branch
July 28, 2026 16:35

This was referenced Jul 28, 2026
 Merged

 Merged

 Merged

 Closed

 Merged

 Merged

 Merged

 Closed

 Merged


This was referenced Aug 5, 2026
 Merged

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@maxyingermaxyingermaxyinger approved these changes

Assignees


No one assigned


Labels

ui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@maxyinger

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
feat(ui): add Mosaic Badge component - #9221
Merged
alexcarpenter merged 13 commits into
mainfrom 
carp/mosaic-badge
Jul 28, 2026
Merged
feat(ui): add Mosaic Badge component#9221
alexcarpenter merged 13 commits into
mainfrom 
carp/mosaic-badge
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Member
Adds Mosaic Badge. StyleX, span root, one intent axis: primary | secondary | warning | destructive | success.
Preview: https://swingset-git-carp-mosaic-badge.clerkstage.dev/components/badge
@changeset-bot
changeset-botBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 4ba9759
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 0 packages
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
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
vercelBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJul 28, 2026 3:47pm
swingsetReadyReadyPreview, CommentJul 28, 2026 3:47pm
Request Review
@pkg-pr-new
pkg-pr-newBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@9221

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: 4ba9759
@github-actions
github-actionsBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
API Changes Report
Generated by Break Check on 2026-07-28T15:48:44.482Z
Summary
MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0
No API Changes Detected
All packages have stable APIs with no detected changes.
Report generated by Break Check
Last ran on 4ba9759.
@coderabbitai
coderabbitaiBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
Note
Reviews paused
It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.
Use the following commands to manage reviews:
  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.
Use the checkboxes below for quick actions:
  • ▶️ Resume reviews
  •  🔍 Trigger review
📝 Walkthrough
Walkthrough
Adds a new Mosaic Badge component with color variants, StyleX styling and tokens, forwarded props and refs, tests, Storybook stories, and MDX documentation. Registers the component in Swingset, exposes its public exports, updates PropTable rendering, externalizes headless packages, updates button color tokens, and adds a changeset.
Estimated code review effort: 3 (Moderate) | ~25 minutes
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly summarizes the main change: adding the Mosaic Badge component.
Description check✅ PassedThe description is related to the Badge component work, even though some prop names are stale.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 22, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.changeset/mosaic-badge.md:
- Around line 1-2: Replace the empty frontmatter in mosaic-badge.md with a
changeset entry for `@clerk/ui` using a minor release level, preserving the
required changeset format so the new public Badge component and props API
generate a package bump and changelog entry.
In `@packages/swingset/src/stories/badge.stories.tsx`:
- Around line 1-2: Add the required top-level Emotion JSX import-source pragma
to the badge story before its imports, while preserving the existing BadgeProps
and Badge imports.
In `@packages/ui/src/mosaic/components/badge/badge.tsx`:
- Around line 18-19: Update the Badge component’s prop spread order so rest
props are applied before the component-owned themeProps result, preventing
consumers from overriding the resolved intent metadata. Preserve the existing
style and className resolution, and add a regression test covering an intent
such as success with conflicting rest metadata to verify the resolved intent
wins.

🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: f2fefe08-7668-4d38-97b4-36691ea6f821
📥 Commits
Reviewing files that changed from the base of the PR and between 68ae308 and e5fb0a1.
📒 Files selected for processing (11)
  • .changeset/mosaic-badge.md
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/badge.mdx
  • packages/swingset/src/stories/badge.stories.tsx
  • packages/ui/src/mosaic/components/badge/badge.styles.ts
  • packages/ui/src/mosaic/components/badge/badge.test.tsx
  • packages/ui/src/mosaic/components/badge/badge.tsx
  • packages/ui/src/mosaic/components/badge/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • packages/ui/src/mosaic/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)
Comment thread.changeset/mosaic-badge.md
Comment threadpackages/swingset/src/stories/badge.stories.tsx

Comment on lines

+1
 to 
+2

import type { BadgeProps } from '@clerk/ui/mosaic/components/badge';
import { Badge } from '@clerk/ui/mosaic/components/badge';
@coderabbitaicoderabbitaiBotJul 22, 2026

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Add the required Emotion JSX pragma.
This story renders a styled Mosaic component but lacks the required top-level @jsxImportSource pragma.
+/** `@jsxImportSource` `@emotion/react` */+
import type { BadgeProps } from '`@clerk/ui/mosaic/components/badge`';
As per coding guidelines, “Use Emotion pragma /** @jsxImportSource@emotion/react */ at the top of story files that render styled Mosaic components.”
📝 Committable suggestion
‼️IMPORTANT

Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

importtype{BadgeProps}from'@clerk/ui/mosaic/components/badge';
import{Badge}from'@clerk/ui/mosaic/components/badge';
/** `@jsxImportSource` `@emotion/react` */
importtype{BadgeProps}from'`@clerk/ui/mosaic/components/badge`';
import{Badge}from'`@clerk/ui/mosaic/components/badge`';
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/swingset/src/stories/badge.stories.tsx` around lines 1 - 2, Add the
required top-level Emotion JSX import-source pragma to the badge story before
its imports, while preserving the existing BadgeProps and Badge imports.

Source: Coding guidelines
Comment threadpackages/ui/src/mosaic/components/badge/badge.tsx
Outdated

coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 23, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/mosaic/components/badge/badge.styles.ts`:
- Around line 34-43: Update the warning and success variants in the badge styles
to meet at least 4.5:1 contrast for label-sm text in light and dark themes,
using appropriate contrast-paired foreground tokens or adjusted faded fills
while leaving destructive unchanged. Add contrast tests covering warning in
light mode and success in dark mode.

🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 359f20ad-7b5b-46fc-9c96-2cef54c7e062
📥 Commits
Reviewing files that changed from the base of the PR and between e5fb0a1 and 173b95d.
📒 Files selected for processing (2)
  • packages/ui/src/mosaic/components/badge/badge.styles.ts
  • packages/ui/src/mosaic/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-ios(auto-detected)
  • clerk/cli(auto-detected)
  • clerk/clerk-android(auto-detected)
Comment threadpackages/ui/src/mosaic/components/badge/badge.styles.ts
Outdated

@coderabbitaicoderabbitaiBot
mentioned this pull request
Jul 23, 2026
 Merged

4 tasks
@alexcarpenter
refactor(ui): rename Badge intent prop to color
5406ee6
- values: secondary→neutral, destructive→negative, success→positive
- swingset PropTable: sx row now opt-out (Badge is StyleX, no sx)
- docs: document render prop
coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 27, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/mosaic/tokens.stylex.ts`:
- Around line 29-44: Restore the deprecated --cl-color-destructive* and
--cl-color-muted* aliases in the exported colorVars alongside the replacement
negative and neutral tokens. Map each alias to its corresponding current token,
preserving compatibility for existing SDK styles and consumer customizations.

🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: d6a66e4b-7245-437c-97f3-09c71b4ce92f
📥 Commits
Reviewing files that changed from the base of the PR and between 173b95d and 5406ee6.
📒 Files selected for processing (13)
  • .changeset/mosaic-badge.md
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/components/PropTable.tsx
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/badge.mdx
  • packages/swingset/src/stories/badge.stories.tsx
  • packages/ui/src/mosaic/components/badge/badge.styles.ts
  • packages/ui/src/mosaic/components/badge/badge.test.tsx
  • packages/ui/src/mosaic/components/badge/badge.tsx
  • packages/ui/src/mosaic/components/badge/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • packages/ui/src/mosaic/tokens.stylex.ts
  • packages/ui/tsdown.mosaic.config.mts
🔗 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)
🚧 Files skipped from review as they are similar to previous changes (5)
  • packages/ui/src/mosaic/components/badge/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/stories/badge.mdx
  • packages/swingset/src/lib/registry.ts
Comment threadpackages/ui/src/mosaic/tokens.stylex.ts
@vercel
vercelBottemporarily deployed
to
Preview – clerk-js-sandbox
July 27, 2026 19:55
Inactive

@alexcarpenter
fix(repo): hot-reload Mosaic StyleX edits in swingset dev
3401708
Dev now injects StyleX at runtime (unplugin runtimeInjection) instead of the
build-time globals.css extraction, which Next never re-ran on .styles.ts edits.
Prod keeps static extraction.
@vercel
vercelBottemporarily deployed
to
Preview – clerk-js-sandbox
July 28, 2026 14:24
Inactive

@alexcarpenter
fix(ui): define Mosaic spacing scale with defineVars so it resolves c…
d9eb41d
…ross-module
defineConsts emits no CSS across module boundaries, so every consumer of the
space scale (Badge, Button, ...) got dangling var(--hash) references with no
:root default and collapsed spacing. Switch space to defineVars (like astryx's
spacingVars), keeping the calc(var(--cl-spacing) * n) values so --cl-spacing
still rescales the whole scale and the steps stay hashed (only --cl-spacing is
publicly targetable). Call sites are unchanged.
@alexcarpenter
fix(swingset): run StyleX extraction in dev so token :root defaults r…
c07c514
…esolve
defineVars token :root defaults are compile-time only (the runtime export
throws), so runtimeInjection alone left every var(--cl-*) unresolved. Keep the
postcss extraction on in dev for the static :root defaults and keep
runtimeInjection for fresh atoms on edit; drop the treeshakeCompensation
experiment that didn't help.
@alexcarpenter
extract colors from styles
3a910e0
@alexcarpenter
alexcarpenter
merged commit d8407c9
into
mainJul 28, 2026

84 of 85 checks passed

@alexcarpenter
alexcarpenter
deleted the

carp/mosaic-badge

branch
July 28, 2026 16:35

This was referenced Jul 28, 2026
 Merged

 Merged

 Merged

 Closed

 Merged

 Merged

 Merged

 Closed

 Merged


This was referenced Aug 5, 2026
 Merged

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@maxyingermaxyingermaxyinger approved these changes

Assignees


No one assigned


Labels

ui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@maxyinger

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
feat(ui): add Mosaic Badge component - #9221
Merged
alexcarpenter merged 13 commits into
mainfrom 
carp/mosaic-badge
Jul 28, 2026
Merged
feat(ui): add Mosaic Badge component#9221
alexcarpenter merged 13 commits into
mainfrom 
carp/mosaic-badge
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Member
Adds Mosaic Badge. StyleX, span root, one intent axis: primary | secondary | warning | destructive | success.
Preview: https://swingset-git-carp-mosaic-badge.clerkstage.dev/components/badge
@changeset-bot
changeset-botBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

🦋 Changeset detected
Latest commit: 4ba9759
The changes in this PR will be included in the next version bump.
This PR includes changesets to release 0 packages
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
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
vercelBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentActionsUpdated (UTC)
clerk-js-sandboxReadyReadyPreview, CommentJul 28, 2026 3:47pm
swingsetReadyReadyPreview, CommentJul 28, 2026 3:47pm
Request Review
@pkg-pr-new
pkg-pr-newBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@clerk/astro
npm i https://pkg.pr.new/@clerk/astro@9221

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

commit: 4ba9759
@github-actions
github-actionsBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
API Changes Report
Generated by Break Check on 2026-07-28T15:48:44.482Z
Summary
MetricCount
Packages analyzed19
Packages with changes0
🔴 Breaking changes0
🟡 Non-breaking changes0
🟢 Additions0
No API Changes Detected
All packages have stable APIs with no detected changes.
Report generated by Break Check
Last ran on 4ba9759.
@coderabbitai
coderabbitaiBot
commented
Jul 22, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Review Change Stack
Note
Reviews paused
It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.
Use the following commands to manage reviews:
  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.
Use the checkboxes below for quick actions:
  • ▶️ Resume reviews
  •  🔍 Trigger review
📝 Walkthrough
Walkthrough
Adds a new Mosaic Badge component with color variants, StyleX styling and tokens, forwarded props and refs, tests, Storybook stories, and MDX documentation. Registers the component in Swingset, exposes its public exports, updates PropTable rendering, externalizes headless packages, updates button color tokens, and adds a changeset.
Estimated code review effort: 3 (Moderate) | ~25 minutes
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check nameStatusExplanation
Title check✅ PassedThe title clearly summarizes the main change: adding the Mosaic Badge component.
Description check✅ PassedThe description is related to the Badge component work, even though some prop names are stale.
Docstring Coverage✅ PassedNo functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check✅ PassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes check✅ PassedCheck skipped because no linked issues were found for this pull request.
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
❤️ Share
Comment @coderabbitai help to get the list of available commands.
coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 22, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In @.changeset/mosaic-badge.md:
- Around line 1-2: Replace the empty frontmatter in mosaic-badge.md with a
changeset entry for `@clerk/ui` using a minor release level, preserving the
required changeset format so the new public Badge component and props API
generate a package bump and changelog entry.
In `@packages/swingset/src/stories/badge.stories.tsx`:
- Around line 1-2: Add the required top-level Emotion JSX import-source pragma
to the badge story before its imports, while preserving the existing BadgeProps
and Badge imports.
In `@packages/ui/src/mosaic/components/badge/badge.tsx`:
- Around line 18-19: Update the Badge component’s prop spread order so rest
props are applied before the component-owned themeProps result, preventing
consumers from overriding the resolved intent metadata. Preserve the existing
style and className resolution, and add a regression test covering an intent
such as success with conflicting rest metadata to verify the resolved intent
wins.

🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: f2fefe08-7668-4d38-97b4-36691ea6f821
📥 Commits
Reviewing files that changed from the base of the PR and between 68ae308 and e5fb0a1.
📒 Files selected for processing (11)
  • .changeset/mosaic-badge.md
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/badge.mdx
  • packages/swingset/src/stories/badge.stories.tsx
  • packages/ui/src/mosaic/components/badge/badge.styles.ts
  • packages/ui/src/mosaic/components/badge/badge.test.tsx
  • packages/ui/src/mosaic/components/badge/badge.tsx
  • packages/ui/src/mosaic/components/badge/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • packages/ui/src/mosaic/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)
Comment thread.changeset/mosaic-badge.md
Comment threadpackages/swingset/src/stories/badge.stories.tsx

Comment on lines

+1
 to 
+2

import type { BadgeProps } from '@clerk/ui/mosaic/components/badge';
import { Badge } from '@clerk/ui/mosaic/components/badge';
@coderabbitaicoderabbitaiBotJul 22, 2026

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Add the required Emotion JSX pragma.
This story renders a styled Mosaic component but lacks the required top-level @jsxImportSource pragma.
+/** `@jsxImportSource` `@emotion/react` */+
import type { BadgeProps } from '`@clerk/ui/mosaic/components/badge`';
As per coding guidelines, “Use Emotion pragma /** @jsxImportSource@emotion/react */ at the top of story files that render styled Mosaic components.”
📝 Committable suggestion
‼️IMPORTANT

Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

importtype{BadgeProps}from'@clerk/ui/mosaic/components/badge';
import{Badge}from'@clerk/ui/mosaic/components/badge';
/** `@jsxImportSource` `@emotion/react` */
importtype{BadgeProps}from'`@clerk/ui/mosaic/components/badge`';
import{Badge}from'`@clerk/ui/mosaic/components/badge`';
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/swingset/src/stories/badge.stories.tsx` around lines 1 - 2, Add the
required top-level Emotion JSX import-source pragma to the badge story before
its imports, while preserving the existing BadgeProps and Badge imports.

Source: Coding guidelines
Comment threadpackages/ui/src/mosaic/components/badge/badge.tsx
Outdated

coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 23, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/mosaic/components/badge/badge.styles.ts`:
- Around line 34-43: Update the warning and success variants in the badge styles
to meet at least 4.5:1 contrast for label-sm text in light and dark themes,
using appropriate contrast-paired foreground tokens or adjusted faded fills
while leaving destructive unchanged. Add contrast tests covering warning in
light mode and success in dark mode.

🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 359f20ad-7b5b-46fc-9c96-2cef54c7e062
📥 Commits
Reviewing files that changed from the base of the PR and between e5fb0a1 and 173b95d.
📒 Files selected for processing (2)
  • packages/ui/src/mosaic/components/badge/badge.styles.ts
  • packages/ui/src/mosaic/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-ios(auto-detected)
  • clerk/cli(auto-detected)
  • clerk/clerk-android(auto-detected)
Comment threadpackages/ui/src/mosaic/components/badge/badge.styles.ts
Outdated

@coderabbitaicoderabbitaiBot
mentioned this pull request
Jul 23, 2026
 Merged

4 tasks
@alexcarpenter
refactor(ui): rename Badge intent prop to color
5406ee6
- values: secondary→neutral, destructive→negative, success→positive
- swingset PropTable: sx row now opt-out (Badge is StyleX, no sx)
- docs: document render prop
coderabbitai[bot]
coderabbitaiBot
reviewed
Jul 27, 2026
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

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

Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/mosaic/tokens.stylex.ts`:
- Around line 29-44: Restore the deprecated --cl-color-destructive* and
--cl-color-muted* aliases in the exported colorVars alongside the replacement
negative and neutral tokens. Map each alias to its corresponding current token,
preserving compatibility for existing SDK styles and consumer customizations.

🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
  •  Push a commit to this branch (recommended)
  •  Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: d6a66e4b-7245-437c-97f3-09c71b4ce92f
📥 Commits
Reviewing files that changed from the base of the PR and between 173b95d and 5406ee6.
📒 Files selected for processing (13)
  • .changeset/mosaic-badge.md
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/components/PropTable.tsx
  • packages/swingset/src/lib/registry.ts
  • packages/swingset/src/stories/badge.mdx
  • packages/swingset/src/stories/badge.stories.tsx
  • packages/ui/src/mosaic/components/badge/badge.styles.ts
  • packages/ui/src/mosaic/components/badge/badge.test.tsx
  • packages/ui/src/mosaic/components/badge/badge.tsx
  • packages/ui/src/mosaic/components/badge/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • packages/ui/src/mosaic/tokens.stylex.ts
  • packages/ui/tsdown.mosaic.config.mts
🔗 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)
🚧 Files skipped from review as they are similar to previous changes (5)
  • packages/ui/src/mosaic/components/badge/index.ts
  • packages/ui/src/mosaic/styles/index.ts
  • packages/swingset/src/components/DocsViewer.tsx
  • packages/swingset/src/stories/badge.mdx
  • packages/swingset/src/lib/registry.ts
Comment threadpackages/ui/src/mosaic/tokens.stylex.ts
@vercel
vercelBottemporarily deployed
to
Preview – clerk-js-sandbox
July 27, 2026 19:55
Inactive

@alexcarpenter
fix(repo): hot-reload Mosaic StyleX edits in swingset dev
3401708
Dev now injects StyleX at runtime (unplugin runtimeInjection) instead of the
build-time globals.css extraction, which Next never re-ran on .styles.ts edits.
Prod keeps static extraction.
@vercel
vercelBottemporarily deployed
to
Preview – clerk-js-sandbox
July 28, 2026 14:24
Inactive

@alexcarpenter
fix(ui): define Mosaic spacing scale with defineVars so it resolves c…
d9eb41d
…ross-module
defineConsts emits no CSS across module boundaries, so every consumer of the
space scale (Badge, Button, ...) got dangling var(--hash) references with no
:root default and collapsed spacing. Switch space to defineVars (like astryx's
spacingVars), keeping the calc(var(--cl-spacing) * n) values so --cl-spacing
still rescales the whole scale and the steps stay hashed (only --cl-spacing is
publicly targetable). Call sites are unchanged.
@alexcarpenter
fix(swingset): run StyleX extraction in dev so token :root defaults r…
c07c514
…esolve
defineVars token :root defaults are compile-time only (the runtime export
throws), so runtimeInjection alone left every var(--cl-*) unresolved. Keep the
postcss extraction on in dev for the static :root defaults and keep
runtimeInjection for fresh atoms on edit; drop the treeshakeCompensation
experiment that didn't help.
@alexcarpenter
extract colors from styles
3a910e0
@alexcarpenter
alexcarpenter
merged commit d8407c9
into
mainJul 28, 2026

84 of 85 checks passed

@alexcarpenter
alexcarpenter
deleted the

carp/mosaic-badge

branch
July 28, 2026 16:35

This was referenced Jul 28, 2026
 Merged

 Merged

 Merged

 Closed

 Merged

 Merged

 Merged

 Closed

 Merged


This was referenced Aug 5, 2026
 Merged

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@maxyingermaxyingermaxyinger approved these changes

Assignees


No one assigned


Labels

ui

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@alexcarpenter@maxyinger