Upgrade Primitives + prep for v8 release (#2764)

primer · Apr 15, 2024 · a58824e · a58824e
1 parent 550352f
commit a58824e
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 231 deletions.
diff --git a/.changeset/tidy-wombats-sort.md b/.changeset/tidy-wombats-sort.md
@@ -0,0 +1,6 @@
+---
+"@primer/view-components": minor
+---
+
+- Upgrade `primer/primitives`
+- Remove CSS color variable fallbacks
diff --git a/demo/app/assets/stylesheets/application.css b/demo/app/assets/stylesheets/application.css
@@ -1,24 +1,24 @@
 /*
  *= require component_preview.css
  *= require_self
- *= require @primer/primitives/tokens-next-private/css/base/size/size.css
- *= require @primer/primitives/tokens-next-private/css/base/typography/typography.css
- *= require @primer/primitives/tokens-next-private/css/functional/size/border.css
- *= require @primer/primitives/tokens-next-private/css/functional/size/breakpoints.css
- *= require @primer/primitives/tokens-next-private/css/functional/size/size-coarse.css
- *= require @primer/primitives/tokens-next-private/css/functional/size/size-fine.css
- *= require @primer/primitives/tokens-next-private/css/functional/size/size.css
- *= require @primer/primitives/tokens-next-private/css/functional/size/viewport.css
- *= require @primer/primitives/tokens-next-private/css/functional/typography/typography.css
- *= require @primer/primitives/tokens-next-private/css/functional/themes/dark-colorblind.css
- *= require @primer/primitives/tokens-next-private/css/functional/themes/dark-dimmed.css
- *= require @primer/primitives/tokens-next-private/css/functional/themes/dark-high-contrast.css
- *= require @primer/primitives/tokens-next-private/css/functional/themes/dark-tritanopia.css
- *= require @primer/primitives/tokens-next-private/css/functional/themes/dark.css
- *= require @primer/primitives/tokens-next-private/css/functional/themes/light-colorblind.css
- *= require @primer/primitives/tokens-next-private/css/functional/themes/light-high-contrast.css
- *= require @primer/primitives/tokens-next-private/css/functional/themes/light-tritanopia.css
- *= require @primer/primitives/tokens-next-private/css/functional/themes/light.css
+ *= require @primer/primitives/dist/css/base/size/size.css
+ *= require @primer/primitives/dist/css/base/typography/typography.css
+ *= require @primer/primitives/dist/css/functional/size/border.css
+ *= require @primer/primitives/dist/css/functional/size/breakpoints.css
+ *= require @primer/primitives/dist/css/functional/size/size-coarse.css
+ *= require @primer/primitives/dist/css/functional/size/size-fine.css
+ *= require @primer/primitives/dist/css/functional/size/size.css
+ *= require @primer/primitives/dist/css/functional/size/viewport.css
+ *= require @primer/primitives/dist/css/functional/typography/typography.css
+ *= require @primer/primitives/dist/css/functional/themes/dark-colorblind.css
+ *= require @primer/primitives/dist/css/functional/themes/dark-dimmed.css
+ *= require @primer/primitives/dist/css/functional/themes/dark-high-contrast.css
+ *= require @primer/primitives/dist/css/functional/themes/dark-tritanopia.css
+ *= require @primer/primitives/dist/css/functional/themes/dark.css
+ *= require @primer/primitives/dist/css/functional/themes/light-colorblind.css
+ *= require @primer/primitives/dist/css/functional/themes/light-high-contrast.css
+ *= require @primer/primitives/dist/css/functional/themes/light-tritanopia.css
+ *= require @primer/primitives/dist/css/functional/themes/light.css
  *= require @primer/css/dist/base.css
  *= require @primer/css/dist/buttons.css
  *= require @primer/css/dist/layout.css

diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/demo/package.json b/demo/package.json
@@ -4,7 +4,7 @@
   "version": "0.1.0",
   "dependencies": {
     "@primer/css": "^21.2.2",
-    "@primer/primitives": "7.15.15",
+    "@primer/primitives": "^7.16.0",
     "@rails/actioncable": "^7.1.3",
     "@rails/ujs": "^7.1.3",
     "turbolinks": "^5.2.0",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -63,7 +63,7 @@
     "@github/prettier-config": "0.0.6",
     "@playwright/test": "^1.35.1",
     "@primer/css": "21.2.2",
-    "@primer/primitives": "7.15.14",
+    "@primer/primitives": "^7.16.0",
     "@primer/stylelint-config": "^12.7.2",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^8.3.3",
@@ -81,7 +81,6 @@
     "playwright": "^1.35.1",
     "postcss": "^8.4.16",
     "postcss-cli": "^11.0.0",
-    "postcss-custom-properties-fallback": "^1.0.2",
     "postcss-import": "^16.0.0",
     "postcss-mixins": "^10.0.0",
     "postcss-preset-env": "^9.3.0",

diff --git a/postcss.config.js b/postcss.config.js
@@ -10,31 +10,6 @@ module.exports = {
     require('postcss-mixins')({
       mixinsDir: path.join(__dirname, './lib/postcss_mixins/')
     }),
-    require('postcss-custom-properties-fallback')({
-      importFrom: [
-        () => {
-          const primitiveFallbacks = [
-            'color-fallbacks.json',
-            'base/size/size.json',
-            'base/typography/typography.json',
-            'functional/size/border.json',
-            'functional/size/breakpoints.json',
-            'functional/size/size-coarse.json',
-            'functional/size/size-fine.json',
-            'functional/size/size.json',
-            'functional/size/viewport.json',
-            'functional/typography/typography.json',
-          ]
-          let customProperties = {}
-          for (const filePath of primitiveFallbacks) {
-            const fileData = fs.readFileSync(path.join(__dirname, './node_modules/@primer/primitives/tokens-next-private/fallbacks/', filePath), 'utf8')
-            customProperties = {...customProperties, ...JSON.parse(fileData)}
-          }
-
-          return { customProperties: customProperties };
-        }
-      ]
-    }),
     require('postcss-preset-env')({
       stage: 2,
       // https://preset-env.cssdb.org/features/#stage-2