Feat/22712/improve ds token linting (#22819)

## **Description**
The Design Systems team is dedicated to maintaining consistency across
all colors by linking them to `design-tokens`. To help encourage the
adoption of design tokens, we issue warnings to developers who use
static hex codes. However, we recognize that using design tokens might
not always be feasible, which is why these warnings serve as gentle
reminders rather than strict enforcement.
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Related issues**

Fixes: #22712 

## **Manual testing steps**

1. Visit a stylesheet file
2. Enter in a hex value (e.g. `color: #fff;`)
3. Confirm you see a warning highlight under the hex

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**
<img width="294" alt="Screenshot 2024-02-05 at 12 13 42 PM"
src="https://github.com/MetaMask/metamask-extension/assets/26469696/4522de70-39d9-461d-9386-55de2644d02d">

<!-- [screenshots/recordings] -->

### **After**
<img width="261" alt="Screenshot 2024-02-05 at 12 14 37 PM"
src="https://github.com/MetaMask/metamask-extension/assets/26469696/93eeedfb-d2c4-4849-b424-b7b8636c7f97">
<img width="616" alt="Screenshot 2024-02-05 at 11 53 52 AM"
src="https://github.com/MetaMask/metamask-extension/assets/26469696/5bbf9d4f-5647-4fcb-89a3-8a6247523485">
<img width="977" alt="Screenshot 2024-02-05 at 12 07 45 PM"
src="https://github.com/MetaMask/metamask-extension/assets/26469696/1f807cf1-e72c-49a9-9e09-6119ff140ec5">



<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [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
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
- [x] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [x] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **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.

stylelint.config.js

@@ -122,6 +122,8 @@ module.exports = {
     // custom rules
 
     // 'color-named': 'never',
+    // This rule checks for the usage of hexadecimal color values and warns about it to encourage the use of Design Tokens https://github.com/MetaMask/design-tokens/
+    'color-no-hex': [true, { severity: 'warning' }],
     // 'font-family-name-quotes': 'always-where-recommended',
     // 'font-weight-notation': 'numeric',
     // 'function-url-quotes': 'always',

ui/components/component-library/README.md

@@ -38,7 +38,10 @@ We understand some customization to styles or access to children components is n
 
 #### Styles
 
-> Note: If you are seeing a disparity between styles in Figma and code that's a red flag and could mean there is bug between design system Figma and code component. We recommend posting it on our slack channel [#metamask-design-system](https://consensys.slack.com/archives/C0354T27M5M) so we can support you on it
+> Note:
+>
+> - If you are seeing a disparity between styles in Figma and code that's a red flag and could mean there is bug between design system Figma and code component. We recommend posting it on our slack channel [#metamask-design-system](https://consensys.slack.com/archives/C0354T27M5M) so we can support you on it
+> - If you come across the warning `Unexpected hex color` when using a hex value in a stylesheet, it is there to encourage the use of [MetaMask's design-tokens](https://github.com/MetaMask/design-tokens/) color variables instead of hardcoding hex values. This helps maintain consistency and makes updating colors across the app easier.
 
 We try to utilize the `Box` component style utility props as much as possible in our components. Style utility prop overrides should be your first option. This allows you to change styles right inside of the component and reduces the amount of CSS in the codebase. If there are no style utility props for the customization required you can attach a class name to the component using the `className` prop and add styling using CSS.