♻️ Fix some of the minor issues discovered with select (#899)

Avoiding height of 37px with border. Add the correct color to the tokens. The color in use was not the correct one from Figma, so changed that as well
equinor · Nov 20, 2020 · dc563cc · dc563cc
1 parent 5e2e130
commit dc563cc
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/libraries/core-react/src/components/TextField/Input/Input.tokens.ts b/libraries/core-react/src/components/TextField/Input/Input.tokens.ts
@@ -59,8 +59,10 @@ export type InputVariantProps = {
 
 export const input = {
   background: colors.ui.background__light.hex,
-  typography: typography.input.text,
-  color: colors.text.static_icons__default.hex,
+  typography: {
+    ...typography.input.text,
+    color: colors.text.static_icons__tertiary.hex,
+  },
   spacings,
   default: {
     icon: {

diff --git a/libraries/core-react/src/components/TextField/Input/Input.tsx b/libraries/core-react/src/components/TextField/Input/Input.tsx
@@ -19,19 +19,19 @@ const Variation = ({ variant }: { variant: InputVariantProps }) => {
   } = variant
 
   return css`
-    border-bottom: ${borderBottom.width} solid ${borderBottom.color};
+    border: none;
     outline: ${borderOutline.width} solid ${borderOutline.color};
-
+    box-shadow: inset 0 -${borderBottom.width} 0 0 ${borderBottom.color};
     &:active,
     &:focus {
       outline-offset: 0;
-      border-bottom: 1px solid transparent;
+      box-shadow: none;
       outline: ${focusBorderOutline.width} solid ${focusBorderOutline.color};
     }
 
     &:disabled {
       cursor: not-allowed;
-      border-bottom: 1px solid transparent;
+      box-shadow: none;
       outline: none;
 
       &:focus,
@@ -58,7 +58,6 @@ const StyledInput = styled.input<StyledProps>`
 
   ${({ spacings }) => spacingsTemplate(spacings)}
   ${typographyTemplate(tokens.typography)}
-  color: ${tokens.color};
 
   ${Variation}
 `