LG-4795: Change font to Public Sans

app/assets/stylesheets/components/_icon.scss

@@ -31,7 +31,7 @@ $icon-min-padding: 2px;
       height: $h4;
       left: -$space-3;
       position: absolute;
-      top: $space-1;
+      top: (lh('body', $theme-body-line-height) - $h4) * 0.5;
       width: $h4;
     }
   }

app/assets/stylesheets/components/_step-indicator.scss

@@ -78,7 +78,7 @@ $step-indicator-pending-color: #a8b6c6;
 
 .step-indicator__step {
   flex: 0 0 33.33%;
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   padding: 1.5rem 0.25rem 0;
   position: relative;
   text-align: center;

app/assets/stylesheets/components/_troubleshooting-options.scss

@@ -17,7 +17,7 @@
 
 .troubleshooting-options__heading {
   @include u-margin-y(1.5);
-  font-size: units(2);
+  @extend %h3;
 }
 
 .troubleshooting-options__options {

app/assets/stylesheets/utilities/_typography.scss

@@ -35,54 +35,86 @@ body {
   line-height: $line-height-4;
 }
 
-// given how similar & coupled these are, single line preferred
+%h1 {
+  line-height: 1.35;
+  font-size: $h1;
+
+  @include at-media('tablet') {
+    font-size: $sm-h1;
+  }
+}
+
+%h2 {
+  line-height: 1.35;
+  font-size: $h2;
+
+  @include at-media('tablet') {
+    font-size: $sm-h2;
+  }
+}
+
+%h3 {
+  line-height: $line-height;
+  font-size: $h3;
+
+  @include at-media('tablet') {
+    font-size: $sm-h3;
+  }
+}
+
+%h4 {
+  line-height: $line-height;
+  font-size: $h4;
+
+  @include at-media('tablet') {
+    font-size: $sm-h4;
+  }
+}
+
+%h5 {
+  line-height: $line-height;
+  font-size: $h5;
+
+  @include at-media('tablet') {
+    font-size: $sm-h5;
+  }
+}
+
+%h6 {
+  line-height: $line-height;
+  font-size: $h6;
+
+  @include at-media('tablet') {
+    font-size: $sm-h6;
+  }
+}
+
 h1,
 .h1 {
-  font-size: $h1;
+  @extend %h1;
 }
+
 h2,
 .h2 {
-  font-size: $h2;
+  @extend %h2;
 }
+
 h3,
 .h3 {
-  font-size: $h3;
+  @extend %h3;
 }
+
 h4,
 .h4 {
-  font-size: $h4;
+  @extend %h4;
 }
+
 h5,
 .h5 {
-  font-size: $h5;
+  @extend %h5;
 }
+
 h6,
 .h6 {
-  font-size: $h6;
-}
-
-@media #{$breakpoint-sm} {
-  h1,
-  .h1 {
-    font-size: $sm-h1;
-  }
-  h2,
-  .h2 {
-    font-size: $sm-h2;
-  }
-  h3 {
-    font-size: $sm-h3;
-  }
-  h4,
-  .h4 {
-    font-size: $sm-h4;
-  }
-  h5,
-  .h5 {
-    font-size: $sm-h5;
-  }
-  h6,
-  .h6 {
-    font-size: $sm-h6;
-  }
+  @extend %h6;
 }

app/assets/stylesheets/variables/_app.scss

@@ -1,6 +1,6 @@
-$serif-font-family: 'Merriweather Web', 'Georgia', 'Cambria', 'Times New Roman', 'Times', serif !default;
-$sans-serif-font-family: 'Source Sans Pro Web', 'Helvetica Neue', 'Helvetica', 'Roboto', 'Arial',
-  sans-serif !default;
+$sans-serif-font-family: Public Sans Web, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+  Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !default;
+$serif-font-family: $sans-serif-font-family !default;
 
 $base-font-size: 16px !default;
 $small-font-size: 14px !default;
@@ -20,19 +20,19 @@ $line-height-0: 0.75 !default; // For when a tighter-than-normal leading is desi
 $line-height-1: 1 !default;
 $line-height-4: 2 !default;
 
-$h1: 1.3125rem !default;
-$h2: 1.125rem !default;
-$h3: 1rem !default;
-$h4: 0.875rem !default;
-$h5: 0.8125rem !default;
-$h6: 0.625rem !default;
-
-$sm-h1: 1.5rem !default;
-$sm-h2: 1.25rem !default;
-$sm-h3: 1rem !default;
-$sm-h4: 0.875rem !default;
+$h1: 1.5rem !default;
+$h2: 1.25rem !default;
+$h3: 1.125rem !default;
+$h4: 1rem !default;
+$h5: 0.875rem !default;
+$h6: 0.75rem !default;
+
+$sm-h1: 1.75rem !default;
+$sm-h2: 1.375rem !default;
+$sm-h3: 1.125rem !default;
+$sm-h4: 1rem !default;
 $sm-h5: 0.875rem !default;
-$sm-h6: 0.8125rem !default;
+$sm-h6: 0.75rem !default;
 
 $space-tiny: 0.25rem !default;
 

app/assets/stylesheets/variables/_vendor.scss

@@ -1,5 +1,4 @@
+$theme-body-font-size: 'sm';
 $theme-font-path: 'identity-style-guide/dist/assets/fonts';
-$theme-font-type-sans: 'source-sans-pro';
-$theme-font-type-serif: 'merriweather';
 $theme-image-path: 'identity-style-guide/dist/assets/img';
 $theme-global-border-box-sizing: true;

app/javascript/packs/webauthn-setup.js

@@ -22,7 +22,7 @@ function webauthn() {
   }
   const continueButton = document.getElementById('continue-button');
   continueButton.addEventListener('click', () => {
-    document.getElementById('spinner').className = '';
+    document.getElementById('spinner').classList.remove('hidden');
     document.getElementById('continue-button').className = 'hidden';
 
     const platformAuthenticator =

app/views/accounts/_device_item.html.erb

@@ -1,15 +1,12 @@
-<div class="padding-1 clearfix border-top border-left border-right border-primary-light">
-  <div class="clearfix margin-x-neg-1">
-    <div class="sm-col sm-col-6 padding-x-1">
-      <div class="bold truncate">
-        <%= device.nice_name %>
-      </div>
-      <%= device.last_sign_in_location_and_ip %>
+<div class="padding-1 border-top border-left border-right border-primary-light">
+  <div class="grid-row grid-gap-2">
+    <div class="grid-col-fill">
+      <strong><%= device.nice_name %></strong>
     </div>
-    <div class="sm-col sm-col-6 padding-x-1 sm-right-align">
-      <%= local_time(device.happened_at, t('time.formats.event_timestamp')) %>
-      <br />
+    <div class="grid-col-auto">
       <%= link_to t('headings.account.events'), account_events_path(id: device.id) %>
     </div>
   </div>
+  <%= local_time(device.happened_at, t('time.formats.event_timestamp')) %><br>
+  <%= device.last_sign_in_location_and_ip %>
 </div>

app/views/accounts/_emails.html.erb

@@ -1,5 +1,5 @@
-<div class="clearfix border-bottom border-primary-light">
-  <div class="col col-12 margin-bottom-1 margin-top-0">
+<div class="border-bottom border-primary-light">
+  <div class="margin-bottom-1 margin-top-0">
     <h3 class="margin-0">
       <%= t('account.index.email_addresses') %>
     </h3>
@@ -8,23 +8,23 @@
     <% end %>
   </div>
   <% @presenter.decorated_user.visible_email_addresses.each do |email| %>
-    <div class="padding-1 col col-12 border-top border-left border-right border-primary-light">
-      <div class="col col-8 sm-6">
-        <span class="break-word">
-          <%= email.email %>
-          &nbsp;
-        </span>
-        <span>
-          <%= t('email_addresses.unconfirmed') unless email.confirmed_at %>
-        </span>
-      </div>
-      <div class="col col-4 sm-6 right-align">
+    <div class="padding-1 border-top border-left border-right border-primary-light">
+      <div class="grid-row grid-gap-2">
+        <div class="grid-col-fill">
+          <span class="break-word">
+            <%= email.email %>
+          </span>
+          <% unless email.confirmed_at %>
+            &nbsp;<%= t('email_addresses.unconfirmed') %>
+          <% end %>
+        </div>
         <% if EmailPolicy.new(current_user).can_delete_email?(email) %>
-          &nbsp; &nbsp;
-          <%= render(
-                'accounts/actions/delete_action_button',
-                path: manage_email_confirm_delete_url(id: email.id),
-              ) %>
+          <div class="grid-col-auto">
+            <%= render(
+                  'accounts/actions/delete_action_button',
+                  path: manage_email_confirm_delete_url(id: email.id),
+                ) %>
+          </div>
         <% end %>
       </div>
     </div>

app/views/accounts/_event_item.html.erb

@@ -1,11 +1,5 @@
-<div class="padding-1 grid-row border-top border-left border-right border-primary-light">
-  <div class="mobile-lg:grid-col-6 padding-x-1">
-    <div class="bold truncate">
-      <%= event.event_type %>
-    </div>
-    <%= event.last_sign_in_location_and_ip %>
-  </div>
-  <div class="mobile-lg:grid-col-6 padding-x-1 sm-right-align">
-    <%= local_time(event.happened_at, t('time.formats.event_timestamp')) %>
-  </div>
+<div class="padding-1 border-top border-left border-right border-primary-light">
+  <strong><%= event.event_type %></strong><br>
+  <%= local_time(event.happened_at, t('time.formats.event_timestamp')) %><br>
+  <%= event.last_sign_in_location_and_ip %>
 </div>

app/views/accounts/_header.html.erb

@@ -1,9 +1,9 @@
-<div class="grid-row padding-top-2 padding-bottom-4 tablet:padding-y-0 margin-bottom-4 bg-lightest-blue sm-bg-none position-relative">
+<div class="grid-row padding-y-2 tablet:padding-y-0 margin-bottom-4 bg-lightest-blue sm-bg-none position-relative">
   <div class="grid-col-12 tablet:grid-col-fill">
     <h1 class="margin-0 center sm-left-align">
-      <span class="regular font-family-sans tablet:display-none">
+      <span class="regular tablet:display-none">
         <%= t('account.welcome') %>,
-        <span class="bold">
+        <span class="text-bold text-wrap-anywhere">
           <%= presenter.header_personalization %>
         </span>
       </span>

app/views/accounts/_identity_item.html.erb

@@ -1,17 +1,13 @@
-<div class="padding-1 grid-row border-top border-left border-right border-primary-light">
-  <div class="mobile-lg:grid-col-6 padding-x-1">
-    <div class="bold">
-      <% if event.return_to_sp_url.present? %>
-        <%= t(
-              'event_types.authenticated_at_html',
-              service_provider_link: link_to(event.display_name, event.return_to_sp_url),
-            ) %>
+<div class="padding-1 border-top border-left border-right border-primary-light">
+  <strong>
+    <% if event.return_to_sp_url.present? %>
+      <%= t(
+            'event_types.authenticated_at_html',
+            service_provider_link: link_to(event.display_name, event.return_to_sp_url),
+          ) %>
     <% else %>
       <%= t('event_types.authenticated_at', service_provider: event.display_name) %>
     <% end %>
-    </div>
-  </div>
-  <div class="mobile-lg:grid-col-6 padding-x-1 sm-right-align">
-    <%= local_time(event.happened_at, t('time.formats.event_timestamp')) %>
-  </div>
+  </strong><br>
+  <%= local_time(event.happened_at, t('time.formats.event_timestamp')) %>
 </div>

app/views/accounts/_phone.html.erb

@@ -6,19 +6,19 @@
 <% end %>
 <div class="border-bottom border-primary-light">
   <% MfaContext.new(current_user).phone_configurations.each do |phone_configuration| %>
-    <div class="grid-row padding-1 border-top border-left border-right border-primary-light">
-      <div class="grid-col-5">
-        <%= PhoneFormatter.format(phone_configuration.phone) %>
-      </div>
-      <div class="grid-col-4 text-center">
-        <% if current_user.default_phone_configuration == phone_configuration %>
-          <%= I18n.t('account.index.default') %>
-        <% end %>
-      </div>
-      <div class="grid-col-3 right-align">
-        <%= render 'accounts/actions/manage_action_button',
-                   path: manage_phone_path(id: phone_configuration.id),
-                   name: t('account.index.phone') %>
+    <div class="padding-1 border-top border-left border-right border-primary-light">
+      <div class="grid-row grid-gap-2">
+        <div class="grid-col-fill">
+          <%= PhoneFormatter.format(phone_configuration.phone) %>
+          <% if current_user.default_phone_configuration == phone_configuration %>
+            (<%= I18n.t('account.index.default') %>)
+          <% end %>
+        </div>
+        <div class="grid-col-auto">
+          <%= render 'accounts/actions/manage_action_button',
+                     path: manage_phone_path(id: phone_configuration.id),
+                     name: t('account.index.phone') %>
+        </div>
       </div>
     </div>
   <% end %>