From df8eb494fe0228b634f234070f443a5c37557cb8 Mon Sep 17 00:00:00 2001 From: Brad Decker Date: Fri, 24 Jul 2020 11:26:45 -0500 Subject: [PATCH] Updates Typography Variables and styles. (#9017) Co-authored-by: Mark Stacey --- .../add-to-addressbook-modal/index.scss | 2 +- .../app/modals/new-account-modal/index.scss | 2 +- .../app/permission-page-container/index.scss | 4 +- .../app/permissions-connect-footer/index.scss | 3 +- .../app/permissions-connect-header/index.scss | 4 +- ui/app/components/ui/button/buttons.scss | 7 +- ui/app/components/ui/list-item/index.scss | 2 +- ui/app/components/ui/popover/index.scss | 7 +- ui/app/css/itcss/components/modal.scss | 3 +- ui/app/css/itcss/settings/index.scss | 1 - ui/app/css/itcss/settings/typography.scss | 84 ----------- ui/app/css/itcss/settings/variables.scss | 69 ---------- ui/app/css/variables/index.scss | 1 + ui/app/css/variables/typography.scss | 130 ++++++++++++++++++ ui/app/pages/home/index.scss | 3 +- .../choose-account/index.scss | 13 +- ui/app/pages/permissions-connect/index.scss | 5 +- .../permissions-connect/redirect/index.scss | 2 +- ui/app/pages/send/send.scss | 8 +- 19 files changed, 159 insertions(+), 191 deletions(-) delete mode 100644 ui/app/css/itcss/settings/typography.scss create mode 100644 ui/app/css/variables/typography.scss diff --git a/ui/app/components/app/modals/add-to-addressbook-modal/index.scss b/ui/app/components/app/modals/add-to-addressbook-modal/index.scss index b5e3b9ae7..64d0f7336 100644 --- a/ui/app/components/app/modals/add-to-addressbook-modal/index.scss +++ b/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; } } diff --git a/ui/app/components/app/modals/new-account-modal/index.scss b/ui/app/components/app/modals/new-account-modal/index.scss index 31dfff92d..97d6210b8 100644 --- a/ui/app/components/app/modals/new-account-modal/index.scss +++ b/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; diff --git a/ui/app/components/app/permission-page-container/index.scss b/ui/app/components/app/permission-page-container/index.scss index c26189e0c..458eb5b70 100644 --- a/ui/app/components/app/permission-page-container/index.scss +++ b/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; diff --git a/ui/app/components/app/permissions-connect-footer/index.scss b/ui/app/components/app/permissions-connect-footer/index.scss index ac6508417..229da218a 100644 --- a/ui/app/components/app/permissions-connect-footer/index.scss +++ b/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; diff --git a/ui/app/components/app/permissions-connect-header/index.scss b/ui/app/components/app/permissions-connect-header/index.scss index 1b29ec3e0..ca8d4c0e6 100644 --- a/ui/app/components/app/permissions-connect-header/index.scss +++ b/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; diff --git a/ui/app/components/ui/button/buttons.scss b/ui/app/components/ui/button/buttons.scss index 2fdc1da01..83f02f7e0 100644 --- a/ui/app/components/ui/button/buttons.scss +++ b/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; - - @include h6; + @extend %H6; } .button { diff --git a/ui/app/components/ui/list-item/index.scss b/ui/app/components/ui/list-item/index.scss index a26efcb4c..cc9edd87f 100644 --- a/ui/app/components/ui/list-item/index.scss +++ b/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; diff --git a/ui/app/components/ui/popover/index.scss b/ui/app/components/ui/popover/index.scss index 1c3d8744c..af3d7b279 100644 --- a/ui/app/components/ui/popover/index.scss +++ b/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; } diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss index 567e7a418..3e8044989 100644 --- a/ui/app/css/itcss/components/modal.scss +++ b/ui/app/css/itcss/components/modal.scss @@ -287,8 +287,7 @@ } &__button { - @include paragraph; - + @extend %Paragraph; @extend %button; width: 141px; diff --git a/ui/app/css/itcss/settings/index.scss b/ui/app/css/itcss/settings/index.scss index bbf79c80f..a7152a435 100644 --- a/ui/app/css/itcss/settings/index.scss +++ b/ui/app/css/itcss/settings/index.scss @@ -1,2 +1 @@ @import './variables'; -@import './typography'; diff --git a/ui/app/css/itcss/settings/typography.scss b/ui/app/css/itcss/settings/typography.scss deleted file mode 100644 index 27390b6ee..000000000 --- a/ui/app/css/itcss/settings/typography.scss +++ /dev/null @@ -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); -} diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 9a40ec9ff..fa6727ee2 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/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; -} diff --git a/ui/app/css/variables/index.scss b/ui/app/css/variables/index.scss index 7aa2d674f..8d79fd9c7 100644 --- a/ui/app/css/variables/index.scss +++ b/ui/app/css/variables/index.scss @@ -1 +1,2 @@ @import './colors.scss'; +@import './typography.scss'; diff --git a/ui/app/css/variables/typography.scss b/ui/app/css/variables/typography.scss new file mode 100644 index 000000000..12bc4fccb --- /dev/null +++ b/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%; +} + diff --git a/ui/app/pages/home/index.scss b/ui/app/pages/home/index.scss index 814223bf3..37911bdc6 100644 --- a/ui/app/pages/home/index.scss +++ b/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; diff --git a/ui/app/pages/permissions-connect/choose-account/index.scss b/ui/app/pages/permissions-connect/choose-account/index.scss index 4f71942c1..b79c9c923 100644 --- a/ui/app/pages/permissions-connect/choose-account/index.scss +++ b/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; diff --git a/ui/app/pages/permissions-connect/index.scss b/ui/app/pages/permissions-connect/index.scss index a5f9f1d2d..58263d9b4 100644 --- a/ui/app/pages/permissions-connect/index.scss +++ b/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; diff --git a/ui/app/pages/permissions-connect/redirect/index.scss b/ui/app/pages/permissions-connect/redirect/index.scss index b2cc68554..2151385ed 100644 --- a/ui/app/pages/permissions-connect/redirect/index.scss +++ b/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%; diff --git a/ui/app/pages/send/send.scss b/ui/app/pages/send/send.scss index e9b8cd265..eb64a4105 100644 --- a/ui/app/pages/send/send.scss +++ b/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;