@primer/primitives 8.2.2 → 8.2.3-rc.441bfd58

package/dist/docs/functional/themes/dark.json

@@ -4558,11 +4558,10 @@
         "scopes": ["borderColor"]
       }
     },
-    "alpha": 0.15,
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{base.color.white}",
+      "value": "{borderColor.translucent}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -4571,8 +4570,7 @@
           "group": "component (internal)",
           "scopes": ["borderColor"]
         }
-      },
-      "alpha": 0.15
+      }
     },
     "name": "avatar-borderColor",
     "attributes": {},
@@ -4863,8 +4861,12 @@
     "path": ["control", "fgColor", "rest"]
   },
   "control-fgColor-placeholder": {
-    "value": "#484f58",
+    "value": "#858e98",
     "$type": "color",
+    "mix": {
+      "color": "#6e7681",
+      "weight": 0.2
+    },
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
@@ -4876,8 +4878,12 @@
     "filePath": "src/tokens/functional/color/dark/patterns-dark.json5",
     "isSource": true,
     "original": {
-      "value": "{base.color.neutral.5}",
+      "value": "{base.color.neutral.3}",
       "$type": "color",
+      "mix": {
+        "color": "{base.color.neutral.4}",
+        "weight": 0.2
+      },
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -14422,6 +14428,37 @@
     "attributes": {},
     "path": ["borderColor", "transparent"]
   },
+  "borderColor-translucent": {
+    "value": "#ffffff26",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component (internal)",
+        "scopes": ["borderColor"]
+      }
+    },
+    "alpha": 0.15,
+    "filePath": "src/tokens/functional/color/dark/primitives-dark.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.color.white}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component (internal)",
+          "scopes": ["borderColor"]
+        }
+      },
+      "alpha": 0.15
+    },
+    "name": "borderColor-translucent",
+    "attributes": {},
+    "path": ["borderColor", "translucent"]
+  },
   "borderColor-neutral-muted": {
     "value": "#6e768166",
     "$type": "color",

package/dist/docs/functional/themes/light-colorblind.json

@@ -4552,11 +4552,10 @@
         "scopes": ["borderColor"]
       }
     },
-    "alpha": 0.15,
     "filePath": "src/tokens/functional/color/light/patterns-light.json5",
     "isSource": true,
     "original": {
-      "value": "{base.color.black}",
+      "value": "{borderColor.translucent}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -4565,8 +4564,7 @@
           "group": "component (internal)",
           "scopes": ["borderColor"]
         }
-      },
-      "alpha": 0.15
+      }
     },
     "name": "avatar-borderColor",
     "attributes": {},
@@ -4857,8 +4855,12 @@
     "path": ["control", "fgColor", "rest"]
   },
   "control-fgColor-placeholder": {
-    "value": "#6e7781",
+    "value": "#69727c",
     "$type": "color",
+    "mix": {
+      "color": "#57606a",
+      "weight": 0.2
+    },
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
@@ -4872,6 +4874,10 @@
     "original": {
       "value": "{base.color.neutral.5}",
       "$type": "color",
+      "mix": {
+        "color": "{base.color.neutral.6}",
+        "weight": 0.2
+      },
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -14415,6 +14421,37 @@
     "attributes": {},
     "path": ["borderColor", "transparent"]
   },
+  "borderColor-translucent": {
+    "value": "#1f232826",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "semantic",
+        "scopes": ["borderColor"]
+      }
+    },
+    "alpha": 0.15,
+    "filePath": "src/tokens/functional/color/light/primitives-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.color.black}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "semantic",
+          "scopes": ["borderColor"]
+        }
+      },
+      "alpha": 0.15
+    },
+    "name": "borderColor-translucent",
+    "attributes": {},
+    "path": ["borderColor", "translucent"]
+  },
   "borderColor-neutral-muted": {
     "value": "#afb8c133",
     "$type": "color",

package/dist/docs/functional/themes/light-high-contrast.json

@@ -4550,9 +4550,9 @@
         "scopes": ["borderColor"]
       }
     },
-    "alpha": 0.9,
     "filePath": "src/tokens/functional/color/light/overrides/light.high-contrast.json5",
     "isSource": true,
