USAGOV-2090 Font Size Consolidation

config/sync/filter.format.uswds.yml

@@ -42,7 +42,7 @@ filters:
     status: true
     weight: -10
     settings:
-      allowed_html: '<br> <p class="usa-intro text-align-left text-align-center text-align-right text-align-justify"> <h1 class="text-align-left text-align-center text-align-right text-align-justify"> <h2 class="font-serif-lg text-bold text-accent-cool-darker text-align-left text-align-center text-align-right text-align-justify"> <h3 class="text-align-left text-align-center text-align-right text-align-justify"> <h4 class="text-align-left text-align-center text-align-right text-align-justify"> <a class="usa-button usa-button--secondary usa-button--big" role href> <div data-* class="usa-table-container--scrollable usa-sr-only usa-table__announcement-region text-align-left text-align-center text-align-right text-align-justify" aria-live> <strong> <em> <u> <blockquote> <ul> <ol reversed start> <li> <table class> <tr> <td rowspan colspan data-label data-sort-value> <th rowspan colspan scope data-label data-sortable role> <thead> <tbody> <tfoot> <caption> <drupal-media data-entity-type data-entity-uuid alt data-view-mode data-caption data-align> <drupal-paragraph data-embed-button data-entity-label data-paragraph-id data-paragraph-revision-id>'
+      allowed_html: '<br> <p class="usa-intro text-align-left text-align-center text-align-right text-align-justify"> <h1 class="text-align-left text-align-center text-align-right text-align-justify"> <h2 class="font-serif-lg text-bold text-accent-cool-darker text-align-left text-align-center text-align-right text-align-justify"> <h3 class="text-align-left text-align-center text-align-right text-align-justify"> <h4 class="text-align-left text-align-center text-align-right text-align-justify"> <a class="usa-button usa-button--secondary usa-button--big" role href> <div class="usa-table-container--scrollable usa-sr-only usa-table__announcement-region text-align-left text-align-center text-align-right text-align-justify" aria-live> <strong> <em> <u> <blockquote> <ul> <ol reversed start> <li> <table class> <tr> <td rowspan colspan data-label data-sort-value> <th rowspan colspan scope data-label data-sortable role> <thead> <tbody> <tfoot> <caption> <drupal-media data-entity-type data-entity-uuid alt data-view-mode data-caption data-align> <drupal-paragraph data-embed-button data-entity-label data-paragraph-id data-paragraph-revision-id>'
       filter_html_help: true
       filter_html_nofollow: false
   filter_table_attributes:

web/themes/custom/usagov/sass/_benefit-search.scss

