@bifold/core 2.3.0 → 2.4.0

package/src/screens/ContactDetails.tsx

@@ -52,7 +52,7 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
     ...useCredentialByState(CredentialState.CredentialReceived),
     ...useCredentialByState(CredentialState.Done),
   ].filter((credential) => credential.connectionId === connection?.id)
-  const { ColorPallet, Assets } = useTheme()
+  const { ColorPalette, Assets } = useTheme()
   const [store] = useStore()
   const { width } = useWindowDimensions()
   const contactImageHeight = width * CONTACT_IMG_PERCENTAGE
@@ -76,7 +76,7 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
   const styles = StyleSheet.create({
     contentContainer: {
       padding: 20,
-      backgroundColor: ColorPallet.brand.secondaryBackground,
+      backgroundColor: ColorPalette.brand.secondaryBackground,
     },
     contactContainer: {
       flexDirection: 'row',
@@ -242,7 +242,7 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
                 fontSize: contactImageHeight,
                 lineHeight: contactImageHeight,
                 alignSelf: 'center',
-                color: ColorPallet.brand.primary,
+                color: ColorPalette.brand.primary,
               }}
             >
               {contactLabel.charAt(0).toUpperCase()}
@@ -271,14 +271,14 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
         )}
         {contactDetailsOptions?.enableCredentialList && (
           <>
-            <View style={{ borderTopColor: ColorPallet.grayscale.lightGrey, borderWidth: 1, marginTop: 20 }}></View>
+            <View style={{ borderTopColor: ColorPalette.grayscale.lightGrey, borderWidth: 1, marginTop: 20 }}></View>
             <ThemedText variant="headingFour" style={{ marginVertical: 16 }}>
               {t('ContactDetails.Credentials')}
             </ThemedText>
             <FlatList
               ItemSeparatorComponent={() => <View style={{ height: 20 }}></View>}
               ListEmptyComponent={() => (
-                <ThemedText style={{ color: ColorPallet.grayscale.lightGrey }}>
+                <ThemedText style={{ color: ColorPalette.grayscale.lightGrey }}>
                   {t('ContactDetails.NoCredentials')}
                 </ThemedText>
               )}
@@ -303,7 +303,7 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
             testID={testIdWithKey('RenameContact')}
             style={[styles.contentContainer, styles.actionContainer, { marginTop: 10 }]}
           >
-            <Assets.svg.iconEdit width={20} height={20} color={ColorPallet.brand.text} />
+            <Assets.svg.iconEdit width={20} height={20} color={ColorPalette.brand.text} />
             <ThemedText>{t('Screens.RenameContact')}</ThemedText>
           </TouchableOpacity>
         )}
@@ -316,7 +316,7 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
             testID={testIdWithKey('JSONDetails')}
             style={[styles.contentContainer, styles.actionContainer, { marginTop: 10 }]}
           >
-            <Assets.svg.iconCode width={20} height={20} color={ColorPallet.brand.text} />
+            <Assets.svg.iconCode width={20} height={20} color={ColorPalette.brand.text} />
             <ThemedText>{t('Global.ViewJSON')}</ThemedText>
           </TouchableOpacity>
         )}
