@primer/primitives 8.1.0 → 8.1.1-rc.40687c28

package/dist/internalCss/dark.css

@@ -301,13 +301,13 @@
   --diffBlob-deletion-bgColor-line: #f8514926;
   --diffBlob-deletion-bgColor-word: #f8514966;
   --diffBlob-hunk-bgColor-num: #388bfd66;
-  --diffBlob-expander-iconColor: #848d97;
+  --diffBlob-expander-iconColor: #8d96a0;
   --codeMirror-fgColor: #e6edf3;
   --codeMirror-bgColor: #0d1117;
   --codeMirror-gutters-bgColor: #0d1117;
   --codeMirror-gutterMarker-fgColor-default: #0d1117;
-  --codeMirror-gutterMarker-fgColor-muted: #848d97;
-  --codeMirror-lineNumber-fgColor: #848d97;
+  --codeMirror-gutterMarker-fgColor-muted: #8d96a0;
+  --codeMirror-lineNumber-fgColor: #8d96a0;
   --codeMirror-cursor-fgColor: #e6edf3;
   --codeMirror-selection-bgColor: #388bfd66;
   --codeMirror-activeline-bgColor: #6e768166;
@@ -357,6 +357,11 @@
   --display-purple-fgColor: #b687f7;
   --display-purple-borderColor-muted: #31146b;
   --display-purple-borderColor-emphasis: #975bf1;
+  --display-plum-bgColor-muted: #2a0e3f;
+  --display-plum-bgColor-emphasis: #b643ef;
+  --display-plum-fgColor: #d07ef7;
+  --display-plum-borderColor-muted: #40125e;
+  --display-plum-borderColor-emphasis: #b643ef;
   --display-red-bgColor-muted: #3c0614;
   --display-red-bgColor-emphasis: #eb3342;
   --display-red-fgColor: #f27d83;
@@ -447,7 +452,7 @@
   --control-borderColor-success: #238636;
   --control-borderColor-danger: #da3633;
   --control-borderColor-warning: #9e6a03;
-  --control-iconColor-rest: #848d97;
+  --control-iconColor-rest: #8d96a0;
   --control-transparent-bgColor-rest: #00000000;
   --control-transparent-bgColor-hover: #b1bac41f;
   --control-transparent-bgColor-active: #b1bac433;
@@ -474,7 +479,7 @@
   --controlTrack-bgColor-hover: #292e36;
   --controlTrack-bgColor-active: #31363e;
   --controlTrack-bgColor-disabled: #6e7681;
-  --controlTrack-fgColor-rest: #848d97;
+  --controlTrack-fgColor-rest: #8d96a0;
   --controlTrack-fgColor-disabled: #ffffff;
   --controlTrack-borderColor-rest: #00000000;
   --controlTrack-borderColor-disabled: #6e7681;
@@ -511,7 +516,7 @@
   --button-invisible-fgColor-rest: #4493f8;
   --button-invisible-fgColor-hover: #58a6ff;
   --button-invisible-fgColor-disabled: #6e7681;
-  --button-invisible-iconColor-rest: #848d97;
+  --button-invisible-iconColor-rest: #8d96a0;
   --button-invisible-iconColor-hover: #e6edf3;
   --button-invisible-iconColor-disabled: #6e7681;
   --button-invisible-bgColor-rest: #00000000;
@@ -578,10 +583,10 @@
   --sideNav-bgColor-selected: #21262d;
   --skeletonLoader-bgColor: #161b22;
   --timelineBadge-bgColor: #21262d;
-  --treeViewItem-leadingVisual-iconColor-rest: #848d97;
+  --treeViewItem-leadingVisual-iconColor-rest: #8d96a0;
   --underlineNav-borderColor-active: #f78166;
   --underlineNav-borderColor-hover: #6e768166;
-  --underlineNav-iconColor-rest: #848d97;
+  --underlineNav-iconColor-rest: #8d96a0;
   --selection-bgColor: #1f6febb3;
   --card-bgColor: #161b22;
   --label-green-bgColor-rest: #122117;
@@ -699,7 +704,7 @@
   --label-coral-fgColor-hover: #fa8c61;
   --label-coral-fgColor-active: #fdaa86;
   --fgColor-default: #e6edf3;
-  --fgColor-muted: #848d97;
+  --fgColor-muted: #8d96a0;
   --fgColor-onEmphasis: #ffffff;
   --fgColor-white: #ffffff;
   --fgColor-black: #010409;
@@ -1134,13 +1139,13 @@
     --diffBlob-deletion-bgColor-line: #f8514926;
     --diffBlob-deletion-bgColor-word: #f8514966;
     --diffBlob-hunk-bgColor-num: #388bfd66;
