Implement Dark Mode Form Fields (#13821)

ui/components/ui/form-field/index.scss

@@ -18,36 +18,39 @@
 
   &__error,
   &__error h6 {
-    color: var(--error-1) !important;
+    color: var(--color-error-default) !important;
     padding-top: 6px;
   }
 
   h6 {
     padding-bottom: 6px;
     margin-inline-end: 6px;
+    color: var(--color-text-default);
   }
 
   i {
-    color: #dadada;
+    color: var(--color-icon-default);
     font-size: $font-size-h7;
   }
 
   &__input {
     width: 100%;
-    border: solid 1px var(--ui-3);
     padding: 10px;
     border-radius: 6px;
+    background-color: var(--color-background-default);
+    color: var(--color-text-default);
+    border: 2px solid var(--color-border-default);
 
     &:focus {
-      border: solid 2px var(--primary-1);
+      border: solid 2px var(--color-primary-default);
     }
 
     &--error {
-      border-color: var(--error-1);
+      border-color: var(--color-error-default);
     }
 
     &--warning {
-      border-color: var(--alert-3);
+      border-color: var(--color-warning-default);
     }
   }
 }

ui/components/ui/numeric-input/numeric-input.scss

@@ -1,5 +1,5 @@
 .numeric-input {
-  border: 1px solid var(--ui-3);
+  border: 1px solid var(--color-border-default);
   position: relative;
   border-radius: 6px;
 
@@ -12,6 +12,8 @@
     border: 0;
     padding: 10px;
     border-radius: 6px;
+    background-color: var(--color-background-default);
+    color: var(--color-text-default);
 
     /* ensures the increment/decrement arrows always display */
     &::-webkit-inner-spin-button,

ui/components/ui/text-field/index.scss

@@ -0,0 +1,4 @@
+.MuiInput-input,
+.MuiInputBase-input {
+  color: var(--color-text-default) !important;
+}

ui/components/ui/text-field/text-field.component.js

@@ -7,39 +7,42 @@ const inputLabelBase = {
   transform: 'none',
   transition: 'none',
   position: 'initial',
-  color: '#5b5b5b',
+  color: 'var(--color-text-default)',
 };
 
 const styles = {
   materialLabel: {
     '&$materialFocused': {
-      color: '#aeaeae',
+      color: 'var(--color-text-alternative)',
     },
     '&$materialError': {
-      color: '#aeaeae',
+      color: 'var(--color-text-alternative)',
     },
     fontWeight: '400',
-    color: '#aeaeae',
+    color: 'var(--color-text-alternative)',
   },
   materialFocused: {},
   materialUnderline: {
+    '&:before': {
+      borderBottom: '1px solid var(--color-text-default) !important', // Visible bottom border
+    },
     '&:after': {
-      borderBottom: `2px solid rgb(3, 125, 214)`,
+      borderBottom: `2px solid rgb(3, 125, 214)`, // Animated bottom border
     },
   },
   materialError: {},
   materialWhitePaddedRoot: {
-    color: '#aeaeae',
+    color: 'var(--color-text-alternative)',
   },
   materialWhitePaddedInput: {
     padding: '8px',
 
     '&::placeholder': {
-      color: '#aeaeae',
+      color: 'var(--color-text-alternative)',
     },
   },
   materialWhitePaddedFocused: {
-    color: '#fff',
+    color: 'var(--color-background-default)',
   },
   materialWhitePaddedUnderline: {
     '&:after': {
@@ -61,14 +64,15 @@ const styles = {
     'label + &': {
       marginTop: '9px',
     },
-    border: '1px solid #BBC0C5',
+    border: '1px solid var(--color-border-default)',
+    color: 'var(--color-text-default)',
     height: '48px',
     borderRadius: '6px',
     padding: '0 16px',
     display: 'flex',
     alignItems: 'center',
     '&$inputFocused': {
-      border: '1px solid #2f9ae0',
+      border: '1px solid var(--color-primary-default)',
     },
   },
   largeInputLabel: {

ui/components/ui/ui-components.scss

@@ -48,6 +48,7 @@
 @import 'site-origin/index';
 @import 'slider/index';
 @import 'tabs/index';
+@import 'text-field/index';
 @import 'toggle-button/index';
 @import 'token-balance/index';
 @import 'tooltip/index';