message: Update color variables used in TextInput
diff: @@ -58,14 +58,14 @@ const Wrapper = styled.span<StyledWrapperProps>`
  min-height: 34px;
  font-size: ${get('fontSizes.1')};
  line-height: 20px;
  - color: ${get('colors.gray.9')};
  + color: ${get('colors.text.primary')};
  vertical-align: middle;
  background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
  background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
  - border: 1px solid ${get('colors.border.gray')};
  + border: 1px solid ${get('colors.input.border')};
  border-radius: ${get('radii.2')};
  outline: none;
  - box-shadow: ${get('shadows.formControl')};
  + box-shadow: ${get('shadows.shadow.inset')};
  ${props => {
  if (props.hasIcon) {
  @@ -81,28 +81,29 @@ const Wrapper = styled.span<StyledWrapperProps>`
  .TextInput-icon {
  align-self: center;
  - color: ${get('colors.gray.4')};
  + color: ${get('colors.icon.tertiary')};
  margin: 0 ${get('space.2')};
  flex-shrink: 0;
  }
  &:focus-within {
  - border-color: ${get('colors.blue.4')};
  - box-shadow: ${get('shadows.formControl')}, ${get('shadows.formControlFocus')};
  + border-color: ${get('colors.state.focus.border')};
  + box-shadow: ${get('shadows.state.focus.shadow')};
  }
  ${props =>
  props.contrast &&
  css`
  - background-color: ${get('colors.gray.0')};
  + background-color: ${get('colors.input.contrastBg')};
  `}
  ${props =>
  props.disabled &&
  css`
  - background-color: ${get('colors.bg.disabled')};
  - box-shadow: ${get('shadows.formControlDisabled')};
  + color: ${get('colors.text.secondary')};
  + background-color: ${get('colors.input.disabledBg')};
  + border-color: ${get('colors.input.disabledBorder')};
  `}
  ${props =>
  