Revert "[Breaking] Remove no-deprecated-colors plugin (#169)" (#173)

This reverts commit 2576a9f.

Author: langermank

.changeset/shiny-kiwis-hammer.md

@@ -32,6 +32,7 @@ ESLint rules for Primer React
 ## Rules
 
 - [direct-slot-children](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/direct-slot-children.md)
+- [no-deprecated-colors](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-deprecated-colors.md)
 - [no-system-props](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-system-props.md)
 - [a11y-tooltip-interactive-trigger](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-tooltip-interactive-trigger.md)
 - [a11y-explicit-heading](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/a11y-explicit-heading.md)

README.md

@@ -0,0 +1,91 @@
+# Disallow references to deprecated color variables (no-deprecated-colors)
+
+🔧 The `--fix` option on the [ESLint CLI](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can
+automatically fix some of the problems reported by this rule.
+
+[Theming](https://primer.style/react/theming) in Primer React is made possible by a theme object that defines your
+application's colors, spacing, fonts, and more. The color variables in Primer React's
+[default theme object](https://primer.style/react/theme-reference) are pulled from
+[Primer Primitives](https://github.com/primer/primitives). When a color variable is deprecated in Primer Primitives,
+it's important to remove references to that color variable in your application before it's removed from the library.
+
+## Rule details
+
+This rule disallows references to color variables that are deprecated in
+[Primer Primitives](https://github.com/primer/primitives).
+
+👎 Examples of **incorrect** code for this rule:
+
+```jsx
+/* eslint primer-react/no-deprecated-colors: "error" */
+import {Box, themeGet} from '@primer/react'
+import styled from 'styled-components'
+
+const SystemPropExample() = () => <Box color="some.deprecated.color">Incorrect</Box>
+
+const SxPropExample() = () => <Box sx={{color: 'some.deprecated.color'}}>Incorrect</Box>
+
+const SxPropExample2() = () => <Box sx={{boxShadow: theme => `0 1px 2px ${theme.colors.some.deprecated.color}`}}>Incorrect</Box>
+
+const ThemeGetExample = styled.div`
+  color: ${themeGet('colors.some.deprecated.color')};
+`
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+/* eslint primer-react/no-deprecated-colors: "error" */
+import {Box, themeGet} from '@primer/react'
+import styled from 'styled-components'
+
+const SystemPropExample() = () => <Box color="some.color">Correct</Box>
+
+const SxPropExample() = () => <Box sx={{color: 'some.color'}}>Correct</Box>
+
+const SxPropExample2() = () => <Box sx={{boxShadow: theme => `0 1px 2px ${theme.colors.some.color}`}}>Correct</Box>
+
+const ThemeGetExample = styled.div`
+  color: ${themeGet('colors.some.color')};
+`
+```
+
+## Options
+
+- `skipImportCheck` (default: `false`)
+
+  By default, the `no-deprecated-colors` rule will only check for deprecated colors used in functions and components
+  that are imported from `@primer/react`. You can disable this behavior by setting `skipImportCheck` to `true`. This is
+  useful for linting custom components that pass color-related props down to Primer React components.
+
+  ```js
+  /* eslint primer-react/no-deprecated-colors: ["warn", {"skipImportCheck": true}] */
+  import {Box} from '@primer/react'
+
+  function MyBox({color, children}) {
+    return <Box color={color}>{children}</Box>
+  }
+
+  function App() {
+    // Enabling `skipImportCheck` will find deprecated colors used like this:
+    return <MyBox color="text.primary">Hello</MyBox>
+  }
+  ```
+
+- `checkAllStrings` (default: `false`)
+
+  If `checkAllStrings` is set to `true`, the `no-deprecated-colors` rule will check for deprecated colors in all
+  strings. This is useful for catching uses of deprecated colors outside system props and the `sx` prop.
+
+  ```js
+  /* eslint primer-react/no-deprecated-colors: ["warn", {"checkAllStrings": true}] */
+  import {Box} from '@primer/react'
+
+  function ExampleComponent() {
+    const styles = {
+      // Enabling `checkAllStrings` will find deprecated colors used like this:
+      color: 'text.primary',
+    }
+    return <Box sx={styles}>Hello</Box>
+  }
+  ```

docs/rules/no-deprecated-colors.md

@@ -25,6 +25,7 @@
   },
   "homepage": "https://github.com/primer/eslint-plugin-primer-react#readme",
   "peerDependencies": {
+    "@primer/primitives": ">=4.6.2",
     "eslint": "^8.42.0"
   },
   "dependencies": {
@@ -40,6 +41,7 @@
     "@changesets/cli": "^2.16.0",
     "@github/markdownlint-github": "^0.6.0",
     "@github/prettier-config": "0.0.6",
+    "@primer/primitives": "^7.14.0",
     "eslint": "^8.42.0",
     "eslint-plugin-prettier": "^5.0.1",
     "jest": "^29.7.0",

package-lock.json

@@ -11,6 +11,7 @@ module.exports = {
   extends: ['plugin:github/react'],
   rules: {
     'primer-react/direct-slot-children': 'error',
+    'primer-react/no-deprecated-colors': 'warn',
     'primer-react/no-system-props': 'warn',
     'primer-react/a11y-tooltip-interactive-trigger': 'error',
     'primer-react/new-color-css-vars': 'error',

package.json

@@ -1,6 +1,7 @@
 module.exports = {
   rules: {
     'direct-slot-children': require('./rules/direct-slot-children'),
+    'no-deprecated-colors': require('./rules/no-deprecated-colors'),
     'no-deprecated-entrypoints': require('./rules/no-deprecated-entrypoints'),
     'no-system-props': require('./rules/no-system-props'),
     'a11y-tooltip-interactive-trigger': require('./rules/a11y-tooltip-interactive-trigger'),