Feature: Updating colors to use new coordinated color steps

[stephiescastle]

Checklist

• Include a description of your pull request and instructions for the reviewer to verify your work.
• Link to the issue if this PR is issue-specific.
• Create/update the corresponding story if this includes a UI component.
• Create/update documentation. If not included, tell us why.
• List the environments / browsers in which you tested your changes.
• Tests, linting, or other required checks are passing.
• PR has an informative and human-readable title
  • PR titles are used to generate the change log in releases; good ones make that easier to scan.
  • PRs will be broadly categorized in the change log, but for even easier scanning, consider prefixing with a component name or other useful categorization, e.g., "BaseButton: fix layout bug", or "Storybook: Update dependencies".
• PR has been tagged with a SemVer label and a general category label, or skip-changelog.
  • These tags are used to do the aforementioned broad categorization in the change log and determine what the next release's version number should be.
  • Release Drafter will attempt to do the category labeling for you! Please double-check its work.

Description

Updates colors to use updated color steps defined in this figma document.

Changes some color token names, so this will introduce breaking changes.

Instructions to test

1. pnpm i
2. make vue-storybook
3. view http://localhost:6006/?path=/docs/foundation-colors--docs

Tested in the following environments/browsers:

Operating System

• macOS
• iOS
• iPadOS
• Windows

Browser

• Chrome
• Firefox ESR
• Firefox
• Safari
• Edge

[jamesray]

👏