From bbe58b8e1c7cca0ebec46fffd184c1db23bebcdf Mon Sep 17 00:00:00 2001 From: Josh Black Date: Tue, 19 Dec 2023 13:09:43 -0600 Subject: [PATCH] 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 --- .changeset/use-css-variable.md | 4 ++++ .../__tests__/__snapshots__/BranchName.test.tsx.snap | 2 +- src/__tests__/__snapshots__/TextInput.test.tsx.snap | 2 +- src/theme.ts | 10 +++++++++- 4 files changed, 15 insertions(+), 3 deletions(-) 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 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 e891006f9dd..0df3975bf7b 100644 --- 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 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 = {