@bifold/core 2.3.0 → 2.4.0

package/src/App.tsx

@@ -51,7 +51,7 @@ const createApp = (container: Container): React.FC => {
                     <StatusBar
                       hidden={false}
                       barStyle="light-content"
-                      backgroundColor={bifoldTheme.ColorPallet.brand.primary}
+                      backgroundColor={bifoldTheme.ColorPalette.brand.primary}
                       translucent={false}
                     />
                     <ErrorModal />

package/src/components/animated/ButtonLoading.tsx

@@ -11,7 +11,7 @@ const timing: Animated.TimingAnimationConfig = {
 }
 
 const ButtonLoading: React.FC = () => {
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const rotationAnim = useRef(new Animated.Value(0))
   const rotation = rotationAnim.current.interpolate({
     inputRange: [0, 1],
@@ -24,7 +24,7 @@ const ButtonLoading: React.FC = () => {
 
   return (
     <Animated.View style={{ transform: [{ rotate: rotation }] }}>
-      <Icon style={{ color: ColorPallet.brand.icon }} size={25} name="refresh" />
+      <Icon style={{ color: ColorPalette.brand.icon }} size={25} name="refresh" />
     </Animated.View>
   )
 }

package/src/components/animated/ConnectionLoading.tsx

@@ -10,7 +10,7 @@ const timing: Animated.TimingAnimationConfig = {
 }
 
 const ConnectionLoading: React.FC = () => {
-  const { ColorPallet, Assets } = useTheme()
+  const { ColorPalette, Assets } = useTheme()
   const rotationAnim = useRef(new Animated.Value(0))
   const rotation = rotationAnim.current.interpolate({
     inputRange: [0, 1],
@@ -26,12 +26,12 @@ const ConnectionLoading: React.FC = () => {
     },
   })
   const credentialInHandDisplayOptions = {
-    fill: ColorPallet.notification.infoText,
+    fill: ColorPalette.notification.infoText,
     height: 130,
     width: 130,
   }
   const animatedCircleDisplayOptions = {
-    fill: ColorPallet.notification.infoText,
+    fill: ColorPalette.notification.infoText,
     height: 250,
     width: 250,
   }

package/src/components/animated/LoadingIndicator.tsx

@@ -11,7 +11,7 @@ const timing: Animated.TimingAnimationConfig = {
 }
 
 const LoadingIndicator: React.FC = () => {
-  const { ColorPallet, Assets } = useTheme()
+  const { ColorPalette, Assets } = useTheme()
   const rotationAnim = useRef(new Animated.Value(0))
   const rotation = rotationAnim.current.interpolate({
     inputRange: [0, 1],
@@ -23,7 +23,7 @@ const LoadingIndicator: React.FC = () => {
     },
   })
   const imageDisplayOptions = {
-    fill: ColorPallet.notification.infoText,
+    fill: ColorPalette.notification.infoText,
     height: 200,
     width: 200,
   }

package/src/components/animated/PresentationLoading.tsx

@@ -10,7 +10,7 @@ const timing: Animated.TimingAnimationConfig = {
 }
 
 const PresentationLoading: React.FC = () => {
-  const { ColorPallet, Assets } = useTheme()
+  const { ColorPalette, Assets } = useTheme()
   const rotationAnim = useRef(new Animated.Value(0))
   const rotation = rotationAnim.current.interpolate({
     inputRange: [0, 1],
@@ -27,10 +27,10 @@ const PresentationLoading: React.FC = () => {
     },
   })
   const displayOptions = {
-    fill: ColorPallet.notification.infoText,
+    fill: ColorPalette.notification.infoText,
   }
   const animatedCircleDisplayOptions = {
-    fill: ColorPallet.notification.infoText,
+    fill: ColorPalette.notification.infoText,
     height: 250,
     width: 250,
   }

package/src/components/animated/RecordLoading.tsx

@@ -20,20 +20,20 @@ const RecordLoading: React.FC<RecordLoadingProps> = ({ style }) => {
   const { width } = useWindowDimensions()
   const padding = width * 0.05
   const logoHeight = width * 0.12
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const rowFadeAnim = useRef(new Animated.Value(1))
   const myStyle = StyleSheet.create({
     container: {
       flexDirection: 'column',
     },
     rectangle: {
-      backgroundColor: ColorPallet.grayscale.lightGrey,
+      backgroundColor: ColorPalette.grayscale.lightGrey,
       height: 30,
       marginVertical: 5,
       borderRadius,
     },
     margin: {
-      backgroundColor: ColorPallet.grayscale.lightGrey,
+      backgroundColor: ColorPalette.grayscale.lightGrey,
       width: 40,
       borderTopLeftRadius: borderRadius,
       borderBottomLeftRadius: borderRadius,
@@ -41,7 +41,7 @@ const RecordLoading: React.FC<RecordLoadingProps> = ({ style }) => {
     logo: {
       marginLeft: -1 * logoHeight + padding,
       marginTop: padding,
-      backgroundColor: ColorPallet.grayscale.lightGrey,
+      backgroundColor: ColorPalette.grayscale.lightGrey,
       height: logoHeight,
       width: logoHeight,
       borderRadius,
@@ -54,7 +54,7 @@ const RecordLoading: React.FC<RecordLoadingProps> = ({ style }) => {
 
   return (
     <Animated.View
-      style={[{ opacity: rowFadeAnim.current, backgroundColor: ColorPallet.grayscale.white, borderRadius: 15 }, style]}
+      style={[{ opacity: rowFadeAnim.current, backgroundColor: ColorPalette.grayscale.white, borderRadius: 15 }, style]}
     >
       <View style={myStyle.container} testID={testIdWithKey('RecordLoading')}>
         <View style={{ flexDirection: 'row' }}>

package/src/components/animated/SendingProof.tsx

@@ -10,7 +10,7 @@ const timing: Animated.TimingAnimationConfig = {
 }
 
 const SendingProof: React.FC = () => {
-  const { ColorPallet, Assets } = useTheme()
+  const { ColorPalette, Assets } = useTheme()
   const rotationAnim = useRef(new Animated.Value(0))
   const rotation = rotationAnim.current.interpolate({
     inputRange: [0, 1],
@@ -26,12 +26,12 @@ const SendingProof: React.FC = () => {
     },
   })
   const credentialInHandDisplayOptions = {
-    fill: ColorPallet.notification.infoText,
+    fill: ColorPalette.notification.infoText,
     height: 130,
     width: 130,
   }
   const animatedCircleDisplayOptions = {
-    fill: ColorPallet.notification.infoText,
+    fill: ColorPalette.notification.infoText,
     height: 250,
     width: 250,
   }

package/src/components/animated/SentProof.tsx

@@ -15,7 +15,7 @@ const checkFadeTiming: Animated.TimingAnimationConfig = {
 }
 
 const SentProof: React.FC = () => {
-  const { ColorPallet, Assets } = useTheme()
+  const { ColorPalette, Assets } = useTheme()
   const ringFadeAnim = useRef(new Animated.Value(1))
   const checkFadeAnim = useRef(new Animated.Value(0))
   const style = StyleSheet.create({
@@ -35,12 +35,12 @@ const SentProof: React.FC = () => {
     },
   })
   const credentialInHandDisplayOptions = {
-    fill: ColorPallet.notification.infoText,
+    fill: ColorPalette.notification.infoText,
     height: 130,
     width: 130,
   }
   const animatedCircleDisplayOptions = {
-    fill: ColorPallet.notification.infoText,
+    fill: ColorPalette.notification.infoText,
     height: 250,
     width: 250,
   }

package/src/components/buttons/Button.tsx

@@ -24,7 +24,7 @@ const ButtonImplComponent = (
   const buttonStyles = {
     [ButtonType.Critical]: {
       color: Buttons.critical,
-      colorDisabled: Buttons.criticalTextDisabled,
+      colorDisabled: Buttons.criticalDisabled,
       text: Buttons.criticalText,
       textDisabled: Buttons.criticalTextDisabled,
     },

package/src/components/buttons/IconButton.tsx

@@ -32,7 +32,7 @@ const IconButton: React.FC<IconButtonProps> = ({
   onPress,
   iconTintColor,
 }) => {
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const style = StyleSheet.create({
     container: {
       flexDirection: 'row',
@@ -43,12 +43,14 @@ const IconButton: React.FC<IconButtonProps> = ({
       minHeight: defaultIconSize,
     },
     title: {
-      color: ColorPallet.brand.headerText,
+      color: ColorPalette.brand.headerText,
       marginRight: 4,
     },
   })
 
-  const myIcon = () => <Icon name={icon} size={defaultIconSize} color={iconTintColor ?? ColorPallet.brand.headerIcon} />
+  const myIcon = () => (
+    <Icon name={icon} size={defaultIconSize} color={iconTintColor ?? ColorPalette.brand.headerIcon} />
+  )
 
   const myText = () =>
     text ? (

package/src/components/buttons/ToggleButton.tsx

@@ -23,7 +23,7 @@ const ToggleButton: React.FC<ToggleButtonProps> = ({
   disabledIcon = 'close',
   disabled = false,
 }) => {
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const [toggleAnim] = useState(new Animated.Value(isEnabled ? 1 : 0))
   const { t } = useTranslation()
 
@@ -37,7 +37,7 @@ const ToggleButton: React.FC<ToggleButtonProps> = ({
 
   const backgroundColor = toggleAnim.interpolate({
     inputRange: [0, 1],
-    outputRange: [ColorPallet.grayscale.lightGrey, ColorPallet.brand.primary],
+    outputRange: [ColorPalette.grayscale.lightGrey, ColorPalette.brand.primary],
   })
 
   const translateX = toggleAnim.interpolate({
@@ -82,7 +82,7 @@ const ToggleButton: React.FC<ToggleButtonProps> = ({
           <Icon
             name={isEnabled ? enabledIcon : disabledIcon}
             size={15}
-            color={isEnabled ? ColorPallet.brand.primary : ColorPallet.grayscale.mediumGrey}
+            color={isEnabled ? ColorPalette.brand.primary : ColorPalette.grayscale.mediumGrey}
           />
         </Animated.View>
       </Animated.View>

package/src/components/chat/ActionSlider.tsx

@@ -21,7 +21,7 @@ interface Props {
 }
 
 const ActionSlider: React.FC<Props> = ({ actions, onDismiss }) => {
-  const { ColorPallet, TextTheme } = useTheme()
+  const { ColorPalette, TextTheme } = useTheme()
   const { t } = useTranslation()
 
   const styles = StyleSheet.create({
@@ -33,7 +33,7 @@ const ActionSlider: React.FC<Props> = ({ actions, onDismiss }) => {
       height: '100%',
     },
     modalView: {
-      backgroundColor: ColorPallet.grayscale.white,
+      backgroundColor: ColorPalette.grayscale.white,
       borderTopStartRadius: 20,
       borderTopEndRadius: 20,
       shadowColor: '#000',
@@ -61,7 +61,7 @@ const ActionSlider: React.FC<Props> = ({ actions, onDismiss }) => {
       marginVertical: 12,
     },
     drawerRowItem: {
-      color: ColorPallet.grayscale.black,
+      color: ColorPalette.grayscale.black,
     },
   })
 

package/src/components/forms/WalletNameForm.tsx

@@ -29,7 +29,7 @@ interface NameWalletProps {
 
 const NameWalletForm: React.FC<NameWalletProps> = ({ isRenaming, onSubmitSuccess, onCancel }) => {
   const { t } = useTranslation()
-  const { ColorPallet, Assets, Spacing } = useTheme()
+  const { ColorPalette, Assets, Spacing } = useTheme()
   const [store, dispatch] = useStore()
   const [loading, setLoading] = useState(false)
   const [walletName, setWalletName] = useState(store.preferences.walletName ?? generateRandomWalletName())
@@ -42,7 +42,7 @@ const NameWalletForm: React.FC<NameWalletProps> = ({ isRenaming, onSubmitSuccess
   const styles = StyleSheet.create({
     screenContainer: {
       flex: 1,
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       padding: Spacing.md,
       justifyContent: 'space-between',
     },

package/src/components/inputs/BiometryControl.tsx

@@ -25,13 +25,13 @@ const BiometryControl: React.FC<BiometryControlProps> = ({ biometryEnabled, onBi
   const { isBiometricsActive } = useAuth()
   const [biometryAvailable, setBiometryAvailable] = useState(false)
   const [settingsPopupConfig, setSettingsPopupConfig] = useState<null | { title: string; description: string }>(null)
-  const { ColorPallet, Assets } = useTheme()
+  const { ColorPalette, Assets } = useTheme()
 
   const styles = StyleSheet.create({
     container: {
       height: '100%',
       padding: 20,
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
     },
     image: {
       minWidth: 200,

package/src/components/inputs/BulletPoint.tsx

@@ -11,7 +11,7 @@ interface BulletPointProps {
 }
 
 const BulletPoint: React.FC<BulletPointProps> = ({ text, textStyle }) => {
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const styles = StyleSheet.create({
     iconContainer: {
       marginRight: 10,
@@ -22,7 +22,7 @@ const BulletPoint: React.FC<BulletPointProps> = ({ text, textStyle }) => {
   return (
     <View style={{ marginVertical: 10, flexDirection: 'row', alignItems: 'flex-start' }}>
       <View style={styles.iconContainer}>
-        <Icon name={'circle'} size={9} color={ColorPallet.brand.modalIcon} />
+        <Icon name={'circle'} size={9} color={ColorPalette.brand.modalIcon} />
       </View>
       <ThemedText style={[textStyle, { flexShrink: 1 }]}>{text}</ThemedText>
     </View>

package/src/components/listItems/ContactCredentialListItem.tsx

@@ -16,7 +16,7 @@ export type ContactCredentialListItemProps = {
 }
 
 const ContactCredentialListItem = ({ credential, onPress }: ContactCredentialListItemProps) => {
-  const { Assets, ColorPallet } = useTheme()
+  const { Assets, ColorPalette } = useTheme()
   const { t, i18n } = useTranslation()
   const credentialConnectionLabel = useCredentialConnectionLabel(credential)
   const params = useMemo(
@@ -43,7 +43,7 @@ const ContactCredentialListItem = ({ credential, onPress }: ContactCredentialLis
       flex: 9,
     },
     credentialName: {
-      color: ColorPallet.brand.primary,
+      color: ColorPalette.brand.primary,
       fontWeight: '600',
     },
     iconContainer: {
@@ -53,7 +53,7 @@ const ContactCredentialListItem = ({ credential, onPress }: ContactCredentialLis
   })
 
   const icon = {
-    color: ColorPallet.brand.primary,
+    color: ColorPalette.brand.primary,
     width: 48,
     height: 48,
   }

package/src/components/listItems/ContactListItem.tsx

@@ -19,7 +19,7 @@ export interface ContactListItemProps {
 }
 
 const ContactListItem: React.FC<ContactListItemProps> = ({ contact, navigation }) => {
-  const { ColorPallet, ListItems } = useTheme()
+  const { ColorPalette, ListItems } = useTheme()
   const messages = useChatMessagesByConnection(contact)
   const message = messages[0]
   const hasOnlyInitialMessage = messages.length < 2
@@ -30,7 +30,7 @@ const ContactListItem: React.FC<ContactListItemProps> = ({ contact, navigation }
     container: {
       flexDirection: 'row',
       padding: 16,
-      backgroundColor: ColorPallet.brand.secondaryBackground,
+      backgroundColor: ColorPalette.brand.secondaryBackground,
     },
     avatarContainer: {
       alignItems: 'center',

package/src/components/listItems/NotificationListItem.tsx

@@ -88,7 +88,7 @@ const NotificationListItem: React.FC<NotificationListItemProps> = ({
   const navigation = useNavigation<StackNavigationProp<HomeStackParams>>()
   const [store, dispatch] = useStore()
   const { t } = useTranslation()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const { agent } = useAgent()
   const [declineModalVisible, setDeclineModalVisible] = useState(false)
   const [action, setAction] = useState<any>()
@@ -104,13 +104,13 @@ const NotificationListItem: React.FC<NotificationListItemProps> = ({
   const [details, setDetails] = useState<DisplayDetails>(defaultDetails)
   const [styleConfig, setStyleConfig] = useState<StyleConfig>({
     containerStyle: {
-      backgroundColor: ColorPallet.notification.info,
-      borderColor: ColorPallet.notification.infoBorder,
+      backgroundColor: ColorPalette.notification.info,
+      borderColor: ColorPalette.notification.infoBorder,
     },
     textStyle: {
-      color: ColorPallet.notification.infoText,
+      color: ColorPalette.notification.infoText,
     },
-    iconColor: ColorPallet.notification.infoIcon,
+    iconColor: ColorPalette.notification.infoIcon,
     iconName: 'info',
   })
 
@@ -410,39 +410,39 @@ const NotificationListItem: React.FC<NotificationListItemProps> = ({
       case InfoBoxType.Success:
         setStyleConfig({
           containerStyle: {
-            backgroundColor: ColorPallet.notification.success,
-            borderColor: ColorPallet.notification.successBorder,
+            backgroundColor: ColorPalette.notification.success,
+            borderColor: ColorPalette.notification.successBorder,
           },
           textStyle: {
-            color: ColorPallet.notification.successText,
+            color: ColorPalette.notification.successText,
           },
-          iconColor: ColorPallet.notification.successIcon,
+          iconColor: ColorPalette.notification.successIcon,
           iconName: 'check-circle',
         })
         break
       case InfoBoxType.Warn:
         setStyleConfig({
           containerStyle: {
-            backgroundColor: ColorPallet.notification.warn,
-            borderColor: ColorPallet.notification.warnBorder,
+            backgroundColor: ColorPalette.notification.warn,
+            borderColor: ColorPalette.notification.warnBorder,
           },
           textStyle: {
-            color: ColorPallet.notification.warnText,
+            color: ColorPalette.notification.warnText,
           },
-          iconColor: ColorPallet.notification.warnIcon,
+          iconColor: ColorPalette.notification.warnIcon,
           iconName: 'warning',
         })
         break
       case InfoBoxType.Error:
         setStyleConfig({
           containerStyle: {
-            backgroundColor: ColorPallet.notification.error,
-            borderColor: ColorPallet.notification.errorBorder,
+            backgroundColor: ColorPalette.notification.error,
+            borderColor: ColorPalette.notification.errorBorder,
           },
           textStyle: {
-            color: ColorPallet.notification.errorText,
+            color: ColorPalette.notification.errorText,
           },
-          iconColor: ColorPallet.notification.errorIcon,
+          iconColor: ColorPalette.notification.errorIcon,
           iconName: 'error',
         })
         break
@@ -450,17 +450,17 @@ const NotificationListItem: React.FC<NotificationListItemProps> = ({
       default:
         setStyleConfig({
           containerStyle: {
-            backgroundColor: ColorPallet.notification.info,
-            borderColor: ColorPallet.notification.infoBorder,
+            backgroundColor: ColorPalette.notification.info,
+            borderColor: ColorPalette.notification.infoBorder,
           },
           textStyle: {
-            color: ColorPallet.notification.infoText,
+            color: ColorPalette.notification.infoText,
           },
-          iconColor: ColorPallet.notification.infoIcon,
+          iconColor: ColorPalette.notification.infoIcon,
           iconName: 'info',
         })
     }
-  }, [details, ColorPallet])
+  }, [details, ColorPalette])
 
   return (
     <View style={[styles.container, styleConfig.containerStyle]} testID={testIdWithKey('NotificationListItem')}>

package/src/components/misc/ConnectionAlert.tsx

@@ -21,7 +21,7 @@ interface ConnectionAlertProps {
 
 const ConnectionAlert: React.FC<ConnectionAlertProps> = ({ connectionLabel }) => {
   const { t } = useTranslation()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const [infoCardVisible, setInfoCardVisible] = useState(false)
 
   const settingsNavigation = useNavigation<StackNavigationProp<RootStackParams>>()
@@ -31,12 +31,12 @@ const ConnectionAlert: React.FC<ConnectionAlertProps> = ({ connectionLabel }) =>
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
-      backgroundColor: ColorPallet.notification.popupOverlay,
+      backgroundColor: ColorPalette.notification.popupOverlay,
       padding: 20,
     },
     notifyTextContainer: {
-      borderLeftColor: ColorPallet.brand.highlight,
-      backgroundColor: ColorPallet.brand.secondaryBackground,
+      borderLeftColor: ColorPalette.brand.highlight,
+      backgroundColor: ColorPalette.brand.secondaryBackground,
       borderLeftWidth: 10,
       flex: 1,
       paddingLeft: 10,
@@ -56,7 +56,7 @@ const ConnectionAlert: React.FC<ConnectionAlertProps> = ({ connectionLabel }) =>
       marginVertical: 6,
     },
     informationIcon: {
-      color: ColorPallet.notification.infoIcon,
+      color: ColorPalette.notification.infoIcon,
       marginLeft: 10,
     },
   })

package/src/components/misc/ConnectionImage.tsx

@@ -12,17 +12,17 @@ interface ConnectionImageProps {
 }
 
 const ConnectionImage: React.FC<ConnectionImageProps> = ({ connectionId, imageUri, marginTop }) => {
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const styles = StyleSheet.create({
     connectionImageContainer: {
-      backgroundColor: ColorPallet.brand.secondaryBackground,
+      backgroundColor: ColorPalette.brand.secondaryBackground,
       width: 90,
       height: 90,
       alignItems: 'center',
       justifyContent: 'center',
       borderRadius: 45,
       marginTop: marginTop ?? 15,
-      borderColor: ColorPallet.grayscale.lightGrey,
+      borderColor: ColorPalette.grayscale.lightGrey,
       borderWidth: 3,
       alignSelf: 'center',
     },

package/src/components/misc/CredentialCard.tsx

@@ -46,7 +46,7 @@ const CredentialCard: React.FC<CredentialCardProps> = ({
 }) => {
   // add ability to reference credential by ID, allows us to get past react hook restrictions
   const [bundleResolver] = useServices([TOKENS.UTIL_OCA_RESOLVER])
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const [overlay, setOverlay] = useState<CredentialOverlay<BrandingOverlay>>({})
   const { resolveBundleForCredential } = useOpenIDCredentials()
   const [extraOverlayAttribute, setExtraOverlayAttribute] = useState<Attribute | undefined>()
@@ -85,7 +85,7 @@ const CredentialCard: React.FC<CredentialCardProps> = ({
       return (
         <CredentialCard11
           displayItems={displayItems}
-          style={isBranding10 ? { backgroundColor: ColorPallet.brand.secondaryBackground } : undefined}
+          style={isBranding10 ? { backgroundColor: ColorPalette.brand.secondaryBackground } : undefined}
           credName={credName}
           credDefId={credDefId}
           schemaId={schemaId}

package/src/components/misc/CredentialCard10.tsx

@@ -79,7 +79,7 @@ const CredentialCard10: React.FC<CredentialCard10Props> = ({ credential, style =
   const cardHeight = width / 2 // a card height is half of the screen width
   const cardHeaderHeight = cardHeight / 4 // a card has a total of 4 rows, and the header occupy 1 row
   const { t, i18n } = useTranslation()
-  const { ColorPallet, TextTheme } = useTheme()
+  const { ColorPalette, TextTheme } = useTheme()
   const [overlay, setOverlay] = useState<CredentialOverlay<LegacyBrandingOverlay>>({})
   const [isRevoked, setIsRevoked] = useState<boolean>(false)
   const credentialConnectionLabel = useCredentialConnectionLabel(credential)
@@ -119,7 +119,7 @@ const CredentialCard10: React.FC<CredentialCard10Props> = ({ credential, style =
       borderBottomRightRadius: borderRadius,
     },
     revokedFooter: {
-      backgroundColor: ColorPallet.notification.error,
+      backgroundColor: ColorPalette.notification.error,
       flexGrow: 1,
       marginHorizontal: -1 * paddingHorizontal,
       marginVertical: -1 * paddingVertical,
@@ -189,7 +189,7 @@ const CredentialCard10: React.FC<CredentialCard10Props> = ({ credential, style =
                   color:
                     overlay?.brandingOverlay?.header?.color ??
                     credentialTextColor(
-                      ColorPallet,
+                      ColorPalette,
                       overlay?.brandingOverlay?.header?.backgroundColor || overlay?.brandingOverlay?.backgroundColor
                     ),
                   paddingHorizontal: 0.5 * paddingHorizontal,
@@ -212,7 +212,7 @@ const CredentialCard10: React.FC<CredentialCard10Props> = ({ credential, style =
                 color:
                   overlay?.brandingOverlay?.header?.color ??
                   credentialTextColor(
-                    ColorPallet,
+                    ColorPalette,
                     overlay?.brandingOverlay?.header?.backgroundColor || overlay?.brandingOverlay?.backgroundColor
                   ),
                 textAlign: 'right',
@@ -241,7 +241,7 @@ const CredentialCard10: React.FC<CredentialCard10Props> = ({ credential, style =
         {revoked ? (
           <View style={styles.revokedFooter}>
             <Text
-              style={[TextTheme.label, { color: ColorPallet.semantic.error }]}
+              style={[TextTheme.label, { color: ColorPalette.semantic.error }]}
               testID={testIdWithKey('CredentialRevoked')}
             >
               {t('CredentialDetails.Revoked')}
@@ -255,7 +255,7 @@ const CredentialCard10: React.FC<CredentialCard10Props> = ({ credential, style =
                 color:
                   overlay?.brandingOverlay?.footer?.color ??
                   credentialTextColor(
-                    ColorPallet,
+                    ColorPalette,
                     overlay?.brandingOverlay?.footer?.backgroundColor || overlay?.brandingOverlay?.backgroundColor
                   ),
               },