New tn-component-code-font-family CSS variable

This is used for monospace fonts in code blocks and inline code. The default is `ui-monospace`, which gives SF Mono on macOS.
lsst-sqre · May 1, 2024 · 00b4d57 · 00b4d57
1 parent 9e53260
commit 00b4d57
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/changelog.d/20240501_170745_jsick_DM_43638.md b/changelog.d/20240501_170745_jsick_DM_43638.md
@@ -10,6 +10,7 @@
 - The "default" font size is now set on the `body` element with the `--tn-component-text-font-size` CSS property. This is set to `1.1rem` by default to maintain the original look. The header sizes are now relative to the user font size, but the smaller sizes have been increased slightly.
 - The font size for `code` is now set to `0.9em`. This slightly smaller size helps avoid a baseline misalignment issue for the monospace text in the paragraph.
 - The `pre` font size is `1rem`, which is slightly smaller than the text font size.
+- New `--tn-component-code-font-family` CSS property. This is used for monospace fonts in code blocks and inline code. The default is `ui-monospace`, which gives SF Mono on macOS.
 
 ### Bug fixes
 

diff --git a/src/assets/styles/base/_typography.scss b/src/assets/styles/base/_typography.scss
@@ -74,11 +74,20 @@ a {
   color: var(--tn-component-link-color);
 }
 
-pre {
+pre,
+xmp,
+plaintext,
+listing {
+  font-family: var(--tn-component-code-font-family);
   font-size: 1rem;
 }
 
-code {
+tt,
+code,
+kbd,
+samp {
+  font-family: var(--tn-component-code-font-family);
+
   /* Making inline code slightly smaller seems to help with baseline alignment
    * some monospace fonts seems bigger that Source Sans.
    */

diff --git a/src/assets/styles/properties/_typography.scss b/src/assets/styles/properties/_typography.scss
@@ -21,10 +21,12 @@
   --tn-component-link-color: var(--tn-color-blue-500);
   --tn-component-text-background-color: var(--tn-color-white);
 
-  --tn-component-text-font-family: -apple-system, BlinkMacSystemFont, Segoe UI,
-    Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
-    sans-serif;
+  --tn-component-text-font-family: -apple-system, ui-sans-serif,
+    BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans,
+    Droid Sans, Helvetica Neue, sans-serif;
   --tn-component-text-line-height: 1.5;
+
+  --tn-component-code-font-family: ui-monospace, monospace;
 }
 
 html[data-theme='dark'] {