@primer/primitives 8.2.2-rc.535ae80a → 8.2.3-rc.26d0d501

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

@@ -168,7 +168,7 @@
   --control-bgColor-disabled: #21262db3;
   --control-bgColor-selected: #161b22;
   --control-fgColor-rest: #c9d1d9;
-  --control-fgColor-placeholder: #484f58;
+  --control-fgColor-placeholder: #858e98;
   --control-fgColor-disabled: #6e7681;
   --control-borderColor-rest: #30363d;
   --control-borderColor-emphasis: #666e79;
@@ -482,6 +482,7 @@
   --borderColor-emphasis: #484f58;
   --borderColor-disabled: #21262db3;
   --borderColor-transparent: #00000000;
+  --borderColor-translucent: #ffffff26;
   --borderColor-neutral-muted: #6e768166;
   --borderColor-neutral-emphasis: #6e7681;
   --borderColor-accent-muted: #388bfd66;
@@ -731,7 +732,7 @@
     --control-bgColor-disabled: #21262db3;
     --control-bgColor-selected: #161b22;
     --control-fgColor-rest: #c9d1d9;
-    --control-fgColor-placeholder: #484f58;
+    --control-fgColor-placeholder: #858e98;
     --control-fgColor-disabled: #6e7681;
     --control-borderColor-rest: #30363d;
     --control-borderColor-emphasis: #666e79;
@@ -1045,6 +1046,7 @@
     --borderColor-emphasis: #484f58;
     --borderColor-disabled: #21262db3;
     --borderColor-transparent: #00000000;
+    --borderColor-translucent: #ffffff26;
     --borderColor-neutral-muted: #6e768166;
     --borderColor-neutral-emphasis: #6e7681;
     --borderColor-accent-muted: #388bfd66;

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

@@ -168,7 +168,7 @@
   --control-bgColor-disabled: #373e47b3;
   --control-bgColor-selected: #2d333b;
   --control-fgColor-rest: #adbac7;
-  --control-fgColor-placeholder: #545d68;
+  --control-fgColor-placeholder: #727f8c;
   --control-fgColor-disabled: #636e7b;
   --control-borderColor-rest: #444c56;
   --control-borderColor-emphasis: #606b77;
@@ -482,6 +482,7 @@
   --borderColor-emphasis: #545d68;
   --borderColor-disabled: #373e47b3;
   --borderColor-transparent: #00000000;
+  --borderColor-translucent: #cdd9e526;
   --borderColor-neutral-muted: #636e7b66;
   --borderColor-neutral-emphasis: #636e7b;
   --borderColor-accent-muted: #4184e466;
@@ -731,7 +732,7 @@
     --control-bgColor-disabled: #373e47b3;
     --control-bgColor-selected: #2d333b;
     --control-fgColor-rest: #adbac7;
-    --control-fgColor-placeholder: #545d68;
+    --control-fgColor-placeholder: #727f8c;
     --control-fgColor-disabled: #636e7b;
     --control-borderColor-rest: #444c56;
     --control-borderColor-emphasis: #606b77;
@@ -1045,6 +1046,7 @@
     --borderColor-emphasis: #545d68;
     --borderColor-disabled: #373e47b3;
     --borderColor-transparent: #00000000;
+    --borderColor-translucent: #cdd9e526;
     --borderColor-neutral-muted: #636e7b66;
     --borderColor-neutral-emphasis: #636e7b;
     --borderColor-accent-muted: #4184e466;

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

@@ -168,7 +168,7 @@
   --control-bgColor-disabled: #3d424db3;
   --control-bgColor-selected: #525964;
   --control-fgColor-rest: #f0f3f6;
-  --control-fgColor-placeholder: #7a828e;
+  --control-fgColor-placeholder: #b7bec7;
   --control-fgColor-disabled: #9ea7b3;
   --control-borderColor-rest: #7a828e;
   --control-borderColor-emphasis: #7a828e;
@@ -482,6 +482,7 @@
   --borderColor-emphasis: #7a828e;
   --borderColor-disabled: #3d424db3;
   --borderColor-transparent: #00000000;
+  --borderColor-translucent: #7a828e;
   --borderColor-neutral-muted: #9ea7b3;
   --borderColor-neutral-emphasis: #9ea7b3;
   --borderColor-accent-muted: #5cacff;
@@ -731,7 +732,7 @@
     --control-bgColor-disabled: #3d424db3;
     --control-bgColor-selected: #525964;
     --control-fgColor-rest: #f0f3f6;
-    --control-fgColor-placeholder: #7a828e;
+    --control-fgColor-placeholder: #b7bec7;
     --control-fgColor-disabled: #9ea7b3;
     --control-borderColor-rest: #7a828e;
     --control-borderColor-emphasis: #7a828e;