-    --diffBlob-expander-iconColor: #848d97;
+    --diffBlob-expander-iconColor: #8d96a0;
     --codeMirror-fgColor: #e6edf3;
     --codeMirror-bgColor: #0d1117;
     --codeMirror-gutters-bgColor: #0d1117;
     --codeMirror-gutterMarker-fgColor-default: #0d1117;
-    --codeMirror-gutterMarker-fgColor-muted: #848d97;
-    --codeMirror-lineNumber-fgColor: #848d97;
+    --codeMirror-gutterMarker-fgColor-muted: #8d96a0;
+    --codeMirror-lineNumber-fgColor: #8d96a0;
     --codeMirror-cursor-fgColor: #e6edf3;
     --codeMirror-selection-bgColor: #388bfd66;
     --codeMirror-activeline-bgColor: #6e768166;
@@ -1190,6 +1195,11 @@
     --display-purple-fgColor: #b687f7;
     --display-purple-borderColor-muted: #31146b;
     --display-purple-borderColor-emphasis: #975bf1;
+    --display-plum-bgColor-muted: #2a0e3f;
+    --display-plum-bgColor-emphasis: #b643ef;
+    --display-plum-fgColor: #d07ef7;
+    --display-plum-borderColor-muted: #40125e;
+    --display-plum-borderColor-emphasis: #b643ef;
     --display-red-bgColor-muted: #3c0614;
     --display-red-bgColor-emphasis: #eb3342;
     --display-red-fgColor: #f27d83;
@@ -1280,7 +1290,7 @@
     --control-borderColor-success: #238636;
     --control-borderColor-danger: #da3633;
     --control-borderColor-warning: #9e6a03;
-    --control-iconColor-rest: #848d97;
+    --control-iconColor-rest: #8d96a0;
     --control-transparent-bgColor-rest: #00000000;
     --control-transparent-bgColor-hover: #b1bac41f;
     --control-transparent-bgColor-active: #b1bac433;
@@ -1307,7 +1317,7 @@
     --controlTrack-bgColor-hover: #292e36;
     --controlTrack-bgColor-active: #31363e;
     --controlTrack-bgColor-disabled: #6e7681;
-    --controlTrack-fgColor-rest: #848d97;
+    --controlTrack-fgColor-rest: #8d96a0;
     --controlTrack-fgColor-disabled: #ffffff;
     --controlTrack-borderColor-rest: #00000000;
     --controlTrack-borderColor-disabled: #6e7681;
@@ -1344,7 +1354,7 @@
     --button-invisible-fgColor-rest: #4493f8;
     --button-invisible-fgColor-hover: #58a6ff;
     --button-invisible-fgColor-disabled: #6e7681;
-    --button-invisible-iconColor-rest: #848d97;
+    --button-invisible-iconColor-rest: #8d96a0;
     --button-invisible-iconColor-hover: #e6edf3;
     --button-invisible-iconColor-disabled: #6e7681;
     --button-invisible-bgColor-rest: #00000000;
@@ -1411,10 +1421,10 @@
     --sideNav-bgColor-selected: #21262d;
     --skeletonLoader-bgColor: #161b22;
     --timelineBadge-bgColor: #21262d;
-    --treeViewItem-leadingVisual-iconColor-rest: #848d97;
+    --treeViewItem-leadingVisual-iconColor-rest: #8d96a0;
     --underlineNav-borderColor-active: #f78166;
     --underlineNav-borderColor-hover: #6e768166;
-    --underlineNav-iconColor-rest: #848d97;
+    --underlineNav-iconColor-rest: #8d96a0;
     --selection-bgColor: #1f6febb3;
     --card-bgColor: #161b22;
     --label-green-bgColor-rest: #122117;
@@ -1532,7 +1542,7 @@
     --label-coral-fgColor-hover: #fa8c61;
     --label-coral-fgColor-active: #fdaa86;
     --fgColor-default: #e6edf3;
-    --fgColor-muted: #848d97;
+    --fgColor-muted: #8d96a0;
     --fgColor-onEmphasis: #ffffff;
     --fgColor-white: #ffffff;
     --fgColor-black: #010409;

package/dist/internalCss/light-colorblind.css

@@ -357,6 +357,11 @@
   --display-purple-fgColor: #783ae4;
   --display-purple-borderColor-muted: #e6d2fe;
   --display-purple-borderColor-emphasis: #894ceb;
+  --display-plum-bgColor-muted: #f8e5ff;
+  --display-plum-bgColor-emphasis: #a830e8;
+  --display-plum-fgColor: #961edc;
+  --display-plum-borderColor-muted: #f0cdfe;
+  --display-plum-borderColor-emphasis: #a830e8;
   --display-red-bgColor-muted: #ffe2e0;
   --display-red-bgColor-emphasis: #df0c24;
   --display-red-fgColor: #c50d28;
