Updating primary, error and info colors to meet AA accessibility stan…

…dards for light mode (#255) * Updating all #037DD6 to #0376C9 * Updating all #D73A49 to #D73847 * Reverting all deprecated tags to uppercase
MetaMask · Nov 30, 2022 · 0f72dcf · 0f72dcf
1 parent 40dfbc3
commit 0f72dcf
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 65 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,6 @@
 {
   "workbench.colorCustomizations": {
-    "titleBar.activeBackground": "#037DD6",
+    "titleBar.activeBackground": "#0376C9",
     "titleBar.activeForeground": "#ffffff"
   }
 }
diff --git a/src/css/design-tokens.css b/src/css/design-tokens.css
@@ -26,7 +26,7 @@
   --brand-colors-blue-blue200: #75c4fd;
   --brand-colors-blue-blue300: #43aefc;
   --brand-colors-blue-blue400: #1098fc;
-  --brand-colors-blue-blue500: #037dd6;
+  --brand-colors-blue-blue500: #0376c9;
   --brand-colors-blue-blue600: #0260a4;
   --brand-colors-blue-blue700: #024272;
   --brand-colors-blue-blue800: #01253f;
@@ -56,7 +56,7 @@
   --brand-colors-red-red200: #f1b9be;
   --brand-colors-red-red300: #e88f97;
   --brand-colors-red-red400: #e06470;
-  --brand-colors-red-red500: #d73a49;
+  --brand-colors-red-red500: #d73847;
   --brand-colors-red-red600: #b92534;
   --brand-colors-red-red700: #8e1d28;
   --brand-colors-red-red800: #64141c;
@@ -262,21 +262,21 @@
   --color-shadow-default: #0000001a;
   --color-primary-default: var(--brand-colors-blue-blue500);
   --color-primary-alternative: var(--brand-colors-blue-blue600);
-  --color-primary-muted: #037dd619;
+  --color-primary-muted: #0376c919;
   --color-primary-inverse: var(--brand-colors-white-white010);
-  --color-primary-disabled: #037dd680;
-  --color-primary-shadow: #037dd633;
+  --color-primary-disabled: #0376c980;
+  --color-primary-shadow: #0376c933;
   --color-secondary-default: var(--brand-colors-orange-orange500);
   --color-secondary-alternative: var(--brand-colors-orange-orange600);
   --color-secondary-muted: #f66a0a19;
   --color-secondary-inverse: var(--brand-colors-white-white010);
   --color-secondary-disabled: #f66a0a80;
   --color-error-default: var(--brand-colors-red-red500);
   --color-error-alternative: var(--brand-colors-red-red600);
-  --color-error-muted: #d73a4919;
+  --color-error-muted: #d7384719;
   --color-error-inverse: var(--brand-colors-white-white010);
-  --color-error-disabled: #d73a4980;
-  --color-error-shadow: #d73a4966;
+  --color-error-disabled: #d7384780;
+  --color-error-shadow: #d7384766;
   --color-warning-default: var(--brand-colors-orange-orange500);
   --color-warning-alternative: var(--brand-colors-yellow-yellow600);
   --color-warning-muted: #ffd33d19;
@@ -289,9 +289,9 @@
   --color-success-disabled: #28a74580;
   --color-info-default: var(--brand-colors-blue-blue500);
   --color-info-alternative: var(--brand-colors-blue-blue600);
-  --color-info-muted: #037dd619;
+  --color-info-muted: #0376c919;
   --color-info-inverse: var(--brand-colors-white-white010);
-  --color-info-disabled: #037dd680;
+  --color-info-disabled: #0376c980;
   --color-network-goerli-default: var(--brand-colors-blue-blue400);
   --color-network-goerli-inverse: var(--brand-colors-white-white010);
   --color-network-localhost-default: var(--brand-colors-grey-grey200);
@@ -338,18 +338,18 @@
   --color-primary-muted: #1098fc26;
   --color-primary-inverse: var(--brand-colors-white-white010);
   --color-primary-disabled: #1098fc80;
-  --color-primary-shadow: #037dd633;
+  --color-primary-shadow: #0376c933;
   --color-secondary-default: var(--brand-colors-orange-orange400);
   --color-secondary-alternative: var(--brand-colors-orange-orange300);
   --color-secondary-muted: #f8883b26;
   --color-secondary-inverse: var(--brand-colors-white-white010);
   --color-secondary-disabled: #f8883b80;
   --color-error-default: var(--brand-colors-red-red500);
   --color-error-alternative: var(--brand-colors-red-red400);
-  --color-error-muted: #d73a4926;
+  --color-error-muted: #d7384726;
   --color-error-inverse: var(--brand-colors-white-white010);
-  --color-error-disabled: #d73a4980;
-  --color-error-shadow: #d73a4966;
+  --color-error-disabled: #d7384780;
+  --color-error-shadow: #d7384766;
   --color-warning-default: var(--brand-colors-yellow-yellow500);
   --color-warning-alternative: var(--brand-colors-yellow-yellow400);
   --color-warning-muted: #ffd33d26;
@@ -364,5 +364,5 @@
   --color-info-alternative: var(--brand-colors-blue-blue300);
   --color-info-muted: #1098fc26;
   --color-info-inverse: var(--brand-colors-white-white010);
-  --color-info-disabled: #037dd680;
+  --color-info-disabled: #0376c980;
 }
