[Breaking] Remove new-color-css-vars-have-fallback

.changeset/smooth-penguins-exercise.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-primer-react": major
+---
+
+[Breaking] Remove `new-color-css-vars-have-fallback`

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

@@ -2,7 +2,7 @@
 
 CSS variables are allowed within the `sx` prop in Primer React components. However, the legacy color CSS variables are
 deprecated in favor of the new CSS variables introduced in Primitives v8. This rule will warn you if you are using the
-deprecated color CSS variables in the `sx` prop, and autofix it including a fallback to the old value.
+deprecated color CSS variables in the `sx` prop, and autofix it.
 
 ## Rule Details
 
@@ -36,5 +36,5 @@ one based on the property. We only check `sx` because `stylelint` is used to lin
 👍 Examples of **correct** code for this rule:
 
 ```jsx
-<Button sx={{color: 'var(--fgColor-muted, var(--color-fg-muted))'}}>Test</Button>
+<Button sx={{color: 'var(--fgColor-muted)'}}>Test</Button>
 ```

src/configs/recommended.js

@@ -16,7 +16,6 @@ module.exports = {
     'primer-react/a11y-tooltip-interactive-trigger': 'error',
     'primer-react/new-color-css-vars': 'error',
     'primer-react/a11y-explicit-heading': 'error',
-    'primer-react/new-color-css-vars-have-fallback': 'error',
     'primer-react/no-deprecated-props': 'warn',
   },
   settings: {

src/index.js

@@ -7,7 +7,6 @@ module.exports = {
     'a11y-tooltip-interactive-trigger': require('./rules/a11y-tooltip-interactive-trigger'),
     'new-color-css-vars': require('./rules/new-color-css-vars'),
     'a11y-explicit-heading': require('./rules/a11y-explicit-heading'),
-    'new-color-css-vars-have-fallback': require('./rules/new-color-css-vars-have-fallback'),
     'no-deprecated-props': require('./rules/no-deprecated-props'),
   },
   configs: {

src/rules/new-color-css-vars.js

@@ -33,10 +33,10 @@ const reportError = (propertyName, valueNode, context, suggestFix = true) => {
     // report the error
     context.report({
       node: valueNode,
-      message: `Replace var(${cssVar}) with var(${varObjectForProp.replacement}, var(${cssVar}))`,
+      message: `Replace var(${cssVar}) with var(${varObjectForProp.replacement})`,
       fix: suggestFix
         ? fixer => {
-            const fixedString = value.replaceAll(cssVar, `${varObjectForProp.replacement}, var(${cssVar})`)
+            const fixedString = value.replaceAll(cssVar, `${varObjectForProp.replacement}`)
             return fixer.replaceText(valueNode, valueNode.type === 'Literal' ? `'${fixedString}'` : fixedString)
           }
         : undefined,