refactor(colors): replace enum with object and type (#6456)

### Description

This PR changes the `colors` from enum to object. The usage is still the
same, but the object cannot be referenced as a type in the same way as
an enum can. This change facilitates being able to overwrite the default
colors with custom colors via config, plus there are benefits of moving
away from enums (e.g.
[here](https://www.totaltypescript.com/erasable-syntax-only)).

There are a lot of changes but they are repetitve, the key changes are:
1. in the colors file, Colors is now an object
2. in the colors file, also export a `ColorValue` type
3. in all files that were using `Colors` or `colors` as a type, now use
`ColorValue`

### Test plan

n/a

### Related issues

- Related to RET-1280

### Backwards compatibility

Y

### Network scalability

If a new NetworkId and/or Network are added in the future, the changes
in this PR will:

- [ ] Continue to work without code changes, OR trigger a compilation
error (guaranteeing we find it when a new network is added)

src/components/Button.tsx

@@ -2,7 +2,7 @@ import { debounce } from 'lodash'
 import React, { ReactElement, ReactNode, useCallback } from 'react'
 import { ActivityIndicator, StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native'
 import Touchable from 'src/components/Touchable'
-import Colors from 'src/styles/colors'
+import Colors, { ColorValue } from 'src/styles/colors'
 import { typeScale } from 'src/styles/fonts'
 import { vibrateInformative } from 'src/styles/hapticFeedback'
 
@@ -182,9 +182,9 @@ function getColors(type: BtnTypes, disabled: boolean | undefined) {
 
 function getStyle(
   size: BtnSizes | undefined,
-  backgroundColor: Colors,
+  backgroundColor: ColorValue,
   opacity: number | undefined,
-  borderColor: Colors | undefined,
+  borderColor: ColorValue | undefined,
   iconPositionLeft: boolean
 ) {
   const borderStyles = borderColor

src/components/ContactCircle.tsx

@@ -2,29 +2,29 @@ import * as React from 'react'
 import { Image, StyleSheet, Text, View, ViewStyle } from 'react-native'
 import User from 'src/icons/User'
 import { Recipient } from 'src/recipients/recipient'
-import Colors from 'src/styles/colors'
+import { ColorValue } from 'src/styles/colors'
 import { typeScale } from 'src/styles/fonts'
 
 interface Props {
   style?: ViewStyle
   size?: number
   recipient: Recipient
-  backgroundColor?: Colors
-  foregroundColor?: Colors
-  borderColor?: Colors
+  backgroundColor?: ColorValue
+  foregroundColor?: ColorValue
+  borderColor?: ColorValue
   DefaultIcon?: React.ComponentType<{
-    color?: Colors
-    backgroundColor?: Colors
+    color?: ColorValue
+    backgroundColor?: ColorValue
     size?: number
   }>
 }
 
 const DEFAULT_ICON_SIZE = 40
 
 const getAddressBackgroundColor = (address: string) =>
-  `hsl(${parseInt(address.substring(0, 5), 16) % 360}, 53%, 93%)` as Colors
+  `hsl(${parseInt(address.substring(0, 5), 16) % 360}, 53%, 93%)` as ColorValue
 const getAddressForegroundColor = (address: string) =>
-  `hsl(${parseInt(address.substring(0, 5), 16) % 360}, 67%, 24%)` as Colors
+  `hsl(${parseInt(address.substring(0, 5), 16) % 360}, 67%, 24%)` as ColorValue
 const getNameInitial = (name: string) => name.charAt(0).toLocaleUpperCase()
 
 function ContactCircle({

src/components/InLineNotification.tsx

@@ -3,7 +3,7 @@ import { GestureResponderEvent, StyleProp, StyleSheet, Text, View, ViewStyle } f
 import Touchable from 'src/components/Touchable'
 import AttentionIcon from 'src/icons/Attention'
 import Warning from 'src/icons/Warning'
-import Colors from 'src/styles/colors'
+import Colors, { ColorValue } from 'src/styles/colors'
 import { typeScale } from 'src/styles/fonts'
 import { Spacing } from 'src/styles/styles'
 
@@ -30,8 +30,8 @@ export interface InLineNotificationProps {
 }
 
 interface CustomColors {
-  primary: Colors
-  secondary: Colors
+  primary: ColorValue
+  secondary: ColorValue
 }
 
 export function InLineNotification({
@@ -52,7 +52,7 @@ export function InLineNotification({
   const renderCtaLabel = (
     label?: string | null,
     onPress?: (event: GestureResponderEvent) => void,
-    color?: Colors
+    color?: ColorValue
   ) =>
     label &&
     onPress && (

src/components/PercentageIndicator.tsx

@@ -3,10 +3,10 @@ import React from 'react'
 import { StyleSheet, Text, TextStyle, View } from 'react-native'
 import DataDown from 'src/icons/DataDown'
 import DataUp from 'src/icons/DataUp'
-import Colors from 'src/styles/colors'
+import Colors, { ColorValue } from 'src/styles/colors'
 import { typeScale } from 'src/styles/fonts'
 
-type IconComponentType = React.ComponentType<{ color?: Colors; testID?: string }>
+type IconComponentType = React.ComponentType<{ color?: ColorValue; testID?: string }>
 
 interface Props {
   testID?: string
@@ -39,8 +39,7 @@ function PercentageIndicator({
   const percentageString = `${percentage.abs().toFixed(2)}%`
 
   let indicator: React.ReactElement | undefined
-  let color: Colors
-
+  let color: ColorValue
   if (comparison > 0) {
     color = Colors.accent
     indicator = <UpIcon color={color} testID={`${testID}:UpIndicator`} />

src/components/PhoneNumberWithFlag.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
-import Colors from 'src/styles/colors'
+import Colors, { ColorValue } from 'src/styles/colors'
 import { typeScale } from 'src/styles/fonts'
 import { getCountryEmoji } from 'src/utils/getCountryEmoji'
 import { parsePhoneNumber } from 'src/utils/phoneNumbers'
 
 interface Props {
   e164PhoneNumber: string
   defaultCountryCode?: string
-  textColor?: Colors
+  textColor?: ColorValue
 }
 
 export class PhoneNumberWithFlag extends React.PureComponent<Props> {

src/components/RowDivider.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
 import { StyleSheet, View } from 'react-native'
-import Colors from 'src/styles/colors'
+import Colors, { ColorValue } from 'src/styles/colors'
 import { Spacing } from 'src/styles/styles'
 
 export interface Props {
-  color?: Colors
+  color?: ColorValue
 }
 
 export default function RowDivider({ color = Colors.borderPrimary }: Props) {

src/earn/types.ts

@@ -1,5 +1,5 @@
 import { EarnPosition, Token } from 'src/positions/types'
-import Colors from 'src/styles/colors'
+import { ColorValue } from 'src/styles/colors'
 import { NetworkId } from 'src/transactions/types'
 import { SerializableTransactionRequest } from 'src/viem/preparedTransactionSerialization'
 import { Hash } from 'viem'
@@ -54,15 +54,15 @@ export interface BeforeDepositAction {
   name: BeforeDepositActionName
   title: string
   details: string
-  iconComponent: React.MemoExoticComponent<({ color }: { color?: Colors }) => JSX.Element>
+  iconComponent: React.MemoExoticComponent<({ color }: { color?: ColorValue }) => JSX.Element>
   onPress: () => void
 }
 
 export interface WithdrawAction {
   name: Extract<EarnActiveMode, 'withdraw' | 'claim-rewards' | 'exit'>
   title: string
   details: string
-  iconComponent: React.MemoExoticComponent<({ color }: { color?: Colors }) => JSX.Element>
+  iconComponent: React.MemoExoticComponent<({ color }: { color?: ColorValue }) => JSX.Element>
   onPress: () => void
 }
 

src/icons/Activity.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
-import colors from 'src/styles/colors'
+import colors, { ColorValue } from 'src/styles/colors'
 import Svg, { Path } from 'svgs'
 
 interface Props {
   size?: number
-  color?: colors
+  color?: ColorValue
 }
 
 function Activity({ color = colors.successPrimary, size = 24 }: Props) {

src/icons/ArrowDown.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
 import Svg, { Path } from 'react-native-svg'
-import Colors from 'src/styles/colors'
+import Colors, { ColorValue } from 'src/styles/colors'
 
 interface Props {
-  color?: Colors
+  color?: ColorValue
   size?: number
 }
 

src/icons/ArrowRightThick.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
 import Svg, { Path } from 'react-native-svg'
-import colors from 'src/styles/colors'
+import colors, { ColorValue } from 'src/styles/colors'
 
 interface Props {
-  color?: colors
+  color?: ColorValue
   size?: number
 }
 

src/icons/Attention.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react'
 import Svg, { Path } from 'react-native-svg'
-import Colors from 'src/styles/colors'
+import Colors, { ColorValue } from 'src/styles/colors'
 
 const AttentionIcon = ({
   color = Colors.warningPrimary,
   size = 16,
   testId,
 }: {
-  color?: Colors
+  color?: ColorValue
   size?: number
   testId?: string
 }) => (

src/icons/CheckBox.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react'
 import Svg, { Path } from 'react-native-svg'
-import Colors from 'src/styles/colors'
+import Colors, { ColorValue } from 'src/styles/colors'
 
 type Props = {
   checked: boolean
   testID?: string
-  checkedColor?: Colors
-  uncheckedColor?: Colors
+  checkedColor?: ColorValue
+  uncheckedColor?: ColorValue
 }
 
 const CheckBox = ({

src/icons/CircledIcon.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react'
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
-import colors from 'src/styles/colors'
+import colors, { ColorValue } from 'src/styles/colors'
 
 interface Props {
-  backgroundColor?: colors
+  backgroundColor?: ColorValue
   radius?: number
   style?: StyleProp<ViewStyle>
   children?: React.ReactNode
-  borderColor?: colors
+  borderColor?: ColorValue
 }
 
 export default function CircledIcon({

src/icons/CopyIcon.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
 import Svg, { Path } from 'react-native-svg'
-import Colors from 'src/styles/colors'
+import Colors, { ColorValue } from 'src/styles/colors'
 
-const CopyIcon = ({ color = Colors.accent }) => (
+const CopyIcon = ({ color = Colors.accent }: { color?: ColorValue }) => (
   <Svg width={16} height={18} fill="none">
     <Path
       d="M11.655 0H1.835C.936 0 .2.736.2 1.636v11.455h1.636V1.636h9.819V0Zm2.454 3.273h-9c-.9 0-1.636.736-1.636 1.636v11.455c0 .9.736 1.636 1.636 1.636h9c.9 0 1.636-.736 1.636-1.636V4.909c0-.9-.736-1.636-1.636-1.636Zm0 13.09h-9V4.91h9v11.455Z"

src/icons/CrossChainIndicator.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react'
 import Svg, { Circle, ClipPath, Defs, G, Path } from 'react-native-svg'
-import Colors from 'src/styles/colors'
+import Colors, { ColorValue } from 'src/styles/colors'
 
 interface Props {
   size?: number
-  backgroundColor?: Colors
-  color?: Colors
+  backgroundColor?: ColorValue
+  color?: ColorValue
 }
 
 function CrossChainIndicator({

src/icons/DataDown.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
 import Svg, { Path } from 'react-native-svg'
-import colors from 'src/styles/colors'
+import colors, { ColorValue } from 'src/styles/colors'
 
 interface Props {
-  color?: colors
+  color?: ColorValue
   testID?: string
 }
 

src/icons/DataUp.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
 import Svg, { Path } from 'react-native-svg'
-import colors from 'src/styles/colors'
+import colors, { ColorValue } from 'src/styles/colors'
 
 interface Props {
-  color?: colors
+  color?: ColorValue
   testID?: string
 }
 

src/icons/Exit.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
 import Svg, { Path } from 'react-native-svg'
-import Colors from 'src/styles/colors'
+import Colors, { ColorValue } from 'src/styles/colors'
 
 interface Props {
-  color?: Colors
+  color?: ColorValue
 }
 
 const Exit = ({ color = Colors.contentPrimary }: Props) => (

src/icons/EyeIcon.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
 import Svg, { Path } from 'react-native-svg'
-import Colors from 'src/styles/colors'
+import Colors, { ColorValue } from 'src/styles/colors'
 
 export interface Props {
   size?: number
-  color?: Colors
+  color?: ColorValue
 }
 
 function EyeIcon({ color, size }: Props) {

src/icons/HiddenEyeIcon.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
 import Svg, { ClipPath, Defs, G, Path } from 'react-native-svg'
-import Colors from 'src/styles/colors'
+import Colors, { ColorValue } from 'src/styles/colors'
 
 export interface Props {
   size?: number
-  color?: Colors
+  color?: ColorValue
 }
 
 function HiddenEyeIcon({ color = Colors.accent, size = 24 }: Props) {

src/icons/ImageErrorIcon.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
 import Svg, { Path } from 'react-native-svg'
-import colors from 'src/styles/colors'
+import colors, { ColorValue } from 'src/styles/colors'
 
 interface Props {
-  color?: colors | string
+  color?: ColorValue | string
   size?: number
   testID?: string
 }

src/icons/InfoIcon.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react'
 import { PixelRatio } from 'react-native'
 import Svg, { Circle, Path } from 'react-native-svg'
-import colors from 'src/styles/colors'
+import colors, { ColorValue } from 'src/styles/colors'
 
 interface Props {
   size?: number
-  color?: colors
+  color?: ColorValue
   scaledSize?: number
   testID?: string
 }

src/icons/LinkArrow.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
 import Svg, { Path } from 'react-native-svg'
-import Colors from 'src/styles/colors'
+import Colors, { ColorValue } from 'src/styles/colors'
 
 interface Props {
   size?: number
-  color?: Colors
+  color?: ColorValue
 }
 
 const LinkArrow = ({ color = Colors.textLink, size = 32 }: Props) => {

src/icons/MagicWand.tsx

@@ -1,8 +1,14 @@
 import * as React from 'react'
 import Svg, { Path } from 'react-native-svg'
-import Colors from 'src/styles/colors'
+import Colors, { ColorValue } from 'src/styles/colors'
 
-const MagicWand = ({ size = 24, color = Colors.successPrimary }) => (
+const MagicWand = ({
+  size = 24,
+  color = Colors.successPrimary,
+}: {
+  size?: number
+  color?: ColorValue
+}) => (
   <Svg width={size} height={size} viewBox="0 0 24 24">
     <Path
       fill={color}