refactor(colors): replace gray5 with semantic counterparts (#6418)

### Description This PR replaces gray5, I checked with Kayla that this color is no longer needed. It is a dark grey that is in between the old gray3 and black, so the changes here are: 1. replace any subtitles and labels with textSecondary 2. remove some styles on text (i.e. let it default to textPrimary) where the hierarchy looks better if the text were textPrimary 3. default the Paste icon to textPrimary and set the color in the component that uses it ### Test plan n/a ### 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 16, 2025 · cec3ad5 · cec3ad5
1 parent 5db161b
commit cec3ad5
Show file tree

Hide file tree

Showing 25 changed files with 40 additions and 50 deletions.
diff --git a/src/backup/BackupPhraseContainer.tsx b/src/backup/BackupPhraseContainer.tsx
@@ -159,7 +159,7 @@ const styles = StyleSheet.create({
   },
   indexText: {
     ...typeScale.bodyMedium,
-    color: colors.gray5,
+    color: colors.textSecondary,
   },
   twelveWordTable: {
     flexDirection: 'row',

diff --git a/src/backup/BackupQuiz.tsx b/src/backup/BackupQuiz.tsx
@@ -386,7 +386,7 @@ const styles = StyleSheet.create({
     ...typeScale.bodySmall,
     textAlign: 'center',
     lineHeight: undefined,
-    color: colors.gray5,
+    color: colors.textPrimary,
   },
   mnemonicButtonsContainer: {
     marginTop: 24,

diff --git a/src/backup/__snapshots__/BackupPhraseContainer.test.tsx.snap b/src/backup/__snapshots__/BackupPhraseContainer.test.tsx.snap
@@ -149,7 +149,7 @@ exports[`BackupPhraseContainer renders correctly for readonly backup 12-word phr
           adjustsFontSizeToFit={true}
           style={
             {
-              "color": "#505050",
+              "color": "#757575",
               "fontFamily": "Inter-Regular",
               "fontSize": 16,
               "lineHeight": 24,
@@ -192,7 +192,7 @@ exports[`BackupPhraseContainer renders correctly for readonly backup 12-word phr
           adjustsFontSizeToFit={true}
           style={
             {
-              "color": "#505050",
+              "color": "#757575",
               "fontFamily": "Inter-Regular",
               "fontSize": 16,
               "lineHeight": 24,
@@ -235,7 +235,7 @@ exports[`BackupPhraseContainer renders correctly for readonly backup 12-word phr
           adjustsFontSizeToFit={true}
           style={
             {
-              "color": "#505050",
+              "color": "#757575",
               "fontFamily": "Inter-Regular",
               "fontSize": 16,
               "lineHeight": 24,
@@ -278,7 +278,7 @@ exports[`BackupPhraseContainer renders correctly for readonly backup 12-word phr
           adjustsFontSizeToFit={true}
           style={
             {
-              "color": "#505050",
+              "color": "#757575",
               "fontFamily": "Inter-Regular",
               "fontSize": 16,
               "lineHeight": 24,
@@ -321,7 +321,7 @@ exports[`BackupPhraseContainer renders correctly for readonly backup 12-word phr
           adjustsFontSizeToFit={true}
           style={
             {
-              "color": "#505050",
+              "color": "#757575",
               "fontFamily": "Inter-Regular",
               "fontSize": 16,
               "lineHeight": 24,
@@ -364,7 +364,7 @@ exports[`BackupPhraseContainer renders correctly for readonly backup 12-word phr
           adjustsFontSizeToFit={true}
           style={
             {
-              "color": "#505050",
+              "color": "#757575",
               "fontFamily": "Inter-Regular",
               "fontSize": 16,
               "lineHeight": 24,
@@ -407,7 +407,7 @@ exports[`BackupPhraseContainer renders correctly for readonly backup 12-word phr
           adjustsFontSizeToFit={true}
           style={
             {
-              "color": "#505050",
+              "color": "#757575",
               "fontFamily": "Inter-Regular",
               "fontSize": 16,
               "lineHeight": 24,
@@ -450,7 +450,7 @@ exports[`BackupPhraseContainer renders correctly for readonly backup 12-word phr
           adjustsFontSizeToFit={true}
           style={
             {
-              "color": "#505050",
+              "color": "#757575",
               "fontFamily": "Inter-Regular",
               "fontSize": 16,
               "lineHeight": 24,
@@ -493,7 +493,7 @@ exports[`BackupPhraseContainer renders correctly for readonly backup 12-word phr
           adjustsFontSizeToFit={true}
           style={
             {
-              "color": "#505050",
+              "color": "#757575",
               "fontFamily": "Inter-Regular",
               "fontSize": 16,
               "lineHeight": 24,
@@ -536,7 +536,7 @@ exports[`BackupPhraseContainer renders correctly for readonly backup 12-word phr
           adjustsFontSizeToFit={true}
           style={
             {
-              "color": "#505050",
+              "color": "#757575",
               "fontFamily": "Inter-Regular",
               "fontSize": 16,
               "lineHeight": 24,
@@ -579,7 +579,7 @@ exports[`BackupPhraseContainer renders correctly for readonly backup 12-word phr
           adjustsFontSizeToFit={true}
           style={
             {
-              "color": "#505050",
+              "color": "#757575",
               "fontFamily": "Inter-Regular",
               "fontSize": 16,
               "lineHeight": 24,
@@ -622,7 +622,7 @@ exports[`BackupPhraseContainer renders correctly for readonly backup 12-word phr
           adjustsFontSizeToFit={true}
           style={
             {
-              "color": "#505050",
+              "color": "#757575",
               "fontFamily": "Inter-Regular",
               "fontSize": 16,
               "lineHeight": 24,

diff --git a/src/celoNews/CeloNewsFeed.tsx b/src/celoNews/CeloNewsFeed.tsx
@@ -149,7 +149,7 @@ const styles = StyleSheet.create({
   },
   headerDescription: {
     ...typeScale.bodySmall,
-    color: colors.gray5,
+    color: colors.textSecondary,
     marginTop: Spacing.Smallest8,
   },
   readMoreButton: {

diff --git a/src/celoNews/CeloNewsFeedItem.tsx b/src/celoNews/CeloNewsFeedItem.tsx
@@ -97,7 +97,7 @@ const styles = StyleSheet.create({
     ...typeScale.bodySmall,
     fontSize: 13,
     lineHeight: 16,
-    color: colors.gray5,
+    color: colors.textSecondary,
     marginLeft: 4,
   },
   image: {

diff --git a/src/components/CodeRow.tsx b/src/components/CodeRow.tsx
@@ -152,7 +152,7 @@ const styles = StyleSheet.create({
   codeValue: {
     ...typeScale.bodyMedium,
     fontSize: 15,
-    color: colors.gray5,
+    color: colors.textSecondary,
   },
 })
 

diff --git a/src/components/OnboardingCard.tsx b/src/components/OnboardingCard.tsx
@@ -54,7 +54,7 @@ const styles = StyleSheet.create({
   },
   subtitle: {
     ...typeScale.bodyXSmall,
-    color: Colors.gray5,
+    color: Colors.textSecondary,
   },
 })
 

diff --git a/src/components/SmallButton.tsx b/src/components/SmallButton.tsx
@@ -80,7 +80,7 @@ const styles = StyleSheet.create({
     ...typeScale.labelMedium,
     fontSize: 13,
     lineHeight: 20,
-    color: colors.gray5,
+    color: colors.textSecondary,
     textAlign: 'center',
   },
   textPadding: {

diff --git a/src/components/TextInput.tsx b/src/components/TextInput.tsx
@@ -93,7 +93,7 @@ export class CTextInput extends React.Component<Props, State> {
             onPress={this.onClear}
             solid={true}
             size={20}
-            activeColor={Colors.gray5}
+            activeColor={Colors.textSecondary}
             inactiveColor={Colors.gray1}
           />
         )}

diff --git a/src/components/WithTextInputPasteAware.tsx b/src/components/WithTextInputPasteAware.tsx
@@ -24,7 +24,7 @@ export default function withTextInputPasteAware<P extends TextInputProps>(
               onPress={onPressPaste}
               hitSlop={iconHitslop}
             >
-              <Paste />
+              <Paste color={Colors.textSecondary} />
             </TouchableDefault>
           )}
         </View>

diff --git a/src/components/__snapshots__/CodeRow.test.tsx.snap b/src/components/__snapshots__/CodeRow.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`CodeRow renders correctly for all CodeRowStatus states 1`] = `
   <Text
     style={
       {
-        "color": "#505050",
+        "color": "#757575",
         "fontFamily": "Inter-Regular",
         "fontSize": 15,
         "lineHeight": 24,
@@ -98,7 +98,7 @@ exports[`CodeRow renders correctly for all CodeRowStatus states 3`] = `
   <Text
     style={
       {
-        "color": "#505050",
+        "color": "#757575",
         "fontFamily": "Inter-Regular",
         "fontSize": 15,
         "lineHeight": 24,
@@ -141,7 +141,7 @@ exports[`CodeRow renders correctly for all CodeRowStatus states 4`] = `
     numberOfLines={1}
     style={
       {
-        "color": "#505050",
+        "color": "#757575",
         "fontFamily": "Inter-Regular",
         "fontSize": 15,
         "lineHeight": 24,
@@ -171,7 +171,7 @@ exports[`CodeRow renders correctly for all CodeRowStatus states 5`] = `
     numberOfLines={1}
     style={
       {
-        "color": "#505050",
+        "color": "#757575",
         "fontFamily": "Inter-Regular",
         "fontSize": 15,
         "lineHeight": 24,

diff --git a/src/dappsExplorer/NoResults.tsx b/src/dappsExplorer/NoResults.tsx
@@ -105,7 +105,7 @@ const styles = StyleSheet.create({
   },
   filterAppliedText: {
     ...typeScale.labelSmall,
-    color: Colors.gray5,
+    color: Colors.textSecondary,
     paddingRight: 4,
   },
   removeFilterTouchableContainer: {

diff --git a/src/fiatExchanges/WithdrawSpend.tsx b/src/fiatExchanges/WithdrawSpend.tsx
@@ -130,7 +130,7 @@ const styles = StyleSheet.create({
   },
   moreWays: {
     ...typeScale.bodyMedium,
-    color: colors.gray5,
+    color: colors.textSecondary,
     margin: variables.contentPadding,
   },
   fundingOptionsLink: {

diff --git a/src/fiatconnect/KycLanding.tsx b/src/fiatconnect/KycLanding.tsx
@@ -235,7 +235,7 @@ const styles = StyleSheet.create({
     marginHorizontal: 24,
   },
   disclaimer: {
-    color: Colors.gray5,
+    color: Colors.textSecondary,
     textAlign: 'left',
     marginLeft: 11,
     fontSize: 13,

diff --git a/src/icons/Paste.tsx b/src/icons/Paste.tsx
@@ -12,17 +12,12 @@ export default class Paste extends React.PureComponent<Props> {
   static defaultProps = {
     width: 28,
     height: 28,
-    color: colors.gray5,
+    color: colors.textPrimary,
   }
 
   render() {
     return (
-      <Svg
-        height={this.props.height}
-        width={this.props.width}
-        viewBox="0 0 32 32"
-        xmlns="http://www.w3.org/2000/svg"
-      >
+      <Svg height={this.props.height} width={this.props.width} viewBox="0 0 32 32">
         <Path
           d="M10.5 21.5V22.5H11.5V21.5H10.5ZM21.5 10.5V11.5H22.5V10.5H21.5ZM6.5 16.5V14.5H4.5V16.5H6.5ZM6.5 12.5V10.5H4.5V12.5H6.5ZM6.5 10.5C6.5 9.76963 6.69484 9.08781 7.0347 8.50041L5.30358 7.49879C4.79231 8.38244 4.5 9.4086 4.5 10.5H6.5ZM8.50041 7.0347C9.08781 6.69484 9.76963 6.5 10.5 6.5V4.5C9.4086 4.5 8.38244 4.79231 7.4988 5.30358L8.50041 7.0347ZM10.5 6.5H12.5V4.5H10.5V6.5ZM14.5 6.5H16.5V4.5H14.5V6.5ZM16.5 6.5C17.2304 6.5 17.9122 6.69484 18.4996 7.0347L19.5012 5.30358C18.6176 4.79231 17.5914 4.5 16.5 4.5V6.5ZM19.9653 8.50041C20.3052 9.08781 20.5 9.76963 20.5 10.5H22.5C22.5 9.4086 22.2077 8.38244 21.6964 7.4988L19.9653 8.50041ZM21.5 9.5H19.5V11.5H21.5V9.5ZM17.5 9.5H15.5V11.5H17.5V9.5ZM15.5 9.5C14.4086 9.5 13.3824 9.79231 12.4988 10.3036L13.5004 12.0347C14.0878 11.6948 14.7696 11.5 15.5 11.5V9.5ZM10.3036 12.4988C9.79231 13.3824 9.5 14.4086 9.5 15.5H11.5C11.5 14.7696 11.6948 14.0878 12.0347 13.5004L10.3036 12.4988ZM9.5 15.5V17.5H11.5V15.5H9.5ZM9.5 19.5V21.5H11.5V19.5H9.5ZM10.5 20.5C9.76963 20.5 9.08781 20.3052 8.50041 19.9653L7.49879 21.6964C8.38244 22.2077 9.4086 22.5 10.5 22.5V20.5ZM7.0347 18.4996C6.69484 17.9122 6.5 17.2304 6.5 16.5H4.5C4.5 17.5914 4.79231 18.6176 5.30358 19.5012L7.0347 18.4996Z"
           fill={this.props.color}

diff --git a/src/invite/InviteModal.tsx b/src/invite/InviteModal.tsx
@@ -114,7 +114,7 @@ const styles = StyleSheet.create({
   },
   helpText: {
     ...typeScale.bodyXSmall,
-    color: colors.gray5,
+    color: colors.textSecondary,
     textAlign: 'center',
   },
   helpLink: {

diff --git a/src/onboarding/registration/ImportSelect.tsx b/src/onboarding/registration/ImportSelect.tsx
@@ -69,7 +69,7 @@ export default function ImportSelect({ navigation }: Props) {
         <TopBarTextButtonOnboarding
           title={t('cancel')}
           onPress={handleNavigateBack}
-          titleStyle={{ color: colors.gray5 }}
+          titleStyle={{ color: colors.navigationTopSecondary }}
         />
       ),
       headerStyle: {

diff --git a/src/qrcode/QRCode.tsx b/src/qrcode/QRCode.tsx
@@ -176,14 +176,14 @@ const styles = StyleSheet.create({
   },
   address: {
     ...typeScale.bodyMedium,
-    color: colors.gray5,
+    color: colors.textSecondary,
     marginHorizontal: variables.width / 5,
     marginBottom: 8,
     textAlign: 'center',
   },
   exchangeText: {
     ...typeScale.bodyMedium,
-    color: colors.gray5,
+    color: colors.textSecondary,
     textAlign: 'center',
   },
 })
diff --git a/src/qrcode/QRScanner.tsx b/src/qrcode/QRScanner.tsx
@@ -180,6 +180,6 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
   },
   cancelButton: {
-    color: colors.gray5,
+    color: colors.textSecondary,
   },
 })
diff --git a/src/send/SendConfirmation.tsx b/src/send/SendConfirmation.tsx
@@ -273,7 +273,7 @@ const styles = StyleSheet.create({
   },
   address: {
     ...typeScale.labelSmall,
-    color: colors.gray5,
+    color: colors.textSecondary,
     paddingRight: 4,
   },
   amount: {
@@ -282,7 +282,7 @@ const styles = StyleSheet.create({
   },
   amountSubscript: {
     ...typeScale.bodyMedium,
-    color: colors.gray5,
+    color: colors.textSecondary,
     paddingBottom: 16,
   },
   subHeading: {

diff --git a/src/send/SendSelectRecipient.tsx b/src/send/SendSelectRecipient.tsx
@@ -117,7 +117,6 @@ const getStartedStyles = StyleSheet.create({
   },
   title: {
     ...typeScale.labelMedium,
-    color: colors.gray5,
   },
   optionWrapper: {
     flexDirection: 'row',
@@ -135,7 +134,6 @@ const getStartedStyles = StyleSheet.create({
   },
   optionTitle: {
     ...typeScale.labelSmall,
-    color: colors.gray5,
     paddingBottom: Spacing.Tiny4,
   },
   optionSubtitle: {

diff --git a/src/send/__snapshots__/SendConfirmation.test.tsx.snap b/src/send/__snapshots__/SendConfirmation.test.tsx.snap
@@ -262,7 +262,7 @@ exports[`SendConfirmation renders correctly 1`] = `
             <Text
               style={
                 {
-                  "color": "#505050",
+                  "color": "#757575",
                   "fontFamily": "Inter-Regular",
                   "fontSize": 16,
                   "lineHeight": 24,

diff --git a/src/styles/colors.tsx b/src/styles/colors.tsx
@@ -39,8 +39,6 @@ enum Colors {
   gradientBorderLeft = '#26d98a',
   gradientBorderRight = '#ffd52c',
 
-  /** @deprecated */
-  gray5 = '#505050',
   /** @deprecated */
   gray2 = '#E6E6E6',
   /** @deprecated */

diff --git a/src/tokens/AssetList.tsx b/src/tokens/AssetList.tsx
@@ -338,7 +338,6 @@ const styles = StyleSheet.create({
   },
   positionSectionHeaderText: {
     ...typeScale.labelXXSmall,
-    color: Colors.gray5,
   },
   nftsPairingContainer: {
     flexDirection: 'row',

diff --git a/src/transactions/UserSection.tsx b/src/transactions/UserSection.tsx
@@ -117,7 +117,7 @@ const styles = StyleSheet.create({
   },
   addressHasChanged: {
     ...typeScale.bodySmall,
-    color: colors.gray5,
+    color: colors.textSecondary,
     marginBottom: 8,
   },
   accountBox: {
@@ -128,6 +128,6 @@ const styles = StyleSheet.create({
   },
   accountLabel: {
     ...typeScale.labelSemiBoldSmall,
-    color: colors.gray5,
+    color: colors.textSecondary,
   },
 })