+    "alpha": 0.9,
     "original": {
       "value": "{base.color.black}",
       "$type": "color",
@@ -4855,8 +4855,12 @@
     "path": ["control", "fgColor", "rest"]
   },
   "control-fgColor-placeholder": {
-    "value": "#66707b",
+    "value": "#616a75",
     "$type": "color",
+    "mix": {
+      "color": "#4b535d",
+      "weight": 0.2
+    },
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
@@ -4870,6 +4874,10 @@
     "original": {
       "value": "{base.color.neutral.5}",
       "$type": "color",
+      "mix": {
+        "color": "{base.color.neutral.6}",
+        "weight": 0.2
+      },
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -14419,6 +14427,37 @@
     "attributes": {},
     "path": ["borderColor", "transparent"]
   },
+  "borderColor-translucent": {
+    "value": "#20252c",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "semantic",
+        "scopes": ["borderColor"]
+      }
+    },
+    "alpha": 1,
+    "filePath": "src/tokens/functional/color/light/overrides/light.high-contrast.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.color.neutral.8}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "semantic",
+          "scopes": ["borderColor"]
+        }
+      },
+      "alpha": 1
+    },
+    "name": "borderColor-translucent",
+    "attributes": {},
+    "path": ["borderColor", "translucent"]
+  },
   "borderColor-neutral-muted": {
     "value": "#88929d",
     "$type": "color",

package/dist/docs/functional/themes/light-tritanopia.json

@@ -4548,11 +4548,10 @@
         "scopes": ["borderColor"]
       }
     },
-    "alpha": 0.15,
     "filePath": "src/tokens/functional/color/light/patterns-light.json5",
     "isSource": true,
     "original": {
-      "value": "{base.color.black}",
+      "value": "{borderColor.translucent}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -4561,8 +4560,7 @@
           "group": "component (internal)",
           "scopes": ["borderColor"]
         }
-      },
-      "alpha": 0.15
+      }
     },
     "name": "avatar-borderColor",
     "attributes": {},
@@ -4853,8 +4851,12 @@
     "path": ["control", "fgColor", "rest"]
   },
   "control-fgColor-placeholder": {
-    "value": "#6e7781",
+    "value": "#69727c",
     "$type": "color",
+    "mix": {
+      "color": "#57606a",
+      "weight": 0.2
+    },
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
@@ -4868,6 +4870,10 @@
     "original": {
       "value": "{base.color.neutral.5}",
       "$type": "color",
+      "mix": {
+        "color": "{base.color.neutral.6}",
+        "weight": 0.2
+      },
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -14407,6 +14413,37 @@
     "attributes": {},
     "path": ["borderColor", "transparent"]
   },
+  "borderColor-translucent": {
+    "value": "#1f232826",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "semantic",
+        "scopes": ["borderColor"]
+      }
+    },
+    "alpha": 0.15,
+    "filePath": "src/tokens/functional/color/light/primitives-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.color.black}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "semantic",
+          "scopes": ["borderColor"]
+        }
+      },
+      "alpha": 0.15
+    },
+    "name": "borderColor-translucent",
+    "attributes": {},
+    "path": ["borderColor", "translucent"]
+  },
   "borderColor-neutral-muted": {
     "value": "#afb8c133",
     "$type": "color",

package/dist/docs/functional/themes/light.json

@@ -4548,11 +4548,10 @@
         "scopes": ["borderColor"]
       }
     },
-    "alpha": 0.15,
     "filePath": "src/tokens/functional/color/light/patterns-light.json5",
     "isSource": true,
     "original": {
-      "value": "{base.color.black}",
+      "value": "{borderColor.translucent}",
       "$type": "color",
       "$extensions": {
         "org.primer.figma": {
@@ -4561,8 +4560,7 @@
           "group": "component (internal)",
           "scopes": ["borderColor"]
         }
-      },
-      "alpha": 0.15
+      }
     },
     "name": "avatar-borderColor",
     "attributes": {},
