refactor(colors): deprecate literal colors, add semantic colors to re…

…place 'black' (#6400) ### Description This PR removes `Colors.black` and replaces the color with semantic variables that should make it easier to customise colors in the app. 1. add `Colors.textPrimary` to `typeScale` and remove any component styles that are styling text to black. Unfortunately this adds a lot of updates to the snapshot tests :( 2. use `Colors.textPrimary` as default icon color (since often icons are displayed alongside text, it's hard to imagine them needing to have different defaults) 3. add top and bottom navigation colors to any styles that were set to black for navigation icons / text 4. use `Colors.backgroundInverse` for styles related to background colors (and borders that were intended to blend in with background, e.g. filter chips) 5. use `Colors.shadow` for the one place that declares shadows 6. rename "primary" to "buttonPrimary" since this is what it is used for. I did a working session with Kayla to finalise these changes ✅ ### Test plan There should be no user facing changes ### Related issues - Related to RET-1293 ### 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)
valora-inc · Jan 15, 2025 · ffd0eaf · ffd0eaf
1 parent e81d8f2
commit ffd0eaf
Show file tree

Hide file tree

Showing 177 changed files with 417 additions and 338 deletions.
diff --git a/src/account/Education.tsx b/src/account/Education.tsx
@@ -123,7 +123,7 @@ const Education = (props: Props) => {
         <TopBarIconButton
           testID={`Education/${currentIndex === 0 ? 'Close' : 'Back'}Icon`}
           onPress={goBack}
-          icon={currentIndex === 0 ? <Times /> : <BackChevron color={colors.black} />}
+          icon={currentIndex === 0 ? <Times /> : <BackChevron color={colors.navigationTop} />}
         />
       </View>
       <View style={styles.container}>

diff --git a/src/account/Profile.tsx b/src/account/Profile.tsx
@@ -6,24 +6,24 @@ import { SafeAreaView } from 'react-native-safe-area-context'
 import { saveName } from 'src/account/actions'
 import { nameSelector } from 'src/account/selectors'
 import { showError, showMessage } from 'src/alert/actions'
-import { SettingsEvents } from 'src/analytics/Events'
 import AppAnalytics from 'src/analytics/AppAnalytics'
+import { SettingsEvents } from 'src/analytics/Events'
 import { ErrorMessages } from 'src/app/ErrorMessages'
+import BackButton from 'src/components/BackButton'
 import Button, { BtnSizes, BtnTypes } from 'src/components/Button'
+import ContactCircleSelf from 'src/components/ContactCircleSelf'
 import KeyboardAwareScrollView from 'src/components/KeyboardAwareScrollView'
 import KeyboardSpacer from 'src/components/KeyboardSpacer'
+import TextButton from 'src/components/TextButton'
 import TextInput from 'src/components/TextInput'
 import { generateRandomUsername } from 'src/nameGenerator'
 import { emptyHeader } from 'src/navigator/Headers'
 import { Screens } from 'src/navigator/Screens'
 import { StackParamList } from 'src/navigator/types'
-import ContactCircleSelf from 'src/components/ContactCircleSelf'
 import { useDispatch, useSelector } from 'src/redux/hooks'
 import colors from 'src/styles/colors'
 import { typeScale } from 'src/styles/fonts'
 import { Spacing } from 'src/styles/styles'
-import BackButton from 'src/components/BackButton'
-import TextButton from 'src/components/TextButton'
 
 type Props = NativeStackScreenProps<StackParamList, Screens.Profile>
 
@@ -133,7 +133,6 @@ const styles = StyleSheet.create({
   },
   generateButton: {
     ...typeScale.labelSemiBoldSmall,
-    color: colors.black,
     marginTop: Spacing.Thick24,
   },
   saveButton: {

diff --git a/src/account/SupportContact.tsx b/src/account/SupportContact.tsx
@@ -233,7 +233,7 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     borderWidth: 1,
     marginBottom: 16,
-    color: colors.black,
+    color: colors.textPrimary,
     height: 80,
     maxHeight: 150,
   },
@@ -246,7 +246,7 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     borderWidth: 1,
     marginBottom: 16,
-    color: colors.black,
+    color: colors.textPrimary,
     maxHeight: 50,
   },
   headerText: {

diff --git a/src/account/__snapshots__/AccountKeyEducation.test.tsx.snap b/src/account/__snapshots__/AccountKeyEducation.test.tsx.snap
@@ -161,6 +161,7 @@ exports[`AccountKeyEducation renders correctly 1`] = `
               <Text
                 style={
                   {
+                    "color": "#2E3338",
                     "fontFamily": "Inter-Bold",
                     "fontSize": 20,
                     "lineHeight": 28,
@@ -174,6 +175,7 @@ exports[`AccountKeyEducation renders correctly 1`] = `
               <Text
                 style={
                   {
+                    "color": "#2E3338",
                     "fontFamily": "Inter-Regular",
                     "fontSize": 16,
                     "lineHeight": 24,
@@ -231,6 +233,7 @@ exports[`AccountKeyEducation renders correctly 1`] = `
               <Text
                 style={
                   {
+                    "color": "#2E3338",
                     "fontFamily": "Inter-Bold",
                     "fontSize": 20,
                     "lineHeight": 28,
@@ -244,6 +247,7 @@ exports[`AccountKeyEducation renders correctly 1`] = `
               <Text
                 style={
                   {
+                    "color": "#2E3338",
                     "fontFamily": "Inter-Regular",
                     "fontSize": 16,
                     "lineHeight": 24,
@@ -301,6 +305,7 @@ exports[`AccountKeyEducation renders correctly 1`] = `
               <Text
                 style={
                   {
+                    "color": "#2E3338",
                     "fontFamily": "Inter-Bold",
                     "fontSize": 20,
                     "lineHeight": 28,
@@ -314,6 +319,7 @@ exports[`AccountKeyEducation renders correctly 1`] = `
               <Text
                 style={
                   {
+                    "color": "#2E3338",
                     "fontFamily": "Inter-Regular",
                     "fontSize": 16,
                     "lineHeight": 24,
@@ -371,6 +377,7 @@ exports[`AccountKeyEducation renders correctly 1`] = `
               <Text
                 style={
                   {
+                    "color": "#2E3338",
                     "fontFamily": "Inter-Bold",
                     "fontSize": 20,
                     "lineHeight": 28,
@@ -384,6 +391,7 @@ exports[`AccountKeyEducation renders correctly 1`] = `
               <Text
                 style={
                   {
+                    "color": "#2E3338",
                     "fontFamily": "Inter-Regular",
                     "fontSize": 16,
                     "lineHeight": 24,

diff --git a/src/account/__snapshots__/Education.test.tsx.snap b/src/account/__snapshots__/Education.test.tsx.snap
@@ -147,6 +147,7 @@ exports[`Education renders correctly 1`] = `
               <Text
                 style={
                   {
+                    "color": "#2E3338",
                     "fontFamily": "Inter-Bold",
                     "fontSize": 20,
                     "lineHeight": 28,
@@ -160,6 +161,7 @@ exports[`Education renders correctly 1`] = `
               <Text
                 style={
                   {
+                    "color": "#2E3338",
                     "fontFamily": "Inter-Regular",
                     "fontSize": 16,
                     "lineHeight": 24,

diff --git a/src/account/__snapshots__/GoldEducation.test.tsx.snap b/src/account/__snapshots__/GoldEducation.test.tsx.snap
@@ -161,6 +161,7 @@ exports[`renders correctly 1`] = `
               <Text
                 style={
                   {
+                    "color": "#2E3338",
                     "fontFamily": "Inter-Bold",
                     "fontSize": 20,
                     "lineHeight": 28,
@@ -174,6 +175,7 @@ exports[`renders correctly 1`] = `
               <Text
                 style={
                   {
+                    "color": "#2E3338",
                     "fontFamily": "Inter-Regular",
                     "fontSize": 16,
                     "lineHeight": 24,
@@ -231,6 +233,7 @@ exports[`renders correctly 1`] = `
               <Text
                 style={
                   {
+                    "color": "#2E3338",
                     "fontFamily": "Inter-Bold",
                     "fontSize": 20,
                     "lineHeight": 28,
@@ -244,6 +247,7 @@ exports[`renders correctly 1`] = `
               <Text
                 style={
                   {
+                    "color": "#2E3338",
                     "fontFamily": "Inter-Regular",
                     "fontSize": 16,
                     "lineHeight": 24,
@@ -301,6 +305,7 @@ exports[`renders correctly 1`] = `
               <Text
                 style={
                   {
+                    "color": "#2E3338",
                     "fontFamily": "Inter-Bold",
                     "fontSize": 20,
                     "lineHeight": 28,
@@ -314,6 +319,7 @@ exports[`renders correctly 1`] = `
               <Text
                 style={
                   {
+                    "color": "#2E3338",
                     "fontFamily": "Inter-Regular",
                     "fontSize": 16,
                     "lineHeight": 24,
@@ -371,6 +377,7 @@ exports[`renders correctly 1`] = `
               <Text
                 style={
                   {
+                    "color": "#2E3338",
                     "fontFamily": "Inter-Bold",
                     "fontSize": 20,
                     "lineHeight": 28,
@@ -384,6 +391,7 @@ exports[`renders correctly 1`] = `
               <Text
                 style={
                   {
+                    "color": "#2E3338",
                     "fontFamily": "Inter-Regular",
                     "fontSize": 16,
                     "lineHeight": 24,

diff --git a/src/app/DebugImages.tsx b/src/app/DebugImages.tsx
@@ -21,7 +21,7 @@ const IconItem = ({ Component, fileName }: { Component: React.ElementType; fileN
   return (
     <View style={styles.itemContainer}>
       {/* Not all icons have the same props, we do our best here to set consistent size and color */}
-      <Component height={ICON_SIZE} width={ICON_SIZE} size={ICON_SIZE} color={Colors.black} />
+      <Component height={ICON_SIZE} width={ICON_SIZE} size={ICON_SIZE} color={Colors.textPrimary} />
       <Text>{fileName.split('.tsx')[0].slice(2)}</Text>
     </View>
   )

diff --git a/src/app/__snapshots__/ErrorScreen.test.tsx.snap b/src/app/__snapshots__/ErrorScreen.test.tsx.snap
@@ -35,6 +35,7 @@ exports[`ErrorScreen with errorMessage renders correctly 1`] = `
     <Text
       style={
         {
+          "color": "#2E3338",
           "fontFamily": "Inter-Bold",
           "fontSize": 24,
           "lineHeight": 32,
@@ -46,6 +47,7 @@ exports[`ErrorScreen with errorMessage renders correctly 1`] = `
     <Text
       style={
         {
+          "color": "#2E3338",
           "fontFamily": "Inter-Bold",
           "fontSize": 20,
           "lineHeight": 28,
@@ -63,6 +65,7 @@ exports[`ErrorScreen with errorMessage renders correctly 1`] = `
         {
           "backgroundColor": "#F8F9F9",
           "borderRadius": 25,
+          "color": "#2E3338",
           "fontFamily": "Inter-Regular",
           "fontSize": 12,
           "lineHeight": 24,
@@ -211,6 +214,7 @@ exports[`ErrorScreen without errorMessage renders correctly 1`] = `
     <Text
       style={
         {
+          "color": "#2E3338",
           "fontFamily": "Inter-Bold",
           "fontSize": 24,
           "lineHeight": 32,
@@ -222,6 +226,7 @@ exports[`ErrorScreen without errorMessage renders correctly 1`] = `
     <Text
       style={
         {
+          "color": "#2E3338",
           "fontFamily": "Inter-Bold",
           "fontSize": 20,
           "lineHeight": 28,
@@ -239,6 +244,7 @@ exports[`ErrorScreen without errorMessage renders correctly 1`] = `
         {
           "backgroundColor": "#F8F9F9",
           "borderRadius": 25,
+          "color": "#2E3338",
           "fontFamily": "Inter-Regular",
           "fontSize": 12,
           "lineHeight": 24,

diff --git a/src/backup/BackupPhraseContainer.tsx b/src/backup/BackupPhraseContainer.tsx
@@ -174,7 +174,6 @@ const styles = StyleSheet.create({
   },
   wordText: {
     ...typeScale.labelSemiBoldSmall,
-    color: colors.black,
   },
   phraseContainer: {
     flexWrap: 'wrap',

diff --git a/src/backup/BackupQuiz.tsx b/src/backup/BackupQuiz.tsx
@@ -349,7 +349,6 @@ const styles = StyleSheet.create({
   bodyText: {
     marginTop: 20,
     ...typeScale.bodyMedium,
-    color: colors.black,
     textAlign: 'center',
   },
   bodyTextBold: {

diff --git a/src/backup/__snapshots__/BackupComplete.test.tsx.snap b/src/backup/__snapshots__/BackupComplete.test.tsx.snap
@@ -42,6 +42,7 @@ exports[`BackupComplete renders correctly 1`] = `
     <Text
       style={
         {
+          "color": "#2E3338",
           "fontFamily": "Inter-Bold",
           "fontSize": 24,
           "lineHeight": 32,

diff --git a/src/backup/__snapshots__/BackupPhrase.test.tsx.snap b/src/backup/__snapshots__/BackupPhrase.test.tsx.snap
@@ -234,6 +234,7 @@ exports[`BackupPhrase renders correctly with backup completed 1`] = `
             <Text
               style={
                 {
+                  "color": "#2E3338",
                   "fontFamily": "Inter-Bold",
                   "fontSize": 20,
                   "lineHeight": 28,
@@ -267,6 +268,7 @@ exports[`BackupPhrase renders correctly with backup completed 1`] = `
       <Text
         style={
           {
+            "color": "#2E3338",
             "fontFamily": "Inter-Regular",
             "fontSize": 16,
             "lineHeight": 24,
@@ -515,6 +517,7 @@ exports[`BackupPhrase renders correctly with backup not completed 1`] = `
             <Text
               style={
                 {
+                  "color": "#2E3338",
                   "fontFamily": "Inter-Bold",
                   "fontSize": 20,
                   "lineHeight": 28,
@@ -548,6 +551,7 @@ exports[`BackupPhrase renders correctly with backup not completed 1`] = `
       <Text
         style={
           {
+            "color": "#2E3338",
             "fontFamily": "Inter-Regular",
             "fontSize": 16,
             "lineHeight": 24,
@@ -586,6 +590,7 @@ exports[`BackupPhrase renders correctly with backup not completed 1`] = `
       onPress={[Function]}
       style={
         {
+          "color": "#2E3338",
           "flex": 1,
           "fontFamily": "Inter-Regular",
           "fontSize": 16,
@@ -932,6 +937,7 @@ exports[`BackupPhrase still renders when mnemonic doesnt show up 1`] = `
             <Text
               style={
                 {
+                  "color": "#2E3338",
                   "fontFamily": "Inter-Bold",
                   "fontSize": 20,
                   "lineHeight": 28,
@@ -965,6 +971,7 @@ exports[`BackupPhrase still renders when mnemonic doesnt show up 1`] = `
       <Text
         style={
           {
+            "color": "#2E3338",
             "fontFamily": "Inter-Regular",
             "fontSize": 16,
             "lineHeight": 24,

diff --git a/src/backup/__snapshots__/BackupPhraseContainer.test.tsx.snap b/src/backup/__snapshots__/BackupPhraseContainer.test.tsx.snap
@@ -21,6 +21,7 @@ exports[`BackupPhraseContainer renders correctly for input backup phrase 1`] = `
       <Text
         style={
           {
+            "color": "#2E3338",
             "fontFamily": "Inter-Bold",
             "fontSize": 20,
             "lineHeight": 28,
@@ -51,6 +52,7 @@ exports[`BackupPhraseContainer renders correctly for input backup phrase 1`] = `
       style={
         [
           {
+            "color": "#2E3338",
             "fontFamily": "Inter-Regular",
             "fontSize": 16,
             "lineHeight": 24,
@@ -89,6 +91,7 @@ exports[`BackupPhraseContainer renders correctly for readonly backup 12-word phr
       <Text
         style={
           {
+            "color": "#2E3338",
             "fontFamily": "Inter-Bold",
             "fontSize": 20,
             "lineHeight": 28,
@@ -669,6 +672,7 @@ exports[`BackupPhraseContainer renders correctly for readonly backup 24-word phr
       <Text
         style={
           {
+            "color": "#2E3338",
             "fontFamily": "Inter-Bold",
             "fontSize": 20,
             "lineHeight": 28,
@@ -701,6 +705,7 @@ exports[`BackupPhraseContainer renders correctly for readonly backup 24-word phr
     <Text
       style={
         {
+          "color": "#2E3338",
           "fontFamily": "Inter-Regular",
           "fontSize": 22,
           "lineHeight": 32,

diff --git a/src/backup/__snapshots__/BackupQuiz.test.tsx.snap b/src/backup/__snapshots__/BackupQuiz.test.tsx.snap
@@ -875,6 +875,7 @@ exports[`BackupQuiz renders correctly 1`] = `
           <Text
             style={
               {
+                "color": "#2E3338",
                 "fontFamily": "Inter-Medium",
                 "fontSize": 16,
                 "lineHeight": 24,