use sans-serif font most of the time (#97)

* use sans-serif font most of the time

* add changelog entry

Author: davidjgoss

CHANGELOG.md

@@ -6,6 +6,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
+### Changed
+- Most content is now rendered with a sans serif font.
 
 ## [19.0.0] - 2022-01-24
 ### Added

src/components/CucumberReact.module.scss

@@ -2,7 +2,7 @@
 
 .cucumberReact {
     font-size: 14px;
-    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+    font-family: $sansFamily;
     color: $textColor;
     background: $backgroundColor;
 }

src/components/gherkin/Attachment.module.scss

@@ -2,7 +2,7 @@
 
 .text {
   white-space: pre-wrap;
-  font-family: inherit;
+  font-family: $monoFamily;
   font-size: 0.875em;
   padding: 0.666em 0.75em;
   border-radius: 0.25em;

src/components/gherkin/DocString.module.scss

@@ -1,7 +1,7 @@
 @import '../../styles/theming';
 
 .docString {
-    font-family: inherit;
+    font-family: $monoFamily;
     color: $docstringColor;
     padding-bottom: 0.25em;
     margin: 0;

src/components/gherkin/ErrorMessage.module.scss

@@ -2,12 +2,12 @@
 
 .message {
   white-space: pre-wrap;
-  font-family: inherit;
+  font-family: $monoFamily;
   font-size: 0.875em;
   padding: 0.666em 0.75em;
   border-radius: 0.25em;
   margin: 0;
   overflow-x: auto;
   background-color: $errorBackgroundColor;
   color: $errorTextColor;
-}
+}

src/styles/theming.scss

@@ -1,3 +1,5 @@
+$sansFamily: 'Inter var', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+$monoFamily: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
 $backgroundColor: var(--cucumber-background-color, white);
 $textColor: var(--cucumber-text-color, #222);
 $anchorColor: var(--cucumber-anchor-color, #297bde);