feat(ui): Introduce ceramic theme

[alexcarpenter]

Description

Introduces the infra for Ceramic theme usage within c1 only components which should be unaffected by the appearance prop usage. This currently includes <KeylessPrompt /> and <EnableOrganizationsPrompt />.

• theme.ts contains theme tokens pulled from the ceramic design system found in dashboard
• variants.ts contains a cva-like util for defining component variants as seem in button.ts and text.ts.

Checklist

• pnpm test runs as expected.
• pnpm build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

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

Summary by CodeRabbit

Release Notes

New Features

• Introduced a complete design system for Ceramic including a comprehensive color palette, typography system, and spacing utilities
• Added styled button and text components with configurable visual variants
• Implemented theme provider enabling consistent styling throughout the application

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Feb 4, 2026 6:25pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 6ed7340

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

[pkg-pr-new]

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7750

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7750

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: 6ed7340

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request introduces a new ceramic UI component system within the packages/ui directory. It establishes a comprehensive theme definition including color palettes, typography tokens, spacing, and utilities. A variants utility module provides CSS-in-JS styling composition with support for base styles, variant rules, defaults, and compound variants. The infrastructure includes a React theme provider component and hook for context consumption. Button and text styling modules demonstrate usage of the variants system. A changeset file documents the changes, and extensive unit and type tests validate the variants system functionality and type safety.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'feat(ui): Introduce ceramic theme' accurately describes the main change: introducing a new ceramic theme system with associated styling utilities and components.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@packages/ui/src/mosaic/index.ts`:
- Around line 1-4: Remove the barrel re-exports in this file and stop
re-exporting variants, buttonStyles, MosaicThemeProvider, useMosaicTheme,
mosaicTheme, and type MosaicTheme from a single index.ts; instead delete this
barrel and update consumers to import directly from the concrete modules (e.g.,
import { variants } from './mosaic/variants', import { buttonStyles } from
'./mosaic/button', import { MosaicThemeProvider, useMosaicTheme } from
'./mosaic/theme-provider', import { mosaicTheme, type MosaicTheme } from
'./mosaic/theme'). Ensure any package export maps or module entrypoints
reference the specific files rather than this index to avoid circular dependency
issues.

[alexcarpenter]

empty as there are no public changes in the PR