@@ -1190,6 +1195,11 @@
     --display-purple-fgColor: #783ae4;
     --display-purple-borderColor-muted: #e6d2fe;
     --display-purple-borderColor-emphasis: #894ceb;
+    --display-plum-bgColor-muted: #f8e5ff;
+    --display-plum-bgColor-emphasis: #a830e8;
+    --display-plum-fgColor: #961edc;
+    --display-plum-borderColor-muted: #f0cdfe;
+    --display-plum-borderColor-emphasis: #a830e8;
     --display-red-bgColor-muted: #ffe2e0;
     --display-red-bgColor-emphasis: #df0c24;
     --display-red-fgColor: #c50d28;

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

@@ -357,6 +357,11 @@
   --display-purple-fgColor: #783ae4;
   --display-purple-borderColor-muted: #e6d2fe;
   --display-purple-borderColor-emphasis: #894ceb;
+  --display-plum-bgColor-muted: #f8e5ff;
+  --display-plum-bgColor-emphasis: #a830e8;
+  --display-plum-fgColor: #961edc;
+  --display-plum-borderColor-muted: #f0cdfe;
+  --display-plum-borderColor-emphasis: #a830e8;
   --display-red-bgColor-muted: #ffe2e0;
   --display-red-bgColor-emphasis: #df0c24;
   --display-red-fgColor: #c50d28;
@@ -1190,6 +1195,11 @@
     --display-purple-fgColor: #783ae4;
     --display-purple-borderColor-muted: #e6d2fe;
     --display-purple-borderColor-emphasis: #894ceb;
+    --display-plum-bgColor-muted: #f8e5ff;
+    --display-plum-bgColor-emphasis: #a830e8;
+    --display-plum-fgColor: #961edc;
+    --display-plum-borderColor-muted: #f0cdfe;
+    --display-plum-borderColor-emphasis: #a830e8;
     --display-red-bgColor-muted: #ffe2e0;
     --display-red-bgColor-emphasis: #df0c24;
     --display-red-fgColor: #c50d28;

package/dist/internalCss/light-tritanopia.css

@@ -357,6 +357,11 @@
   --display-purple-fgColor: #783ae4;
   --display-purple-borderColor-muted: #e6d2fe;
   --display-purple-borderColor-emphasis: #894ceb;
+  --display-plum-bgColor-muted: #f8e5ff;
+  --display-plum-bgColor-emphasis: #a830e8;
+  --display-plum-fgColor: #961edc;
+  --display-plum-borderColor-muted: #f0cdfe;
+  --display-plum-borderColor-emphasis: #a830e8;
   --display-red-bgColor-muted: #ffe2e0;
   --display-red-bgColor-emphasis: #df0c24;
   --display-red-fgColor: #c50d28;
@@ -1190,6 +1195,11 @@
     --display-purple-fgColor: #783ae4;
     --display-purple-borderColor-muted: #e6d2fe;
     --display-purple-borderColor-emphasis: #894ceb;
+    --display-plum-bgColor-muted: #f8e5ff;
+    --display-plum-bgColor-emphasis: #a830e8;
+    --display-plum-fgColor: #961edc;
+    --display-plum-borderColor-muted: #f0cdfe;
+    --display-plum-borderColor-emphasis: #a830e8;
     --display-red-bgColor-muted: #ffe2e0;
     --display-red-bgColor-emphasis: #df0c24;
     --display-red-fgColor: #c50d28;

package/dist/internalCss/light.css

@@ -357,6 +357,11 @@
   --display-purple-fgColor: #783ae4;
   --display-purple-borderColor-muted: #e6d2fe;
   --display-purple-borderColor-emphasis: #894ceb;
+  --display-plum-bgColor-muted: #f8e5ff;
+  --display-plum-bgColor-emphasis: #a830e8;
+  --display-plum-fgColor: #961edc;
+  --display-plum-borderColor-muted: #f0cdfe;
+  --display-plum-borderColor-emphasis: #a830e8;
   --display-red-bgColor-muted: #ffe2e0;
   --display-red-bgColor-emphasis: #df0c24;
   --display-red-fgColor: #c50d28;
@@ -1190,6 +1195,11 @@
     --display-purple-fgColor: #783ae4;
     --display-purple-borderColor-muted: #e6d2fe;
     --display-purple-borderColor-emphasis: #894ceb;
