Merge branch 'main' into bs/rule-for-tooltip-v2

Author: broccolinisoup

CHANGELOG.md

@@ -1,5 +1,11 @@
 # eslint-plugin-primer-react
 
+## 4.0.4
+
+### Patch Changes
+
+- [#122](https://github.com/primer/eslint-plugin-primer-react/pull/122) [`3bc226a`](https://github.com/primer/eslint-plugin-primer-react/commit/3bc226ad0786f9a7a21ce92a63cbba17b8a5b763) Thanks [@lukasoppermann](https://github.com/lukasoppermann)! - New rule: new-color-css-vars-have-fallback: checks that if a new color var is used, it has a fallback value
+
 ## 4.0.3
 
 ### Patch Changes
@@ -151,7 +157,7 @@
   function ExampleComponent() {
     const styles = {
       // Enabling `checkAllStrings` will find deprecated colors used like this:
-      color: 'text.primary'
+      color: 'text.primary',
     }
     return <Box sx={styles}>Hello</Box>
   }

docs/rules/new-color-css-vars-have-fallback.md

@@ -0,0 +1,25 @@
+## Ensure new Primitive v8 color CSS vars have a fallback
+
+This rule is temporary as we begin testing v8 color tokens behind a feature flag. If a color token is used without a fallback, the color will only render if the feature flag is enabled. This rule is an extra safety net to ensure we don't accidentally ship code that relies on the feature flag.
+
+## Rule Details
+
+This rule refers to a JSON file that lists all the new color tokens
+
+```json
+["--fgColor-default", "--fgColor-muted", "--fgColor-onEmphasis"]
+```
+
+If it finds that one of these tokens is used without a fallback, it will throw an error.
+
+👎 Examples of **incorrect** code for this rule
+
+```jsx
+<Button sx={{color: 'var(--fgColor-muted)'}}>Test</Button>
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+<Button sx={{color: 'var(--fgColor-muted, var(--color-fg-muted))'}}>Test</Button>
+```