@primer/components 31.2.1-rc.18690e3f → 31.2.1-rc.32ed6e21

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-lock.json

@@ -10,7 +10,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",
@@ -7561,9 +7561,9 @@
       }
     },
     "node_modules/@primer/primitives": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-6.1.0.tgz",
-      "integrity": "sha512-gwSVf5rVf2CMa/bU3/47LZosDHNfODMRJfKi7uJOqHWABVNl6Lf+thDM7Jb8tS9sEQQsUnrLDiGNjCScS81IXA=="
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.0.1.tgz",
+      "integrity": "sha512-Ddmi5Fuck3nsHt1+uvZiVzLwtjNrBloWq8FfQz74Qd9TXKxvHxrGxQuEJ21T3PxJMMwwEsKo7fk18oy1rTmFiA=="
     },
     "node_modules/@radix-ui/react-polymorphic": {
       "version": "0.0.14",
@@ -43351,9 +43351,9 @@
       "requires": {}
     },
     "@primer/primitives": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-6.1.0.tgz",
-      "integrity": "sha512-gwSVf5rVf2CMa/bU3/47LZosDHNfODMRJfKi7uJOqHWABVNl6Lf+thDM7Jb8tS9sEQQsUnrLDiGNjCScS81IXA=="
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.0.1.tgz",
+      "integrity": "sha512-Ddmi5Fuck3nsHt1+uvZiVzLwtjNrBloWq8FfQz74Qd9TXKxvHxrGxQuEJ21T3PxJMMwwEsKo7fk18oy1rTmFiA=="
     },
     "@radix-ui/react-polymorphic": {
       "version": "0.0.14",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "31.2.1-rc.18690e3f",
+  "version": "31.2.1-rc.32ed6e21",
   "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",