@@ -4853,8 +4851,12 @@
     "path": ["control", "fgColor", "rest"]
   },
   "control-fgColor-placeholder": {
-    "value": "#6e7781",
+    "value": "#69727c",
     "$type": "color",
+    "mix": {
+      "color": "#57606a",
+      "weight": 0.2
+    },
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
@@ -4868,6 +4870,10 @@
     "original": {
       "value": "{base.color.neutral.5}",
       "$type": "color",
+      "mix": {
+        "color": "{base.color.neutral.6}",
+        "weight": 0.2
+      },
       "$extensions": {
         "org.primer.figma": {
           "collection": "mode",
@@ -14407,6 +14413,37 @@
     "attributes": {},
     "path": ["borderColor", "transparent"]
   },
+  "borderColor-translucent": {
+    "value": "#1f232826",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "light",
+        "group": "semantic",
+        "scopes": ["borderColor"]
+      }
+    },
+    "alpha": 0.15,
+    "filePath": "src/tokens/functional/color/light/primitives-light.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.color.black}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "light",
+          "group": "semantic",
+          "scopes": ["borderColor"]
+        }
+      },
+      "alpha": 0.15
+    },
+    "name": "borderColor-translucent",
+    "attributes": {},
+    "path": ["borderColor", "translucent"]
+  },
   "borderColor-neutral-muted": {
     "value": "#afb8c133",
     "$type": "color",

package/dist/figma/figma.json

@@ -82,8 +82,8 @@
         "component shadow",
         "syntax",
         "semantic",
-        "component",
-        "component (internal)"
+        "component (internal)",
+        "component"
       ]
     },
     "typography": {

package/dist/figma/themes/dark-colorblind.json

@@ -1472,6 +1472,23 @@
     "group": "semantic",
     "scopes": ["STROKE_COLOR"]
   },
