@primer/primitives 8.1.0-rc.313f1fc7 → 8.1.1-rc.29cfc4ea

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

@@ -16,13 +16,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;
@@ -72,11 +72,21 @@
   --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;
   --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;
@@ -157,7 +167,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;
@@ -184,7 +194,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;
@@ -221,7 +231,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;
@@ -288,10 +298,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;
@@ -409,7 +419,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;
@@ -559,13 +569,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;
@@ -615,11 +625,21 @@
     --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;
     --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;
@@ -700,7 +720,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;
@@ -727,7 +747,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;
@@ -764,7 +784,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;
@@ -831,10 +851,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;
@@ -952,7 +972,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/css/functional/themes/light-colorblind.css

@@ -72,11 +72,21 @@
   --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;
   --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;
@@ -615,11 +625,21 @@
     --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;
     --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/css/functional/themes/light-high-contrast.css

@@ -72,11 +72,21 @@
   --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;
   --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;
@@ -615,11 +625,21 @@
     --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;
     --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/css/functional/themes/light-tritanopia.css

@@ -72,11 +72,21 @@
   --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;
   --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;
@@ -615,11 +625,21 @@
     --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;
     --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/css/functional/themes/light.css

@@ -72,11 +72,21 @@
   --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;
   --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;
@@ -615,11 +625,21 @@
     --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;
     --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/deprecated/size.json

@@ -0,0 +1,8 @@
+{
+  "space.xxsmall": "Use --base-size-2 instead",
+  "space.xsmall": "Use --base-size-4 instead",
+  "space.small": "Use --base-size-6 instead",
+  "space.medium": "Use --base-size-8 instead",
+  "space.large": "Use --base-size-12 instead",
+  "space.xlarge": "Use --base-size-16 instead"
+}

package/dist/docs/base/size/size.json

@@ -1,4 +1,29 @@
 {
+  "base-size-2": {
+    "value": "0.125rem",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/size",
+        "scopes": ["size"]
+      }
+    },
+    "filePath": "src/tokens/base/size/size.json",
+    "isSource": true,
+    "original": {
+      "value": "2px",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/size",
+          "scopes": ["size"]
+        }
+      }
+    },
+    "name": "base-size-2",
+    "attributes": {},
+    "path": ["base", "size", "2"]
+  },
   "base-size-4": {
     "value": "0.25rem",
     "$type": "dimension",
@@ -24,6 +49,31 @@
     "attributes": {},
     "path": ["base", "size", "4"]
   },
+  "base-size-6": {
+    "value": "0.375rem",
+    "$type": "dimension",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "base/size",
+        "scopes": ["size"]
+      }
+    },
+    "filePath": "src/tokens/base/size/size.json",
+    "isSource": true,
+    "original": {
+      "value": "6px",
+      "$type": "dimension",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "base/size",
+          "scopes": ["size"]
+        }
+      }
+    },
+    "name": "base-size-6",
+    "attributes": {},
+    "path": ["base", "size", "6"]
+  },
   "base-size-8": {
     "value": "0.5rem",
     "$type": "dimension",

package/dist/docs/functional/size/size.json

@@ -1027,6 +1027,7 @@
   "space-xxsmall": {
     "value": "0.125rem",
     "$type": "dimension",
+    "deprecated": "Use --base-size-2 instead",
     "$extensions": {
       "org.primer.figma": {
         "collection": "functional/size",
@@ -1038,6 +1039,7 @@
     "original": {
       "value": "2px",
       "$type": "dimension",
+      "deprecated": "Use --base-size-2 instead",
       "$extensions": {
         "org.primer.figma": {
           "collection": "functional/size",
@@ -1052,6 +1054,7 @@
   "space-xsmall": {
     "value": "0.25rem",
     "$type": "dimension",
+    "deprecated": "Use --base-size-4 instead",
     "$extensions": {
       "org.primer.figma": {
         "collection": "functional/size",
@@ -1063,6 +1066,7 @@
     "original": {
       "value": "{base.size.4}",
       "$type": "dimension",
+      "deprecated": "Use --base-size-4 instead",
       "$extensions": {
         "org.primer.figma": {
           "collection": "functional/size",
@@ -1077,6 +1081,7 @@
   "space-small": {
     "value": "0.375rem",
     "$type": "dimension",
+    "deprecated": "Use --base-size-6 instead",
     "$extensions": {
       "org.primer.figma": {
         "collection": "functional/size",
@@ -1088,6 +1093,7 @@
     "original": {
       "value": "6px",
       "$type": "dimension",
+      "deprecated": "Use --base-size-6 instead",
       "$extensions": {
         "org.primer.figma": {
           "collection": "functional/size",
@@ -1102,6 +1108,7 @@
   "space-medium": {
     "value": "0.5rem",
     "$type": "dimension",
+    "deprecated": "Use --base-size-8 instead",
     "$extensions": {
       "org.primer.figma": {
         "collection": "functional/size",
@@ -1113,6 +1120,7 @@
     "original": {
       "value": "{base.size.8}",
       "$type": "dimension",
+      "deprecated": "Use --base-size-8 instead",
       "$extensions": {
         "org.primer.figma": {
           "collection": "functional/size",
@@ -1127,6 +1135,7 @@
   "space-large": {
     "value": "0.75rem",
     "$type": "dimension",
+    "deprecated": "Use --base-size-12 instead",
     "$extensions": {
       "org.primer.figma": {
         "collection": "functional/size",
@@ -1138,6 +1147,7 @@
     "original": {
       "value": "{base.size.12}",
       "$type": "dimension",
+      "deprecated": "Use --base-size-12 instead",
       "$extensions": {
         "org.primer.figma": {
           "collection": "functional/size",
@@ -1152,6 +1162,7 @@
   "space-xlarge": {
     "value": "1rem",
     "$type": "dimension",
+    "deprecated": "Use --base-size-16 instead",
     "$extensions": {
       "org.primer.figma": {
         "collection": "functional/size",
@@ -1163,6 +1174,7 @@
     "original": {
       "value": "{base.size.16}",
       "$type": "dimension",
+      "deprecated": "Use --base-size-16 instead",
       "$extensions": {
         "org.primer.figma": {
           "collection": "functional/size",