@@ -1045,6 +1046,7 @@
     --borderColor-emphasis: #7a828e;
     --borderColor-disabled: #3d424db3;
     --borderColor-transparent: #00000000;
+    --borderColor-translucent: #7a828e;
     --borderColor-neutral-muted: #9ea7b3;
     --borderColor-neutral-emphasis: #9ea7b3;
     --borderColor-accent-muted: #5cacff;

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

@@ -168,7 +168,7 @@
   --control-bgColor-disabled: #21262db3;
   --control-bgColor-selected: #161b22;
   --control-fgColor-rest: #c9d1d9;
-  --control-fgColor-placeholder: #484f58;
+  --control-fgColor-placeholder: #858e98;
   --control-fgColor-disabled: #6e7681;
   --control-borderColor-rest: #30363d;
   --control-borderColor-emphasis: #666e79;
@@ -482,6 +482,7 @@
   --borderColor-emphasis: #484f58;
   --borderColor-disabled: #21262db3;
   --borderColor-transparent: #00000000;
+  --borderColor-translucent: #ffffff26;
   --borderColor-neutral-muted: #6e768166;
   --borderColor-neutral-emphasis: #6e7681;
   --borderColor-accent-muted: #388bfd66;
@@ -731,7 +732,7 @@
     --control-bgColor-disabled: #21262db3;
     --control-bgColor-selected: #161b22;
     --control-fgColor-rest: #c9d1d9;
-    --control-fgColor-placeholder: #484f58;
+    --control-fgColor-placeholder: #858e98;
     --control-fgColor-disabled: #6e7681;
     --control-borderColor-rest: #30363d;
     --control-borderColor-emphasis: #666e79;
@@ -1045,6 +1046,7 @@
     --borderColor-emphasis: #484f58;
     --borderColor-disabled: #21262db3;
     --borderColor-transparent: #00000000;
+    --borderColor-translucent: #ffffff26;
     --borderColor-neutral-muted: #6e768166;
     --borderColor-neutral-emphasis: #6e7681;
     --borderColor-accent-muted: #388bfd66;

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

@@ -168,7 +168,7 @@
   --control-bgColor-disabled: #21262db3;
   --control-bgColor-selected: #161b22;
   --control-fgColor-rest: #c9d1d9;
-  --control-fgColor-placeholder: #484f58;
+  --control-fgColor-placeholder: #858e98;
   --control-fgColor-disabled: #6e7681;
   --control-borderColor-rest: #30363d;
   --control-borderColor-emphasis: #666e79;
@@ -482,6 +482,7 @@
   --borderColor-emphasis: #484f58;
   --borderColor-disabled: #21262db3;
   --borderColor-transparent: #00000000;
+  --borderColor-translucent: #ffffff26;
   --borderColor-neutral-muted: #6e768166;
   --borderColor-neutral-emphasis: #6e7681;
   --borderColor-accent-muted: #388bfd66;
@@ -731,7 +732,7 @@
     --control-bgColor-disabled: #21262db3;
     --control-bgColor-selected: #161b22;
     --control-fgColor-rest: #c9d1d9;
-    --control-fgColor-placeholder: #484f58;
+    --control-fgColor-placeholder: #858e98;
     --control-fgColor-disabled: #6e7681;
     --control-borderColor-rest: #30363d;
     --control-borderColor-emphasis: #666e79;
@@ -1045,6 +1046,7 @@
     --borderColor-emphasis: #484f58;
     --borderColor-disabled: #21262db3;
     --borderColor-transparent: #00000000;
+    --borderColor-translucent: #ffffff26;
     --borderColor-neutral-muted: #6e768166;
     --borderColor-neutral-emphasis: #6e7681;
     --borderColor-accent-muted: #388bfd66;

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

@@ -168,7 +168,7 @@
   --control-bgColor-disabled: #eaeef2b3;
   --control-bgColor-selected: #f6f8fa;
   --control-fgColor-rest: #24292f;
-  --control-fgColor-placeholder: #6e7781;
+  --control-fgColor-placeholder: #69727c;
   --control-fgColor-disabled: #8c959f;
   --control-borderColor-rest: #d0d7de;
   --control-borderColor-emphasis: #868f99;
@@ -483,6 +483,7 @@
   --borderColor-emphasis: #6e7781;
   --borderColor-disabled: #eaeef2b3;
   --borderColor-transparent: #ffffff00;
+  --borderColor-translucent: #1f232826;
   --borderColor-neutral-muted: #afb8c133;
   --borderColor-neutral-emphasis: #6e7781;
   --borderColor-accent-muted: #54aeff66;
