diff --git a/.changeset/secondaryButtonNativeColor.md b/.changeset/secondaryButtonNativeColor.md new file mode 100644 index 00000000000..f0a523dec9f --- /dev/null +++ b/.changeset/secondaryButtonNativeColor.md @@ -0,0 +1,5 @@ +--- +'@clerk/expo': patch +--- + +Support the `secondaryButton` theme color for native components, so social/SSO buttons no longer inherit the page `background` color. Pairs with the corresponding clerk-ios change. diff --git a/packages/expo/app.plugin.js b/packages/expo/app.plugin.js index c19c5d57a7b..649f6b87c30 100644 --- a/packages/expo/app.plugin.js +++ b/packages/expo/app.plugin.js @@ -591,7 +591,10 @@ const withClerkAppleSignIn = config => { * Accepts a `theme` prop pointing to a JSON file with optional keys: * - colors: { primary, background, input, danger, success, warning, * foreground, mutedForeground, primaryForeground, inputForeground, - * neutral, border, ring, muted, shadow } (hex color strings) + * neutral, border, ring, muted, secondaryButton, shadow } (hex color strings) + * `secondaryButton` is the fill for social/SSO (secondary) buttons; + * it defaults to the standard adaptive surface so a custom + * `background` does not bleed into the buttons. * - darkColors: same keys as colors (for dark mode) * - design: { fontFamily: string, borderRadius: number } * @@ -613,6 +616,7 @@ const VALID_COLOR_KEYS = [ 'border', 'ring', 'muted', + 'secondaryButton', 'shadow', ]; diff --git a/packages/expo/ios/ClerkViewFactory.swift b/packages/expo/ios/ClerkViewFactory.swift index 7e1925f41be..2934667ccfa 100644 --- a/packages/expo/ios/ClerkViewFactory.swift +++ b/packages/expo/ios/ClerkViewFactory.swift @@ -283,6 +283,7 @@ public final class ClerkViewFactory: ClerkViewFactoryProtocol { neutral: dict["neutral"].flatMap { colorFromHex($0) } ?? ClerkTheme.Colors.defaultNeutralColor, ring: dict["ring"].flatMap { colorFromHex($0) } ?? ClerkTheme.Colors.defaultRingColor, muted: dict["muted"].flatMap { colorFromHex($0) } ?? ClerkTheme.Colors.defaultMutedColor, + secondaryButton: dict["secondaryButton"].flatMap { colorFromHex($0) } ?? ClerkTheme.Colors.defaultSecondaryButtonColor, shadow: dict["shadow"].flatMap { colorFromHex($0) } ?? ClerkTheme.Colors.defaultShadowColor, border: dict["border"].flatMap { colorFromHex($0) } ?? ClerkTheme.Colors.defaultBorderColor )