From cdf238035a055bdf1fa2460e423bfc31294ea654 Mon Sep 17 00:00:00 2001 From: Garrett Bear Date: Mon, 5 Feb 2024 17:51:04 -0800 Subject: [PATCH] Feat/22712/improve ds token linting (#22819) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **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. ## **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** ### **Before** Screenshot 2024-02-05 at 12 13 42 PM ### **After** Screenshot 2024-02-05 at 12 14 37 PM Screenshot 2024-02-05 at 11 53 52 AM Screenshot 2024-02-05 at 12 07 45 PM ## **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 | 2 ++ ui/components/component-library/README.md | 5 ++++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/stylelint.config.js b/stylelint.config.js index 00902185358a..0a8063b01685 100644 --- a/stylelint.config.js +++ b/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', diff --git a/ui/components/component-library/README.md b/ui/components/component-library/README.md index a421c8ae1ae2..ec5006d3491f 100644 --- a/ui/components/component-library/README.md +++ b/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.