@@ -731,7 +732,7 @@
     --control-bgColor-disabled: #eaeef2b3;
     --control-bgColor-selected: #f6f8fa;
     --control-fgColor-rest: #24292f;
-    --control-fgColor-placeholder: #6e7781;
+    --control-fgColor-placeholder: #69727c;
     --control-fgColor-disabled: #8c959f;
     --control-borderColor-rest: #d0d7de;
     --control-borderColor-emphasis: #868f99;
@@ -1046,6 +1047,7 @@
     --borderColor-emphasis: #6e7781;
     --borderColor-disabled: #eaeef2b3;
     --borderColor-transparent: #ffffff00;
+    --borderColor-translucent: #1f232826;
     --borderColor-neutral-muted: #afb8c133;
     --borderColor-neutral-emphasis: #6e7781;
     --borderColor-accent-muted: #54aeff66;

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

@@ -168,7 +168,7 @@
   --control-bgColor-disabled: #ced5dcb3;
   --control-bgColor-selected: #acb6c0;
   --control-fgColor-rest: #0e1116;
-  --control-fgColor-placeholder: #66707b;
+  --control-fgColor-placeholder: #616a75;
   --control-fgColor-disabled: #66707b;
   --control-borderColor-rest: #20252c;
   --control-borderColor-emphasis: #20252c;
@@ -483,6 +483,7 @@
   --borderColor-emphasis: #66707b;
   --borderColor-disabled: #ced5dcb3;
   --borderColor-transparent: #ffffff00;
+  --borderColor-translucent: #20252c;
   --borderColor-neutral-muted: #88929d;
   --borderColor-neutral-emphasis: #66707b;
   --borderColor-accent-muted: #368cf9;
@@ -731,7 +732,7 @@
     --control-bgColor-disabled: #ced5dcb3;
     --control-bgColor-selected: #acb6c0;
     --control-fgColor-rest: #0e1116;
-    --control-fgColor-placeholder: #66707b;
+    --control-fgColor-placeholder: #616a75;
     --control-fgColor-disabled: #66707b;
     --control-borderColor-rest: #20252c;
     --control-borderColor-emphasis: #20252c;
@@ -1046,6 +1047,7 @@
     --borderColor-emphasis: #66707b;
     --borderColor-disabled: #ced5dcb3;
     --borderColor-transparent: #ffffff00;
+    --borderColor-translucent: #20252c;
     --borderColor-neutral-muted: #88929d;
     --borderColor-neutral-emphasis: #66707b;
     --borderColor-accent-muted: #368cf9;

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

@@ -168,7 +168,7 @@
   --control-bgColor-disabled: #eaeef2b3;
   --control-bgColor-selected: #f6f8fa;
   --control-fgColor-rest: #24292f;
-  --control-fgColor-placeholder: #6e7781;
+  --control-fgColor-placeholder: #69727c;
   --control-fgColor-disabled: #8c959f;
   --control-borderColor-rest: #d0d7de;
   --control-borderColor-emphasis: #868f99;
@@ -483,6 +483,7 @@
   --borderColor-emphasis: #6e7781;
   --borderColor-disabled: #eaeef2b3;
   --borderColor-transparent: #ffffff00;
+  --borderColor-translucent: #1f232826;
   --borderColor-neutral-muted: #afb8c133;
   --borderColor-neutral-emphasis: #6e7781;
   --borderColor-accent-muted: #54aeff66;
@@ -731,7 +732,7 @@
     --control-bgColor-disabled: #eaeef2b3;
     --control-bgColor-selected: #f6f8fa;
     --control-fgColor-rest: #24292f;
-    --control-fgColor-placeholder: #6e7781;
+    --control-fgColor-placeholder: #69727c;
     --control-fgColor-disabled: #8c959f;
     --control-borderColor-rest: #d0d7de;
     --control-borderColor-emphasis: #868f99;
@@ -1046,6 +1047,7 @@
     --borderColor-emphasis: #6e7781;
     --borderColor-disabled: #eaeef2b3;
     --borderColor-transparent: #ffffff00;
+    --borderColor-translucent: #1f232826;
     --borderColor-neutral-muted: #afb8c133;
     --borderColor-neutral-emphasis: #6e7781;
     --borderColor-accent-muted: #54aeff66;

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

@@ -168,7 +168,7 @@
   --control-bgColor-disabled: #eaeef2b3;
   --control-bgColor-selected: #f6f8fa;
   --control-fgColor-rest: #24292f;
-  --control-fgColor-placeholder: #6e7781;
+  --control-fgColor-placeholder: #69727c;
   --control-fgColor-disabled: #8c959f;
   --control-borderColor-rest: #d0d7de;
   --control-borderColor-emphasis: #868f99;
