Create prefer-theme-color-js-tokens rule

[georgewrmarshall]

Description

Implement a new ESLint rule to encourage the use of theme color tokens in lightTheme and darkTheme over the brandColor object, similar to the existing prefer-theme-color-classnames rule. This new rule will help enforce consistent theming across projects by preferring light and dark theme color tokens.

Technical Details

• Create a rule within the @metamask/design-tokens plugin to enforce the use of theme color JS tokens instead of colors inside of the brandColor object.
• The rule should check for literal color references and suggest the corresponding theme color tokens from the light and dark themes.

Acceptance Criteria

• The rule must detect direct literal color references like brandColor.blue050, brandColor.white, brandColor.black etc and suggest the corresponding theme color tokens.
• Proper documentation must be added, similar to the prefer-theme-color-classnames rule.
• Unit tests must be included to verify the rule's functionality.
• Ensure compatibility with existing ESLint configurations used in MetaMask projects.

References

• prefer-theme-color-classnames rule documentation
• MetaMask Coding Standards
• Related issues: MetaMask/metamask-extension#19970, MetaMask/metamask-extension#21370

This rule aims to ensure that theme colors are centralized and easily manageable, promoting consistent theming and simplifying updates across the project's UI.