improve design system scss (#10193)

.prettierignore

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

ui/app/css/design-system/colors.scss

@@ -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,
+);

ui/app/css/design-system/typography.scss

@@ -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
-@mixin H1 {
-  font-style: normal;
-  font-weight: normal;
-  font-size: $font-size-h1;
+$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 {
+  @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');
 }

ui/app/helpers/constants/design-system.js

@@ -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',
+}