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

package/dist/styleLint/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/styleLint/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/styleLint/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/styleLint/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/styleLint/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/styleLint/functional/typography/typography.json

@@ -49,6 +49,31 @@
     "attributes": {},
     "path": ["fontStack", "sansSerif"]
   },
+  "fontStack-sansSerifDisplay": {
+    "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "$type": "fontFamily",
+    "$extensions": {
+      "org.primer.figma": {
+        "collection": "typography",
+        "scopes": ["fontFamily"]
+      }
+    },
+    "filePath": "src/tokens/functional/typography/typography.json",
+    "isSource": true,
+    "original": {
+      "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+      "$type": "fontFamily",
+      "$extensions": {
+        "org.primer.figma": {
+          "collection": "typography",
+          "scopes": ["fontFamily"]
+        }
+      }
+    },
+    "name": "fontStack-sansSerifDisplay",
+    "attributes": {},
+    "path": ["fontStack", "sansSerifDisplay"]
+  },
   "fontStack-monospace": {
     "value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
     "$type": "fontFamily",
@@ -199,7 +224,7 @@
         "fontWeight": "{text.display.weight}",
         "fontSize": "{text.display.size}",
         "lineHeight": "{text.display.lineHeight}",
-        "fontFamily": "{fontStack.sansSerif}"
+        "fontFamily": "{fontStack.sansSerifDisplay}"
       },
       "$type": "typography",
       "comment": "Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports."
@@ -462,7 +487,7 @@
         "fontWeight": "{text.title.weight.large}",
         "fontSize": "{text.title.size.large}",
         "lineHeight": "{text.title.lineHeight.large}",
-        "fontFamily": "{fontStack.sansSerif}"
+        "fontFamily": "{fontStack.sansSerifDisplay}"
       },
       "$type": "typography",
       "comment": "Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports."
@@ -482,7 +507,7 @@
         "fontWeight": "{text.title.weight.medium}",
         "fontSize": "{text.title.size.medium}",
         "lineHeight": "{text.title.lineHeight.medium}",
-        "fontFamily": "{fontStack.sansSerif}"
+        "fontFamily": "{fontStack.sansSerifDisplay}"
       },
       "$type": "typography",
       "comment": "Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition."
@@ -603,7 +628,7 @@
         "fontWeight": "{text.subtitle.weight}",
         "fontSize": "{text.subtitle.size}",
         "lineHeight": "{text.subtitle.lineHeight}",
-        "fontFamily": "{fontStack.sansSerif}"
+        "fontFamily": "{fontStack.sansSerifDisplay}"
       },
       "$type": "typography",
       "comment": "Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium)."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "8.2.2-rc.535ae80a",
+  "version": "8.2.3-rc.26d0d501",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist",
@@ -53,11 +53,9 @@
     "@types/node": "^20.4.0",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
-    "camelcase-keys": "^6.2.2",
     "color-blend": "^4.0.0",
     "color2k": "^2.0.0",
     "console-table-printer": "^2.11.1",
-    "deepmerge": "^4.2.2",
     "eslint": "^8.12.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-import-resolver-typescript": "^3.5.3",

package/src/platforms/figma.ts

@@ -39,6 +39,7 @@ export const figma: PlatformInitializer = (outputFile, prefix, buildPath, option
     fontFamilies: {
       'fontStack/system': 'SF Pro Text',
       'fontStack/sansSerif': 'SF Pro Text',
+      'fontStack/sansSerifDisplay': 'SF Pro Display',
       'fontStack/monospace': 'SF Mono',
     },
     ...options,

package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5

@@ -42,6 +42,11 @@
       $type: 'color',
       alpha: 1,
     },
+    translucent: {
+      $value: '{base.color.neutral.5}',
+      $type: 'color',
+      alpha: 1,
+    },
     neutral: {
       muted: {
         $value: '{base.color.neutral.4}',

package/src/tokens/functional/color/dark/patterns-dark.json5

@@ -14,7 +14,7 @@
       alpha: 0.1,
     },
     borderColor: {
-      $value: '{base.color.white}',
+      $value: '{borderColor.translucent}',
       $type: 'color',
       $extensions: {
         'org.primer.figma': {
@@ -24,7 +24,6 @@
           scopes: ['borderColor'],
         },
       },
-      alpha: 0.15,
     },
   },
   avatarStack: {
@@ -142,8 +141,12 @@
         },
       },
       placeholder: {
-        $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',

package/src/tokens/functional/color/dark/primitives-dark.json5

@@ -846,6 +846,19 @@
         },
       },
     },
+    translucent: {
+      $value: '{base.color.white}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'dark',
+          group: 'component (internal)',
+          scopes: ['borderColor'],
+        },
+      },
+      alpha: 0.15,
+    },
     neutral: {
       muted: {
         $value: '{base.color.neutral.4}',

package/src/tokens/functional/color/light/overrides/light.high-contrast.json5

@@ -71,6 +71,11 @@
       $type: 'color',
       alpha: 1,
     },
+    translucent: {
+      $value: '{base.color.neutral.8}',
+      $type: 'color',
+      alpha: 1,
+    },
     neutral: {
       muted: {
         $value: '{base.color.neutral.4}',

package/src/tokens/functional/color/light/patterns-light.json5

@@ -13,7 +13,7 @@
       },
     },
     borderColor: {
-      $value: '{base.color.black}',
+      $value: '{borderColor.translucent}',
       $type: 'color',
       $extensions: {
         'org.primer.figma': {
@@ -23,7 +23,6 @@
           scopes: ['borderColor'],
         },
       },
-      alpha: 0.15,
     },
   },
   avatarStack: {
@@ -143,6 +142,10 @@
       placeholder: {
         $value: '{base.color.neutral.5}',
         $type: 'color',
+        mix: {
+          color: '{base.color.neutral.6}',
+          weight: 0.2,
+        },
         $extensions: {
           'org.primer.figma': {
             collection: 'mode',

package/src/tokens/functional/color/light/primitives-light.json5

@@ -836,6 +836,19 @@
         },
       },
     },
+    translucent: {
+      $value: '{base.color.black}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'light',
+          group: 'semantic',
+          scopes: ['borderColor'],
+        },
+      },
+      alpha: 0.15,
+    },
     neutral: {
       muted: {
         $value: '{base.color.neutral.3}',