feat: Add --reactist-font-family-monospace with updated font family (…

…#813)

* feat: Add `--reactist-font-family-monospace` with updated font family

* Update `CHANGELOG.md` and bump version for next release

.storybook/preview-head.html

@@ -1,7 +1,7 @@
-<meta charset="utf-8">
+<meta charset="utf-8" />
 <title>Storybook</title>
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<base target="_parent">
+<meta name="viewport" content="width=device-width,initial-scale=1" />
+<base target="_parent" />
 <style>
     html,
     body {
@@ -15,9 +15,9 @@
         box-sizing: border-box;
     }
 
-    :not(.sb-show-main)>.sb-main,
-    :not(.sb-show-nopreview)>.sb-nopreview,
-    :not(.sb-show-errordisplay)>.sb-errordisplay {
+    :not(.sb-show-main) > .sb-main,
+    :not(.sb-show-nopreview) > .sb-nopreview,
+    :not(.sb-show-errordisplay) > .sb-errordisplay {
         display: none;
     }
 
@@ -37,8 +37,7 @@
     }
 
     /* Vertical centering fix for IE11 */
-    @media screen and (-ms-high-contrast: none),
-    (-ms-high-contrast: active) {
+    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
         .sb-show-main.sb-main-centered:after {
             content: '';
             min-height: inherit;
@@ -65,7 +64,8 @@
         left: 0;
         right: 0;
         padding: 20px;
-        font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+        font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco',
+            BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
         -webkit-font-smoothing: antialiased;
         overflow: auto;
     }
@@ -106,7 +106,8 @@
         padding: 10px;
         background: #000;
         color: #eee;
-        font-family: "Operator Mono", "Fira Code Retina", "Fira Code", "FiraCode-Retina", "Andale Mono", "Lucida Console", Consolas, Monaco, monospace;
+        font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, 'Cascadia Mono',
+            Consolas, 'Liberation Mono', 'Courier New', monospace;
     }
 
     .sb-errordisplay pre {
@@ -122,4 +123,4 @@
     #docs-root[hidden] {
         display: none !important;
     }
-</style>
+</style>

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 Reactist follows [semantic versioning](https://semver.org/) and doesn't introduce breaking changes (API-wise) in minor or patch releases. However, the appearance of a component might change in a minor or patch release so keep an eye on redesigns and make sure your app still looks and feels like you expect it.
 
+# v23.1.0
+
+-   [Feat] Add `--reactist-font-family-monospace` with updated font family for monospace elements
+
 # v23.0.0
 
 -   [BREAKING] Remove unsupported `crossOrigin` attribute from `input`- and `textarea`-based components.

package.json

@@ -6,7 +6,7 @@
         "email": "[email protected]",
         "url": "http://doist.com"
     },
-    "version": "23.0.0",
+    "version": "23.1.0",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {

src/box/box.module.css

@@ -11,7 +11,7 @@
 }
 
 pre.box {
-    font-family: monospace;
+    font-family: var(--reactist-font-family-monospace);
 }
 
 .box[hidden] {

src/components/keyboard-shortcut/keyboard-shortcut.less

@@ -1,7 +1,9 @@
 @import '../styles/constants.less';
 
 .reactist_keyboard_shortcut {
-    font: 11px Menlo, monospace;
+    font-family: var(--reactist-font-family-monospace);
+    font-size: 11px;
+
     > kbd > kbd {
         display: inline-block;
         padding: 3px 5px;

src/prose/prose.module.css

@@ -191,7 +191,7 @@
     background-color: var(--reactist-prose-code-fill);
     border: 1px solid var(--reactist-prose-code-border);
     border-radius: var(--reactist-border-radius-small);
-    font-family: 'Source Code Pro', Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
+    font-family: var(--reactist-font-family-monospace);
     font-size: 0.875em;
     line-height: 1.6;
 }

src/styles/design-tokens.css

@@ -33,6 +33,8 @@
     --reactist-font-family: -apple-system, system-ui, 'Segoe UI', Roboto, Noto, Oxygen-Sans, Ubuntu,
         Cantrell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
         'Segoe UI Symbol';
+    --reactist-font-family-monospace: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco,
+        'Cascadia Mono', Consolas, 'Liberation Mono', 'Courier New', monospace;
 
     /* font sizes */
     --reactist-font-size-caption: 12px;