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

Avoid repeating CSS color vars (#13464)

Browse Source
This commit is contained in:
David Walsh 2022-01-31 13:14:14 -06:00 committed by GitHub
parent dc217dd536
commit c1b5e18a01
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 155 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
ui/css/design-system/colors.scss
View File

@ -1,112 +1,3 @@
:root {
// These are the colors of the MetaMask design system
// Only design system colors should be added, no superfluous variables
--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;
// Greys
--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;
// Greens
--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;
// Reds
--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
--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
--Yellow-000: #fefae8; // Temporary placeholder
--Yellow-100: #fefcde;
--Yellow-500: #ffd33d;
// Black
--Black-100: #24292e;
// Primary colors
--primary-blue: var(--Blue-500);
--primary-orange: var(--Orange-500);
// Accents
--accent-yellow: var(--Yellow-500);
--accent-green: var(--Green-500);
--accent-red: var(--Red-500);
--accent-purple: #6f42c1;
--accent-pink: #ff45d8;
// Neutrals
--neutral-white: #fff;
--neutral-black: var(--Black-100);
--neutral-grey: var(--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-grey: #d6d9dc;
--ui-white: #fff;
--ui-1: #f2f3f4;
--ui-2: #d6d9dc;
--ui-3: #bbc0c5;
--ui-4: #6a737d;
--ui-5: #c4c4c4;
--mainnet: #29b6af;
--ropsten: #ff4a8d;
--kovan: #9064ff;
--rinkeby: #f6c343;
--goerli: #3099f2;
--localhost: #29b6af;
--flask-purple: #8b45b6;
}
$color-map: (
'ui-1': --ui-1,
'ui-2': --ui-2,

46
ui/css/design-system/deprecated-colors.scss
View File

@ -16,49 +16,3 @@ $tulip-tree: #ebb33f;
$dodger-blue: #3099f2;
$monzo: #d0021b;
$dusty-gray: #9b9b9b;
// Base Colors
:root {
--white: #fff;
--black: #000;
--orange: #ffa500;
--red: #f00;
--gray: #808080;
/*
Colors
http://chir.ag/projects/name-that-color
*/
--gallery: #efefef;
--wild-sand: #f6f6f6;
--dusty-gray: #9b9b9b;
--alto: #dedede;
--alabaster: #fafafa;
--silver-chalice: #aeaeae;
--tundora: #4d4d4d;
--nile-blue: #1b344d;
--scorpion: #5d5d5d;
--silver: #cdcdcd;
--caribbean-green: #02c9b1;
--monzo: #d0021b;
--crimson: #e91550;
--blue-lagoon: #038789;
--purple: #690496;
--tulip-tree: #ebb33f;
--malibu-blue: #b8cbd8;
--athens-grey: #e9edf0;
--geyser: #d2d8dd;
--manatee: #93949d;
--spindle: #c7ddec;
--mid-gray: #5b5d67;
--cape-cod: #38393a;
--dodger-blue: #3099f2;
--ecstasy: #f7861c;
--linen: #fdf4f4;
--oslo-gray: #8c8e94;
--polar: #fafcfe;
--blizzard-blue: #bfdef3;
--mischka: #dddee9;
--web-orange: #f2a202;
--mercury: #e5e5e5;
}

1
ui/css/index.scss
View File

@ -6,6 +6,7 @@
*/
@import './reset.scss';
@import './design-system/index';
@import './utilities/colors.scss';
@import './base-styles.scss';
@import '../components/app/app-components';
@import '../components/ui/ui-components';

154
ui/css/utilities/colors.scss Normal file
View File

@ -0,0 +1,154 @@
:root {
// These are the colors of the MetaMask design system
// Only design system colors should be added, no superfluous variables
--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;
// Greys
--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;
// Greens
--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;
// Reds
--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
--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
--Yellow-000: #fefae8; // Temporary placeholder
--Yellow-100: #fefcde;
--Yellow-500: #ffd33d;
// Black
--Black-100: #24292e;
// Primary colors
--primary-blue: var(--Blue-500);
--primary-orange: var(--Orange-500);
// Accents
--accent-yellow: var(--Yellow-500);
--accent-green: var(--Green-500);
--accent-red: var(--Red-500);
--accent-purple: #6f42c1;
--accent-pink: #ff45d8;
// Neutrals
--neutral-white: #fff;
--neutral-black: var(--Black-100);
--neutral-grey: var(--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-grey: #d6d9dc;
--ui-white: #fff;
--ui-1: #f2f3f4;
--ui-2: #d6d9dc;
--ui-3: #bbc0c5;
--ui-4: #6a737d;
--ui-5: #c4c4c4;
--mainnet: #29b6af;
--ropsten: #ff4a8d;
--kovan: #9064ff;
--rinkeby: #f6c343;
--goerli: #3099f2;
--localhost: #29b6af;
--flask-purple: #8b45b6;
}
/* Deprecated colors */
:root {
--white: #fff;
--black: #000;
--orange: #ffa500;
--red: #f00;
--gray: #808080;
/*
Colors
http://chir.ag/projects/name-that-color
*/
--gallery: #efefef;
--wild-sand: #f6f6f6;
--dusty-gray: #9b9b9b;
--alto: #dedede;
--alabaster: #fafafa;
--silver-chalice: #aeaeae;
--tundora: #4d4d4d;
--nile-blue: #1b344d;
--scorpion: #5d5d5d;
--silver: #cdcdcd;
--caribbean-green: #02c9b1;
--monzo: #d0021b;
--crimson: #e91550;
--blue-lagoon: #038789;
--purple: #690496;
--tulip-tree: #ebb33f;
--malibu-blue: #b8cbd8;
--athens-grey: #e9edf0;
--geyser: #d2d8dd;
--manatee: #93949d;
--spindle: #c7ddec;
--mid-gray: #5b5d67;
--cape-cod: #38393a;
--dodger-blue: #3099f2;
--ecstasy: #f7861c;
--linen: #fdf4f4;
--oslo-gray: #8c8e94;
--polar: #fafcfe;
--blizzard-blue: #bfdef3;
--mischka: #dddee9;
--web-orange: #f2a202;
--mercury: #e5e5e5;
}