| 1 | import type { ClerkProviderProps } from "@clerk/react"; |
| 2 | |
| 3 | /** Keeps Clerk's stock component structure while binding its color system to |
| 4 | * the live T3 Code palette. CSS variables make theme changes propagate to |
| 5 | * portaled sign-in and profile surfaces without remounting Clerk. */ |
| 6 | export const clerkAppearance = { |
| 7 | variables: { |
| 8 | // Clerk reuses its primary color for filled buttons and bare links. The |
| 9 | // app's update foreground is the palette's action hue cast for readable |
| 10 | // text, while the card surface provides the inverse filled-control pair. |
| 11 | colorPrimary: "var(--update-foreground)", |
| 12 | colorPrimaryForeground: "var(--card)", |
| 13 | colorDanger: "var(--error)", |
| 14 | colorSuccess: "var(--success)", |
| 15 | colorWarning: "var(--warning)", |
| 16 | colorNeutral: "var(--contrast-foreground)", |
| 17 | colorForeground: "var(--contrast-foreground)", |
| 18 | // The stock dark theme's muted token is translucent. Clerk uses this as |
| 19 | // the footer's background, so derive an opaque muted surface from the card. |
| 20 | colorMuted: "color-mix(in srgb, var(--card) 98%, var(--contrast-foreground))", |
| 21 | colorMutedForeground: "var(--contrast-muted-foreground)", |
| 22 | colorBackground: "var(--card)", |
| 23 | colorInputForeground: "var(--contrast-foreground)", |
| 24 | colorInput: "var(--secondary)", |
| 25 | colorRing: "var(--ring)", |
| 26 | }, |
| 27 | elements: { |
| 28 | formFieldErrorText: { color: "var(--error-foreground)" }, |
| 29 | formFieldWarningText: { color: "var(--warning-foreground)" }, |
| 30 | formFieldSuccessText: { color: "var(--success-foreground)" }, |
| 31 | otpCodeFieldErrorText: { color: "var(--error-foreground)" }, |
| 32 | otpCodeFieldSuccessText: { color: "var(--success-foreground)" }, |
| 33 | }, |
| 34 | } satisfies NonNullable<ClerkProviderProps["appearance"]>; |