Merge branch 'main' into counter-border

.changeset/long-panthers-provide.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Fix local dev (revert webpack 5.5.0 → 6.0.0)

.changeset/nasty-bananas-drive.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Reformat `rgba()` colors for `.btn-mktg`

docs/content/utilities/details.md

@@ -26,7 +26,9 @@ Use `.details-overlay-dark` darken the click area overlay. Useful for modals.
 ```html live
 <details class="details-overlay details-overlay-dark">
   <summary class="btn">More</summary>
-  <div class="border p-3 mt-2">Hidden text</div>
+  <div class="position-relative color-bg-default rounded p-3 mt-2" style="z-index: 112;">
+    Hidden text
+  </div>
 </details>
 ```
 

docs/package.json

@@ -13,23 +13,23 @@
   "dependencies": {
     "@babel/preset-react": "^7.16.0",
     "@koddsson/postcss-sass": "5.0.0",
-    "@primer/components": "31.1.0",
-    "@primer/gatsby-theme-doctocat": "2.0.0",
+    "@primer/components": "32.1.0",
+    "@primer/gatsby-theme-doctocat": "3.0.1",
     "@primer/octicons": "16.1.1",
     "@primer/octicons-react": "16.0.0",
-    "@primer/primitives": "6.1.0",
+    "@primer/primitives": "7.1.1",
     "@svgr/webpack": "5.5.0",
     "autoprefixer": "10.4.0",
     "babel-preset-gatsby": "^2.0.0",
     "chroma-js": "^2.1.2",
     "clsx": "^1.1.1",
-    "core-js": "^3.19.0",
+    "core-js": "^3.19.2",
     "gatsby": "2.32.13",
     "gatsby-plugin-alias-imports": "^1.0.5",
     "gatsby-plugin-sass": "3.2.0",
     "gatsby-plugin-svgr": "2.1.0",
     "path": "0.12.7",
-    "postcss": "8.3.11",
+    "postcss": "8.4.4",
     "postcss-import": "14.0.2",
     "postcss-load-config": "3.1.0",
     "postcss-loader": "4.3.0",
@@ -49,16 +49,16 @@
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
-    "@storybook/addon-a11y": "6.3.12",
+    "@storybook/addon-a11y": "6.4.3",
     "@storybook/addon-actions": "^6.3.12",
-    "@storybook/addon-essentials": "^6.3.12",
-    "@storybook/addon-links": "^6.3.12",
+    "@storybook/addon-essentials": "^6.4.3",
+    "@storybook/addon-links": "^6.4.3",
     "@storybook/addon-postcss": "2.0.0",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/react": "6.3.12",
+    "@storybook/react": "6.4.3",
     "@whitespace/storybook-addon-html": "^5.0.0",
     "babel-loader": "^8.2.3",
     "storybook-addon-designs": "6.2.0",
-    "storybook-color-picker": "2.1.4"
+    "storybook-color-picker": "2.1.5"
   }
 }

package.json

@@ -35,7 +35,7 @@
     "storybook": "cd docs && yarn && yarn storybook"
   },
   "dependencies": {
-    "@primer/primitives": "^7.1.0"
+    "@primer/primitives": "^7.2.0"
   },
   "devDependencies": {
     "@changesets/changelog-github": "0.4.2",
@@ -53,7 +53,7 @@
     "front-matter": "4.0.2",
     "fs-extra": "10.0.0",
     "globby": "12.0.2",
-    "jest": "27.3.1",
+    "jest": "27.4.2",
     "js-yaml": "4.1.0",
     "postcss": "8.4.4",
     "postcss-calc": "8.0.0",

src/marketing/buttons/button.scss

@@ -13,7 +13,7 @@
   white-space: nowrap;
   vertical-align: middle;
   user-select: none;
-  background: linear-gradient(180deg, rgba(255 255 255 / 0.15) 0%, rgba(255 255 255 / 0) 100%), var(--color-mktg-btn-bg) !important;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%), var(--color-mktg-btn-bg) !important;
   border: 0;
   // stylelint-disable-next-line primer/borders
   border-radius: 0.375rem;
@@ -29,7 +29,7 @@
     z-index: -1;
     content: '';
     // stylelint-disable-next-line primer/colors
-    background: linear-gradient(180deg, rgba(255 255 255 / 0.15) 0%, rgba(255 255 255 / 0) 100%) !important;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%) !important;
     border-radius: inherit;
     opacity: 0;
     opacity: 0;