fix(logos-docusaurus-theme): update typography styles

Updated components: CallToActionSection, FeatureList, HeroDescription, ShowcaseCard, and NewsletterSubscription

packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.scss

@@ -19,7 +19,7 @@
 
 .mdx-cta-section--title-only {
   .mdx-cta-section__title {
-    @include lsd.typography('h1', false);
+    @include lsd.typography('h5', false);
     font-weight: 300;
 
     max-width: 886px;
@@ -33,6 +33,21 @@
   }
 }
 
+.mdx-cta-section--title-button {
+  .mdx-cta-section__title {
+    @include lsd.typography('display4', false);
+    font-weight: 300;
+
+    max-width: 886px;
+  }
+
+  @include utils.responsive('lg', 'down') {
+    .mdx-cta-section__title {
+      @include lsd.typography('h4', false);
+    }
+  }
+}
+
 .mdx-cta-section--full-width {
   .mdx-cta-section__container {
     display: grid;
@@ -145,8 +160,7 @@
         }
 
         & > p {
-          font-size: 1.5rem !important;
-          line-height: 2rem !important;
+          @include lsd.typography('h4', true);
         }
       }
     }
@@ -155,12 +169,10 @@
 
 @include utils.responsive('lg', 'down') {
   .mdx-cta-section__title {
-    font-size: 1rem !important;
-    line-height: 100% !important;
+    @include lsd.typography('subtitle2', true);
   }
 
   .mdx-cta-section__description {
-    font-size: 1.5rem !important;
-    line-height: 2rem !important;
+    @include lsd.typography('h4', true);
   }
 }

packages/logos-docusaurus-theme/src/client/components/mdx/CallToActionSection/CallToActionSection.tsx

@@ -117,10 +117,13 @@ export const CallToActionSection: React.FC<CallToActionSectionProps> = ({
 }) => {
   const withDescription = !!description
   const withList = list.length > 0
+  const withButton = !!href
 
   const display =
-    title && !withDescription && !withList
+    title && !withDescription && !withButton && !withList
       ? 'title-only'
+      : title && !description && !withList && withButton
+      ? 'title-button'
       : title && description && columns === 2
       ? `full-width`
       : title && description && list.length > 0
@@ -158,10 +161,10 @@ export const CallToActionSection: React.FC<CallToActionSectionProps> = ({
         <div className="mdx-cta-section__list">
           {list.map((option, index) => (
             <div key={index}>
-              <Typography variant="subtitle1" component="div">
+              <Typography variant="subtitle2" component="div">
                 {option.title}
               </Typography>
-              <Typography variant="h3" component="p">
+              <Typography variant="h2" component="p">
                 {option.description}
               </Typography>
             </div>

packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.scss

@@ -110,7 +110,7 @@
 @include utils.responsive('lg', 'down') {
   .mdx-feature-list {
     .mdx-feature-list__title {
-      @include lsd.typography('subtitle1', false);
+      @include lsd.typography('subtitle2', false);
       padding: 1rem 0;
     }
   }
@@ -136,12 +136,12 @@
     }
 
     .mdx-feature-list__feature-title {
-      @include lsd.typography('h5', false);
+      @include lsd.typography('h4', false);
       margin-top: 1rem;
     }
 
     .mdx-feature-list__feature-description {
-      @include lsd.typography('subtitle1');
+      @include lsd.typography('body1', false);
       margin-top: 3rem;
     }
 

packages/logos-docusaurus-theme/src/client/components/mdx/FeatureList/FeatureList.tsx

@@ -84,7 +84,7 @@ export const FeatureList: React.FC<FeatureListProps> = ({
                 {index + 1}
               </Typography>
               <Typography
-                variant="h3"
+                variant="h2"
                 component="h2"
                 className="mdx-feature-list__feature-title"
               >

packages/logos-docusaurus-theme/src/client/components/mdx/HeroDescription/HeroDescription.tsx

@@ -21,7 +21,7 @@ export const HeroDescription: React.FC<HeroDescriptionProps> = ({
 
   return (
     <Typography
-      variant={'h5'}
+      variant={'h4'}
       className={clsx(
         className,
         'mdx-hero-description',

packages/logos-docusaurus-theme/src/client/components/mdx/NewsletterSubscription/NewsletterSubscription.scss

@@ -37,14 +37,12 @@
 }
 
 .mdx-ns__description {
-  font-size: 32px !important;
-  line-height: 40px !important;
+  @include lsd.typography('h3', false);
 }
 
 @include utils.responsive('md', 'down') {
   .mdx-ns__description {
-    font-size: 24px !important;
-    line-height: 32px !important;
+    @include lsd.typography('h4', false);
   }
 
   .mdx-ns__inner {

packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.scss

@@ -29,7 +29,8 @@
   }
 
   .mdx-showcase-card__name {
-    @include lsd.typography('h5');
+    font-size: 1.375rem !important;
+    line-height: 1.75rem !important;
   }
 
   .mdx-showcase-card__description {

packages/logos-docusaurus-theme/src/client/components/mdx/ShowcaseCard/ShowcaseCard.tsx

@@ -37,14 +37,14 @@ export const ShowcaseCard: React.FC<ShowcaseCardProps> = ({
           />
         )}
         <Typography
-          variant="h3"
+          variant="h2"
           component="h2"
           className="mdx-showcase-card__name"
         >
           {name}
         </Typography>
         <Typography
-          variant="subtitle1"
+          variant="body1"
           component="p"
           className="mdx-showcase-card__description"
         >