@primer/primitives 8.0.0 → 8.1.0

package/dist/figma/typography/typography.json

@@ -1,7 +1,7 @@
 [
   {
     "name": "text/codeBlock/lineHeight",
-    "value": "20px",
+    "value": 20,
     "type": "FLOAT",
     "refId": "typography/text/codeBlock/lineHeight",
     "collection": "typography",
@@ -21,7 +21,7 @@
   },
   {
     "name": "text/caption/lineHeight",
-    "value": "16px",
+    "value": 16,
     "type": "FLOAT",
     "refId": "typography/text/caption/lineHeight",
     "collection": "typography",
@@ -41,7 +41,7 @@
   },
   {
     "name": "text/body/lineHeight/small",
-    "value": "20px",
+    "value": 20,
     "type": "FLOAT",
     "refId": "typography/text/body/lineHeight/small",
     "collection": "typography",
@@ -51,7 +51,7 @@
   },
   {
     "name": "text/body/lineHeight/medium",
-    "value": "20px",
+    "value": 20,
     "type": "FLOAT",
     "refId": "typography/text/body/lineHeight/medium",
     "collection": "typography",
@@ -61,7 +61,7 @@
   },
   {
     "name": "text/body/lineHeight/large",
-    "value": "24px",
+    "value": 24,
     "type": "FLOAT",
     "refId": "typography/text/body/lineHeight/large",
     "collection": "typography",
@@ -121,7 +121,7 @@
   },
   {
     "name": "text/title/lineHeight/small",
-    "value": "24px",
+    "value": 24,
     "type": "FLOAT",
     "refId": "typography/text/title/lineHeight/small",
     "collection": "typography",
@@ -131,7 +131,7 @@
   },
   {
     "name": "text/title/lineHeight/medium",
-    "value": "32px",
+    "value": 32,
     "type": "FLOAT",
     "refId": "typography/text/title/lineHeight/medium",
     "collection": "typography",
@@ -141,7 +141,7 @@
   },
   {
     "name": "text/title/lineHeight/large",
-    "value": "48px",
+    "value": 48,
     "type": "FLOAT",
     "refId": "typography/text/title/lineHeight/large",
     "collection": "typography",
@@ -181,7 +181,7 @@
   },
   {
     "name": "text/display/lineHeight",
-    "value": "56px",
+    "value": 56,
     "type": "FLOAT",
     "refId": "typography/text/display/lineHeight",
     "collection": "typography",
@@ -201,7 +201,7 @@
   },
   {
     "name": "text/display/lineBoxHeight",
-    "value": "56px",
+    "value": 56,
     "type": "FLOAT",
     "refId": "typography/text/display/lineBoxHeight",
     "collection": "typography",

package/dist/internalCss/dark-colorblind.css

@@ -362,6 +362,11 @@
   --display-red-fgColor: #f27d83;
   --display-red-borderColor-muted: #58091a;
   --display-red-borderColor-emphasis: #eb3342;
+  --display-coral-bgColor-muted: #3c0614;
+  --display-coral-bgColor-emphasis: #eb3342;
+  --display-coral-fgColor: #f27d83;
+  --display-coral-borderColor-muted: #58091a;
+  --display-coral-borderColor-emphasis: #eb3342;
   --display-yellow-bgColor-muted: #2e1a00;
   --display-yellow-bgColor-emphasis: #aa7109;
   --display-yellow-fgColor: #d3910d;
@@ -1190,6 +1195,11 @@
     --display-red-fgColor: #f27d83;
     --display-red-borderColor-muted: #58091a;
     --display-red-borderColor-emphasis: #eb3342;
+    --display-coral-bgColor-muted: #3c0614;
+    --display-coral-bgColor-emphasis: #eb3342;
+    --display-coral-fgColor: #f27d83;
+    --display-coral-borderColor-muted: #58091a;
+    --display-coral-borderColor-emphasis: #eb3342;
     --display-yellow-bgColor-muted: #2e1a00;
     --display-yellow-bgColor-emphasis: #aa7109;
     --display-yellow-fgColor: #d3910d;

package/dist/internalCss/dark-dimmed.css

@@ -362,6 +362,11 @@
   --display-red-fgColor: #f27d83;
   --display-red-borderColor-muted: #58091a;
   --display-red-borderColor-emphasis: #eb3342;
+  --display-coral-bgColor-muted: #3c0614;
+  --display-coral-bgColor-emphasis: #eb3342;
+  --display-coral-fgColor: #f27d83;
+  --display-coral-borderColor-muted: #58091a;
+  --display-coral-borderColor-emphasis: #eb3342;
   --display-yellow-bgColor-muted: #2e1a00;
   --display-yellow-bgColor-emphasis: #aa7109;
   --display-yellow-fgColor: #d3910d;
@@ -1190,6 +1195,11 @@
     --display-red-fgColor: #f27d83;
     --display-red-borderColor-muted: #58091a;
     --display-red-borderColor-emphasis: #eb3342;
+    --display-coral-bgColor-muted: #3c0614;
+    --display-coral-bgColor-emphasis: #eb3342;
+    --display-coral-fgColor: #f27d83;
+    --display-coral-borderColor-muted: #58091a;
+    --display-coral-borderColor-emphasis: #eb3342;
     --display-yellow-bgColor-muted: #2e1a00;
     --display-yellow-bgColor-emphasis: #aa7109;
     --display-yellow-fgColor: #d3910d;

package/dist/internalCss/dark-high-contrast.css

@@ -362,6 +362,11 @@
   --display-red-fgColor: #f27d83;
   --display-red-borderColor-muted: #58091a;
   --display-red-borderColor-emphasis: #eb3342;
+  --display-coral-bgColor-muted: #3c0614;
+  --display-coral-bgColor-emphasis: #eb3342;
+  --display-coral-fgColor: #f27d83;
+  --display-coral-borderColor-muted: #58091a;
+  --display-coral-borderColor-emphasis: #eb3342;
   --display-yellow-bgColor-muted: #2e1a00;
   --display-yellow-bgColor-emphasis: #aa7109;
   --display-yellow-fgColor: #d3910d;
@@ -1190,6 +1195,11 @@
     --display-red-fgColor: #f27d83;
     --display-red-borderColor-muted: #58091a;
     --display-red-borderColor-emphasis: #eb3342;
+    --display-coral-bgColor-muted: #3c0614;
+    --display-coral-bgColor-emphasis: #eb3342;
+    --display-coral-fgColor: #f27d83;
+    --display-coral-borderColor-muted: #58091a;
+    --display-coral-borderColor-emphasis: #eb3342;
     --display-yellow-bgColor-muted: #2e1a00;
     --display-yellow-bgColor-emphasis: #aa7109;
     --display-yellow-fgColor: #d3910d;

package/dist/internalCss/dark-tritanopia.css

@@ -362,6 +362,11 @@
   --display-red-fgColor: #f27d83;
   --display-red-borderColor-muted: #58091a;
   --display-red-borderColor-emphasis: #eb3342;
+  --display-coral-bgColor-muted: #3c0614;
+  --display-coral-bgColor-emphasis: #eb3342;
+  --display-coral-fgColor: #f27d83;
+  --display-coral-borderColor-muted: #58091a;
+  --display-coral-borderColor-emphasis: #eb3342;
   --display-yellow-bgColor-muted: #2e1a00;
   --display-yellow-bgColor-emphasis: #aa7109;
   --display-yellow-fgColor: #d3910d;
@@ -1190,6 +1195,11 @@
     --display-red-fgColor: #f27d83;
     --display-red-borderColor-muted: #58091a;
     --display-red-borderColor-emphasis: #eb3342;
+    --display-coral-bgColor-muted: #3c0614;
+    --display-coral-bgColor-emphasis: #eb3342;
+    --display-coral-fgColor: #f27d83;
+    --display-coral-borderColor-muted: #58091a;
+    --display-coral-borderColor-emphasis: #eb3342;
     --display-yellow-bgColor-muted: #2e1a00;
     --display-yellow-bgColor-emphasis: #aa7109;
     --display-yellow-fgColor: #d3910d;

package/dist/internalCss/dark.css

@@ -362,6 +362,11 @@
   --display-red-fgColor: #f27d83;
   --display-red-borderColor-muted: #58091a;
   --display-red-borderColor-emphasis: #eb3342;
+  --display-coral-bgColor-muted: #3c0614;
+  --display-coral-bgColor-emphasis: #eb3342;
+  --display-coral-fgColor: #f27d83;
+  --display-coral-borderColor-muted: #58091a;
+  --display-coral-borderColor-emphasis: #eb3342;
   --display-yellow-bgColor-muted: #2e1a00;
   --display-yellow-bgColor-emphasis: #aa7109;
   --display-yellow-fgColor: #d3910d;
@@ -1190,6 +1195,11 @@
     --display-red-fgColor: #f27d83;
     --display-red-borderColor-muted: #58091a;
     --display-red-borderColor-emphasis: #eb3342;
+    --display-coral-bgColor-muted: #3c0614;
+    --display-coral-bgColor-emphasis: #eb3342;
+    --display-coral-fgColor: #f27d83;
+    --display-coral-borderColor-muted: #58091a;
+    --display-coral-borderColor-emphasis: #eb3342;
     --display-yellow-bgColor-muted: #2e1a00;
     --display-yellow-bgColor-emphasis: #aa7109;
     --display-yellow-fgColor: #d3910d;

package/dist/internalCss/light-colorblind.css

@@ -362,6 +362,11 @@
   --display-red-fgColor: #c50d28;
   --display-red-borderColor-muted: #fecdcd;
   --display-red-borderColor-emphasis: #df0c24;
+  --display-coral-bgColor-muted: #ffe5db;
+  --display-coral-bgColor-emphasis: #d43511;
+  --display-coral-fgColor: #ba2e12;
+  --display-coral-borderColor-muted: #fecebe;
+  --display-coral-borderColor-emphasis: #d43511;
   --display-yellow-bgColor-muted: #ffec9e;
   --display-yellow-bgColor-emphasis: #946a00;
   --display-yellow-fgColor: #805900;
@@ -1190,6 +1195,11 @@
     --display-red-fgColor: #c50d28;
     --display-red-borderColor-muted: #fecdcd;
     --display-red-borderColor-emphasis: #df0c24;
+    --display-coral-bgColor-muted: #ffe5db;
+    --display-coral-bgColor-emphasis: #d43511;
+    --display-coral-fgColor: #ba2e12;
+    --display-coral-borderColor-muted: #fecebe;
+    --display-coral-borderColor-emphasis: #d43511;
     --display-yellow-bgColor-muted: #ffec9e;
     --display-yellow-bgColor-emphasis: #946a00;
     --display-yellow-fgColor: #805900;

package/dist/internalCss/light-high-contrast.css

@@ -362,6 +362,11 @@
   --display-red-fgColor: #c50d28;
   --display-red-borderColor-muted: #fecdcd;
   --display-red-borderColor-emphasis: #df0c24;
+  --display-coral-bgColor-muted: #ffe5db;
+  --display-coral-bgColor-emphasis: #d43511;
+  --display-coral-fgColor: #ba2e12;
+  --display-coral-borderColor-muted: #fecebe;
+  --display-coral-borderColor-emphasis: #d43511;
   --display-yellow-bgColor-muted: #ffec9e;
   --display-yellow-bgColor-emphasis: #946a00;
   --display-yellow-fgColor: #805900;
@@ -1190,6 +1195,11 @@
     --display-red-fgColor: #c50d28;
     --display-red-borderColor-muted: #fecdcd;
     --display-red-borderColor-emphasis: #df0c24;
+    --display-coral-bgColor-muted: #ffe5db;
+    --display-coral-bgColor-emphasis: #d43511;
+    --display-coral-fgColor: #ba2e12;
+    --display-coral-borderColor-muted: #fecebe;
+    --display-coral-borderColor-emphasis: #d43511;
     --display-yellow-bgColor-muted: #ffec9e;
     --display-yellow-bgColor-emphasis: #946a00;
     --display-yellow-fgColor: #805900;

package/dist/internalCss/light-tritanopia.css

@@ -362,6 +362,11 @@
   --display-red-fgColor: #c50d28;
   --display-red-borderColor-muted: #fecdcd;
   --display-red-borderColor-emphasis: #df0c24;
+  --display-coral-bgColor-muted: #ffe5db;
+  --display-coral-bgColor-emphasis: #d43511;
+  --display-coral-fgColor: #ba2e12;
+  --display-coral-borderColor-muted: #fecebe;
+  --display-coral-borderColor-emphasis: #d43511;
   --display-yellow-bgColor-muted: #ffec9e;
   --display-yellow-bgColor-emphasis: #946a00;
   --display-yellow-fgColor: #805900;
@@ -1190,6 +1195,11 @@
     --display-red-fgColor: #c50d28;
     --display-red-borderColor-muted: #fecdcd;
     --display-red-borderColor-emphasis: #df0c24;
+    --display-coral-bgColor-muted: #ffe5db;
+    --display-coral-bgColor-emphasis: #d43511;
+    --display-coral-fgColor: #ba2e12;
+    --display-coral-borderColor-muted: #fecebe;
+    --display-coral-borderColor-emphasis: #d43511;
     --display-yellow-bgColor-muted: #ffec9e;
     --display-yellow-bgColor-emphasis: #946a00;
     --display-yellow-fgColor: #805900;

package/dist/internalCss/light.css

@@ -362,6 +362,11 @@
   --display-red-fgColor: #c50d28;
   --display-red-borderColor-muted: #fecdcd;
   --display-red-borderColor-emphasis: #df0c24;
+  --display-coral-bgColor-muted: #ffe5db;
+  --display-coral-bgColor-emphasis: #d43511;
+  --display-coral-fgColor: #ba2e12;
+  --display-coral-borderColor-muted: #fecebe;
+  --display-coral-borderColor-emphasis: #d43511;
   --display-yellow-bgColor-muted: #ffec9e;
   --display-yellow-bgColor-emphasis: #946a00;
   --display-yellow-fgColor: #805900;
@@ -1190,6 +1195,11 @@
     --display-red-fgColor: #c50d28;
     --display-red-borderColor-muted: #fecdcd;
     --display-red-borderColor-emphasis: #df0c24;
+    --display-coral-bgColor-muted: #ffe5db;
+    --display-coral-bgColor-emphasis: #d43511;
+    --display-coral-fgColor: #ba2e12;
+    --display-coral-borderColor-muted: #fecebe;
+    --display-coral-borderColor-emphasis: #d43511;
     --display-yellow-bgColor-muted: #ffec9e;
     --display-yellow-bgColor-emphasis: #946a00;
     --display-yellow-fgColor: #805900;

package/dist/styleLint/functional/themes/dark-colorblind.json

@@ -2196,6 +2196,151 @@
     "attributes": {},
     "path": ["display", "red", "borderColor", "emphasis"]
   },
+  "display-coral-bgColor-muted": {
+    "value": "#3c0614",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/display-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.red.0}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "display-coral-bgColor-muted",
+    "attributes": {},
+    "path": ["display", "coral", "bgColor", "muted"]
+  },
+  "display-coral-bgColor-emphasis": {
+    "value": "#eb3342",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/display-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.red.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "display-coral-bgColor-emphasis",
+    "attributes": {},
+    "path": ["display", "coral", "bgColor", "emphasis"]
+  },
+  "display-coral-fgColor": {
+    "value": "#f27d83",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/display-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.red.6}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "display-coral-fgColor",
+    "attributes": {},
+    "path": ["display", "coral", "fgColor"]
+  },
+  "display-coral-borderColor-muted": {
+    "value": "#58091a",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["borderColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/display-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.red.1}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["borderColor"]
+        }
+      }
+    },
+    "name": "display-coral-borderColor-muted",
+    "attributes": {},
+    "path": ["display", "coral", "borderColor", "muted"]
+  },
+  "display-coral-borderColor-emphasis": {
+    "value": "#eb3342",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["borderColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/display-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.red.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["borderColor"]
+        }
+      }
+    },
+    "name": "display-coral-borderColor-emphasis",
+    "attributes": {},
+    "path": ["display", "coral", "borderColor", "emphasis"]
+  },
   "display-yellow-bgColor-muted": {
     "value": "#2e1a00",
     "$type": "color",

package/dist/styleLint/functional/themes/dark-dimmed.json

@@ -2196,6 +2196,151 @@
     "attributes": {},
     "path": ["display", "red", "borderColor", "emphasis"]
   },