@@ -327,8 +327,8 @@ const ContactDetails: React.FC<ContactDetailsProps> = ({ route }) => {
           testID={testIdWithKey('RemoveFromWallet')}
           style={[styles.contentContainer, styles.actionContainer, { marginTop: 10 }]}
         >
-          <Assets.svg.iconDelete width={20} height={20} color={ColorPallet.semantic.error} />
-          <ThemedText style={{ color: ColorPallet.semantic.error }}>{t('ContactDetails.RemoveContact')}</ThemedText>
+          <Assets.svg.iconDelete width={20} height={20} color={ColorPalette.semantic.error} />
+          <ThemedText style={{ color: ColorPalette.semantic.error }}>{t('ContactDetails.RemoveContact')}</ThemedText>
         </TouchableOpacity>
       </View>
       <CommonRemoveModal

package/src/screens/CredentialDetails.tsx

@@ -54,7 +54,7 @@ const CredentialDetails: React.FC<CredentialDetailsProps> = ({ navigation, route
   const [credential, setCredential] = useState<CredentialExchangeRecord | undefined>(undefined)
   const { agent } = useAgent()
   const { t, i18n } = useTranslation()
-  const { ColorPallet, Assets } = useTheme()
+  const { ColorPalette, Assets } = useTheme()
   const [bundleResolver, logger, historyManagerCurried, historyEnabled, historyEventsLogger] = useServices([
     TOKENS.UTIL_OCA_RESOLVER,
     TOKENS.UTIL_LOGGER,
@@ -119,7 +119,7 @@ const CredentialDetails: React.FC<CredentialDetailsProps> = ({ navigation, route
   })
 
   const icon = {
-    color: credentialTextColor(ColorPallet, containerBackgroundColor),
+    color: credentialTextColor(ColorPalette, containerBackgroundColor),
     width: 48,
     height: 48,
   }
@@ -323,7 +323,7 @@ const CredentialDetails: React.FC<CredentialDetailsProps> = ({ navigation, route
               <CredentialCardLogo overlay={overlay} brandingOverlayType={bundleResolver.getBrandingOverlayType()} />
               <ThemedText
                 style={{
-                  color: credentialTextColor(ColorPallet, containerBackgroundColor),
+                  color: credentialTextColor(ColorPalette, containerBackgroundColor),
                   flexWrap: 'wrap',
                   maxWidth: '90%',
                 }}
@@ -334,7 +334,7 @@ const CredentialDetails: React.FC<CredentialDetailsProps> = ({ navigation, route
             <Assets.svg.iconChevronRight {...icon} />
           </View>
         </TouchableOpacity>
-        <View style={{ backgroundColor: ColorPallet.brand.secondaryBackground }}>
+        <View style={{ backgroundColor: ColorPalette.brand.secondaryBackground }}>
           <CredentialDetailPrimaryHeader
             overlay={overlay}
             brandingOverlayType={bundleResolver.getBrandingOverlayType()}
@@ -362,7 +362,7 @@ const CredentialDetails: React.FC<CredentialDetailsProps> = ({ navigation, route
           <View
             style={{
               padding: paddingVertical,
-              backgroundColor: ColorPallet.brand.secondaryBackground,
+              backgroundColor: ColorPalette.brand.secondaryBackground,
               ...(isBranding11 && { paddingTop: 0 }),
             }}
           >
@@ -379,27 +379,27 @@ const CredentialDetails: React.FC<CredentialDetailsProps> = ({ navigation, route
         {credentialConnectionLabel && isBranding10 ? (
           <View
             style={{
-              backgroundColor: ColorPallet.brand.secondaryBackground,
+              backgroundColor: ColorPalette.brand.secondaryBackground,
               marginTop: paddingVertical,
               paddingHorizontal,
               paddingVertical,
             }}
           >
             <ThemedText testID={testIdWithKey('IssuerName')}>
-              <ThemedText variant="title" style={isRevoked && { color: ColorPallet.grayscale.mediumGrey }}>
+              <ThemedText variant="title" style={isRevoked && { color: ColorPalette.grayscale.mediumGrey }}>
                 {t('CredentialDetails.IssuedBy') + ' '}
               </ThemedText>
-              <ThemedText style={isRevoked && { color: ColorPallet.grayscale.mediumGrey }}>
+              <ThemedText style={isRevoked && { color: ColorPalette.grayscale.mediumGrey }}>
                 {credentialConnectionLabel}
               </ThemedText>
             </ThemedText>
             {/* issued date if dev mode */}
             {store?.preferences.developerModeEnabled && credential?.createdAt ? (
               <ThemedText testID={testIdWithKey('IssuedDate')}>
-                <ThemedText variant="title" style={isRevoked && { color: ColorPallet.grayscale.mediumGrey }}>
+                <ThemedText variant="title" style={isRevoked && { color: ColorPalette.grayscale.mediumGrey }}>
                   {t('CredentialDetails.Issued') + ': '}
                 </ThemedText>
-                <ThemedText style={isRevoked && { color: ColorPallet.grayscale.mediumGrey }}>
+                <ThemedText style={isRevoked && { color: ColorPalette.grayscale.mediumGrey }}>
                   {formatTime(credential.createdAt, { format: 'YYYY-MM-DD HH:mm:ss [UTC]' })}
                 </ThemedText>
               </ThemedText>
@@ -409,7 +409,7 @@ const CredentialDetails: React.FC<CredentialDetailsProps> = ({ navigation, route
         {store?.preferences.developerModeEnabled && (
           <View
             style={{
-              backgroundColor: ColorPallet.brand.secondaryBackground,
+              backgroundColor: ColorPalette.brand.secondaryBackground,
               marginTop: paddingVertical,
               paddingHorizontal,
               paddingVertical,
@@ -422,7 +422,7 @@ const CredentialDetails: React.FC<CredentialDetailsProps> = ({ navigation, route
               testID={testIdWithKey('JSONDetails')}
               style={{ flexDirection: 'row', gap: 8 }}
             >
-              <Assets.svg.iconCode width={20} height={20} color={ColorPallet.brand.secondary} />
+              <Assets.svg.iconCode width={20} height={20} color={ColorPalette.brand.secondary} />
               <ThemedText>{t('Global.ViewJSON')}</ThemedText>
             </TouchableOpacity>
           </View>
@@ -430,20 +430,20 @@ const CredentialDetails: React.FC<CredentialDetailsProps> = ({ navigation, route
         {isRevoked ? (
           <View
             style={{
-              backgroundColor: ColorPallet.notification.error,
+              backgroundColor: ColorPalette.notification.error,
               marginTop: paddingVertical,
               paddingHorizontal,
               paddingVertical,
             }}
           >
             <ThemedText testID={testIdWithKey('RevokedDate')}>
-              <ThemedText variant="title" style={{ color: ColorPallet.notification.errorText }}>
+              <ThemedText variant="title" style={{ color: ColorPalette.notification.errorText }}>
                 {t('CredentialDetails.Revoked') + ': '}
               </ThemedText>
-              <ThemedText style={{ color: ColorPallet.notification.errorText }}>{preciseRevocationDate}</ThemedText>
+              <ThemedText style={{ color: ColorPalette.notification.errorText }}>{preciseRevocationDate}</ThemedText>
             </ThemedText>
             <ThemedText
-              style={{ color: ColorPallet.notification.errorText, marginTop: paddingVertical }}
+              style={{ color: ColorPalette.notification.errorText, marginTop: paddingVertical }}
               testID={testIdWithKey('RevocationMessage')}
             >
               {credential?.revocationNotification?.comment

package/src/screens/CredentialOffer.tsx

@@ -46,7 +46,7 @@ type CredentialOfferProps = {
 const CredentialOffer: React.FC<CredentialOfferProps> = ({ navigation, credentialId }) => {
   const { agent } = useAppAgent()
   const { t, i18n } = useTranslation()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const { RecordLoading } = useAnimatedComponents()
   const { assertNetworkConnected } = useNetwork()
   const [
@@ -286,7 +286,7 @@ const CredentialOffer: React.FC<CredentialOfferProps> = ({ navigation, credentia
           paddingHorizontal: 25,
           paddingVertical: 16,
           paddingBottom: 26,
-          backgroundColor: ColorPallet.brand.secondaryBackground,
+          backgroundColor: ColorPalette.brand.secondaryBackground,
         }}
       >
         {loading ? <RecordLoading /> : null}

package/src/screens/DataRetention.tsx

@@ -14,12 +14,12 @@ import { ThemedText } from '../components/texts/ThemedText'
 const DataRetention: React.FC = () => {
   const { t } = useTranslation()
   const [store, dispatch] = useStore()
-  const { ColorPallet, SettingsTheme } = useTheme()
+  const { ColorPalette, SettingsTheme } = useTheme()
   const [useDataRetention, setUseDataRetention] = useState<boolean>(!!store.preferences.useDataRetention)
 
   const styles = StyleSheet.create({
     container: {
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       width: '100%',
     },
     section: {
@@ -34,7 +34,7 @@ const DataRetention: React.FC = () => {
     },
     itemSeparator: {
       borderBottomWidth: 1,
-      borderBottomColor: ColorPallet.brand.primaryBackground,
+      borderBottomColor: ColorPalette.brand.primaryBackground,
       marginHorizontal: 25,
     },
   })
@@ -54,11 +54,11 @@ const DataRetention: React.FC = () => {
         <BouncyCheckbox
           accessibilityLabel={t('Global.On')}
           disableText
-          fillColor={ColorPallet.brand.secondaryBackground}
-          unfillColor={ColorPallet.brand.secondaryBackground}
+          fillColor={ColorPalette.brand.secondaryBackground}
+          unfillColor={ColorPalette.brand.secondaryBackground}
           size={36}
-          innerIconStyle={{ borderColor: ColorPallet.brand.primary, borderWidth: 2 }}
-          ImageComponent={() => <Icon name="circle" size={18} color={ColorPallet.brand.primary}></Icon>}
+          innerIconStyle={{ borderColor: ColorPalette.brand.primary, borderWidth: 2 }}
+          ImageComponent={() => <Icon name="circle" size={18} color={ColorPalette.brand.primary}></Icon>}
           onPress={() => updateDataRetention(true)}
           isChecked={useDataRetention}
           disableBuiltInState
@@ -73,11 +73,11 @@ const DataRetention: React.FC = () => {
         <BouncyCheckbox
           accessibilityLabel={t('Global.Off')}
           disableText
-          fillColor={ColorPallet.brand.secondaryBackground}
-          unfillColor={ColorPallet.brand.secondaryBackground}
+          fillColor={ColorPalette.brand.secondaryBackground}
+          unfillColor={ColorPalette.brand.secondaryBackground}
           size={36}
-          innerIconStyle={{ borderColor: ColorPallet.brand.primary, borderWidth: 2 }}
-          ImageComponent={() => <Icon name="circle" size={18} color={ColorPallet.brand.primary}></Icon>}
+          innerIconStyle={{ borderColor: ColorPalette.brand.primary, borderWidth: 2 }}
+          ImageComponent={() => <Icon name="circle" size={18} color={ColorPalette.brand.primary}></Icon>}
           onPress={() => updateDataRetention(false)}
           isChecked={!useDataRetention}
           disableBuiltInState

package/src/screens/Developer.tsx

@@ -12,7 +12,7 @@ import { ThemedText } from '../components/texts/ThemedText'
 const Developer: React.FC = () => {
   const [store, dispatch] = useStore()
   const { t } = useTranslation()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const [useVerifierCapability, setUseVerifierCapability] = useState(!!store.preferences.useVerifierCapability)
   const [useConnectionInviterCapability, setConnectionInviterCapability] = useState(
     !!store.preferences.useConnectionInviterCapability
@@ -136,9 +136,9 @@ const Developer: React.FC = () => {
             testID={testIdWithKey('ToggleVerifierCapability')}
           >
             <Switch
-              trackColor={{ false: ColorPallet.grayscale.lightGrey, true: ColorPallet.brand.primaryDisabled }}
-              thumbColor={useVerifierCapability ? ColorPallet.brand.primary : ColorPallet.grayscale.mediumGrey}
-              ios_backgroundColor={ColorPallet.grayscale.lightGrey}
+              trackColor={{ false: ColorPalette.grayscale.lightGrey, true: ColorPalette.brand.primaryDisabled }}
+              thumbColor={useVerifierCapability ? ColorPalette.brand.primary : ColorPalette.grayscale.mediumGrey}
+              ios_backgroundColor={ColorPalette.grayscale.lightGrey}
               onValueChange={toggleVerifierCapabilitySwitch}
               testID={testIdWithKey('VerifierCapabilitySwitchElement')}
               value={useVerifierCapability}
@@ -158,9 +158,9 @@ const Developer: React.FC = () => {
             testID={testIdWithKey('ToggleAcceptDevCredentials')}
           >
             <Switch
-              trackColor={{ false: ColorPallet.grayscale.lightGrey, true: ColorPallet.brand.primaryDisabled }}
-              thumbColor={acceptDevCredentials ? ColorPallet.brand.primary : ColorPallet.grayscale.mediumGrey}
-              ios_backgroundColor={ColorPallet.grayscale.lightGrey}
+              trackColor={{ false: ColorPalette.grayscale.lightGrey, true: ColorPalette.brand.primaryDisabled }}
+              thumbColor={acceptDevCredentials ? ColorPalette.brand.primary : ColorPalette.grayscale.mediumGrey}
+              ios_backgroundColor={ColorPalette.grayscale.lightGrey}
               onValueChange={toggleAcceptDevCredentialsSwitch}
               testID={testIdWithKey('AcceptDevCredentialsSwitchElement')}
               value={acceptDevCredentials}
@@ -180,9 +180,11 @@ const Developer: React.FC = () => {
             testID={testIdWithKey('ToggleConnectionInviterCapabilitySwitch')}
           >
             <Switch
-              trackColor={{ false: ColorPallet.grayscale.lightGrey, true: ColorPallet.brand.primaryDisabled }}
-              thumbColor={useConnectionInviterCapability ? ColorPallet.brand.primary : ColorPallet.grayscale.mediumGrey}
-              ios_backgroundColor={ColorPallet.grayscale.lightGrey}
+              trackColor={{ false: ColorPalette.grayscale.lightGrey, true: ColorPalette.brand.primaryDisabled }}
+              thumbColor={
+                useConnectionInviterCapability ? ColorPalette.brand.primary : ColorPalette.grayscale.mediumGrey
+              }
+              ios_backgroundColor={ColorPalette.grayscale.lightGrey}
               onValueChange={toggleConnectionInviterCapabilitySwitch}
               testID={testIdWithKey('ConnectionInviterCapabilitySwitchElement')}
               value={useConnectionInviterCapability}
@@ -202,9 +204,9 @@ const Developer: React.FC = () => {
             testID={testIdWithKey('ToggleDevVerifierTemplatesSwitch')}
           >
             <Switch
-              trackColor={{ false: ColorPallet.grayscale.lightGrey, true: ColorPallet.brand.primaryDisabled }}
-              thumbColor={useDevVerifierTemplates ? ColorPallet.brand.primary : ColorPallet.grayscale.mediumGrey}
-              ios_backgroundColor={ColorPallet.grayscale.lightGrey}
+              trackColor={{ false: ColorPalette.grayscale.lightGrey, true: ColorPalette.brand.primaryDisabled }}
+              thumbColor={useDevVerifierTemplates ? ColorPalette.brand.primary : ColorPalette.grayscale.mediumGrey}
+              ios_backgroundColor={ColorPalette.grayscale.lightGrey}
               onValueChange={toggleDevVerifierTemplatesSwitch}
               testID={testIdWithKey('DevVerifierTemplatesSwitchElement')}
               value={useDevVerifierTemplates}
@@ -225,9 +227,9 @@ const Developer: React.FC = () => {
               testID={testIdWithKey('ToggleEnableWalletNamingSwitch')}
             >
               <Switch
-                trackColor={{ false: ColorPallet.grayscale.lightGrey, true: ColorPallet.brand.primaryDisabled }}
-                thumbColor={enableWalletNaming ? ColorPallet.brand.primary : ColorPallet.grayscale.mediumGrey}
-                ios_backgroundColor={ColorPallet.grayscale.lightGrey}
+                trackColor={{ false: ColorPalette.grayscale.lightGrey, true: ColorPalette.brand.primaryDisabled }}
+                thumbColor={enableWalletNaming ? ColorPalette.brand.primary : ColorPalette.grayscale.mediumGrey}
+                ios_backgroundColor={ColorPalette.grayscale.lightGrey}
                 onValueChange={toggleWalletNamingSwitch}
                 testID={testIdWithKey('EnableWalletNamingSwitchElement')}
                 value={enableWalletNaming}
@@ -248,9 +250,9 @@ const Developer: React.FC = () => {
             testID={testIdWithKey('TogglePreventAutoLockSwitch')}
           >
             <Switch
-              trackColor={{ false: ColorPallet.grayscale.lightGrey, true: ColorPallet.brand.primaryDisabled }}
-              thumbColor={preventAutoLock ? ColorPallet.brand.primary : ColorPallet.grayscale.mediumGrey}
-              ios_backgroundColor={ColorPallet.grayscale.lightGrey}
+              trackColor={{ false: ColorPalette.grayscale.lightGrey, true: ColorPalette.brand.primaryDisabled }}
+              thumbColor={preventAutoLock ? ColorPalette.brand.primary : ColorPalette.grayscale.mediumGrey}
+              ios_backgroundColor={ColorPalette.grayscale.lightGrey}
               onValueChange={togglePreventAutoLockSwitch}
               testID={testIdWithKey('PreventAutoLockSwitchElement')}
               value={preventAutoLock}
@@ -270,9 +272,9 @@ const Developer: React.FC = () => {
             testID={testIdWithKey('ToggleUseShareableLink')}
           >
             <Switch
-              trackColor={{ false: ColorPallet.grayscale.lightGrey, true: ColorPallet.brand.primaryDisabled }}
-              thumbColor={enableShareableLink ? ColorPallet.brand.primary : ColorPallet.grayscale.mediumGrey}
-              ios_backgroundColor={ColorPallet.grayscale.lightGrey}
+              trackColor={{ false: ColorPalette.grayscale.lightGrey, true: ColorPalette.brand.primaryDisabled }}
+              thumbColor={enableShareableLink ? ColorPalette.brand.primary : ColorPalette.grayscale.mediumGrey}
+              ios_backgroundColor={ColorPalette.grayscale.lightGrey}
               onValueChange={toggleShareableLinkSwitch}
               testID={testIdWithKey('ShareableLinkSwitchElement')}
               value={enableShareableLink}

package/src/screens/Home.tsx

@@ -34,7 +34,7 @@ const Home: React.FC<HomeProps> = () => {
   ])
   const notifications = useNotifications({})
   const { t } = useTranslation()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const [store, dispatch] = useStore()
   const { start, stop } = useTour()
   const [showTourPopup, setShowTourPopup] = useState(false)
@@ -148,7 +148,7 @@ const Home: React.FC<HomeProps> = () => {
               paddingHorizontal: 20,
               paddingTop: index === 0 ? 20 : 0,
               paddingBottom: index === notifications.length - 1 ? 20 : 10,
-              backgroundColor: ColorPallet.brand.secondaryBackground,
+              backgroundColor: ColorPalette.brand.secondaryBackground,
             }}
           >
             {DisplayListItemType(item)}

package/src/screens/JSONDetails.tsx

@@ -19,12 +19,12 @@ const JSONDetails = ({ route }: JSONDetailsProps) => {
     throw new Error('JSONDetails route params were not set properly')
   }
   const { t } = useTranslation()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const { jsonBlob } = route.params
   const styles = StyleSheet.create({
     container: {
       flex: 1,
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       padding: 20,
     },
     title: {
@@ -36,7 +36,7 @@ const JSONDetails = ({ route }: JSONDetailsProps) => {
     },
     jsonContainer: {
       padding: 16,
-      backgroundColor: ColorPallet.brand.secondaryBackground,
+      backgroundColor: ColorPalette.brand.secondaryBackground,
       height: '75%',
       borderWidth: 1,
       borderStyle: 'solid',

package/src/screens/Language.tsx

@@ -17,7 +17,7 @@ interface Language {
 
 const Language = () => {
   const { t, i18n } = useTranslation()
-  const { ColorPallet, SettingsTheme } = useTheme()
+  const { ColorPalette, SettingsTheme } = useTheme()
   const [{ supportedLanguages }] = useServices([TOKENS.CONFIG])
 
   const languages: Language[] = supportedLanguages.map((lang) => ({
@@ -27,7 +27,7 @@ const Language = () => {
 
   const styles = StyleSheet.create({
     container: {
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       width: '100%',
     },
     section: {
@@ -42,7 +42,7 @@ const Language = () => {
     },
     itemSeparator: {
       borderBottomWidth: 1,
-      borderBottomColor: ColorPallet.brand.primaryBackground,
+      borderBottomColor: ColorPalette.brand.primaryBackground,
       marginHorizontal: 25,
     },
   })
@@ -71,11 +71,11 @@ const Language = () => {
                 accessibilityLabel={`${id === i18n.language ? t('Language.Checked') : t('Language.NotChecked')}`} // add on voice over the text checked / not checked after the text from value above
                 accessibilityRole="radio"
                 disableText
-                fillColor={ColorPallet.brand.secondaryBackground}
-                unfillColor={ColorPallet.brand.secondaryBackground}
+                fillColor={ColorPalette.brand.secondaryBackground}
+                unfillColor={ColorPalette.brand.secondaryBackground}
                 size={36}
-                innerIconStyle={{ borderColor: ColorPallet.brand.primary, borderWidth: 2 }}
-                ImageComponent={() => <Icon name="circle" size={18} color={ColorPallet.brand.primary}></Icon>}
+                innerIconStyle={{ borderColor: ColorPalette.brand.primary, borderWidth: 2 }}
+                ImageComponent={() => <Icon name="circle" size={18} color={ColorPalette.brand.primary}></Icon>}
                 onPress={async () => await handleLanguageChange(language)}
                 isChecked={id === i18n.language}
                 disableBuiltInState

package/src/screens/ListContacts.tsx

@@ -22,7 +22,7 @@ interface ListContactsProps {
 }
 
 const ListContacts: React.FC<ListContactsProps> = ({ navigation }) => {
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const { t } = useTranslation()
   const { agent } = useAgent()
   const [connections, setConnections] = useState<ConnectionRecord[]>([])
@@ -35,10 +35,10 @@ const ListContacts: React.FC<ListContactsProps> = ({ navigation }) => {
   ])
   const style = StyleSheet.create({
     list: {
-      backgroundColor: ColorPallet.brand.secondaryBackground,
+      backgroundColor: ColorPalette.brand.secondaryBackground,
     },
     itemSeparator: {
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       height: 1,
       marginHorizontal: 16,
     },

package/src/screens/ListCredentials.tsx

@@ -37,7 +37,7 @@ const ListCredentials: React.FC = () => {
     TOKENS.CONFIG,
   ])
   const navigation = useNavigation<StackNavigationProp<RootStackParams>>()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const { start, stop } = useTour()
   const screenIsFocused = useIsFocused()
   const {
@@ -108,7 +108,7 @@ const ListCredentials: React.FC = () => {
   return (
     <View>
       <FlatList
-        style={{ backgroundColor: ColorPallet.brand.primaryBackground }}
+        style={{ backgroundColor: ColorPalette.brand.primaryBackground }}
         data={credentials.sort((a, b) => new Date(b.createdAt).valueOf() - new Date(a.createdAt).valueOf())}
         keyExtractor={(credential) => credential.id}
         renderItem={({ item: credential, index }) => {

package/src/screens/ListProofRequests.tsx

@@ -112,7 +112,7 @@ type ListProofRequestsProps = StackScreenProps<ProofRequestsStackParams, Screens
 
 const ListProofRequests: React.FC<ListProofRequestsProps> = ({ navigation, route }) => {
   const { t } = useTranslation()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const [store] = useStore()
 
   const style = StyleSheet.create({
@@ -133,7 +133,7 @@ const ListProofRequests: React.FC<ListProofRequestsProps> = ({ navigation, route
   return (
     <SafeAreaView style={style.container} edges={['left', 'right']}>
       <FlatList
-        style={{ backgroundColor: ColorPallet.brand.primaryBackground }}
+        style={{ backgroundColor: ColorPalette.brand.primaryBackground }}
         data={proofRequestTemplates}
         keyExtractor={(records) => records.id}
         renderItem={({ item }) => {

package/src/screens/MobileVerifierLoading.tsx

@@ -21,7 +21,7 @@ const MobileVerifierLoading: React.FC<MobileVerifierLoadingProps> = ({ navigatio
   const goalCode = useOutOfBandByConnectionId(connectionId)?.outOfBandInvitation.goalCode
   const proofRecord = useProofById(proofId)
   const { t } = useTranslation()
-  const { ColorPallet, TextTheme } = useTheme()
+  const { ColorPalette, TextTheme } = useTheme()
   const { agent } = useAgent()
 
   if (!agent) {
@@ -31,7 +31,7 @@ const MobileVerifierLoading: React.FC<MobileVerifierLoadingProps> = ({ navigatio
   const styles = StyleSheet.create({
     container: {
       height: '100%',
-      backgroundColor: ColorPallet.brand.modalPrimaryBackground,
+      backgroundColor: ColorPalette.brand.modalPrimaryBackground,
       padding: 20,
     },
     image: {
@@ -73,7 +73,7 @@ const MobileVerifierLoading: React.FC<MobileVerifierLoadingProps> = ({ navigatio
 
   return (
     <SafeAreaModal transparent animationType={'slide'}>
-      <SafeAreaView style={{ backgroundColor: ColorPallet.brand.modalPrimaryBackground }}>
+      <SafeAreaView style={{ backgroundColor: ColorPalette.brand.modalPrimaryBackground }}>
         <ScrollView style={styles.container}>
           <View style={styles.messageContainer}>
             <ThemedText

package/src/screens/PINChange.tsx

@@ -42,7 +42,7 @@ const PINChange: React.FC<StackScreenProps<SettingStackParams, Screens.ChangePIN
   const navigation = useNavigation<StackNavigationProp<OnboardingStackParams>>()
   const [store] = useStore()
   const { t } = useTranslation()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const { ButtonLoading } = useAnimatedComponents()
   const PINTwoInputRef = useRef<TextInput>(null)
   const createPINButtonRef = useRef<TouchableOpacity>(null)
@@ -82,7 +82,7 @@ const PINChange: React.FC<StackScreenProps<SettingStackParams, Screens.ChangePIN
   const style = StyleSheet.create({
     screenContainer: {
       height: '100%',
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       padding: 20,
       justifyContent: 'space-between',
     },

package/src/screens/PINCreate.tsx

@@ -45,7 +45,7 @@ const PINCreate: React.FC<PINCreateProps> = ({ setAuthenticated, explainedStatus
   const [, dispatch] = useStore()
   const { t } = useTranslation()
 
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const { ButtonLoading } = useAnimatedComponents()
   const PINTwoInputRef = useRef<TextInput>(null)
   const createPINButtonRef = useRef<TouchableOpacity>(null)
@@ -65,7 +65,7 @@ const PINCreate: React.FC<PINCreateProps> = ({ setAuthenticated, explainedStatus
   const style = StyleSheet.create({
     screenContainer: {
       height: '100%',
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       padding: 20,
       justifyContent: 'space-between',
     },

package/src/screens/PINEnter.tsx

@@ -40,7 +40,7 @@ const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated }) => {
   const [forgotPINModalVisible, setForgotPINModalVisible] = useState(false)
   const [devModalVisible, setDevModalVisible] = useState(false)
   const [biometricsEnrollmentChange, setBiometricsEnrollmentChange] = useState(false)
-  const { ColorPallet, TextTheme } = useTheme()
+  const { ColorPalette, TextTheme } = useTheme()
   const { ButtonLoading } = useAnimatedComponents()
   const [
     logger,
@@ -236,7 +236,7 @@ const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated }) => {
       height: '100%',
       padding: 20,
       justifyContent: 'space-between',
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
     },
     buttonContainer: {
       width: '100%',
@@ -264,7 +264,7 @@ const PINEnter: React.FC<PINEnterProps> = ({ setAuthenticated }) => {
       marginBottom: 20,
     },
     forgotPINText: {
-      color: ColorPallet.brand.link,
+      color: ColorPalette.brand.link,
       fontSize: 20,
     },
     buildNumberText: {

package/src/screens/PINExplainer.tsx

@@ -15,12 +15,12 @@ export interface PINExplainerProps {
 
 const PINExplainer: React.FC<PINExplainerProps> = ({ continueCreatePIN }) => {
   const { t } = useTranslation()
-  const { ColorPallet, TextTheme, Assets } = useTheme()
+  const { ColorPalette, TextTheme, Assets } = useTheme()
 
   const style = StyleSheet.create({
     safeAreaView: {
       flex: 1,
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
     },
     scrollViewContentContainer: {
       padding: 20,
@@ -37,7 +37,7 @@ const PINExplainer: React.FC<PINExplainerProps> = ({ continueCreatePIN }) => {
   })
 
   const imageDisplayOptions = {
-    fill: ColorPallet.notification.infoText,
+    fill: ColorPalette.notification.infoText,
     height: 150,
     width: 150,
   }