Merge branch 'main' into vercel_action

Author: jonrohan

.browserslistrc

@@ -159,4 +159,18 @@ The benefit of `auto` over the `scale` variables is that `auto` variables automa
 <style>code { margin-right: 16px; }</style>
 ```
 
-In general, use `auto` variables if the results give enough constrast or create custom variables for further fine tuning.
+**Note**: If you use `stylelint`, the [`primer/no-scale-colors`](https://github.com/primer/stylelint-config-primer/tree/main/plugins#primerno-scale-colors) will fail with "[variable] is a non-functional scale color and cannot be used without being wrapped in the color-variables mixin". You can disable stylelint for this case by adding `// stylelint-disable-line`:
+
+```scss
+.my-class {
+  color: var(--color-auto-gray-7); // stylelint-disable-line
+}
+```
+
+---
+
+In general, 
+
+1. use [functional variables](/support/color-system) as much as possible.
+2. create new [custom color variables](/getting-started/theming#custom-color-variables) if there is no functional variable that fits the use case.
+3. as an alternaitve to custom color variables, use [`auto` variables](/getting-started/theming#auto-variables) if the results give enough constrast.

.eslintrc.json

@@ -78,5 +78,28 @@
       "/node_modules/",
       "/__tests__/utils/"
     ]
+  },
+  "browserslist": [
+    "> 5%",
+    "last 2 firefox versions",
+    "last 2 chrome versions",
+    "last 2 safari versions",
+    "last 2 edge versions",
+    "ie 11"
+  ],
+  "eslintConfig": {
+    "extends": [
+      "plugin:github/internal",
+      "plugin:github/recommended"
+    ],
+    "env": {
+      "es6": true,
+      "node": true
+    },
+    "parserOptions": {
+      "ecmaVersion": 2017,
+      "requireConfigFile": false
+    },
+    "parser": "@babel/eslint-parser"
   }
 }