+  "display-coral-bgColor-muted": {
+    "value": "#3c0614",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/display-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.red.0}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "display-coral-bgColor-muted",
+    "attributes": {},
+    "path": ["display", "coral", "bgColor", "muted"]
+  },
+  "display-coral-bgColor-emphasis": {
+    "value": "#eb3342",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["bgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/display-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.red.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "display-coral-bgColor-emphasis",
+    "attributes": {},
+    "path": ["display", "coral", "bgColor", "emphasis"]
+  },
+  "display-coral-fgColor": {
+    "value": "#f27d83",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["fgColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/display-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.red.6}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "display-coral-fgColor",
+    "attributes": {},
+    "path": ["display", "coral", "fgColor"]
+  },
+  "display-coral-borderColor-muted": {
+    "value": "#58091a",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["borderColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/display-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.red.1}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["borderColor"]
+        }
+      }
+    },
+    "name": "display-coral-borderColor-muted",
+    "attributes": {},
+    "path": ["display", "coral", "borderColor", "muted"]
+  },
+  "display-coral-borderColor-emphasis": {
+    "value": "#eb3342",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "component (internal)",
+        "scopes": ["borderColor"]
+      }
+    },
+    "filePath": "src/tokens/functional/color/dark/display-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.display.color.red.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["borderColor"]
+        }
+      }
+    },
+    "name": "display-coral-borderColor-emphasis",
+    "attributes": {},
+    "path": ["display", "coral", "borderColor", "emphasis"]
+  },
   "display-yellow-bgColor-muted": {
     "value": "#2e1a00",
     "$type": "color",