Update material mdc migration typography

package.json

@@ -34,19 +34,18 @@
     "lighthouse": "ts-node -P scripts/tsconfig.json scripts/lighthouse/main.ts",
     "build:browserslist": "ts-node -P scripts/tsconfig.json scripts/browserlist.prebuild.ts",
     "build:fetchCombineWordpressCss": "ts-node -P scripts/tsconfig.json scripts/fetch-combine-wordpress-css.prebuild"
-
   },
   "private": true,
   "dependencies": {
     "@angular-devkit/core": "^16.2.6",
     "@angular/animations": "^16.2.8",
-    "@angular/cdk": "^16.2.8",
+    "@angular/cdk": "^16.2.14",
     "@angular/common": "^16.2.8",
     "@angular/compiler": "^16.2.8",
     "@angular/core": "^16.2.8",
     "@angular/forms": "^16.2.8",
     "@angular/localize": "^16.2.8",
-    "@angular/material": "^16.2.8",
+    "@angular/material": "^16.2.14",
     "@angular/platform-browser": "^16.2.8",
     "@angular/platform-browser-dynamic": "^16.2.8",
     "@angular/router": "^16.2.8",
@@ -127,4 +126,4 @@
     "tslint-config-prettier": "^1.18.0",
     "typescript": "~5.1.6"
   }
-}
+}

src/app/account-settings/pages/account-settings/account-settings.component.scss

@@ -4,7 +4,7 @@
   width: 100%;
 }
 
-.mat-headline {
+.mat-headline-5 {
   margin-bottom: $spacing-large;
 }
 main#main {

src/app/account-trusted-parties/pages/account-trusted-parties/account-trusted-parties.component.scss

@@ -4,7 +4,7 @@
   width: 100%;
 }
 