+    --display-plum-bgColor-muted: #f8e5ff;
+    --display-plum-bgColor-emphasis: #a830e8;
+    --display-plum-fgColor: #961edc;
+    --display-plum-borderColor-muted: #f0cdfe;
+    --display-plum-borderColor-emphasis: #a830e8;
     --display-red-bgColor-muted: #ffe2e0;
     --display-red-bgColor-emphasis: #df0c24;
     --display-red-fgColor: #c50d28;

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

@@ -424,7 +424,7 @@
     "path": ["diffBlob", "hunk", "bgColor", "num"]
   },
   "diffBlob-expander-iconColor": {
-    "value": "#848d97",
+    "value": "#8d96a0",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -569,7 +569,7 @@
     "path": ["codeMirror", "gutterMarker", "fgColor", "default"]
   },
   "codeMirror-gutterMarker-fgColor-muted": {
-    "value": "#848d97",
+    "value": "#8d96a0",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -598,7 +598,7 @@
     "path": ["codeMirror", "gutterMarker", "fgColor", "muted"]
   },
   "codeMirror-lineNumber-fgColor": {
-    "value": "#848d97",
+    "value": "#8d96a0",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -2051,6 +2051,151 @@
     "attributes": {},
     "path": ["display", "purple", "borderColor", "emphasis"]
   },
+  "display-plum-bgColor-muted": {
+    "value": "#2a0e3f",
+    "$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.plum.0}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "display-plum-bgColor-muted",
+    "attributes": {},
+    "path": ["display", "plum", "bgColor", "muted"]
+  },
+  "display-plum-bgColor-emphasis": {
+    "value": "#b643ef",
+    "$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.plum.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["bgColor"]
+        }
+      }
+    },
+    "name": "display-plum-bgColor-emphasis",
+    "attributes": {},
+    "path": ["display", "plum", "bgColor", "emphasis"]
+  },
+  "display-plum-fgColor": {
+    "value": "#d07ef7",
+    "$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.plum.6}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["fgColor"]
+        }
+      }
+    },
+    "name": "display-plum-fgColor",
+    "attributes": {},
+    "path": ["display", "plum", "fgColor"]
+  },
+  "display-plum-borderColor-muted": {
+    "value": "#40125e",
+    "$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.plum.1}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["borderColor"]
+        }
+      }
+    },
+    "name": "display-plum-borderColor-muted",
+    "attributes": {},
+    "path": ["display", "plum", "borderColor", "muted"]
+  },
+  "display-plum-borderColor-emphasis": {
+    "value": "#b643ef",
+    "$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.plum.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "component (internal)",
+          "scopes": ["borderColor"]
+        }
+      }
+    },
+    "name": "display-plum-borderColor-emphasis",
+    "attributes": {},
+    "path": ["display", "plum", "borderColor", "emphasis"]
+  },
   "display-red-bgColor-muted": {
     "value": "#3c0614",
     "$type": "color",
@@ -4697,7 +4842,7 @@
     "path": ["control", "borderColor", "warning"]
   },
   "control-iconColor-rest": {
-    "value": "#848d97",
+    "value": "#8d96a0",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -5536,7 +5681,7 @@
     "path": ["controlTrack", "bgColor", "disabled"]
   },
   "controlTrack-fgColor-rest": {
-    "value": "#848d97",
+    "value": "#8d96a0",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -6647,7 +6792,7 @@
     "path": ["button", "invisible", "fgColor", "disabled"]
   },
   "button-invisible-iconColor-rest": {
-    "value": "#848d97",
+    "value": "#8d96a0",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -8638,7 +8783,7 @@
     "path": ["timelineBadge", "bgColor"]
   },
   "treeViewItem-leadingVisual-iconColor-rest": {
-    "value": "#848d97",
+    "value": "#8d96a0",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -8725,7 +8870,7 @@
     "path": ["underlineNav", "borderColor", "hover"]
   },
   "underlineNav-iconColor-rest": {
-    "value": "#848d97",
+    "value": "#8d96a0",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -12163,7 +12308,7 @@
     "path": ["fgColor", "default"]
   },
   "fgColor-muted": {
-    "value": "#848d97",
+    "value": "#8d96a0",
     "$type": "color",
     "$extensions": {
       "org.primer.figma": {
@@ -12177,13 +12322,13 @@
       }
     },
     "mix": {
-      "color": "#6e7681",
-      "weight": 0.25
+      "color": "#8b949e",
+      "weight": 0.95
     },
     "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{base.color.neutral.3}",
+      "value": "{base.color.neutral.2}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -12197,8 +12342,8 @@
         }
       },
       "mix": {
-        "color": "{base.color.neutral.4}",
-        "weight": 0.25
+        "color": "{base.color.neutral.3}",
+        "weight": 0.95
       }
     },
     "name": "fgColor-muted",