Merge pull request #54 from IATI/ml/code-block-styles

Add code block styles

Author: codemacabre

src/scss/tokens/_font.scss

@@ -1,6 +1,6 @@
 $font-stack-heading: "Hanken Grotesk", sans-serif;
 $font-stack-body: "Nunito Sans", sans-serif;
-$font-stack-monospace: monospace;
+$font-stack-monospace: "Roboto Mono", monospace;
 
 $font-weight-body: 400;
 $font-weight-body-strong: 600;

src/scss/tokens/fonts.mdx

@@ -51,3 +51,22 @@ import tokens from "./_tokens.module.scss";
     "line-height-body": tokens["line-height-body"],
   }}
 />
+
+## Code
+
+**Font:** Roboto Mono
+
+<Typeset
+  fontSizes={["1.2rem", "1.0rem", "0.8rem"]}
+  fontWeight={tokens["font-weight-body"]}
+  sampleText="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  fontFamily={tokens["font-stack-monospace"]}
+/>
+
+<TokensTable
+  tokens={{
+    "font-stack-monospace": tokens["font-stack-monospace"],
+    "font-weight-body": tokens["font-weight-body"],
+    "line-height-body": tokens["line-height-body"],
+  }}
+/>

src/scss/typography/_code.scss

@@ -2,17 +2,41 @@
 @use "../tokens/font" as *;
 @use "../tokens/spacing" as *;
 
+:not(pre) > code,
 .iati-code {
+  background-color: $color-grey-10;
+  border: 1px solid $color-grey-20;
+  border-radius: 4px;
+  color: $color-grey-90;
   font-family: $font-stack-monospace;
+  padding: 0.1em 0.2em;
+}
+
+pre > code,
+.iati-code--block {
   background-color: $color-grey-10;
-  color: #000;
   border: 1px solid $color-grey-20;
+  border-radius: 4px;
+  color: $color-grey-90;
+  display: block;
+  font-family: $font-stack-monospace;
+  overflow-x: scroll;
+  padding: $padding-block;
+}
+
+.iati-reference {
+  background-color: #fff;
+  border: 1px solid $color-grey-20;
+  border-radius: 4px;
+  color: $color-blue-80;
+  font-family: $font-stack-monospace;
   padding: 0.1em 0.2em;
 
   &--block {
+    border-radius: 4px;
     display: block;
-    padding: $padding-block;
     overflow-x: scroll;
+    padding: $padding-block;
   }
 }
 

src/scss/typography/_index.scss

@@ -4,3 +4,4 @@
 
 @import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");

src/scss/typography/typography.stories.ts

@@ -122,14 +122,17 @@ export const Quotes: Story = {
 
 export const Code: Story = {
   render: () => html`
-    <h3>This heading contains <span class="iati-code">inline code</span>.</h3>
+    <h3>This heading contains <code>inline code</code>.</h3>
+    <p>This paragraph contains <code>inline code</code>.</p>
+    <pre>
+      <code>
+        print("This is a block of code")
+      </code>
+    </pre>
     <p>
-      This paragraph contains
-      <span class="iati-code">inline code</span>.
+      This paragraph contains a <span class="iati-reference">reference</span> to
+      an element in the standard.
     </p>
-    <code class="iati-code iati-code--block">
-      <span>print("This is a block of code")</span>
-    </code>
     <p>
       This paragraph contains a key-binding:
       <kbd class="iati-kbd">Ctrl</kbd> + <kbd class="iati-kbd">C</kbd>