@primer/stylelint-config 12.7.1-rc.c4a4e27 → 12.7.1-rc.d8a889b

package/CHANGELOG.md

@@ -8,8 +8,12 @@
 
 - [#332](https://github.com/primer/stylelint-config/pull/332) [`6485cf0`](https://github.com/primer/stylelint-config/commit/6485cf053f502d71a8ce8c407ad01a939038959c) Thanks [@langermank](https://github.com/langermank)! - Updated deprecated json color file
 
+- [#333](https://github.com/primer/stylelint-config/pull/333) [`485ce04`](https://github.com/primer/stylelint-config/commit/485ce047d75a635134919678a776ea808604cf4a) Thanks [@langermank](https://github.com/langermank)! - Adding more color replacements for deprecated colors
+
 - [#322](https://github.com/primer/stylelint-config/pull/322) [`726d7d1`](https://github.com/primer/stylelint-config/commit/726d7d1bf4eac82a032c448cb0be32d5bf66b29a) Thanks [@jonrohan](https://github.com/jonrohan)! - Updating no-deprecated-colors for primitives v8
 
+- [#334](https://github.com/primer/stylelint-config/pull/334) [`b14c154`](https://github.com/primer/stylelint-config/commit/b14c154174ddd7190e62fe1d26698fc9cfe75c17) Thanks [@langermank](https://github.com/langermank)! - More tests for `no-deprecated-colors`
+
 ## 12.7.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/stylelint-config",
-  "version": "12.7.1-rc.c4a4e27",
+  "version": "12.7.1-rc.d8a889b",
   "description": "Sharable stylelint config used by GitHub's CSS",
   "homepage": "http://primer.style/css/tools/linting",
   "author": "GitHub, Inc.",
@@ -44,7 +44,7 @@
     "@primer/css": "^20.0.0",
     "@primer/primitives": "^7.8.3",
     "dedent": "0.7.0",
-    "eslint": "8.22.0",
+    "eslint": "8.39.0",
     "eslint-plugin-github": "4.3.5",
     "eslint-plugin-jest": "27.0.1",
     "eslint-plugin-prettier": "4.2.1",

package/plugins/lib/primitives-v8.json

@@ -604,7 +604,7 @@
   "--color-action-list-item-inline-divider": [
     {
       "props": ["border", "background"],
-      "replacement": "--borderColor-decorative"
+      "replacement": "--borderColor-muted"
     }
   ],
   "--color-action-list-item-default-hover-bg": [
@@ -727,7 +727,12 @@
       "replacement": "--control-checked-fgColor-disabled"
     }
   ],
-  "--color-switch-track-checked-border": [],
+  "--color-switch-track-checked-border": [
+    {
+      "props": ["border"],
+      "replacement": "transparent"
+    }
+  ],
   "--color-switch-knob-bg": [
     {
       "props": ["background"],
@@ -806,28 +811,45 @@
       "replacement": "--treeViewItem-leadingVisual-bgColor-rest"
     }
   ],
-  "--color-canvas-default-transparent": [],
+  "--color-canvas-default-transparent": [
+    {
+      "props": ["background"],
+      "replacement": "transparent"
+    }
+  ],
   "--color-fg-default": [
     {
       "props": ["color", "fill"],
       "replacement": "--fgColor-default"
+    },
+    {
+      "props": ["background"],
+      "replacement": "--fgColor-default"
     }
   ],
   "--color-fg-muted": [
     {
       "props": ["color", "fill"],
       "replacement": "--fgColor-muted"
+    },
+    {
+      "props": ["background"],
+      "replacement": "--bgColor-neutral-emphasis"
     }
   ],
   "--color-fg-subtle": [
     {
       "props": ["color", "fill"],
       "replacement": "--fgColor-muted"
+    },
+    {
+      "props": ["border"],
+      "replacement": "--borderColor-neutral-emphasis"
     }
   ],
   "--color-fg-on-emphasis": [
     {
-      "props": ["color", "fill"],
+      "props": ["color", "fill", "border"],
       "replacement": "--fgColor-onEmphasis"
     }
   ],
@@ -835,6 +857,10 @@
     {
       "props": ["background"],
       "replacement": "--bgColor-default"
+    },
+    {
+      "props": ["border", "box-shadow"],
+      "replacement": "--bgColor-default"
     }
   ],
   "--color-canvas-overlay": [
@@ -863,13 +889,13 @@
   ],
   "--color-border-muted": [
     {
-      "props": ["border", "background"],
+      "props": ["border", "background", "outline"],
       "replacement": "--borderColor-muted"
     }
   ],
   "--color-border-subtle": [
     {
-      "props": ["border", "background"],
+      "props": ["border", "background", "outline"],
       "replacement": "--borderColor-muted"
     }
   ],
@@ -885,13 +911,17 @@
       "replacement": "--bgColor-neutral-emphasis"
     },
     {
-      "props": ["border"],
+      "props": ["border", "box-shadow"],
       "replacement": "--borderColor-neutral-emphasis"
+    },
+    {
+      "props": ["color"],
+      "replacement": "--fgColor-neutral"
     }
   ],
   "--color-neutral-muted": [
     {
-      "props": ["border"],
+      "props": ["border", "box-shadow"],
       "replacement": "--borderColor-neutral-muted"
     },
     {
@@ -911,8 +941,12 @@
       "replacement": "--fgColor-accent"
     },
     {
-      "props": ["border"],
+      "props": ["border", "box-shadow"],
       "replacement": "--borderColor-accent-emphasis"
+    },
+    {
+      "props": ["background"],
+      "replacement": "--bgColor-accent-emphasis"
     }
   ],
   "--color-accent-emphasis": [
@@ -921,7 +955,7 @@
       "replacement": "--bgColor-accent-emphasis"
     },
     {
-      "props": ["border"],
+      "props": ["border", "box-shadow"],
       "replacement": "--borderColor-accent-emphasis"
     },
     {
@@ -931,8 +965,12 @@
   ],
   "--color-accent-muted": [
     {
-      "props": ["border"],
+      "props": ["border", "box-shadow"],
       "replacement": "--borderColor-accent-muted"
+    },
+    {
+      "props": ["background"],
+      "replacement": "--bgColor-accent-muted"
     }
   ],
   "--color-accent-subtle": [
@@ -945,6 +983,10 @@
     {
       "props": ["color", "fill"],
       "replacement": "--fgColor-success"
+    },
+    {
+      "props": ["background"],
+      "replacement": "--bgColor-success-emphasis"
     }
   ],
   "--color-success-emphasis": [
@@ -953,13 +995,17 @@
       "replacement": "--bgColor-success-emphasis"
     },
     {
-      "props": ["border"],
+      "props": ["border", "box-shadow"],
       "replacement": "--borderColor-success-emphasis"
+    },
+    {
+      "props": ["color"],
+      "replacement": "--fgColor-success"
     }
   ],
   "--color-success-muted": [
     {
-      "props": ["border"],
+      "props": ["border", "box-shadow"],
       "replacement": "--borderColor-success-muted"
     }
   ],
