@bifold/core 2.2.1 → 2.4.0

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
                   ),
               },

package/src/components/misc/CredentialCard11.tsx

@@ -103,7 +103,7 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
 }) => {
   const [dimensions, setDimensions] = useState({ cardWidth: 0, cardHeight: 0 })
   const { i18n, t } = useTranslation()
-  const { ColorPallet, ListItems } = useTheme()
+  const { ColorPalette, ListItems } = useTheme()
   const [flaggedAttributes, setFlaggedAttributes] = useState<string[]>()
   const [allPI, setAllPI] = useState<boolean>()
   const credentialConnectionLabel = useCredentialConnectionLabel(credential)
@@ -152,18 +152,18 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
   const navigation = useNavigation()
 
   const backgroundColorIfRevoked = (backgroundColor?: string) =>
-    credentialErrors.includes(CredentialErrors.Revoked) ? ColorPallet.notification.errorBorder : backgroundColor
+    credentialErrors.includes(CredentialErrors.Revoked) ? ColorPalette.notification.errorBorder : backgroundColor
 
   const fontColorWithHighContrast = () => {
     if (proof && brandingOverlayType === BrandingOverlayType.Branding10) {
-      return ColorPallet.grayscale.mediumGrey
+      return ColorPalette.grayscale.mediumGrey
     }
 
     const c =
-      backgroundColorIfRevoked(overlay.brandingOverlay?.primaryBackgroundColor) ?? ColorPallet.grayscale.lightGrey
+      backgroundColorIfRevoked(overlay.brandingOverlay?.primaryBackgroundColor) ?? ColorPalette.grayscale.lightGrey
     const shade = shadeIsLightOrDark(c)
 
-    return shade == Shade.Light ? ColorPallet.grayscale.darkGrey : ColorPallet.grayscale.lightGrey
+    return shade == Shade.Light ? ColorPalette.grayscale.darkGrey : ColorPalette.grayscale.lightGrey
   }
 
   const parseAttribute = useCallback(
@@ -317,7 +317,7 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
             variant="bold"
             style={[
               styles.textContainer,
-              { color: warn ? ColorPallet.notification.warnText : styles.textContainer.color },
+              { color: warn ? ColorPalette.notification.warnText : styles.textContainer.color },
             ]}
             testID={testIdWithKey('AttributeValue')}
           >
@@ -354,7 +354,7 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
                 testID={testIdWithKey('AttributeNameWarningIcon')}
                 style={{ paddingTop: 2, paddingHorizontal: 2 }}
                 name="warning"
-                color={ColorPallet.notification.warnIcon}
+                color={ColorPalette.notification.warnIcon}
                 size={ListItems.recordAttributeText.fontSize}
               />
             )}
@@ -385,7 +385,9 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
           text={t('ProofRequest.ChangeCredential')}
           testID={'ChangeCredential'}
           textColor={
-            isBranding11 ? credentialTextColor(ColorPallet, overlay.brandingOverlay?.primaryBackgroundColor) : undefined
+            isBranding11
+              ? credentialTextColor(ColorPalette, overlay.brandingOverlay?.primaryBackgroundColor)
+              : undefined
           }
         />
       )
@@ -397,7 +399,9 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
           text={t('ProofRequest.GetThisCredential')}
           testID={'GetThisCredential'}
           textColor={
-            isBranding11 ? credentialTextColor(ColorPallet, overlay.brandingOverlay?.primaryBackgroundColor) : undefined
+            isBranding11
+              ? credentialTextColor(ColorPalette, overlay.brandingOverlay?.primaryBackgroundColor)
+              : undefined
           }
         />
       )
@@ -425,7 +429,7 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
               styles.textContainer,
               styles.credentialName,
               {
-                color: allPI && proof ? ColorPallet.notification.warnText : styles.textContainer.color,
+                color: allPI && proof ? ColorPalette.notification.warnText : styles.textContainer.color,
               },
             ]}
           >
@@ -490,30 +494,55 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
     )
   }
 
