refactor(colors): sync names with design system

src/account/SupportContact.tsx

@@ -181,7 +181,7 @@ function SupportContact({ route }: Props) {
         </View>
         {inProgress && (
           <View style={styles.loadingSpinnerContainer} testID="ImportWalletLoadingCircle">
-            <ActivityIndicator size="large" color={colors.primary} />
+            <ActivityIndicator size="large" color={colors.accent} />
           </View>
         )}
 

src/app/AppLoading.tsx

@@ -64,7 +64,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flex: 1,
     width: '100%',
-    backgroundColor: colors.primary,
+    backgroundColor: colors.accent,
   },
 
   button: {

src/app/MultichainBeta.tsx

@@ -3,8 +3,8 @@ import { useTranslation } from 'react-i18next'
 import { StyleSheet, Text, View } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
 import { SafeAreaView } from 'react-native-safe-area-context'
-import { AppEvents } from 'src/analytics/Events'
 import AppAnalytics from 'src/analytics/AppAnalytics'
+import { AppEvents } from 'src/analytics/Events'
 import { MultichainBetaStatus, optMultichainBeta } from 'src/app/actions'
 import { multichainBetaStatusSelector } from 'src/app/selectors'
 import BetaTag from 'src/components/BetaTag'
@@ -128,7 +128,7 @@ const styles = StyleSheet.create({
     height: 56,
   },
   supportButton: {
-    color: Colors.primary,
+    color: Colors.accent,
     ...typeScale.bodyMedium,
   },
 })

src/backup/BackupQuiz.tsx

@@ -7,9 +7,9 @@ import { SafeAreaView } from 'react-native-safe-area-context'
 import { connect } from 'react-redux'
 import { setBackupCompleted } from 'src/account/actions'
 import { showError } from 'src/alert/actions'
+import AppAnalytics from 'src/analytics/AppAnalytics'
 import { OnboardingEvents } from 'src/analytics/Events'
 import { BackQuizProgress } from 'src/analytics/types'
-import AppAnalytics from 'src/analytics/AppAnalytics'
 import CancelConfirm from 'src/backup/CancelConfirm'
 import { QuizzBottom } from 'src/backup/QuizzBottom'
 import { getStoredMnemonic, onGetMnemonicFail } from 'src/backup/utils'
@@ -321,7 +321,7 @@ function DeleteWord({
   }
   return (
     <Touchable borderless={true} onPress={onPressBackspace} style={styles.backWord}>
-      <Backspace color={colors.primary} />
+      <Backspace color={colors.accent} />
     </Touchable>
   )
 }
