Updates Typography Variables and styles. (#9017)

Co-authored-by: Mark Stacey <markjstacey@gmail.com>

ui/app/components/app/modals/add-to-addressbook-modal/index.scss

@@ -9,7 +9,7 @@
     border-bottom: 1px solid $Grey-100;
 
     &__header {
-      @extend %h3;
+      @extend %H3;
     }
   }
 

ui/app/components/app/modals/new-account-modal/index.scss

@@ -9,7 +9,7 @@
     border-bottom: 1px solid $Grey-100;
 
     &__header {
-      @extend %header--18;
+      @extend %H4;
 
       font-weight: bold;
       display: flex;

ui/app/components/app/permission-page-container/index.scss

@@ -31,7 +31,7 @@
   }
 
   &__title {
-    @extend %header--18;
+    @extend %H4;
 
     line-height: 25px;
     text-align: center;
@@ -84,7 +84,7 @@
   }
 
   &__permissions-header {
-    @extend %content-text;
+    @extend %H6;
 
     line-height: 20px;
     color: #6a737d;

ui/app/components/app/permissions-connect-footer/index.scss

@@ -5,9 +5,8 @@
   align-items: center;
 
   &__text {
-    @extend %content-text;
+    @extend %H7;
 
-    font-size: 12px;
     line-height: 17px;
     color: #6a737d;
     display: flex;

ui/app/components/app/permissions-connect-header/index.scss

@@ -26,7 +26,7 @@
   }
 
   &__title {
-    @extend %header--24;
+    @extend %H3;
 
     text-align: center;
     color: $Black-100;
@@ -35,7 +35,7 @@
 
   &__text,
   &__subtitle {
-    @extend %content-text;
+    @extend %H6;
 
     text-align: center;
     color: $Grey-500;

ui/app/components/ui/button/buttons.scss

@@ -11,7 +11,7 @@ $hover-orange: #ffd3b5;
 $warning-light-orange: #f8b588;
 
 %button {
-  @include h6;
+  @extend %H6;
 
   font-weight: 500;
   font-family: Roboto, Arial;
@@ -34,7 +34,7 @@ $warning-light-orange: #f8b588;
 }
 
 %link {
-  @include h4;
+  @extend %H4;
 
   color: $Blue-500;
   line-height: 1.25rem;
@@ -60,8 +60,7 @@ $warning-light-orange: #f8b588;
 
 %small-link {
   @extend %link;
-
+  @extend %H6;
-  @include h6;
 }
 
 .button {

ui/app/components/ui/list-item/index.scss

@@ -5,7 +5,7 @@
   background: #fff;
   padding: 24px 16px;
 
-  @extend %font;
+  @extend %Paragraph;
 
   border-top: 1px solid $mercury;
   border-bottom: 1px solid $mercury;

ui/app/components/ui/popover/index.scss

@@ -33,10 +33,9 @@
       align-items: center;
       justify-content: space-between;
 
-      @extend %font;
+      @extend %H4;
 
       font-weight: bold;
-      font-size: 18px;
       line-height: 25px;
       padding-bottom: 8px;
 
@@ -52,10 +51,8 @@
     }
 
     &__subtitle {
-      @extend %font;
+      @extend %H6;
 
-      font-weight: normal;
-      font-size: 14px;
       line-height: 20px;
     }
 

ui/app/css/itcss/components/modal.scss

@@ -287,8 +287,7 @@
   }
 
   &__button {
-    @include paragraph;
+    @extend %Paragraph;
-
     @extend %button;
 
     width: 141px;

ui/app/css/itcss/settings/index.scss

@@ -1,2 +1 @@
 @import './variables';
-@import './typography';

ui/app/css/itcss/settings/typography.scss

@@ -1,84 +0,0 @@
-$fa-font-path: 'fonts/fontawesome';
-
-@import '../../../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome';
-@import '../../../../../node_modules/@fortawesome/fontawesome-free/scss/solid';
-@import '../../../../../node_modules/@fortawesome/fontawesome-free/scss/regular';
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype');
-}
-
-@mixin fontScale($weight: 400, $size: 1rem) {
-  font-weight: $weight;
-  font-size: $size;
-}
-
-@mixin h1($weight: 400, $size: 2.5rem) {
-  @include fontScale($weight, $size);
-}
-
-@mixin h2($weight: 400, $size: 2rem) {
-  @include fontScale($weight, $size);
-}
-
-@mixin h3($weight: 400, $size: 1.5rem) {
-  @include fontScale($weight, $size);
-}
-
-@mixin h4($weight: 400, $size: 1.125rem) {
-  @include fontScale($weight, $size);
-}
-
-@mixin h5($weight: 400, $size: 1rem) {
-  @include fontScale($weight, $size);
-}
-
-@mixin h6($weight: 400, $size: 0.875rem) {
-  @include fontScale($weight, $size);
-}
-
-@mixin h7($weight: 400, $size: 0.75rem) {
-  @include fontScale($weight, $size);
-}
-
-@mixin paragraph($weight: 400, $size: 1rem) {
-  @include fontScale($weight, $size);
-}

ui/app/css/itcss/settings/variables.scss

@@ -105,42 +105,6 @@ $break-small: 575px;
 $break-midpoint: 780px;
 $break-large: 576px;
 
-
-$primary-font-type: Roboto;
-
-
-// Font Sizes
-%h3 {
-  font-size: 1.5rem;
-  line-height: 2.125rem;
-  font-weight: 400;
-}
-
-%h4 {
-  font-size: 1.125rem;
-  line-height: 1.3125rem;
-  font-weight: 400;
-}
-
-%h5 {
-  font-size: 1rem;
-  line-height: 1.25rem;
-  font-weight: 400;
-}
-
-%h6 {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 400;
-}
-
-%h8 {
-  font-size: 0.75rem;
-  line-height: 1.0625rem;
-  font-weight: 400;
-}
-
-
 /*
   Spacing Variables
 */
@@ -176,36 +140,3 @@ $xxlarge-spacing: 64px;
     border-color: $Blue-500;
   }
 }
-
-// Font mixin
-
-%font {
-  font-family: Roboto;
-  font-style: normal;
-  font-weight: normal;
-  color: $Grey-800;
-}
-
-%font--bold {
-  @extend %font;
-
-  font-weight: bold;
-}
-
-%header--18 {
-  @extend %font;
-
-  font-size: 18px;
-}
-
-%header--24 {
-  @extend %font;
-
-  font-size: 24px;
-}
-
-%content-text {
-  @extend %font;
-
-  font-size: 14px;
-}

ui/app/css/variables/index.scss

@@ -1 +1,2 @@
 @import './colors.scss';
+@import './typography.scss';

ui/app/css/variables/typography.scss

@@ -0,0 +1,130 @@
+$fa-font-path: 'fonts/fontawesome';
+
+@import '../../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome';
+@import '../../../../node_modules/@fortawesome/fontawesome-free/scss/solid';
+@import '../../../../node_modules/@fortawesome/fontawesome-free/scss/regular';
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 100;
+  src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 500;
+  src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype');
+}
+
+$font-family: Roboto, Helvetica, Arial, sans-serif;
+
+// Typography
+%H1 {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 2.5rem;
+  font-family: $font-family;
+  line-height: 140%;
+}
+
+%H2 {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 2rem;
+  font-family: $font-family;
+  line-height: 140%;
+}
+
+%H3 {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 1.5rem;
+  font-family: $font-family;
+  line-height: 140%;
+}
+
+%H4 {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 1.125rem;
+  font-family: $font-family;
+  line-height: 140%;
+}
+
+%H5 {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 1rem;
+  font-family: $font-family;
+  line-height: 140%;
+}
+
+%H6 {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 0.875rem;
+  font-family: $font-family;
+}
+
+%Paragraph {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 1rem;
+  font-family: $font-family;
+  line-height: 140%;
+}
+
+%H7 {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 0.75rem;
+  font-family: $font-family;
+  line-height: 140%;
+}
+
+%H8 {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 0.625rem;
+  font-family: $font-family;
+  line-height: 140%;
+}
+
+%H9 {
+  font-style: normal;
+  font-weight: normal;
+  font-size: 0.5rem;
+  font-family: $font-family;
+  line-height: 140%;
+}
+

