@bifold/core 2.3.0 → 2.4.1

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

package/src/components/tour/HomeTourSteps.tsx

@@ -12,7 +12,7 @@ export const homeTourSteps: 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.AddAndShare')}
@@ -29,7 +29,7 @@ export const homeTourSteps: TourStep[] = [
           <Text
             style={{
               ...TextTheme.normal,
-              color: ColorPallet.notification.infoText,
+              color: ColorPalette.notification.infoText,
             }}
             allowFontScaling={false}
           >
@@ -43,7 +43,7 @@ export const homeTourSteps: 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.Notifications')}
@@ -60,7 +60,7 @@ export const homeTourSteps: TourStep[] = [
           <Text
             style={{
               ...TextTheme.normal,
-              color: ColorPallet.notification.infoText,
+              color: ColorPalette.notification.infoText,
             }}
             allowFontScaling={false}
           >
@@ -74,7 +74,7 @@ export const homeTourSteps: 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.YourCredentials')}
@@ -91,7 +91,7 @@ export const homeTourSteps: TourStep[] = [
           <Text
             style={{
               ...TextTheme.normal,
-              color: ColorPallet.notification.infoText,
+              color: ColorPalette.notification.infoText,
             }}
             allowFontScaling={false}
           >

package/src/components/tour/ProofRequestTourSteps.tsx

@@ -12,7 +12,7 @@ export const proofRequestTourSteps: 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.ProofRequests')}
@@ -28,7 +28,7 @@ export const proofRequestTourSteps: TourStep[] = [
           <Text
             style={{
               ...TextTheme.normal,
-              color: ColorPallet.notification.infoText,
+              color: ColorPalette.notification.infoText,
             }}
             allowFontScaling={false}
           >

package/src/components/tour/TourBox.tsx

@@ -73,18 +73,18 @@ export function TourBox(props: TourBoxProps): ReactElement {
     stepOn,
     stepsOutOf,
   } = props
-  const { TextTheme, ColorPallet, OnboardingTheme } = useTheme()
+  const { TextTheme, ColorPalette, OnboardingTheme } = useTheme()
   const iconSize = 30
   const dismissIconName = 'clear'
-  const iconColor = ColorPallet.notification.infoIcon
+  const iconColor = ColorPalette.notification.infoIcon
   const [paginationDots, setPaginationDots] = useState<PaginationDotTypes[]>([])
   const [xPos, setXPos] = useState(0)
   const swipeThreshold = 75
 
   const styles = StyleSheet.create({
     container: {
-      backgroundColor: ColorPallet.notification.info,
-      borderColor: ColorPallet.notification.infoBorder,
+      backgroundColor: ColorPalette.notification.info,
+      borderColor: ColorPalette.notification.infoBorder,
       borderRadius: 5,
       borderWidth: 1,
       padding: 20,
@@ -101,7 +101,7 @@ export function TourBox(props: TourBoxProps): ReactElement {
     headerText: {
       ...TextTheme.headingThree,
       alignSelf: 'flex-start',
-      color: ColorPallet.notification.infoText,
+      color: ColorPalette.notification.infoText,
     },
     dismissIcon: {
       alignSelf: 'flex-end',
@@ -116,7 +116,7 @@ export function TourBox(props: TourBoxProps): ReactElement {
     },
     navText: {
       ...TextTheme.bold,
-      color: ColorPallet.brand.primary,
+      color: ColorPalette.brand.primary,
     },
     pagerContainer: {
       flexDirection: 'row',