@@ -330,14 +330,12 @@ main[data-pagetype="Benefits Category Search"]{
 
       > h3 {
         @include u-margin(0);
-
-        font-size: 1.325rem;
+        @include u-font-size('sans', 'md');
       }
 
       > p {
         @include u-margin(0);
-
-        font-size: 1.0625rem;
+        @include u-font-size('sans', 'sm');
       }
 
       a::before {

web/themes/custom/usagov/sass/_benefits-block.scss

@@ -43,22 +43,17 @@
   padding: initial;
 
   > h2 {
+    @include u-font('serif', 'xl');
     @include u-text('blue-80v');
-    @include u-font-family('serif');
-    @include u-margin(0);
+    @include u-margin-top(0);
     @include u-margin-bottom(2);
-
-    font-size: 2.2rem;
     line-height: 117.4%;
     letter-spacing: -0.39px;
   }
 
   .benefits-block__content, p {
     @include u-text('blue-80v');
-    @include u-font-family('sans');
     @include u-margin(0);
-
-    font-size: 1.25rem;
   }
 }
 
@@ -71,15 +66,14 @@ a.usa-button.benefits-link {
   @include u-padding(3);
   @include u-bg('blue-80v');
   @include u-display(flex);
-  @include u-font-family('sans');
+  @include u-font('sans', 'lg');
 
   grid-area: button;
   text-decoration: none;
   max-height: 37px;
   margin: auto;
   justify-content: center;
   align-items: center;
-  font-size: 22px;
   font-weight: 600;
   width: 100%;
   border: solid 2px transparent;

web/themes/custom/usagov/sass/_ceo.scss

@@ -19,7 +19,6 @@
 
 .ceo-button {
   margin-inline: 0 !important;
-  width: fit-content;
 }
 
 // Hides the City or County accordion header when there are no results.

web/themes/custom/usagov/sass/_fed-directory.scss

@@ -34,12 +34,12 @@
     width: 44px;
     height: 44px;
     text-decoration: none;
-    @include u-text('gray-90');
     box-sizing: border-box;
     @include u-bg('cyan-10');
     border: 2px solid $secondary-border;
     border-radius: 0.01rem;
-    font-size: 1.5rem;
+    @include u-font-size('sans', 'lg');
+    @include u-text('gray-90');
     @include u-text('semibold');
     transition: box-shadow 200ms, background-color 200ms;
   }
@@ -138,11 +138,10 @@ div.field--name-field-offices-near-you> ul {
 }
 
 .fed-directory-search-input {
+  @include u-font-size('sans', 'xs');
+  @include u-text('gray-90');
   @include u-bg('white');
   outline: none;
-  font-size: 0.98rem;
-  @include u-text('gray-90');
-  @include u-text('medium');
   border-style: none;
   line-height: 1.5;
 }
@@ -159,7 +158,7 @@ div.field--name-field-offices-near-you> ul {
   height: 2rem;
   min-width: 3rem;
   padding: 0 0.75rem;
-  font-size: 1.1rem;
+  // font-size: 1.1rem;
 
   img {
     width: 1.5rem;
@@ -186,9 +185,7 @@ div.field--name-field-offices-near-you> ul {
 
 // Letter Heading
 .usagov-directory-letter-heading {
-  @include u-font-family('sans');
-  font-size: 2.375rem;
-
+  @include u-font('sans', 'xl');
   text-align: center;
   line-height: 57px;
   outline: solid 0.15rem color('gray-90');
@@ -237,7 +234,7 @@ div div.field--name-field-offices-near-you>ul>li {
     text-decoration: none;
     text-align: center;
     line-height: 57px;
-    font-size: 2.375rem;
+    @include u-font-size('sans', 'xl');
     @include u-text('gray-90', !important);
     outline: solid 0.15rem color('cyan-50v');
     @include u-bg('cyan-10');

web/themes/custom/usagov/sass/_footer.scss

@@ -3,11 +3,6 @@
 
 /* ---- All Footers ---- */
 
-.usa-footer--big .usa-footer__primary-content--collapsible .usa-footer__primary-link {
-  @include u-font-family('sans');
-  font-size: 1.2rem;
-}
-
 .usa-footer--big {
   padding-top: 2rem;
 }
@@ -27,7 +22,7 @@
 }
 
 .usa-sign-up__heading {
-  @include u-font-family('sans');
+  @include u-font('sans','lg');
 }
 
 .usa-footer__primary-content--collapsible.hidden {
@@ -40,18 +35,22 @@
   font-feature-settings: "kern" 1;
   font-kerning: normal;
   box-sizing: inherit;
+  @include u-font('sans', 'md');
+  @include u-text('bold');
   @include u-text('gray-90');
   text-decoration: none;
   padding: 0;
-  @include u-text('bold');
   line-height: 1.2;
   margin: 0;
   margin-bottom: 0;
-  align-items: center;
+  align-items: baseline;
   display: flex;
   justify-content: flex-start;
-  @include u-font-family('sans');
-  font-size: 1.2rem;
+
+  @include at-media('desktop') {
+    // Match the height of ones that wrap
+    min-height: 2.75rem;
+  }
 }
 
 .usa-gov-footer__primary-link--button {
@@ -124,7 +123,7 @@
   border: 1px solid color('gray-90');
   line-height: 1.5;
   margin-inline: 0 !important;
-  font-size: 1.1rem;
+  @include u-font-size('sans', 'md');
 }
 
 .footer-button:hover {
@@ -135,12 +134,6 @@
   @include u-border('gray-90');
 }
 
-.ftr-list {
-  @media (min-width: 64em) {
-    padding-top: 1.4rem;
-  }
-}
-
 /* ---- Secondary Footer ---- */
 .usa-footer__secondary-section {
   background-color: color("cyan-10");

web/themes/custom/usagov/sass/_header.scss

@@ -104,7 +104,7 @@
   text-decoration: none;
   padding: 10px 20px;
   line-height: .9;
-  font-size: .93rem;
+  @include u-font-size('sans', '2xs');
   margin: 0;
   border: 2px solid transparent;
 
@@ -171,7 +171,8 @@
     @include u-flex("row", "align-end");
 
     bottom: 6rem;
-    width: 32rem;
+    // width: 32rem;
+    width: calc(27ch + 3rem + 1rem + 16rem);
   }
 }
 
@@ -181,7 +182,8 @@
     @include u-flex("row", "align-end");
 
     bottom: 6rem;
-    width: 33rem;
+    // width: 33rem;
+    width: calc(27ch + 3rem + 1rem + 17rem);
   }
 }
 
@@ -201,7 +203,7 @@
 // This is to make the header link stretch out
 .usa-header--extended .usa-nav__secondary-links {
   @include at-media($theme-header-min-width) {
-    width: 15rem;
+    width: 16rem;
     margin-bottom: 0;
   }
 }
@@ -230,18 +232,16 @@
 }
 
 .usa-header--extended .usa-nav__secondary-links a {
+  @include u-font-size('sans', 'md');
   @include at-media($theme-header-min-width) {
-    font-size: 1.13rem;
     padding-left: 0.5rem;
     padding-top: 0.2rem;
   }
 }
 
 .usa-header--extended .usa-nav__secondary-links a:lang(es) {
   @include at-media($theme-header-min-width) {
-    font-size: 1.13rem;
     padding-left: 0.2rem;
-    padding-top: 0.2rem;
   }
 }
 

web/themes/custom/usagov/sass/_homepage.scss

@@ -52,18 +52,17 @@
   }
 
   h1 {
-    @include u-font-family('serif');
-    font-size: 2.2em;
-    margin: 0;
+    @include u-font('serif', 'xl');
+    @include u-margin-top(0);
+    @include u-margin-bottom(2);
   }
 
   h3 {
     line-height: 1.25;
   }
 
   p {
-    @include u-font-family('sans');
-    font-size: 1.25em;
+    @include u-font('sans', 'md');
     margin: 0;
     line-height: 1.5;
   }
