chore: updating doc components and helpers

[georgewrmarshall]

Description

This PR updates Storybook documentation components and helpers. No tokens are affected in this update; only the documentation components and helpers have been modified. The purpose of these changes is to separate non-breaking changes from PR #698 for easier review and to facilitate the comparison of token changes.

• Updates ColorSwatchs to use black/white text dependent on tone
• Fixes bug with displaying network colors in JS tokens
• Adds white and black color JSON
• Breaks out logic from UI components into helper functions

Related issues

Fixes: N/A

Manual testing steps

1. Open Storybook.
2. Navigate through brand color and theme stories
3. Verify that the changes reflect correctly and that no tokens have been affected.

Screenshots/Recordings

Before

https://github.com/MetaMask/design-tokens/assets/8112138/d41b6877-18ef-4daf-99a8-8c56f4b97b21

After

https://github.com/MetaMask/design-tokens/assets/8112138/1b85070a-5585-4eb8-afba-f76dcdad5ca0

Pre-merge author checklist

• [x] I’ve followed MetaMask Coding Standards.
• [x] I've clearly explained what problem this PR is solving and how it is solved.
• [x] I've linked related issues
• [x] I've included manual testing steps
• [x] I've included screenshots/recordings if applicable
• [x] I’ve included tests if applicable
• [x] I’ve documented my code using JSDoc format if applicable
• [x] I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.
• [x] I’ve properly set the pull request status:
  • [x] In case it's not yet "ready for review", I've set it to "draft".
  • [x] In case it's "ready for review", I've changed it from "draft" to "non-draft".

Pre-merge reviewer checklist

• [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[metamaskbot]

Builds ready [f7496ef]

Storybook: Storybook