Include CSS Custom Property for mono font family (#4028)

* Include CSS Custom Property for mono font family * Extends pull request #4028: Use a CSS variable for the monospace font stack * chore(test): update snapshots --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
primer · Dec 19, 2023 · bbe58b8 · bbe58b8
1 parent 310c901
commit bbe58b8
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 3 deletions.
diff --git a/.changeset/use-css-variable.md b/.changeset/use-css-variable.md
@@ -0,0 +1,4 @@
+---
+"@primer/react": minor
+---
+Use a CSS variable for the monospace font stack
diff --git a/src/BranchName/__tests__/__snapshots__/BranchName.test.tsx.snap b/src/BranchName/__tests__/__snapshots__/BranchName.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`BranchName renders consistently 1`] = `
   display: inline-block;
   padding: 2px 6px;
   font-size: 12px;
-  font-family: SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
+  font-family: var(--fontStack-monospace),SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
   color: #0969da;
   background-color: #ddf4ff;
   border-radius: 6px;

diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -1333,7 +1333,7 @@ exports[`TextInput renders monospace 1`] = `
   align-items: stretch;
   min-height: 32px;
   overflow: hidden;
-  font-family: SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
+  font-family: var(--fontStack-monospace),SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
 }
 
 .c0 input,

diff --git a/src/theme.ts b/src/theme.ts
@@ -22,7 +22,15 @@ const fonts = {
     'Apple Color Emoji',
     'Segoe UI Emoji',
   ]),
-  mono: fontStack(['SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', 'monospace']),
+  mono: fontStack([
+    'var(--fontStack-monospace)',
+    'SFMono-Regular',
+    'Consolas',
+    'Liberation Mono',
+    'Menlo',
+    'Courier',
+    'monospace',
+  ]),
 }
 
 const fontWeights = {