@@ -973,6 +1019,10 @@
     {
       "props": ["color", "fill"],
       "replacement": "--fgColor-attention"
+    },
+    {
+      "props": ["background"],
+      "replacement": "--bgColor-attention-emphasis"
     }
   ],
   "--color-attention-emphasis": [
@@ -981,13 +1031,17 @@
       "replacement": "--bgColor-attention-emphasis"
     },
     {
-      "props": ["border"],
+      "props": ["border", "box-shadow"],
       "replacement": "--borderColor-attention-emphasis"
+    },
+    {
+      "props": ["color"],
+      "replacement": "--fgColor-attention"
     }
   ],
   "--color-attention-muted": [
     {
-      "props": ["border"],
+      "props": ["border", "box-shadow"],
       "replacement": "--borderColor-attention-muted"
     }
   ],
@@ -1001,6 +1055,10 @@
     {
       "props": ["color", "fill"],
       "replacement": "--fgColor-severe"
+    },
+    {
+      "props": ["background"],
+      "replacement": "--bgColor-severe-emphasis"
     }
   ],
   "--color-severe-emphasis": [
@@ -1009,13 +1067,17 @@
       "replacement": "--bgColor-severe-emphasis"
     },
     {
-      "props": ["border"],
+      "props": ["border", "box-shadow"],
       "replacement": "--borderColor-severe-emphasis"
+    },
+    {
+      "props": ["color"],
+      "replacement": "--fgColor-severe"
     }
   ],
   "--color-severe-muted": [
     {
-      "props": ["border"],
+      "props": ["border", "box-shadow"],
       "replacement": "--borderColor-severe-muted"
     }
   ],
@@ -1029,6 +1091,10 @@
     {
       "props": ["color", "fill"],
       "replacement": "--fgColor-danger"
+    },
+    {
+      "props": ["background"],
+      "replacement": "--bgColor-danger-emphasis"
     }
   ],
   "--color-danger-emphasis": [
@@ -1037,13 +1103,17 @@
       "replacement": "--bgColor-danger-emphasis"
     },
     {
-      "props": ["border"],
+      "props": ["border", "box-shadow"],
       "replacement": "--borderColor-danger-emphasis"
+    },
+    {
+      "props": ["color"],
+      "replacement": "--fgColor-danger"
     }
   ],
   "--color-danger-muted": [
     {
-      "props": ["border"],
+      "props": ["border", "box-shadow"],
       "replacement": "--borderColor-danger-muted"
     }
   ],
