@primer/components 31.2.1-rc.48ecca6e → 32.0.0-next.0

package/lib-esm/theme-preval.js

@@ -208,68 +208,8 @@ module.exports = {
             "gradientOut": "rgba(255,255,255,0)"
           },
           "mktg": {
-            "success": "rgba(36,146,67,1)",
-            "info": "rgba(19,119,234,1)",
-            "bgShadeGradient": {
-              "top": "rgba(27,31,36,0.065)",
-              "bottom": "rgba(27,31,36,0)"
-            },
             "btn": {
-              "bg": {
-                "top": "hsla(228,82%,66%,1)",
-                "bottom": "#4969ed"
-              },
-              "bgOverlay": {
-                "top": "hsla(228,74%,59%,1)",
-                "bottom": "#3355e0"
-              },
-              "text": "#ffffff",
-              "primary": {
-                "bg": {
-                  "top": "hsla(137,56%,46%,1)",
-                  "bottom": "#2ea44f"
-                },
-                "bgOverlay": {
-                  "top": "hsla(134,60%,38%,1)",
-                  "bottom": "#22863a"
-                },
-                "text": "#ffffff"
-              },
-              "enterprise": {
-                "bg": {
-                  "top": "hsla(249,100%,72%,1)",
-                  "bottom": "#6f57ff"
-                },
-                "bgOverlay": {
-                  "top": "hsla(248,65%,63%,1)",
-                  "bottom": "#614eda"
-                },
-                "text": "#ffffff"
-              },
-              "outline": {
-                "text": "#4969ed",
-                "border": "rgba(73,105,237,0.3)",
-                "hover": {
-                  "text": "#3355e0",
-                  "border": "rgba(51,85,224,0.5)"
-                },
-                "focus": {
-                  "border": "#4969ed",
-                  "borderInset": "rgba(73,105,237,0.5)"
-                }
-              },
-              "dark": {
-                "text": "#ffffff",
-                "border": "rgba(255,255,255,0.3)",
-                "hover": {
-                  "text": "#ffffff",
-                  "border": "rgba(255,255,255,0.5)"
-                },
-                "focus": {
-                  "border": "#ffffff",
-                  "borderInset": "rgba(255,255,255,0.5)"
-                }
-              }
+              "bg": "#1b1f23"
             }
           },
           "avatar": {
@@ -483,6 +423,16 @@ module.exports = {
           }
         },
         "shadows": {
+          "mktg": {
+            "btn": {
+              "shadow": {
+                "outline": "rgb(0 0 0 / 15%) 0 0 0 1px inset",
+                "focus": "rgb(0 0 0 / 15%) 0 0 0 4px",
+                "hover": "0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02)",
+                "hoverMuted": "rgb(0 0 0 / 70%) 0 0 0 2px inset"
+              }
+            }
+          },
           "avatar": {
             "childShadow": "-2px -2px 0 rgba(255,255,255,0.8)"
           },
@@ -704,68 +654,8 @@ module.exports = {
             "gradientOut": "rgba(255,255,255,0)"
           },
           "mktg": {
-            "success": "rgba(3,119,234,1)",
-            "info": "rgba(19,119,234,1)",
-            "bgShadeGradient": {
-              "top": "rgba(27,31,36,0.065)",
-              "bottom": "rgba(27,31,36,0)"
-            },
             "btn": {
-              "bg": {
-                "top": "hsla(228,82%,66%,1)",
-                "bottom": "#4969ed"
-              },
-              "bgOverlay": {
-                "top": "hsla(228,74%,59%,1)",
-                "bottom": "#3355e0"
-              },
-              "text": "#ffffff",
-              "primary": {
-                "bg": {
-                  "top": "hsla(137,56%,46%,1)",
-                  "bottom": "#2ea44f"
-                },
-                "bgOverlay": {
-                  "top": "hsla(134,60%,38%,1)",
-                  "bottom": "#22863a"
-                },
-                "text": "#ffffff"
-              },
-              "enterprise": {
-                "bg": {
-                  "top": "hsla(249,100%,72%,1)",
-                  "bottom": "#6f57ff"
-                },
-                "bgOverlay": {
-                  "top": "hsla(248,65%,63%,1)",
-                  "bottom": "#614eda"
-                },
-                "text": "#ffffff"
-              },
-              "outline": {
-                "text": "#4969ed",
-                "border": "rgba(73,105,237,0.3)",
-                "hover": {
-                  "text": "#3355e0",
-                  "border": "rgba(51,85,224,0.5)"
-                },
-                "focus": {
-                  "border": "#4969ed",
-                  "borderInset": "rgba(73,105,237,0.5)"
-                }
-              },
-              "dark": {
-                "text": "#ffffff",
-                "border": "rgba(255,255,255,0.3)",
-                "hover": {
-                  "text": "#ffffff",
-                  "border": "rgba(255,255,255,0.5)"
-                },
-                "focus": {
-                  "border": "#ffffff",
-                  "borderInset": "rgba(255,255,255,0.5)"
-                }
-              }
+              "bg": "#1b1f23"
             }
           },
           "avatar": {
@@ -979,6 +869,16 @@ module.exports = {
           }
         },
         "shadows": {
+          "mktg": {
+            "btn": {
+              "shadow": {
+                "outline": "rgb(0 0 0 / 15%) 0 0 0 1px inset",
+                "focus": "rgb(0 0 0 / 15%) 0 0 0 4px",
+                "hover": "0 3px 2px rgba(0, 0, 0, 0.07), 0 7px 5px rgba(0, 0, 0, 0.04), 0 12px 10px rgba(0, 0, 0, 0.03), 0 22px 18px rgba(0, 0, 0, 0.03), 0 42px 33px rgba(0, 0, 0, 0.02), 0 100px 80px rgba(0, 0, 0, 0.02)",
+                "hoverMuted": "rgb(0 0 0 / 70%) 0 0 0 2px inset"
+              }
+            }
+          },
           "avatar": {
             "childShadow": "-2px -2px 0 rgba(255,255,255,0.8)"
           },
@@ -1200,68 +1100,8 @@ module.exports = {
             "gradientOut": "rgba(22,27,34,0)"
           },
           "mktg": {
-            "success": "rgba(41,147,61,1)",
-            "info": "rgba(42,123,243,1)",
-            "bgShadeGradient": {
-              "top": "rgba(1,4,9,0.065)",
-              "bottom": "rgba(1,4,9,0)"
-            },
             "btn": {
-              "bg": {
-                "top": "hsla(228,82%,66%,1)",
-                "bottom": "#4969ed"
-              },
-              "bgOverlay": {
-                "top": "hsla(228,74%,59%,1)",
-                "bottom": "#3355e0"
-              },
-              "text": "#f0f6fc",
-              "primary": {
-                "bg": {
-                  "top": "hsla(137,56%,46%,1)",
-                  "bottom": "#2ea44f"
-                },
-                "bgOverlay": {
-                  "top": "hsla(134,60%,38%,1)",
-                  "bottom": "#22863a"
-                },
-                "text": "#f0f6fc"
-              },
-              "enterprise": {
-                "bg": {
-                  "top": "hsla(249,100%,72%,1)",
-                  "bottom": "#6f57ff"
-                },
-                "bgOverlay": {
-                  "top": "hsla(248,65%,63%,1)",
-                  "bottom": "#614eda"
-                },
-                "text": "#f0f6fc"
-              },
-              "outline": {
-                "text": "#f0f6fc",
-                "border": "rgba(240,246,252,0.3)",
-                "hover": {
-                  "text": "#f0f6fc",
-                  "border": "rgba(240,246,252,0.5)"
-                },
-                "focus": {
-                  "border": "#f0f6fc",
-                  "borderInset": "rgba(240,246,252,0.5)"
-                }
-              },
-              "dark": {
-                "text": "#f0f6fc",
-                "border": "rgba(240,246,252,0.3)",
-                "hover": {
-                  "text": "#f0f6fc",
-                  "border": "rgba(240,246,252,0.5)"
-                },
-                "focus": {
-                  "border": "#f0f6fc",
-                  "borderInset": "rgba(240,246,252,0.5)"
-                }
-              }
+              "bg": "#f6f8fa"
             }
           },
           "avatar": {
@@ -1478,6 +1318,16 @@ module.exports = {
           "checks": {
             "inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)"
           },
+          "mktg": {
+            "btn": {
+              "shadow": {
+                "outline": "rgb(255 255 255 / 25%) 0 0 0 1px inset",
+                "focus": "rgb(255 255 255 / 25%) 0 0 0 4px",
+                "hover": "0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)",
+                "hoverMuted": "rgb(255 255 255) 0 0 0 2px inset"
+              }
+            }
+          },
           "avatar": {
             "childShadow": "-2px -2px 0 #0d1117"
           },
@@ -1699,68 +1549,8 @@ module.exports = {
             "gradientOut": "rgba(45,51,59,0)"
           },
           "mktg": {
-            "success": "rgba(61,137,66,1)",
-            "info": "rgba(56,119,213,1)",
-            "bgShadeGradient": {
-              "top": "rgba(28,33,40,0.065)",
-              "bottom": "rgba(28,33,40,0)"
-            },
             "btn": {
-              "bg": {
-                "top": "hsla(228,82%,66%,1)",
-                "bottom": "#4969ed"
-              },
-              "bgOverlay": {
-                "top": "hsla(228,74%,59%,1)",
-                "bottom": "#3355e0"
-              },
-              "text": "#cdd9e5",
-              "primary": {
-                "bg": {
-                  "top": "hsla(137,56%,46%,1)",
-                  "bottom": "#2ea44f"
-                },
-                "bgOverlay": {
-                  "top": "hsla(134,60%,38%,1)",
-                  "bottom": "#22863a"
-                },
-                "text": "#cdd9e5"
-              },
-              "enterprise": {
-                "bg": {
-                  "top": "hsla(249,100%,72%,1)",
-                  "bottom": "#6f57ff"
-                },
-                "bgOverlay": {
-                  "top": "hsla(248,65%,63%,1)",
-                  "bottom": "#614eda"
-                },
-                "text": "#cdd9e5"
-              },
-              "outline": {
-                "text": "#cdd9e5",
-                "border": "rgba(205,217,229,0.3)",
-                "hover": {
-                  "text": "#cdd9e5",
-                  "border": "rgba(205,217,229,0.5)"
-                },
-                "focus": {
-                  "border": "#cdd9e5",
-                  "borderInset": "rgba(205,217,229,0.5)"
-                }
-              },
-              "dark": {
-                "text": "#cdd9e5",
-                "border": "rgba(205,217,229,0.3)",
-                "hover": {
-                  "text": "#cdd9e5",
-                  "border": "rgba(205,217,229,0.5)"
-                },
-                "focus": {
-                  "border": "#cdd9e5",
-                  "borderInset": "rgba(205,217,229,0.5)"
-                }
-              }
+              "bg": "#f6f8fa"
             }
           },
           "avatar": {
@@ -1977,6 +1767,16 @@ module.exports = {
           "checks": {
             "inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)"
           },
+          "mktg": {
+            "btn": {
+              "shadow": {
+                "outline": "rgb(255 255 255 / 25%) 0 0 0 1px inset",
+                "focus": "rgb(255 255 255 / 25%) 0 0 0 4px",
+                "hover": "0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)",
+                "hoverMuted": "rgb(255 255 255) 0 0 0 2px inset"
+              }
+            }
+          },
           "avatar": {
             "childShadow": "-2px -2px 0 #22272e"
           },
@@ -2198,68 +1998,8 @@ module.exports = {
             "gradientOut": "rgba(39,43,51,0)"
           },
           "mktg": {
-            "success": "rgba(9,180,58,1)",
-            "info": "rgba(64,158,255,1)",
-            "bgShadeGradient": {
-              "top": "rgba(1,4,9,0.065)",
-              "bottom": "rgba(1,4,9,0)"
-            },
             "btn": {
-              "bg": {
-                "top": "hsla(228,82%,66%,1)",
-                "bottom": "#4969ed"
-              },
-              "bgOverlay": {
-                "top": "hsla(228,74%,59%,1)",
-                "bottom": "#3355e0"
-              },
-              "text": "#ffffff",
-              "primary": {
-                "bg": {
-                  "top": "hsla(137,56%,46%,1)",
-                  "bottom": "#2ea44f"
-                },
-                "bgOverlay": {
-                  "top": "hsla(134,60%,38%,1)",
-                  "bottom": "#22863a"
-                },
-                "text": "#ffffff"
-              },
-              "enterprise": {
-                "bg": {
-                  "top": "hsla(249,100%,72%,1)",
-                  "bottom": "#6f57ff"
-                },
-                "bgOverlay": {
-                  "top": "hsla(248,65%,63%,1)",
-                  "bottom": "#614eda"
-                },
-                "text": "#ffffff"
-              },
-              "outline": {
-                "text": "#ffffff",
-                "border": "rgba(255,255,255,0.3)",
-                "hover": {
-                  "text": "#ffffff",
-                  "border": "rgba(255,255,255,0.5)"
-                },
-                "focus": {
-                  "border": "#ffffff",
-                  "borderInset": "rgba(255,255,255,0.5)"
-                }
-              },
-              "dark": {
-                "text": "#ffffff",
-                "border": "rgba(255,255,255,0.3)",
-                "hover": {
-                  "text": "#ffffff",
-                  "border": "rgba(255,255,255,0.5)"
-                },
-                "focus": {
-                  "border": "#ffffff",
-                  "borderInset": "rgba(255,255,255,0.5)"
-                }
-              }
+              "bg": "#f6f8fa"
             }
           },
           "avatar": {
@@ -2476,6 +2216,16 @@ module.exports = {
           "checks": {
             "inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)"
           },
+          "mktg": {
+            "btn": {
+              "shadow": {
+                "outline": "rgb(255 255 255 / 25%) 0 0 0 1px inset",
+                "focus": "rgb(255 255 255 / 25%) 0 0 0 4px",
+                "hover": "0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)",
+                "hoverMuted": "rgb(255 255 255) 0 0 0 2px inset"
+              }
+            }
+          },
           "avatar": {
             "childShadow": "-2px -2px 0 #0a0c10"
           },
@@ -2697,68 +2447,8 @@ module.exports = {
             "gradientOut": "rgba(22,27,34,0)"
           },
           "mktg": {
-            "success": "rgba(25,119,239,1)",
-            "info": "rgba(42,123,243,1)",
-            "bgShadeGradient": {
-              "top": "rgba(1,4,9,0.065)",
-              "bottom": "rgba(1,4,9,0)"
-            },
             "btn": {
-              "bg": {
-                "top": "hsla(228,82%,66%,1)",
-                "bottom": "#4969ed"
-              },
-              "bgOverlay": {
-                "top": "hsla(228,74%,59%,1)",
-                "bottom": "#3355e0"
-              },
-              "text": "#f0f6fc",
-              "primary": {
-                "bg": {
-                  "top": "hsla(137,56%,46%,1)",
-                  "bottom": "#2ea44f"
-                },
-                "bgOverlay": {
-                  "top": "hsla(134,60%,38%,1)",
-                  "bottom": "#22863a"
-                },
-                "text": "#f0f6fc"
-              },
-              "enterprise": {
-                "bg": {
-                  "top": "hsla(249,100%,72%,1)",
-                  "bottom": "#6f57ff"
-                },
-                "bgOverlay": {
-                  "top": "hsla(248,65%,63%,1)",
-                  "bottom": "#614eda"
-                },
-                "text": "#f0f6fc"
-              },
-              "outline": {
-                "text": "#f0f6fc",
-                "border": "rgba(240,246,252,0.3)",
-                "hover": {
-                  "text": "#f0f6fc",
-                  "border": "rgba(240,246,252,0.5)"
-                },
-                "focus": {
-                  "border": "#f0f6fc",
-                  "borderInset": "rgba(240,246,252,0.5)"
-                }
-              },
-              "dark": {
-                "text": "#f0f6fc",
-                "border": "rgba(240,246,252,0.3)",
-                "hover": {
-                  "text": "#f0f6fc",
-                  "border": "rgba(240,246,252,0.5)"
-                },
-                "focus": {
-                  "border": "#f0f6fc",
-                  "borderInset": "rgba(240,246,252,0.5)"
-                }
-              }
+              "bg": "#f6f8fa"
             }
           },
           "avatar": {
@@ -2975,6 +2665,16 @@ module.exports = {
           "checks": {
             "inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)"
           },
+          "mktg": {
+            "btn": {
+              "shadow": {
+                "outline": "rgb(255 255 255 / 25%) 0 0 0 1px inset",
+                "focus": "rgb(255 255 255 / 25%) 0 0 0 4px",
+                "hover": "0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07)",
+                "hoverMuted": "rgb(255 255 255) 0 0 0 2px inset"
+              }
+            }
+          },
           "avatar": {
             "childShadow": "-2px -2px 0 #0d1117"
           },

package/lib-esm/utils/testing.d.ts

@@ -231,67 +231,13 @@ export declare function render(component: React.ReactElement, theme?: {
             gradientOut: string;
         };
         mktg: {
-            success: string;
-            info: string;
-            bgShadeGradient: {
-                top: string;
-                bottom: string;
-            };
             btn: {
-                bg: {
-                    top: string;
-                    bottom: string;
-                };
-                bgOverlay: {
-                    top: string;
-                    bottom: string;
-                };
-                text: string;
-                primary: {
-                    bg: {
-                        top: string;
-                        bottom: string;
-                    };
-                    bgOverlay: {
-                        top: string;
-                        bottom: string;
-                    };
-                    text: string;
-                };
-                enterprise: {
-                    bg: {
-                        top: string;
-                        bottom: string;
-                    };
-                    bgOverlay: {
-                        top: string;
-                        bottom: string;
-                    };
-                    text: string;
-                };
-                outline: {
-                    text: string;
-                    border: string;
-                    hover: {
-                        text: string;
-                        border: string;
-                    };
-                    focus: {
-                        border: string;
-                        borderInset: string;
-                    };
-                };
-                dark: {
-                    text: string;
-                    border: string;
-                    hover: {
-                        text: string;
-                        border: string;
-                    };
-                    focus: {
-                        border: string;
-                        borderInset: string;
-                    };
+                bg: string;
+                shadow: {
+                    outline: string;
+                    focus: string;
+                    hover: string;
+                    hoverMuted: string;
                 };
             };
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "31.2.1-rc.48ecca6e",
+  "version": "32.0.0-next.0",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -45,7 +45,7 @@
   "license": "MIT",
   "dependencies": {
     "@primer/octicons-react": "^16.1.0",
-    "@primer/primitives": "6.1.0",
+    "@primer/primitives": "7.0.1",
     "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",
     "@styled-system/css": "5.1.5",
@@ -114,7 +114,7 @@
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-mdx": "1.15.1",
     "eslint-plugin-prettier": "3.4.0",
-    "eslint-plugin-primer-react": "0.6.1",
+    "eslint-plugin-primer-react": "0.7.0",
     "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "4.2.0",
     "jest": "27.0.4",
@@ -158,4 +158,4 @@
       "running": false
     }
   ]
-}
+}

package/.changeset/README.md

@@ -1,8 +0,0 @@
-# Changesets
-
-Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
-with multi-package repos, or single-package repos to help you version and publish your code. You can
-find the full documentation for it [in our repository](https://github.com/changesets/changesets)
-
-We have a quick list of common questions to get you started engaging with this project in
-[our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md)

package/.changeset/config.json

@@ -1,10 +0,0 @@
-{
-  "$schema": "https://unpkg.com/@changesets/config@1.4.0/schema.json",
-  "changelog": ["@changesets/changelog-github", {"repo": "primer/react"}],
-  "commit": false,
-  "linked": [],
-  "access": "public",
-  "baseBranch": "main",
-  "updateInternalDependencies": "patch",
-  "ignore": []
-}

package/.devcontainer/devcontainer.json

@@ -1,8 +0,0 @@
-{
-  "name": "Primer Components",
-  "image": "mcr.microsoft.com/vscode/devcontainers/typescript-node:14",
-  "extensions": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"],
-  "forwardPorts": [8000],
-  "postCreateCommand": ["/bin/bash", "-c", "pushd docs && npm install && popd && npm install"],
-  "remoteUser": "node"
-}