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

Define Design System Colors (#9007)

Browse Source 
Adds design system colors to the css/variables/colors file and deprecates
old colors in the deprecated itcss/variables folder
This commit is contained in:
Brad Decker 2020-07-17 11:13:45 -05:00 committed by GitHub
parent e8b33fb7c8
commit 9bf748eb44
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 88 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ui/app/css/index.scss
View File

@ -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 ITCSS
http://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528 http://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528
https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/ 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/settings/index';
@import './itcss/tools/index'; @import './itcss/tools/index';
@import './itcss/generic/index'; @import './itcss/generic/index';
@import './itcss/objects/index'; @import './itcss/objects/index';
@import './itcss/components/index'; @import './itcss/components/index';
@import './itcss/trumps/index'; @import './itcss/trumps/index';
// Other imports
@import '../../../node_modules/react-select/dist/react-select'; @import '../../../node_modules/react-select/dist/react-select';

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

@ -13,17 +13,8 @@ $gray: #808080;
Colors Colors
http://chir.ag/projects/name-that-color 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; $gallery: #efefef;
$alabaster: #f7f7f7;
$shark: #22232c;
$wild-sand: #f6f6f6; $wild-sand: #f6f6f6;
$white: #fff;
$dusty-gray: #9b9b9b; $dusty-gray: #9b9b9b;
$alto: #dedede; $alto: #dedede;
$alabaster: #fafafa; $alabaster: #fafafa;
@ -42,19 +33,12 @@ $purple: #690496;
$tulip-tree: #ebb33f; $tulip-tree: #ebb33f;
$malibu-blue: #7ac9fd; $malibu-blue: #7ac9fd;
$athens-grey: #e9edf0; $athens-grey: #e9edf0;
$jaffa: #f28930;
$geyser: #d2d8dd; $geyser: #d2d8dd;
$manatee: #93949d; $manatee: #93949d;
$spindle: #c7ddec; $spindle: #c7ddec;
$mid-gray: #5b5d67; $mid-gray: #5b5d67;
$cape-cod: #38393a; $cape-cod: #38393a;
$onahau: #d1edff;
$java: #29b6af;
$wild-strawberry: #ff4a8d;
$cornflower-blue: #7057ff;
$saffron: #f6c343;
$dodger-blue: #3099f2; $dodger-blue: #3099f2;
$zumthor: #edf7ff;
$ecstasy: #f7861c; $ecstasy: #f7861c;
$linen: #fdf4f4; $linen: #fdf4f4;
$oslo-gray: #8c8e94; $oslo-gray: #8c8e94;
@ -63,7 +47,6 @@ $blizzard-blue: #bfdef3;
$mischka: #dddee9; $mischka: #dddee9;
$web-orange: #f2a202; $web-orange: #f2a202;
$mercury: #e5e5e5; $mercury: #e5e5e5;
$lochmara: #037dd6;
/* /*
notification and error message colors notification and error message colors
@ -139,44 +122,6 @@ $break-large: 576px;
$primary-font-type: Roboto; $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 // Font Sizes
%h3 { %h3 {

75
ui/app/css/variables/colors.scss Normal file
View File

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

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

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