@@ -398,7 +398,7 @@ const styles = StyleSheet.create({
   mnemonicWordButtonOutterRim: {
     borderRadius: 100,
     borderWidth: 1.5,
-    borderColor: colors.primary,
+    borderColor: colors.accent,
     overflow: 'hidden',
     marginVertical: 4,
     marginHorizontal: 4,
@@ -411,7 +411,7 @@ const styles = StyleSheet.create({
   },
   mnemonicWordButonText: {
     textAlign: 'center',
-    color: colors.primary,
+    color: colors.accent,
   },
   backWord: {
     paddingRight: 24,

src/components/AddAssetsBottomSheet.tsx

@@ -6,7 +6,7 @@ import Touchable from 'src/components/Touchable'
 import QuickActionsAdd from 'src/icons/quick-actions/Add'
 import QuickActionsSend from 'src/icons/quick-actions/Send'
 import SwapArrows from 'src/icons/SwapArrows'
-import { Colors } from 'src/styles/colors'
+import Colors from 'src/styles/colors'
 import { typeScale } from 'src/styles/fonts'
 import { Spacing } from 'src/styles/styles'
 import { TokenActionName } from 'src/tokens/types'

src/components/Button.tsx

@@ -2,7 +2,7 @@ import { debounce } from 'lodash'
 import React, { ReactNode, useCallback } from 'react'
 import { ActivityIndicator, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
 import Touchable from 'src/components/Touchable'
-import colors, { Colors } from 'src/styles/colors'
+import Colors from 'src/styles/colors'
 import { typeScale } from 'src/styles/fonts'
 import { vibrateInformative } from 'src/styles/hapticFeedback'
 
@@ -160,20 +160,20 @@ function getColors(type: BtnTypes, disabled: boolean | undefined) {
   let borderColor
   switch (type) {
     case BtnTypes.PRIMARY:
-      textColor = colors.white
-      backgroundColor = colors.black
+      textColor = Colors.white
+      backgroundColor = Colors.primary
       opacity = disabled ? 0.25 : 1.0
       break
     case BtnTypes.SECONDARY:
-      textColor = colors.black
-      backgroundColor = colors.gray1
-      borderColor = colors.gray2
+      textColor = Colors.black
+      backgroundColor = Colors.gray1
+      borderColor = Colors.gray2
       opacity = disabled ? 0.5 : 1.0
       break
     case BtnTypes.TERTIARY:
-      textColor = colors.black
-      backgroundColor = colors.white
-      borderColor = colors.gray2
+      textColor = Colors.black
+      backgroundColor = Colors.white
+      borderColor = Colors.gray2
       opacity = disabled ? 0.5 : 1.0
       break
   }

src/components/CircleButton.tsx

@@ -19,8 +19,8 @@ export default class CircleButton extends React.PureComponent<ButtonProps> {
   static defaultProps = {
     size: 50,
     disable: false,
-    activeColor: colors.primary,
-    inactiveColor: colors.primaryDisabled,
+    activeColor: colors.accent,
+    inactiveColor: colors.accentDisabled,
   }
 
   render() {

src/components/CodeInput.tsx

@@ -80,7 +80,7 @@ export default function CodeInput({
       </View>
       {showStatus && (
         <View style={styles.statusContainer}>
-          {showSpinner && <ActivityIndicator size="small" color={colors.primary} />}
+          {showSpinner && <ActivityIndicator size="small" color={colors.accent} />}
           {showCheckmark && <Checkmark testID={testID ? `${testID}/CheckIcon` : undefined} />}
 
           {showError && (

src/components/CodeRow.tsx

@@ -65,7 +65,7 @@ function CodeRow({
     return (
       <View style={styles.codeProcessingContainer}>
         <Text style={styles.codeValue}>{shortenedInput || t('processing')}</Text>
-        <ActivityIndicator size="small" color={colors.primary} style={styles.codeInputSpinner} />
+        <ActivityIndicator size="small" color={colors.accent} style={styles.codeInputSpinner} />
       </View>
     )
   }

src/components/CurrencyDisplay.tsx

@@ -167,7 +167,7 @@
   const color = useColors
     ? amountCurrency === Currency.Celo
       ? colors.goldBrand
-      : colors.primary
+      : colors.accent
     : StyleSheet.flatten(style)?.color
 
   if (type === DisplayType.Big) {

src/components/DataFieldWithCopy.tsx

@@ -4,7 +4,7 @@ import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
 import Toast from 'react-native-simple-toast'
 import Touchable from 'src/components/Touchable'
 import CopyIcon from 'src/icons/CopyIcon'
-import { Colors } from 'src/styles/colors'
+import Colors from 'src/styles/colors'
 import { typeScale } from 'src/styles/fonts'
 import { vibrateInformative } from 'src/styles/hapticFeedback'
 import { Spacing } from 'src/styles/styles'

src/components/Dialog.tsx

@@ -70,7 +70,7 @@ export default function Dialog({
           </TextButton>
         )}
         {showLoading ? (
-          <ActivityIndicator style={styles.primary} size="small" color={colors.primary} />
+          <ActivityIndicator style={styles.primary} size="small" color={colors.accent} />
         ) : (
           <>
             {!!actionText && (

src/components/Dropdown.tsx

@@ -29,10 +29,10 @@ function Dropdown<T>(props: Props<T>) {
         <View style={styles.selectedOptionContainer}>
           <Text style={styles.optionText}>{labelSelected}</Text>
           {!isOpen ? (
-            <DownArrowIcon color={Colors.primary} strokeWidth={2} />
+            <DownArrowIcon color={Colors.accent} strokeWidth={2} />
           ) : (
             <DownArrowIcon
-              color={Colors.primary}
+              color={Colors.accent}
               strokeWidth={2}
               style={{ transform: [{ rotate: '180deg' }] }}
             />

src/components/LineItemRow.tsx

@@ -46,7 +46,7 @@ export default function LineItemRow({
       )}
       {isLoading && (
         <View style={styles.loadingContainer} testID="LineItemLoading">
-          <ActivityIndicator size="small" color={colors.primary} />
+          <ActivityIndicator size="small" color={colors.accent} />
         </View>
       )}
     </View>

src/components/OnboardingCard.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native'
 import Card from 'src/components/Card'
 import Touchable from 'src/components/Touchable'
 import ForwardChevron from 'src/icons/ForwardChevron'
-import { Colors } from 'src/styles/colors'
+import Colors from 'src/styles/colors'
 import { typeScale } from 'src/styles/fonts'
 import { Shadow, Spacing } from 'src/styles/styles'
 

src/components/PercentageIndicator.tsx

@@ -42,7 +42,7 @@ function PercentageIndicator({
   let color: Colors
 
   if (comparison > 0) {
-    color = Colors.primary
+    color = Colors.accent
     indicator = <UpIcon color={color} testID={`${testID}:UpIndicator`} />
   } else if (comparison < 0) {
     color = Colors.error

src/components/RecoveryPhraseInput.tsx

@@ -116,7 +116,7 @@ export default function RecoveryPhraseInput({
           </View>
           {showStatus && (
             <View style={styles.statusContainer}>
-              {showStatus && <ActivityIndicator size="small" color={colors.primary} />}
+              {showStatus && <ActivityIndicator size="small" color={colors.accent} />}
             </View>
           )}
         </View>

src/components/RowDivider.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { StyleSheet, View } from 'react-native'
-import { Colors } from 'src/styles/colors'
+import Colors from 'src/styles/colors'
 import { Spacing } from 'src/styles/styles'
 
 export interface Props {

src/components/SegmentedControl.tsx

@@ -29,7 +29,7 @@ export default function SegmentedControl({ values, selectedIndex = 0, onChange }
     Extrapolation.CLAMP
   )
 
-  const color = interpolateColor(selectedIndex, [0.5, 1], [colors.primary, colors.white])
+  const color = interpolateColor(selectedIndex, [0.5, 1], [colors.accent, colors.white])
   const colorInverted = interpolateColor(selectedIndex, [0.5, 1], [colors.white, colors.black])
 
   const onLayout = ({
@@ -118,7 +118,7 @@ const styles = StyleSheet.create({
     height: HEIGHT,
     borderRadius: HEIGHT / 2,
     borderWidth: 1,
-    borderColor: colors.primary,
+    borderColor: colors.accent,
     overflow: 'hidden',
     marginHorizontal: 30,
   },
@@ -128,7 +128,7 @@ const styles = StyleSheet.create({
     bottom: 0,
     right: 0,
     left: 0,
-    backgroundColor: colors.primary,
+    backgroundColor: colors.accent,
   },
   maskedContainer: {
     // Transparent background because mask is based off alpha channel.
@@ -145,6 +145,6 @@ const styles = StyleSheet.create({
   },
   text: {
     ...typeScale.labelSemiBoldXSmall,
-    color: colors.primary,
+    color: colors.accent,
   },
 })

src/components/SettingsItem.tsx

@@ -3,10 +3,10 @@ import { StyleSheet, Switch, Text, View } from 'react-native'
 import ListItem from 'src/components/ListItem'
 import TextInput from 'src/components/TextInput'
 import ForwardChevron from 'src/icons/ForwardChevron'
+import OpenLinkIcon from 'src/icons/OpenLinkIcon'
 import colors from 'src/styles/colors'
 import { typeScale } from 'src/styles/fonts'
 import { Spacing } from 'src/styles/styles'
-import OpenLinkIcon from 'src/icons/OpenLinkIcon'
 
 interface WrapperProps {
   testID?: string
@@ -65,7 +65,7 @@ export function SettingsItemTextValue({
             </Text>
           )}
           {(!!value || showChevron) && (
-            <ForwardChevron height={12} color={isValueActionable ? colors.primary : colors.gray3} />
+            <ForwardChevron height={12} color={isValueActionable ? colors.accent : colors.gray3} />
           )}
           {isExternalLink && <OpenLinkIcon size={16} color={colors.black} />}
         </View>
@@ -215,7 +215,7 @@ const styles = StyleSheet.create({
   },
   valueActionable: {
     ...typeScale.bodyMedium,
-    color: colors.primary,
+    color: colors.accent,
     marginRight: 8,
   },
   details: {

src/components/SmallButton.tsx

@@ -41,7 +41,7 @@ export default class SmallButton extends React.Component<ButtonProps> {
             accessibilityLabel={accessibilityLabel}
             style={[
               styles.text,
-              solid ? { color: colors.white } : { color: colors.primary },
+              solid ? { color: colors.white } : { color: colors.accent },
               children ? styles.textPadding : null,
               textStyle,
             ]}
@@ -67,14 +67,14 @@ const styles = StyleSheet.create({
     borderRadius: 2,
   },
   solid: {
-    backgroundColor: colors.primary,
+    backgroundColor: colors.accent,
     paddingVertical: PADDING_VERTICAL + 2,
     paddingHorizontal: PADDING_HORIZONTAL + 2,
   },
   hollow: {
     backgroundColor: 'transparent',
     borderWidth: 2,
-    borderColor: colors.primary,
+    borderColor: colors.accent,
   },
   text: {
     ...typeScale.labelMedium,

src/components/Switch.tsx

@@ -15,5 +15,5 @@ export default function Switch(props: SwitchProps) {
 
 const SWITCH_TRACK = {
   false: colors.gray3,
-  true: colors.primary,
+  true: colors.accent,
 }

src/components/TextButton.tsx

@@ -17,6 +17,6 @@ export default function TextButton({ style, ...passThroughProps }: Props) {
 const styles = StyleSheet.create({
   text: {
     ...typeScale.labelSemiBoldMedium,
-    color: colors.primary,
+    color: colors.accent,
   },
 })

src/components/TextInput.tsx

@@ -15,7 +15,7 @@ import {
   ViewStyle,
 } from 'react-native'
 import CircleButton from 'src/components/CircleButton'
-import { Colors } from 'src/styles/colors'
+import Colors from 'src/styles/colors'
 import { typeScale } from 'src/styles/fonts'
 import { Spacing } from 'src/styles/styles'
 

src/components/TokenBalance.tsx

@@ -210,7 +210,7 @@ export function AssetsTokenBalance({ showInfo }: { showInfo: boolean }) {
               hitSlop={variables.iconHitslop}
               testID="AssetsTokenBalance/Info"
             >
-              <InfoIcon color={Colors.primary} />
+              <InfoIcon color={Colors.accent} />
             </TouchableOpacity>
           )}
         </View>

src/components/TokenBottomSheet.tsx

@@ -22,7 +22,7 @@ import SearchInput from 'src/components/SearchInput'
 import NetworkMultiSelectBottomSheet from 'src/components/multiSelect/NetworkMultiSelectBottomSheet'
 import InfoIcon from 'src/icons/InfoIcon'
 import { NETWORK_NAMES } from 'src/shared/conts'
-import colors, { Colors } from 'src/styles/colors'
+import Colors from 'src/styles/colors'
 import { typeScale } from 'src/styles/fonts'
 import { Spacing } from 'src/styles/styles'
 import { TokenBalanceItem } from 'src/tokens/TokenBalanceItem'
@@ -399,7 +399,7 @@ const styles = StyleSheet.create({
     position: 'absolute',
     top: 0,
     padding: Spacing.Thick24,
-    backgroundColor: colors.white,
+    backgroundColor: Colors.white,
     width: '100%',
   },
   title: {

src/dapps/DappShortcutTransactionRequest.tsx

@@ -14,7 +14,7 @@ import { triggeredShortcutsStatusSelector } from 'src/positions/selectors'
 import { RawShortcutTransaction, denyExecuteShortcut, executeShortcut } from 'src/positions/slice'
 import { rawShortcutTransactionsToTransactionRequests } from 'src/positions/transactions'
 import { useDispatch, useSelector } from 'src/redux/hooks'
-import { Colors } from 'src/styles/colors'
+import Colors from 'src/styles/colors'
 import { Spacing } from 'src/styles/styles'
 import { feeCurrenciesSelector } from 'src/tokens/selectors'
 import { NetworkId } from 'src/transactions/types'
@@ -149,7 +149,7 @@ function Content({ rewardId }: { rewardId: string }) {
     return (
       <ActivityIndicator
         testID="DappShortcutTransactionRequest/Loading"
-        color={Colors.primary}
+        color={Colors.accent}
         style={styles.loader}
       />
     )