diff --git a/src/figma/tokens.json b/src/figma/tokens.json
@@ -109,8 +109,8 @@
           "type": "color"
         },
         "blue500": {
-          "value": "#037DD6",
-          "description": "(HEX: #037DD6)",
+          "value": "#0376C9",
+          "description": "(HEX: #0376C9)",
           "type": "color"
         },
         "blue600": {
@@ -265,8 +265,8 @@
           "type": "color"
         },
         "red500": {
-          "value": "#D73A49",
-          "description": "(HEX: #D73A49)",
+          "value": "#D73847",
+          "description": "(HEX: #D73847)",
           "type": "color"
         },
         "red600": {
@@ -840,8 +840,8 @@
       },
       "primary": {
         "default": {
-          "value": "#037DD6",
-          "description": "(blue500: #037DD6) For primary user action related elements",
+          "value": "#0376C9",
+          "description": "(blue500: #0376C9) For primary user action related elements",
           "type": "color"
         },
         "alternative": {
@@ -850,8 +850,8 @@
           "type": "color"
         },
         "muted": {
-          "value": "#037DD619",
-          "description": "(blue500: #037DD6 10% opacity) For lowest contrast background used in primary elements",
+          "value": "#0376C919",
+          "description": "(blue500: #0376C9 10% opacity) For lowest contrast background used in primary elements",
           "type": "color"
         },
         "inverse": {
@@ -860,8 +860,8 @@
           "type": "color"
         },
         "disabled": {
-          "value": "#037DD680",
-          "description": "(blue500: #037DD6 50% opacity) [DEPRECATED] primary.disabled should be used for all disabled primary action components such as buttons or links",
+          "value": "#0376C980",
+          "description": "(blue500: #0376C9 50% opacity) [DEPRECATED] primary.disabled should be used for all disabled primary action components such as buttons or links",
           "type": "color"
         }
       },
@@ -894,8 +894,8 @@
       },
       "error": {
         "default": {
-          "value": "#D73A49",
-          "description": "(red500: #D73A49) For high-level alert danger/critical elements. Used for text, background, icon or border",
+          "value": "#D73847",
+          "description": "(red500: #D73847) For high-level alert danger/critical elements. Used for text, background, icon or border",
           "type": "color"
         },
         "alternative": {
@@ -904,8 +904,8 @@
           "type": "color"
         },
         "muted": {
-          "value": "#D73A4919",
-          "description": "(red500: #D73A49 10% opacity) For lowest contrast background used in high-level alert danger/critical elements. (Example: notification background)",
+          "value": "#D7384719",
+          "description": "(red500: #D73847 10% opacity) For lowest contrast background used in high-level alert danger/critical elements. (Example: notification background)",
           "type": "color"
         },
         "inverse": {
@@ -914,8 +914,8 @@
           "type": "color"
         },
         "disabled": {
-          "value": "#D73A4980",
-          "description": "(red500: #D73A49 50% opacity) [DEPRECATED] error.disabled should be used for all disabled critical action components such as buttons",
+          "value": "#D7384780",
+          "description": "(red500: #D73847 50% opacity) [DEPRECATED] error.disabled should be used for all disabled critical action components such as buttons",
           "type": "color"
         }
       },
@@ -975,8 +975,8 @@
       },
       "info": {
         "default": {
-          "value": "#037DD6",
-          "description": "(blue500: #037DD6) For informational semantic elements. Used for text, background, icon or border",
+          "value": "#0376C9",
+          "description": "(blue500: #0376C9) For informational semantic elements. Used for text, background, icon or border",
           "type": "color"
         },
         "alternative": {
@@ -985,8 +985,8 @@
           "type": "color"
         },
         "muted": {
-          "value": "#037DD619",
-          "description": "(blue500: #037DD6 10% opacity) For lowest contrast background used in informational semantic. (Example: notification background)",
+          "value": "#0376C919",
+          "description": "(blue500: #0376C9 10% opacity) For lowest contrast background used in informational semantic. (Example: notification background)",
           "type": "color"
         },
         "inverse": {
@@ -995,8 +995,8 @@
           "type": "color"
         },
         "disabled": {
-          "value": "#037DD680",
-          "description": "(blue500: #037DD6 50% opacity) [DEPRECATED] primary.disabled should be used for all disabled primary action components such as buttons or links",
+          "value": "#0376C980",
+          "description": "(blue500: #0376C9 50% opacity) [DEPRECATED] primary.disabled should be used for all disabled primary action components such as buttons or links",
           "type": "color"
         }
       },
@@ -1106,7 +1106,7 @@
           "y": "2",
           "blur": "8",
           "spread": "0",
