@primer/primitives 6.1.0 → 7.0.0-rc.fe8d621

package/dist/ts/colors/dark_colorblind.ts

@@ -176,67 +176,13 @@ export default {
     "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",
+      "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"
       }
     }
   },

package/dist/ts/colors/dark_dimmed.ts

@@ -176,67 +176,13 @@ export default {
     "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",
+      "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"
       }
     }
   },

package/dist/ts/colors/dark_high_contrast.ts

@@ -176,67 +176,13 @@ export default {
     "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",
+      "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"
       }
     }
   },

package/dist/ts/colors/light.ts

@@ -176,67 +176,13 @@ export default {
     "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",
+      "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"
       }
     }
   },

package/dist/ts/colors/light_colorblind.ts

@@ -176,67 +176,13 @@ export default {
     "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",
+      "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"
       }
     }
   },

package/package.json

@@ -1,8 +1,10 @@
 {
   "name": "@primer/primitives",
-  "version": "6.1.0",
+  "version": "7.0.0-rc.fe8d621",
   "description": "Typography, spacing, and color primitives for Primer design system",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",
   "repository": "https://github.com/primer/primitives",