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 <[email protected]>
primer · Jan 26, 2022 · bcf447a · bcf447a
1 parent fdacefd
commit bcf447a
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 3 deletions.
diff --git a/.changeset/nice-beers-peel.md b/.changeset/nice-beers-peel.md
@@ -0,0 +1,5 @@
+---
+"@primer/css": minor
+---
+
+Add mono font stack to <samp> tag
diff --git a/docs/content/components/markdown.md b/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/)

diff --git a/src/base/normalize.scss b/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 */
 }
 

diff --git a/src/base/typography-base.scss b/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;
 }

diff --git a/src/markdown/code.scss b/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;