From 9bf748eb447c59868359c721c475098ea53201e2 Mon Sep 17 00:00:00 2001 From: Brad Decker Date: Fri, 17 Jul 2020 11:13:45 -0500 Subject: [PATCH] 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 | 13 +++- ui/app/css/itcss/settings/variables.scss | 55 ----------------- ui/app/css/variables/colors.scss | 75 ++++++++++++++++++++++++ ui/app/css/variables/index.scss | 1 + 4 files changed, 88 insertions(+), 56 deletions(-) create mode 100644 ui/app/css/variables/colors.scss create mode 100644 ui/app/css/variables/index.scss diff --git a/ui/app/css/index.scss b/ui/app/css/index.scss index 0df12d3cb..d757a2374 100644 --- a/ui/app/css/index.scss +++ b/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'; diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 1910c39d0..b658e490c 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/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 { diff --git a/ui/app/css/variables/colors.scss b/ui/app/css/variables/colors.scss new file mode 100644 index 000000000..eb0a1b929 --- /dev/null +++ b/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; diff --git a/ui/app/css/variables/index.scss b/ui/app/css/variables/index.scss new file mode 100644 index 000000000..7aa2d674f --- /dev/null +++ b/ui/app/css/variables/index.scss @@ -0,0 +1 @@ +@import './colors.scss';