From ef368b78d28649f0bdc466d3b6e4b4d33de60878 Mon Sep 17 00:00:00 2001
From: Dimitar Nestorov <dimitar.nestorov@callstack.com>
Date: Tue, 7 Feb 2023 13:48:09 +0200
Subject: [PATCH] refactor: avoid spreading in `Text` styles

---
 src/components/Typography/AnimatedText.tsx    |  4 +-
 src/components/Typography/Text.tsx            |  7 +-
 .../Appbar/__snapshots__/Appbar.test.tsx.snap |  2 +-
 .../__snapshots__/CheckboxItem.test.js.snap   |  8 +--
 .../RadioButtonItem.test.js.snap              |  8 +--
 .../__snapshots__/Text.test.tsx.snap          | 32 ++++-----
 .../__snapshots__/Banner.test.tsx.snap        |  8 +--
 .../BottomNavigation.test.tsx.snap            | 70 +++++++++----------
 .../__snapshots__/Button.test.tsx.snap        | 26 +++----
 .../__snapshots__/Chip.test.tsx.snap          | 12 ++--
 .../__snapshots__/DataTable.test.js.snap      |  2 +-
 .../__snapshots__/DrawerItem.test.js.snap     |  6 +-
 .../__tests__/__snapshots__/FAB.test.tsx.snap |  4 +-
 .../__snapshots__/ListItem.test.js.snap       |  2 +-
 .../__snapshots__/ListSection.test.js.snap    |  4 +-
 .../__snapshots__/Menu.test.tsx.snap          | 14 ++--
 .../__snapshots__/MenuItem.test.js.snap       | 10 +--
 .../SegmentedButton.test.js.snap              | 12 ++--
 .../__snapshots__/Snackbar.test.tsx.snap      |  6 +-
 19 files changed, 117 insertions(+), 120 deletions(-)

