@bifold/core 2.2.1 → 2.4.0

package/src/components/misc/VerifierCredentialCard.tsx

@@ -57,7 +57,7 @@ const VerifierCredentialCard: React.FC<VerifierCredentialCardProps> = ({
 }) => {
   const [dimensions, setDimensions] = useState({ cardWidth: 0, cardHeight: 0 })
   const { i18n, t } = useTranslation()
-  const { ColorPallet, TextTheme } = useTheme()
+  const { ColorPalette, TextTheme } = useTheme()
   const [bundleResolver] = useServices([TOKENS.UTIL_OCA_RESOLVER])
   const [overlay, setOverlay] = useState<CredentialOverlay<BrandingOverlay>>({})
   const isBranding10 = brandingOverlayType === BrandingOverlayType.Branding10
@@ -74,9 +74,9 @@ const VerifierCredentialCard: React.FC<VerifierCredentialCardProps> = ({
     }, {})
 
   const getCardWatermarkTextColor = (background?: string) => {
-    if (isBranding10) return ColorPallet.grayscale.mediumGrey
-    const shade = shadeIsLightOrDark(background ?? ColorPallet.grayscale.lightGrey)
-    return shade == Shade.Light ? ColorPallet.grayscale.darkGrey : ColorPallet.grayscale.lightGrey
+    if (isBranding10) return ColorPalette.grayscale.mediumGrey
+    const shade = shadeIsLightOrDark(background ?? ColorPalette.grayscale.lightGrey)
+    return shade == Shade.Light ? ColorPalette.grayscale.darkGrey : ColorPalette.grayscale.lightGrey
   }
 
   const parseAttribute = (item: (Attribute & Predicate) | undefined) => {
@@ -160,7 +160,7 @@ const VerifierCredentialCard: React.FC<VerifierCredentialCardProps> = ({
   const PredicateItem: React.FC<{
     item: Predicate
   }> = ({ item }) => {
-    const { ColorPallet } = useTheme()
+    const { ColorPalette } = useTheme()
     const label = (item.label || item.name)!
     const ylabel = overlay.bundle?.labelOverlay?.attributeLabels[label] ?? startCase(label)
     const [currentValue, setCurrentValue] = useState(`${item.pValue ?? ''}`)
@@ -169,7 +169,7 @@ const VerifierCredentialCard: React.FC<VerifierCredentialCardProps> = ({
       input: {
         textAlign: 'center',
         textAlignVertical: 'bottom',
-        borderBottomColor: ColorPallet.grayscale.black,
+        borderBottomColor: ColorPalette.grayscale.black,
         backgroundColor: 'rgba(255, 255, 255, 0.2)',
         borderBottomWidth: 1,
         lineHeight: 19,
@@ -196,7 +196,7 @@ const VerifierCredentialCard: React.FC<VerifierCredentialCardProps> = ({
         </ThemedText>
         <View style={{ flexDirection: 'row', flexWrap: 'wrap', alignItems: 'flex-end' }}>
           {item.satisfied && !preview ? (
-            <Icon style={{ marginRight: 5 }} size={24} name={'check-circle'} color={ColorPallet.semantic.success} />
+            <Icon style={{ marginRight: 5 }} size={24} name={'check-circle'} color={ColorPalette.semantic.success} />
           ) : null}
           <ThemedText variant="bold" style={[styles.textContainer, predicateStyles.predicateType]}>
             {item.pType}

package/src/components/modals/AppGuideModal.tsx

@@ -32,24 +32,24 @@ const AppGuideModal: React.FC<AppGuideModalProps> = ({
 }) => {
   const { height, width } = useWindowDimensions()
   const { t } = useTranslation()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const iconSize = 30
   const dismissIconName = 'clear'
-  const iconColor = ColorPallet.notification.infoIcon
+  const iconColor = ColorPalette.notification.infoIcon
 
   const styles = StyleSheet.create({
     modalCenter: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
-      backgroundColor: ColorPallet.notification.popupOverlay,
+      backgroundColor: ColorPalette.notification.popupOverlay,
       padding: 10,
       minHeight: height,
       minWidth: width,
     },
     container: {
-      backgroundColor: ColorPallet.notification.info,
-      borderColor: ColorPallet.notification.infoBorder,
+      backgroundColor: ColorPalette.notification.info,
+      borderColor: ColorPalette.notification.infoBorder,
       borderRadius: 5,
       borderWidth: 1,
       padding: 20,
@@ -66,12 +66,12 @@ const AppGuideModal: React.FC<AppGuideModalProps> = ({
     headerText: {
       alignSelf: 'flex-start',
       flexWrap: 'wrap',
-      color: ColorPallet.notification.infoText,
+      color: ColorPalette.notification.infoText,
     },
     bodyText: {
       flexShrink: 1,
       marginVertical: 16,
-      color: ColorPallet.notification.infoText,
+      color: ColorPalette.notification.infoText,
     },
     dismissIcon: {
       alignSelf: 'center',

package/src/components/modals/CameraDisclosureModal.tsx

@@ -24,19 +24,19 @@ const CameraDisclosureModal: React.FC<CameraDisclosureModalProps> = ({ requestCa
   const [modalVisible, setModalVisible] = useState(true)
   const [showSettingsPopup, setShowSettingsPopup] = useState(false)
   const [requestInProgress, setRequestInProgress] = useState(false)
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
 
   const styles = StyleSheet.create({
     container: {
       height: '100%',
-      backgroundColor: ColorPallet.brand.modalPrimaryBackground,
+      backgroundColor: ColorPalette.brand.modalPrimaryBackground,
       padding: 20,
     },
     messageText: {
       marginTop: 30,
     },
     controlsContainer: {
-      backgroundColor: ColorPallet.brand.modalPrimaryBackground,
+      backgroundColor: ColorPalette.brand.modalPrimaryBackground,
       marginTop: 'auto',
       margin: 20,
     },
@@ -85,7 +85,7 @@ const CameraDisclosureModal: React.FC<CameraDisclosureModalProps> = ({ requestCa
           onDismissPressed={onOpenSettingsDismissed}
         />
       )}
-      <SafeAreaView style={{ backgroundColor: ColorPallet.brand.modalPrimaryBackground }}>
+      <SafeAreaView style={{ backgroundColor: ColorPalette.brand.modalPrimaryBackground }}>
         <ScrollView style={styles.container}>
           <ThemedText variant="modalHeadingOne" testID={testIdWithKey('AllowCameraUse')} accessibilityRole="header">
             {t('CameraDisclosure.AllowCameraUse')}

package/src/components/modals/CommonRemoveModal.tsx

@@ -32,7 +32,7 @@ interface RemoveProps {
 }
 
 const Dropdown: React.FC<RemoveProps> = ({ title, content }) => {
-  const { TextTheme, ColorPallet } = useTheme()
+  const { TextTheme, ColorPalette } = useTheme()
   const [isCollapsed, setIsCollapsed] = useState<boolean>(true)
 
   return (
@@ -44,7 +44,7 @@ const Dropdown: React.FC<RemoveProps> = ({ title, content }) => {
         style={[
           {
             padding: 15,
-            backgroundColor: ColorPallet.brand.modalSecondaryBackground,
+            backgroundColor: ColorPalette.brand.modalSecondaryBackground,
             borderRadius: 5,
             flexDirection: 'row',
             justifyContent: 'space-between',
@@ -58,7 +58,7 @@ const Dropdown: React.FC<RemoveProps> = ({ title, content }) => {
       </TouchableOpacity>
       <Collapsible collapsed={isCollapsed} enablePointerEvents={true}>
         <View
-          style={{ marginTop: 10, borderLeftWidth: 2, borderLeftColor: ColorPallet.brand.modalSecondaryBackground }}
+          style={{ marginTop: 10, borderLeftWidth: 2, borderLeftColor: ColorPalette.brand.modalSecondaryBackground }}
         >
           <UnorderedList unorderedListItems={content} />
         </View>
@@ -73,7 +73,7 @@ const CommonRemoveModal: React.FC<CommonRemoveModalProps> = ({ usage, visible, o
   }
 
   const { t } = useTranslation()
-  const { ColorPallet, TextTheme, Assets } = useTheme()
+  const { ColorPalette, TextTheme, Assets } = useTheme()
 
   const imageDisplayOptions = {
     height: 115,
@@ -82,7 +82,7 @@ const CommonRemoveModal: React.FC<CommonRemoveModalProps> = ({ usage, visible, o
 
   const styles = StyleSheet.create({
     safeAreaView: {
-      backgroundColor: ColorPallet.brand.modalPrimaryBackground,
+      backgroundColor: ColorPalette.brand.modalPrimaryBackground,
       borderTopRightRadius: 10,
       borderTopLeftRadius: 10,
     },
@@ -296,7 +296,7 @@ const CommonRemoveModal: React.FC<CommonRemoveModalProps> = ({ usage, visible, o
               onPress={() => onCancel && onCancel()}
               hitSlop={hitSlop}
             >
-              <Icon name={'close'} size={42} color={ColorPallet.brand.modalIcon} />
+              <Icon name={'close'} size={42} color={ColorPalette.brand.modalIcon} />
             </TouchableOpacity>
           </View>
           <ScrollView style={styles.container}>
@@ -306,7 +306,7 @@ const CommonRemoveModal: React.FC<CommonRemoveModalProps> = ({ usage, visible, o
             </>
           </ScrollView>
           <View style={styles.controlsContainer}>
-            <ContentGradient backgroundColor={ColorPallet.brand.modalPrimaryBackground} height={30} />
+            <ContentGradient backgroundColor={ColorPalette.brand.modalPrimaryBackground} height={30} />
             <View style={{ paddingTop: 10 }}>
               <Button
                 title={titleForConfirmButton()}

package/src/components/modals/DismissiblePopupModal.tsx

@@ -35,7 +35,7 @@ const DismissiblePopupModal: React.FC<DismissiblePopupModalProps> = ({
 }) => {
   const { height, width, fontScale } = useWindowDimensions()
   const { t } = useTranslation()
-  const { ColorPallet, TextTheme } = useTheme()
+  const { ColorPalette, TextTheme } = useTheme()
   const iconSize = 30
 
   const styles = StyleSheet.create({
@@ -43,14 +43,14 @@ const DismissiblePopupModal: React.FC<DismissiblePopupModalProps> = ({
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
-      backgroundColor: ColorPallet.notification.popupOverlay,
+      backgroundColor: ColorPalette.notification.popupOverlay,
       padding: 20,
       minHeight: height,
       minWidth: width,
     },
     container: {
-      backgroundColor: ColorPallet.notification.info,
-      borderColor: ColorPallet.notification.infoBorder,
+      backgroundColor: ColorPalette.notification.info,
+      borderColor: ColorPalette.notification.infoBorder,
       borderRadius: 5,
       borderWidth: 1,
       padding: 10,
@@ -78,7 +78,7 @@ const DismissiblePopupModal: React.FC<DismissiblePopupModalProps> = ({
     headerText: {
       ...TextTheme.bold,
       alignSelf: 'flex-start',
-      color: ColorPallet.notification.infoText,
+      color: ColorPalette.notification.infoText,
     },
     scrollViewContentContainer: {
       flexGrow: 1,
@@ -89,7 +89,7 @@ const DismissiblePopupModal: React.FC<DismissiblePopupModalProps> = ({
     bodyText: {
       ...TextTheme.normal,
       paddingVertical: 16,
-      color: ColorPallet.notification.infoText,
+      color: ColorPalette.notification.infoText,
     },
     footer: {
       paddingTop: 10,
@@ -105,7 +105,7 @@ const DismissiblePopupModal: React.FC<DismissiblePopupModalProps> = ({
 
   const infoIconName = 'info'
   const dismissIconName = 'clear'
-  const iconColor = ColorPallet.notification.infoIcon
+  const iconColor = ColorPalette.notification.infoIcon
 
   return (
     <SafeAreaModal transparent>

package/src/components/modals/ErrorModal.tsx

@@ -22,14 +22,14 @@ const ErrorModal: React.FC<ErrorModalProps> = ({ enableReport }) => {
   const [error, setError] = useState<BifoldError>()
   const [reported, setReported] = useState(false)
   const [logger] = useServices([TOKENS.UTIL_LOGGER])
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const styles = StyleSheet.create({
     container: {
       minHeight: height,
       flexDirection: 'column',
       justifyContent: 'center',
       alignItems: 'center',
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
     },
   })
 
@@ -78,9 +78,9 @@ const ErrorModal: React.FC<ErrorModalProps> = ({ enableReport }) => {
   const secondaryCallToActionIcon = useMemo(
     () =>
       reported ? (
-        <Icon style={{ marginRight: 8 }} name={'check-circle'} size={18} color={ColorPallet.semantic.success} />
+        <Icon style={{ marginRight: 8 }} name={'check-circle'} size={18} color={ColorPalette.semantic.success} />
       ) : undefined,
-    [reported, ColorPallet.semantic.success]
+    [reported, ColorPalette.semantic.success]
   )
 
   return (

package/src/components/modals/ImageModal.tsx

@@ -17,14 +17,14 @@ interface ImageModalProps {
 const ImageModal: React.FC<ImageModalProps> = ({ uri, onDismissPressed }) => {
   const { height, width } = useWindowDimensions()
   const { t } = useTranslation()
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
 
   const styles = StyleSheet.create({
     modalCenter: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
-      backgroundColor: ColorPallet.notification.popupOverlay,
+      backgroundColor: ColorPalette.notification.popupOverlay,
       minHeight: height,
       minWidth: width,
       paddingHorizontal: 20,
@@ -32,7 +32,7 @@ const ImageModal: React.FC<ImageModalProps> = ({ uri, onDismissPressed }) => {
     },
     container: {
       flexShrink: 1,
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
     },
     image: {
       width: width - 40,
@@ -49,7 +49,7 @@ const ImageModal: React.FC<ImageModalProps> = ({ uri, onDismissPressed }) => {
 
   const iconSize = 30
   const dismissIconName = 'clear'
-  const iconColor = ColorPallet.brand.primary
+  const iconColor = ColorPalette.brand.primary
 
   return (
     <SafeAreaModal transparent>

package/src/components/modals/PopupModal.tsx

@@ -25,13 +25,13 @@ const PopupModal: React.FC<PopupModalProps> = ({
   notificationType,
   onCallToActionLabel,
 }) => {
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const styles = StyleSheet.create({
     modalCenter: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
-      backgroundColor: ColorPallet.notification.popupOverlay,
+      backgroundColor: ColorPalette.notification.popupOverlay,
       padding: 20,
     },
   })

package/src/components/modals/ProofCancelModal.tsx

@@ -17,11 +17,11 @@ interface ProofCancelModalProps {
 
 const ProofCancelModal: React.FC<ProofCancelModalProps> = ({ visible, onDone }) => {
   const { t } = useTranslation()
-  const { ColorPallet, Assets } = useTheme()
+  const { ColorPalette, Assets } = useTheme()
 
   const styles = StyleSheet.create({
     safeAreaView: {
-      backgroundColor: ColorPallet.brand.modalPrimaryBackground,
+      backgroundColor: ColorPalette.brand.modalPrimaryBackground,
       flex: 1,
     },
     container: {

package/src/components/record/RecordFooter.tsx

@@ -4,10 +4,10 @@ import { StyleSheet, View } from 'react-native'
 import { useTheme } from '../../contexts/theme'
 
 const RecordFooter: React.FC<React.PropsWithChildren> = ({ children }) => {
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const styles = StyleSheet.create({
     container: {
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
       height: '100%',
     },
   })

package/src/components/record/RecordHeader.tsx

@@ -4,10 +4,10 @@ import { StyleSheet, View } from 'react-native'
 import { useTheme } from '../../contexts/theme'
 
 const RecordHeader: React.FC<React.PropsWithChildren> = ({ children }) => {
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const styles = StyleSheet.create({
     container: {
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
     },
   })
 

package/src/components/record/RecordRemove.tsx

@@ -15,7 +15,7 @@ interface RecordRemoveProps {
 
 const RecordRemove: React.FC<RecordRemoveProps> = ({ onRemove = () => null }) => {
   const { t } = useTranslation()
-  const { TextTheme, ColorPallet, Assets } = useTheme()
+  const { TextTheme, ColorPalette, Assets } = useTheme()
   const [bundleResolver] = useServices([TOKENS.UTIL_OCA_RESOLVER])
 
   const styles = StyleSheet.create({
@@ -23,7 +23,7 @@ const RecordRemove: React.FC<RecordRemoveProps> = ({ onRemove = () => null }) =>
       ...TextTheme.normal,
     },
     footerText: {
-      color: ColorPallet.brand.link,
+      color: ColorPalette.brand.link,
     },
     linkContainer: {
       minHeight: TextTheme.normal.fontSize,
@@ -39,7 +39,7 @@ const RecordRemove: React.FC<RecordRemoveProps> = ({ onRemove = () => null }) =>
   return (
     <View
       style={{
-        backgroundColor: ColorPallet.brand.secondaryBackground,
+        backgroundColor: ColorPalette.brand.secondaryBackground,
         marginTop: 16,
         paddingHorizontal: bundleResolver.getBrandingOverlayType() === BrandingOverlayType.Branding10 ? 25 : 16,
         paddingVertical: 16,
@@ -54,8 +54,8 @@ const RecordRemove: React.FC<RecordRemoveProps> = ({ onRemove = () => null }) =>
         activeOpacity={1}
         onPress={onRemove}
       >
-        <Assets.svg.iconDelete width={20} height={20} color={ColorPallet.semantic.error} />
-        <ThemedText style={[styles.footerText, { color: ColorPallet.semantic.error }]}>
+        <Assets.svg.iconDelete width={20} height={20} color={ColorPalette.semantic.error} />
+        <ThemedText style={[styles.footerText, { color: ColorPalette.semantic.error }]}>
           {t('CredentialDetails.RemoveFromWallet')}
         </ThemedText>
       </TouchableOpacity>

package/src/components/texts/HighlightTextBox.tsx

@@ -11,18 +11,18 @@ export interface TextBoxProps {
 const offset = 10
 
 const HighlightTextBox: React.FC<TextBoxProps> = ({ children }) => {
-  const { ColorPallet, OnboardingTheme } = useTheme()
+  const { ColorPalette, OnboardingTheme } = useTheme()
   const style = StyleSheet.create({
     icon: {
       marginRight: offset,
     },
     container: {
       flexDirection: 'row',
-      backgroundColor: ColorPallet.brand.primaryBackground,
+      backgroundColor: ColorPalette.brand.primaryBackground,
     },
     accentBox: {
       marginRight: offset,
-      backgroundColor: ColorPallet.brand.highlight,
+      backgroundColor: ColorPalette.brand.highlight,
       width: 8,
     },
     headerText: {

package/src/components/texts/InfoTextBox.tsx

@@ -26,14 +26,14 @@ const InfoTextBox: React.FC<TextBoxProps> = ({
   style = {},
   textStyle = {},
 }) => {
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const styles = StyleSheet.create({
     container: {
       padding: 10,
       borderRadius: 5,
       borderWidth: 1,
-      backgroundColor: ColorPallet.notification.info,
-      borderColor: ColorPallet.notification.infoBorder,
+      backgroundColor: ColorPalette.notification.info,
+      borderColor: ColorPalette.notification.infoBorder,
       ...style,
     },
     row: {
@@ -45,7 +45,7 @@ const InfoTextBox: React.FC<TextBoxProps> = ({
       alignSelf: 'center',
       flex: 1,
       flexWrap: 'wrap',
-      color: ColorPallet.notification.infoText,
+      color: ColorPalette.notification.infoText,
       ...textStyle,
     },
     iconContainer: {
@@ -56,7 +56,7 @@ const InfoTextBox: React.FC<TextBoxProps> = ({
   })
 
   let iconName = 'info'
-  let iconColor = ColorPallet.notification.infoIcon
+  let iconColor = ColorPalette.notification.infoIcon
 
   switch (type) {
     case InfoBoxType.Info:
@@ -64,43 +64,43 @@ const InfoTextBox: React.FC<TextBoxProps> = ({
 
     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.text = {
         ...styles.text,
-        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.text = {
         ...styles.text,
-        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.text = {
         ...styles.text,
-        color: ColorPallet.notification.errorText,
+        color: ColorPalette.notification.errorText,
       }
       break
 

package/src/components/texts/Link.tsx

@@ -14,10 +14,10 @@ interface LinkProps {
 }
 
 const Link: React.FC<LinkProps> = ({ linkText, onPress, style = {}, testID, ...textProps }) => {
-  const { ColorPallet } = useTheme()
+  const { ColorPalette } = useTheme()
   const styles = StyleSheet.create({
     link: {
-      color: ColorPallet.brand.link,
+      color: ColorPalette.brand.link,
       textDecorationLine: 'underline',
       alignSelf: 'flex-start',
     },

package/src/components/toast/BaseToast.tsx

@@ -25,7 +25,7 @@ export enum ToastType {
 }
 
 const BaseToast: React.FC<BaseToastProps> = ({ title, body, toastType, onPress = () => null }) => {
-  const { TextTheme, borderRadius, borderWidth, ColorPallet } = useTheme()
+  const { TextTheme, borderRadius, borderWidth, ColorPalette } = useTheme()
   const { width } = useWindowDimensions()
   const iconSize = 24
   let iconName = ''
@@ -61,34 +61,34 @@ const BaseToast: React.FC<BaseToastProps> = ({ title, body, toastType, onPress =
   switch (toastType) {
     case ToastType.Success:
       iconName = 'check-circle'
-      backgroundColor = ColorPallet.notification.success
-      borderColor = ColorPallet.notification.successBorder
-      iconColor = ColorPallet.notification.successIcon
-      textColor = ColorPallet.notification.successText
+      backgroundColor = ColorPalette.notification.success
+      borderColor = ColorPalette.notification.successBorder
+      iconColor = ColorPalette.notification.successIcon
+      textColor = ColorPalette.notification.successText
       break
 
     case ToastType.Info:
       iconName = 'info'
-      backgroundColor = ColorPallet.notification.info
-      borderColor = ColorPallet.notification.infoBorder
-      iconColor = ColorPallet.notification.infoIcon
-      textColor = ColorPallet.notification.infoText
+      backgroundColor = ColorPalette.notification.info
+      borderColor = ColorPalette.notification.infoBorder
+      iconColor = ColorPalette.notification.infoIcon
+      textColor = ColorPalette.notification.infoText
       break
 
     case ToastType.Warn:
       iconName = 'report-problem'
-      backgroundColor = ColorPallet.notification.warn
-      borderColor = ColorPallet.notification.warnBorder
-      iconColor = ColorPallet.notification.warnIcon
-      textColor = ColorPallet.notification.warnText
+      backgroundColor = ColorPalette.notification.warn
+      borderColor = ColorPalette.notification.warnBorder
+      iconColor = ColorPalette.notification.warnIcon
+      textColor = ColorPalette.notification.warnText
       break
 
     case ToastType.Error:
       iconName = 'error'
-      backgroundColor = ColorPallet.notification.error
-      borderColor = ColorPallet.notification.errorBorder
-      iconColor = ColorPallet.notification.errorIcon
-      textColor = ColorPallet.notification.errorText
+      backgroundColor = ColorPalette.notification.error
+      borderColor = ColorPalette.notification.errorBorder
+      iconColor = ColorPalette.notification.errorIcon
+      textColor = ColorPalette.notification.errorText
       break
 
     default:

package/src/components/tour/CredentialOfferTourSteps.tsx

@@ -12,7 +12,7 @@ export const credentialOfferTourSteps: TourStep[] = [
     Render: (props: RenderProps) => {
       const { currentTour, currentStep, next, stop, previous } = props
       const { t } = useTranslation()
-      const { ColorPallet, TextTheme } = useTheme()
+      const { ColorPalette, TextTheme } = useTheme()
       return (
         <TourBox
           title={t('Tour.CredentialOffers')}
@@ -28,7 +28,7 @@ export const credentialOfferTourSteps: TourStep[] = [
           <Text
             style={{
               ...TextTheme.normal,
-              color: ColorPallet.notification.infoText,
+              color: ColorPalette.notification.infoText,
             }}
             allowFontScaling={false}
           >

package/src/components/tour/CredentialsTourSteps.tsx

@@ -12,7 +12,7 @@ export const credentialsTourSteps: TourStep[] = [
     Render: (props: RenderProps) => {
       const { currentTour, currentStep, next, stop, previous } = props
       const { t } = useTranslation()
-      const { ColorPallet, TextTheme } = useTheme()
+      const { ColorPalette, TextTheme } = useTheme()
       return (
         <TourBox
           title={t('Tour.AddCredentials')}
@@ -28,7 +28,7 @@ export const credentialsTourSteps: TourStep[] = [
           <Text
             style={{
               ...TextTheme.normal,
-              color: ColorPallet.notification.infoText,
+              color: ColorPalette.notification.infoText,
             }}
             allowFontScaling={false}
           >