Using custom properties fallback plugin to fallback primitives (#1990)

Co-authored-by: Katie Langerman <langermank@users.noreply.github.com>
Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com>

.changeset/shy-cows-drive.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Add custom properties fallback plugin to fallback primitives v8 colors

docs/package.json

@@ -11,7 +11,7 @@
     "@primer/css": "^21.0.1",
     "@primer/gatsby-theme-doctocat": "^4.4.2",
     "@primer/octicons-react": "^18.3.0",
-    "@primer/primitives": "^7.11.7",
+    "@primer/primitives": "^7.11.10",
     "@primer/react": "^35.25.1",
     "gatsby": "^2.24.63",
     "react": "^16.13.1",

package.json

@@ -65,7 +65,7 @@
     "@github/prettier-config": "0.0.4",
     "@playwright/test": "^1.27.1",
     "@primer/css": "21.0.1",
-    "@primer/primitives": "^7.11.7",
+    "@primer/primitives": "^7.11.10",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.3.3",
     "@typescript-eslint/eslint-plugin": "^5.31.0",
@@ -82,6 +82,7 @@
     "playwright": "^1.27.1",
     "postcss": "^8.4.16",
     "postcss-cli": "^10.0.0",
+    "postcss-custom-properties-fallback": "^1.0.2",
     "postcss-import": "^14.1.0",
     "postcss-mixins": "^9.0.3",
     "postcss-preset-env": "^7.8.0",

postcss.config.js

@@ -1,4 +1,5 @@
 const path = require('path')
+const importedJSONFromPrimitives = require('./node_modules/@primer/primitives/tokens-next-private/fallbacks/color-fallbacks.json')
 
 module.exports = {
   map: {
@@ -9,6 +10,11 @@ module.exports = {
     require('postcss-mixins')({
         mixinsDir: path.join(__dirname, './lib/postcss_mixins/')
     }),
+    require('postcss-custom-properties-fallback')({
+      importFrom: {
+        customProperties: importedJSONFromPrimitives
+      },
+    }),
     require('postcss-preset-env')({
       stage: 2,
       // https://preset-env.cssdb.org/features/#stage-2

static/classes.json

@@ -375,10 +375,10 @@
   "ActionListWrap--inset": [
     "Primer::Alpha::ActionList"
   ],
-  "ActionListItem-action": [
+  "ActionListItem-visual": [
     "Primer::Alpha::ActionList"
   ],
-  "ActionListItem-visual": [
+  "ActionListItem-action": [
     "Primer::Alpha::ActionList"
   ],
   "SegmentedControl-item": [
@@ -513,10 +513,10 @@
   "FormControl-inlineValidation": [
     "Primer::Alpha::TextField"
   ],
-  "FormControl-check-group-wrap": [
+  "FormControl-radio-group-wrap": [
     "Primer::Alpha::TextField"
   ],
-  "FormControl-radio-group-wrap": [
+  "FormControl-check-group-wrap": [
     "Primer::Alpha::TextField"
   ],
   "Popover-message--bottom-left": [