diff --git a/.changeset/shy-cows-drive.md b/.changeset/shy-cows-drive.md new file mode 100644 index 0000000000..94df624df5 --- /dev/null +++ b/.changeset/shy-cows-drive.md @@ -0,0 +1,5 @@ +--- +"@primer/view-components": patch +--- + +Add custom properties fallback plugin to fallback primitives v8 colors diff --git a/docs/package-lock.json b/docs/package-lock.json index d6e3bb680f..e8bc01414a 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -12,7 +12,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", @@ -2487,12 +2487,9 @@ } }, "node_modules/@primer/primitives": { - "version": "7.11.7", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.7.tgz", - "integrity": "sha512-8PDEn3yj8oE/9B7o5hwjD0LSy7xz9xZ3gGTPWi/u0MxHZJ/fxERgxnBG21eCLKZ19KjhIb5AsmSQyFbGR5urYQ==", - "dependencies": { - "markdown-table-ts": "^1.0.3" - } + "version": "7.11.10", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.10.tgz", + "integrity": "sha512-KwChxyp4qbLojZx5Nz8RUElM9K+ObzZWvzkYEu76TC4qEsqb9wW7n78jyov5WhUh5+qj2Qac1iCsPfeTQG5YBw==" }, "node_modules/@primer/react": { "version": "35.25.1", @@ -28710,12 +28707,9 @@ "integrity": "sha512-kOoc4wrBw3bPe2ZPj9BmCwXdEkw8hxUX/tFCvcjOsZ6eywaQXm3PR0yZnPZxZ8o4RFj2tdg/cwGr4+cU83weHw==" }, "@primer/primitives": { - "version": "7.11.7", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.7.tgz", - "integrity": "sha512-8PDEn3yj8oE/9B7o5hwjD0LSy7xz9xZ3gGTPWi/u0MxHZJ/fxERgxnBG21eCLKZ19KjhIb5AsmSQyFbGR5urYQ==", - "requires": { - "markdown-table-ts": "^1.0.3" - } + "version": "7.11.10", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.10.tgz", + "integrity": "sha512-KwChxyp4qbLojZx5Nz8RUElM9K+ObzZWvzkYEu76TC4qEsqb9wW7n78jyov5WhUh5+qj2Qac1iCsPfeTQG5YBw==" }, "@primer/react": { "version": "35.25.1", diff --git a/docs/package.json b/docs/package.json index 392f86febd..6d5f1febf7 100644 --- a/docs/package.json +++ b/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", diff --git a/package-lock.json b/package-lock.json index e6fb439ff1..05e8fc878e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,7 +30,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", @@ -47,6 +47,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", @@ -1044,13 +1045,10 @@ } }, "node_modules/@primer/primitives": { - "version": "7.11.7", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.7.tgz", - "integrity": "sha512-8PDEn3yj8oE/9B7o5hwjD0LSy7xz9xZ3gGTPWi/u0MxHZJ/fxERgxnBG21eCLKZ19KjhIb5AsmSQyFbGR5urYQ==", - "dev": true, - "dependencies": { - "markdown-table-ts": "^1.0.3" - } + "version": "7.11.10", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.10.tgz", + "integrity": "sha512-KwChxyp4qbLojZx5Nz8RUElM9K+ObzZWvzkYEu76TC4qEsqb9wW7n78jyov5WhUh5+qj2Qac1iCsPfeTQG5YBw==", + "dev": true }, "node_modules/@primer/view-components": { "version": "0.1.6", @@ -4758,6 +4756,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/is-url-superb": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/is-url-superb/-/is-url-superb-4.0.0.tgz", + "integrity": "sha512-GI+WjezhPPcbM+tqE9LnmsY5qqjwHzTvjJ36wxYX5ujNXefSUJ/T17r5bqDV8yLhcgB59KTPNOc9O9cmHTPWsA==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/is-weakref": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz", @@ -5179,12 +5189,6 @@ "markdown-it": "bin/markdown-it.js" } }, - "node_modules/markdown-table-ts": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/markdown-table-ts/-/markdown-table-ts-1.0.3.tgz", - "integrity": "sha512-lYrp7FXmBqpmGmsEF92WnSukdgYvLm15FPIODZOx9+3nobkxJxjBYcszqZf5VqTjBtISPSNC7zjU9o3zwpL6AQ==", - "dev": true - }, "node_modules/markdownlint": { "version": "0.26.2", "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.26.2.tgz", @@ -6376,6 +6380,19 @@ "postcss": "^8.4" } }, + "node_modules/postcss-custom-properties-fallback": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/postcss-custom-properties-fallback/-/postcss-custom-properties-fallback-1.0.2.tgz", + "integrity": "sha512-UrPr99bo03c1iX4iqjBBYo3W+EsXfxrozp2LNvRN34Y95n/7R2RupcMhGlc+C/RQxknDXiP+bptyhmb8nFYzeQ==", + "dev": true, + "dependencies": { + "postcss-value-parser": "^4.2.0", + "postcss-values-parser": "^6.0.2" + }, + "peerDependencies": { + "postcss": "^8.0.0" + } + }, "node_modules/postcss-custom-selectors": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-6.0.3.tgz", @@ -7386,6 +7403,23 @@ "dev": true, "license": "MIT" }, + "node_modules/postcss-values-parser": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-6.0.2.tgz", + "integrity": "sha512-YLJpK0N1brcNJrs9WatuJFtHaV9q5aAOj+S4DI5S7jgHlRfm0PIbDCAFRYMQD5SHq7Fy6xsDhyutgS0QOAs0qw==", + "dev": true, + "dependencies": { + "color-name": "^1.1.4", + "is-url-superb": "^4.0.0", + "quote-unquote": "^1.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "postcss": "^8.2.9" + } + }, "node_modules/postcss/node_modules/nanoid": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", @@ -7576,6 +7610,12 @@ "node": ">=8" } }, + "node_modules/quote-unquote": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/quote-unquote/-/quote-unquote-1.0.0.tgz", + "integrity": "sha512-twwRO/ilhlG/FIgYeKGFqyHhoEhqgnKVkcmqMKi2r524gz3ZbDTcyFt38E9xjJI2vT+KbRNHVbnJ/e0I25Azwg==", + "dev": true + }, "node_modules/randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -10105,13 +10145,10 @@ } }, "@primer/primitives": { - "version": "7.11.7", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.7.tgz", - "integrity": "sha512-8PDEn3yj8oE/9B7o5hwjD0LSy7xz9xZ3gGTPWi/u0MxHZJ/fxERgxnBG21eCLKZ19KjhIb5AsmSQyFbGR5urYQ==", - "dev": true, - "requires": { - "markdown-table-ts": "^1.0.3" - } + "version": "7.11.10", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.11.10.tgz", + "integrity": "sha512-KwChxyp4qbLojZx5Nz8RUElM9K+ObzZWvzkYEu76TC4qEsqb9wW7n78jyov5WhUh5+qj2Qac1iCsPfeTQG5YBw==", + "dev": true }, "@primer/view-components": { "version": "0.1.6", @@ -12629,6 +12666,12 @@ "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==", "dev": true }, + "is-url-superb": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/is-url-superb/-/is-url-superb-4.0.0.tgz", + "integrity": "sha512-GI+WjezhPPcbM+tqE9LnmsY5qqjwHzTvjJ36wxYX5ujNXefSUJ/T17r5bqDV8yLhcgB59KTPNOc9O9cmHTPWsA==", + "dev": true + }, "is-weakref": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz", @@ -12956,12 +12999,6 @@ "uc.micro": "^1.0.5" } }, - "markdown-table-ts": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/markdown-table-ts/-/markdown-table-ts-1.0.3.tgz", - "integrity": "sha512-lYrp7FXmBqpmGmsEF92WnSukdgYvLm15FPIODZOx9+3nobkxJxjBYcszqZf5VqTjBtISPSNC7zjU9o3zwpL6AQ==", - "dev": true - }, "markdownlint": { "version": "0.26.2", "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.26.2.tgz", @@ -13734,6 +13771,16 @@ "postcss-value-parser": "^4.2.0" } }, + "postcss-custom-properties-fallback": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/postcss-custom-properties-fallback/-/postcss-custom-properties-fallback-1.0.2.tgz", + "integrity": "sha512-UrPr99bo03c1iX4iqjBBYo3W+EsXfxrozp2LNvRN34Y95n/7R2RupcMhGlc+C/RQxknDXiP+bptyhmb8nFYzeQ==", + "dev": true, + "requires": { + "postcss-value-parser": "^4.2.0", + "postcss-values-parser": "^6.0.2" + } + }, "postcss-custom-selectors": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-6.0.3.tgz", @@ -14300,6 +14347,17 @@ "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", "dev": true }, + "postcss-values-parser": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-6.0.2.tgz", + "integrity": "sha512-YLJpK0N1brcNJrs9WatuJFtHaV9q5aAOj+S4DI5S7jgHlRfm0PIbDCAFRYMQD5SHq7Fy6xsDhyutgS0QOAs0qw==", + "dev": true, + "requires": { + "color-name": "^1.1.4", + "is-url-superb": "^4.0.0", + "quote-unquote": "^1.0.0" + } + }, "preferred-pm": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/preferred-pm/-/preferred-pm-3.0.3.tgz", @@ -14402,6 +14460,12 @@ "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==", "dev": true }, + "quote-unquote": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/quote-unquote/-/quote-unquote-1.0.0.tgz", + "integrity": "sha512-twwRO/ilhlG/FIgYeKGFqyHhoEhqgnKVkcmqMKi2r524gz3ZbDTcyFt38E9xjJI2vT+KbRNHVbnJ/e0I25Azwg==", + "dev": true + }, "randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", diff --git a/package.json b/package.json index c2555c722a..342635e391 100644 --- a/package.json +++ b/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", diff --git a/postcss.config.js b/postcss.config.js index e59c2e5047..0b1a0c3ea8 100644 --- a/postcss.config.js +++ b/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 diff --git a/static/classes.json b/static/classes.json index 4a872910d1..640d02dfb7 100644 --- a/static/classes.json +++ b/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": [