@@ -483,6 +483,7 @@
   --borderColor-emphasis: #6e7781;
   --borderColor-disabled: #eaeef2b3;
   --borderColor-transparent: #ffffff00;
+  --borderColor-translucent: #1f232826;
   --borderColor-neutral-muted: #afb8c133;
   --borderColor-neutral-emphasis: #6e7781;
   --borderColor-accent-muted: #54aeff66;
@@ -731,7 +732,7 @@
     --control-bgColor-disabled: #eaeef2b3;
     --control-bgColor-selected: #f6f8fa;
     --control-fgColor-rest: #24292f;
-    --control-fgColor-placeholder: #6e7781;
+    --control-fgColor-placeholder: #69727c;
     --control-fgColor-disabled: #8c959f;
     --control-borderColor-rest: #d0d7de;
     --control-borderColor-emphasis: #868f99;
@@ -1046,6 +1047,7 @@
     --borderColor-emphasis: #6e7781;
     --borderColor-disabled: #eaeef2b3;
     --borderColor-transparent: #ffffff00;
+    --borderColor-translucent: #1f232826;
     --borderColor-neutral-muted: #afb8c133;
     --borderColor-neutral-emphasis: #6e7781;
     --borderColor-accent-muted: #54aeff66;

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

@@ -22,6 +22,7 @@
   --text-display-size: 2.5rem;
   --text-display-lineBoxHeight: 1.4;
   --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+  --fontStack-sansSerifDisplay: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   --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";
   --text-codeInline-weight: var(--base-text-weight-normal);
@@ -39,9 +40,9 @@
   --text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif);
   --text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif);
   --text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif);
-  --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerif);
+  --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay);
   --text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif);
-  --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerif);
-  --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerif);
-  --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerif);
+  --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay);
+  --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay);
+  --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay);
 }

package/dist/css/primitives.css

@@ -164,6 +164,7 @@
   --text-display-size: 2.5rem;
   --text-display-lineBoxHeight: 1.4;
   --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+  --fontStack-sansSerifDisplay: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
   --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";
   --text-codeInline-weight: var(--base-text-weight-normal);
@@ -181,9 +182,9 @@
   --text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif);
   --text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif);
   --text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif);
-  --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerif);
+  --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay);
   --text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif);
-  --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerif);
-  --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerif);
-  --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerif);
+  --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay);
+  --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay);
+  --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay);
 }

package/dist/docs/functional/themes/dark-colorblind.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",
@@ -14416,6 +14422,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/dark-dimmed.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": "#545d68",
+    "value": "#727f8c",
     "$type": "color",
+    "mix": {
+      "color": "#636e7b",
+      "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": "#cdd9e526",
+    "$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": "#636e7b66",
     "$type": "color",

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

@@ -4562,9 +4562,9 @@
         "scopes": ["borderColor"]
       }
     },
-    "alpha": 0.9,
     "filePath": "src/tokens/functional/color/dark/overrides/dark.high-contrast.json5",
     "isSource": true,
+    "alpha": 0.9,
     "original": {
       "value": "{base.color.white}",
       "$type": "color",
@@ -4867,8 +4867,12 @@
     "path": ["control", "fgColor", "rest"]
   },
   "control-fgColor-placeholder": {
-    "value": "#7a828e",
+    "value": "#b7bec7",
     "$type": "color",
+    "mix": {
+      "color": "#9ea7b3",
+      "weight": 0.2
+    },
     "$extensions": {
       "org.primer.figma": {
         "collection": "mode",
@@ -4880,8 +4884,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",
@@ -14438,6 +14446,37 @@
     "attributes": {},
     "path": ["borderColor", "transparent"]
   },
+  "borderColor-translucent": {
+    "value": "#7a828e",
+    "$type": "color",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "mode",
+        "mode": "dark",
+        "group": "component (internal)",
+        "scopes": ["borderColor"]
+      }
+    },
+    "alpha": 1,
+    "filePath": "src/tokens/functional/color/dark/overrides/dark.high-contrast.json5",
+    "isSource": true,
+    "original": {
+      "value": "{base.color.neutral.5}",
+      "$type": "color",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "mode",
+          "mode": "dark",
+          "group": "component (internal)",
+          "scopes": ["borderColor"]
+        }
+      },
+      "alpha": 1
+    },
+    "name": "borderColor-translucent",
+    "attributes": {},
+    "path": ["borderColor", "translucent"]
+  },
   "borderColor-neutral-muted": {
     "value": "#9ea7b3",
     "$type": "color",