Merge branch 'main' into feature/streamfield-card-list-carousel-blocks

nasa-jpl · Aug 21, 2024 · f318b27 · f318b27
2 parents 9ec4737 + 6cb1715
commit f318b27
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git a/packages/common/src/scss/_typography.scss b/packages/common/src/scss/_typography.scss
@@ -266,6 +266,11 @@
     }
   }
 
+  .math-text {
+    @apply font-serif;
+    @apply italic;
+  }
+
   // text readability class
   // use this in areas where text is overlaying an image
   // managed separately for the navigation since we can't @apply these classes there

diff --git a/packages/common/src/scss/components/_BlockText.scss b/packages/common/src/scss/components/_BlockText.scss
@@ -86,15 +86,11 @@
         content: '';
         width: 30px;
         height: 2px;
-        @apply bg-jpl-red block absolute top-0 left-0 mt-3;
+        @apply bg-primary block absolute top-0 left-0 mt-3;
 
         @screen sm {
           @apply mt-4;
         }
-
-        .ThemeVariantDark & {
-          @apply bg-jpl-red-light;
-        }
       }
     }
   }

diff --git a/packages/common/tailwind.config.ts b/packages/common/tailwind.config.ts
@@ -62,7 +62,8 @@ const defaultTheme: Partial<CustomThemeConfig> = {
   colors: themeColors,
   fontFamily: {
     primary: ['Metropolis', ...fallbackFontStack],
-    secondary: ['Archivo Narrow', 'Metropolis', ...fallbackFontStack]
+    secondary: ['Archivo Narrow', 'Metropolis', ...fallbackFontStack],
+    serif: ['ui-serif', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif']
   },
   fontWeight: {
     // Commenting out anything Tailwind provides by default but we don’t use for this project.

diff --git a/packages/vue/src/docs/foundation/typography.stories.js b/packages/vue/src/docs/foundation/typography.stories.js
@@ -78,6 +78,8 @@ export const TextStyles = {
   <code>.text-body-xs</code>
   <p class="mt-8"><mark>Highlighted text</mark></p>
   <code>mark</code>
+  <p class="mt-8"><span class="math-text">This is math text. a<sup>2</sup> + a<sub>b</sub> = c</span></p>
+  <code>.math-text</code>
 </div>`
   })
 }