fix: update input colors (#4259)

callstack · Jan 10, 2024 · 7cf251d · 7cf251d
1 parent a62d6ec
commit 7cf251d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 26 deletions.
diff --git a/src/components/TextInput/helpers.tsx b/src/components/TextInput/helpers.tsx
@@ -315,9 +315,7 @@ const getInputTextColor = ({
   theme,
   textColor,
   disabled,
-  mode,
-}: BaseProps & { mode: Mode; textColor?: string }) => {
-  const isFlat = mode === 'flat';
+}: BaseProps & { textColor?: string }) => {
   if (textColor) {
     return textColor;
   }
@@ -327,10 +325,6 @@ const getInputTextColor = ({
       return theme.colors.onSurfaceDisabled;
     }
 
-    if (isFlat) {
-      return theme.colors.onSurfaceVariant;
-    }
-
     return theme.colors.onSurface;
   }
 
@@ -442,7 +436,7 @@ const getFlatUnderlineColor = ({
       return theme.colors.onSurfaceDisabled;
     }
 
-    return theme.colors.onSurface;
+    return theme.colors.onSurfaceVariant;
   }
 
   if (disabled) {
@@ -512,7 +506,6 @@ export const getFlatInputColors = ({
     inputTextColor: getInputTextColor({
       ...baseFlatColorProps,
       textColor,
-      mode: 'flat',
     }),
     activeColor,
     underlineColorCustom: getFlatUnderlineColor({
@@ -555,7 +548,6 @@ export const getOutlinedInputColors = ({
     inputTextColor: getInputTextColor({
       ...baseOutlinedColorProps,
       textColor,
-      mode: 'outlined',
     }),
     activeColor,
     outlineColor: getOutlinedOutlineInputColor({

diff --git a/src/components/__tests__/TextInput.test.tsx b/src/components/__tests__/TextInput.test.tsx
@@ -557,7 +557,7 @@ describe('getFlatInputColor - underline color', () => {
         theme: getTheme(),
       })
     ).toMatchObject({
-      underlineColorCustom: getTheme().colors.onSurface,
+      underlineColorCustom: getTheme().colors.onSurfaceVariant,
     });
   });
 
@@ -644,7 +644,7 @@ describe('getFlatInputColor - input text color', () => {
         theme: getTheme(),
       })
     ).toMatchObject({
-      inputTextColor: getTheme().colors.onSurfaceVariant,
+      inputTextColor: getTheme().colors.onSurface,
     });
   });
 

diff --git a/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/components/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -287,7 +287,7 @@ exports[`correctly applies a component as the text label 1`] = `
     collapsable={false}
     style={
       {
-        "backgroundColor": "rgba(28, 27, 31, 1)",
+        "backgroundColor": "rgba(73, 69, 79, 1)",
         "bottom": 0,
         "height": 1,
         "left": 0,
@@ -457,7 +457,7 @@ exports[`correctly applies a component as the text label 1`] = `
             "paddingTop": 24,
           },
           {
-            "color": "rgba(73, 69, 79, 1)",
+            "color": "rgba(28, 27, 31, 1)",
             "fontFamily": "System",
             "fontSize": 16,
             "fontWeight": undefined,
@@ -501,7 +501,7 @@ exports[`correctly applies cursorColor prop 1`] = `
     collapsable={false}
     style={
       {
-        "backgroundColor": "rgba(28, 27, 31, 1)",
+        "backgroundColor": "rgba(73, 69, 79, 1)",
         "bottom": 0,
         "height": 1,
         "left": 0,
@@ -655,7 +655,7 @@ exports[`correctly applies cursorColor prop 1`] = `
             "paddingTop": 24,
           },
           {
-            "color": "rgba(73, 69, 79, 1)",
+            "color": "rgba(28, 27, 31, 1)",
             "fontFamily": "System",
             "fontSize": 16,
             "fontWeight": undefined,
@@ -699,7 +699,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = `
     collapsable={false}
     style={
       {
-        "backgroundColor": "rgba(28, 27, 31, 1)",
+        "backgroundColor": "rgba(73, 69, 79, 1)",
         "bottom": 0,
         "height": 1,
         "left": 0,
@@ -853,7 +853,7 @@ exports[`correctly applies default textAlign based on default RTL 1`] = `
             "paddingTop": 24,
           },
           {
-            "color": "rgba(73, 69, 79, 1)",
+            "color": "rgba(28, 27, 31, 1)",
             "fontFamily": "System",
             "fontSize": 16,
             "fontWeight": undefined,
@@ -1127,7 +1127,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = `
     collapsable={false}
     style={
       {
-        "backgroundColor": "rgba(28, 27, 31, 1)",
+        "backgroundColor": "rgba(73, 69, 79, 1)",
         "bottom": 0,
         "height": 1,
         "left": 0,
@@ -1281,7 +1281,7 @@ exports[`correctly applies paddingLeft from contentStyleProp 1`] = `
             "paddingTop": 24,
           },
           {
-            "color": "rgba(73, 69, 79, 1)",
+            "color": "rgba(28, 27, 31, 1)",
             "fontFamily": "System",
             "fontSize": 16,
             "fontWeight": undefined,
@@ -1327,7 +1327,7 @@ exports[`correctly applies textAlign center 1`] = `
     collapsable={false}
     style={
       {
-        "backgroundColor": "rgba(28, 27, 31, 1)",
+        "backgroundColor": "rgba(73, 69, 79, 1)",
         "bottom": 0,
         "height": 1,
         "left": 0,
@@ -1481,7 +1481,7 @@ exports[`correctly applies textAlign center 1`] = `
             "paddingTop": 24,
           },
           {
-            "color": "rgba(73, 69, 79, 1)",
+            "color": "rgba(28, 27, 31, 1)",
             "fontFamily": "System",
             "fontSize": 16,
             "fontWeight": undefined,
@@ -1525,7 +1525,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
     collapsable={false}
     style={
       {
-        "backgroundColor": "rgba(28, 27, 31, 1)",
+        "backgroundColor": "rgba(73, 69, 79, 1)",
         "bottom": 0,
         "height": 1,
         "left": 0,
@@ -1679,7 +1679,7 @@ exports[`correctly renders left-side affix adornment, and right-side icon adornm
             "paddingTop": 24,
           },
           {
-            "color": "rgba(73, 69, 79, 1)",
+            "color": "rgba(28, 27, 31, 1)",
             "fontFamily": "System",
             "fontSize": 16,
             "fontWeight": undefined,
@@ -1925,7 +1925,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
     collapsable={false}
     style={
       {
-        "backgroundColor": "rgba(28, 27, 31, 1)",
+        "backgroundColor": "rgba(73, 69, 79, 1)",
         "bottom": 0,
         "height": 1,
         "left": 0,
@@ -2079,7 +2079,7 @@ exports[`correctly renders left-side icon adornment, and right-side affix adornm
             "paddingTop": 24,
           },
           {
-            "color": "rgba(73, 69, 79, 1)",
+            "color": "rgba(28, 27, 31, 1)",
             "fontFamily": "System",
             "fontSize": 16,
             "fontWeight": undefined,