Bump styled-system and @types/styled-system

[dependabot]

Bumps styled-system and @types/styled-system. These dependencies needed to be updated together.
Updates styled-system from 3.2.1 to 5.1.5

Release notes

Sourced from styled-system's releases.

v4

• Rewritten core for less code duplication
• No longer merges returned style object, but returns arrays instead, which should work with common CSS-in-JS libraries
• space function has been rewritten with the core style and compose utilities
• Adds long-form props for margin and padding (e.g. marginTop). Shorthand aliases still work as before.
• Reintroduces the alias argument to style utility
• Removes the styles object export
• Removes the util object export
• Removes merge utility
• Removes the mixed utility since it did not behave as expected
• The theme "scale" is now passed as the second argument to the transformValue option in style utility
• Removes the ratio style function
• The following changes to the borders style function
  • The shorthand border props no longer transform numbers to pixel widths with a solid border-style
  • Adds borderWidth, borderStyle, borderColor, and borderRadius props
  • All border props are also available as individual imports
• Removes styleType from prop types meta fields
• Changes to the get utility: now returns the last argument as a fallback

Changelog

Sourced from styled-system's changelog.

v5.1.5 2020-02-17

• @styled-system/css fix media query order #1137
• Update dependencies

v5.1.4 2019-12-02

• @styled-system/css add outlineColor support #825
• Update dependencies

v5.1.3 2019-09-16

• Add @styled-system/props utility #824

v5.1.2 2019-09-11

• Update dependencies
• Fix sort for media queries in plain object syntax #812

v5.1.1 2019-08-22

• Fix for passing props through to transform function #723
• Update dependencies

v5.1.0 2019-08-12

• New variant API with support for inline variant definitions and theme-based style objects #699

v5.0.23 2019-08-12

• Add support for overflowX and overflowY #682
• @styled-system/css: add support for size #684
• Update dependencies

v5.0.22 2019-08-09

• @styled-system/css: add support for fill, stroke, and flexBasis #679

v5.0.21 2019-08-07

• Fix publish

v5.0.20 2019-08-07

• Add theme support for more border properties #670 & #671

v5.0.19 2019-08-05

• @styled-system/css allow functional values to return responsive array values #654

... (truncated)

Commits

• 629fa1a v5.1.5
• d5ed7c6 Edit changelog
• 50fcdad Merge pull request #1137 from RyanTheAllmighty/fix-responsive-null-styling
• d8d2483 Merge pull request #1139 from styled-system/dependabot/npm_and_yarn/react-scr...
• 841d2c2 Merge pull request #1144 from styled-system/dependabot/npm_and_yarn/rollup-1....
• 9750f76 Merge pull request #1143 from styled-system/dependabot/npm_and_yarn/gatsby-pl...
• 62c231b Merge pull request #1141 from styled-system/dependabot/npm_and_yarn/gatsby-2....
• 1ea4ca7 Merge pull request #1142 from styled-system/dependabot/npm_and_yarn/husky-4.2.3
• 4ee3c01 Bump rollup from 1.31.0 to 1.31.1
• 2b722a6 Bump gatsby-plugin-mdx from 1.0.70 to 1.0.73
• Additional commits viewable in compare view

Updates @types/styled-system from 3.2.2 to 5.1.22

Commits

• See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

---

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot show <dependency name> ignore conditions will show all of the ignore conditions of the specified dependency
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

[bl-nero]

All problems fixed, this PR is now ready for review. It's recommended to review it commit by commit.

Summary of changes:

• The new styled-system changes the underlying algorithm a bit. The defaultProps are applied on top of missing props from the call site. The side effect is that in case if defaultProps define a shorthand property and the component call site defines a value for corresponding non-shorthand property, defaultProps wins, as it's applied later. To fix this, I moved style-related props from defaultProps right to the CSS definitions, and reapplied style functions where necessary.
• Added ImageProps, it was required to support the alt attribute.
• Replaced our borderRadius style function with the built-in one.

[bl-nero]

Accompanying Enterprise change: https://github.com/gravitational/teleport.e/pull/4617

[kimlisa]

poked around a little in the web UI lgtm

[kimlisa]

is style required to do something like this?

<Image style={{css}} />

[bl-nero]

Yes. We might avoid listing these properties separately, and instead use the construct that basically says "all allowed attributes of Image element", but I encountered some problems there, and decided it's not worth generalizing if right now, we only use these two.