chore: clean up colors enum and rename some existing colors (#4523)

### Description This PR: - update the colors enum to match [designs](https://www.figma.com/file/erFfzHvSTm5g1sjK6jWyEH/Working-Design-System-Components?node-id=213%3A11&mode=dev) - remove unused enum values like purple / teal / orange / brownFaint / greenStrong - rename the following (the hex values didn't change) - warning -> error - greenUI -> primary - light -> white - dark -> black - onboardingBlue -> infoDark - yellowFaint -> warningLight To come in following PRs: - renaming / replacing / moving the enum values that are not part of the finalised list ### Test plan n/a this PR should have no visual changes ### Related issues - Related to RET-913 ### Backwards compatibility Y
valora-inc · Nov 23, 2023 · 129d74d · 129d74d
1 parent 3e01467
commit 129d74d
Show file tree

Hide file tree

Showing 150 changed files with 283 additions and 290 deletions.
diff --git a/branding/celo/src/icons/Logo.tsx b/branding/celo/src/icons/Logo.tsx
@@ -21,10 +21,10 @@ export default function Logo({ height = 25, type = LogoTypes.COLOR, testID, styl
   let mainColor
   switch (type) {
     case LogoTypes.DARK:
-      mainColor = colors.dark
+      mainColor = colors.black
       break
     case LogoTypes.LIGHT:
-      mainColor = colors.light
+      mainColor = colors.white
       break
     default:
       break

diff --git a/scripts/sync_branding.sh b/scripts/sync_branding.sh
@@ -21,7 +21,7 @@ echo $mobile_root
 cd "$mobile_root"
 
 # Please update the sha when valora branding updates are needed
-valora_branding_sha=48a6e3363ad7c9befbf0567f3dc370a427fce87b
+valora_branding_sha=19bc30b61b48a92c2a836ce1dafa3de25775e1b3
 
 if [[ "$branding" == "valora" ]]; then
   # prevents git from asking credentials

diff --git a/src/RevokePhoneNumber.tsx b/src/RevokePhoneNumber.tsx
@@ -107,7 +107,7 @@ export const RevokePhoneNumber = ({ forwardedRef }: Props) => {
 const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
-    backgroundColor: Colors.yellowFaint,
+    backgroundColor: Colors.warningLight,
     borderRadius: 4,
     marginTop: Spacing.Regular16,
     marginBottom: Spacing.Thick24,

diff --git a/src/account/Education.tsx b/src/account/Education.tsx
@@ -154,7 +154,7 @@ const Education = (props: Props) => {
             <TopBarIconButton
               testID={`Education/${currentIndex === 0 ? 'Close' : 'Back'}Icon`}
               onPress={goBack}
-              icon={currentIndex === 0 ? <Times /> : <BackChevron color={colors.dark} />}
+              icon={currentIndex === 0 ? <Times /> : <BackChevron color={colors.black} />}
             />
           </View>
         )

diff --git a/src/account/Profile.tsx b/src/account/Profile.tsx
@@ -151,6 +151,6 @@ const styles = StyleSheet.create({
   },
   saveButton: {
     ...fontStyles.regular,
-    color: colors.greenUI,
+    color: colors.primary,
   },
 })
diff --git a/src/account/Settings.tsx b/src/account/Settings.tsx
@@ -402,7 +402,7 @@ export const Account = ({ navigation, route }: Props) => {
               }
               testID="KeylessBackup"
               ctaText={cloudBackupCompleted ? t('delete') : t('setup')}
-              ctaColor={cloudBackupCompleted ? colors.warning : colors.greenUI}
+              ctaColor={cloudBackupCompleted ? colors.error : colors.primary}
               showChevron={!cloudBackupCompleted}
             />
           )}

diff --git a/src/account/ShakeForSupport.tsx b/src/account/ShakeForSupport.tsx
@@ -89,7 +89,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     bottom: 0,
     width: '100%',
-    backgroundColor: colors.light,
+    backgroundColor: colors.white,
     borderTopLeftRadius: 16,
     borderTopRightRadius: 16,
     padding: 24,

diff --git a/src/account/SupportContact.tsx b/src/account/SupportContact.tsx
@@ -270,7 +270,7 @@ const styles = StyleSheet.create({
     borderRadius: 4,
     borderWidth: 1.5,
     marginBottom: 16,
-    color: colors.dark,
+    color: colors.black,
     height: 80,
     maxHeight: 150,
   },
@@ -283,7 +283,7 @@ const styles = StyleSheet.create({
     borderRadius: 4,
     borderWidth: 1.5,
     marginBottom: 16,
-    color: colors.dark,
+    color: colors.black,
     maxHeight: 50,
   },
   headerText: {

diff --git a/src/backup/BackupIntroduction.tsx b/src/backup/BackupIntroduction.tsx
@@ -134,7 +134,7 @@ function goToAccountKeyGuide() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: colors.light,
+    backgroundColor: colors.white,
   },
   introContainer: {
     flexGrow: 1,

diff --git a/src/backup/BackupQuiz.tsx b/src/backup/BackupQuiz.tsx
@@ -321,7 +321,7 @@ function DeleteWord({
   }
   return (
     <Touchable borderless={true} onPress={onPressBackspace} style={styles.backWord}>
-      <Backspace color={colors.greenUI} />
+      <Backspace color={colors.primary} />
     </Touchable>
   )
 }
@@ -349,7 +349,7 @@ const styles = StyleSheet.create({
   bodyText: {
     marginTop: 20,
     ...fontStyles.regular,
-    color: colors.dark,
+    color: colors.black,
     textAlign: 'center',
   },
   bodyTextBold: {
@@ -398,7 +398,7 @@ const styles = StyleSheet.create({
   mnemonicWordButtonOutterRim: {
     borderRadius: 100,
     borderWidth: 1.5,
-    borderColor: colors.greenUI,
+    borderColor: colors.primary,
     overflow: 'hidden',
     marginVertical: 4,
     marginHorizontal: 4,
@@ -411,7 +411,7 @@ const styles = StyleSheet.create({
   },
   mnemonicWordButonText: {
     textAlign: 'center',
-    color: colors.greenUI,
+    color: colors.primary,
   },
   backWord: {
     paddingRight: 24,

diff --git a/src/backup/QuizzBottom.tsx b/src/backup/QuizzBottom.tsx
@@ -52,6 +52,6 @@ const styles = StyleSheet.create({
   incorrect: {
     ...fontStyles.regular500,
     textAlign: 'center',
-    color: colors.warning,
+    color: colors.error,
   },
 })
diff --git a/src/components/BottomSheetLegacy.tsx b/src/components/BottomSheetLegacy.tsx
@@ -133,7 +133,7 @@ const styles = StyleSheet.create({
     bottom: 0,
     opacity: 1,
     width: '100%',
-    backgroundColor: colors.light,
+    backgroundColor: colors.white,
     borderTopRightRadius: Spacing.Regular16,
     borderTopLeftRadius: Spacing.Regular16,
   },

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -163,25 +163,25 @@ function getColors(type: BtnTypes, disabled: boolean | undefined) {
   let opacity
   switch (type) {
     case BtnTypes.PRIMARY:
-      textColor = colors.light
-      backgroundColor = disabled ? colors.greenFaint : colors.greenUI
+      textColor = colors.white
+      backgroundColor = disabled ? colors.greenFaint : colors.primary
       break
     case BtnTypes.SECONDARY:
-      textColor = disabled ? colors.gray4 : colors.dark
+      textColor = disabled ? colors.gray4 : colors.black
       backgroundColor = colors.beige
       break
     case BtnTypes.TERTIARY:
-      textColor = colors.light
+      textColor = colors.white
       backgroundColor = disabled ? colors.goldFaint : colors.goldUI
       break
     case BtnTypes.ONBOARDING:
-      textColor = colors.light
+      textColor = colors.white
       backgroundColor = colors.onboardingGreen
       opacity = disabled ? 0.5 : 1.0
       break
     case BtnTypes.ONBOARDING_SECONDARY:
       textColor = colors.onboardingGreen
-      backgroundColor = colors.light
+      backgroundColor = colors.white
       opacity = disabled ? 0.5 : 1.0
       break
   }

diff --git a/src/components/CancelButton.tsx b/src/components/CancelButton.tsx
@@ -44,6 +44,6 @@ export default function CancelButton({ eventName, onCancel, style, buttonType =
 
 const styles = StyleSheet.create({
   title: {
-    color: colors.dark,
+    color: colors.black,
   },
 })
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -25,7 +25,7 @@ export default function Card({ style, rounded = false, shadow = Shadow.Soft, ...
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: colors.light,
+    backgroundColor: colors.white,
     padding: 16,
   },
   rounded: {

diff --git a/src/components/CircleButton.tsx b/src/components/CircleButton.tsx
@@ -32,7 +32,7 @@ export default class CircleButton extends React.PureComponent<ButtonProps> {
       borderWidth !== undefined ? { borderWidth } : { borderWidth: 0 },
       { borderColor: color, width: size, height: size, borderRadius: Math.floor(size! / 2) },
     ]
-    const xColor = solid ? colors.light : color
+    const xColor = solid ? colors.white : color
 
     return (
       <View style={[styles.row, this.props.style]}>

diff --git a/src/components/CodeInput.tsx b/src/components/CodeInput.tsx
@@ -175,11 +175,11 @@ export default function CodeInput({
           </View>
           {showStatus && (
             <View style={styles.statusContainer}>
-              {showSpinner && <ActivityIndicator size="small" color={colors.greenUI} />}
+              {showSpinner && <ActivityIndicator size="small" color={colors.primary} />}
               {showCheckmark && <Checkmark testID={testID ? `${testID}/CheckIcon` : undefined} />}
               {showError && (
                 <InfoIcon
-                  color={colors.warning}
+                  color={colors.error}
                   testID={testID ? `${testID}/ErrorIcon` : undefined}
                 />
               )}

diff --git a/src/components/CommentTextInput.tsx b/src/components/CommentTextInput.tsx
@@ -26,7 +26,7 @@ export default function CommentTextInput({ testID, onCommentChange, comment, onB
       onChangeText={onCommentChange}
       value={comment}
       placeholder={t('addDescription') ?? undefined}
-      placeholderTextColor={colors.greenUI}
+      placeholderTextColor={colors.primary}
       returnKeyType={'done'}
       onBlur={onBlur}
       blurOnSubmit={true}

diff --git a/src/components/DevSkipButton.tsx b/src/components/DevSkipButton.tsx
@@ -103,10 +103,10 @@ const styles = StyleSheet.create({
     height: 25,
   },
   skipButton: {
-    backgroundColor: colors.warning,
+    backgroundColor: colors.error,
   },
   debugButton: {
-    backgroundColor: colors.onboardingBlue,
+    backgroundColor: colors.infoDark,
   },
   hiddenButton: {
     flex: 1,

diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
@@ -70,7 +70,7 @@ export default function Dialog({
           </TextButton>
         )}
         {showLoading ? (
-          <ActivityIndicator style={styles.primary} size="small" color={colors.greenUI} />
+          <ActivityIndicator style={styles.primary} size="small" color={colors.primary} />
         ) : (
           <>
             {actionText && (

diff --git a/src/components/ErrorMessageInline.tsx b/src/components/ErrorMessageInline.tsx
@@ -68,7 +68,7 @@ const styles = StyleSheet.create({
   },
   errorMessage: {
     ...fontStyles.small,
-    color: colors.warning,
+    color: colors.error,
   },
 })
 

diff --git a/src/components/FeeDrawer.tsx b/src/components/FeeDrawer.tsx
@@ -139,7 +139,7 @@ const styles = StyleSheet.create({
   },
   title: {
     ...fontStyles.regular,
-    color: colors.dark,
+    color: colors.black,
   },
   dropDownText: {
     ...fontStyles.regular,

diff --git a/src/components/FullscreenCTA.tsx b/src/components/FullscreenCTA.tsx
@@ -40,7 +40,7 @@ class FullscreenCTA extends React.PureComponent<Props> {
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: Colors.light,
+    backgroundColor: Colors.white,
     height: variables.height,
     width: variables.width,
     flex: 1,

diff --git a/src/components/InLineNotification.tsx b/src/components/InLineNotification.tsx
@@ -105,7 +105,7 @@ const styles = StyleSheet.create({
   bodyText: {
     ...typeScale.bodyXSmall,
     lineHeight: 18,
-    color: Colors.dark,
+    color: Colors.black,
   },
   ctaLabel: {
     ...typeScale.labelSmall,

diff --git a/src/components/LegacyFeeDrawer.tsx b/src/components/LegacyFeeDrawer.tsx
@@ -174,7 +174,7 @@ const styles = StyleSheet.create({
   },
   title: {
     ...fontStyles.regular,
-    color: colors.dark,
+    color: colors.black,
   },
   dropDownText: {
     ...fontStyles.regular,

diff --git a/src/components/LineItemRow.tsx b/src/components/LineItemRow.tsx
@@ -67,7 +67,7 @@ const styles = StyleSheet.create({
   },
   text: {
     ...fontStyles.regular,
-    color: colors.dark,
+    color: colors.black,
   },
   loadingContainer: {
     transform: [{ scale: 0.7 }],

diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx
@@ -27,7 +27,7 @@ export default function ListItem({ children, onPress, disabled, testID }: Props)
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: colors.light,
+    backgroundColor: colors.white,
   },
   innerView: {
     paddingVertical: variables.contentPadding,

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
@@ -47,7 +47,7 @@ export default function Modal({
 
 const styles = StyleSheet.create({
   root: {
-    backgroundColor: colors.light,
+    backgroundColor: colors.white,
     padding: 24,
     maxHeight: '100%',
   },

diff --git a/src/components/OptionsChooser.tsx b/src/components/OptionsChooser.tsx
@@ -24,7 +24,7 @@ function OptionsChooser({
   options,
   includeCancelButton,
   isLastOptionDestructive,
-  buttonsColor = colors.greenUI,
+  buttonsColor = colors.primary,
   onOptionChosen,
   onCancel,
 }: Props) {
@@ -72,7 +72,7 @@ function OptionsChooser({
       {fullOptions.map((option, index) => {
         const extraStyles = {
           ...(index === cancelButtonIndex ? fontStyles.large600 : fontStyles.large),
-          color: index === destructiveButtonIndex ? colors.warning : buttonsColor,
+          color: index === destructiveButtonIndex ? colors.error : buttonsColor,
         }
         return (
           <>

diff --git a/src/components/PercentageIndicator.tsx b/src/components/PercentageIndicator.tsx
@@ -42,10 +42,10 @@ function PercentageIndicator({
   let color: Colors
 
   if (comparison > 0) {
-    color = Colors.greenUI
+    color = Colors.primary
     indicator = <UpIcon color={color} testID={`${testID}:UpIndicator`} />
   } else if (comparison < 0) {
-    color = Colors.warning
+    color = Colors.error
     indicator = <DownIcon color={color} testID={`${testID}:DownIndicator`} />
   } else {
     color = Colors.gray3

diff --git a/src/components/PhoneNumberInput.tsx b/src/components/PhoneNumberInput.tsx
@@ -144,7 +144,7 @@ const styles = StyleSheet.create({
     width: 80,
     paddingHorizontal: 12,
     alignItems: 'stretch',
-    backgroundColor: colors.light,
+    backgroundColor: colors.white,
     borderRadius: 8,
   },
   countryFlagContainer: {

diff --git a/src/components/Pill.tsx b/src/components/Pill.tsx
@@ -34,7 +34,7 @@ const styles = StyleSheet.create({
   },
   text: {
     ...fontStyles.small600,
-    color: colors.greenUI,
+    color: colors.primary,
   },
 })
 

diff --git a/src/components/ReviewFrame.tsx b/src/components/ReviewFrame.tsx
@@ -114,7 +114,7 @@ class ReviewFrame extends React.PureComponent<Props, State> {
 const styles = StyleSheet.create({
   body: {
     flex: 1,
-    backgroundColor: colors.light,
+    backgroundColor: colors.white,
   },
   scrollViewContentContainer: {
     paddingVertical: 10,

diff --git a/src/components/ReviewHeader.tsx b/src/components/ReviewHeader.tsx
@@ -30,7 +30,7 @@ const styles = StyleSheet.create({
   heading: {
     padding: 10,
     paddingBottom: 10, // overwrite h1
-    color: colors.dark,
+    color: colors.black,
     alignSelf: 'center',
   },
 })

diff --git a/src/components/SectionHead.tsx b/src/components/SectionHead.tsx
@@ -19,7 +19,7 @@ export default function SectionheadNew({ text, style }: Props) {
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: colors.light,
+    backgroundColor: colors.white,
     paddingHorizontal: variables.contentPadding,
     paddingVertical: 8,
     flexDirection: 'row',