Add mono font stack to <samp> tag (#1876)

* Add mono font stack to <samp> tag

* Create nice-beers-peel.md

* Add `<samp>` example to docs

* Test

* Another try without the HTML entities

Co-authored-by: simurai <simurai@github.com>

.changeset/nice-beers-peel.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Add mono font stack to <samp> tag

docs/content/components/markdown.md

@@ -268,6 +268,10 @@ bundle: markdown
 
   <hr />
 
+  <p>The <code>samp</code> HTML element is used to enclose inline text which represents sample (or quoted) output from a computer program. Here an example of an error message: <samp>File not found</samp></p>
+
+  <hr />
+
   <p>Small images should be shown at their actual size.</p>
 
   <p><img src="http://placekitten.com/g/300/200/"></p>
@@ -458,6 +462,10 @@ Inline code inside table cells should still be distinguishable.
 
 ----------------
 
+The `<samp>` HTML element is used to enclose inline text which represents sample (or quoted) output from a computer program. Here an example of an error message: <samp>File not found</samp>
+
+----------------
+
 Small images should be shown at their actual size.
 
 ![](http://placekitten.com/g/300/200/)

src/base/normalize.scss

@@ -225,7 +225,7 @@ code,
 kbd,
 pre,
 samp {
-  font-family: monospace, monospace; /* 1 */
+  font-family: monospace; /* 1 */
   font-size: 1em; /* 2 */
 }
 

src/base/typography-base.scss

@@ -62,11 +62,12 @@ dd {
   margin-left: 0;
 }
 
-// Code
+// Monospaced
 // --------------------------------------------------
 
 tt,
-code {
+code,
+samp {
   font-family: $mono-font;
   font-size: $font-size-small;
 }

src/markdown/code.scss

@@ -16,6 +16,11 @@
 
   del code { text-decoration: inherit; }
 
+  samp {
+    // stylelint-disable-next-line primer/typography
+    font-size: 85%;
+  }
+
   pre {
     word-wrap: normal;