@@ -115,11 +114,6 @@
   box-shadow: 0 6px 6px $blue-shadow;
   padding: 30px 28px 35px 30px;
 
-  p {
-    font-size: 1.125em;
-    margin-top: 20px;
-  }
-
   @include at-media("tablet") {
     width: clamp(50%, 450px, 100%);
   }
@@ -160,7 +154,7 @@
   }
 
   h2 {
-    font-size: 1.875em;
+    @include u-font-size('sans', 'lg');
   }
 }
 
@@ -186,12 +180,11 @@
 /* Jump */
 .jump {
   padding: 0;
+  @include u-font('sans', 'sm');
   text-align: center;
 
   a {
     @include u-text('white');
-    @include u-font-family('sans');
-    font-size: 1.038em;
     text-decoration: underline;
     display: inline-block;
     margin-bottom: 10px;
@@ -229,10 +222,8 @@
   border-bottom: 10px solid color('red-50');
 
   h2 {
+    @include u-font('serif', 'xl');
     @include u-text('red-50');
-    @include u-font-family('serif');
-    font-size: 2.44em;
-    //uswds font-weight mixin
     @include u-text('bold');
     margin: 65px 5vw 0;
     max-width: 1124px;
@@ -297,9 +288,8 @@
 
   h2,
   p {
+    @include u-font-size('sans', 'md');
     @include u-text('gray-90');
-    @include u-font-family('sans');
-    font-size: 1.038em;
   }
 
   h2 {

web/themes/custom/usagov/sass/_mobile-menu.scss

@@ -70,9 +70,9 @@ ul.navigation__items {
   align-items: center;
   background: transparent;
   border: 0;
+  @include u-font('sans', 'md');
   @include u-text('gray-90');
   font-weight: bold;
-  font-size: larger;
   text-decoration: none;
   margin: unset;
   width: auto;
@@ -109,7 +109,7 @@ ul.navigation__items {
   padding: 0;
   padding-top: 2rem;
   height: auto;
-  font-size: 1rem;
+  @include u-font-size('sans', 'xs');
   font-weight: normal;
   cursor: pointer;
 }