@primer/primitives 7.17.0-rc.132f02a7 → 7.17.0-rc.34cd1021

package/README.md

@@ -1,6 +1,6 @@
 # Primer Primitives
 
-[![npm package](https://img.shields.io/npm/v/@primer/primitives.svg?style=flat)](https://www.npmjs.com/package/@primer/primitives)
+[![npm package](https://img.shields.io/npm/v/@primer/primitives.svg?style=flat)](https://www.npmjs.com/package/@primer/primitives) [![Storybook](https://github.com/primer/primitives/actions/workflows/deploy.yml/badge.svg)](https://primer.style/primitives/storybook/) [![A11y contrast check](https://github.com/primer/primitives/actions/workflows/a11y-contrast.yml/badge.svg)](https://github.com/primer/primitives/actions/workflows/a11y-contrast.yml)
 
 This repo contains values for color, spacing, and typography primitives for use with [Primer][primer], GitHub's design system.
 

package/dist/css/functional/themes/dark-colorblind.css

@@ -132,6 +132,11 @@
   --display-indigo-fgColor: #9899ec;
   --display-indigo-borderColor-muted: #25215f;
   --display-indigo-borderColor-emphasis: #7070e1;
+  --display-pink-bgColor-muted: #2d1524;
+  --display-pink-bgColor-emphasis: #d34591;
+  --display-pink-fgColor: #e57bb2;
+  --display-pink-borderColor-muted: #451c35;
+  --display-pink-borderColor-emphasis: #d34591;
   --avatar-bgColor: #ffffff1a;
   --avatar-borderColor: #ffffff26;
   --avatar-shadow: 0px 0px 0px 2px #0d1117;
@@ -670,6 +675,11 @@
     --display-indigo-fgColor: #9899ec;
     --display-indigo-borderColor-muted: #25215f;
     --display-indigo-borderColor-emphasis: #7070e1;
+    --display-pink-bgColor-muted: #2d1524;
+    --display-pink-bgColor-emphasis: #d34591;
+    --display-pink-fgColor: #e57bb2;
+    --display-pink-borderColor-muted: #451c35;
+    --display-pink-borderColor-emphasis: #d34591;
     --avatar-bgColor: #ffffff1a;
     --avatar-borderColor: #ffffff26;
     --avatar-shadow: 0px 0px 0px 2px #0d1117;

package/dist/css/functional/themes/dark-dimmed.css

@@ -132,6 +132,11 @@
   --display-indigo-fgColor: #9899ec;
   --display-indigo-borderColor-muted: #25215f;
   --display-indigo-borderColor-emphasis: #7070e1;
+  --display-pink-bgColor-muted: #2d1524;
+  --display-pink-bgColor-emphasis: #d34591;
+  --display-pink-fgColor: #e57bb2;
+  --display-pink-borderColor-muted: #451c35;
+  --display-pink-borderColor-emphasis: #d34591;
   --avatar-bgColor: #cdd9e51a;
   --avatar-borderColor: #cdd9e526;
   --avatar-shadow: 0px 0px 0px 2px #22272e;
@@ -670,6 +675,11 @@
     --display-indigo-fgColor: #9899ec;
     --display-indigo-borderColor-muted: #25215f;
     --display-indigo-borderColor-emphasis: #7070e1;
+    --display-pink-bgColor-muted: #2d1524;
+    --display-pink-bgColor-emphasis: #d34591;
+    --display-pink-fgColor: #e57bb2;
+    --display-pink-borderColor-muted: #451c35;
+    --display-pink-borderColor-emphasis: #d34591;
     --avatar-bgColor: #cdd9e51a;
     --avatar-borderColor: #cdd9e526;
     --avatar-shadow: 0px 0px 0px 2px #22272e;

package/dist/css/functional/themes/dark-high-contrast.css

@@ -132,6 +132,11 @@
   --display-indigo-fgColor: #9899ec;
   --display-indigo-borderColor-muted: #25215f;
   --display-indigo-borderColor-emphasis: #7070e1;
+  --display-pink-bgColor-muted: #2d1524;
+  --display-pink-bgColor-emphasis: #d34591;
+  --display-pink-fgColor: #e57bb2;
+  --display-pink-borderColor-muted: #451c35;
+  --display-pink-borderColor-emphasis: #d34591;
   --avatar-bgColor: #ffffff1a;
   --avatar-borderColor: #ffffffe6;
   --avatar-shadow: 0px 0px 0px 2px #0a0c10;
@@ -670,6 +675,11 @@
     --display-indigo-fgColor: #9899ec;
     --display-indigo-borderColor-muted: #25215f;
     --display-indigo-borderColor-emphasis: #7070e1;
+    --display-pink-bgColor-muted: #2d1524;
+    --display-pink-bgColor-emphasis: #d34591;
+    --display-pink-fgColor: #e57bb2;
+    --display-pink-borderColor-muted: #451c35;
+    --display-pink-borderColor-emphasis: #d34591;
     --avatar-bgColor: #ffffff1a;
     --avatar-borderColor: #ffffffe6;
     --avatar-shadow: 0px 0px 0px 2px #0a0c10;

package/dist/css/functional/themes/dark-tritanopia.css

@@ -132,6 +132,11 @@
   --display-indigo-fgColor: #9899ec;
   --display-indigo-borderColor-muted: #25215f;
   --display-indigo-borderColor-emphasis: #7070e1;
+  --display-pink-bgColor-muted: #2d1524;
+  --display-pink-bgColor-emphasis: #d34591;
+  --display-pink-fgColor: #e57bb2;
+  --display-pink-borderColor-muted: #451c35;
+  --display-pink-borderColor-emphasis: #d34591;
   --avatar-bgColor: #ffffff1a;
   --avatar-borderColor: #ffffff26;
   --avatar-shadow: 0px 0px 0px 2px #0d1117;
@@ -670,6 +675,11 @@
     --display-indigo-fgColor: #9899ec;
     --display-indigo-borderColor-muted: #25215f;
     --display-indigo-borderColor-emphasis: #7070e1;
+    --display-pink-bgColor-muted: #2d1524;
+    --display-pink-bgColor-emphasis: #d34591;
+    --display-pink-fgColor: #e57bb2;
+    --display-pink-borderColor-muted: #451c35;
+    --display-pink-borderColor-emphasis: #d34591;
     --avatar-bgColor: #ffffff1a;
     --avatar-borderColor: #ffffff26;
     --avatar-shadow: 0px 0px 0px 2px #0d1117;

package/dist/css/functional/themes/dark.css

@@ -132,6 +132,11 @@
   --display-indigo-fgColor: #9899ec;
   --display-indigo-borderColor-muted: #25215f;
   --display-indigo-borderColor-emphasis: #7070e1;
+  --display-pink-bgColor-muted: #2d1524;
+  --display-pink-bgColor-emphasis: #d34591;
+  --display-pink-fgColor: #e57bb2;
+  --display-pink-borderColor-muted: #451c35;
+  --display-pink-borderColor-emphasis: #d34591;
   --avatar-bgColor: #ffffff1a;
   --avatar-borderColor: #ffffff26;
   --avatar-shadow: 0px 0px 0px 2px #0d1117;
@@ -670,6 +675,11 @@
     --display-indigo-fgColor: #9899ec;
     --display-indigo-borderColor-muted: #25215f;
     --display-indigo-borderColor-emphasis: #7070e1;
+    --display-pink-bgColor-muted: #2d1524;
+    --display-pink-bgColor-emphasis: #d34591;
+    --display-pink-fgColor: #e57bb2;
+    --display-pink-borderColor-muted: #451c35;
+    --display-pink-borderColor-emphasis: #d34591;
     --avatar-bgColor: #ffffff1a;
     --avatar-borderColor: #ffffff26;
     --avatar-shadow: 0px 0px 0px 2px #0d1117;

package/dist/css/functional/themes/light-colorblind.css

@@ -132,6 +132,11 @@
   --display-indigo-fgColor: #494edf;
   --display-indigo-borderColor-muted: #d2d7fe;
   --display-indigo-borderColor-emphasis: #5a61e7;
+  --display-pink-bgColor-muted: #ffe5f1;
+  --display-pink-bgColor-emphasis: #ce2c85;
+  --display-pink-fgColor: #b12f79;
+  --display-pink-borderColor-muted: #fdc9e2;
+  --display-pink-borderColor-emphasis: #ce2c85;
   --avatar-bgColor: #ffffff;
   --avatar-borderColor: #1f232826;
   --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
@@ -670,6 +675,11 @@
     --display-indigo-fgColor: #494edf;
     --display-indigo-borderColor-muted: #d2d7fe;
     --display-indigo-borderColor-emphasis: #5a61e7;
+    --display-pink-bgColor-muted: #ffe5f1;
+    --display-pink-bgColor-emphasis: #ce2c85;
+    --display-pink-fgColor: #b12f79;
+    --display-pink-borderColor-muted: #fdc9e2;
+    --display-pink-borderColor-emphasis: #ce2c85;
     --avatar-bgColor: #ffffff;
     --avatar-borderColor: #1f232826;
     --avatar-shadow: 0px 0px 0px 2px #ffffffcc;

package/dist/css/functional/themes/light-high-contrast.css

@@ -132,6 +132,11 @@
   --display-indigo-fgColor: #494edf;
   --display-indigo-borderColor-muted: #d2d7fe;
   --display-indigo-borderColor-emphasis: #5a61e7;
+  --display-pink-bgColor-muted: #ffe5f1;
+  --display-pink-bgColor-emphasis: #ce2c85;
+  --display-pink-fgColor: #b12f79;
+  --display-pink-borderColor-muted: #fdc9e2;
+  --display-pink-borderColor-emphasis: #ce2c85;
   --avatar-bgColor: #ffffff;
   --avatar-borderColor: #010409e6;
   --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
@@ -670,6 +675,11 @@
     --display-indigo-fgColor: #494edf;
     --display-indigo-borderColor-muted: #d2d7fe;
     --display-indigo-borderColor-emphasis: #5a61e7;
+    --display-pink-bgColor-muted: #ffe5f1;
+    --display-pink-bgColor-emphasis: #ce2c85;
+    --display-pink-fgColor: #b12f79;
+    --display-pink-borderColor-muted: #fdc9e2;
+    --display-pink-borderColor-emphasis: #ce2c85;
     --avatar-bgColor: #ffffff;
     --avatar-borderColor: #010409e6;
     --avatar-shadow: 0px 0px 0px 2px #ffffffcc;

package/dist/css/functional/themes/light-tritanopia.css

@@ -132,6 +132,11 @@
   --display-indigo-fgColor: #494edf;
   --display-indigo-borderColor-muted: #d2d7fe;
   --display-indigo-borderColor-emphasis: #5a61e7;
+  --display-pink-bgColor-muted: #ffe5f1;
+  --display-pink-bgColor-emphasis: #ce2c85;
+  --display-pink-fgColor: #b12f79;
+  --display-pink-borderColor-muted: #fdc9e2;
+  --display-pink-borderColor-emphasis: #ce2c85;
   --avatar-bgColor: #ffffff;
   --avatar-borderColor: #1f232826;
   --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
@@ -670,6 +675,11 @@
     --display-indigo-fgColor: #494edf;
     --display-indigo-borderColor-muted: #d2d7fe;
     --display-indigo-borderColor-emphasis: #5a61e7;
+    --display-pink-bgColor-muted: #ffe5f1;
+    --display-pink-bgColor-emphasis: #ce2c85;
+    --display-pink-fgColor: #b12f79;
+    --display-pink-borderColor-muted: #fdc9e2;
+    --display-pink-borderColor-emphasis: #ce2c85;
     --avatar-bgColor: #ffffff;
     --avatar-borderColor: #1f232826;
     --avatar-shadow: 0px 0px 0px 2px #ffffffcc;

package/dist/css/functional/themes/light.css

@@ -132,6 +132,11 @@
   --display-indigo-fgColor: #494edf;
   --display-indigo-borderColor-muted: #d2d7fe;
   --display-indigo-borderColor-emphasis: #5a61e7;
+  --display-pink-bgColor-muted: #ffe5f1;
+  --display-pink-bgColor-emphasis: #ce2c85;
+  --display-pink-fgColor: #b12f79;
+  --display-pink-borderColor-muted: #fdc9e2;
+  --display-pink-borderColor-emphasis: #ce2c85;
   --avatar-bgColor: #ffffff;
   --avatar-borderColor: #1f232826;
   --avatar-shadow: 0px 0px 0px 2px #ffffffcc;
@@ -670,6 +675,11 @@
     --display-indigo-fgColor: #494edf;
     --display-indigo-borderColor-muted: #d2d7fe;
     --display-indigo-borderColor-emphasis: #5a61e7;
+    --display-pink-bgColor-muted: #ffe5f1;
+    --display-pink-bgColor-emphasis: #ce2c85;
+    --display-pink-fgColor: #b12f79;
+    --display-pink-borderColor-muted: #fdc9e2;
+    --display-pink-borderColor-emphasis: #ce2c85;
     --avatar-bgColor: #ffffff;
     --avatar-borderColor: #1f232826;
     --avatar-shadow: 0px 0px 0px 2px #ffffffcc;

package/dist/css/functional/typography/typography.css

@@ -20,7 +20,7 @@
   --text-title-size-large: 2rem;
   --text-display-lineHeight: 1.4;
   --text-display-size: 2.5rem;
-  --text-display-lineBoxHeight: 3.5rem;
+  --text-display-lineBoxHeight: 1.4;
   --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
   --fontStack-sansSerif: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
   --fontStack-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';

package/dist/docs/base/typography/typography.json

@@ -2,11 +2,23 @@
   "base-text-weight-light": {
     "$type": "fontWeight",
     "value": 300,
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/typography",
+        "scopes": ["all"]
+      }
+    },
     "filePath": "src/tokens/base/typography/typography.json",
     "isSource": true,
     "original": {
       "$type": "fontWeight",
-      "value": 300
+      "value": 300,
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/typography",
+          "scopes": ["all"]
+        }
+      }
     },
     "name": "base-text-weight-light",
     "attributes": {},
@@ -15,11 +27,23 @@
   "base-text-weight-normal": {
     "value": 400,
     "$type": "fontWeight",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/typography",
+        "scopes": ["all"]
+      }
+    },
     "filePath": "src/tokens/base/typography/typography.json",
     "isSource": true,
     "original": {
       "value": 400,
-      "$type": "fontWeight"
+      "$type": "fontWeight",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/typography",
+          "scopes": ["all"]
+        }
+      }
     },
     "name": "base-text-weight-normal",
     "attributes": {},
@@ -28,11 +52,23 @@
   "base-text-weight-medium": {
     "value": 500,
     "$type": "fontWeight",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/typography",
+        "scopes": ["all"]
+      }
+    },
     "filePath": "src/tokens/base/typography/typography.json",
     "isSource": true,
     "original": {
       "value": 500,
-      "$type": "fontWeight"
+      "$type": "fontWeight",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/typography",
+          "scopes": ["all"]
+        }
+      }
     },
     "name": "base-text-weight-medium",
     "attributes": {},
@@ -41,11 +77,23 @@
   "base-text-weight-semibold": {
     "value": 600,
     "$type": "fontWeight",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/typography",
+        "scopes": ["all"]
+      }
+    },
     "filePath": "src/tokens/base/typography/typography.json",
     "isSource": true,
     "original": {
       "value": 600,
-      "$type": "fontWeight"
+      "$type": "fontWeight",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/typography",
+          "scopes": ["all"]
+        }
+      }
     },
     "name": "base-text-weight-semibold",
     "attributes": {},