-  function getSliceBackgroundColor(): ColorValue | undefined {
-    if (hideSlice) return 'transparent'
-    return brandingOverlayType === BrandingOverlayType.Branding10
-      ? backgroundColorIfRevoked(styles.secondaryBodyContainer.backgroundColor)
-      : overlay.brandingOverlay?.secondaryBackgroundColor
+  /**
+   * Returns the background color for the slice of the card.
+   *
+   * @return {ColorValue} - The background color for the slice.
+   */
+  function getSliceBackgroundColor(): ColorValue {
+    if (overlay.brandingOverlay?.secondaryBackgroundColor) {
+      return overlay.brandingOverlay.secondaryBackgroundColor
+    }
+
+    if (styles.secondaryBodyContainer.backgroundColor) {
+      return styles.secondaryBodyContainer.backgroundColor
+    }
+
+    return 'transparent'
   }
 
   const CredentialCardSecondaryBody: React.FC = () => {
+    // If the slice is hidden, we return an empty view with the same styles
+    if (hideSlice) {
+      return (
+        <View
+          testID={testIdWithKey('CredentialCardSecondaryBody')}
+          style={[
+            styles.secondaryBodyContainer,
+            {
+              backgroundColor: 'transparent',
+              overflow: 'hidden',
+            },
+          ]}
+        />
+      )
+    }
+
     return (
       <View
         testID={testIdWithKey('CredentialCardSecondaryBody')}
         style={[
           styles.secondaryBodyContainer,
           {
-            backgroundColor: getSliceBackgroundColor() ?? ColorPallet.brand.secondaryBackground,
+            backgroundColor: getSliceBackgroundColor(),
             overflow: 'hidden',
           },
         ]}
       >
         {overlay.brandingOverlay?.backgroundImageSlice &&
-        (!displayItems || brandingOverlayType === BrandingOverlayType.Branding11) &&
-        !hideSlice ? (
+        (!displayItems || brandingOverlayType === BrandingOverlayType.Branding11) ? (
           <ImageBackground
-            source={toImageSource(overlay.brandingOverlay?.backgroundImageSlice)}
+            source={toImageSource(overlay.brandingOverlay.backgroundImageSlice)}
             style={{ flexGrow: 1 }}
             imageStyle={{
               borderTopLeftRadius: borderRadius,
@@ -521,8 +550,7 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
             }}
           />
         ) : (
-          !(Boolean(credentialErrors.length) || proof || getSecondaryBackgroundColor(overlay, proof)) &&
-          !hideSlice && (
+          !(Boolean(credentialErrors.length) || proof || getSecondaryBackgroundColor(overlay, proof)) && (
             <View
               style={[
                 {
@@ -554,13 +582,13 @@ const CredentialCard11: React.FC<CredentialCard11Props> = ({
             style={[
               styles.statusContainer,
               {
-                backgroundColor: status === 'error' ? ColorPallet.notification.error : ColorPallet.notification.warn,
+                backgroundColor: status === 'error' ? ColorPalette.notification.error : ColorPalette.notification.warn,
               },
             ]}
           >
             <Icon
               size={0.7 * logoHeight}
-              style={{ color: status === 'error' ? ColorPallet.semantic.error : ColorPallet.notification.warnIcon }}
+              style={{ color: status === 'error' ? ColorPalette.semantic.error : ColorPalette.notification.warnIcon }}
               name={status}
             />
           </View>

package/src/components/misc/CredentialCard11ActionFooter.tsx

@@ -15,13 +15,13 @@ interface CredentialActionFooterProps {
 }
 
 const CredentialActionFooter = ({ onPress, text, testID, textColor }: CredentialActionFooterProps) => {
-  const { ColorPallet, TextTheme } = useTheme()
+  const { ColorPalette, TextTheme } = useTheme()
   const styles = StyleSheet.create({
     seperator: {
       width: '100%',
       height: 2,
       marginVertical: 10,
-      backgroundColor: ColorPallet.grayscale.lightGrey,
+      backgroundColor: ColorPalette.grayscale.lightGrey,
     },
     touchable: {
       display: 'flex',
@@ -32,7 +32,7 @@ const CredentialActionFooter = ({ onPress, text, testID, textColor }: Credential
     credActionText: {
       fontSize: 20,
       fontWeight: TextTheme.bold.fontWeight,
-      color: textColor ?? ColorPallet.brand.link,
+      color: textColor ?? ColorPalette.brand.link,
     },
   })
 

package/src/components/misc/EmptyList.tsx

@@ -12,10 +12,10 @@ export interface EmptyListProps {
 
 const EmptyList: React.FC<EmptyListProps> = ({ message }) => {
   const { t } = useTranslation()
-  const { ListItems, Assets, ColorPallet } = useTheme()
+  const { ListItems, Assets, ColorPalette } = useTheme()
 
   return (
-    <View style={{ paddingTop: 100, height: '100%', backgroundColor: ColorPallet.brand.primaryBackground }}>
+    <View style={{ paddingTop: 100, height: '100%', backgroundColor: ColorPalette.brand.primaryBackground }}>
       <Assets.svg.emptyWallet fill={ListItems.emptyList.color} height={100} />
       <ThemedText style={[ListItems.emptyList, { textAlign: 'center' }]} testID={testIdWithKey('NoneYet')}>
         {message || t('Global.NoneYet!')}

package/src/components/misc/EmptyListContacts.tsx

@@ -14,7 +14,7 @@ export interface EmptyListProps {
 
 const EmptyListContacts: React.FC<EmptyListProps> = ({ navigation }) => {
   const { t } = useTranslation()
-  const { ListItems, Assets, ColorPallet } = useTheme()
+  const { ListItems, Assets, ColorPalette } = useTheme()
   const styles = StyleSheet.create({
     container: {
       flex: 1,
@@ -23,7 +23,7 @@ const EmptyListContacts: React.FC<EmptyListProps> = ({ navigation }) => {
       alignItems: 'center',
       padding: 40,
       paddingTop: 100,
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
     },
     text: {
       textAlign: 'center',

package/src/components/misc/FauxHeader.tsx

@@ -14,7 +14,7 @@ interface FauxHeaderProps {
 
 // Used for modals that we want to look like regular screens
 const FauxHeader: React.FC<FauxHeaderProps> = ({ title, onBackPressed }) => {
-  const { ColorPallet, Spacing, NavigationTheme } = useTheme()
+  const { ColorPalette, Spacing, NavigationTheme } = useTheme()
   const { t } = useTranslation()
   const styles = StyleSheet.create({
     header: {
@@ -22,7 +22,7 @@ const FauxHeader: React.FC<FauxHeaderProps> = ({ title, onBackPressed }) => {
       elevation: 0,
       shadowOffset: { width: 0, height: 6 },
       shadowRadius: 6,
-      shadowColor: ColorPallet.grayscale.black,
+      shadowColor: ColorPalette.grayscale.black,
       shadowOpacity: 0.15,
       zIndex: 2,
       borderWidth: 0,

package/src/components/misc/InfoBox.tsx

@@ -61,13 +61,13 @@ const InfoBox: React.FC<InfoBoxProps> = ({
 }) => {
   const { width } = useWindowDimensions()
   const { t } = useTranslation()
-  const { TextTheme, ColorPallet } = useTheme()
+  const { TextTheme, ColorPalette } = useTheme()
   const [showDetails, setShowDetails] = useState<boolean>(renderShowDetails)
   const [{ showDetailsInfo }] = useServices([TOKENS.CONFIG])
   const styles = StyleSheet.create({
     container: {
-      backgroundColor: ColorPallet.brand.modalPrimaryBackground,
-      borderColor: ColorPallet.notification.infoBorder,
+      backgroundColor: ColorPalette.brand.modalPrimaryBackground,
+      borderColor: ColorPalette.notification.infoBorder,
       borderRadius: 5,
       borderWidth: 1,
       padding: 10,
@@ -89,12 +89,12 @@ const InfoBox: React.FC<InfoBoxProps> = ({
       marginLeft: 7,
       flexShrink: 1,
       alignSelf: 'center',
-      color: ColorPallet.notification.infoText,
+      color: ColorPalette.notification.infoText,
     },
     bodyText: {
       flexShrink: 1,
       marginVertical: 16,
-      color: ColorPallet.notification.infoText,
+      color: ColorPalette.notification.infoText,
     },
     icon: {
       marginRight: 10,
@@ -102,82 +102,82 @@ const InfoBox: React.FC<InfoBoxProps> = ({
     },
     showDetailsText: {
       fontWeight: TextTheme.normal.fontWeight,
-      color: ColorPallet.brand.link,
+      color: ColorPalette.brand.link,
     },
   })
   let iconName = 'info'
-  let iconColor = ColorPallet.notification.infoIcon
+  let iconColor = ColorPalette.notification.infoIcon
 
   switch (notificationType) {
     case InfoBoxType.Info:
       iconName = 'info'
-      iconColor = ColorPallet.notification.infoIcon
+      iconColor = ColorPalette.notification.infoIcon
       styles.container = {
         ...styles.container,
-        backgroundColor: ColorPallet.notification.info,
-        borderColor: ColorPallet.notification.infoBorder,
+        backgroundColor: ColorPalette.notification.info,
+        borderColor: ColorPalette.notification.infoBorder,
       }
       styles.headerText = {
         ...styles.headerText,
-        color: ColorPallet.notification.infoText,
+        color: ColorPalette.notification.infoText,
       }
       styles.bodyText = {
         ...styles.bodyText,
-        color: ColorPallet.notification.infoText,
+        color: ColorPalette.notification.infoText,
       }
       break
 
     case InfoBoxType.Success:
       iconName = 'check-circle'
-      iconColor = ColorPallet.notification.successIcon
+      iconColor = ColorPalette.notification.successIcon
       styles.container = {
         ...styles.container,
-        backgroundColor: ColorPallet.notification.success,
-        borderColor: ColorPallet.notification.successBorder,
+        backgroundColor: ColorPalette.notification.success,
+        borderColor: ColorPalette.notification.successBorder,
       }
       styles.headerText = {
         ...styles.headerText,
-        color: ColorPallet.notification.successText,
+        color: ColorPalette.notification.successText,
       }
       styles.bodyText = {
         ...styles.bodyText,
-        color: ColorPallet.notification.successText,
+        color: ColorPalette.notification.successText,
       }
       break
 
     case InfoBoxType.Warn:
       iconName = 'warning'
-      iconColor = ColorPallet.notification.warnIcon
+      iconColor = ColorPalette.notification.warnIcon
       styles.container = {
         ...styles.container,
-        backgroundColor: ColorPallet.notification.warn,
-        borderColor: ColorPallet.notification.warnBorder,
+        backgroundColor: ColorPalette.notification.warn,
+        borderColor: ColorPalette.notification.warnBorder,
       }
       styles.headerText = {
         ...styles.headerText,
-        color: ColorPallet.notification.warnText,
+        color: ColorPalette.notification.warnText,
       }
       styles.bodyText = {
         ...styles.bodyText,
-        color: ColorPallet.notification.warnText,
+        color: ColorPalette.notification.warnText,
       }
       break
 
     case InfoBoxType.Error:
       iconName = 'error'
-      iconColor = ColorPallet.notification.errorIcon
+      iconColor = ColorPalette.notification.errorIcon
       styles.container = {
         ...styles.container,
-        backgroundColor: ColorPallet.notification.error,
-        borderColor: ColorPallet.notification.errorBorder,
+        backgroundColor: ColorPalette.notification.error,
+        borderColor: ColorPalette.notification.errorBorder,
       }
       styles.headerText = {
         ...styles.headerText,
-        color: ColorPallet.notification.errorText,
+        color: ColorPalette.notification.errorText,
       }
       styles.bodyText = {
         ...styles.bodyText,
-        color: ColorPallet.notification.errorText,
+        color: ColorPalette.notification.errorText,
       }
       break
 
@@ -207,7 +207,7 @@ const InfoBox: React.FC<InfoBoxProps> = ({
               onPress={onClosePressed}
               hitSlop={hitSlop}
             >
-              <Icon name={'close'} size={iconSize} color={ColorPallet.notification.infoIcon} />
+              <Icon name={'close'} size={iconSize} color={ColorPalette.notification.infoIcon} />
             </TouchableOpacity>
           </View>
         )}
@@ -233,7 +233,7 @@ const InfoBox: React.FC<InfoBoxProps> = ({
                 <ThemedText variant="title" style={styles.showDetailsText}>
                   {t('Global.ShowDetails')}{' '}
                 </ThemedText>
-                <Icon name="chevron-right" size={iconSize} color={ColorPallet.brand.link} />
+                <Icon name="chevron-right" size={iconSize} color={ColorPalette.brand.link} />
               </View>
             </TouchableOpacity>
           )}

package/src/components/misc/NoNewUpdates.tsx

@@ -9,12 +9,12 @@ import { ThemedText } from '../texts/ThemedText'
 
 const NoNewUpdates: React.FC = () => {
   const { t } = useTranslation()
-  const { HomeTheme, ColorPallet } = useTheme()
+  const { HomeTheme, ColorPalette } = useTheme()
   const styles = StyleSheet.create({
     noNewUpdatesContainer: {
       paddingHorizontal: 20,
       paddingVertical: 20,
-      backgroundColor: ColorPallet.brand.secondaryBackground,
+      backgroundColor: ColorPalette.brand.secondaryBackground,
     },
     noNewUpdatesText: {
       ...HomeTheme.noNewUpdatesText,

package/src/components/misc/PINValidationHelper.tsx

@@ -15,7 +15,7 @@ const iconSize = 24
 
 const PINValidationHelper: React.FC<PINValidationHelperProps> = ({ validations }) => {
   const { t } = useTranslation()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
 
   return (
     <View style={{ marginBottom: 16 }}>
@@ -26,14 +26,14 @@ const PINValidationHelper: React.FC<PINValidationHelperProps> = ({ validations }
               accessibilityLabel={t('PINCreate.Helper.ClearIcon')}
               name="clear"
               size={iconSize}
-              color={ColorPallet.notification.errorIcon}
+              color={ColorPalette.notification.errorIcon}
             />
           ) : (
             <Icon
               accessibilityLabel={t('PINCreate.Helper.CheckIcon')}
               name="check"
               size={iconSize}
-              color={ColorPallet.notification.successIcon}
+              color={ColorPalette.notification.successIcon}
             />
           )}
           <ThemedText style={{ paddingLeft: 4 }}>

package/src/components/misc/QRRenderer.tsx

@@ -17,7 +17,7 @@ interface QRRendererProps {
 const QRRenderer: React.FC<QRRendererProps> = ({ value, onError, size }) => {
   const { width } = useWindowDimensions()
   const { t } = useTranslation()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
 
   const styles = StyleSheet.create({
     container: {
@@ -26,7 +26,7 @@ const QRRenderer: React.FC<QRRendererProps> = ({ value, onError, size }) => {
       backgroundColor: 'white',
     },
     errorMessage: {
-      color: ColorPallet.semantic.error,
+      color: ColorPalette.semantic.error,
       textAlign: 'center',
     },
   })

package/src/components/misc/QRScanner.tsx

@@ -50,7 +50,7 @@ const QRScanner: React.FC<Props> = ({
   const { agent } = useAgent()
   const { width } = useWindowDimensions()
   const { t } = useTranslation()
-  const { ColorPallet, TextTheme, TabTheme } = useTheme()
+  const { ColorPalette, TextTheme, TabTheme } = useTheme()
   const [store] = useStore()
   const [{ showScanHelp, showScanButton, showScanErrorButton = true }] = useServices([TOKENS.CONFIG])
   const [firstTabActive, setFirstTabActive] = useState(!defaultToConnect)
@@ -69,7 +69,7 @@ const QRScanner: React.FC<Props> = ({
     },
     mainSafeArea: {
       flex: 1,
-      backgroundColor: ColorPallet.brand.secondaryBackground,
+      backgroundColor: ColorPalette.brand.secondaryBackground,
     },
     bottomSafeArea: {
       flex: 0,
@@ -121,7 +121,7 @@ const QRScanner: React.FC<Props> = ({
     // no properties needed, this is just a helpful label
     bottomButtonsContainer: {},
     icon: {
-      color: ColorPallet.grayscale.white,
+      color: ColorPalette.grayscale.white,
       padding: 4,
     },
     textStyle: {

package/src/components/misc/QRScannerTorch.tsx

@@ -13,7 +13,7 @@ interface Props extends React.PropsWithChildren {
   onPress?: () => void
 }
 
-function createStyles({ ColorPallet }: ITheme) {
+function createStyles({ ColorPalette }: ITheme) {
   return StyleSheet.create({
     container: {
       width: 24,
@@ -21,7 +21,7 @@ function createStyles({ ColorPallet }: ITheme) {
       justifyContent: 'center',
       alignItems: 'center',
       borderWidth: 1,
-      borderColor: ColorPallet.grayscale.white,
+      borderColor: ColorPalette.grayscale.white,
       borderRadius: 24,
       marginBottom: 50,
     },
@@ -41,7 +41,7 @@ const TorchButton: React.FC<Props> = ({ active, onPress, children }) => {
       accessibilityLabel={active ? t('Scan.TorchOn') : t('Scan.TorchOff')}
       accessibilityRole={'button'}
       testID={testIdWithKey('ScanTorch')}
-      style={[styles.container, { backgroundColor: active ? theme.ColorPallet.grayscale.white : undefined }]}
+      style={[styles.container, { backgroundColor: active ? theme.ColorPalette.grayscale.white : undefined }]}
       onPress={onPress}
       hitSlop={hitSlop}
     >
@@ -56,7 +56,7 @@ const TorchIcon: React.FC<Props> = ({ active }) => {
   return (
     <Icon
       name={active ? 'flash-on' : 'flash-off'}
-      color={active ? theme.ColorPallet.grayscale.black : theme.ColorPallet.grayscale.white}
+      color={active ? theme.ColorPalette.grayscale.black : theme.ColorPalette.grayscale.white}
       size={24}
       style={styles.icon}
     />

package/src/components/misc/SharedProofData.tsx

@@ -16,7 +16,7 @@ interface SharedProofDataProps {
 }
 
 const SharedDataCard: React.FC<{ sharedData: GroupedSharedProofDataItem }> = ({ sharedData }) => {
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const [attributes, setAttributes] = useState<Field[]>([])
   useEffect(() => {
     const attributes = buildFieldsFromSharedAnonCredsProof(sharedData.data)
@@ -30,7 +30,7 @@ const SharedDataCard: React.FC<{ sharedData: GroupedSharedProofDataItem }> = ({
         displayItems={attributes}
         style={
           bundleResolver.getBrandingOverlayType() === BrandingOverlayType.Branding10
-            ? { backgroundColor: ColorPallet.brand.secondaryBackground }
+            ? { backgroundColor: ColorPalette.brand.secondaryBackground }
             : undefined
         }
         credDefId={sharedData.identifiers.cred_def_id}

package/src/components/misc/UnorderedList.tsx

@@ -9,15 +9,15 @@ type UnorderedListProps = {
 }
 
 const UnorderedList: React.FC<UnorderedListProps> = ({ unorderedListItems }) => {
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
 
   return (
     <>
       {unorderedListItems.map((item: string, i: number) => {
         return (
           <View key={i} style={{ display: 'flex', flexDirection: 'row', marginBottom: 5 }}>
-            <ThemedText style={{ color: ColorPallet.brand.unorderedList, paddingLeft: 5 }}>{`\u2022`}</ThemedText>
-            <ThemedText style={{ color: ColorPallet.brand.unorderedList, paddingLeft: 5, flex: 1 }}>{item}</ThemedText>
+            <ThemedText style={{ color: ColorPalette.brand.unorderedList, paddingLeft: 5 }}>{`\u2022`}</ThemedText>
+            <ThemedText style={{ color: ColorPalette.brand.unorderedList, paddingLeft: 5, flex: 1 }}>{item}</ThemedText>
           </View>
         )
       })}