diff --git a/libraries/core-react/src/components/TextField/Input/Input.tokens.ts b/libraries/core-react/src/components/TextField/Input/Input.tokens.ts index a2060f5e90..8284d22112 100644 --- 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 index d5775fda96..62b0bf4529 100644 --- 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` ${({ spacings }) => spacingsTemplate(spacings)} ${typographyTemplate(tokens.typography)} - color: ${tokens.color}; ${Variation} `