-          "color": "#037DD633",
+          "color": "#0376C933",
           "type": "dropShadow"
         },
         "type": "boxShadow",
@@ -1118,7 +1118,7 @@
           "y": "2",
           "blur": "8",
           "spread": "0",
-          "color": "#D73A4966",
+          "color": "#D7384766",
           "type": "dropShadow"
         },
         "type": "boxShadow",
@@ -1279,8 +1279,8 @@
       },
       "error": {
         "default": {
-          "value": "#D73A49",
-          "description": "(red500: #D73A49) For high-level alert danger/critical elements. Used for text, background, icon or border",
+          "value": "#D73847",
+          "description": "(red500: #D73847) For high-level alert danger/critical elements. Used for text, background, icon or border",
           "type": "color"
         },
         "alternative": {
@@ -1289,8 +1289,8 @@
           "type": "color"
         },
         "muted": {
-          "value": "#D73A4926",
-          "description": "(red500: #D73A49 15% opacity) For lowest contrast background used in high-level alert danger/critical elements. (Example: notification background)",
+          "value": "#D7384726",
+          "description": "(red500: #D73847 15% opacity) For lowest contrast background used in high-level alert danger/critical elements. (Example: notification background)",
           "type": "color"
         },
         "inverse": {
@@ -1299,8 +1299,8 @@
           "type": "color"
         },
         "disabled": {
-          "value": "#D73A4980",
-          "description": "(red500: #D73A49 50% opacity) [DEPRECATED] error.disabled should be used for all disabled critical action components such as buttons",
+          "value": "#D7384780",
+          "description": "(red500: #D73847 50% opacity) [DEPRECATED] error.disabled should be used for all disabled critical action components such as buttons",
           "type": "color"
         }
       },
@@ -1380,8 +1380,8 @@
           "type": "color"
         },
         "disabled": {
-          "value": "#037DD680",
-          "description": "(blue500: #037DD6 50% opacity) [DEPRECATED] info.disabled should be used for all disabled info action components such as buttons or links",
+          "value": "#0376C980",
+          "description": "(blue500: #0376C9 50% opacity) [DEPRECATED] info.disabled should be used for all disabled info action components such as buttons or links",
           "type": "color"
         }
       },
@@ -1494,7 +1494,7 @@
       },
       "error": {
         "value": {
-          "color": "#D73A4966",
+          "color": "#D7384766",
           "type": "dropShadow",
           "x": "0",
           "y": "7",

diff --git a/src/js/themes/darkTheme/colors.ts b/src/js/themes/darkTheme/colors.ts
@@ -51,12 +51,12 @@ export const colors: ThemeColors = {
     disabled: '#F8883B80',
   },
   error: {
-    default: '#D73A49',
+    default: '#D73847',
     alternative: '#E06470',
-    muted: '#D73A4926',
+    muted: '#D7384726',
     inverse: '#FCFCFC',
-    disabled: '#D73A4980',
-    shadow: '#D73A4966',
+    disabled: '#D7384780',
+    shadow: '#D7384766',
   },
   warning: {
     default: '#FFD33D',
@@ -77,7 +77,7 @@ export const colors: ThemeColors = {
     alternative: '#43AEFC',
     muted: '#1098FC26',
     inverse: '#FCFCFC',
-    disabled: '#037DD680',
+    disabled: '#0376C980',
   },
   networks: {
     goerli: {

diff --git a/src/js/themes/lightTheme/colors.ts b/src/js/themes/lightTheme/colors.ts
@@ -36,12 +36,12 @@ export const colors: ThemeColors = {
     default: '#0000001A',
   },
   primary: {
-    default: '#037DD6',
+    default: '#0376C9',
     alternative: '#0260A4',
-    muted: '#037DD619',
+    muted: '#0376C919',
     inverse: '#FCFCFC',
-    disabled: '#037DD680',
-    shadow: '#037DD633',
+    disabled: '#0376C980',
+    shadow: '#0376C933',
   },
   secondary: {
     default: '#F66A0A',
@@ -51,12 +51,12 @@ export const colors: ThemeColors = {
     disabled: '#F66A0A80',
   },
   error: {
-    default: '#D73A49',
+    default: '#D73847',
     alternative: '#B92534',
-    muted: '#D73A4919',
+    muted: '#D7384719',
     inverse: '#FCFCFC',
-    disabled: '#D73A4980',
-    shadow: '#D73A4966',
+    disabled: '#D7384780',
+    shadow: '#D7384766',
   },
   warning: {
     default: '#F66A0A',
@@ -73,11 +73,11 @@ export const colors: ThemeColors = {
     disabled: '#28A74580',
   },
   info: {
-    default: '#037DD6',
+    default: '#0376C9',
     alternative: '#0260A4',
-    muted: '#037DD619',
+    muted: '#0376C919',
     inverse: '#FCFCFC',
-    disabled: '#037DD680',
+    disabled: '#0376C980',
   },
   networks: {
     goerli: {