Create `color-no-rgb` rule

[georgewrmarshall]

Description

To enhance code quality and ensure alignment with our design system, we propose a new ESLint rule, color-no-rgb, for inclusion in the eslint-plugin-metamask-design-tokens package. This rule aims to prevent the use of static RGBA and RGB color values (e.g., rgba(255, 255, 255, 0.5), rgb(255, 0, 0)) in styles, which bypass our design system's color tokens. Enforcing this rule ensures that all color definitions within our codebase are consistent, maintainable, and aligned with predefined design tokens, facilitating easier theming, reusability, and updates to the color palette.

Technical Details

• Rule Name: color-no-rgb
• Implementation:
  • Compile a list of patterns that match common usages of static RGBA and RGB values.
  • Develop the ESLint rule to scan the codebase for instances where these patterns are used.
  • Upon detection, the rule should flag the usage and recommend the corresponding design token as a replacement.
• Integration: Incorporate the color-no-rgb rule into the eslint-plugin-metamask-design-tokens package. The rule should be configurable to allow for project-specific adjustments.

Acceptance Criteria

• The color-no-rgb rule is effectively integrated into the eslint-plugin-metamask-design-tokens package.
• The rule successfully identifies and flags instances of static RGBA and RGB values within the codebase.
• Developers receive clear, actionable feedback from the rule, including suggestions for the appropriate design token replacements.
• Comprehensive documentation for the rule is available in the eslint-plugin-metamask-design-tokens README, explaining its purpose, configuration options, and examples of flagged code versus compliant code.

Additional Notes

Implementing this ESLint rule is a proactive measure to eliminate reliance on static RGBA and RGB values in favor of our design system's color tokens. This approach not only simplifies color management across our projects but also reinforces our commitment to a unified and accessible user interface design.

Tracking

This initiative is a crucial aspect of our ongoing efforts to enforce design system adherence and reduce technical debt. Progress and developments related to this task will be meticulously tracked through this GitHub issue, ensuring transparency and accountability throughout the implementation process.