+  {
+    "name": "borderColor/translucent",
+    "value": {
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 0.15
+    },
+    "type": "COLOR",
+    "alpha": 0.15,
+    "refId": "mode/borderColor/translucent",
+    "reference": "base/color/dark/base/color/white",
+    "collection": "mode",
+    "mode": "dark colorblind",
+    "group": "component (internal)",
+    "scopes": ["STROKE_COLOR"]
+  },
   {
     "name": "borderColor/transparent",
     "value": {
@@ -5410,14 +5427,15 @@
   {
     "name": "control/fgColor/placeholder",
     "value": {
-      "r": 0.2823529411764706,
-      "g": 0.30980392156862746,
-      "b": 0.34509803921568627,
+      "r": 0.5215686274509804,
+      "g": 0.5568627450980392,
+      "b": 0.596078431372549,
       "a": 1
     },
     "type": "COLOR",
+    "isMix": true,
     "refId": "mode/control/fgColor/placeholder",
-    "reference": "base/color/dark/base/color/neutral/5",
+    "reference": "base/color/dark/base/color/neutral/3",
     "collection": "mode",
     "mode": "dark colorblind",
     "group": "component",
@@ -5587,23 +5605,6 @@
     "collection": "mode",
     "group": "component shadow"
   },
-  {
-    "name": "avatar/borderColor",
-    "value": {
-      "r": 1,
-      "g": 1,
-      "b": 1,
-      "a": 0.15
-    },
-    "type": "COLOR",
-    "alpha": 0.15,
-    "refId": "mode/avatar/borderColor",
-    "reference": "base/color/dark/base/color/white",
-    "collection": "mode",
-    "mode": "dark colorblind",
-    "group": "component (internal)",
-    "scopes": ["STROKE_COLOR"]
-  },
   {
     "name": "avatar/bgColor",
     "value": {
@@ -8965,6 +8966,22 @@
     "group": "component",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "avatar/borderColor",
+    "value": {
+      "r": 1,
+      "g": 1,
+      "b": 1,
+      "a": 0.15
+    },
+    "type": "COLOR",
+    "refId": "mode/avatar/borderColor",
+    "reference": "mode/borderColor/translucent",
+    "collection": "mode",
+    "mode": "dark colorblind",
+    "group": "component (internal)",
+    "scopes": ["STROKE_COLOR"]
+  },
   {
     "name": "codeMirror/lines/bgColor",
     "value": {

package/dist/figma/themes/dark-dimmed.json

@@ -1463,6 +1463,23 @@
     "group": "semantic",
     "scopes": ["STROKE_COLOR"]
   },
+  {
+    "name": "borderColor/translucent",
+    "value": {
+      "r": 0.803921568627451,
+      "g": 0.8509803921568627,
+      "b": 0.8980392156862745,
+      "a": 0.15
+    },
+    "type": "COLOR",
+    "alpha": 0.15,
+    "refId": "mode/borderColor/translucent",
+    "reference": "base/color/dark-dimmed/base/color/white",
+    "collection": "mode",
+    "mode": "dark dimmed",
+    "group": "component (internal)",
+    "scopes": ["STROKE_COLOR"]
+  },
   {
     "name": "borderColor/transparent",
     "value": {
@@ -5344,14 +5361,15 @@
   {
     "name": "control/fgColor/placeholder",
     "value": {
-      "r": 0.32941176470588235,
-      "g": 0.36470588235294116,
-      "b": 0.40784313725490196,
+      "r": 0.4470588235294118,
+      "g": 0.4980392156862745,
+      "b": 0.5490196078431373,
       "a": 1
     },
     "type": "COLOR",
+    "isMix": true,
     "refId": "mode/control/fgColor/placeholder",
-    "reference": "base/color/dark-dimmed/base/color/neutral/5",
+    "reference": "base/color/dark-dimmed/base/color/neutral/3",
     "collection": "mode",
     "mode": "dark dimmed",
     "group": "component",
@@ -5521,23 +5539,6 @@
     "collection": "mode",
     "group": "component shadow"
   },
-  {
-    "name": "avatar/borderColor",
-    "value": {
-      "r": 0.803921568627451,
-      "g": 0.8509803921568627,
-      "b": 0.8980392156862745,
-      "a": 0.15
-    },
-    "type": "COLOR",
-    "alpha": 0.15,
-    "refId": "mode/avatar/borderColor",
-    "reference": "base/color/dark-dimmed/base/color/white",
-    "collection": "mode",
-    "mode": "dark dimmed",
-    "group": "component (internal)",
-    "scopes": ["STROKE_COLOR"]
-  },
   {
     "name": "avatar/bgColor",
     "value": {
@@ -8963,6 +8964,22 @@
     "group": "component",
     "scopes": ["FRAME_FILL", "SHAPE_FILL"]
   },
+  {
+    "name": "avatar/borderColor",
+    "value": {
+      "r": 0.803921568627451,
+      "g": 0.8509803921568627,
+      "b": 0.8980392156862745,
+      "a": 0.15
+    },
+    "type": "COLOR",
+    "refId": "mode/avatar/borderColor",
+    "reference": "mode/borderColor/translucent",
+    "collection": "mode",
+    "mode": "dark dimmed",
+    "group": "component (internal)",
+    "scopes": ["STROKE_COLOR"]
+  },
   {
     "name": "codeMirror/lines/bgColor",
     "value": {

package/dist/figma/themes/dark-high-contrast.json

@@ -1433,6 +1433,23 @@
     "group": "semantic",
     "scopes": ["STROKE_COLOR"]
   },
+  {
+    "name": "borderColor/translucent",
+    "value": {
+      "r": 0.47843137254901963,
+      "g": 0.5098039215686274,
+      "b": 0.5568627450980392,
+      "a": 1
+    },
+    "type": "COLOR",
+    "alpha": 1,
+    "refId": "mode/borderColor/translucent",
+    "reference": "base/color/dark-high-contrast/base/color/neutral/5",
+    "collection": "mode",
+    "mode": "dark high contrast",
+    "group": "component (internal)",
+    "scopes": ["STROKE_COLOR"]
+  },
   {
     "name": "borderColor/transparent",
     "value": {
@@ -5401,14 +5418,15 @@
   {
     "name": "control/fgColor/placeholder",
     "value": {
-      "r": 0.47843137254901963,
-      "g": 0.5098039215686274,
-      "b": 0.5568627450980392,
+      "r": 0.7176470588235294,
+      "g": 0.7450980392156863,
+      "b": 0.7803921568627451,
       "a": 1
     },
     "type": "COLOR",
+    "isMix": true,
     "refId": "mode/control/fgColor/placeholder",
-    "reference": "base/color/dark-high-contrast/base/color/neutral/5",
+    "reference": "base/color/dark-high-contrast/base/color/neutral/3",
     "collection": "mode",
     "mode": "dark high contrast",
     "group": "component",