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

improve design system scss (#10193)

Browse Source
This commit is contained in:
Brad Decker 2021-01-19 10:30:29 -06:00 committed by GitHub
parent 1007f4b6f2
commit 4f66af606e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 151 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.prettierignore
View File

@ -7,3 +7,4 @@ app/vendor/**
.nyc_output/**
.vscode/**
test/e2e/send-eth-with-private-key-test/**
*.scss

63
ui/app/css/design-system/colors.scss
View File

@ -74,3 +74,66 @@ $accent-pink: #ff45d8;
$neutral-white: #fff;
$neutral-black: $Black-100;
$neutral-grey: $Grey-500;
// Everything below this line is part of the new color system
$primary-1: #037dd6;
$primary-2: #eaf6ff;
$primary-3: #0260a4;
$secondary-1: #f66a0a;
$secondary-2: #fef5ef;
$secondary-3: #c65507;
$error-1: #d73a49;
$error-2: #fcf2f3;
$error-3: #b92534;
$alert-1: #ffd33d;
$alert-2: #fefcde;
$alert-3: #f8c000;
$success-1: #4cd964;
$success-2: #caf4d1;
$success-3: #219e37;
$ui-black: #24292e;
$ui-white: #fff;
$ui-1: #f2f3f4;
$ui-2: #d6d9dc;
$ui-3: #bbc0c5;
$ui-4: #6a737d;
$mainnet: #29b6af;
$ropsten: #ff4a8d;
$kovan: #9064ff;
$rinkeby: #f6c343;
$goerli: #3099f2;
$color-map: (
'ui-1': $ui-1,
'ui-2': $ui-2,
'ui-3': $ui-3,
'ui-4': $ui-4,
'white': $ui-white,
'black': $ui-black,
'primary-1': $primary-1,
'primary-2': $primary-2,
'primary-3': $primary-3,
'secondary-1': $secondary-1,
'secondary-2': $secondary-2,
'secondary-3': $secondary-3,
'alert-1': $alert-1,
'alert-2': $alert-2,
'alert-3': $alert-3,
'error-1': $error-1,
'error-2': $error-2,
'error-3': $error-3,
'success-1': $success-1,
'success-2': $success-2,
'success-3': $success-3,
'mainnet': $mainnet,
'ropsten': $ropsten,
'kovan': $kovan,
'rinkeby': $rinkeby,
'goerli': $goerli,
);

101
ui/app/css/design-system/typography.scss
View File

@ -69,89 +69,80 @@ $fa-font-path: 'fonts/fontawesome';
$font-family: Euclid, Roboto, Helvetica, Arial, sans-serif;
$font-size-h1: 2.5rem;
$font-size-h2: 2rem;
$font-size-h3: 1.5rem;
$font-size-h4: 1.125rem;
$font-size-h5: 1rem;
$font-size-h6: 0.875rem;
$font-size-paragraph: 1rem;
$font-size-h7: 0.75rem;
$font-size-h8: 0.625rem;
$font-size-h9: 0.5rem;
$typography-variants: (
'h1': 2.5rem,
'h2': 2rem,
'h3': 1.5rem,
'h4': 1.125rem,
'h5': 1rem,
'h6': 0.875rem,
'paragraph': 1rem,
'h7': 0.75rem,
'h8': 0.625rem,
'h9': 0.5rem,
);
$typography-font-weights: (
'bold': 700,
'normal': 400,
);
$font-size-h1: map-get($typography-variants, 'h1');
$font-size-h2: map-get($typography-variants, 'h2');
$font-size-h3: map-get($typography-variants, 'h3');
$font-size-h4: map-get($typography-variants, 'h4');
$font-size-h5: map-get($typography-variants, 'h5');
$font-size-h6: map-get($typography-variants, 'h6');
$font-size-paragraph: map-get($typography-variants, 'paragraph');
$font-size-h7: map-get($typography-variants, 'h7');
$font-size-h8: map-get($typography-variants, 'h8');
$font-size-h9: map-get($typography-variants, 'h9');
@mixin typography($variant) {
font-size: map-get($typography-variants, $variant);
font-family: $font-family;
line-height: 140%;
font-style: normal;
font-weight: normal;
}
// Typography
@mixin H1 {
font-style: normal;
font-weight: normal;
font-size: $font-size-h1;
font-family: $font-family;
line-height: 140%;
@include typography('h1');
}
@mixin H2 {
font-style: normal;
font-weight: normal;
font-size: $font-size-h2;
font-family: $font-family;
line-height: 140%;
@include typography('h2');
}
@mixin H3 {
font-style: normal;
font-weight: normal;
font-size: $font-size-h3;
font-family: $font-family;
line-height: 140%;
@include typography('h3');
}
@mixin H4 {
font-style: normal;
font-weight: normal;
font-size: $font-size-h4;
font-family: $font-family;
line-height: 140%;
@include typography('h4');
}
@mixin H5 {
font-style: normal;
font-weight: normal;
font-size: $font-size-h5;
line-height: 140%;
@include typography('h5');
}
@mixin H6 {
font-style: normal;
font-weight: normal;
font-size: $font-size-h6; // 14px @default
line-height: 140%;
@include typography('h6');
}
@mixin Paragraph {
font-style: normal;
font-weight: normal;
font-size: $font-size-paragraph;
line-height: 140%;
@include typography('paragraph');
}
@mixin H7 {
font-style: normal;
font-weight: normal;
font-size: $font-size-h7;
line-height: 140%;
@include typography('h7');
}
@mixin H8 {
font-style: normal;
font-weight: normal;
font-size: $font-size-h8;
line-height: 140%;
@include typography('h8');
}
@mixin H9 {
font-style: normal;
font-weight: normal;
font-size: $font-size-h9;
line-height: 140%;
@include typography('h9');
}

41
ui/app/helpers/constants/design-system.js Normal file
View File

@ -0,0 +1,41 @@
export const COLORS = {
UI1: 'ui-1',
UI2: 'ui-2',
UI3: 'ui-3',
UI4: 'ui-4',
BLACK: 'black',
WHITE: 'white',
PRIMARY1: 'primary-1',
PRIMARY2: 'primary-2',
PRIMARY3: 'primary-3',
SECONDARY1: 'secondary-1',
SECONDARY2: 'secondary-2',
SECONDARY3: 'secondary-3',
SUCCESS1: 'success-1',
SUCCESS2: 'success-2',
SUCCESS3: 'success-3',
ERROR1: 'error1',
ERROR2: 'error2',
ERROR3: 'error3',
ALERT1: 'alert-1',
ALERT2: 'alert-2',
ALERT3: 'alert-3',
MAINNET: 'mainnet',
ROPSTEN: 'ropsten',
KOVAN: 'kovan',
RINKEBY: 'rinkeby',
GOERLI: 'goerli',
}
export const TYPOGRAPHY = {
H1: 'h1',
H2: 'h2',
H3: 'h3',
H4: 'h4',
H5: 'h5',
H6: 'h6',
H7: 'h7',
H8: 'h8',
H9: 'h9',
Paragraph: 'paragraph',
}