feat: Expose input border colours as --reactist-inputs-* variables

[frankieyan]

Short description

This separates the CSS variables used for dividers and graphical elements' borders, from those used for input fields' borders.

To document these variables in Storybook, the four field-based components have had their documentation converted to MDX:

By having this separation, we'd be able to take advantage of the new inputs colours from Design (ref).

PR Checklist

• Added tests for bugs / new features
• Updated docs (storybooks, readme)
• Executed npm run validate and made sure no errors / warnings were shown
• Described changes in CHANGELOG.md
• Bumped version in package.json and package-lock.json (npm --no-git-tag-version version <major|minor|patch>) ref
• Reviewed and approved Chromatic visual regression tests in CI

Versioning

Minor. It's a bit of a grey area as the new variables are instantiated with the old --reactist-divider colours, keeping backwards compatibility, and existing overrides using these variables should not break.

[Bloomca]

Change looks good. I am not sure what I need (if I need to do anything) on Chromatic, though.

[frankieyan]

@Bloomca I am wondering if I should stick with the old story names (i.e. ending in "Story") so that Chromatic can match up the diffs, or leave it as is and accept the new diffs. Thoughts? cc. @gnapse

Before	After

[gnapse]

I am wondering if I should stick with the old story names (i.e. ending in "Story") so that Chromatic can match up the diffs, or leave it as is and accept the new diffs. Thoughts?

We should not keep a name only because of Chromatic. If we really find the name change to be what we want, we should do the change, even if inconvenient.

I do agree the name change is for the better.