From 1e305cddbea5c39cb6c15553a7eee5c75acf03ee Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 7 Dec 2023 13:58:51 -0600 Subject: [PATCH 1/3] Include CSS Custom Property for mono font family --- src/theme.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/theme.ts b/src/theme.ts index 884185e37b1..943c414ff4d 100644 --- 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 = { From a8e787f701623191b4e070d2cbc6d2b3715a2f8a Mon Sep 17 00:00:00 2001 From: Josh Black Date: Thu, 7 Dec 2023 14:06:52 -0600 Subject: [PATCH 2/3] Extends pull request #4028: Use a CSS variable for the monospace font stack --- .changeset/use-css-variable.md | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 .changeset/use-css-variable.md diff --git a/.changeset/use-css-variable.md b/.changeset/use-css-variable.md new file mode 100644 index 00000000000..4987454b725 --- /dev/null +++ b/.changeset/use-css-variable.md @@ -0,0 +1,4 @@ +--- +"@primer/react": minor +--- +Use a CSS variable for the monospace font stack From f2c62824e59824eedd18df800851e12b8ea5fd7f Mon Sep 17 00:00:00 2001 From: Josh Black Date: Wed, 13 Dec 2023 12:27:25 -0600 Subject: [PATCH 3/3] chore(test): update snapshots --- src/BranchName/__tests__/__snapshots__/BranchName.test.tsx.snap | 2 +- src/__tests__/__snapshots__/TextInput.test.tsx.snap | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/BranchName/__tests__/__snapshots__/BranchName.test.tsx.snap b/src/BranchName/__tests__/__snapshots__/BranchName.test.tsx.snap index 67046d28a4e..ca0731c2120 100644 --- 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 index 63eaeab5e13..396cf25d24c 100644 --- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -1343,7 +1343,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,