fix: updating input colors for dark theme

src/themes/teams-dark/componentVariables.ts

@@ -1,3 +1,4 @@
 export { default as Button } from './components/Button/buttonVariables'
-export { default as Text } from './components/Text/textVariables'
 export { default as Divider } from './components/Divider/dividerVariables'
+export { default as Input } from './components/Input/inputVariables'
+export { default as Text } from './components/Text/textVariables'

src/themes/teams-dark/components/Input/inputVariables.ts

@@ -0,0 +1,8 @@
+export default (siteVars: any) => {
+  return {
+    backgroundColor: siteVars.gray10,
+    fontColor: siteVars.gray02,
+    inputFocusBorderColor: siteVars.brand,
+    iconColor: siteVars.gray02,
+  }
+}

src/themes/teams-high-contrast/componentVariables.ts

@@ -4,4 +4,6 @@ export { default as Button } from './components/Button/buttonVariables'
 
 export { default as Divider } from './components/Divider/dividerVariables'
 
+export { default as Input } from './components/Input/inputVariables'
+
 export { default as Text } from './components/Text/textVariables'

src/themes/teams-high-contrast/components/Input/inputVariables.ts

@@ -0,0 +1,12 @@
+import { pxToRem } from '../../../../lib'
+
+export default (siteVars: any) => {
+  return {
+    backgroundColor: siteVars.bodyBackground,
+    border: `${pxToRem(1)} solid ${siteVars.bodyColor}`,
+    boxShadow: `0 ${pxToRem(1)} 0 ${siteVars.accessibleYellow}`,
+    fontColor: siteVars.bodyColor,
+    iconColor: siteVars.bodyColor,
+    inputFocusBorderBottomColor: siteVars.accessibleYellow,
+  }
+}

src/themes/teams/components/Input/inputStyles.ts

@@ -14,22 +14,26 @@ const inputStyles: ComponentSlotStylesInput<InputProps, InputVariables> = {
 
   input: ({ props: p, variables: v }): ICSSInJSStyle => ({
     outline: 0,
-    border: 0,
+    border: v.border,
     borderRadius: v.borderRadius,
-    borderBottom: v.borderBottom,
     color: v.fontColor,
     backgroundColor: v.backgroundColor,
+    position: 'relative',
     padding: v.inputPadding,
     ...(p.fluid && { width: '100%' }),
     ...(p.inline && { float: 'left' }),
+    '::placeholder': {
+      color: v.fontColor,
+    },
     ':focus': {
-      borderColor: v.inputFocusBorderColor,
-      borderRadius: v.inputFocusBorderRadius,
+      borderBottomColor: v.inputFocusBorderBottomColor,
+      boxShadow: v.boxShadow,
     },
   }),
 
   icon: ({ variables: v }): ICSSInJSStyle => ({
     position: v.iconPosition as PositionProperty,
+    color: v.iconColor,
     right: v.iconRight,
     outline: 0,
   }),

src/themes/teams/components/Input/inputVariables.ts

@@ -1,33 +1,33 @@
 import { pxToRem } from '../../../../lib'
 export interface InputVariables {
-  borderRadius: string
-  borderBottom: string
   backgroundColor: string
+  border: string
+  borderRadius: string
+  boxShadow: string
   fontColor: string
   fontSize: string
+  iconColor: string
   iconPosition: string
   iconRight: string
   inputPadding: string
-  inputFocusBorderColor: string
+  inputFocusBorderBottomColor: string
   inputFocusBorderRadius: string
 }
 
-const [_2px_asRem, _3px_asRem, _6px_asRem, _12px_asRem, _24px_asRem] = [2, 3, 6, 12, 24].map(v =>
-  pxToRem(v),
-)
-
 export default (siteVars): InputVariables => ({
-  borderRadius: _3px_asRem,
-  borderBottom: `${_2px_asRem} solid transparent`,
   backgroundColor: siteVars.gray10,
+  border: `${pxToRem(1)} solid transparent`,
+  borderRadius: pxToRem(3),
+  boxShadow: `0 ${pxToRem(1)} 0 ${siteVars.brand}`,
 
   fontColor: siteVars.bodyColor,
   fontSize: siteVars.fontSizes.medium,
 
   iconPosition: 'absolute',
-  iconRight: _2px_asRem,
+  iconRight: pxToRem(2),
+  iconColor: siteVars.bodyColor,
 
-  inputPadding: `${_6px_asRem} ${_24px_asRem} ${_6px_asRem} ${_12px_asRem}`,
-  inputFocusBorderColor: siteVars.brand,
-  inputFocusBorderRadius: `${_3px_asRem} ${_3px_asRem} ${_2px_asRem} ${_2px_asRem}`,
+  inputPadding: `${pxToRem(6)} ${pxToRem(24)} ${pxToRem(6)} ${pxToRem(12)}`,
+  inputFocusBorderBottomColor: siteVars.brand,
+  inputFocusBorderRadius: `${pxToRem(3)} ${pxToRem(3)} ${pxToRem(2)} ${pxToRem(2)}`,
 })