Updating red colour for errors

[tarynmusgrave]

WHY are these changes introduced?

Resolves #651

WHAT is this pull request doing?

Updating InlineError, borders on our form fields and the Error Icon to be the same red.

How to 🎩

Copy-paste this code in playground/Playground.tsx:

import * as React from 'react';
import {Page, TextField, Checkbox} from '@shopify/polaris';

interface State {
  value: string;
  checked: boolean;
}

export default class Playground extends React.Component<never, State> {
  state = {
    value: 'Jaded Pixel',
    checked: false,
  };

  handleTextFieldChange = (value) => {
    this.setState({value});
  };

  handleCheckboxChange = (checked) => {
    this.setState({checked});
  };

  render() {
    const {value, checked, selected} = this.state;

    return (
      <Page
        title="Playground"
        primaryAction={{content: 'View Examples', url: '/examples'}}
      >
        <TextField
          label="Store name"
          value={value}
          onChange={this.handleTextFieldChange}
          error="error"
        />

        <Checkbox
          checked={checked}
          label="Basic checkbox"
          onChange={this.handleCheckboxChange}
          error="error"
        />
      </Page>
    );
  }
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated UNRELEASED.md

[ghost]

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines. You can also join #polaris on the Shopify Partners Slack.

[kaelig]

Thanks for pinging me!

Should we update the style guide's related section and be prescriptive about the using the dark shade of red for errors?

See https://polaris.shopify.com/design/colors#section-color-usage

[dleroux]

Looks good! Made a small suggestion on the unreleased comment. I think it might be better?
🎩 also looks good. Thanks for contributing!

[chloerice]

Code and 🎩 👀 🏅Thanks Taryn!! 🚢

[chloerice]

Should we update the style guide's related section and be prescriptive about the using the dark shade of red for errors?

@kaelig Since the accessibility section covers contrast standards, I'm not sure it's necessary to specify the shade of red since the shade varies by the context it's used for (background, text etc) and the other colors don't specify shade. Updating the illustrations to match the colors we use makes sense, but may be overkill.

[ghost]

🎉 Thanks for your contribution to Polaris React!