Define Design System Colors (#9007)

Adds design system colors to the css/variables/colors file and deprecates
old colors in the deprecated itcss/variables folder

ui/app/css/index.scss

@@ -1,14 +1,25 @@
+/*
+  MetaMask design system imports
+  The variables declared here should take precedence.
+  They are included first because they will be used to replace bad variable names in itcss
+  prior to it being fully removed from the system.
+*/
+@import './variables/index';
+
 /*
   ITCSS
 
   http://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528
   https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
- */
 
+  DEPRECATED: This CSS architecture is deprecated. The following imports will be removed
+  overtime.
+ */
 @import './itcss/settings/index';
 @import './itcss/tools/index';
 @import './itcss/generic/index';
 @import './itcss/objects/index';
 @import './itcss/components/index';
 @import './itcss/trumps/index';
+// Other imports
 @import '../../../node_modules/react-select/dist/react-select';

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

@@ -13,17 +13,8 @@ $gray: #808080;
   Colors
   http://chir.ag/projects/name-that-color
  */
-$white-linen: #faf6f0; // formerly 'faint orange (textfield shades)'
-$rajah: #f5c26d; // formerly 'light orange (button shades)'
-$buttercup: #f5a623; // formerly 'dark orange (text)'
-$tundora: #4a4a4a; // formerly 'borders/font/any gray'
-$flamingo: #f56821;
-$valencia: #d73a49;
 $gallery: #efefef;
-$alabaster: #f7f7f7;
-$shark: #22232c;
 $wild-sand: #f6f6f6;
-$white: #fff;
 $dusty-gray: #9b9b9b;
 $alto: #dedede;
 $alabaster: #fafafa;
@@ -42,19 +33,12 @@ $purple: #690496;
 $tulip-tree: #ebb33f;
 $malibu-blue: #7ac9fd;
 $athens-grey: #e9edf0;
-$jaffa: #f28930;
 $geyser: #d2d8dd;
 $manatee: #93949d;
 $spindle: #c7ddec;
 $mid-gray: #5b5d67;
 $cape-cod: #38393a;
-$onahau: #d1edff;
-$java: #29b6af;
-$wild-strawberry: #ff4a8d;
-$cornflower-blue: #7057ff;
-$saffron: #f6c343;
 $dodger-blue: #3099f2;
-$zumthor: #edf7ff;
 $ecstasy: #f7861c;
 $linen: #fdf4f4;
 $oslo-gray: #8c8e94;
@@ -63,7 +47,6 @@ $blizzard-blue: #bfdef3;
 $mischka: #dddee9;
 $web-orange: #f2a202;
 $mercury: #e5e5e5;
-$lochmara: #037dd6;
 
 /*
   notification and error message colors
@@ -139,44 +122,6 @@ $break-large: 576px;
 
 $primary-font-type: Roboto;
 
-$Blue-000: #eaf6ff;
-$Blue-100: #a7d9fe;
-$Blue-200: #75c4fd;
-$Blue-300: #43aefc;
-$Blue-400: #1098fc;
-$Blue-500: #037dd6;
-$Blue-600: #0260a4;
-$Blue-700: #024272;
-$Blue-800: #01253f;
-$Blue-900: #00080d;
-
-$Grey-000: #f2f3f4;
-$Grey-100: #d6d9dc;
-$Grey-200: #bbc0c5;
-$Grey-300: #9fa6ae;
-$Grey-400: #848c96;
-$Grey-200: #bbc0c5;
-$Grey-500: #6a737d;
-$Grey-600: #535a61;
-$Grey-800: #24272a;
-
-$Red-000: #fcf2f3;
-$Red-100: #f7d5d8;
-$Red-200: #f1b9be;
-$Red-300: #e88f97;
-$Red-400: #e06470;
-$Red-500: #d73a49;
-$Red-600: #b92534;
-$Red-700: #8e1d28;
-$Red-800: #64141c;
-$Red-900: #3a0c10;
-
-$Orange-000: #fef5ef;
-$Orange-300: #faa66c;
-$Orange-600: #c65507;
-$Orange-500: #f66a0a;
-
-$Black-100: #24292e;
 
 // Font Sizes
 %h3 {

ui/app/css/variables/colors.scss

@@ -0,0 +1,75 @@
+// These are the colors of the MetaMask design system
+// Only design system colors should be added, no superfulous variables
+// See https://bit.ly/32mnoja (link to figma design system)
+$Blue-000: #eaf6ff;
+$Blue-100: #a7d9fe;
+$Blue-200: #75c4fd;
+$Blue-300: #43aefc;
+$Blue-400: #1098fc;
+$Blue-500: #037dd6;
+$Blue-600: #0260a4;
+$Blue-700: #024272;
+$Blue-800: #01253f;
+$Blue-900: #00080d;
+
+$Grey-000: #f2f3f4;
+$Grey-100: #d6d9dc;
+$Grey-200: #bbc0c5;
+$Grey-300: #9fa6ae;
+$Grey-400: #848c96;
+$Grey-500: #6a737d;
+$Grey-600: #535a61;
+$Grey-700: #3b4046;
+$Grey-800: #24272a;
+$Grey-900: #141618;
+
+$Green-000: #f3fcf5;
+$Green-100: #d6ffdf;
+$Green-200: #afecbd;
+$Green-300: #86e29b;
+$Green-400: #5dd879;
+$Green-500: #28a745;
+$Green-600: #1e7e34;
+$Green-700: #145523;
+$Green-800: #0a2c12;
+$Green-900: #041007;
+
+$Red-000: #fcf2f3;
+$Red-100: #f7d5d8;
+$Red-200: #f1b9be;
+$Red-300: #e88f97;
+$Red-400: #e06470;
+$Red-500: #d73a49;
+$Red-600: #b92534;
+$Red-700: #8e1d28;
+$Red-800: #64141c;
+$Red-900: #3a0c10;
+
+$Orange-000: #fef5ef;
+$Orange-100: #fde2cf;
+$Orange-200: #fbc49d;
+$Orange-300: #faa66c;
+$Orange-400: #f8883b;
+$Orange-500: #f66a0a;
+$Orange-600: #c65507;
+$Orange-700: #954005;
+$Orange-800: #632b04;
+$Orange-900: #321602;
+
+$Yellow-100: #fefcde;
+$Yellow-500: #ffd33d;
+
+$Black-100: #24292e;
+
+$primary-blue: $Blue-500;
+$primary-orange: $Orange-500;
+
+$accent-yellow: $Yellow-500;
+$accent-green: $Green-500;
+$accent-red: $Red-500;
+$accent-purple: #6f42c1;
+$accent-pink: #ff45d8;
+
+$neutral-white: #fff;
+$neutral-black: $Black-100;
+$neutral-grey: $Grey-500;

ui/app/css/variables/index.scss

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