fix: css stories use css variables instead of static color values

[georgewrmarshall]

Description

This pull request introduces a refactor to the ColorSwatch component by adding a backgroundColor prop that defaults to the color prop's value. This enhancement allows for the background color of the swatch to be different from the color value. Additonally the CSS stories have been updated to utilize CSS variables for the swatch background color. This change ensures a more accurate representation of CSS variables.

Related issues

Fixes: https://github.com/MetaMask/design-tokens/issues/695

Manual testing steps

1. Go to the storybook build of this PR
2. Go to the CSS stories for brand color, light theme and dark theme
3. Verify the swatches are using the CSS variable and not the static color value
4. Ensure other stories are still rendering correctly for Figma and JS

Screenshots/Recordings

Before

https://github.com/MetaMask/design-tokens/assets/8112138/a671b5f1-5b2a-40c9-a26e-da8396620cc2

After

https://github.com/MetaMask/design-tokens/assets/8112138/3733ccbc-5e68-49c9-9e8a-b5aa2c785a32

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.
• [x] I’ve set the pull request status to "draft" and will update it to "ready for review" once all checks are passed.

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.