From 395d45f57ee0b7d8ec33d3073dd4f122281c27e8 Mon Sep 17 00:00:00 2001
From: Lukas Oppermann <lukasoppermann@github.com>
Date: Tue, 18 Jun 2024 12:59:44 +0200
Subject: [PATCH] Add a display font family variant as Figma does not
 automatically switch (#970)

* add a display font family variant as figma does not automatically switch

* add changeset
---
 .changeset/bright-steaks-grin.md               |  5 +++++
 src/platforms/figma.ts                         |  1 +
 .../functional/typography/typography.json      | 18 ++++++++++++++----
 3 files changed, 20 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/bright-steaks-grin.md

diff --git a/.changeset/bright-steaks-grin.md b/.changeset/bright-steaks-grin.md
new file mode 100644
index 000000000..4583b01d6
--- /dev/null
+++ b/.changeset/bright-steaks-grin.md
@@ -0,0 +1,5 @@
+---
+'@primer/primitives': patch
+---
+
+Add a display font family variant as Figma does not automatically switch
diff --git a/src/platforms/figma.ts b/src/platforms/figma.ts
index 58d874e79..77c41423b 100644
--- a/src/platforms/figma.ts
+++ b/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,
diff --git a/src/tokens/functional/typography/typography.json b/src/tokens/functional/typography/typography.json
index cb17b564d..3f899e6a1 100644
--- a/src/tokens/functional/typography/typography.json
+++ b/src/tokens/functional/typography/typography.json
@@ -20,6 +20,16 @@
         }
       }
     },
+    "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"]
+        }
+      }
+    },
     "monospace": {
       "$value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
       "$type": "fontFamily",
@@ -85,7 +95,7 @@
           "fontWeight": "{text.display.weight}",
           "fontSize": "{text.display.size}",
           "lineHeight": "{text.display.lineHeight}",
-          "fontFamily": "{fontStack.sansSerif}"
+          "fontFamily": "{fontStack.sansSerifDisplay}"
         },
         "$type": "typography",
         "$description": "Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports."
@@ -203,7 +213,7 @@
             "fontWeight": "{text.title.weight.large}",
             "fontSize": "{text.title.size.large}",
             "lineHeight": "{text.title.lineHeight.large}",
-            "fontFamily": "{fontStack.sansSerif}"
+            "fontFamily": "{fontStack.sansSerifDisplay}"
           },
           "$type": "typography",
           "$description": "Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports."
@@ -213,7 +223,7 @@
             "fontWeight": "{text.title.weight.medium}",
             "fontSize": "{text.title.size.medium}",
             "lineHeight": "{text.title.lineHeight.medium}",
-            "fontFamily": "{fontStack.sansSerif}"
+            "fontFamily": "{fontStack.sansSerifDisplay}"
           },
           "$type": "typography",
           "$description": "Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition."
@@ -269,7 +279,7 @@
           "fontWeight": "{text.subtitle.weight}",
           "fontSize": "{text.subtitle.size}",
           "lineHeight": "{text.subtitle.lineHeight}",
-          "fontFamily": "{fontStack.sansSerif}"
+          "fontFamily": "{fontStack.sansSerifDisplay}"
         },
         "$type": "typography",
         "$description": "Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium)."