-.mat-headline {
+.mat-headline-5 {
   margin-bottom: $spacing-large;
 }
 main#main {

src/app/authorize/components/form-authorize/form-authorize.component.html

@@ -36,7 +36,7 @@ <h1 class="orc-font-heading-small" i18n="@@authorize.authorize">
       <div class="col l9 user-wrapper">
         <div class="row">
           <div class="m-b-8">
-            <div class="mat-body-2">
+            <div class="mat-subtitle-2">
               <strong id="user-name">{{ userName }}</strong>
             </div>
             <span>{{ orcidUrl }}</span>
@@ -68,13 +68,13 @@ <h1 class="orc-font-heading-small" i18n="@@authorize.authorize">
     ></app-info-drop-down>
 
     <p
-      class="mat-body-1 m-t-16 m-b-16"
+      class="mat-body-2 m-t-16 m-b-16"
       i18n="@@authorize.organizationAskedFollowingAccess"
     >
       This organization has asked for the following access to your ORCID record:
     </p>
 
-    <ul class="mat-body-1 m-t-base">
+    <ul class="mat-body-2 m-t-base">
       <ng-container
         *ngFor="let scope of this.oauthRequest.scopes; let last = last"
       >

src/app/authorize/components/oauth-error/oauth-error.component.html

@@ -130,7 +130,7 @@
     </div>
   </mat-card-content>
 
-  <p class="mat-body-1 mat-caption">
+  <p class="mat-body-2 mat-caption">
     {{ error }} /
     {{ errorDescription }}
   </p>

src/app/cdk/banner/banner.component.html

@@ -1,4 +1,4 @@
-<section class="alert alert-banner mat-body-1" [attr.aria-label]="ariaLabel">
+<section class="alert alert-banner mat-body-2" [attr.aria-label]="ariaLabel">
   <p><ng-content></ng-content></p>
   <button
     *ngIf="canDismiss"

src/app/cdk/banner/banner.component.scss

@@ -16,7 +16,7 @@ button {
   flex-shrink: 0;
 }
 
-.mat-body-1 p {
+.mat-body-2 p {
   margin: 0;
 }
 .columns-12 :host {

src/app/cdk/is-this-you/is-this-you.component.html

@@ -1,7 +1,7 @@
 <div class="container" *ngIf="data && data.duplicateRecords">
-  <h1 class="mat-display-1 modal-title">{{ data.titleLabel || titleLabel }}</h1>
+  <h1 class="mat-headline-4 modal-title">{{ data.titleLabel || titleLabel }}</h1>
   <div class="non-fixed">
-    <p class="mat-body-1">
+    <p class="mat-body-2">
       {{ data.bodyLabel || bodyLabel }}
       <a
         rel="noopener noreferrer"
@@ -12,7 +12,7 @@ <h1 class="mat-display-1 modal-title">{{ data.titleLabel || titleLabel }}</h1>
       </a>
     </p>
 
-    <table class="mat-subheading-2">
+    <table class="mat-subtitle-1">
       <tr>
         <th>{{ data.firstNameLabel || firstNameLabel }}</th>
         <th>{{ data.lastNameLabel || lastNameLabel }}</th>

src/app/cdk/panel/panel-data-line/panel-data-line.component.html

@@ -19,18 +19,18 @@
   <span>{{ title }}</span>
   <ng-container *ngIf="detail">&#x200E;({{ detail }})&#x200E;</ng-container>
   <p
-    class="mat-body-1"
+    class="mat-body-2"
     *ngIf="!url && copyOnClick"
     appCopyOnClick
     matTooltip="Click to Copy"
     [matTooltipPosition]="'above'"
   >
     {{ content }}
   </p>
-  <p class="mat-body-1" *ngIf="!url && !copyOnClick">{{ content }}</p>
+  <p class="mat-body-2" *ngIf="!url && !copyOnClick">{{ content }}</p>
 
   <a
-    class="underline mat-body-1"
+    class="underline mat-body-2"
     href="{{ url }}"
     target="_blank"
     rel="noopener noreferrer"

src/app/cdk/platform-info/browserlist.regexp.ts

@@ -1,3 +1,2 @@
 // tslint:disable-next-line: max-line-length
-export const BROWSERLIST_REGEXP =
-  /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(13[_.]4|13[_.]([5-9]|\d{2,})|13[_.]7|13[_.]([8-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})[_.]\d+|14[_.]0|14[_.]([1-9]|\d{2,})|14[_.]4|14[_.]([5-9]|\d{2,})|14[_.]8|14[_.](9|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})[_.]\d+|15[_.]0|15[_.]([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[_.]\d+|16[_.]0|16[_.]([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})[_.]\d+|17[_.]0|17[_.]([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})[_.]\d+)(?:[_.]\d+)?)|((?:Chrome).*OPR\/(74|(7[5-9]|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Edge\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))(?:\.\d+)?)|((Chromium|Chrome)\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))\.\d+(?:\.\d+)?)|(Version\/(13\.1|13\.([2-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+|14\.0|14\.([1-9]|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})\.\d+|15\.0|15\.([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+|16\.0|16\.([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})\.\d+|17\.0|17\.([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})\.\d+)(?:\.\d+)? Safari\/)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+(pre|[ab]\d+[a-z]*)?)/
+export const BROWSERLIST_REGEXP = /((CPU[ +]OS|iPhone[ +]OS|CPU[ +]iPhone|CPU IPhone OS)[ +]+(13[_.]4|13[_.]([5-9]|\d{2,})|13[_.]7|13[_.]([8-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})[_.]\d+|14[_.]0|14[_.]([1-9]|\d{2,})|14[_.]4|14[_.]([5-9]|\d{2,})|14[_.]8|14[_.](9|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})[_.]\d+|15[_.]0|15[_.]([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})[_.]\d+|16[_.]0|16[_.]([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})[_.]\d+|17[_.]0|17[_.]([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})[_.]\d+)(?:[_.]\d+)?)|((?:Chrome).*OPR\/(74|(7[5-9]|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Edge\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))(?:\.\d+)?)|((Chromium|Chrome)\/(80|(8[1-9]|9\d|\d{3,})|83|(8[4-9]|9\d|\d{3,}))\.\d+(?:\.\d+)?)|(Version\/(13\.1|13\.([2-9]|\d{2,})|(1[4-9]|[2-9]\d|\d{3,})\.\d+|14\.0|14\.([1-9]|\d{2,})|(1[5-9]|[2-9]\d|\d{3,})\.\d+|15\.0|15\.([1-9]|\d{2,})|(1[6-9]|[2-9]\d|\d{3,})\.\d+|16\.0|16\.([1-9]|\d{2,})|(1[7-9]|[2-9]\d|\d{3,})\.\d+|17\.0|17\.([1-9]|\d{2,})|(1[8-9]|[2-9]\d|\d{3,})\.\d+)(?:\.\d+)? Safari\/)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+\.\d+)|(Firefox\/(78|(79|[8-9]\d|\d{3,}))\.\d+(pre|[ab]\d+[a-z]*)?)/

src/app/cdk/side-bar/modals/modal-country/modal-country.component.html

@@ -168,7 +168,7 @@
     <div class="row">
       <a class="col add-more no-gutters" (click)="addCountry()" id="add-link">
         <mat-icon class="large-material-icon">add_circle_outline</mat-icon>
-        <span class="mat-body-1">
+        <span class="mat-body-2">
           <ng-container
             *ngIf="countries?.length === 0"
             i18n="@@side-bar.addCountryOrLocation"

src/app/cdk/side-bar/modals/modal-keyword/modal-keyword.component.html

@@ -159,7 +159,7 @@ <h2 class="col no-gutters orc-font-body" i18n="@@topBar.myKeywords">
           (click)="addKeyword()"
         >
           <mat-icon class="large-material-icon">add_circle_outline</mat-icon>
-          <span class="mat-body-1">
+          <span class="mat-body-2">
             <ng-container
               *ngIf="keywords?.length === 0"
               i18n="@@topBar.addKeyword"

src/app/cdk/side-bar/modals/modal-websites/modal-websites.component.html

@@ -322,7 +322,7 @@ <h2 class="col no-gutters orc-font-body" i18n="@@topBar.myLinks">
     <div class="row">
       <a id="add-link" class="col add-more no-gutters" (click)="addWebsite()">
         <mat-icon class="large-material-icon">add_circle_outline</mat-icon>
-        <span class="mat-body-1">
+        <span class="mat-body-2">
           <ng-container *ngIf="websites?.length === 0" i18n="@@topBar.addLink">
             Add a link
           </ng-container>

src/app/cdk/snackbar/snackbar/snackbar.component.html

@@ -9,8 +9,8 @@
     <mat-icon>close</mat-icon>
   </button>
 </div>
-<div class="box mat-body-1">
-  <div class="mat-subheading-2">{{ data.displayMessage?.title }}</div>
+<div class="box mat-body-2">
+  <div class="mat-subtitle-1">{{ data.displayMessage?.title }}</div>
   <div class="error-container">
     {{ data.displayMessage?.message }}
     <a

src/app/cdk/snackbar/snackbar/snackbar.component.scss

@@ -25,7 +25,7 @@ mat-icon.errorGroup {
   }
 }
 
