Write stylint rule that disallows incorrect design token colors

### Description
Now that we are using the new design token colors we should encourage and help engineers continue the initiative by providing tooling to help catch incorrect use of colors in local development. This will ensure their continued use and prevent any incorrect colors slipping through during the review process. One way we could achieve this is by creating a stylint rule that catches the implementation of unofficial design tokens during local development.

### Technical details
- Create a stylint rule that only allows the approved colors from the design token repo.
- Also allow for these rules to be ignored for cases where third party colors are required

### Acceptance criteria
- Stylint catches any new static color values hex, rgba, hsla etc
- Stylnt catches any mistyped/misspelled design token color css variables e.g(`--color-bakground-default` should be `--color-background-default`)
- Allow for rule to be ignored
- When stylint does catch an incorrect color it should provide resources to the correct design token colors

### References
[Color storybook](https://metamask.github.io/metamask-storybook/index.html?path=/story/design-tokens-color--page)
[design-token css variables](https://github.com/MetaMask/design-tokens/blob/main/src/css/design-tokens.css#L78-L120)
https://stylelint.io/
https://www.michaelmang.dev/blog/linting-design-tokens-with-stylelint

Start by reviewing the approved variables in the design-tokens.css reference and the Stylelint documentation, then compare the linked design-token guidance with the repository's linting setup. Done means a rule rejects unapproved static colors and misspelled token variables, supports an ignore mechanism, and points users to the approved token resources.

Written by the indexing model from the issue text.