feat: Adds caption and monospace font definitions (#644)

* Adds .text-monospace-w3 and removes monospace from resource type styles
Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>

* Adding caption and monospace fonts
Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>

* Updating resource type font
Signed-off-by: Marcos Iglesias <miglesiasvalle@lyft.com>

amundsen_application/static/css/_typography-default.scss

@@ -98,6 +98,27 @@
   font-weight: $body-font-weight;
 }
 
+%text-monospace-w3 {
+  font-family: $font-family-monospace-code;
+  font-size: $w3-font-size;
+  line-height: $w3-line-height;
+  font-weight: $body-font-weight;
+}
+
+%text-caption-w1 {
+  font-size: $w1-caption-font-size;
+  line-height: $w1-caption-line-height;
+  font-weight: $caption-font-weight;
+  text-transform: uppercase;
+}
+
+%text-caption-w2 {
+  font-size: $w2-caption-font-size;
+  line-height: $w2-caption-line-height;
+  font-weight: $caption-font-weight;
+  text-transform: uppercase;
+}
+
 // Typography classes
 // Headlines
 .text-headline-w1 {
@@ -151,6 +172,20 @@
   @extend %text-body-w3;
 }
 
+// Captions
+.text-caption-w1 {
+  @extend %text-caption-w1;
+}
+
+.text-caption-w2 {
+  @extend %text-caption-w2;
+}
+
+// Monospace
+.text-monospace-w3 {
+  @extend %text-monospace-w3;
+}
+
 // Typography Helpers
 .text-center {
   text-align: center;
@@ -339,9 +374,9 @@ body {
 }
 
 .resource-type {
+  @extend %text-subtitle-w3;
+
   color: $text-placeholder;
-  font-family: $font-family-monospace;
-  font-size: 13px;
 }
 
 .helper-text {

amundsen_application/static/css/_variables-default.scss

@@ -163,8 +163,15 @@ $w2-headline-line-height: 32px;
 $w3-headline-font-size: 22px;
 $w3-headline-line-height: 28px;
 
+$w1-caption-font-size: $w2-font-size;
+$w1-caption-line-height: $w2-line-height;
+
+$w2-caption-font-size: 12px;
+$w2-caption-line-height: 16px;
+
 $code-font-size: 12px;
 
 $title-font-weight: $font-weight-body-bold;
 $subtitle-font-weight: $font-weight-body-semi-bold;
 $body-font-weight: $font-weight-body-regular;
+$caption-font-weight: $font-weight-body-bold;

amundsen_application/static/js/stories/typography.story.tsx

 // Copyright Contributors to the Amundsen project.
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { ReactNode } from 'react';
+import * as React from 'react';
 
 import StorySection from '../components/common/StorySection';
 
@@ -40,6 +40,17 @@ export const TypographyUpdated = () => {
           <p className="text-body-w3">Subtitle with .text-body-w3</p>
         </>
       </StorySection>
+      <StorySection title="Caption Text">
+        <>
+          <p className="text-caption-w1">Caption with .text-caption-w1</p>
+          <p className="text-caption-w2">Caption with .text-caption-w2</p>
+        </>
+      </StorySection>
+      <StorySection title="Code Text">
+        <>
+          <p className="text-monospace-w3">Code with .text-monospace-w3</p>
+        </>
+      </StorySection>
     </>
   );
 };