-.mat-subheading-2 {
+.mat-subtitle-1 {
   margin: 0px;
 }
 .mat-caption {

src/app/cdk/trusted-individuals-dropdown/trusted-individuals-dropdown.component.html

@@ -9,7 +9,7 @@
 
 <mat-menu
   #menu="matMenu"
-  class="mat-body-1 trusted-individuals"
+  class="mat-body-2 trusted-individuals"
   [attr.aria-label]="labelSwitchAccount"
 >
   <strong class="header text-container" i18n="@@delegators.switchAccount">

src/app/developer-tools/pages/developer-tools/developer-tools.component.html

@@ -313,7 +313,7 @@ <h2 class="orc-font-body-large" i18n="@@developerTools.redirectUris">
               <mat-icon class="large-material-icon"
                 >add_circle_outline</mat-icon
               >
-              <span class="mat-body-1">
+              <span class="mat-body-2">
                 <ng-container i18n="@@developerTools.addAnotherRedirectUri">
                   Add another redirect URI
                 </ng-container>

src/app/environment-banner/environment-banner/environment-banner.component.html

@@ -1,4 +1,4 @@
-<section class="alert alert-banner mat-body-1" [attr.aria-label]="labelWarning">
+<section class="alert alert-banner mat-body-2" [attr.aria-label]="labelWarning">
   <p>
     <ng-container i18n="@@common.js.domain.warn.warning_1"
       >Warning!</ng-container

src/app/environment-banner/environment-banner/environment-banner.component.scss

@@ -16,7 +16,7 @@ button {
   flex-shrink: 0;
 }
 
-.mat-body-1 p {
+.mat-body-2 p {
   margin: 0;
 }
 .columns-12 :host {

src/app/home/components/news/news.component.html

@@ -3,7 +3,7 @@
     <div class="row title-box">
       <div class="row">
         <div class="col l6 m8 s3 baseline">
-          <h1 i18n="@@home.latest_news" class="mat-display-1" id="latest-news">
+          <h1 i18n="@@home.latest_news" class="mat-headline-4" id="latest-news">
             LATEST NEWS
           </h1>
           <button
@@ -37,7 +37,7 @@ <h1 i18n="@@home.latest_news" class="mat-display-1" id="latest-news">
             <div class="col mat-caption l-auto m8" dir="ltr">
               {{ new.pubDate[0].slice(0, 22) }}
             </div>
-            <p class="col mat-headline l12 m8 s4 horizontal-center" dir="ltr">
+            <p class="col mat-headline-5 l12 m8 s4 horizontal-center" dir="ltr">
               {{ new.title }}
             </p>
             <button

src/app/home/pages/home/home.component.html

@@ -32,7 +32,7 @@
           </h1>
 
           <div
-            class="col l12 m8 s4 mat-body-2 horizontal-center"
+            class="col l12 m8 s4 mat-subtitle-2 horizontal-center"
             i18n="@@ngOrcid.orcidProvides"
           >
             ORCID provides a persistent digital identifier (an ORCID iD) that
@@ -66,11 +66,11 @@
               <div class="col l12 m8 s4">
                 <div class="number-circle" i18n="@@home.one">1</div>
               </div>
-              <h2 class="col l12 m8 s4 mat-headline" i18n="@@home.register">
+              <h2 class="col l12 m8 s4 mat-headline-5" i18n="@@home.register">
                 REGISTER
               </h2>
             </div>
-            <div class="row mat-body-1 row mat-body-1 horizontal-center">
+            <div class="row mat-body-2 row mat-body-2 horizontal-center">
               <ng-container i18n="@@ngOrcid.getYourOrcid">
                 Get your unique ORCID identifier. It’s free and only takes a
                 minute, so
@@ -92,7 +92,7 @@ <h2 class="col l12 m8 s4 mat-headline" i18n="@@home.register">
                 </div>
               </div>
               <h2
-                class="col l12 m8 s4 mat-headline"
+                class="col l12 m8 s4 mat-headline-5"
                 id="user-your-orcid-id"
                 aria-labelledby="user-your-orcid-id"
               >
@@ -101,7 +101,7 @@ <h2 class="col l12 m8 s4 mat-headline" i18n="@@home.register">
               </h2>
             </div>
             <div
-              class="row mat-body-1 horizontal-center"
+              class="row mat-body-2 horizontal-center"
               i18n="@@ngOrcid.includeYourId"
             >
               Use your iD, when prompted, in systems and platforms from grant
@@ -115,7 +115,7 @@ <h2 class="col l12 m8 s4 mat-headline" i18n="@@home.register">
                 <div class="number-circle" i18n="@@home.three">3</div>
               </div>
               <h2
-                class="col l12 m8 s4 mat-headline"
+                class="col l12 m8 s4 mat-headline-5"
                 id="share-your-orcid"
                 aria-labelledby="share-your-orcid"
               >
@@ -125,7 +125,7 @@ <h2 class="col l12 m8 s4 mat-headline" i18n="@@home.register">
               </h2>
             </div>
             <div
-              class="row mat-body-1 horizontal-center"
+              class="row mat-body-2 horizontal-center"
               i18n="@@ngOrcid.enhanceYourProfile"
             >
               The more information connected to your ORCID record, the more
@@ -160,8 +160,8 @@ <h2 class="col l12 m8 s4 mat-headline" i18n="@@home.register">
               alt=""
             />
           </div>
-          <div class="col l8 m8 mat-body-2 text-container">
-            <h1 i18n="@@ngOrcid.membersMakeOrcid" class="mat-display-1">
+          <div class="col l8 m8 mat-subtitle-2 text-container">
+            <h1 i18n="@@ngOrcid.membersMakeOrcid" class="mat-headline-4">
               Our organizational members make ORCID possible!
             </h1>
 

src/app/home/pages/home/home.component.scss

@@ -25,15 +25,15 @@
     margin-top: 30px;
   }
 
-  .mat-body-2,
+  .mat-subtitle-2,
   .hero-title {
     div {
       max-width: 1024px;
     }
     text-align: center;
   }
 
-  .mat-body-2 {
+  .mat-subtitle-2 {
     margin-top: 8px;
   }
 
@@ -67,18 +67,18 @@
     }
   }
 
-  .mat-body-1 {
+  .mat-body-2 {
     height: 100%;
     text-align: center;
     max-width: 344px;
     display: block;
   }
-  .mat-headline {
+  .mat-headline-5 {
     text-align: center;
   }
 }
 .organization-section {
-  .mat-display-1 {
+  .mat-headline-4 {
     margin-bottom: 20px;
   }
   background-image: url('../../../../assets/vectors/orcid.logo.background.svg');
@@ -95,7 +95,7 @@
     height: 100%;
     .row {
       height: 100%;
-      .mat-headline {
+      .mat-headline-5 {
         margin-bottom: 24px;
       }
       .organization-img {
@@ -129,7 +129,7 @@
 
     .register-section {
       height: auto;
-      .mat-body-1 {
+      .mat-body-2 {
         height: auto;
       }
       > .container > .row > .col {
@@ -150,7 +150,7 @@
       .container {
       }
 
-      .mat-display-1 {
+      .mat-headline-4 {
         margin-top: 40px;
         margin-bottom: 7px;
       }
@@ -171,7 +171,7 @@
       img {
         min-height: 350px;
       }
-      .mat-display-1 {
+      .mat-headline-4 {
         margin-top: 40px;
         margin-bottom: 7px;
       }

src/app/inbox/components/notification-your-record-amended/notification-your-record-amended.component.html

@@ -5,7 +5,7 @@
 
 <!--  https://github.com/ORCID/ORCID-Source/blob/a9868bbc959b151d7c761936b610936faf1b2d84/orcid-web/src/main/resources/freemarker/includes/ng2_templates/notification-body-ng2-template.ftl#L81 -->
 
-<div class="mat-body-1">
+<div class="mat-body-2">
   <ng-container i18n="@@inbox.updateThe">has updated the</ng-container>
   <span>{{ getNotificationSectionUpdatedLabel(notification) }}</span>
   <ng-container i18n="@@inbox.sectionOf">section of your record:</ng-container>