m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Updates Typography Variables and styles. (#9017)

Browse Source 
Co-authored-by: Mark Stacey <markjstacey@gmail.com>
This commit is contained in:
Brad Decker 2020-07-24 11:26:45 -05:00 committed by GitHub
parent 1747f91bf1
commit df8eb494fe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 159 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

4
ui/app/components/app/permission-page-container/index.scss
View File

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

3
ui/app/components/app/permissions-connect-footer/index.scss
View File

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

4
ui/app/components/app/permissions-connect-header/index.scss
View File

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

7
ui/app/components/ui/button/buttons.scss
View File

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

2
ui/app/components/ui/list-item/index.scss
View File

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

7
ui/app/components/ui/popover/index.scss
View File

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

3
ui/app/css/itcss/components/modal.scss
View File

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

1
ui/app/css/itcss/settings/index.scss
View File

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

84
ui/app/css/itcss/settings/typography.scss
View File

@ -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);
}

69
ui/app/css/itcss/settings/variables.scss
View File

@ -105,42 +105,6 @@ $break-small: 575px;
$break-midpoint: 780px; $break-midpoint: 780px;
$break-large: 576px; $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 Spacing Variables
*/ */
@ -176,36 +140,3 @@ $xxlarge-spacing: 64px;
border-color: $Blue-500; 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;
}

1
ui/app/css/variables/index.scss
View File

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

130
ui/app/css/variables/typography.scss Normal file
View File

@ -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%;
}

3
ui/app/pages/home/index.scss
View File

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

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

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

5
ui/app/pages/permissions-connect/index.scss
View File

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

2
ui/app/pages/permissions-connect/redirect/index.scss
View File

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

8
ui/app/pages/send/send.scss
View File

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