Align underlayColor with designs

Author: Jordan Hunt

styles/native/js/app/custom-variables.js

@@ -156,6 +156,7 @@ export const input = {
     selectionColor: contrast.lower,
     placeholderTextColor: contrast.regular,
     underlineColorAndroid: "transparent",
+    inputContainerUnderlayColor: `rgba(${anyColorToRgbString(contrast.low)},0.4)`,
     // Sizes
     fontSize: font.size,
     fontFamily: font.family,

styles/native/js/core/variables.js

@@ -156,6 +156,7 @@ let input = {
     selectionColor: contrast.lower,
     placeholderTextColor: contrast.regular,
     underlineColorAndroid: "transparent",
+    inputContainerUnderlayColor: `rgba(${anyColorToRgbString(contrast.low)},0.4)`,
     // Sizes
     fontSize: font.size,
     fontFamily: font.family,

styles/native/js/core/widgets/dropdown.js

@@ -72,7 +72,7 @@ export const DropDown = {
         paddingVertical: 6,
         paddingHorizontal: 16,
         backgroundColor: input.backgroundColor,
-        underlayColor: contrast.low,
+        underlayColor: input.inputContainerUnderlayColor,
     },
     item: {
         // All TextStlye properties are allowed

styles/native/ts/app/custom-variables.ts

@@ -175,6 +175,7 @@ export const input: VariablesInput = {
     selectionColor: contrast.lower,
     placeholderTextColor: contrast.regular,
     underlineColorAndroid: "transparent",
+    inputContainerUnderlayColor: `rgba(${anyColorToRgbString(contrast.low)},0.4)`,
 
     // Sizes
     fontSize: font.size,

styles/native/ts/core/variables.ts

@@ -172,6 +172,7 @@ let input: VariablesInput = {
     selectionColor: contrast.lower,
     placeholderTextColor: contrast.regular,
     underlineColorAndroid: "transparent",
+    inputContainerUnderlayColor: `rgba(${anyColorToRgbString(contrast.low)},0.4)`,
 
     // Sizes
     fontSize: font.size,

styles/native/ts/core/widgets/dropdown.ts

@@ -76,7 +76,7 @@ export const DropDown: DropDownType = {
         paddingVertical: 6,
         paddingHorizontal: 16,
         backgroundColor: input.backgroundColor,
-        underlayColor: contrast.low,
+        underlayColor: input.inputContainerUnderlayColor,
     },
     item: {
         // All TextStlye properties are allowed

styles/native/ts/types/variables.d.ts

@@ -2,8 +2,6 @@
     Types
 ========================================================================== */
 
-import { badge, font } from "../app/custom-variables";
-
 declare type FontWeight = "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
 declare type TextAlign = "auto" | "left" | "right" | "center" | "justify";
 declare type TextTransform = "none" | "capitalize" | "uppercase" | "lowercase";
@@ -124,6 +122,7 @@ export interface VariablesInput {
     selectionColor: string,
     placeholderTextColor: string,
     underlineColorAndroid: string,
+    inputContainerUnderlayColor: string,
 
     fontSize: number,
     fontFamily: string,