diff --git a/src/components/Typography/AnimatedText.tsx b/src/components/Typography/AnimatedText.tsx
index b1b36b596a..f662103ec9 100644
--- a/src/components/Typography/AnimatedText.tsx
+++ b/src/components/Typography/AnimatedText.tsx
@@ -56,9 +56,9 @@ function AnimatedText({
       <Animated.Text
         {...rest}
         style={[
-          { ...font, color: theme.colors.onSurface },
+          font,
           styles.text,
-          { writingDirection },
+          { writingDirection, color: theme.colors.onSurface },
           style,
         ]}
       />
diff --git a/src/components/Typography/Text.tsx b/src/components/Typography/Text.tsx
index a2357dd323..0a16760912 100644
--- a/src/components/Typography/Text.tsx
+++ b/src/components/Typography/Text.tsx
@@ -109,12 +109,9 @@ const Text = (
       <NativeText
         ref={root}
         style={[
-          {
-            ...font,
-            color: theme.colors.onSurface,
-          },
+          font,
           styles.text,
-          { writingDirection },
+          { writingDirection, color: theme.colors.onSurface },
           style,
         ]}
         {...rest}
diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
index bb2a5f0086..cbc2042333 100644
--- a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
+++ b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
@@ -741,7 +741,6 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
           style={
             Array [
               Object {
-                "color": "rgba(28, 27, 31, 1)",
                 "fontFamily": "System",
                 "fontSize": 22,
                 "fontWeight": "400",
@@ -752,6 +751,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
                 "textAlign": "left",
               },
               Object {
+                "color": "rgba(28, 27, 31, 1)",
                 "writingDirection": "ltr",
               },
               Array [
diff --git a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.js.snap b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.js.snap
index b3488c0c66..d3a87f0e3f 100644
--- a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.js.snap
+++ b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.js.snap
@@ -129,7 +129,6 @@ exports[`can render leading checkbox control 1`] = `
       style={
         Array [
           Object {
-            "color": "rgba(28, 27, 31, 1)",
             "fontFamily": "System",
             "fontSize": 16,
             "fontWeight": "400",
@@ -140,6 +139,7 @@ exports[`can render leading checkbox control 1`] = `
             "textAlign": "left",
           },
           Object {
+            "color": "rgba(28, 27, 31, 1)",
             "writingDirection": "ltr",
           },
           Array [
@@ -213,7 +213,6 @@ exports[`can render the Android checkbox on different platforms 1`] = `
       style={
         Array [
           Object {
-            "color": "rgba(28, 27, 31, 1)",
             "fontFamily": "System",
             "fontSize": 16,
             "fontWeight": "400",
@@ -224,6 +223,7 @@ exports[`can render the Android checkbox on different platforms 1`] = `
             "textAlign": "left",
           },
           Object {
+            "color": "rgba(28, 27, 31, 1)",
             "writingDirection": "ltr",
           },
           Array [
@@ -412,7 +412,6 @@ exports[`can render the iOS checkbox on different platforms 1`] = `
       style={
         Array [
           Object {
-            "color": "rgba(28, 27, 31, 1)",
             "fontFamily": "System",
             "fontSize": 16,
             "fontWeight": "400",
@@ -423,6 +422,7 @@ exports[`can render the iOS checkbox on different platforms 1`] = `
             "textAlign": "left",
           },
           Object {
+            "color": "rgba(28, 27, 31, 1)",
             "writingDirection": "ltr",
           },
           Array [
@@ -575,7 +575,6 @@ exports[`renders unchecked 1`] = `
       style={
         Array [
           Object {
-            "color": "rgba(28, 27, 31, 1)",
             "fontFamily": "System",
             "fontSize": 16,
             "fontWeight": "400",
@@ -586,6 +585,7 @@ exports[`renders unchecked 1`] = `
             "textAlign": "left",
           },
           Object {
+            "color": "rgba(28, 27, 31, 1)",
             "writingDirection": "ltr",
           },
           Array [
diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.js.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.js.snap
index d04fab9d5d..fdab86a0f4 100644
--- a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.js.snap
+++ b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonItem.test.js.snap
@@ -128,7 +128,6 @@ exports[`can render leading radio button control 1`] = `
       style={
         Array [
           Object {
-            "color": "rgba(28, 27, 31, 1)",
             "fontFamily": "System",
             "fontSize": 16,
             "fontWeight": "400",
@@ -139,6 +138,7 @@ exports[`can render leading radio button control 1`] = `
             "textAlign": "left",
           },
           Object {
+            "color": "rgba(28, 27, 31, 1)",
             "writingDirection": "ltr",
           },
           Array [
@@ -211,7 +211,6 @@ exports[`can render the Android radio button on different platforms 1`] = `
       style={
         Array [
           Object {
-            "color": "rgba(28, 27, 31, 1)",
             "fontFamily": "System",
             "fontSize": 16,
             "fontWeight": "400",
@@ -222,6 +221,7 @@ exports[`can render the Android radio button on different platforms 1`] = `
             "textAlign": "left",
           },
           Object {
+            "color": "rgba(28, 27, 31, 1)",
             "writingDirection": "ltr",
           },
           Array [
@@ -341,7 +341,6 @@ exports[`can render the iOS radio button on different platforms 1`] = `
       style={
         Array [
           Object {
-            "color": "rgba(28, 27, 31, 1)",
             "fontFamily": "System",
             "fontSize": 16,
             "fontWeight": "400",
@@ -352,6 +351,7 @@ exports[`can render the iOS radio button on different platforms 1`] = `
             "textAlign": "left",
           },
           Object {
+            "color": "rgba(28, 27, 31, 1)",
             "writingDirection": "ltr",
           },
           Array [
@@ -503,7 +503,6 @@ exports[`renders unchecked 1`] = `
       style={
         Array [
           Object {
-            "color": "rgba(28, 27, 31, 1)",
             "fontFamily": "System",
             "fontSize": 16,
             "fontWeight": "400",
@@ -514,6 +513,7 @@ exports[`renders unchecked 1`] = `
             "textAlign": "left",
           },
           Object {
+            "color": "rgba(28, 27, 31, 1)",
             "writingDirection": "ltr",
           },
           Array [
diff --git a/src/components/__tests__/Typography/__snapshots__/Text.test.tsx.snap b/src/components/__tests__/Typography/__snapshots__/Text.test.tsx.snap
index 79933c6847..66c0a85f98 100644
--- a/src/components/__tests__/Typography/__snapshots__/Text.test.tsx.snap
+++ b/src/components/__tests__/Typography/__snapshots__/Text.test.tsx.snap
@@ -6,7 +6,6 @@ Array [
     style={
       Array [
         Object {
-          "color": "rgba(28, 27, 31, 1)",
           "fontFamily": "System",
           "fontSize": 57,
           "fontWeight": "400",
@@ -17,6 +16,7 @@ Array [
           "textAlign": "left",
         },
         Object {
+          "color": "rgba(28, 27, 31, 1)",
           "writingDirection": "ltr",
         },
         undefined,
@@ -29,7 +29,6 @@ Array [
     style={
       Array [
         Object {
-          "color": "rgba(28, 27, 31, 1)",
           "fontFamily": "System",
           "fontSize": 45,
           "fontWeight": "400",
@@ -40,6 +39,7 @@ Array [
           "textAlign": "left",
         },
         Object {
+          "color": "rgba(28, 27, 31, 1)",
           "writingDirection": "ltr",
         },
         undefined,
@@ -52,7 +52,6 @@ Array [
     style={
       Array [
         Object {
-          "color": "rgba(28, 27, 31, 1)",
           "fontFamily": "System",
           "fontSize": 36,
           "fontWeight": "400",
@@ -63,6 +62,7 @@ Array [
           "textAlign": "left",
         },
         Object {
+          "color": "rgba(28, 27, 31, 1)",
           "writingDirection": "ltr",
         },
         undefined,
@@ -75,7 +75,6 @@ Array [
     style={
       Array [
         Object {
-          "color": "rgba(28, 27, 31, 1)",
           "fontFamily": "System",
           "fontSize": 32,
           "fontWeight": "400",
@@ -86,6 +85,7 @@ Array [
           "textAlign": "left",
         },
         Object {
+          "color": "rgba(28, 27, 31, 1)",
           "writingDirection": "ltr",
         },
         undefined,
@@ -98,7 +98,6 @@ Array [
     style={
       Array [
         Object {
-          "color": "rgba(28, 27, 31, 1)",
           "fontFamily": "System",
           "fontSize": 28,
           "fontWeight": "400",
@@ -109,6 +108,7 @@ Array [
           "textAlign": "left",
         },
         Object {
+          "color": "rgba(28, 27, 31, 1)",
           "writingDirection": "ltr",
         },
         undefined,
@@ -121,7 +121,6 @@ Array [
     style={
       Array [
         Object {
-          "color": "rgba(28, 27, 31, 1)",
           "fontFamily": "System",
           "fontSize": 24,
           "fontWeight": "400",
@@ -132,6 +131,7 @@ Array [
           "textAlign": "left",
         },
         Object {
+          "color": "rgba(28, 27, 31, 1)",
           "writingDirection": "ltr",
         },
         undefined,
@@ -144,7 +144,6 @@ Array [
     style={
       Array [
         Object {
-          "color": "rgba(28, 27, 31, 1)",
           "fontFamily": "System",
           "fontSize": 22,
           "fontWeight": "400",
@@ -155,6 +154,7 @@ Array [
           "textAlign": "left",
         },
         Object {
+          "color": "rgba(28, 27, 31, 1)",
           "writingDirection": "ltr",
         },
         undefined,
@@ -167,7 +167,6 @@ Array [
     style={
       Array [
         Object {
-          "color": "rgba(28, 27, 31, 1)",
           "fontFamily": "System",
           "fontSize": 16,
           "fontWeight": "500",
@@ -178,6 +177,7 @@ Array [
           "textAlign": "left",
         },
         Object {
+          "color": "rgba(28, 27, 31, 1)",
           "writingDirection": "ltr",
         },
         undefined,
@@ -190,7 +190,6 @@ Array [
     style={
       Array [
         Object {
-          "color": "rgba(28, 27, 31, 1)",
           "fontFamily": "System",
           "fontSize": 14,
           "fontWeight": "500",
@@ -201,6 +200,7 @@ Array [
           "textAlign": "left",
         },
         Object {
+          "color": "rgba(28, 27, 31, 1)",
           "writingDirection": "ltr",
         },
         undefined,
@@ -213,7 +213,6 @@ Array [
     style={
       Array [
         Object {
-          "color": "rgba(28, 27, 31, 1)",
           "fontFamily": "System",
           "fontSize": 16,
           "fontWeight": "400",
@@ -224,6 +223,7 @@ Array [
           "textAlign": "left",
         },
         Object {
+          "color": "rgba(28, 27, 31, 1)",
           "writingDirection": "ltr",
         },
         undefined,
@@ -236,7 +236,6 @@ Array [
     style={
       Array [
         Object {
-          "color": "rgba(28, 27, 31, 1)",
           "fontFamily": "System",
           "fontSize": 14,
           "fontWeight": "400",
@@ -247,6 +246,7 @@ Array [
           "textAlign": "left",
         },
         Object {
+          "color": "rgba(28, 27, 31, 1)",
           "writingDirection": "ltr",
         },
         undefined,
@@ -259,7 +259,6 @@ Array [
     style={
       Array [
         Object {
-          "color": "rgba(28, 27, 31, 1)",
           "fontFamily": "System",
           "fontSize": 12,
           "fontWeight": "400",
@@ -270,6 +269,7 @@ Array [
           "textAlign": "left",
         },
         Object {
+          "color": "rgba(28, 27, 31, 1)",
           "writingDirection": "ltr",
         },
         undefined,
@@ -282,7 +282,6 @@ Array [
     style={
       Array [
         Object {
-          "color": "rgba(28, 27, 31, 1)",
           "fontFamily": "System",
           "fontSize": 14,
           "fontWeight": "500",
@@ -293,6 +292,7 @@ Array [
           "textAlign": "left",
         },
         Object {
+          "color": "rgba(28, 27, 31, 1)",
           "writingDirection": "ltr",
         },
         undefined,
@@ -305,7 +305,6 @@ Array [
     style={
       Array [
         Object {
-          "color": "rgba(28, 27, 31, 1)",
           "fontFamily": "System",
           "fontSize": 12,
           "fontWeight": "500",
@@ -316,6 +315,7 @@ Array [
           "textAlign": "left",
         },
         Object {
+          "color": "rgba(28, 27, 31, 1)",
           "writingDirection": "ltr",
         },
         undefined,
@@ -328,7 +328,6 @@ Array [
     style={
       Array [
         Object {
-          "color": "rgba(28, 27, 31, 1)",
           "fontFamily": "System",
           "fontSize": 11,
           "fontWeight": "500",
@@ -339,6 +338,7 @@ Array [
           "textAlign": "left",
         },
         Object {
+          "color": "rgba(28, 27, 31, 1)",
           "writingDirection": "ltr",
         },
         undefined,
@@ -353,7 +353,6 @@ Array [
 exports[`renders v3 Text component with custom variant correctly 1`] = `
 Array [
   Object {
-    "color": "rgba(28, 27, 31, 1)",
     "fontFamily": "Montserrat-Regular",
     "fontSize": 41,
     "fontWeight": "400",
@@ -364,6 +363,7 @@ Array [
     "textAlign": "left",
   },
   Object {
+    "color": "rgba(28, 27, 31, 1)",
     "writingDirection": "ltr",
   },
   undefined,
diff --git a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
index 309c146121..d2fcdb65e7 100644
--- a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
@@ -235,7 +235,6 @@ exports[`render visible banner, with custom theme 1`] = `
                         style={
                           Array [
                             Object {
-                              "color": "rgba(28, 27, 31, 1)",
                               "fontFamily": "System",
                               "fontSize": 14,
                               "fontWeight": "500",
@@ -246,6 +245,7 @@ exports[`render visible banner, with custom theme 1`] = `
                               "textAlign": "left",
                             },
                             Object {
+                              "color": "rgba(28, 27, 31, 1)",
                               "writingDirection": "ltr",
                             },
                             Array [
@@ -696,7 +696,6 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
                         style={
                           Array [
                             Object {
-                              "color": "rgba(28, 27, 31, 1)",
                               "fontFamily": "System",
                               "fontSize": 14,
                               "fontWeight": "500",
@@ -707,6 +706,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
                               "textAlign": "left",
                             },
                             Object {
+                              "color": "rgba(28, 27, 31, 1)",
                               "writingDirection": "ltr",
                             },
                             Array [
@@ -987,7 +987,6 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                         style={
                           Array [
                             Object {
-                              "color": "rgba(28, 27, 31, 1)",
                               "fontFamily": "System",
                               "fontSize": 14,
                               "fontWeight": "500",
@@ -998,6 +997,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                               "textAlign": "left",
                             },
                             Object {
+                              "color": "rgba(28, 27, 31, 1)",
                               "writingDirection": "ltr",
                             },
                             Array [
@@ -1141,7 +1141,6 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                         style={
                           Array [
                             Object {
-                              "color": "rgba(28, 27, 31, 1)",
                               "fontFamily": "System",
                               "fontSize": 14,
                               "fontWeight": "500",
@@ -1152,6 +1151,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                               "textAlign": "left",
                             },
                             Object {
+                              "color": "rgba(28, 27, 31, 1)",
                               "writingDirection": "ltr",
                             },
                             Array [
diff --git a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
index 44541e8740..ad94026677 100644
--- a/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/BottomNavigation.test.tsx.snap
@@ -2042,7 +2042,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -2053,6 +2052,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -2096,7 +2096,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -2107,6 +2106,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -2350,7 +2350,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -2361,6 +2360,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -2404,7 +2404,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -2415,6 +2414,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -2658,7 +2658,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -2669,6 +2668,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -2712,7 +2712,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -2723,6 +2722,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -2966,7 +2966,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -2977,6 +2976,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -3020,7 +3020,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -3031,6 +3030,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -3274,7 +3274,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -3285,6 +3284,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -3328,7 +3328,6 @@ exports[`renders bottom navigation with getLazy 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -3339,6 +3338,7 @@ exports[`renders bottom navigation with getLazy 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -3784,7 +3784,6 @@ exports[`renders bottom navigation with scene animation 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -3795,6 +3794,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -4044,7 +4044,6 @@ exports[`renders bottom navigation with scene animation 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -4055,6 +4054,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -4304,7 +4304,6 @@ exports[`renders bottom navigation with scene animation 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -4315,6 +4314,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -4564,7 +4564,6 @@ exports[`renders bottom navigation with scene animation 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -4575,6 +4574,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -4824,7 +4824,6 @@ exports[`renders bottom navigation with scene animation 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -4835,6 +4834,7 @@ exports[`renders bottom navigation with scene animation 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -6941,7 +6941,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -6952,6 +6951,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -6995,7 +6995,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -7006,6 +7005,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -7249,7 +7249,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -7260,6 +7259,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -7303,7 +7303,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -7314,6 +7313,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -7557,7 +7557,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -7568,6 +7567,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -7611,7 +7611,6 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -7622,6 +7621,7 @@ exports[`renders custom icon and label with custom colors in non-shifting bottom
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -8067,7 +8067,6 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -8078,6 +8077,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -8327,7 +8327,6 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -8338,6 +8337,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -8587,7 +8587,6 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -8598,6 +8597,7 @@ exports[`renders custom icon and label with custom colors in shifting bottom nav
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -9015,7 +9015,6 @@ exports[`renders non-shifting bottom navigation 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -9026,6 +9025,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -9069,7 +9069,6 @@ exports[`renders non-shifting bottom navigation 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -9080,6 +9079,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -9323,7 +9323,6 @@ exports[`renders non-shifting bottom navigation 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -9334,6 +9333,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -9377,7 +9377,6 @@ exports[`renders non-shifting bottom navigation 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -9388,6 +9387,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -9631,7 +9631,6 @@ exports[`renders non-shifting bottom navigation 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -9642,6 +9641,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -9685,7 +9685,6 @@ exports[`renders non-shifting bottom navigation 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -9696,6 +9695,7 @@ exports[`renders non-shifting bottom navigation 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -10141,7 +10141,6 @@ exports[`renders shifting bottom navigation 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -10152,6 +10151,7 @@ exports[`renders shifting bottom navigation 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -10401,7 +10401,6 @@ exports[`renders shifting bottom navigation 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -10412,6 +10411,7 @@ exports[`renders shifting bottom navigation 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -10661,7 +10661,6 @@ exports[`renders shifting bottom navigation 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -10672,6 +10671,7 @@ exports[`renders shifting bottom navigation 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -10921,7 +10921,6 @@ exports[`renders shifting bottom navigation 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -10932,6 +10931,7 @@ exports[`renders shifting bottom navigation 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -11181,7 +11181,6 @@ exports[`renders shifting bottom navigation 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 12,
                             "fontWeight": "500",
@@ -11192,6 +11191,7 @@ exports[`renders shifting bottom navigation 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
diff --git a/src/components/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/__tests__/__snapshots__/Button.test.tsx.snap
index 6426d9d8a2..f1c03b5fc9 100644
--- a/src/components/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Button.test.tsx.snap
@@ -107,7 +107,6 @@ exports[`renders button with an accessibility hint 1`] = `
             style={
               Array [
                 Object {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
@@ -118,6 +117,7 @@ exports[`renders button with an accessibility hint 1`] = `
                   "textAlign": "left",
                 },
                 Object {
+                  "color": "rgba(28, 27, 31, 1)",
                   "writingDirection": "ltr",
                 },
                 Array [
@@ -262,7 +262,6 @@ exports[`renders button with an accessibility label 1`] = `
             style={
               Array [
                 Object {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
@@ -273,6 +272,7 @@ exports[`renders button with an accessibility label 1`] = `
                   "textAlign": "left",
                 },
                 Object {
+                  "color": "rgba(28, 27, 31, 1)",
                   "writingDirection": "ltr",
                 },
                 Array [
@@ -416,7 +416,6 @@ exports[`renders button with button color 1`] = `
             style={
               Array [
                 Object {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
@@ -427,6 +426,7 @@ exports[`renders button with button color 1`] = `
                   "textAlign": "left",
                 },
                 Object {
+                  "color": "rgba(28, 27, 31, 1)",
                   "writingDirection": "ltr",
                 },
                 Array [
@@ -570,7 +570,6 @@ exports[`renders button with color 1`] = `
             style={
               Array [
                 Object {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
@@ -581,6 +580,7 @@ exports[`renders button with color 1`] = `
                   "textAlign": "left",
                 },
                 Object {
+                  "color": "rgba(28, 27, 31, 1)",
                   "writingDirection": "ltr",
                 },
                 Array [
@@ -724,7 +724,6 @@ exports[`renders button with custom testID 1`] = `
             style={
               Array [
                 Object {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
@@ -735,6 +734,7 @@ exports[`renders button with custom testID 1`] = `
                   "textAlign": "left",
                 },
                 Object {
+                  "color": "rgba(28, 27, 31, 1)",
                   "writingDirection": "ltr",
                 },
                 Array [
@@ -934,7 +934,6 @@ exports[`renders button with icon 1`] = `
             style={
               Array [
                 Object {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
@@ -945,6 +944,7 @@ exports[`renders button with icon 1`] = `
                   "textAlign": "left",
                 },
                 Object {
+                  "color": "rgba(28, 27, 31, 1)",
                   "writingDirection": "ltr",
                 },
                 Array [
@@ -1146,7 +1146,6 @@ exports[`renders button with icon in reverse order 1`] = `
             style={
               Array [
                 Object {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
@@ -1157,6 +1156,7 @@ exports[`renders button with icon in reverse order 1`] = `
                   "textAlign": "left",
                 },
                 Object {
+                  "color": "rgba(28, 27, 31, 1)",
                   "writingDirection": "ltr",
                 },
                 Array [
@@ -1300,7 +1300,6 @@ exports[`renders contained contained with mode 1`] = `
             style={
               Array [
                 Object {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
@@ -1311,6 +1310,7 @@ exports[`renders contained contained with mode 1`] = `
                   "textAlign": "left",
                 },
                 Object {
+                  "color": "rgba(28, 27, 31, 1)",
                   "writingDirection": "ltr",
                 },
                 Array [
@@ -1455,7 +1455,6 @@ exports[`renders disabled button 1`] = `
             style={
               Array [
                 Object {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
@@ -1466,6 +1465,7 @@ exports[`renders disabled button 1`] = `
                   "textAlign": "left",
                 },
                 Object {
+                  "color": "rgba(28, 27, 31, 1)",
                   "writingDirection": "ltr",
                 },
                 Array [
@@ -1817,7 +1817,6 @@ exports[`renders loading button 1`] = `
             style={
               Array [
                 Object {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
@@ -1828,6 +1827,7 @@ exports[`renders loading button 1`] = `
                   "textAlign": "left",
                 },
                 Object {
+                  "color": "rgba(28, 27, 31, 1)",
                   "writingDirection": "ltr",
                 },
                 Array [
@@ -1971,7 +1971,6 @@ exports[`renders outlined button with mode 1`] = `
             style={
               Array [
                 Object {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
@@ -1982,6 +1981,7 @@ exports[`renders outlined button with mode 1`] = `
                   "textAlign": "left",
                 },
                 Object {
+                  "color": "rgba(28, 27, 31, 1)",
                   "writingDirection": "ltr",
                 },
                 Array [
@@ -2126,7 +2126,6 @@ exports[`renders text button by default 1`] = `
             style={
               Array [
                 Object {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
@@ -2137,6 +2136,7 @@ exports[`renders text button by default 1`] = `
                   "textAlign": "left",
                 },
                 Object {
+                  "color": "rgba(28, 27, 31, 1)",
                   "writingDirection": "ltr",
                 },
                 Array [
@@ -2280,7 +2280,6 @@ exports[`renders text button with mode 1`] = `
             style={
               Array [
                 Object {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
@@ -2291,6 +2290,7 @@ exports[`renders text button with mode 1`] = `
                   "textAlign": "left",
                 },
                 Object {
+                  "color": "rgba(28, 27, 31, 1)",
                   "writingDirection": "ltr",
                 },
                 Array [
diff --git a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
index 71501d00fb..d239026598 100644
--- a/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Chip.test.tsx.snap
@@ -171,7 +171,6 @@ exports[`renders chip with close button 1`] = `
             style={
               Array [
                 Object {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
@@ -182,6 +181,7 @@ exports[`renders chip with close button 1`] = `
                   "textAlign": "left",
                 },
                 Object {
+                  "color": "rgba(28, 27, 31, 1)",
                   "writingDirection": "ltr",
                 },
                 Array [
@@ -463,7 +463,6 @@ exports[`renders chip with custom close button 1`] = `
             style={
               Array [
                 Object {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
@@ -474,6 +473,7 @@ exports[`renders chip with custom close button 1`] = `
                   "textAlign": "left",
                 },
                 Object {
+                  "color": "rgba(28, 27, 31, 1)",
                   "writingDirection": "ltr",
                 },
                 Array [
@@ -755,7 +755,6 @@ exports[`renders chip with icon 1`] = `
             style={
               Array [
                 Object {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
@@ -766,6 +765,7 @@ exports[`renders chip with icon 1`] = `
                   "textAlign": "left",
                 },
                 Object {
+                  "color": "rgba(28, 27, 31, 1)",
                   "writingDirection": "ltr",
                 },
                 Array [
@@ -918,7 +918,6 @@ exports[`renders chip with onPress 1`] = `
             style={
               Array [
                 Object {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
@@ -929,6 +928,7 @@ exports[`renders chip with onPress 1`] = `
                   "textAlign": "left",
                 },
                 Object {
+                  "color": "rgba(28, 27, 31, 1)",
                   "writingDirection": "ltr",
                 },
                 Array [
@@ -1081,7 +1081,6 @@ exports[`renders outlined disabled chip 1`] = `
             style={
               Array [
                 Object {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
@@ -1092,6 +1091,7 @@ exports[`renders outlined disabled chip 1`] = `
                   "textAlign": "left",
                 },
                 Object {
+                  "color": "rgba(28, 27, 31, 1)",
                   "writingDirection": "ltr",
                 },
                 Array [
@@ -1296,7 +1296,6 @@ exports[`renders selected chip 1`] = `
             style={
               Array [
                 Object {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
@@ -1307,6 +1306,7 @@ exports[`renders selected chip 1`] = `
                   "textAlign": "left",
                 },
                 Object {
+                  "color": "rgba(28, 27, 31, 1)",
                   "writingDirection": "ltr",
                 },
                 Array [
diff --git a/src/components/__tests__/__snapshots__/DataTable.test.js.snap b/src/components/__tests__/__snapshots__/DataTable.test.js.snap
index 7f394d925a..0eb3a44e9f 100644
--- a/src/components/__tests__/__snapshots__/DataTable.test.js.snap
+++ b/src/components/__tests__/__snapshots__/DataTable.test.js.snap
@@ -1798,7 +1798,6 @@ exports[`renders data table pagination with options select 1`] = `
                   style={
                     Array [
                       Object {
-                        "color": "rgba(28, 27, 31, 1)",
                         "fontFamily": "System",
                         "fontSize": 14,
                         "fontWeight": "500",
@@ -1809,6 +1808,7 @@ exports[`renders data table pagination with options select 1`] = `
                         "textAlign": "left",
                       },
                       Object {
+                        "color": "rgba(28, 27, 31, 1)",
                         "writingDirection": "ltr",
                       },
                       Array [
diff --git a/src/components/__tests__/__snapshots__/DrawerItem.test.js.snap b/src/components/__tests__/__snapshots__/DrawerItem.test.js.snap
index b14083a34f..d0127c87a7 100644
--- a/src/components/__tests__/__snapshots__/DrawerItem.test.js.snap
+++ b/src/components/__tests__/__snapshots__/DrawerItem.test.js.snap
@@ -116,7 +116,6 @@ exports[`renders DrawerItem with icon 1`] = `
           style={
             Array [
               Object {
-                "color": "rgba(28, 27, 31, 1)",
                 "fontFamily": "System",
                 "fontSize": 14,
                 "fontWeight": "500",
@@ -127,6 +126,7 @@ exports[`renders DrawerItem with icon 1`] = `
                 "textAlign": "left",
               },
               Object {
+                "color": "rgba(28, 27, 31, 1)",
                 "writingDirection": "ltr",
               },
               Array [
@@ -270,7 +270,6 @@ exports[`renders active DrawerItem 1`] = `
           style={
             Array [
               Object {
-                "color": "rgba(28, 27, 31, 1)",
                 "fontFamily": "System",
                 "fontSize": 14,
                 "fontWeight": "500",
@@ -281,6 +280,7 @@ exports[`renders active DrawerItem 1`] = `
                 "textAlign": "left",
               },
               Object {
+                "color": "rgba(28, 27, 31, 1)",
                 "writingDirection": "ltr",
               },
               Array [
@@ -388,7 +388,6 @@ exports[`renders basic DrawerItem 1`] = `
           style={
             Array [
               Object {
-                "color": "rgba(28, 27, 31, 1)",
                 "fontFamily": "System",
                 "fontSize": 14,
                 "fontWeight": "500",
@@ -399,6 +398,7 @@ exports[`renders basic DrawerItem 1`] = `
                 "textAlign": "left",
               },
               Object {
+                "color": "rgba(28, 27, 31, 1)",
                 "writingDirection": "ltr",
               },
               Array [
diff --git a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap
index 7734ed28b3..8b6b6b902a 100644
--- a/src/components/__tests__/__snapshots__/FAB.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/FAB.test.tsx.snap
@@ -924,7 +924,6 @@ exports[`renders extended FAB 1`] = `
             style={
               Array [
                 Object {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
@@ -935,6 +934,7 @@ exports[`renders extended FAB 1`] = `
                   "textAlign": "left",
                 },
                 Object {
+                  "color": "rgba(28, 27, 31, 1)",
                   "writingDirection": "ltr",
                 },
                 Array [
@@ -1147,7 +1147,6 @@ exports[`renders extended FAB with custom size prop 1`] = `
             style={
               Array [
                 Object {
-                  "color": "rgba(28, 27, 31, 1)",
                   "fontFamily": "System",
                   "fontSize": 14,
                   "fontWeight": "500",
@@ -1158,6 +1157,7 @@ exports[`renders extended FAB with custom size prop 1`] = `
                   "textAlign": "left",
                 },
                 Object {
+                  "color": "rgba(28, 27, 31, 1)",
                   "writingDirection": "ltr",
                 },
                 Array [
diff --git a/src/components/__tests__/__snapshots__/ListItem.test.js.snap b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
index 78bd02b3f8..77a3f87cbc 100644
--- a/src/components/__tests__/__snapshots__/ListItem.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListItem.test.js.snap
@@ -268,7 +268,6 @@ exports[`renders list item with custom description 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 14,
                             "fontWeight": "500",
@@ -279,6 +278,7 @@ exports[`renders list item with custom description 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
diff --git a/src/components/__tests__/__snapshots__/ListSection.test.js.snap b/src/components/__tests__/__snapshots__/ListSection.test.js.snap
index 64085d4046..a1b6776ad1 100644
--- a/src/components/__tests__/__snapshots__/ListSection.test.js.snap
+++ b/src/components/__tests__/__snapshots__/ListSection.test.js.snap
@@ -181,7 +181,6 @@ exports[`renders list section with custom title style 1`] = `
     style={
       Array [
         Object {
-          "color": "rgba(28, 27, 31, 1)",
           "fontFamily": "System",
           "fontSize": 14,
           "fontWeight": "400",
@@ -192,6 +191,7 @@ exports[`renders list section with custom title style 1`] = `
           "textAlign": "left",
         },
         Object {
+          "color": "rgba(28, 27, 31, 1)",
           "writingDirection": "ltr",
         },
         Array [
@@ -682,7 +682,6 @@ exports[`renders list section with subheader 1`] = `
     style={
       Array [
         Object {
-          "color": "rgba(28, 27, 31, 1)",
           "fontFamily": "System",
           "fontSize": 14,
           "fontWeight": "400",
@@ -693,6 +692,7 @@ exports[`renders list section with subheader 1`] = `
           "textAlign": "left",
         },
         Object {
+          "color": "rgba(28, 27, 31, 1)",
           "writingDirection": "ltr",
         },
         Array [
diff --git a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
index 7b0ff34bad..5c5df9404a 100644
--- a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
@@ -119,7 +119,6 @@ Array [
                   style={
                     Array [
                       Object {
-                        "color": "rgba(28, 27, 31, 1)",
                         "fontFamily": "System",
                         "fontSize": 14,
                         "fontWeight": "500",
@@ -130,6 +129,7 @@ Array [
                         "textAlign": "left",
                       },
                       Object {
+                        "color": "rgba(28, 27, 31, 1)",
                         "writingDirection": "ltr",
                       },
                       Array [
@@ -370,7 +370,6 @@ Array [
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 16,
                             "fontWeight": "400",
@@ -381,6 +380,7 @@ Array [
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -474,7 +474,6 @@ Array [
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 16,
                             "fontWeight": "400",
@@ -485,6 +484,7 @@ Array [
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -634,7 +634,6 @@ exports[`renders not visible menu 1`] = `
                 style={
                   Array [
                     Object {
-                      "color": "rgba(28, 27, 31, 1)",
                       "fontFamily": "System",
                       "fontSize": 14,
                       "fontWeight": "500",
@@ -645,6 +644,7 @@ exports[`renders not visible menu 1`] = `
                       "textAlign": "left",
                     },
                     Object {
+                      "color": "rgba(28, 27, 31, 1)",
                       "writingDirection": "ltr",
                     },
                     Array [
@@ -804,7 +804,6 @@ Array [
                   style={
                     Array [
                       Object {
-                        "color": "rgba(28, 27, 31, 1)",
                         "fontFamily": "System",
                         "fontSize": 14,
                         "fontWeight": "500",
@@ -815,6 +814,7 @@ Array [
                         "textAlign": "left",
                       },
                       Object {
+                        "color": "rgba(28, 27, 31, 1)",
                         "writingDirection": "ltr",
                       },
                       Array [
@@ -1053,7 +1053,6 @@ Array [
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 16,
                             "fontWeight": "400",
@@ -1064,6 +1063,7 @@ Array [
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -1157,7 +1157,6 @@ Array [
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 16,
                             "fontWeight": "400",
@@ -1168,6 +1167,7 @@ Array [
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
diff --git a/src/components/__tests__/__snapshots__/MenuItem.test.js.snap b/src/components/__tests__/__snapshots__/MenuItem.test.js.snap
index 8cc451ef1d..a21e7fb52d 100644
--- a/src/components/__tests__/__snapshots__/MenuItem.test.js.snap
+++ b/src/components/__tests__/__snapshots__/MenuItem.test.js.snap
@@ -121,7 +121,6 @@ Array [
           style={
             Array [
               Object {
-                "color": "rgba(28, 27, 31, 1)",
                 "fontFamily": "System",
                 "fontSize": 16,
                 "fontWeight": "400",
@@ -132,6 +131,7 @@ Array [
                 "textAlign": "left",
               },
               Object {
+                "color": "rgba(28, 27, 31, 1)",
                 "writingDirection": "ltr",
               },
               Array [
@@ -273,7 +273,6 @@ Array [
           style={
             Array [
               Object {
-                "color": "rgba(28, 27, 31, 1)",
                 "fontFamily": "System",
                 "fontSize": 16,
                 "fontWeight": "400",
@@ -284,6 +283,7 @@ Array [
                 "textAlign": "left",
               },
               Object {
+                "color": "rgba(28, 27, 31, 1)",
                 "writingDirection": "ltr",
               },
               Array [
@@ -425,7 +425,6 @@ Array [
           style={
             Array [
               Object {
-                "color": "rgba(28, 27, 31, 1)",
                 "fontFamily": "System",
                 "fontSize": 16,
                 "fontWeight": "400",
@@ -436,6 +435,7 @@ Array [
                 "textAlign": "left",
               },
               Object {
+                "color": "rgba(28, 27, 31, 1)",
                 "writingDirection": "ltr",
               },
               Array [
@@ -577,7 +577,6 @@ Array [
           style={
             Array [
               Object {
-                "color": "rgba(28, 27, 31, 1)",
                 "fontFamily": "System",
                 "fontSize": 16,
                 "fontWeight": "400",
@@ -588,6 +587,7 @@ Array [
                 "textAlign": "left",
               },
               Object {
+                "color": "rgba(28, 27, 31, 1)",
                 "writingDirection": "ltr",
               },
               Array [
@@ -681,7 +681,6 @@ Array [
           style={
             Array [
               Object {
-                "color": "rgba(28, 27, 31, 1)",
                 "fontFamily": "System",
                 "fontSize": 16,
                 "fontWeight": "400",
@@ -692,6 +691,7 @@ Array [
                 "textAlign": "left",
               },
               Object {
+                "color": "rgba(28, 27, 31, 1)",
                 "writingDirection": "ltr",
               },
               Array [
diff --git a/src/components/__tests__/__snapshots__/SegmentedButton.test.js.snap b/src/components/__tests__/__snapshots__/SegmentedButton.test.js.snap
index 5f428a7426..a22ece169a 100644
--- a/src/components/__tests__/__snapshots__/SegmentedButton.test.js.snap
+++ b/src/components/__tests__/__snapshots__/SegmentedButton.test.js.snap
@@ -145,7 +145,6 @@ exports[`renders checked segmented button with selected check 1`] = `
           style={
             Array [
               Object {
-                "color": "rgba(28, 27, 31, 1)",
                 "fontFamily": "System",
                 "fontSize": 14,
                 "fontWeight": "500",
@@ -156,6 +155,7 @@ exports[`renders checked segmented button with selected check 1`] = `
                 "textAlign": "left",
               },
               Object {
+                "color": "rgba(28, 27, 31, 1)",
                 "writingDirection": "ltr",
               },
               Array [
@@ -256,7 +256,6 @@ exports[`renders checked segmented button with selected check 1`] = `
           style={
             Array [
               Object {
-                "color": "rgba(28, 27, 31, 1)",
                 "fontFamily": "System",
                 "fontSize": 14,
                 "fontWeight": "500",
@@ -267,6 +266,7 @@ exports[`renders checked segmented button with selected check 1`] = `
                 "textAlign": "left",
               },
               Object {
+                "color": "rgba(28, 27, 31, 1)",
                 "writingDirection": "ltr",
               },
               Array [
@@ -385,7 +385,6 @@ exports[`renders disabled segmented button 1`] = `
           style={
             Array [
               Object {
-                "color": "rgba(28, 27, 31, 1)",
                 "fontFamily": "System",
                 "fontSize": 14,
                 "fontWeight": "500",
@@ -396,6 +395,7 @@ exports[`renders disabled segmented button 1`] = `
                 "textAlign": "left",
               },
               Object {
+                "color": "rgba(28, 27, 31, 1)",
                 "writingDirection": "ltr",
               },
               Array [
@@ -496,7 +496,6 @@ exports[`renders disabled segmented button 1`] = `
           style={
             Array [
               Object {
-                "color": "rgba(28, 27, 31, 1)",
                 "fontFamily": "System",
                 "fontSize": 14,
                 "fontWeight": "500",
@@ -507,6 +506,7 @@ exports[`renders disabled segmented button 1`] = `
                 "textAlign": "left",
               },
               Object {
+                "color": "rgba(28, 27, 31, 1)",
                 "writingDirection": "ltr",
               },
               Array [
@@ -623,7 +623,6 @@ exports[`renders segmented button 1`] = `
           style={
             Array [
               Object {
-                "color": "rgba(28, 27, 31, 1)",
                 "fontFamily": "System",
                 "fontSize": 14,
                 "fontWeight": "500",
@@ -634,6 +633,7 @@ exports[`renders segmented button 1`] = `
                 "textAlign": "left",
               },
               Object {
+                "color": "rgba(28, 27, 31, 1)",
                 "writingDirection": "ltr",
               },
               Array [
@@ -734,7 +734,6 @@ exports[`renders segmented button 1`] = `
           style={
             Array [
               Object {
-                "color": "rgba(28, 27, 31, 1)",
                 "fontFamily": "System",
                 "fontSize": 14,
                 "fontWeight": "500",
@@ -745,6 +744,7 @@ exports[`renders segmented button 1`] = `
                 "textAlign": "left",
               },
               Object {
+                "color": "rgba(28, 27, 31, 1)",
                 "writingDirection": "ltr",
               },
               Array [
diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
index e9bc1570da..22db9eaae1 100644
--- a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
@@ -317,7 +317,6 @@ exports[`renders snackbar with action button 1`] = `
           style={
             Array [
               Object {
-                "color": "rgba(28, 27, 31, 1)",
                 "fontFamily": "System",
                 "fontSize": 14,
                 "fontWeight": "400",
@@ -328,6 +327,7 @@ exports[`renders snackbar with action button 1`] = `
                 "textAlign": "left",
               },
               Object {
+                "color": "rgba(28, 27, 31, 1)",
                 "writingDirection": "ltr",
               },
               Array [
@@ -467,7 +467,6 @@ exports[`renders snackbar with action button 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "rgba(28, 27, 31, 1)",
                             "fontFamily": "System",
                             "fontSize": 14,
                             "fontWeight": "500",
@@ -478,6 +477,7 @@ exports[`renders snackbar with action button 1`] = `
                             "textAlign": "left",
                           },
                           Object {
+                            "color": "rgba(28, 27, 31, 1)",
                             "writingDirection": "ltr",
                           },
                           Array [
@@ -605,7 +605,6 @@ exports[`renders snackbar with content 1`] = `
           style={
             Array [
               Object {
-                "color": "rgba(28, 27, 31, 1)",
                 "fontFamily": "System",
                 "fontSize": 14,
                 "fontWeight": "400",
@@ -616,6 +615,7 @@ exports[`renders snackbar with content 1`] = `
                 "textAlign": "left",
               },
               Object {
+                "color": "rgba(28, 27, 31, 1)",
                 "writingDirection": "ltr",
               },
               Array [