@@ -1057,6 +1127,10 @@
     {
       "props": ["color", "fill"],
       "replacement": "--fgColor-open"
+    },
+    {
+      "props": ["background"],
+      "replacement": "--bgColor-open-emphasis"
     }
   ],
   "--color-open-emphasis": [
@@ -1065,13 +1139,17 @@
       "replacement": "--bgColor-open-emphasis"
     },
     {
-      "props": ["border"],
+      "props": ["border", "box-shadow"],
       "replacement": "--borderColor-open-emphasis"
+    },
+    {
+      "props": ["color"],
+      "replacement": "--fgColor-open"
     }
   ],
   "--color-open-muted": [
     {
-      "props": ["border"],
+      "props": ["border", "box-shadow"],
       "replacement": "--borderColor-open-muted"
     }
   ],
@@ -1085,6 +1163,10 @@
     {
       "props": ["color", "fill"],
       "replacement": "--fgColor-closed"
+    },
+    {
+      "props": ["background"],
+      "replacement": "--bgColor-closed-emphasis"
     }
   ],
   "--color-closed-emphasis": [
@@ -1093,13 +1175,17 @@
       "replacement": "--bgColor-closed-emphasis"
     },
     {
-      "props": ["border"],
+      "props": ["border", "box-shadow"],
       "replacement": "--borderColor-closed-emphasis"
+    },
+    {
+      "props": ["color"],
+      "replacement": "--fgColor-closed"
     }
   ],
   "--color-closed-muted": [
     {
-      "props": ["border"],
+      "props": ["border", "box-shadow"],
       "replacement": "--borderColor-closed-muted"
     }
   ],
@@ -1113,6 +1199,10 @@
     {
       "props": ["color", "fill"],
       "replacement": "--fgColor-done"
+    },
+    {
+      "props": ["background"],
+      "replacement": "--bgColor-done-emphasis"
     }
   ],
   "--color-done-emphasis": [
@@ -1121,13 +1211,17 @@
       "replacement": "--bgColor-done-emphasis"
     },
     {
-      "props": ["border"],
+      "props": ["border", "box-shadow"],
       "replacement": "--borderColor-done-emphasis"
+    },
+    {
+      "props": ["color"],
+      "replacement": "--fgColor-done"
     }
   ],
   "--color-done-muted": [
     {
-      "props": ["border"],
+      "props": ["border", "box-shadow"],
       "replacement": "--borderColor-done-muted"
     }
   ],
@@ -1141,6 +1235,10 @@
     {
       "props": ["color", "fill"],
       "replacement": "--fgColor-sponsors"
+    },
+    {
+      "props": ["background"],
+      "replacement": "--bgColor-sponsors-emphasis"
     }
   ],
   "--color-sponsors-emphasis": [
@@ -1149,13 +1247,17 @@
       "replacement": "--bgColor-sponsors-emphasis"
     },
     {
-      "props": ["border"],
+      "props": ["border", "box-shadow"],
       "replacement": "--borderColor-sponsors-emphasis"
+    },
+    {
+      "props": ["color"],
+      "replacement": "--fgColor-sponsors"
     }
   ],
   "--color-sponsors-muted": [
     {
-      "props": ["border"],
+      "props": ["border", "box-shadow"],
       "replacement": "--borderColor-sponsors-muted"
     }
   ],
@@ -1195,6 +1297,12 @@
       "replacement": "--avatar-shadow"
     }
   ],
+  "color-btn-text": [
+    {
+      "props": ["color"],
+      "replacement": "--button-default-fgColor-rest"
+    }
+  ],
   "--color-btn-shadow": [
     {
       "props": ["box-shadow"],

package/plugins/no-deprecated-colors.js

@@ -44,14 +44,11 @@ module.exports = stylelint.createPlugin(ruleName, (enabled, options = {}, contex
       }
 
       // walk these nodes
-      if (!(node.type === 'decl' || node.type === 'atrule')) {
+      if (node.type !== 'decl') {
         return
       }
 
-      for (const [, variableName] of matchAll(
-        node.type === 'atrule' ? node.params : node.value,
-        variableReferenceRegex
-      )) {
+      for (const [, variableName] of matchAll(node.value, variableReferenceRegex)) {
         if (variableName in variableChecks) {
           let replacement = variableChecks[variableName]
           if (typeof replacement === 'object') {