ui/app/pages/home/index.scss

@@ -43,10 +43,11 @@
     display: flex;
     flex-direction: column;
 
-    @extend %content-text;
+    @extend %H6;
 
     padding-left: 24px;
     padding-right: 24px;
+    color: $Grey-800;
 
     div {
       margin-bottom: 20px;

ui/app/pages/permissions-connect/choose-account/index.scss

@@ -24,13 +24,13 @@
 
 
   &__title {
-    @extend %header--18;
+    @extend %H4;
   }
 
   &__text,
   &__text-blue,
   &__text-grey {
-    @extend %content-text;
+    @extend %H6;
   }
 
   &__text-blue {
@@ -120,7 +120,7 @@
     }
 
     &__label {
-      @extend %content-text;
+      @extend %H6;
 
       color: $Black-100;
       text-overflow: ellipsis;
@@ -129,17 +129,14 @@
     }
 
     &__balance {
-      @extend %content-text;
+      @extend %H7;
 
-      font-size: 12px;
       color: $Grey-500;
     }
 
     &__last-connected {
-      @extend %content-text;
+      @extend %H8;
 
-      font-size: 10px;
-      line-height: 140.62%;
       display: flex;
       flex-direction: column;
       align-items: flex-end;

ui/app/pages/permissions-connect/index.scss

@@ -24,7 +24,7 @@
   }
 
   &__back {
-    @extend %content-text;
+    @extend %H6;
 
     color: $Grey-600;
     cursor: pointer;
@@ -35,9 +35,8 @@
   }
 
   &__page-count {
-    @extend %content-text;
+    @extend %H7;
 
-    font-size: 12px;
     color: #6a737d;
     grid-column: 2;
     justify-self: end;

ui/app/pages/permissions-connect/redirect/index.scss

@@ -4,7 +4,7 @@
   justify-content: center;
 
   &__result {
-    @extend %header--24;
+    @extend %H3;
 
     position: absolute;
     top: 30%;

ui/app/pages/send/send.scss

@@ -6,7 +6,7 @@
     padding: 14px 0 3px 0;
 
     .page-container__title {
-      @extend %h4;
+      @extend %H4;
 
       text-align: center;
     }
@@ -91,7 +91,7 @@
     }
 
     &__group-label {
-      @extend %h8;
+      @extend %H8;
 
       background-color: $Grey-000;
       color: $Grey-600;
@@ -136,7 +136,7 @@
       }
 
       &__subtitle {
-        @extend %h8;
+        @extend %H8;
 
         color: $Grey-500;
       }
@@ -186,7 +186,7 @@
     }
 
     &__input {
-      @extend %h6;
+      @extend %H6;
 
       flex: 1 1 auto;
       width: 0;