fix(web): theme Clerk surfaces

[StiensWout]

Clerk’s sign-in and account surfaces kept their default palette after selecting a T3 Code theme, which made authentication feel disconnected from the surrounding app.

This passes live semantic color tokens into the shared Clerk provider used by web and desktop. Clerk keeps its existing component structure, spacing, and behavior. Its card and controls now use contrast-safe surface roles, while the shared action color remains readable both as a filled button and as bare link text.

Before

After

Verification

• pnpm exec vp test run --passWithNoTests --project unit src/components/clerk/clerkAppearance.test.ts
• Contrast assertions cover all 10 built-in light and dark palette variants at 4.5:1 or better
• pnpm exec vp run --filter @t3tools/web typecheck
• Targeted formatting and lint checks for the changed files
• Playwright comparison against a real Clerk-rendered sign-in modal using T3 Chat dark mode

Made with GPT-5.6-SOL in T3 Code through the Codex harness.

---

Note

Low Risk
Appearance-only change to Clerk theming; no auth logic, session handling, or credential flow is modified.

Overview
Clerk sign-in and account UI now follows the live T3 Code theme instead of Clerk’s default palette.

Adds a shared clerkAppearance config that maps Clerk color variables to app CSS tokens (e.g. --update-foreground, --card, status foregrounds). That config is passed to both ClerkProvider and ElectronClerkProvider, so theme switches apply to portaled auth surfaces without remounting Clerk.

Includes unit tests that lock the variable mapping and assert ≥4.5:1 contrast for key text/surface pairs across all built-in light and dark palettes.

^{Reviewed by Cursor Bugbot for commit 99d4a82. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Apply app theme CSS variables to Clerk UI components

• Adds clerkAppearance.ts which maps Clerk appearance variables (primary, status, neutral, foreground, muted, background, input, ring) to the app's CSS custom properties.
• Passes appearance={clerkAppearance} to both ClerkProvider and ElectronClerkProvider in main.tsx.
• Adds contrast ratio tests in clerkAppearance.test.ts verifying foreground colors meet the WCAG 4.5:1 minimum against their surfaces across all built-in themes.

^{Macroscope summarized 99d4a82.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: b5c1bfd5-b451-43e0-9e3d-f1734ced4e6a

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

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[macroscopeapp]

Approvability

Verdict: Approved 99d4a82

Simple CSS theming change that maps color variables to Clerk's appearance API for consistent styling. No behavioral changes beyond visual appearance. Includes comprehensive contrast ratio tests.

^{You can customize Macroscope's approvability policy. Learn more.}

Dismissing prior approval to re-evaluate 1c711f3

Dismissing prior approval to re-evaluate 99d4a82

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 99d4a82. Configure here.}

[cursor]

Status fills lose dark contrast

Medium Severity

Mapping colorDanger, colorSuccess, and colorWarning to *-foreground tokens improves inline status text, but Clerk also uses those same values as solid button fills with hardcoded white labels. Dark palettes make those foreground roles light tints, so destructive account actions land near white-on-pale contrast while colorPrimary still gets an explicit inverse pair via colorPrimaryForeground.

 

^{Reviewed by Cursor Bugbot for commit 99d4a82. Configure here.}